NODEDC_DESIGN_GUIDELINE/docs/APPLICATION_TEMPLATE.md

Шаблон приложения

ApplicationShell — канонический форм-фактор нового приложения NODE.DC. Он повторяет устойчивую механику Launcher/Hub, но не включает продуктовую витрину и нижнюю service rail.

Состав

1. AppHeader — фиксированная трёхосевая шапка logo / workspace + navigation / profile; внешний toolbar 68 px, видимая строка 48 px.
2. stage — главное медиа- или предметное окно приложения.
3. navigation — левая панель шириной clamp(332px, 19.5vw, 352px).
4. content — отдельное рабочее окно справа от навигации.
5. ApplicationPanel — заголовок, действия expand/close и независимо прокручиваемое тело контента.

Позиции шапки не пересчитываются под конкретное приложение. Меняются подписи, доступные navigation actions, профиль и содержимое stage. HeaderNavigation, HeaderWorkspace, HeaderProfile, HeaderProfileButton и HeaderAvatar должны использоваться как готовые части пресета; consumer не назначает им собственные размеры и offsets.

Состояния desktop

Состояние	Навигация	Content window	Stage
Главная	закрыта	закрыто	занимает рабочую область
Guideline открыт	слева	закрыто	сдвинут вправо
Оконный режим	слева	средняя колонка	остаётся видимым справа
Развёрнутый режим	слева	до правого края	уезжает за viewport

Эти переходы принадлежат useApplicationWorkspace в React и createApplicationWorkspaceController в DOM. Оба API реализуют одинаковые команды: openNavigation, closeNavigation, toggleNavigation, openView, closeView, setContentExpanded.

Между панелями используется page gap 20px. На Guideline-главной нижней rail нет: она является продуктовым элементом витрины Launcher, а не частью общего shell.

Узкий viewport

До 760px шапка перестраивается в две строки. Navigation и content занимают доступную область под шапкой последовательно: открытый content скрывает navigation, но не уничтожает его состояние. Кнопка expand скрывается, потому что content уже использует всю доступную ширину.

Modal остаётся portal-слоем. Его тело прокручивается независимо, footer остаётся внутри viewport, а поля складываются в одну колонку.

Что принадлежит приложению

• route/state выбранного раздела;
• данные профиля;
• медиа и содержание stage;
• пункты navigation;
• предметное содержимое content window.

Shell владеет геометрией, слоями, переходами и breakpoint-поведением. См. готовый путь подключения в docs/CONSUMPTION.md.