<!-- source-hash: e33f919319929a558fb7204fa5689d69 -->
A client-side search input component with debounced querying, filter chip management, keyboard navigation, and a popover-based results dropdown.

## Key Components

### Types
- **`SearchResult`** — Shape of a single search result (`id`, `title`, `description`, `icon`, `type`, `metadata`)
- **`FilterChipData`** — Inline filter chip definition with optional variant (`selected`, `category`, `subcategory`, `tag`)
- **`SearchInputProps`** — Full prop surface for the component (controlled/uncontrolled, debounce, grouping, chip limits, adornments)

### Exported Component
- **`SearchInput`** — Main component combining:
  - Debounced input via `useDebounce`
  - Auto-limiting visible chips via `useAutoLimitTags`
  - Radix UI `Popover` for the results dropdown
  - Radix UI `ScrollArea` for scrollable results
  - Keyboard navigation (`ArrowUp`, `ArrowDown`, `Enter`, `Escape`, `Backspace`)
  - Grouped results support via `groupBy` prop
  - Modifier-key-aware result selection (supports cmd/ctrl/middle-click pass-through)
  - Hidden chips overflow popup via `HiddenTagsPopup`

## Usage Example

```typescript
import { SearchInput, SearchResult } from "./search-input"

const results: SearchResult[] = [
  { id: "1", title: "Ticket #1042", description: "Printer offline", type: "ticket" },
  { id: "2", title: "Client: Acme Corp", type: "client" },
]

<SearchInput
  placeholder="Search tickets, clients..."
  debounceMs={300}
  results={results}
  minQueryLength={2}
  onResultSelect={(result, modifiers) => {
    if (modifiers?.metaKey) {
      openInNewTab(result.path)
    } else {
      navigate(result.path)
    }
  }}
  filterChips={[{ id: "open", label: "Status: Open", variant: "selected" }]}
  onFilterRemove={(id) => removeFilter(id)}
  limitTags="auto"
/>
```