# Design System SFERA

## UI концепция

**SFERA — Enterprise AI Operating System**

Интерфейс должен ощущаться как:
- Linear
- Stripe Dashboard
- Notion
- Attio
- ClickUp 3.0
- Plane
- VS Code / JetBrains IDE для authoring-сценариев 1С

SFERA не CRM. Основной UI — это современная IDE/операционная среда для 1С: semantic workspace, редактор кода, дерево объектов, дизайнер форм/отчётов, инспектор свойств, diff/preview/apply и AI-помощник.

Классический 1С Конфигуратор используется как reference workflow, а не как visual style. Мы берём рабочие паттерны 1С-разработчика: дерево конфигурации, вкладки объектов, модуль/форма/свойства/события, правый инспектор, нижние панели диагностики и поиск. Визуально это должно быть современно, плотно, спокойно и удобно для долгой работы.

## Визуальный стиль

- чистый enterprise minimalism
- dark/light режим
- спокойные нейтральные цвета
- акцентный цвет для действий
- cards with soft shadows
- rounded-2xl
- минимальный glassmorphism только для важных overlay
- плотная, но не перегруженная информационная сетка

## Layout principles

### Главная структура

```txt
AppShell
├── Sidebar
├── Topbar
├── CommandPalette
├── Workspace
│   ├── PageHeader
│   ├── Toolbar
│   ├── ContentGrid
│   └── RightInspector
├── EditorWorkspace
│   ├── ObjectTree
│   ├── WorkspaceModeBar
│   ├── CodeEditor
│   ├── FormDesigner
│   ├── PropertiesInspector
│   ├── EventsInspector
│   ├── VersionsPanel
│   ├── DocumentationPanel
│   ├── KnowledgePanel
│   ├── LearningPanel
│   ├── ProblemsPanel
│   └── SemanticDiff
└── AI Copilot Panel
```

## Основные зоны

### Sidebar

- Dashboard
- Проекты 1С
- Объекты 1С
- Редактор BSL
- Дизайнер объектов
- Дизайнер форм
- Отчёты
- Семантический граф
- Impact analysis
- Review
- Знания
- AI
- Интеграции
- Регламентные задания
- Настройки

### Topbar

- поиск
- command palette
- быстрые действия
- уведомления
- профиль
- переключение проекта/организации

### Right Inspector

Контекстная панель для:
- объекта 1С
- процедуры или функции
- формы, команды или элемента формы
- реквизита или табличной части
- отчёта
- AI анализа
- истории изменений
- связанных сущностей

## Компонентные правила

### Карточки

- `rounded-2xl`
- `border`
- `bg-card`
- `shadow-sm`
- padding минимум `p-4`

### Таблицы

- sticky header
- фильтры
- saved views
- быстрый поиск
- column visibility
- bulk actions
- inline status badge
- row details через drawer/inspector

### Формы

- разделять на logical sections
- использовать progressive disclosure
- показывать validation inline
- сохранять drafts
- audit trail для важных изменений

## Цветовые токены

```txt
background
foreground
card
card-foreground
muted
muted-foreground
border
input
primary
primary-foreground
secondary
destructive
warning
success
info
```

## Статусы

### Задача

```txt
Новая
В работе
На проверке
Выполнена
Отменена
Просрочена
```

### Сделка

```txt
Активна
Неактивна
На бординге
Ожидает документов
Приостановлена
Закрыта
```

### Терминал

```txt
Подключен
Не подключен
Отключен банком
Ошибка настройки
```

## AI UX

AI должен быть не отдельной страницей, а частью workflow:

- AI Copilot справа
- подсказки в карточках
- inline completion в BSL editor
- context-aware suggestions по текущим переменным, реквизитам, табличным частям, форме и объекту 1С
- генерация кода, объектов, форм, команд и отчётов через preview/diff/apply
- объяснение текущего кода и структуры объекта
- генерация безопасных изменений 1С
- продолжение кода по текущему контексту
- объяснение изменений
- статистика токенов и лимитов

## Knowledge, Docs, Training UX

SFERA должна показывать знания рядом с местом работы, а не прятать их в отдельную wiki:

- документация объекта, формы, отчёта и бизнес-правила доступны из IDE-контекста;
- база знаний связывается с lineage объекта, процедурами, запросами и событиями формы;
- training/onboarding показывает рекомендации по текущему коду, стандартам команды и типовым ошибкам;
- AI отвечает только с учётом доступных знаний, прав и privacy policy;
- history/versions объясняют, почему объект менялся, какими задачами и решениями это было связано.