<!-- source-hash: 58919dce29eb76ba4f2de97d75e7c643 -->
A client-side search input component with debounced querying, keyboard navigation, grouped results, filter chips, and auto-limiting tag display.

## Key Components

### Interfaces
- **`SearchResult`** — Shape of each result item (`id`, `title`, `description`, `icon`, `type`, `metadata`, etc.)
- **`FilterChipData`** — Filter chip descriptor with `id`, `label`, and optional `variant`
- **`SearchInputProps`** — Full props interface for the component; see table below

### Helpers
- **`chipVariantToTagVariant`** — Maps `FilterChipData.variant` to the `Tag` component's `variant` prop

### Main Export
- **`SearchInput`** — The primary component

| Prop | Type | Default | Purpose |
|---|---|---|---|
| `value` / `defaultValue` | `string` | `""` | Controlled / uncontrolled input value |
| `debounceMs` | `number` | `300` | Debounce delay before `onChange` fires |
| `results` | `SearchResult[]` | `[]` | Dropdown result items |
| `filterChips` | `FilterChipData[]` | `[]` | Inline filter tags before the input |
| `limitTags` | `number \| "auto"` | `"auto"` | Max visible chips (auto-measures width) |
| `groupBy` | `(r) => string` | — | Groups results by a derived key |
| `minQueryLength` | `number` | `2` | Min chars before showing dropdown |
| `onResultSelect` | `(result, modifiers) => void` | — | Called on row select with modifier-key state |

## Usage Example

```typescript
import { SearchInput, SearchResult } from "@openframe/ui"

const results: SearchResult[] = [
  { id: "1", title: "Dashboard", description: "Main view", type: "page" },
  { id: "2", title: "Devices",   description: "All endpoints",  type: "page" },
]

export function GlobalSearch() {
  const [query, setQuery] = React.useState("")

  return (
    <SearchInput
      value={query}
      onChange={setQuery}
      results={results}
      debounceMs={300}
      minQueryLength={2}
      onResultSelect={(result, modifiers) => {
        if (modifiers?.metaKey) {
          // Open in background tab
          window.open(`/${result.path}`, "_blank")
        } else {
          router.push(`/${result.path}`)
        }
      }}
      filterChips={[
        { id: "online", label: "Online", variant: "selected" },
      ]}
      onFilterRemove={(id) => console.log("Remove filter", id)}
      groupBy={(r) => r.type ?? "Other"}
    />
  )
}
```

**Source:** [`search-input.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/search-input.tsx)