← Капитанский журнал

Одна тема, один канвас — объединяем четыре дизайн-системы в одну

Как мы свёрнули четыре несовместимые дизайн-системы и три ReactFlow-обёртки в единый theme-провайдер и один универсальный GraphCanvas.

В проекте было четыре дизайн-системы. Клиент имел CSS-переменные --gk-* с темами steampunk/scifi. Редактор имел 875 строк статичного CSS с индиго #6366f1. @tinker/ui имел Tailwind v4 с другим индиго #7c6af7 и шрифтом Geist Mono. И каждый компонент имел ad-hoc inline-токены.

Тем временем один и тот же GraphDoc рендерился тремя независимыми ReactFlow-обёртками: GameGraphCanvas (чтение/редактирование), GraphViewer (только чтение с MiniMap) и GraphEditor.tsx (полный редактор с палитрой, свойствами, breadcrumbs). Плюс FSMSimulation.tsx, рисовавший вертикальный список вместо использования канваса.

ADR-022 свёрнул всё это.

Единый ThemeProvider в @tinker/ui, используемый всеми тремя приложениями. Двухслойный: appTheme (оболочка — всегда "editor-dark" в редакторе) и gameTheme (игра — применяется к компонентам клиента, iframe-превью, узлам графа). Единый реестр, открытый API для будущих фабрик тем.

Единый <GraphCanvas> с тремя режимами: view (автолейаут, readonly, MiniMap), edit (drag&drop, соединение, проваливание в подграфы, слоты для палитры/свойств) и simulate (view + подсветка текущего состояния + контролы шагов). Все три ReactFlow-обёртки удалены. Их вспомогательные компоненты становятся слотами или переезжают в @tinker/ui.

Превью клиента в редакторе через <iframe src="/mock/:scenario?theme=:theme">, используя существующий маршрут MockUI. Граница iframe изолирует CSS-переменные клиента от редактора.

Новая вкладка Studio (5-я в Workspace) объединяет iframe-превью с переключением темы и тонкой настройкой плагинов. Вкладка Settings теряет раздел «Оформление» — он теперь живёт в Studio.

Это было массивное упрощение. Четыре темы → одна. Три канваса → один. И фундамент для 10+ тем, запланированных на фазы 3+.