# Divider Component

## Описание

Разделитель — UI-компонент для визуального и/или пространственного разделения элементов, расположенных друг под другом в конструкторе интерфейса. Занимает столько места по высоте, сколько выделено ему в сетке (аналогично `Map`/`VideoViewer` — компонент реально резервирует указанную высоту, а не сжимается по контенту). Поддерживает два режима: видимая полоса или чистый отступ без линии, настраиваемую толщину и цвет полосы, и привязку полосы к верху/центру/низу выделенной области. Величина зазора вокруг полосы регулируется не отдельным пропсом, а высотой самого компонента в сетке конструктора.

## Пропсы

| Название       | Тип                             | По умолчанию          | Описание                                                                                                                                                                                                                                                    |
| -------------- | ------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`           | `string`                        | `crypto.randomUUID()` | Уникальный идентификатор компонента                                                                                                                                                                                                                         |
| `wrapperClass` | `string`                        | `""`                  | CSS-классы для обёртки компонента                                                                                                                                                                                                                           |
| `type`         | `"line" \| "empty"`             | `"line"`              | `line` — видимая полоса, `empty` — чистый отступ без полосы                                                                                                                                                                                                 |
| `width`        | `number`                        | `2`                   | Толщина полосы в пикселях (применяется только при `type="line"`)                                                                                                                                                                                            |
| `color`        | `string`                        | `"bg-max"`            | Класс цвета полосы из общей палитры (`bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`) — сам по себе только переопределяет `--bg-color`, красит его рядом стоящий статический класс `bg-(--bg-color)` (как в `Button.svelte`) |
| `anchor`       | `"top" \| "center" \| "bottom"` | `"center"`            | Положение полосы внутри выделенной компоненту высоты сетки                                                                                                                                                                                                  |

## События

Компонент не генерирует специфические события.

## Примеры

### Полоса по центру

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.Divider type="line" width={2} color="bg-max" anchor="center" />
```

### Толстая цветная полоса у верха области

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.Divider type="line" width={4} color="bg-blue" anchor="top" />
```

### Чистый отступ без полосы

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.Divider type="empty" />
```

## Внутренняя архитектура

### Реактивность

- Объект `anchorClass` определяет CSS-классы `justify-*` для положения полосы (`top`/`center`/`bottom`)

### Сторы и зависимости

- Используется `twMerge` для объединения Tailwind CSS классов

### Директивы

- `twMerge` для объединения классов обёртки и полосы
- `$props()` для получения пропсов компонента

### Слоты

- Компонент не использует внешних слотов

## Конструктор свойств (DividerProps.svelte)

### Описание

Компонент `DividerProps.svelte` предоставляет визуальный интерфейс для редактирования свойств разделителя. Поддерживает два режима отображения: для конструктора и для редактирования.

### Пропсы конструктора

| Название           | Тип                                                                                                                                 | По умолчанию | Описание                                                |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- |
| `component`        | `UIComponent & { properties: Partial<IDividerProps> }`                                                                              | `-`          | Объект компонента с его свойствами                      |
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`          | Коллбэк для обновления свойств компонента               |
| `forConstructor`   | `boolean`                                                                                                                           | `true`       | Режим отображения (для конструктора или редактирования) |

### Особенности конструктора

- `type`/`anchor` — выбор через кнопки (`UI.Select type="buttons"`)
- `color` — переиспользует общий сниппет `CommonSnippets snippet="Colors"`, но привязан к собственному свойству `color`, а не к `wrapperClass`
- `width` — числовой ввод (1-20 px)

## Заметки

### Адаптивность

- Ширина полосы всегда 100% ширины выделенной области, толщина настраивается отдельно
- Величина зазора вокруг полосы не выделена в отдельный пропс намеренно — компонент всегда занимает полную высоту, выделенную ему в сетке конструктора (см. Ограничения), поэтому нужный зазор достигается изменением высоты самого компонента, а `anchor` определяет положение полосы внутри этой высоты

### Ограничения

- В превью (`GUIPreview.svelte`) компонент всегда получает явную высоту по размеру сетки (как `Map`/`VideoViewer`) — без этого пустая ячейка без компонента схлопывается почти в ноль, так как сетка превью не резервирует высоту неиспользуемых строк

### Производительность

- Компонент не содержит состояния и внутренних эффектов, перерисовывается только при изменении пропсов