openpencil/packages/docs/ru/guide/tech-stack.md

# Технологический стек

## Ключевые технологии

| Уровень | Технология | Почему |
|-------|-----------|-----|
| **Рендеринг** | Skia CanvasKit WASM | Тот же движок, что и у Figma — проверенная производительность, GPU-ускорение, пиксельная точность |
| **UI-фреймворк** | Vue 3 + VueUse | Реактивный Composition API, отличная поддержка TypeScript |
| **Компоненты** | Reka UI | Headless, доступные UI-примитивы (дерево, слайдер и т.д.) |
| **Стилизация** | Tailwind CSS 4 | Утилитарный подход, быстрая итерация, тёмная тема |
| **Макет** | Yoga WASM | CSS flexbox движок от Meta, проверенный на React Native |
| **Формат файлов** | Kiwi binary + Zstd | Собственный формат Figma — компактный, быстрый парсинг, совместимость с .fig |
| **Совместная работа** | Trystero + Yjs | P2P WebRTC через MQTT, CRDT-синхронизация, сохранение в y-indexeddb |
| **Цвет** | culori | Конвертация цветовых пространств (HSV, RGB, hex) |
| **ИИ/MCP** | MCP SDK + Hono | 90+ инструментов для ИИ-кодинга, транспорты stdio + HTTP |
| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере |
| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph |
| **JSX-трансформ** | Sucrase | 201 КБ JSX → JS, синхронный, работает в браузере |
| **События** | nanoevents | 108 байт, типизированный эмиттер событий для мутаций SceneGraph |
| **Десктоп** | Tauri v2 | ~5 МБ нативное приложение (против ~100 МБ у Electron), бэкенд на Rust |
| **Сборка** | Vite 7 | Быстрый HMR, нативные ES-модули |
| **Тестирование** | Playwright + bun:test | Визуальная регрессия (E2E) + быстрые модульные тесты |
| **Линтинг** | oxlint | На основе Rust, на порядки быстрее ESLint |
| **Форматирование** | oxfmt | Форматирование на основе Rust |
| **Проверка типов** | typescript-go (tsgo) | Нативная Go-реализация проверки типов TypeScript |

## Ключевые зависимости

```json
{
  "canvaskit-wasm": "^0.40.0",
  "vue": "^3.5.29",
  "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
  "nanoevents": "^9.1.0",
  "sucrase": "^3.35.1",
  "reka-ui": "^2.8.2",
  "tailwindcss": "^4.2.1",
  "culori": "^4.0.2",
  "fzstd": "^0.1.1",
  "fflate": "^0.8.2",
  "trystero": "^0.20.0",
  "yjs": "^13.6.24",
  "y-indexeddb": "^9.0.12"
}
```

## Почему не...

### Почему не SVG-рендеринг?

SVG медленный для сложных документов. Каждый узел — это элемент DOM — 10 000 узлов означают 10 000 DOM-элементов с расходами на макет, отрисовку и композитинг. CanvasKit отрисовывает всё на одну GPU-поверхность. (Penpot по-прежнему использует SVG-рендеринг по умолчанию, но разрабатывает опциональный Rust/Skia WASM рендерер.)

### Почему не Electron (как десктоп Figma)?

Tauri v2 использует системный webview (~5 МБ) вместо включения Chromium (~100 МБ). Бэкенд на Rust обеспечивает нативную производительность для файлового ввода-вывода и системной интеграции.

### Почему не React (как в первоначальном плане)?

Проект мигрировал с React на Vue 3 на ранней стадии разработки. Система реактивности Vue и композаблы VueUse оказались более эргономичными для управления состоянием редактора.

### Почему не собственный движок макетов?

Yoga поддерживается Meta, проверен на миллиардах устройств с React Native и реализует спецификацию CSS flexbox. Создание собственного движка заняло бы месяцы работы для достижения того же уровня корректности.

## Планируемые технологии

| Технология | Назначение | Этап |
|-----------|---------|-------|
| CSS Grid в Yoga | Макет на основе сетки | ✅ Включено через [форк Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) |