<!-- source-hash: eee1f55a6c5cf2349c0897b18c2dfcf1 -->
A reusable hover-triggered dropdown component that displays a list of clickable items. Uses fixed positioning via `getBoundingClientRect` to render correctly inside overflow-hidden containers like modals and sheets.

## Key Components

### Interfaces

| Export | Description |
|--------|-------------|
| `HoverDropdownItem` | Defines each row: `label`, optional `icon`, `href`, `onClick`, `targetPlatform`, `path`, and an independent `secondaryAction` button |
| `HoverDropdownRenderAnchorArgs` | Arguments passed to the `renderAnchor` slot for custom link routing |
| `HoverDropdownProps` | Component props: `items`, `side`, `hideDelay`, `className`, `renderAnchor` |

### Component

**`HoverDropdown`** — Main export. Wraps any trigger element and shows a positioned dropdown on hover (or tap). Each row supports three render modes:
- **Link row** — rendered via `renderAnchor` (defaults to plain `<a>`)
- **Button row** — rendered as `<button>` when `onClick` is provided
- **Non-interactive row** — rendered as `<span>` when neither `href` nor `onClick` is present (useful when only a `secondaryAction` applies)

The dropdown auto-positions right → left → above/below based on available viewport space.

## Usage Example

```typescript
// Basic usage
<HoverDropdown items={[{ label: 'Blog Post', href: '/blog/1' }]}>
  <span>Blog Posts (3)</span>
</HoverDropdown>

// With custom anchor renderer (e.g., chat runtime routing)
<HoverDropdown
  items={[
    {
      label: 'Design Doc',
      href: '/docs/design',
      path: 'docs/design',
      targetPlatform: 'markdown',
      secondaryAction: {
        icon: <AskIcon />,
        label: 'Ask about this',
        onClick: () => handleAsk('design'),
      },
    },
  ]}
  renderAnchor={({ href, className, children }) => (
    <NavLinkAnchorViaRuntime href={href} className={className}>
      {children}
    </NavLinkAnchorViaRuntime>
  )}
>
  <Chip>Documents</Chip>
</HoverDropdown>
```