diff --git a/public/r/styles/base-luma/dialog.json b/public/r/styles/base-luma/dialog.json
index fcaca0381..e78813e1a 100644
--- a/public/r/styles/base-luma/dialog.json
+++ b/public/r/styles/base-luma/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-luma/header-1.json b/public/r/styles/base-luma/header-1.json
index fb02db824..bdb755eda 100644
--- a/public/r/styles/base-luma/header-1.json
+++ b/public/r/styles/base-luma/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-2.json b/public/r/styles/base-luma/header-2.json
index 61d105855..ae95d9456 100644
--- a/public/r/styles/base-luma/header-2.json
+++ b/public/r/styles/base-luma/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-3.json b/public/r/styles/base-luma/header-3.json
index 6840b6313..4a298248a 100644
--- a/public/r/styles/base-luma/header-3.json
+++ b/public/r/styles/base-luma/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-4.json b/public/r/styles/base-luma/header-4.json
index 4048d78d5..3ca6481bf 100644
--- a/public/r/styles/base-luma/header-4.json
+++ b/public/r/styles/base-luma/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json
index 693e1e935..05e37eea8 100644
--- a/public/r/styles/base-luma/header-5.json
+++ b/public/r/styles/base-luma/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/navigation-menu.json b/public/r/styles/base-luma/navigation-menu.json
index 4b6dd0254..3f00e2c0a 100644
--- a/public/r/styles/base-luma/navigation-menu.json
+++ b/public/r/styles/base-luma/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/on-media.json b/public/r/styles/base-luma/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-luma/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json
index ee42214e2..0e4d43364 100644
--- a/public/r/styles/base-luma/registry.json
+++ b/public/r/styles/base-luma/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-luma/sheet.json b/public/r/styles/base-luma/sheet.json
index b9e093363..8d2ad1084 100644
--- a/public/r/styles/base-luma/sheet.json
+++ b/public/r/styles/base-luma/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/dialog.json b/public/r/styles/base-lyra/dialog.json
index 14a95b8e7..31934bfdd 100644
--- a/public/r/styles/base-lyra/dialog.json
+++ b/public/r/styles/base-lyra/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-lyra/header-1.json b/public/r/styles/base-lyra/header-1.json
index 0c6cf556f..39040261d 100644
--- a/public/r/styles/base-lyra/header-1.json
+++ b/public/r/styles/base-lyra/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-2.json b/public/r/styles/base-lyra/header-2.json
index de9ea7e7e..0994b6fa0 100644
--- a/public/r/styles/base-lyra/header-2.json
+++ b/public/r/styles/base-lyra/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-3.json b/public/r/styles/base-lyra/header-3.json
index 692a5958b..ce43de7ca 100644
--- a/public/r/styles/base-lyra/header-3.json
+++ b/public/r/styles/base-lyra/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-4.json b/public/r/styles/base-lyra/header-4.json
index 1350739ab..a8bb19062 100644
--- a/public/r/styles/base-lyra/header-4.json
+++ b/public/r/styles/base-lyra/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json
index 2db015dec..c666f48db 100644
--- a/public/r/styles/base-lyra/header-5.json
+++ b/public/r/styles/base-lyra/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/navigation-menu.json b/public/r/styles/base-lyra/navigation-menu.json
index ef3f95886..8fb08e84f 100644
--- a/public/r/styles/base-lyra/navigation-menu.json
+++ b/public/r/styles/base-lyra/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/on-media.json b/public/r/styles/base-lyra/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-lyra/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json
index 5f4f21362..7a951fce8 100644
--- a/public/r/styles/base-lyra/registry.json
+++ b/public/r/styles/base-lyra/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-lyra/sheet.json b/public/r/styles/base-lyra/sheet.json
index 02b2fec44..dafb5f79d 100644
--- a/public/r/styles/base-lyra/sheet.json
+++ b/public/r/styles/base-lyra/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/dialog.json b/public/r/styles/base-maia/dialog.json
index 228c94f46..e4a10aa40 100644
--- a/public/r/styles/base-maia/dialog.json
+++ b/public/r/styles/base-maia/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-maia/header-1.json b/public/r/styles/base-maia/header-1.json
index 7c1cb6df3..817755925 100644
--- a/public/r/styles/base-maia/header-1.json
+++ b/public/r/styles/base-maia/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-2.json b/public/r/styles/base-maia/header-2.json
index 16c30ad25..ad1218347 100644
--- a/public/r/styles/base-maia/header-2.json
+++ b/public/r/styles/base-maia/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-3.json b/public/r/styles/base-maia/header-3.json
index fd0157b7f..f2fbc6f6f 100644
--- a/public/r/styles/base-maia/header-3.json
+++ b/public/r/styles/base-maia/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-4.json b/public/r/styles/base-maia/header-4.json
index 60663b63f..53b453cc9 100644
--- a/public/r/styles/base-maia/header-4.json
+++ b/public/r/styles/base-maia/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json
index d7567215a..194275a0f 100644
--- a/public/r/styles/base-maia/header-5.json
+++ b/public/r/styles/base-maia/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/navigation-menu.json b/public/r/styles/base-maia/navigation-menu.json
index f134fcb15..f188242e4 100644
--- a/public/r/styles/base-maia/navigation-menu.json
+++ b/public/r/styles/base-maia/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/on-media.json b/public/r/styles/base-maia/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-maia/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json
index c2bb2bef2..ba1b85ade 100644
--- a/public/r/styles/base-maia/registry.json
+++ b/public/r/styles/base-maia/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-maia/sheet.json b/public/r/styles/base-maia/sheet.json
index b0a223737..ac120b149 100644
--- a/public/r/styles/base-maia/sheet.json
+++ b/public/r/styles/base-maia/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/dialog.json b/public/r/styles/base-mira/dialog.json
index 95fc111a5..7251f173a 100644
--- a/public/r/styles/base-mira/dialog.json
+++ b/public/r/styles/base-mira/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-mira/header-1.json b/public/r/styles/base-mira/header-1.json
index 7c1cb6df3..817755925 100644
--- a/public/r/styles/base-mira/header-1.json
+++ b/public/r/styles/base-mira/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-2.json b/public/r/styles/base-mira/header-2.json
index 16c30ad25..ad1218347 100644
--- a/public/r/styles/base-mira/header-2.json
+++ b/public/r/styles/base-mira/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-3.json b/public/r/styles/base-mira/header-3.json
index fd0157b7f..f2fbc6f6f 100644
--- a/public/r/styles/base-mira/header-3.json
+++ b/public/r/styles/base-mira/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-4.json b/public/r/styles/base-mira/header-4.json
index 60663b63f..53b453cc9 100644
--- a/public/r/styles/base-mira/header-4.json
+++ b/public/r/styles/base-mira/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json
index d7567215a..194275a0f 100644
--- a/public/r/styles/base-mira/header-5.json
+++ b/public/r/styles/base-mira/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/navigation-menu.json b/public/r/styles/base-mira/navigation-menu.json
index be5427ae0..4cb0ebad6 100644
--- a/public/r/styles/base-mira/navigation-menu.json
+++ b/public/r/styles/base-mira/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/on-media.json b/public/r/styles/base-mira/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-mira/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json
index d36fc2bf9..8d83a000f 100644
--- a/public/r/styles/base-mira/registry.json
+++ b/public/r/styles/base-mira/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-mira/sheet.json b/public/r/styles/base-mira/sheet.json
index 5db14f846..040a9b84a 100644
--- a/public/r/styles/base-mira/sheet.json
+++ b/public/r/styles/base-mira/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/dialog.json b/public/r/styles/base-nova/dialog.json
index 146afef1c..cb223f7b4 100644
--- a/public/r/styles/base-nova/dialog.json
+++ b/public/r/styles/base-nova/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-nova/header-1.json b/public/r/styles/base-nova/header-1.json
index 0c6cf556f..39040261d 100644
--- a/public/r/styles/base-nova/header-1.json
+++ b/public/r/styles/base-nova/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-2.json b/public/r/styles/base-nova/header-2.json
index de9ea7e7e..0994b6fa0 100644
--- a/public/r/styles/base-nova/header-2.json
+++ b/public/r/styles/base-nova/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-3.json b/public/r/styles/base-nova/header-3.json
index 692a5958b..ce43de7ca 100644
--- a/public/r/styles/base-nova/header-3.json
+++ b/public/r/styles/base-nova/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-4.json b/public/r/styles/base-nova/header-4.json
index 1350739ab..a8bb19062 100644
--- a/public/r/styles/base-nova/header-4.json
+++ b/public/r/styles/base-nova/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json
index 2db015dec..c666f48db 100644
--- a/public/r/styles/base-nova/header-5.json
+++ b/public/r/styles/base-nova/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/navigation-menu.json b/public/r/styles/base-nova/navigation-menu.json
index f65bf8e00..879213914 100644
--- a/public/r/styles/base-nova/navigation-menu.json
+++ b/public/r/styles/base-nova/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/on-media.json b/public/r/styles/base-nova/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-nova/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json
index c2520628b..d43d3d7cc 100644
--- a/public/r/styles/base-nova/registry.json
+++ b/public/r/styles/base-nova/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-nova/sheet.json b/public/r/styles/base-nova/sheet.json
index 850551cee..5c1c6d852 100644
--- a/public/r/styles/base-nova/sheet.json
+++ b/public/r/styles/base-nova/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/dialog.json b/public/r/styles/base-rhea/dialog.json
index 9fe4ed1cd..701f422a1 100644
--- a/public/r/styles/base-rhea/dialog.json
+++ b/public/r/styles/base-rhea/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-rhea/header-1.json b/public/r/styles/base-rhea/header-1.json
index fb02db824..bdb755eda 100644
--- a/public/r/styles/base-rhea/header-1.json
+++ b/public/r/styles/base-rhea/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-2.json b/public/r/styles/base-rhea/header-2.json
index 61d105855..ae95d9456 100644
--- a/public/r/styles/base-rhea/header-2.json
+++ b/public/r/styles/base-rhea/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-3.json b/public/r/styles/base-rhea/header-3.json
index 6840b6313..4a298248a 100644
--- a/public/r/styles/base-rhea/header-3.json
+++ b/public/r/styles/base-rhea/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-4.json b/public/r/styles/base-rhea/header-4.json
index 4048d78d5..3ca6481bf 100644
--- a/public/r/styles/base-rhea/header-4.json
+++ b/public/r/styles/base-rhea/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json
index 693e1e935..05e37eea8 100644
--- a/public/r/styles/base-rhea/header-5.json
+++ b/public/r/styles/base-rhea/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/navigation-menu.json b/public/r/styles/base-rhea/navigation-menu.json
index 0e81bcdf4..93c918598 100644
--- a/public/r/styles/base-rhea/navigation-menu.json
+++ b/public/r/styles/base-rhea/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/on-media.json b/public/r/styles/base-rhea/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-rhea/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json
index 1d9d85ac5..05a2b539f 100644
--- a/public/r/styles/base-rhea/registry.json
+++ b/public/r/styles/base-rhea/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-rhea/sheet.json b/public/r/styles/base-rhea/sheet.json
index b9e093363..8d2ad1084 100644
--- a/public/r/styles/base-rhea/sheet.json
+++ b/public/r/styles/base-rhea/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/dialog.json b/public/r/styles/base-sera/dialog.json
index 70e3ce22a..dd17f8e34 100644
--- a/public/r/styles/base-sera/dialog.json
+++ b/public/r/styles/base-sera/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-sera/header-1.json b/public/r/styles/base-sera/header-1.json
index fb02db824..bdb755eda 100644
--- a/public/r/styles/base-sera/header-1.json
+++ b/public/r/styles/base-sera/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-2.json b/public/r/styles/base-sera/header-2.json
index 61d105855..ae95d9456 100644
--- a/public/r/styles/base-sera/header-2.json
+++ b/public/r/styles/base-sera/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-3.json b/public/r/styles/base-sera/header-3.json
index 6840b6313..4a298248a 100644
--- a/public/r/styles/base-sera/header-3.json
+++ b/public/r/styles/base-sera/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-4.json b/public/r/styles/base-sera/header-4.json
index 4048d78d5..3ca6481bf 100644
--- a/public/r/styles/base-sera/header-4.json
+++ b/public/r/styles/base-sera/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json
index 693e1e935..05e37eea8 100644
--- a/public/r/styles/base-sera/header-5.json
+++ b/public/r/styles/base-sera/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/navigation-menu.json b/public/r/styles/base-sera/navigation-menu.json
index bda0939e9..f4020aed8 100644
--- a/public/r/styles/base-sera/navigation-menu.json
+++ b/public/r/styles/base-sera/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/on-media.json b/public/r/styles/base-sera/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-sera/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json
index 1ee79fae1..e1e6e54e3 100644
--- a/public/r/styles/base-sera/registry.json
+++ b/public/r/styles/base-sera/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-sera/sheet.json b/public/r/styles/base-sera/sheet.json
index 14e157e3b..7a0a7f728 100644
--- a/public/r/styles/base-sera/sheet.json
+++ b/public/r/styles/base-sera/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/dialog.json b/public/r/styles/base-vega/dialog.json
index 42b73fa83..d23e66345 100644
--- a/public/r/styles/base-vega/dialog.json
+++ b/public/r/styles/base-vega/dialog.json
@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",
diff --git a/public/r/styles/base-vega/header-1.json b/public/r/styles/base-vega/header-1.json
index 7c1cb6df3..817755925 100644
--- a/public/r/styles/base-vega/header-1.json
+++ b/public/r/styles/base-vega/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-2.json b/public/r/styles/base-vega/header-2.json
index 16c30ad25..ad1218347 100644
--- a/public/r/styles/base-vega/header-2.json
+++ b/public/r/styles/base-vega/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-3.json b/public/r/styles/base-vega/header-3.json
index fd0157b7f..f2fbc6f6f 100644
--- a/public/r/styles/base-vega/header-3.json
+++ b/public/r/styles/base-vega/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end gap-1\", desktopClass)}>\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden max-w-none justify-end\", desktopClass)}\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-4.json b/public/r/styles/base-vega/header-4.json
index 60663b63f..53b453cc9 100644
--- a/public/r/styles/base-vega/header-4.json
+++ b/public/r/styles/base-vega/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class={cn(\n        \"absolute left-1/2 hidden max-w-none -translate-x-1/2\",\n        desktopClass\n      )}\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json
index d7567215a..194275a0f 100644
--- a/public/r/styles/base-vega/header-5.json
+++ b/public/r/styles/base-vega/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class={cn(\"ml-auto hidden justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class={cn(\"hidden\", dividerClass)} />\n  <HeaderContainer class={cn(\"hidden min-h-11\", desktopClass)}>\n    <NavigationMenu\n      media={desktopQuery}\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/navigation-menu.json b/public/r/styles/base-vega/navigation-menu.json
index 3e2bce997..cc52ed99e 100644
--- a/public/r/styles/base-vega/navigation-menu.json
+++ b/public/r/styles/base-vega/navigation-menu.json
@@ -7,10 +7,13 @@
     "@data-slot/navigation-menu@^1.1.2",
     "@lucide/astro"
   ],
+  "registryDependencies": [
+    "@fulldev/on-media"
+  ],
   "files": [
     {
       "path": "src/components/ui/navigation-menu/navigation-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { create } from \"@data-slot/navigation-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n  media?: string\n  mountStrategy?: \"lazy\" | \"eager\"\n  delayOpen?: number\n  delayClose?: number\n  openOnFocus?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  positionMethod?: \"absolute\" | \"fixed\"\n  safeTriangle?: boolean\n  debugSafeTriangle?: boolean\n}\n\nconst {\n  media,\n  mountStrategy,\n  class: className = \"\",\n  delayOpen = 0,\n  delayClose = 0,\n  openOnFocus,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 8,\n  alignOffset = 0,\n  positionMethod = \"absolute\",\n  safeTriangle,\n  debugSafeTriangle,\n  \"aria-label\": ariaLabel = \"Main\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  {...props}\n  aria-label={ariaLabel}\n  data-slot=\"navigation-menu\"\n  data-media={media}\n  data-mount-strategy={mountStrategy}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-position-method={positionMethod}\n  data-safe-triangle={safeTriangle}\n  data-debug-safe-triangle={debugSafeTriangle}\n  class={cn(\n    \"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center\",\n    className\n  )}\n>\n  <slot />\n  <NavigationMenuPositioner {side} {sideOffset} {align} {alignOffset} />\n</nav>\n\n<script>\n  import { onMedia } from \"@/lib/on-media\"\n\n  const roots = new Map<Element, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(\n      '[data-slot=\"navigation-menu\"]'\n    )) {\n      if (roots.has(root)) continue\n      roots.set(\n        root,\n        onMedia(\n          root.dataset.media ?? \"all\",\n          () => import(\"@data-slot/navigation-menu\"),\n          ({ createNavigationMenu }) => {\n            const controller = createNavigationMenu(root)\n            return () => controller.destroy()\n          },\n          {\n            root,\n            selector: '[data-slot=\"navigation-menu-trigger\"]',\n            event: \"navigation-menu:set\",\n          }\n        )\n      )\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const dispose of roots.values()) dispose()\n    roots.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/on-media.json b/public/r/styles/base-vega/on-media.json
new file mode 100644
index 000000000..69d81ab31
--- /dev/null
+++ b/public/r/styles/base-vega/on-media.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "on-media",
+  "title": "On Media",
+  "description": "Load and dispose browser behavior while a media query matches.",
+  "files": [
+    {
+      "path": "src/lib/on-media.ts",
+      "content": "type Trigger = { root: Element; selector: string; event?: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia<T>(\n  query: string,\n  load: () => Promise<T>,\n  mount: (module: T) => () => void,\n  trigger?: Trigger\n) {\n  const media = window.matchMedia(query)\n  let disposed = false\n  let epoch = 0\n  let cleanup: (() => void) | undefined\n  let pendingClick: HTMLElement | undefined\n  let pendingEvent: CustomEvent | undefined\n\n  const replayClick = () => {\n    const target = pendingClick\n    const event = pendingEvent\n    pendingClick = undefined\n    pendingEvent = undefined\n    if (event && trigger?.root.isConnected)\n      trigger.root.dispatchEvent(\n        new CustomEvent(event.type, { detail: event.detail })\n      )\n    else if (target?.isConnected)\n      target.dispatchEvent(new MouseEvent(\"click\", { cancelable: true }))\n  }\n\n  const update = async () => {\n    const current = ++epoch\n    pendingClick = undefined\n    pendingEvent = undefined\n    cleanup?.()\n    cleanup = undefined\n    if (!media.matches || disposed) return\n    try {\n      const module = await load()\n      if (disposed || !media.matches || current !== epoch) return\n      cleanup = mount(module)\n      replayClick()\n    } catch (error) {\n      if (!disposed && current === epoch) {\n        pendingClick = undefined\n        pendingEvent = undefined\n        console.error(error)\n      }\n    }\n  }\n  const click = (event: Event) => {\n    if (\n      !trigger ||\n      cleanup ||\n      disposed ||\n      !media.matches ||\n      event.defaultPrevented\n    )\n      return\n    if (!(event.target instanceof Element)) return\n    const target = event.target.closest<HTMLElement>(trigger.selector)\n    if (!target || !trigger.root.contains(target)) return\n    pendingClick ??= target\n    pendingEvent = undefined\n    event.preventDefault()\n  }\n  const request = (event: Event) => {\n    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)\n      return\n    if (!(event instanceof CustomEvent)) return\n    pendingEvent = event\n    pendingClick = undefined\n  }\n  const change = () => void update()\n  media.addEventListener(\"change\", change)\n  trigger?.root.addEventListener(\"click\", click, true)\n  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)\n  change()\n  return () => {\n    disposed = true\n    epoch++\n    pendingClick = undefined\n    pendingEvent = undefined\n    media.removeEventListener(\"change\", change)\n    trigger?.root.removeEventListener(\"click\", click, true)\n    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)\n    cleanup?.()\n    cleanup = undefined\n  }\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json
index 19cd0846d..cc92c80b6 100644
--- a/public/r/styles/base-vega/registry.json
+++ b/public/r/styles/base-vega/registry.json
@@ -595,7 +595,8 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button"
+        "@fulldev/button",
+        "@fulldev/on-media"
       ],
       "files": [
         {
@@ -641,6 +642,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1261,6 +1266,9 @@
         "@data-slot/navigation-menu@^1.1.2",
         "@lucide/astro"
       ],
+      "registryDependencies": [
+        "@fulldev/on-media"
+      ],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4850,6 +4858,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/public/r/styles/base-vega/sheet.json b/public/r/styles/base-vega/sheet.json
index 87a73acf8..8e6aec92b 100644
--- a/public/r/styles/base-vega/sheet.json
+++ b/public/r/styles/base-vega/sheet.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/registry.json b/registry.json
index 4298d8a31..8173d4f45 100644
--- a/registry.json
+++ b/registry.json
@@ -539,7 +539,7 @@
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/dialog/",
       "dependencies": ["@data-slot/dialog@^1.1.2", "@lucide/astro"],
-      "registryDependencies": ["@fulldev/button"],
+      "registryDependencies": ["@fulldev/button", "@fulldev/on-media"],
       "files": [
         {
           "path": "src/components/ui/dialog/dialog.astro",
@@ -584,6 +584,10 @@
         {
           "path": "src/components/ui/dialog/index.ts",
           "type": "registry:ui"
+        },
+        {
+          "path": "src/lib/dialog.ts",
+          "type": "registry:lib"
         }
       ]
     },
@@ -1138,6 +1142,7 @@
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/navigation-menu/",
       "dependencies": ["@data-slot/navigation-menu@^1.1.2", "@lucide/astro"],
+      "registryDependencies": ["@fulldev/on-media"],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -4299,6 +4304,18 @@
         "@fulldev/sidebar-1"
       ]
     },
+    {
+      "name": "on-media",
+      "type": "registry:lib",
+      "title": "On Media",
+      "description": "Load and dispose browser behavior while a media query matches.",
+      "files": [
+        {
+          "path": "src/lib/on-media.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "accordion-examples",
       "type": "registry:example",
diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index e32d54eab..8e65d10a1 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/sheet"
 
 type Props = HTMLAttributes<"header"> & {
+  fold?: "lg" | "xl"
   logo: {
     label: string
     href: string
@@ -53,6 +54,7 @@ type Props = HTMLAttributes<"header"> & {
 }
 
 const {
+  fold = "lg",
   class: className,
   logo,
   navigation,
@@ -61,6 +63,11 @@ const {
   menu,
   ...props
 } = Astro.props
+
+const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)"
+const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)"
+const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex"
+const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden"
 ---
 
 <Header class={cn("", className)} {...props}>
@@ -78,8 +85,9 @@ const {
     </HeaderGroup>
     {navigation.length > 0 && (
       <NavigationMenu
+        media={desktopQuery}
         aria-label={navigationLabel}
-        class="hidden flex-none justify-start lg:flex"
+        class={cn("hidden flex-none justify-start", desktopClass)}
       >
         <NavigationMenuList class="justify-start">
           {navigation.map((item, index) => (
@@ -92,7 +100,7 @@ const {
         </NavigationMenuList>
       </NavigationMenu>
     )}
-    <HeaderGroup class="ml-auto hidden flex-1 justify-end lg:flex">
+    <HeaderGroup class={cn("ml-auto hidden flex-1 justify-end", desktopClass)}>
       {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
@@ -107,7 +115,7 @@ const {
         </Button>
       ))}
     </HeaderGroup>
-    <Sheet class="lg:hidden">
+    <Sheet media={mobileQuery} class={mobileClass}>
       <SheetTrigger
         variant="ghost"
         size="icon-sm"
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 1bcd4d5ad..2b47520f2 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/sheet"
 
 type Props = HTMLAttributes<"header"> & {
+  fold?: "lg" | "xl"
   logo: {
     label: string
     href: string
@@ -53,6 +54,7 @@ type Props = HTMLAttributes<"header"> & {
 }
 
 const {
+  fold = "lg",
   class: className,
   logo,
   navigation,
@@ -61,6 +63,11 @@ const {
   menu,
   ...props
 } = Astro.props
+
+const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)"
+const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)"
+const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex"
+const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden"
 ---
 
 <Header variant="floating" class={cn("", className)} {...props}>
@@ -77,8 +84,12 @@ const {
       </Logo>
     </HeaderGroup>
     <NavigationMenu
+      media={desktopQuery}
       aria-label={navigationLabel}
-      class="absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex"
+      class={cn(
+        "absolute left-1/2 hidden max-w-none -translate-x-1/2",
+        desktopClass
+      )}
     >
       <NavigationMenuList>
         {navigation.map((item, index) => (
@@ -90,7 +101,7 @@ const {
         ))}
       </NavigationMenuList>
     </NavigationMenu>
-    <HeaderGroup class="ml-auto hidden justify-end lg:flex">
+    <HeaderGroup class={cn("ml-auto hidden justify-end", desktopClass)}>
       {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
@@ -105,7 +116,7 @@ const {
         </Button>
       ))}
     </HeaderGroup>
-    <Sheet class="lg:hidden">
+    <Sheet media={mobileQuery} class={mobileClass}>
       <SheetTrigger
         variant="ghost"
         size="icon-sm"
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index d9b1a0f4b..4b291e308 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/sheet"
 
 type Props = HTMLAttributes<"header"> & {
+  fold?: "lg" | "xl"
   logo: {
     label: string
     href: string
@@ -54,6 +55,7 @@ type Props = HTMLAttributes<"header"> & {
 }
 
 const {
+  fold = "lg",
   class: className,
   logo,
   navigation,
@@ -62,6 +64,11 @@ const {
   menu,
   ...props
 } = Astro.props
+
+const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)"
+const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)"
+const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex"
+const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden"
 ---
 
 <Header class={cn("border-b", className)} {...props}>
@@ -77,10 +84,11 @@ const {
         <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
-    <HeaderGroup class="ml-auto hidden justify-end gap-1 lg:flex">
+    <HeaderGroup class={cn("ml-auto hidden justify-end gap-1", desktopClass)}>
       <NavigationMenu
+        media={desktopQuery}
         aria-label={navigationLabel}
-        class="hidden max-w-none justify-end lg:flex"
+        class={cn("hidden max-w-none justify-end", desktopClass)}
       >
         <NavigationMenuList>
           {navigation.map((item, index) => (
@@ -110,7 +118,7 @@ const {
         </Button>
       ))}
     </HeaderGroup>
-    <Sheet class="lg:hidden">
+    <Sheet media={mobileQuery} class={mobileClass}>
       <SheetTrigger
         variant="ghost"
         size="icon-sm"
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index 2db347f37..91b3011f7 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -29,6 +29,7 @@ import {
 } from "@/components/ui/sheet"
 
 type Props = HTMLAttributes<"header"> & {
+  fold?: "lg" | "xl"
   logo: {
     label: string
     href: string
@@ -68,6 +69,7 @@ type Props = HTMLAttributes<"header"> & {
 }
 
 const {
+  fold = "lg",
   class: className,
   logo,
   navigation,
@@ -76,6 +78,11 @@ const {
   menu,
   ...props
 } = Astro.props
+
+const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)"
+const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)"
+const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex"
+const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden"
 ---
 
 <Header class={cn("border-b", className)} {...props}>
@@ -92,8 +99,12 @@ const {
       </Logo>
     </HeaderGroup>
     <NavigationMenu
+      media={desktopQuery}
       aria-label={navigationLabel}
-      class="absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex"
+      class={cn(
+        "absolute left-1/2 hidden max-w-none -translate-x-1/2",
+        desktopClass
+      )}
       align="center"
     >
       <NavigationMenuList>
@@ -165,7 +176,7 @@ const {
         )}
       </NavigationMenuList>
     </NavigationMenu>
-    <HeaderGroup class="ml-auto hidden justify-end lg:flex">
+    <HeaderGroup class={cn("ml-auto hidden justify-end", desktopClass)}>
       {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
@@ -180,7 +191,7 @@ const {
         </Button>
       ))}
     </HeaderGroup>
-    <Sheet class="lg:hidden">
+    <Sheet media={mobileQuery} class={mobileClass}>
       <SheetTrigger
         variant="ghost"
         size="icon-sm"
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index 1094cffb6..a6017467b 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -30,6 +30,7 @@ import {
 } from "@/components/ui/sheet"
 
 type Props = HTMLAttributes<"header"> & {
+  fold?: "lg" | "xl"
   logo: {
     label: string
     href: string
@@ -69,6 +70,7 @@ type Props = HTMLAttributes<"header"> & {
 }
 
 const {
+  fold = "lg",
   class: className,
   logo,
   navigation,
@@ -77,6 +79,12 @@ const {
   menu,
   ...props
 } = Astro.props
+
+const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)"
+const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)"
+const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex"
+const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden"
+const dividerClass = fold === "xl" ? "xl:block" : "lg:block"
 ---
 
 <Header
@@ -95,7 +103,7 @@ const {
         <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
-    <HeaderGroup class="ml-auto hidden justify-end lg:flex">
+    <HeaderGroup class={cn("ml-auto hidden justify-end", desktopClass)}>
       {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
@@ -110,7 +118,7 @@ const {
         </Button>
       ))}
     </HeaderGroup>
-    <Sheet class="lg:hidden">
+    <Sheet media={mobileQuery} class={mobileClass}>
       <SheetTrigger
         variant="ghost"
         size="icon-sm"
@@ -186,9 +194,10 @@ const {
       </SheetContent>
     </Sheet>
   </HeaderContainer>
-  <Separator class="hidden lg:block" />
-  <HeaderContainer class="hidden min-h-11 lg:flex">
+  <Separator class={cn("hidden", dividerClass)} />
+  <HeaderContainer class={cn("hidden min-h-11", desktopClass)}>
     <NavigationMenu
+      media={desktopQuery}
       aria-label={navigationLabel}
       class="max-w-none justify-start"
       align="start"
diff --git a/src/components/ui/dialog/dialog.astro b/src/components/ui/dialog/dialog.astro
index 12de31441..706d68bc1 100644
--- a/src/components/ui/dialog/dialog.astro
+++ b/src/components/ui/dialog/dialog.astro
@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from "astro/types"
 
 type Props = HTMLAttributes<"div"> & {
+  media?: string
   defaultOpen?: boolean
   closeOnClickOutside?: boolean
   closeOnEscape?: boolean
@@ -10,6 +11,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  media,
   class: className,
   defaultOpen,
   closeOnClickOutside,
@@ -21,6 +23,7 @@ const {
 ---
 
 <div
+  data-media={media}
   data-slot="dialog"
   data-default-open={defaultOpen}
   data-close-on-click-outside={closeOnClickOutside}
@@ -34,14 +37,7 @@ const {
 </div>
 
 <script>
-  import { create } from "@data-slot/dialog"
+  import { initializeDialogs } from "@/lib/dialog"
 
-  const controllers: ReturnType<typeof create> = []
-  const initialize = () => controllers.push(...create())
-  initialize()
-  document.addEventListener("astro:page-load", initialize)
-  document.addEventListener("astro:before-swap", () => {
-    for (const controller of controllers) controller.destroy()
-    controllers.length = 0
-  })
+  initializeDialogs()
 </script>
diff --git a/src/components/ui/navigation-menu/navigation-menu.astro b/src/components/ui/navigation-menu/navigation-menu.astro
index 4cbf89d1d..49c6d40cd 100644
--- a/src/components/ui/navigation-menu/navigation-menu.astro
+++ b/src/components/ui/navigation-menu/navigation-menu.astro
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import NavigationMenuPositioner from "./navigation-menu-positioner.astro"
 
 type Props = HTMLAttributes<"nav"> & {
+  media?: string
   mountStrategy?: "lazy" | "eager"
   delayOpen?: number
   delayClose?: number
@@ -20,6 +21,7 @@ type Props = HTMLAttributes<"nav"> & {
 }
 
 const {
+  media,
   mountStrategy,
   class: className = "",
   delayOpen = 0,
@@ -41,6 +43,7 @@ const {
   {...props}
   aria-label={ariaLabel}
   data-slot="navigation-menu"
+  data-media={media}
   data-mount-strategy={mountStrategy}
   data-delay-open={delayOpen}
   data-delay-close={delayClose}
@@ -62,14 +65,36 @@ const {
 </nav>
 
 <script>
-  import { create } from "@data-slot/navigation-menu"
+  import { onMedia } from "@/lib/on-media"
 
-  const controllers: ReturnType<typeof create> = []
-  const initialize = () => controllers.push(...create())
+  const roots = new Map<Element, () => void>()
+  const initialize = () => {
+    for (const root of document.querySelectorAll<HTMLElement>(
+      '[data-slot="navigation-menu"]'
+    )) {
+      if (roots.has(root)) continue
+      roots.set(
+        root,
+        onMedia(
+          root.dataset.media ?? "all",
+          () => import("@data-slot/navigation-menu"),
+          ({ createNavigationMenu }) => {
+            const controller = createNavigationMenu(root)
+            return () => controller.destroy()
+          },
+          {
+            root,
+            selector: '[data-slot="navigation-menu-trigger"]',
+            event: "navigation-menu:set",
+          }
+        )
+      )
+    }
+  }
   initialize()
   document.addEventListener("astro:page-load", initialize)
   document.addEventListener("astro:before-swap", () => {
-    for (const controller of controllers) controller.destroy()
-    controllers.length = 0
+    for (const dispose of roots.values()) dispose()
+    roots.clear()
   })
 </script>
diff --git a/src/components/ui/sheet/sheet.astro b/src/components/ui/sheet/sheet.astro
index 84b8d63ab..549b6a8cc 100644
--- a/src/components/ui/sheet/sheet.astro
+++ b/src/components/ui/sheet/sheet.astro
@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from "astro/types"
 
 type Props = HTMLAttributes<"div"> & {
+  media?: string
   defaultOpen?: boolean
   closeOnClickOutside?: boolean
   closeOnEscape?: boolean
@@ -9,6 +10,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  media,
   class: className,
   defaultOpen,
   closeOnClickOutside,
@@ -19,6 +21,7 @@ const {
 ---
 
 <div
+  data-media={media}
   data-slot="dialog"
   class={className}
   data-default-open={defaultOpen}
@@ -31,14 +34,7 @@ const {
 </div>
 
 <script>
-  import { create } from "@data-slot/dialog"
+  import { initializeDialogs } from "@/lib/dialog"
 
-  const controllers: ReturnType<typeof create> = []
-  const initialize = () => controllers.push(...create())
-  initialize()
-  document.addEventListener("astro:page-load", initialize)
-  document.addEventListener("astro:before-swap", () => {
-    for (const controller of controllers) controller.destroy()
-    controllers.length = 0
-  })
+  initializeDialogs()
 </script>
diff --git a/src/content/pages/components/dialog.mdx b/src/content/pages/components/dialog.mdx
index ef5cfc7c2..b8459f233 100644
--- a/src/content/pages/components/dialog.mdx
+++ b/src/content/pages/components/dialog.mdx
@@ -87,6 +87,18 @@ Long content can scroll while the header stays in view.
 
 <Example name="dialog-rtl" />
 
+## Responsive activation
+
+Pass a `media` query to `Dialog` to import and initialize its controller only
+while that query matches. Leaving the query destroys the controller and releases
+its portals and scroll lock. Returning initializes it again. A trigger click
+during the first download is performed once loading finishes, provided the query
+still matches.
+
+The default has no breakpoint restriction. Keep the query and CSS visibility in
+the owning header block or site. Header blocks use `fold="lg"` by default and
+accept `fold="xl"`; that choice controls both visibility and activation.
+
 ## API Reference
 
 Source: [`src/components/ui/dialog`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/dialog)
diff --git a/src/content/pages/components/navigation-menu.mdx b/src/content/pages/components/navigation-menu.mdx
index 84c23e1e6..404f36c81 100644
--- a/src/content/pages/components/navigation-menu.mdx
+++ b/src/content/pages/components/navigation-menu.mdx
@@ -86,6 +86,18 @@ Use `mountStrategy="eager"` when an integration needs to query closed content
 through the document. Both strategies include content in server-rendered HTML;
 neither adds a no-JavaScript fallback.
 
+## Responsive activation
+
+Pass a `media` query to `NavigationMenu` to import and initialize its controller only
+while that query matches. Leaving the query destroys the controller and releases
+its portals and scroll lock. Returning initializes it again. A trigger click
+during the first download is performed once loading finishes, provided the query
+still matches.
+
+The default has no breakpoint restriction. Keep the query and CSS visibility in
+the owning header block or site. Header blocks use `fold="lg"` by default and
+accept `fold="xl"`; that choice controls both visibility and activation.
+
 ## API Reference
 
 Source: [`src/components/ui/navigation-menu`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/navigation-menu)
diff --git a/src/content/pages/components/sheet.mdx b/src/content/pages/components/sheet.mdx
index e367b6404..08d564b10 100644
--- a/src/content/pages/components/sheet.mdx
+++ b/src/content/pages/components/sheet.mdx
@@ -72,6 +72,18 @@ Use `showCloseButton={false}` on `SheetContent` to hide the close button.
 
 <Example name="sheet-rtl" />
 
+## Responsive activation
+
+Pass a `media` query to `Sheet` to import and initialize its controller only
+while that query matches. Leaving the query destroys the controller and releases
+its portals and scroll lock. Returning initializes it again. A trigger click
+during the first download is performed once loading finishes, provided the query
+still matches.
+
+The default has no breakpoint restriction. Keep the query and CSS visibility in
+the owning header block or site. Header blocks use `fold="lg"` by default and
+accept `fold="xl"`; that choice controls both visibility and activation.
+
 ## API Reference
 
 Source: [`src/components/ui/sheet`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/sheet)
diff --git a/src/lib/dialog.ts b/src/lib/dialog.ts
new file mode 100644
index 000000000..9f2fdc815
--- /dev/null
+++ b/src/lib/dialog.ts
@@ -0,0 +1,29 @@
+import { onMedia } from "./on-media"
+
+const roots = new Map<Element, () => void>()
+
+export function initializeDialogs() {
+  for (const root of document.querySelectorAll<HTMLElement>(
+    '[data-slot="dialog"]'
+  )) {
+    if (roots.has(root)) continue
+    roots.set(
+      root,
+      onMedia(
+        root.dataset.media ?? "all",
+        () => import("@data-slot/dialog"),
+        ({ createDialog }) => {
+          const controller = createDialog(root)
+          return () => controller.destroy()
+        },
+        { root, selector: '[data-slot="dialog-trigger"]', event: "dialog:set" }
+      )
+    )
+  }
+}
+
+document.addEventListener("astro:page-load", initializeDialogs)
+document.addEventListener("astro:before-swap", () => {
+  for (const dispose of roots.values()) dispose()
+  roots.clear()
+})
diff --git a/src/lib/on-media.ts b/src/lib/on-media.ts
new file mode 100644
index 000000000..8baf71cf2
--- /dev/null
+++ b/src/lib/on-media.ts
@@ -0,0 +1,89 @@
+type Trigger = { root: Element; selector: string; event?: string }
+
+/** Import and mount only while the query matches; dispose on exit. */
+export function onMedia<T>(
+  query: string,
+  load: () => Promise<T>,
+  mount: (module: T) => () => void,
+  trigger?: Trigger
+) {
+  const media = window.matchMedia(query)
+  let disposed = false
+  let epoch = 0
+  let cleanup: (() => void) | undefined
+  let pendingClick: HTMLElement | undefined
+  let pendingEvent: CustomEvent | undefined
+
+  const replayClick = () => {
+    const target = pendingClick
+    const event = pendingEvent
+    pendingClick = undefined
+    pendingEvent = undefined
+    if (event && trigger?.root.isConnected)
+      trigger.root.dispatchEvent(
+        new CustomEvent(event.type, { detail: event.detail })
+      )
+    else if (target?.isConnected)
+      target.dispatchEvent(new MouseEvent("click", { cancelable: true }))
+  }
+
+  const update = async () => {
+    const current = ++epoch
+    pendingClick = undefined
+    pendingEvent = undefined
+    cleanup?.()
+    cleanup = undefined
+    if (!media.matches || disposed) return
+    try {
+      const module = await load()
+      if (disposed || !media.matches || current !== epoch) return
+      cleanup = mount(module)
+      replayClick()
+    } catch (error) {
+      if (!disposed && current === epoch) {
+        pendingClick = undefined
+        pendingEvent = undefined
+        console.error(error)
+      }
+    }
+  }
+  const click = (event: Event) => {
+    if (
+      !trigger ||
+      cleanup ||
+      disposed ||
+      !media.matches ||
+      event.defaultPrevented
+    )
+      return
+    if (!(event.target instanceof Element)) return
+    const target = event.target.closest<HTMLElement>(trigger.selector)
+    if (!target || !trigger.root.contains(target)) return
+    pendingClick ??= target
+    pendingEvent = undefined
+    event.preventDefault()
+  }
+  const request = (event: Event) => {
+    if (cleanup || disposed || !media.matches || event.target !== trigger?.root)
+      return
+    if (!(event instanceof CustomEvent)) return
+    pendingEvent = event
+    pendingClick = undefined
+  }
+  const change = () => void update()
+  media.addEventListener("change", change)
+  trigger?.root.addEventListener("click", click, true)
+  if (trigger?.event) trigger.root.addEventListener(trigger.event, request)
+  change()
+  return () => {
+    disposed = true
+    epoch++
+    pendingClick = undefined
+    pendingEvent = undefined
+    media.removeEventListener("change", change)
+    trigger?.root.removeEventListener("click", click, true)
+    if (trigger?.event) trigger.root.removeEventListener(trigger.event, request)
+    cleanup?.()
+    cleanup = undefined
+  }
+}
diff --git a/tests/browser/docs-search.test.mjs b/tests/browser/docs-search.test.mjs
index 2adc4ed67..228f18a69 100644
--- a/tests/browser/docs-search.test.mjs
+++ b/tests/browser/docs-search.test.mjs
@@ -7,7 +7,7 @@ import { createReadStream, existsSync, statSync } from "node:fs"
 import { createServer } from "node:http"
 import { extname, join, resolve } from "node:path"
 import { after, before, test } from "node:test"
-import { chromium } from "playwright"
+import { chromium, firefox, webkit } from "playwright"
 
 const root = resolve(process.env.DIST ?? "dist")
 const types = {
@@ -74,3 +74,96 @@ test("the docs search lists every page and opens a result", async (t) => {
   await page.keyboard.press("Enter")
   await page.waitForURL(`${origin}/components/accordion/`)
 })
+
+for (const type of [chromium, firefox, webkit])
+  test(`${type.name()} search shortcut survives a pending dialog import`, async (t) => {
+    const browser = await type.launch()
+    t.after(() => browser.close())
+    const page = await browser.newPage()
+    const delay = await delayDialog(page)
+    await page.goto(`${origin}/docs/theming/`, {
+      waitUntil: "domcontentloaded",
+    })
+    await delay.started
+    await page.keyboard.press(
+      await page.evaluate(() =>
+        /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent)
+          ? "Meta+k"
+          : "Control+k"
+      )
+    )
+    delay.release()
+    await page.locator("[data-slot=command-input]:visible").waitFor()
+    assert.equal(
+      await page
+        .locator("[data-slot=command-input]:visible")
+        .evaluate((input) => document.activeElement === input),
+      true
+    )
+  })
+
+for (const type of [chromium, webkit])
+  test(`${type.name()} original search tap holds keyboard focus while loading`, async (t) => {
+    const browser = await type.launch()
+    t.after(() => browser.close())
+    const page = await browser.newPage({
+      viewport: { width: 390, height: 844 },
+      hasTouch: true,
+      isMobile: true,
+    })
+    const delay = await delayDialog(page)
+    await page.goto(`${origin}/docs/theming/`, {
+      waitUntil: "domcontentloaded",
+    })
+    await delay.started
+    await page.evaluate(() => {
+      window.__searchGestures = []
+      document.addEventListener("click", (event) => {
+        if (
+          event.target.closest(
+            "[data-search-dialog] [data-slot=dialog-trigger]"
+          )
+        )
+          window.__searchGestures.push({
+            trusted: event.isTrusted,
+            holder: document.activeElement?.matches(
+              'input[aria-hidden="true"]'
+            ),
+          })
+      })
+    })
+    await page.getByRole("button", { name: "Search documentation" }).tap()
+    assert.deepEqual(await page.evaluate(() => window.__searchGestures), [
+      { trusted: true, holder: true },
+    ])
+    delay.release()
+    const input = page.locator("[data-slot=command-input]:visible")
+    await input.waitFor()
+    await page.waitForFunction(() =>
+      document.activeElement?.matches("[data-slot=command-input]")
+    )
+    assert.deepEqual(await page.evaluate(() => window.__searchGestures), [
+      { trusted: true, holder: true },
+    ])
+  })
+
+async function delayDialog(page) {
+  let release
+  const pending = new Promise((done) => {
+    release = done
+  })
+  let intercepted
+  const started = new Promise((done) => {
+    intercepted = done
+  })
+  await page.route("**/*.js", async (route) => {
+    const response = await route.fetch()
+    const body = await response.text()
+    if (body.includes("Dialog requires dialog-content slot")) {
+      intercepted()
+      await pending
+    }
+    await route.fulfill({ response, body })
+  })
+  return { started, release }
+}
diff --git a/tests/browser/responsive-menu.test.mjs b/tests/browser/responsive-menu.test.mjs
new file mode 100644
index 000000000..a5eda8274
--- /dev/null
+++ b/tests/browser/responsive-menu.test.mjs
@@ -0,0 +1,409 @@
+import assert from "node:assert/strict"
+import { mkdirSync, rmSync, writeFileSync } from "node:fs"
+import { join, resolve } from "node:path"
+import { after, before, test } from "node:test"
+import { build, preview } from "astro"
+import tailwindcss from "@tailwindcss/vite"
+import { chromium, firefox, webkit } from "playwright"
+
+const src = resolve("src")
+const root = resolve("node_modules/.cache/responsive-menu-site")
+const page = (dialog, router = false) => `---
+import { ClientRouter } from "astro:transitions"
+import { Sheet, SheetTrigger, SheetContent, SheetTitle } from "${src}/components/ui/sheet"
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "${src}/components/ui/dialog"
+import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from "${src}/components/ui/navigation-menu"
+import { SidebarProvider, Sidebar, SidebarTrigger } from "${src}/components/ui/sidebar"
+---
+<html lang="en"><head><title>Responsive menus</title>${router ? "<ClientRouter />" : ""}
+<style>body{min-height:150vh} [data-slot="dialog"][data-media]{display:none} @media(width < 64rem){[data-slot="dialog"][data-media]{display:block} nav{display:none}} [data-slot="dialog-content"]{background:white;padding:20px}</style>
+</head><body>
+<Sheet media="(width < 64rem)"><SheetTrigger>Menu</SheetTrigger><SheetContent><SheetTitle>Mobile navigation</SheetTitle><a href="#target">Inside sheet</a></SheetContent></Sheet>
+<NavigationMenu media="(min-width:64rem)"><NavigationMenuList><NavigationMenuItem value="products"><NavigationMenuTrigger>Products</NavigationMenuTrigger><NavigationMenuContent><a href="#target">Product one</a></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>
+${dialog ? "<Dialog><DialogTrigger>Search</DialogTrigger><DialogContent><DialogTitle>Search dialog</DialogTitle></DialogContent></Dialog>" : ""}
+<SidebarProvider><Sidebar><a href="#target">Sidebar link</a></Sidebar><SidebarTrigger /></SidebarProvider>
+<a href="/router-two/">Next page</a><div id="target">Destination</div></body></html>`
+const headerPage = (number, fold) => `---
+import Header from "${src}/components/blocks/header-${number}.astro"
+import "../header.css"
+---
+<html lang="en"><head><title>Header ${number} ${fold}</title></head><body>
+<Header fold="${fold}" logo={{label:"Example",href:"/"}} navigation={[{label:"Products",href:"#products",links:[{label:"Product one",href:"#target"}]},{label:"About",href:"#about"}]} buttons={[{label:"Contact",href:"#contact"}]} navigationLabel="Primary" menu={{label:"Menu",title:"Mobile navigation",description:"All pages",closeLabel:"Close menu"}} />
+<main id="target">Destination</main></body></html>`
+let server
+let origin
+before(async () => {
+  rmSync(root, { recursive: true, force: true })
+  mkdirSync(join(root, "src/pages"), { recursive: true })
+  writeFileSync(join(root, "src/pages/index.astro"), page(true))
+  writeFileSync(join(root, "src/pages/pending.astro"), page(false))
+  writeFileSync(join(root, "src/pages/router-one.astro"), page(true, true))
+  writeFileSync(join(root, "src/pages/router-two.astro"), page(true, true))
+  writeFileSync(
+    join(root, "src/header.css"),
+    `@import "tailwindcss"; @source "${src}/components"; body {min-height:150vh} button {min-width:32px;min-height:32px} [data-slot="dialog-content"] {position:fixed;top:0;right:0;background:white;padding:24px}`
+  )
+  for (let number = 1; number <= 5; number++)
+    for (const fold of ["lg", "xl"])
+      writeFileSync(
+        join(root, `src/pages/header-${number}-${fold}.astro`),
+        headerPage(number, fold)
+      )
+  const config = {
+    root,
+    configFile: false,
+    logLevel: "error",
+    vite: { plugins: [tailwindcss()], resolve: { alias: { "@": src } } },
+  }
+  await build(config)
+  server = await preview({ ...config, server: { port: 0 } })
+  origin = `http://localhost:${server.port}`
+})
+after(async () => {
+  await server?.stop()
+  rmSync(root, { recursive: true, force: true })
+})
+
+for (const type of [chromium, firefox, webkit]) {
+  test(`${type.name()} actual headers use the selected fold for visibility and lifecycle`, async (t) => {
+    const browser = await type.launch()
+    t.after(() => browser.close())
+    const page = await browser.newPage()
+    const errors = []
+    page.on("pageerror", (error) => errors.push(error.message))
+    for (let number = 1; number <= 5; number++)
+      for (const fold of ["lg", "xl"]) {
+        const boundary = fold === "lg" ? 1024 : 1280
+        await page.setViewportSize({ width: boundary - 1, height: 900 })
+        await page.goto(`${origin}/header-${number}-${fold}/`)
+        const navigation = page.locator('[data-slot="navigation-menu"]')
+        const sheet = page.locator('[data-slot="dialog"][data-media]')
+        const trigger = page.getByRole("button", { name: "Menu", exact: true })
+        assert.equal(
+          await navigation.isVisible(),
+          false,
+          `header ${number} ${fold}: mobile navigation`
+        )
+        assert.equal(await trigger.isVisible(), true)
+        assert.equal(
+          await sheet.getAttribute("data-media"),
+          `(width < ${fold === "lg" ? 64 : 80}rem)`
+        )
+        await trigger.click()
+        await page
+          .getByRole("dialog", { name: "Mobile navigation", exact: true })
+          .waitFor()
+        await page.setViewportSize({ width: boundary, height: 900 })
+        await page
+          .getByRole("dialog", { name: "Mobile navigation", exact: true })
+          .waitFor({ state: "hidden" })
+        assert.equal(await trigger.isVisible(), false)
+        assert.equal(await navigation.isVisible(), true)
+        assert.equal(
+          await page.evaluate(() => document.body.style.overflow),
+          ""
+        )
+        if (number >= 4) {
+          await navigation
+            .getByRole("button", { name: "Products", exact: true })
+            .click()
+          await page
+            .getByRole("link", { name: "Product one", exact: true })
+            .waitFor()
+        }
+        await page.setViewportSize({ width: boundary - 1, height: 900 })
+        if (number >= 4)
+          await page
+            .getByRole("link", { name: "Product one", exact: true })
+            .waitFor({ state: "hidden" })
+        assert.equal(await navigation.isVisible(), false)
+        await trigger.click()
+        await page
+          .getByRole("dialog", { name: "Mobile navigation", exact: true })
+          .waitFor()
+        await page.keyboard.press("Escape")
+        await page
+          .getByRole("dialog", { name: "Mobile navigation", exact: true })
+          .waitFor({ state: "hidden" })
+      }
+    assert.deepEqual(errors, [])
+  })
+
+  test(`${type.name()} disposes and recreates after ClientRouter navigation`, async (t) => {
+    const browser = await type.launch()
+    t.after(() => browser.close())
+    const page = await browser.newPage({
+      viewport: { width: 390, height: 900 },
+    })
+    await page.goto(origin + "/router-one/")
+    await page.getByRole("button", { name: "Menu", exact: true }).click()
+    await page.getByRole("dialog", { name: "Mobile navigation" }).waitFor()
+    await page.evaluate(() => {
+      window.__menuSwap = false
+      document.addEventListener(
+        "astro:page-load",
+        () => {
+          window.__menuSwap = true
+        },
+        { once: true }
+      )
+      document.querySelector('a[href="/router-two/"]').click()
+    })
+    await page.waitForFunction(() => window.__menuSwap)
+    assert.equal(await page.evaluate(() => document.body.style.overflow), "")
+    await page.getByRole("button", { name: "Menu", exact: true }).click()
+    await page.getByRole("dialog", { name: "Mobile navigation" }).waitFor()
+    await page.keyboard.press("Escape")
+    await page.getByRole("button", { name: "Search", exact: true }).click()
+    await page.getByRole("dialog", { name: "Search dialog" }).waitFor()
+  })
+
+  test(`${type.name()} responsive controllers and portal cleanup`, async (t) => {
+    const browser = await type.launch()
+    t.after(() => browser.close())
+    const page = await browser.newPage({
+      viewport: { width: 1440, height: 900 },
+    })
+    const errors = []
+    page.on("pageerror", (e) => errors.push(e.message))
+    await page.goto(origin)
+    const sheet = page.locator('[data-slot="dialog"][data-media]')
+    assert.equal(await sheet.getAttribute("data-state"), null)
+    await page.getByRole("button", { name: "Search", exact: true }).click()
+    await page
+      .getByRole("dialog", { name: "Search dialog" })
+      .waitFor({ state: "visible" })
+    await page.keyboard.press("Escape")
+    await page.setViewportSize({ width: 390, height: 900 })
+    await page.getByRole("button", { name: "Menu", exact: true }).click()
+    await page
+      .getByRole("dialog", { name: "Mobile navigation" })
+      .waitFor({ state: "visible" })
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await page
+      .getByRole("dialog", { name: "Mobile navigation" })
+      .waitFor({ state: "hidden" })
+    assert.equal(await page.evaluate(() => document.body.style.overflow), "")
+    await page.getByRole("button", { name: "Products", exact: true }).click()
+    await page
+      .getByRole("link", { name: "Product one" })
+      .waitFor({ state: "visible" })
+    await page.setViewportSize({ width: 390, height: 900 })
+    await page
+      .getByRole("link", { name: "Product one" })
+      .waitFor({ state: "hidden" })
+    await page.getByRole("button", { name: "Menu", exact: true }).click()
+    await page
+      .getByRole("dialog", { name: "Mobile navigation" })
+      .waitFor({ state: "visible" })
+    await page.keyboard.press("Escape")
+    await page
+      .getByRole("dialog", { name: "Mobile navigation" })
+      .waitFor({ state: "hidden" })
+    assert.deepEqual(errors, [])
+  })
+
+  for (const cancel of [false, true])
+    test(`${type.name()} first click during import, exit=${cancel}`, async (t) => {
+      const browser = await type.launch()
+      t.after(() => browser.close())
+      const page = await browser.newPage({
+        viewport: { width: 390, height: 900 },
+      })
+      let release
+      const delayed = new Promise((resolve) => {
+        release = resolve
+      })
+      let intercepted
+      const started = new Promise((resolve) => {
+        intercepted = resolve
+      })
+      await page.route("**/*.js", async (route) => {
+        const response = await route.fetch()
+        const body = await response.text()
+        if (body.includes("Dialog requires dialog-content slot")) {
+          intercepted()
+          await delayed
+        }
+        await route.fulfill({ response, body })
+      })
+      await page.goto(origin + "/pending/", { waitUntil: "domcontentloaded" })
+      await started
+      await page.evaluate(() => {
+        window.__menuClicks = []
+        document.addEventListener("click", (event) => {
+          if (event.target.closest('[data-slot="dialog-trigger"]'))
+            window.__menuClicks.push(event.isTrusted)
+        })
+      })
+      await page.getByRole("button", { name: "Menu", exact: true }).click()
+      assert.deepEqual(await page.evaluate(() => window.__menuClicks), [true])
+      if (cancel) await page.setViewportSize({ width: 1440, height: 900 })
+      release()
+      if (cancel) {
+        await page.waitForLoadState("networkidle")
+        assert.equal(
+          await page
+            .locator('[data-slot="dialog-content"]:not([hidden])')
+            .count(),
+          0
+        )
+        await page.setViewportSize({ width: 390, height: 900 })
+        await page.getByRole("button", { name: "Menu", exact: true }).click()
+      }
+      await page
+        .getByRole("dialog", { name: "Mobile navigation" })
+        .waitFor({ state: "visible" })
+      assert.ok((await page.evaluate(() => window.__menuClicks)).every(Boolean))
+    })
+
+  for (const action of ["open", "click", "latest-close", "exit", "swap"])
+    test(`${type.name()} pending programmatic navigation request: ${action}`, async (t) => {
+      const browser = await type.launch()
+      t.after(() => browser.close())
+      const page = await browser.newPage({
+        viewport: { width: 1440, height: 900 },
+      })
+      let release
+      const pending = new Promise((done) => {
+        release = done
+      })
+      let intercepted
+      const started = new Promise((done) => {
+        intercepted = done
+      })
+      await page.route("**/*.js", async (route) => {
+        const response = await route.fetch()
+        const body = await response.text()
+        if (body.includes("NavigationMenu requires")) {
+          intercepted()
+          await pending
+        }
+        await route.fulfill({ response, body })
+      })
+      await page.goto(origin + "/pending/", { waitUntil: "domcontentloaded" })
+      await started
+      if (action === "click")
+        await page
+          .getByRole("button", { name: "Products", exact: true })
+          .click()
+      else
+        await page.evaluate((close) => {
+          document.addEventListener(
+            "astro:page-load",
+            () => {
+              const root = document.querySelector(
+                '[data-slot="navigation-menu"]'
+              )
+              root.dispatchEvent(
+                new CustomEvent("navigation-menu:set", {
+                  detail: { value: "products" },
+                })
+              )
+              if (close)
+                root.dispatchEvent(
+                  new CustomEvent("navigation-menu:set", {
+                    detail: { value: null },
+                  })
+                )
+            },
+            { once: true }
+          )
+          document.dispatchEvent(new Event("astro:page-load"))
+        }, action === "latest-close")
+      if (action === "exit")
+        await page.setViewportSize({ width: 390, height: 900 })
+      if (action === "swap")
+        await page.evaluate(() =>
+          document.dispatchEvent(new Event("astro:before-swap"))
+        )
+      release()
+      const link = page.getByRole("link", { name: "Product one", exact: true })
+      if (action === "open" || action === "click") await link.waitFor()
+      else {
+        await page.waitForLoadState("networkidle")
+        if (action === "exit")
+          await page.setViewportSize({ width: 1440, height: 900 })
+        if (action === "swap")
+          await page.evaluate(() =>
+            document.dispatchEvent(new Event("astro:page-load"))
+          )
+        await page.waitForLoadState("networkidle")
+        assert.equal(await link.isVisible(), false)
+        await page
+          .getByRole("button", { name: "Products", exact: true })
+          .click()
+        await link.waitFor()
+      }
+    })
+
+  for (const action of ["sidebar", "page-load", "exit"])
+    test(`${type.name()} pending programmatic dialog request: ${action}`, async (t) => {
+      const browser = await type.launch()
+      t.after(() => browser.close())
+      const page = await browser.newPage({
+        viewport: { width: 390, height: 900 },
+      })
+      let release
+      const delayed = new Promise((resolve) => {
+        release = resolve
+      })
+      let intercepted
+      const started = new Promise((resolve) => {
+        intercepted = resolve
+      })
+      await page.route("**/*.js", async (route) => {
+        const response = await route.fetch()
+        const body = await response.text()
+        if (body.includes("Dialog requires dialog-content slot")) {
+          intercepted()
+          await delayed
+        }
+        await route.fulfill({ response, body })
+      })
+      await page.goto(origin + "/pending/", { waitUntil: "domcontentloaded" })
+      await started
+      if (action === "sidebar")
+        await page
+          .getByRole("button", { name: "Toggle Sidebar", exact: true })
+          .click()
+      else
+        await page.evaluate(() => {
+          document.addEventListener(
+            "astro:page-load",
+            () => {
+              document
+                .querySelector('[data-slot="dialog"][data-media]')
+                .dispatchEvent(
+                  new CustomEvent("dialog:set", { detail: { open: true } })
+                )
+            },
+            { once: true }
+          )
+          document.dispatchEvent(new Event("astro:page-load"))
+        })
+      if (action === "exit")
+        await page.setViewportSize({ width: 1440, height: 900 })
+      release()
+      if (action === "exit") {
+        await page.waitForLoadState("networkidle")
+        await page.setViewportSize({ width: 390, height: 900 })
+        await page.waitForLoadState("networkidle")
+        assert.equal(
+          await page.getByRole("dialog", { name: "Mobile navigation" }).count(),
+          0
+        )
+      } else {
+        const name = action === "sidebar" ? "Sidebar" : "Mobile navigation"
+        await page.getByRole("dialog", { name, exact: true }).waitFor()
+        await page.keyboard.press("Escape")
+        if (action === "sidebar")
+          assert.equal(
+            await page
+              .locator('[data-slot="sidebar-wrapper"]')
+              .getAttribute("data-open-mobile"),
+            "false"
+          )
+      }
+    })
+}
diff --git a/tests/on-media.test.mjs b/tests/on-media.test.mjs
new file mode 100644
index 000000000..358a37671
--- /dev/null
+++ b/tests/on-media.test.mjs
@@ -0,0 +1,82 @@
+import assert from "node:assert/strict"
+import { test } from "node:test"
+
+const { onMedia } = await import(
+  new URL("../src/lib/on-media.ts", import.meta.url)
+)
+
+test("media loading cancels stale imports and recreates on return", async () => {
+  const media = new EventTarget()
+  media.matches = false
+  const previous = globalThis.window
+  globalThis.window = { matchMedia: () => media }
+  let loads = 0
+  let mounts = 0
+  let destroys = 0
+  const resolve = []
+  const dispose = onMedia(
+    "test",
+    () => {
+      loads++
+      return new Promise((done) => resolve.push(done))
+    },
+    () => {
+      mounts++
+      return () => destroys++
+    }
+  )
+  const change = (matches) => {
+    media.matches = matches
+    media.dispatchEvent(new Event("change"))
+  }
+  try {
+    assert.equal(loads, 0)
+    change(true)
+    change(false)
+    resolve.shift()({})
+    await Promise.resolve()
+    assert.equal(mounts, 0)
+    change(true)
+    resolve.shift()({})
+    await Promise.resolve()
+    assert.equal(mounts, 1)
+    change(false)
+    assert.equal(destroys, 1)
+    change(true)
+    resolve.shift()({})
+    await Promise.resolve()
+    assert.equal(mounts, 2)
+    dispose()
+    assert.equal(destroys, 2)
+    change(true)
+    assert.equal(loads, 3)
+  } finally {
+    dispose()
+    globalThis.window = previous
+  }
+})
+
+test("disposing during import prevents a later mount", async () => {
+  const previous = globalThis.window
+  const media = new EventTarget()
+  media.matches = true
+  globalThis.window = { matchMedia: () => media }
+  let done
+  let mounts = 0
+  const dispose = onMedia(
+    "all",
+    () =>
+      new Promise((resolve) => {
+        done = resolve
+      }),
+    () => {
+      mounts++
+      return () => {}
+    }
+  )
+  dispose()
+  done({})
+  await Promise.resolve()
+  assert.equal(mounts, 0)
+  globalThis.window = previous
+})