# Дорожная карта

## Фазы

### Фаза 1: Ядро движка ✅

`SceneGraph`, отрисовка Skia, базовые фигуры, выделение, масштабирование/панорамирование, отмена/повтор.

**Реализовано:**
- Граф сцены с хранением в плоском Map и древовидной структурой родитель-потомок
- Отрисовка CanvasKit WASM для всех типов фигур
- Выделение кликом/shift/рамкой с ручками масштабирования и вращением
- Масштабирование/панорамирование с сочетаниями клавиш и жестами трекпада
- Отмена/повтор для всех операций
- Направляющие привязки к краям и центрам

### Фаза 2: Интерфейс редактора + компоновка ✅

Панель свойств, панель слоёв, панель инструментов, интеграция Yoga для компоновки, редактирование текста.

**Реализовано:**
- Панели Vue 3 + Reka UI (свойства, слои, панель инструментов)
- Панель свойств, разделённая на секции (Внешний вид, Заливка, Обводка, Типографика, Компоновка, Позиция)
- Компонент ScrubInput для всех числовых полей ввода
- Палитра цветов (HSV, hex, непрозрачность)
- Панель слоёв с древовидным видом, перетаскиванием для изменения порядка, переключателем видимости
- Auto-layout с Yoga WASM (направление, gap, padding, justify, align)
- Встроенное редактирование текста через CanvasKit Paragraph API
- Загрузка системных шрифтов через Local Font Access API
- Линейки на холсте с подсветкой выделения

### Фаза 3: Файловый ввод/вывод + визуальные возможности ✅

Импорт/экспорт .fig, кодек Kiwi, буфер обмена, секции, страницы, продвинутая отрисовка.

**Реализовано:**
- Импорт .fig файлов через бинарный кодек Kiwi
- Экспорт .fig файлов с Kiwi-кодированием, Zstd-сжатием, генерацией миниатюры
- Сохранение (<kbd>⌘</kbd><kbd>S</kbd>) и Сохранить как (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>) с нативными диалогами ОС
- Zstd-сжатие через Tauri Rust-команду (fallback на deflate в браузере)
- Вендорённый kiwi-schema с патчами для ESM + разреженных ID полей
- Figma-совместимый буфер обмена (двусторонний бинарный Kiwi)
- Инструмент «Перо» с моделью векторных сетей
- Бинарное кодирование/декодирование vectorNetworkBlob
- Группировка/разгруппировка (<kbd>⌘</kbd><kbd>G</kbd>/<kbd>⇧</kbd><kbd>⌘</kbd><kbd>G</kbd>)
- Десктопное приложение Tauri v2 с нативной строкой меню (macOS/Windows/Linux)
- Секции (клавиша S) с плашками заголовков, авто-захватом, адаптивным цветом текста
- Многостраничные документы с панелью страниц, отдельной областью просмотра для каждой страницы
- Подсветка при наведении с контурами, повторяющими форму объекта
- Отрисовка 1-го уровня: градиенты, заливки изображениями, эффекты, обводки (cap/join/dash), дуги
- Выбор типа заливки с вкладками solid/gradient/image и редактированием точек градиента
- Цвет фона холста для каждой страницы
- Юнит-тесты fig-import, юнит-тесты компоновки, E2E-тесты панели слоёв

### Фаза 4: Компоненты + переменные ✅

Компоненты, экземпляры, переопределения, переменные, коллекции, режимы, экспорт изображений.

