Варианты макета «Управление нодой»

20 интерактивных прототипов. В каждом — упрощённое дерево, редактор и переключение режимов. Текущий макет: дерево слева → узкая колонка режимов → контент → панель справа.

Как открыть: из папки Examples запустите python3 -m http.server 8765 и откройте http://localhost:8765 (нужен локальный сервер из‑за ES‑модулей).

Серия 1 — базовые варианты

Сейчас

Базовый (как в приложении)

Отдельная узкая колонка между деревом и контентом. Много вертикального места, но 4 колонки сжимают редактор.

Открыть
01

Вкладки под шапкой

Режимы — горизонтальные табы на всю ширину под Agent CMS. Контент получает +220px.

Открыть
02

Панель над редактором

Группы и режимы — pills прямо над полем «Содержимое». Близко к контексту редактирования.

Открыть
03

Icon rail

Узкая полоска иконок (как VS Code). При наведении — всплывающая подпись и flyout с режимами группы.

Открыть
04

Режимы справа

«Управление нодой» переезжает в правую панель над Save/YAML. Две колонки слева: дерево + редактор.

Открыть
05

Dropdown в «Пути»

Компактный селектор режима в строке breadcrumbs. Максимум места редактору, минимум UI.

Открыть
06

Двухуровневая шапка

В шапке — группы (Основное, Память…), под ней — второй ряд с конкретными режимами.

Открыть
07

Аккордеон в дереве

Режимы встроены в левую колонку под деревом как сворачиваемые секции.

Открыть
08

Нижняя панель

Режимы в выдвижной нижней панели (как терминал в IDE). Редактор на всю высоту.

Открыть
09

Плавающая карточка

Компактная карточка режимов в левом верхнем углу редактора, сворачивается в кнопку.

Открыть
10

Obsidian-style

Дерево | редактор с табами в заголовке файла | узкая панель свойств. Без лишней колонки слева.

Открыть

Серия 2 — альтернативные паттерны

11

Command palette (⌘K)

Режимы скрыты. Поиск и выбор через модальное окно — как в VS Code / Notion.

Открыть
12

Вкладки в левой колонке

«Дерево» и «Режимы» — две вкладки в одной колонке. Без второй колонки по центру.

Открыть
13

Вертикальные табы у редактора

Узкая колонка режимов прижата к левому краю редактора, не отдельная панель.

Открыть
14

Notion properties

Режимы как строки свойств с иконками в правой панели. YAML рядом.

Открыть
15

Mega-menu в шапке

Кнопка «Режим ▾» в header → выпадающая сетка 4 групп.

Открыть
16

Slide-over drawer

Кнопка ☰ открывает выезжающую панель режимов поверх контента.

Открыть
17

Плитки-сетка

Режимы как карточки-плитки над редактором. Наглядно, но занимает высоту.

Открыть
18

Popover у названия

Dropdown рядом с полем «Название» — режим привязан к заголовку ноды.

Открыть
19

Split view

Редактор сверху, панель режимов снизу с перетаскиваемым разделителем.

Открыть
20

Header chips

Компактные чипы групп в шапке, ниже — pills только активной группы.

Открыть