Example5 — форма редактирования

25 прототипов: где разместить Сохранить, Свойства, Удалить и зону просмотра/редактирования текста для AGENTS.md (имя фиксировано) и _.node.md (имя редактируется). В каждом варианте переключатель AGENTS / Нода.

Запуск: cd public/examples/ui-variant-5 && python3 -m http.server 8767 → http://localhost:8767 · См. также VISION.md

01

Sticky actions bar

Липкая шапка: крошки слева, Свойства / Сохранить / Удалить справа. Ниже — заголовок (AGENTS 🔒 или input ноды), редактор.

Открыть
02

Title row actions

Одна строка: фиксированный AGENTS.md или редактируемое имя ноды + все кнопки справа.

Открыть
03

Editor | Properties split

Содержимое слева (на всю высоту). Справа колонка свойств + Сохранить внизу колонки.

Открыть
04

Footer command bar

Редактор на максимум высоты. Все действия в нижней панели: Свойства · Сохранить · Удалить.

Открыть
05

Path + actions row

Компактно: одна строка «путь + кнопки», под ней заголовок и текст.

Открыть
06

Two-row header

Ряд 1: крошки. Ряд 2: заголовок + Сохранить. YAML-свойства — сворачиваемый блок.

Открыть
07

Content | Properties tabs

Вкладки «Содержимое / Свойства / Просмотр». Сохранить в полосе вкладок.

Открыть
08

Floating save

Сохранить — плавающая кнопка при правках. Свойства и Удалить в верхней строке.

Открыть
09

Segmented editor | preview

Сегмент «Источник | Просмотр» над текстом. Действия справа от сегмента.

Открыть
10

Notion hero + menu

Крупный заголовок (badge или input). Действия в меню ⋯: Сохранить, Свойства, Удалить.

Открыть
11

YAML above editor

Свойства первым блоком (как frontmatter). Сохранить в правом верхнем углу.

Открыть
12

Icon actions

Минимум текста на кнопках: 💾 ⚙ 🗑 рядом с заголовком.

Открыть
13

Duplicate save (anti)

Сохранить и в шапке, и над редактором — намеренный антипаттерн для сравнения.

Открыть
14

Overflow menu only

В шапке только ⋯ — все действия в выпадающем списке. Чистая зона текста.

Открыть
15

Preview first

По умолчанию просмотр markdown. «Редактировать» открывает источник + Сохранить.

Открыть
16

AGENTS system banner

Для AGENTS.md — жёлтый баннер «системный файл». Для ноды баннер скрыт.

Открыть
17

Node hero title

Нода: крупный input. AGENTS: компактная строка badge под крошками.

Открыть
18

Meta sidebar

Узкая колонка слева: тип файла, стек кнопок. Справа — содержимое.

Открыть
19

Properties inspector

Контент на всю ширину. «Свойства» открывает правую панель-drawer с YAML.

Открыть
20

Status bar

VS Code: путь и dirty слева внизу; Save / Props / Delete справа в status bar.

Открыть
21

Actions in crumbs

Сохранить и Удалить как «крошки» в конце пути (компактно, спорно).

Открыть
22

Card document

Весь документ в карточке: шапка карточки = заголовок + действия.

Открыть
23

Mobile stacked

Вертикальный стек: крошки → заголовок → полная ширина кнопок → редактор.

Открыть
24

Production blend

Близко к Agent CMS: плита пути, плита названия+действий, плита свойств, плита содержимого.

Открыть
25

AGENTS vs Node split

Два столбца: слева AGENTS.md (фикс. имя), справа нода — одна раскладка, разный заголовок.

Открыть