**Реализовано:**
- Создание компонентов из фрейма/группы или мульти-выделения (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd>)
- Наборы компонентов из нескольких компонентов (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd>) с пунктирной фиолетовой рамкой
- Создание экземпляров из компонентов с клонированием потомков и маппингом componentId
- Синхронизация компонент-экземпляр в реальном времени с сохранением переопределений
- Открепление экземпляра обратно во фрейм (<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd>)
- Переход к основному компоненту (навигация между страницами)
- Постоянно видимые фиолетовые метки компонентов/экземпляров с иконкой ромба
- Проверка попадания в непрозрачный контейнер (клик выделяет компонент, двойной клик — входит внутрь)
- Контекстное меню по правому клику с действиями: буфер обмена, z-порядок, группировка, компонент, видимость, блокировка, перемещение на другую страницу
- Управление z-порядком (] на передний план, [ на задний план)
- Переключение видимости (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>H</kbd>) и блокировки (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>L</kbd>)
- Перемещение узлов между страницами через контекстное меню
- Culling области просмотра, повторное использование Paint, объединение RAF-отрисовок
- UI панели эффектов (тень, внутренняя тень, размытие слоя/фона/переднего плана)
- Независимые радиусы углов (переключатель для каждого угла в секции «Внешний вид»)
- CI/CD через GitHub Actions для сборок Windows (x64, arm64) и macOS (x64, arm64)
- Инструменты рисования многоугольников и звёзд с pointCount и starInnerRadius
- Изменяемые размеры левой/правой панелей через reka-ui Splitter (сохраняемый макет)
- Алиас импорта @/, модуль общих типов (src/types.ts, src/global.d.ts)
- Чистый код: 0 предупреждений oxlint, 0 ошибок типов tsgo
- Переменные: тип `COLOR` с коллекциями, режимами, привязками, выбор переменных в FillSection, импорт из .fig
- Диалог переменных: TanStack Table с изменяемой шириной столбцов, столбцы режимов, вкладки коллекций с переименованием, поиск, демо-коллекции (Primitives/Semantic/Spacing), отмена/повтор для всех операций с переменными
- Экспорт изображений: PNG/JPG/WEBP с ExportSection (масштаб, формат, предпросмотр), сочетание <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd>, контекстное меню
- Нативное редактирование текста на холсте: класс TextEditor в core, phantom textarea, курсор/выделение/границы слов на холсте, мерцание каретки, подсветка выделения
- Перечисление системных шрифтов через Rust-крейт font-kit, кеш OnceLock, предзагрузка при старте
- Выбор шрифтов: виртуальный скролл (reka-ui ListboxVirtualizer), поисковый фильтр, CSS-предпросмотр шрифта
- Извлечение компонента ColorInput, исправление шахматного фона ползунка прозрачности ColorPicker
- Идентичность приложения: иконка-карандаш, Cargo crate open_pencil, macOS Dock «OpenPencil»
- Заставка во время инициализации WASM
- Стилевые серии в тексте: <kbd>⌘</kbd><kbd>B</kbd>/I/U для выделения, модель StyleRun, ParagraphBuilder pushStyle/pop, roundtrip .fig
- Кнопки B/I/U/S в секции типографики
- Выделение текста двойным кликом (слово), тройным кликом (всё)

**Оставшееся (перенесено в Фазу 6):**
- Переключение вариантов
- UI для типов переменных: `FLOAT`, `STRING`, `BOOLEAN`
- Тематизация на основе переменных

### Фаза 5: AI-интеграция и инструментарий ✅

Извлечение core, CLI, MCP-сервер, AI-инструменты, команда eval.

