# ColorPicker Component

## Описание

Палитра - это интерактивный UI-компонент, который позволяет выбирать цвета с помощью HSV-палитры и настройки яркости. Компонент поддерживает два режима работы: цветовой (HSV) и белый (градации серого), а также предоставляет превью цвета, его RGB и HEX значения.

## Пропсы

| Название       | Тип                         | По умолчанию          | Описание                                                     |
| -------------- | --------------------------- | --------------------- | ------------------------------------------------------------ |
| `id`           | `string`                    | `crypto.randomUUID()` | Уникальный идентификатор компонента                          |
| `wrapperClass` | `string`                    | `""`                  | Дополнительные CSS-классы для обертки компонента             |
| `label`        | `object`                    | `-`                   | Настройки заголовка компонента                               |
| `label.name`   | `string`                    | `""`                  | Текст заголовка компонента                                   |
| `label.class`  | `string`                    | `""`                  | CSS-классы для стилизации текста заголовка                   |
| `value`        | `number[]`                  | `[0, 0, 0]`           | Текущее значение цвета в формате RGB-массива (3 числа 0-255) |
| `readonly`     | `boolean`                   | `false`               | Режим только для чтения (без возможности изменения цвета)    |
| `onChange`     | `(value: number[]) => void` | `() => {}`            | Обработчик изменения цвета                                   |

## События

| Название | Тип                                | Описание                                                      |
| -------- | ---------------------------------- | ------------------------------------------------------------- |
| onChange | ([number, number, number]) => void | Срабатывает при изменении цвета, передает массив RGB значений |

## Примеры

### Базовое использование

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

  let selectedColor = [186, 25, 255]

  const handleColorChange = (newColor) => {
    selectedColor = newColor
    console.log("Новый цвет:", newColor)
  }
</script>

<UI.ColorPicker label={{ name: "Выбор цвета из палитры" }} bind:value={selectedColor} onChange={handleColorChange} />
```

### С начальным значением

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

  const handleColorChange = (newColor) => {
    console.log("Цвет изменен:", newColor)
  }
</script>

<UI.ColorPicker value={[255, 100, 50]} onChange={handleColorChange} />
```

### Только для чтения

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

<UI.ColorPicker value={[0, 255, 128]} readonly={true} label={{ name: "Просмотр цвета" }} />
```

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

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

- Переменная `hsv` хранит текущее значение цвета в формате HSV
- Переменные `huePointer`, `brightnessPointer` и `whiteValue` отслеживают положение слайдеров
- Переменная `mode` определяет текущий режим (hsv или white)
- Функция `hsvToRgb` конвертирует HSV в RGB формат
- `$effect` синхронизирует входное значение RGB с внутренним состоянием HSV

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

- Используется стор `twMerge` для объединения Tailwind CSS классов
- Используются математические функции для конвертации цветовых пространств

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

- `bind:this` для получения ссылок на DOM-элементы
- Обработчики `onmousedown` для перетаскивания слайдеров
- `$derived` для вычисления цвета превью и HEX значения

### Слоты

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

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

### Описание

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

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

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

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

- Предоставляет визуальные элементы управления для всех доступных свойств
- Поддерживает настройку начального цвета через три числовых поля (RGB)
- Использует общие сниппеты для настройки различных параметров
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
- Использует систему локализации через `$T('constructor.props.*')`

## Заметки

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

- Компонент использует Tailwind CSS для адаптивного дизайна
- Превью цвета автоматически изменяет цвет текста для лучшей читаемости
- Используются относительные единицы измерения для обеспечения масштабируемости

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

- Входное значение `value` должно быть массивом из 3 чисел в диапазоне 0-255
- Компонент автоматически определяет режим (HSV/белый) на основе входного значения
- При работе в режиме белого цвета все три компонента RGB имеют одинаковое значение

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

- Компонент использует оптимизации Svelte для минимизации перерисовок
- Вычисления цветовых преобразований происходят только при необходимости
- Используется эффективное объединение классов через `twMerge`