> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layeron.ru/llms.txt
> Use this file to discover all available pages before exploring further.

# Редактор проекта

> Как устроен редактор Layeron: чат, preview, code view, визуальное редактирование и панели.

## Обзор редактора

Редактор Layeron — это three-panel интерфейс для создания и управления проектом:

| Панель      | Назначение                                |
| ----------- | ----------------------------------------- |
| **Chat**    | Чат с AI для генерации и исправления кода |
| **Preview** | Живой предпросмотр приложения             |
| **Sidebar** | Файлы проекта, настройки, Cloud, Git      |

Переключение между панелями доступно через вкладки в верхней части редактора.

## Chat

Чат — основной инструмент работы. Здесь вы:

* описываете задачи для AI
* просите правки и исправления
* получаете результат генерации
* управляете extensions

### Возможности чата

* **Text** — текстовые запросы
* **Layeron Mode** — планирование перед генерацией
* **Extensions** — подключение внешних сервисов
* **Images** — загрузка изображений
* **Voice** — голосовой ввод
* **File mentions** — упоминание файлов через `@`

### История сообщений

Вся история чата сохраняется. Вы можете вернуться к любому сообщению и попросить AI продолжить с этого места.

## Preview

Preview показывает результат генерации в реальном времени.

### Возможности preview

* **Автоматическое обновление** — preview обновляется после каждой генерации
* **Responsive проверка** — проверяйте отображение на разных размерах экрана
* **Визуальное редактирование** — кликните на элемент для быстрого редактирования
* **Консоль** — просматривайте ошибки браузера

### Visual Edit

Функция "Visual Edit" позволяет кликнуть на элемент в preview и получить быстрые опции редактирования:

* Изменить текст
* Поменять цвет
* Изменить размер
* Скрыть/показать элемент

AI получит контекст элемента и предложит изменения.

### Консоль

Во вкладке Console отображаются ошибки браузера из preview. Это помогает быстро находить и исправлять runtime-ошибки.

## Code View

Code View позволяет просматривать и редактировать исходный код проекта напрямую.

### Просмотр файлов

* Навигация по дереву файлов
* Поиск по содержимому
* Подсветка синтаксиса
* Просмотр diff для каждой генерации

### Редактирование

Вы можете вносить изменения в код вручную. Изменения отобразятся в preview после сохранения.

<Tip>
  Используйте Code View для точных правок, которые проще сделать в коде, чем описывать в чате. Например, изменить конкретное значение или отформатировать код.
</Tip>

## Sidebar

Sidebar содержит дополнительные инструменты управления проектом.

### Файлы проекта

Полный список файлов проекта с навигацией по директориям. Файлы группируются по типам:

* Components (компоненты)
* Pages (страницы)
* Styles (стили)
* Utils (утилиты)
* Config (конфигурация)

### Cloud Panel

Управление Cloud-окружением проекта:

* **Overview** — статус, URL, ресурсы
* **Resources** — CPU, RAM, потребление
* **Storage** — загрузка и управление файлами
* **Env** — переменные окружения
* **Logs** — логи запуска и работы

### Git Panel

Управление Git-интеграцией:

* Подключение провайдера
* Экспорт и синхронизация
* Просмотр коммитов
* Настройка webhook

### Team Panel

Управление участниками проекта:

* Список участников
* Приглашение новых
* Назначение ролей

### Version History

Просмотр и восстановление сохраненных версий проекта.

## Навигация по проекту

### Заголовок редактора

В верхней части редактора отображается:

* Название проекта
* Статус deploy
* URL preview
* Кнопки действий (publish, settings)

### Быстрые действия

* **Publish** — публикация проекта
* **Settings** — настройки проекта
* **Share** — приглашение участников
* **Export** — экспорт в Git

## Горячие клавиши

| Комбинация         | Действие                  |
| ------------------ | ------------------------- |
| `Ctrl/Cmd + Enter` | Отправить сообщение в чат |
| `Ctrl/Cmd + K`     | Быстрый поиск файлов      |
| `Ctrl/Cmd + /`     | Переключить панель        |
| `Esc`              | Закрыть диалог            |

## Работа с несколькими проектами

### Переключение проектов

Используйте sidebar или верхнюю навигацию для переключения между проектами.

### Workspace

Все проекты принадлежат workspace. Переключение workspace доступно через меню пользователя.

<Tip>
  Используйте Layeron Mode для сложных задач: архитектура, рефакторинг, миграция данных. Layeron Mode помогает AI понять задачу перед генерацией кода.
</Tip>