**Реализовано:**
- @open-pencil/core извлечён в packages/core/ (без DOM-зависимостей, Bun workspace)
- @open-pencil/cli с headless-операциями над .fig (info, tree, find, export, analyze, node, pages, variables, eval), CPU-растеризация CanvasKit, вывод --json
- Команда `eval` с Figma-совместимым Plugin API для headless-скриптинга
- JSX-рендерер: билдеры TreeNode (Frame, Text, Rectangle и др.), renderTreeNode/renderJsx, Tailwind-подобные shorthand-пропсы, 27 тестов
- Обнаружение копипасты jscpd (15.6% → 0.62%), консолидация kiwi-serialize.ts
- Тесты roundtrip .fig с LFS-фикстурами (material3.fig 87K узлов, nuxtui.fig 314K узлов)
- Исправление O(n²) → O(n) в импорте .fig (37с → 535мс на 87K узлов), оптимизация ByteBuffer
- AI-чат: OpenRouter напрямую (без бэкенда), хранение ключей в Stronghold, 87 инструментов, разделённых по доменным файлам в `tools/`, селектор моделей, <kbd>⌘</kbd><kbd>J</kbd>, потоковый markdown, тесты Playwright с mock-транспортом
- 49 дополнительных AI/MCP инструментов, портированных из figma-use (87 всего): гранулярные set-инструменты, операции с узлами, CRUD переменных, булевы операции, инструменты векторных путей, управление областью просмотра
- MCP-сервер (@open-pencil/mcp): stdio + HTTP (Hono + Streamable HTTP с сессиями), 87 core-инструментов + 3 инструмента управления файлами (90 всего), работает на Bun и Node.js
- Унифицированные определения инструментов: определяются один раз в `packages/core/src/tools/` (по доменам), адаптируются для AI-чата (valibot), MCP (zod), CLI (eval)
- Панель кода: экспорт sceneNodeToJsx(), подсветка Prism.js, нумерация строк, кнопка копирования, 14 тестов
- Панель свойств реструктурирована: вкладки Design | Code | AI
- Строка меню приложения для браузерного режима (File, Edit, View, Object, Text, Arrange)
- Автосохранение: дебаунс 3с записи после последнего изменения сцены
- Панель свойств мульти-выделения с обработкой общих/смешанных значений
- Публикация в npm с provenance для core, cli и mcp

**Планируется:**
- Attached-режим: WebSocket к запущенному редактору для eval, create, export, screenshot
- Система дизайн-гайдлайнов
- Цикл верификации скриншотов

### Фаза 6: Коллаборация + распространение 🟡

Совместная работа в реальном времени, прототипирование, комментарии, распространение десктопного приложения.

**Реализовано:**
- P2P-коллаборация через Trystero (WebRTC) + Yjs CRDT — без серверного реле
- Протокол Awareness: живые курсоры, выделения, присутствие с цветными стрелками курсоров
- Режим следования: клик по аватару участника для отслеживания его области просмотра
- Локальное хранение через y-indexeddb
- Ссылка для совместного доступа по адресу `/share/<room-id>` с безопасными ID комнат
- Отрисовка эффектов: тень, внутренняя тень, разброс тени, размытие слоя, размытие фона, размытие переднего плана
- Кеш SkPicture для каждого узла для эффектов (нулевой пересчёт для статических эффектов)
- Мульти-файловые вкладки: <kbd>⌘</kbd><kbd>N</kbd>/<kbd>⌘</kbd><kbd>T</kbd> новая вкладка, <kbd>⌘</kbd><kbd>W</kbd> закрыть, <kbd>⌘</kbd><kbd>O</kbd> открыть в новой вкладке
- Подписание кода Apple и нотаризация для сборок macOS
- Сборки Linux (x64) добавлены в CI
- Git LFS перемещён на Cloudflare R2
- Сайт документации VitePress на openpencil.dev с i18n (6 языков)
- CI/PR-шаблоны, CONTRIBUTING.md, SECURITY.md

**Планируется:**
- Прототипирование (связи фреймов, переходы, анимации)
- Комментарии (закрепление, треды, разрешение)
- Поддержка PWA
- Переключение вариантов, UI для `FLOAT`/STRING/BOOLEAN переменных, тематизация на основе переменных
- Полный набор тестов совместимости с Figma

## Сроки

| Фаза | Оценочная длительность | Статус |
|------|------------------------|--------|
| Фаза 1: Ядро движка | 3 месяца | ✅ Завершена |
| Фаза 2: Интерфейс редактора + компоновка | 3 месяца | ✅ Завершена |
| Фаза 3: Файловый ввод/вывод + визуальные возможности | 2 месяца | ✅ Завершена |
| Фаза 4: Компоненты + переменные | 2 месяца | ✅ Завершена |
| Фаза 5: AI-интеграция и инструментарий | 2 месяца | ✅ Завершена |
| Фаза 6: Коллаборация + распространение | 2 месяца | 🟡 В процессе |
