{
  "context": "This criteria evaluates how well the engineer uses @headlessui/react's Popover and PopoverGroup components to implement coordinated dropdown menus. The focus is on proper use of the PopoverGroup coordination feature to ensure only one popover is open at a time, along with correct component composition and state management.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "PopoverGroup usage",
      "description": "Uses PopoverGroup component to wrap multiple Popover components, enabling automatic coordination where opening one popover closes others in the group.",
      "max_score": 30
    },
    {
      "name": "Popover component structure",
      "description": "Correctly uses Popover component (or PopoverButton and PopoverPanel) for each menu item with proper parent-child composition pattern.",
      "max_score": 20
    },
    {
      "name": "PopoverButton implementation",
      "description": "Uses PopoverButton component for each menu trigger button to handle click interactions and state management.",
      "max_score": 15
    },
    {
      "name": "PopoverPanel implementation",
      "description": "Uses PopoverPanel component for each dropdown content area, ensuring proper association with corresponding PopoverButton.",
      "max_score": 15
    },
    {
      "name": "Automatic coordination behavior",
      "description": "Demonstrates that the PopoverGroup automatically closes other popovers when one opens, without manual state management code.",
      "max_score": 10
    },
    {
      "name": "Outside click handling",
      "description": "Leverages Popover's built-in outside click detection to close dropdowns when clicking outside the navigation area, without implementing custom click handlers.",
      "max_score": 10
    }
  ]
}