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

Фазы

Фаза 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/<room-id> с безопасными 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 месяца	🟡 В процессе