# Дорожная карта ## Фазы ### Фаза 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-сжатием, генерацией миниатюры - Сохранение (⌘S) и Сохранить как (⇧⌘S) с нативными диалогами ОС - Zstd-сжатие через Tauri Rust-команду (fallback на deflate в браузере) - Вендорённый kiwi-schema с патчами для ESM + разреженных ID полей - Figma-совместимый буфер обмена (двусторонний бинарный Kiwi) - Инструмент «Перо» с моделью векторных сетей - Бинарное кодирование/декодирование vectorNetworkBlob - Группировка/разгруппировка (⌘G/⇧⌘G) - Десктопное приложение Tauri v2 с нативной строкой меню (macOS/Windows/Linux) - Секции (клавиша S) с плашками заголовков, авто-захватом, адаптивным цветом текста - Многостраничные документы с панелью страниц, отдельной областью просмотра для каждой страницы - Подсветка при наведении с контурами, повторяющими форму объекта - Отрисовка 1-го уровня: градиенты, заливки изображениями, эффекты, обводки (cap/join/dash), дуги - Выбор типа заливки с вкладками solid/gradient/image и редактированием точек градиента - Цвет фона холста для каждой страницы - Юнит-тесты fig-import, юнит-тесты компоновки, E2E-тесты панели слоёв ### Фаза 4: Компоненты + переменные ✅ Компоненты, экземпляры, переопределения, переменные, коллекции, режимы, экспорт изображений. **Реализовано:** - Создание компонентов из фрейма/группы или мульти-выделения (⌥⌘K) - Наборы компонентов из нескольких компонентов (⇧⌘K) с пунктирной фиолетовой рамкой - Создание экземпляров из компонентов с клонированием потомков и маппингом componentId - Синхронизация компонент-экземпляр в реальном времени с сохранением переопределений - Открепление экземпляра обратно во фрейм (⌥⌘B) - Переход к основному компоненту (навигация между страницами) - Постоянно видимые фиолетовые метки компонентов/экземпляров с иконкой ромба - Проверка попадания в непрозрачный контейнер (клик выделяет компонент, двойной клик — входит внутрь) - Контекстное меню по правому клику с действиями: буфер обмена, z-порядок, группировка, компонент, видимость, блокировка, перемещение на другую страницу - Управление z-порядком (] на передний план, [ на задний план) - Переключение видимости (⇧⌘H) и блокировки (⇧⌘L) - Перемещение узлов между страницами через контекстное меню - 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 (масштаб, формат, предпросмотр), сочетание ⇧⌘E, контекстное меню - Нативное редактирование текста на холсте: класс TextEditor в core, phantom textarea, курсор/выделение/границы слов на холсте, мерцание каретки, подсветка выделения - Перечисление системных шрифтов через Rust-крейт font-kit, кеш OnceLock, предзагрузка при старте - Выбор шрифтов: виртуальный скролл (reka-ui ListboxVirtualizer), поисковый фильтр, CSS-предпросмотр шрифта - Извлечение компонента ColorInput, исправление шахматного фона ползунка прозрачности ColorPicker - Идентичность приложения: иконка-карандаш, Cargo crate open_pencil, macOS Dock «OpenPencil» - Заставка во время инициализации WASM - Стилевые серии в тексте: ⌘B/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/`, селектор моделей, ⌘J, потоковый 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/` с безопасными ID комнат - Отрисовка эффектов: тень, внутренняя тень, разброс тени, размытие слоя, размытие фона, размытие переднего плана - Кеш SkPicture для каждого узла для эффектов (нулевой пересчёт для статических эффектов) - Мульти-файловые вкладки: ⌘N/⌘T новая вкладка, ⌘W закрыть, ⌘O открыть в новой вкладке - Подписание кода 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 месяца | 🟡 В процессе |