# Использование UI-библиотеки krona-library в krona-front

## 1. Архитектурный принцип

В рамках технического задания **запрещено копирование компонентов из `krona-library` в `krona-front`**.
Все компоненты, токены и темы дизайна подключаются как внешние пакетные зависимости:
- `@krona/tokens` и `@krona/tokens.css`
- `@krona/themes` и `@krona/themes.css`
- `@krona/ui`

В директории `src/` проекта `krona-front` нет ни одного форкнутого или дублированного файла из `krona-library/packages/ui/src/components/`.

---

## 2. Реестр используемых компонентов @krona/ui

| Компонент | Импорт | Где используется в `krona-front` | Передаваемые props и варианты |
|---|---|---|---|
| **Tabs** | `import { Tabs } from '@krona/ui'` | `CommunicationsHeader.tsx` | `items`: `[{ id, label, icon, badge }]`, `activeId`, `onChange`, `ariaLabel` |
| **ConnectorPill** | `import { ConnectorPill } from '@krona/ui'` | `MessengersView.tsx` | `active`, `onClick`, `count`, `alertCount`, `icon`, `children` |
| **MessageBubble** | `import { MessageBubble } from '@krona/ui'` | `MessengersView.tsx`, `ChannelsView.tsx` | `direction` (`'incoming' | 'outgoing'`), `senderName`, `timestamp`, `status` (`'sent' | 'delivered' | 'read'`), `connector`, `isInternal`, `attachments`, `avatarUrl` |
| **Card** | `import { Card } from '@krona/ui'` | `MessengersView.tsx`, `SettingsView.tsx`, `ChannelsView.tsx` | `variant` (`'default' | 'muted' | 'interactive'`), `padding` (`'sm' | 'md' | 'lg'`), `header`, `footer`, `children` |
| **Modal** | `import { Modal } from '@krona/ui'` | `Modals.tsx` (ComposeEmail, NewChannel, QuickReply, NewContact) | `isOpen`, `onClose`, `title`, `size` (`'sm' | 'md' | 'lg' | 'xl'`), `footer`, `children` |
| **Button** | `import { Button } from '@krona/ui'` | Во всех представлениях `/communications` | `variant` (`'primary' | 'secondary' | 'ghost' | 'danger'`), `size` (`'sm' | 'md' | 'lg'`), `disabled`, `icon`, `onClick` |
| **Input** | `import { Input } from '@krona/ui'` | Поиск, модальные окна, фильтры | `label`, `placeholder`, `error`, `leftIcon`, `value`, `onChange` |
| **Badge** | `import { Badge } from '@krona/ui'` | Карточка контакта, список писем, каналы | `variant` (`'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline'`), `size` (`'sm' | 'md'`), `children` |
| **Avatar** | `import { Avatar } from '@krona/ui'` | Список диалогов, заголовок чата, участники | `name`, `src`, `size` (`'sm' | 'md' | 'lg'`), `status` (`'online' | 'offline' | 'busy'`) |

---

## 3. Потребление CSS токенов дизайн-системы V3

В `src/index.css` подключены:
```css
@import '@krona/tokens.css';
@import '@krona/themes.css';
```

В кодовой базе `krona-front` при оформлении коммуникаций используются исключительно семантические переменные:
- **Цвета фона:** `var(--krona-bg-workspace)`, `var(--krona-surface)`, `var(--krona-surface-hover)`, `var(--krona-surface-muted)`, `var(--krona-surface-selected)`
- **Брендовые цвета:** `var(--krona-primary)`, `var(--krona-primary-hover)`, `var(--krona-primary-active)`, `var(--krona-primary-soft)`
- **Границы:** `var(--krona-border)`, `var(--krona-border-subtle)`, `var(--krona-border-focus)`
- **Текст:** `var(--krona-text-primary)`, `var(--krona-text-secondary)`, `var(--krona-text-muted)`, `var(--krona-text-inverse)`
- **Статусы:** `var(--krona-status-success)`, `var(--krona-status-warning)`, `var(--krona-status-danger)`, `var(--krona-status-info)`

---

## 4. Поддержка тем оформления

Root элемент приложения (`document.documentElement`) управляется через `src/stores/theme.ts`:
- `data-krona-theme="noble-green"`
- `data-krona-theme="parchment-light"`
- `data-krona-theme="graphite-forest-dark"`

Каждая тема активирует свой набор CSS-переменных из `@krona/themes.css`, обеспечивая бесшовное переключение всей цветовой палитры интерфейса.