<!-- source-hash: fecbf4975a9d0b0bedd4c57c8ae9a440 -->
A two-level filter UI component that renders tag key/value selections as grouped checkbox lists, using a `"key:value"` string format to represent selected tags.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `TagKeyValueFilter` | Component | Main filter component rendering key checkboxes and dynamic value sections |
| `TagKeyConfig` | Interface | Defines a tag key with its `key`, `label`, and available `values` |
| `TagValueOption` | Interface | Defines a single selectable value with `id`, `label`, and optional `count` |
| `TagKeyValueFilterProps` | Interface | Props for the main component |

**Internal logic:**
- `selectedMap` — parses `selectedTags` strings into `Map<key, Set<values>>` for O(1) lookups
- `handleKeyToggle` — enables/disables an entire key group; uses an empty marker (`"key:"`) to keep value sections visible
- `handleValueToggle` — toggles individual values; preserves the empty marker when the last value is unchecked

## Usage Example

```typescript
import { TagKeyValueFilter } from "./tag-key-value-filter"

const keys = [
  {
    key: "site",
    label: "Site",
    values: [
      { id: "chicago", label: "Chicago", count: 12 },
      { id: "dallas",  label: "Dallas",  count: 8  },
    ],
  },
  {
    key: "env",
    label: "Environment",
    values: [
      { id: "production", label: "Production" },
      { id: "staging",    label: "Staging"    },
    ],
  },
]

function MyFilters() {
  const [selectedTags, setSelectedTags] = useState<string[]>([])

  return (
    <TagKeyValueFilter
      keys={keys}
      selectedTags={selectedTags}   // e.g. ["site:chicago", "env:production"]
      onTagsChange={setSelectedTags}
      keysTitle="Filter by Tag"
    />
  )
}
```

> **Note:** Selected tags use the `"key:value"` format (e.g. `"site:chicago"`). An empty marker `"site:"` is used internally to keep a key's value section rendered even when no values are checked yet.