Example2 — центральная часть редактора

25 интерактивных прототипов: хлебные крошки, YAML-свойства md-файла, кнопки «Сохранить / Назад / Закрыть», улучшения центральной зоны. Контекст — редактирование файла из _Content.

Запуск: cd Example2 && python3 -m http.server 8766 → http://localhost:8766

01

Sticky doc bar

Липкая шапка документа: крошки слева, «Назад / Сохранить / Закрыть» справа. Редактор на всю ширину.

Открыть
04

Two-row header

Два ряда: крошки + закрыть; название + сохранить. YAML справа в колонке.

Открыть
07

Editor | YAML tabs

Вкладки «Содержимое» и «YAML» в центре — без правой панели.

Открыть
10

Unified toolbar

Одна панель: ← | крошки | Edit/Preview | YAML | Save.

Открыть
14

Frontmatter block

YAML как первый блок в потоке редактора (как в Obsidian).

Открыть
15

Form properties

YAML заменён формой полей + кнопка «Показать код».

Открыть
17

Segmented actions

Кнопки «Назад | Сохранить | Закрыть» — сегментированная группа.

Открыть
19

Fullbleed overlay

Редактор edge-to-edge, controls — полупрозрачный overlay сверху.

Открыть
20

Dirty indicator

Кнопка «Сохранить» показывает несохранённые изменения (●).

Открыть
21

Back as first crumb

Первый элемент крошек — «← Назад к списку».

Открыть
22

Resizable YAML

YAML-панель справа с перетаскиваемым разделителем.

Открыть
23

VS Code bar

Командная строка в стиле VS Code: путь файла + статус сохранения.

Открыть
02не актуально

Path chips

Крошки как компактные чипы с иконкой папки. YAML под редактором в свёрнутой секции.

Открыть
03не актуально

Floating actions

Минимальный верх — только путь текстом. Кнопки «Сохранить» и «Закрыть» плавают внизу справа.

Открыть
05не актуально

Notion-style

Крупный заголовок как в Notion, путь — мелкий подзаголовок. Свойства — таблица полей.

Открыть
06не актуально

YAML bottom drawer

YAML выезжает снизу по кнопке. Центр — только редактор и крошки.

Открыть
08не актуально

YAML accordion top

YAML-аккордеон над редактором. Крошки в одной строке с кнопками.

Открыть
09не актуально

Compact path dropdown

Длинный путь сворачивается в dropdown «…/_Content/файл».

Открыть
11не актуально

Card document

Документ в «карточке» с тенью. Крошки снаружи карточки.

Открыть
12не актуально

Focus mode

Chrome появляется при наведении. Максимум места редактору.

Открыть
13не актуально

Three zones

YAML слева узкой колонкой, редактор центр, actions sticky справа.

Открыть
16не актуально

Glass header

Полупрозрачная шапка поверх редактора. Крошки + actions в glass bar.

Открыть
18не актуально

Editable crumbs

Последний сегмент пути = редактируемое имя файла (без расширения).

Открыть
24не актуально

Stacked layout

Вертикальный stack: крошки → actions → yaml → editor (удобно на узких экранах).

Открыть
25не актуально

Improved current

Эволюция текущего макета: path-area убран, всё в одной шапке документа + YAML справа.

Открыть