<!-- source-hash: 4ddac380d848a0dcab830bec82a667f6 -->
Calculates how many tags fit within a single-line container using real DOM measurements, supporting both a fixed numeric limit and an automatic layout-aware mode.

## Key Components

### `useAutoLimitTags(options)`
Main hook that returns layout refs and the computed `visibleCount`.

**Options**
| Option | Type | Default | Description |
|---|---|---|---|
| `count` | `number` | — | Total number of tags |
| `limitTags` | `number \| "auto"` | `"auto"` | Fixed cap or DOM-measured auto mode |
| `placeholder` | `string` | `""` | Input placeholder used to reserve width |

**Returns (`UseAutoLimitTagsReturn`)**
| Ref | Element | Purpose |
|---|---|---|
| `middleRef` | `HTMLDivElement` | Container with tags + input (reads padding/gap from here) |
| `measureRef` | `HTMLDivElement` | Off-screen container holding copies of all tags |
| `textMeasureRef` | `HTMLSpanElement` | Hidden span measuring placeholder text width |
| `badgeRef` | `HTMLButtonElement` | The `+N` overflow badge (measures its width) |
| `inputRef` | `HTMLInputElement` | The text input (reads its `min-width`) |
| `visibleCount` | `number` | How many tags to render visibly |

## Usage Example

```typescript
const { visibleCount, middleRef, measureRef, textMeasureRef, badgeRef, inputRef } =
  useAutoLimitTags({ count: tags.length, placeholder: "Search..." })

return (
  <>
    {/* Off-screen measurement container */}
    <div ref={measureRef} style={{ position: "absolute", visibility: "hidden" }}>
      {tags.map((tag) => <TagChip key={tag.id} tag={tag} />)}
    </div>
    <span ref={textMeasureRef} style={{ visibility: "hidden", position: "absolute" }}>
      Search...
    </span>

    {/* Visible tag zone */}
    <div ref={middleRef} className="flex overflow-hidden gap-1 px-2">
      {tags.slice(0, visibleCount).map((tag) => <TagChip key={tag.id} tag={tag} />)}
      {visibleCount < tags.length && (
        <button ref={badgeRef}>+{tags.length - visibleCount}</button>
      )}
      <input ref={inputRef} placeholder="Search..." />
    </div>
  </>
)
```

> **Note:** `middleRef` must have `overflow-hidden`, explicit `gap`, and `padding` set via CSS — the hook reads these values directly with `getComputedStyle` and uses a `ResizeObserver` to recalculate on container width changes.