openpencil/packages/docs/ru/guide/architecture.md

# Архитектура

## Обзор системы

`mermaid
graph TB
    subgraph Tauri["Tauri v2 Shell"]
        subgraph Editor["Editor (Web)"]
            UI["Vue 3 UI<br/>Toolbar · Panels · Properties<br/>Layers · Color Picker"]
            Skia["Skia CanvasKit (WASM, 7MB)<br/>Vector rendering · Text shaping<br/>Effects · Export"]
            subgraph Core["Core Engine (TS)"]
                SG[SceneGraph] --- Layout[Layout - Yoga]
                SG --- Selection
                Undo[Undo/Redo] --- Constraints
                Constraints --- HitTest[Hit Testing]
            end
            subgraph FileFormat["File Format Layer"]
                FigIO[".fig import/export"] --- Kiwi[Kiwi codec]
                Kiwi --- SVG[SVG export]
            end
        end
        MCP["MCP Server (90 tools, stdio+HTTP)"]
        Collab["P2P Collab (Trystero + Yjs)"]
    end
`

## Макет редактора

Интерфейс следует макету Figma UI3 — панель инструментов внизу, навигация слева, свойства справа:

- **Панель навигации (слева)** — Дерево слоёв, панель страниц
- **Канвас (центр)** — Бесконечный холст с рендерингом CanvasKit, масштабирование/панорамирование
- **Панель свойств (справа)** — Контекстно-зависимые секции: Внешний вид, Заливка, Обводка, Типографика, Макет, Позиция
- **Панель инструментов (внизу)** — Выбор инструмента: Выделение, Фрейм, Секция, Прямоугольник, Эллипс, Линия, Текст, Перо, Рука

## Компоненты

### Рендеринг (CanvasKit WASM)

Тот же движок рендеринга, что и у Figma. CanvasKit обеспечивает GPU-ускоренную 2D-отрисовку с векторными фигурами, формирование текста через Paragraph API, эффекты (тени, размытия, режимы наложения) и экспорт (PNG, SVG). WASM-бинарник размером 7 МБ загружается при запуске и создаёт GPU-поверхность на HTML-канвасе.

Рендерер разбит на специализированные модули в `packages/core/src/renderer/`: обход сцены, оверлеи, заливки, обводки, фигуры, эффекты, линейки, подписи и удалённые курсоры.

### Граф сцены

Плоская `Map<string, Node>` с ключами в виде строк GUID. Древовидная структура через ссылки `parentIndex`. Обеспечивает O(1) поиск, эффективный обход, проверку попадания и запросы по прямоугольным областям для выделения рамкой.

Граф порождает типизированные события через nanoevents: `node:created`, `node:updated`, `node:deleted`, `node:reparented`, `node:reordered`. Подсистемы подписываются на них вместо ручной привязки — редактор использует их для инвалидации рендера и синхронизации экземпляров компонентов с группировкой через microtask, система совместной работы — для распространения через Yjs.

См. [справочник графа сцены](/reference/scene-graph) для подробностей.

### Движок макетов (Yoga WASM)

Yoga от Meta обеспечивает вычисление макета CSS flexbox и grid через [форк](https://github.com/open-pencil/yoga/tree/grid) с поддержкой CSS Grid. Тонкий адаптер сопоставляет имена свойств Figma с эквивалентами Yoga:

| Свойство Figma | Эквивалент Yoga |
|---|---|
| `stackMode: HORIZONTAL` | `flexDirection: row` |
| `stackMode: VERTICAL` | `flexDirection: column` |
| `stackSpacing` | `gap` |
| `stackPadding` | `padding` |
| `stackJustify` | `justifyContent` |
| `stackChildPrimaryGrow` | `flexGrow` |

### Формат файлов (Kiwi Binary)

Использует бинарный кодек Kiwi от Figma с 194 определениями message/enum/struct. Импорт: разбор заголовка → декомпрессия Zstd → декодирование Kiwi → `NodeChange`[] → граф сцены. Экспорт выполняет обратный процесс с генерацией миниатюры.

См. [справочник формата файлов](/reference/file-format) для подробностей.

### ИИ и инструменты

Инструменты определяются один раз в `packages/core/src/tools/`, разделённые по доменам: read, create, modify, structure, variables, vector, analyze. У каждого инструмента типизированные параметры и функция `execute(figma, args)`. Адаптеры конвертируют их для:

- **ИИ-чат** — схемы valibot, мультипровайдер (Anthropic, OpenAI, Google AI, OpenRouter, совместимые эндпоинты)
- **MCP-сервер** — схемы zod, транспорты stdio + HTTP
- **CLI** — доступно через команду `eval`

90+ основных инструментов + 3 инструмента управления файлами MCP. Включает XPath-запросы (`query_nodes`), инспекцию JSX (`get_jsx`, `diff_jsx`), семантическое описание (`describe`) и визуальную проверку (`export_image` возвращает изображения модели).

### Отмена/Повтор

Паттерн обратных команд. Перед применением любого изменения затронутые поля сохраняются в снимок. Снимок становится обратной операцией. Группировка объединяет быстрые изменения (например, перетаскивание) в одну запись отмены.

### Буфер обмена

Двусторонний буфер обмена, совместимый с Figma. Кодирует/декодирует бинарный формат Kiwi (тот же, что и файлы .fig) через нативные события copy/paste браузера. Обрабатывает масштабирование векторных путей, дочерние элементы экземпляров, определение наборов компонентов и применение переопределений.

### P2P-совместная работа

Совместная работа в реальном времени через Trystero (WebRTC) + Yjs CRDT. Без серверного реле — сигнализация через публичные MQTT-брокеры, STUN/TURN для обхода NAT. Протокол Awareness обеспечивает живые курсоры, выделения и присутствие. Локальное сохранение через y-indexeddb.

### RPC-мост CLI—приложение

Когда запущено десктоп-приложение, команды CLI подключаются к нему по WebSocket вместо загрузки файла .fig. Сервер автоматизации работает на `127.0.0.1:7600` (HTTP) и `127.0.0.1:7601` (WebSocket). Команды выполняются относительно состояния живого редактора, позволяя скриптам автоматизации и ИИ-агентам взаимодействовать с запущенным приложением.

## Что дальше

### Полный набор инструментов figma-use

MCP-сервер сейчас предоставляет 90 инструментов. Референсная реализация в [figma-use](https://github.com/dannote/figma-use) содержит 118. Оставшиеся инструменты охватывают продвинутые ограничения макета, прототипные связи, расширенное редактирование свойств компонентов и массовые операции с документами.

### CI-инструменты для дизайна

Headless CLI уже поддерживает `analyze colors/typography/spacing/clusters`. Далее: интеграция с GitHub Actions для автоматического линтинга дизайна и визуальной регрессии в пулл-реквестах.

### Прототипирование

Переходы между фреймами, триггеры взаимодействия (клик, наведение, перетаскивание), управление оверлеями и полноэкранный режим предпросмотра.

### Подпись кода для Windows

Бинарные файлы macOS подписаны и нотаризованы с версии v0.6.0. Подпись Windows Authenticode через Azure Code Signing планируется для устранения предупреждения SmartScreen.