Pill Label Divider

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "separator-002" (Pill Label Divider) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/separator-002.json

Registry item: https://vibeui.ru/r/separator-002.json
Installs to: components/vibeui/separator-002.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A divider whose caption sits in a pill carrying its own background: the page-coloured-text trick breaks on gradients, while a pill works on any surface.

A divider with a pill caption: the position comes from grid columns and the pill carries its own fill. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Separator002 } from "@/components/vibeui/separator-002"

<Separator002 label="or" align="center" />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-separator-002-* palette — do not swap it for your theme tokens
- the pill's own fill: page-coloured text falls apart over a gradient or an image
- the grid columns instead of margins — the lines must meet the caption at any alignment
- role=separator with aria-label: without them the caption reads as ordinary text between blocks
- the uppercase and tracking of the caption: they mark it as a utility label, not a heading
- the thin pill border — on a light background the fill alone does not separate from the line

## 6. You may change
- the caption text and its length
- the caption position through align: start, center or end
- the line colour through the --vibeui-separator-002-line variable
- the divider width through max-width

## 7. Rules
- An empty label leaves an empty pill — use a plain divider in that case.
- The caption does not wrap: shorten long text rather than stretching the pill.
- role=separator without aria-orientation counts as horizontal — that is intended here.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.