<!-- source-hash: 2efd92dbc250ad80e5820ff475ea0636 -->
Storybook stories for `TagKeyValueFilter` and related UI components, demonstrating tag-based filtering workflows across standalone, combined, and modal contexts.

## Key Components

| Export | Description |
|---|---|
| `Standalone` | Basic `TagKeyValueFilter` with live selection display |
| `WithPreselected` | Filter initialized with pre-selected `key:value` tag strings |
| `WithTagSearchInput` | Combined `TagSearchInput` + `TagKeyValueFilter` for a full search-and-filter workflow |
| `InsideFilterModal` | `TagKeyValueFilter` embedded inside `FilterModal` alongside standard filter groups |
| `FilterModalTagsOnly` | `FilterModal` with only tag filters and no regular filter groups |

**Sample data shapes used across stories:**
- `sampleKeys` — `TagKeyConfig[]` covering `site`, `env`, `os`, and `role` dimensions with associated value counts
- `sampleFilterGroups` — `FilterGroup[]` for a standard `Status` filter group

## Usage Example

```typescript
// Standalone controlled usage
const [tags, setTags] = useState<string[]>([]);

<TagKeyValueFilter
  keys={sampleKeys}           // TagKeyConfig[] — key/value tree
  selectedTags={tags}         // string[] in "key:value" format
  onTagsChange={setTags}
/>

// Inside FilterModal with mixed filter groups
<FilterModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  filterGroups={sampleFilterGroups}
  currentFilters={filters}
  onFilterChange={setFilters}
  tagFilterKeys={sampleKeys}
  selectedTags={tags}
  onTagsChange={setTags}
  tagFilterTitle="Device Tags"
/>
```

> Tags follow the `"key:value"` string format (e.g., `"site:chicago"`, `"env:production"`). All stories use controlled state via React's `useState`.