<!-- source-hash: 0d6f9a8deca3671804c89abef2d0469f -->
A reusable React component for selecting and creating tags with search autocomplete, chip display, and tag limit enforcement.

## Key Components

### `TagsSelector`
Main exported component that renders a search input with inline tag chips, an autocomplete dropdown, and a tag counter.

**Props (`TagsSelectorProps`):**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `availableTags` | `Tag[]` | — | Pool of tags to search from |
| `selectedTagIds` | `number[]` | — | Currently selected tag IDs |
| `onTagsChange` | `(tagIds: number[]) => void` | — | Callback when selection changes |
| `onCreateTag` | `(name: string) => Promise<Tag \| null>` | — | Optional async tag creation handler |
| `maxTags` | `number` | `10` | Maximum selectable tags |
| `allowCreate` | `boolean` | `true` | Enables the "Create tag" option |
| `disabled` | `boolean` | `false` | Disables all interactions |

### Internal Helpers

- `handleTagAdd` — Adds a tag if not already selected and under the limit
- `handleTagRemove` — Removes a tag chip from selection
- `handleCreateTag` — Calls `onCreateTag`, auto-selects the result, manages loading state
- `getFilteredTagsForAutocomplete` — Filters available tags by search query, excluding already selected
- `tagExistsWithName` — Case-insensitive duplicate check before showing "Create" option

## Usage Example

```typescript
import { TagsSelector } from './tags-selector';

function BlogPostForm() {
  const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);

  const handleCreateTag = async (name: string) => {
    const res = await fetch('/api/tags', {
      method: 'POST',
      body: JSON.stringify({ name }),
    });
    return res.json(); // { id, name, slug }
  };

  return (
    <TagsSelector
      availableTags={[
        { id: 1, name: 'MSP', slug: 'msp' },
        { id: 2, name: 'AI', slug: 'ai' },
      ]}
      selectedTagIds={selectedTagIds}
      onTagsChange={setSelectedTagIds}
      onCreateTag={handleCreateTag}
      maxTags={5}
      placeholder="Search tags..."
    />
  );
}
```

> **Note:** The dropdown auto-opens on focus and supports keyboard creation — pressing `Enter` while typing a new tag name triggers `handleCreateTag` when `allowCreate` is enabled.