<!-- source-hash: 39e74029d3a13eedba8671d2a0c9a8f5 -->
Storybook stories for the `TagSearchInput` UI component, covering all interactive states and layout behaviors including overflow, tag limits, and disabled mode.

## Key Components

**Exported Stories**

| Story | Description |
|---|---|
| `Empty` | No tags, bare search input |
| `WithTags` | A few tags fitting on one line |
| `OverflowWithBadge` | Many tags triggering the automatic `+N` overflow badge |
| `Resizable` | Drag-to-resize container demonstrating dynamic `+N` badge recalculation |
| `NarrowContainer` | Narrow container collapsing all tags into `+N` |
| `Disabled` | Non-interactive disabled state |
| `WithSubmit` | Press Enter to add typed values as tags |
| `LimitTags` | Hard cap of 2 visible tags via `limitTags` prop |
| `NoClearAll` | Hides the clear-all button via `showClearAll={false}` |
| `AllVariants` | All states rendered together for visual comparison |

**Sample Data**

- `sampleTags` — 3 tags (`site`, `env` prefixes)
- `manyTags` — 8 tags across multiple prefixes (`site`, `env`, `os`, `role`, `team`, `region`, `status`)

## Usage Example

```typescript
import { TagSearchInput, TagSearchOption } from '../components/ui/tag-search-input';
import { useState } from 'react';

const tags: TagSearchOption[] = [
  { label: 'site:chicago', value: 'site:chicago' },
  { label: 'env:production', value: 'env:production' },
];

function Example() {
  const [activeTags, setActiveTags] = useState(tags);
  const [search, setSearch] = useState('');

  return (
    <TagSearchInput
      tags={activeTags}
      searchValue={search}
      onSearchChange={setSearch}
      onTagRemove={(val) =>
        setActiveTags((t) => t.filter((x) => x.value !== val))
      }
      onClearAll={() => { setActiveTags([]); setSearch(''); }}
      onSubmit={(val) => {
        if (val.trim()) {
          setActiveTags((t) => [...t, { label: val, value: val }]);
          setSearch('');
        }
      }}
      limitTags={3}
      placeholder="Search devices..."
    />
  );
}
```