Page

Page — каркас страницы приложения на весь вьюпорт (100dvw × 100dvh).

Page.Root — CSS-грид из трёх строк: Page.Header, Page.Content (растягивается на всё свободное место) и Page.Footer. Части находят свою строку по data-атрибутам, поэтому порядок детей не важен; шапка и подвал опциональны. Фон — токен фона приложения с едва заметным фиолетовым свечением из левого верхнего угла. Это корень всего приложения (один на приложение, рендерится в корневом layout), а не блок внутри страницы.

Page.Header и Page.Footer построены на Triplet: три равные колонки left / center / right, в каждый слот можно передать строку или произвольный ReactNode, несколько элементов внутри слота выстраиваются в ряд с отступом. Колонки всегда одной ширины, поэтому center стоит строго по центру страницы независимо от наполнения соседей.

Page.Content задаёт горизонтальные паддинги и min-height: 0, поэтому вложенные скролл-области (ScrollArea) сжимаются до высоты зоны и скроллятся внутри неё, а не растягивают страницу.

В примерах ниже страница ужата в рамку превью демо-обёрткой — в реальном коде она не нужна.

Page.Header отдельно от страницы: слева — кнопка меню и название проекта в одном слоте, по центру поиск, справа действие.

Page.Footer — те же слоты и та же раскладка, что у шапки: отличается только строкой грида, в которую попадает.

Список длиннее зоны контента: ScrollArea, растянутая на высоту зоны, скроллит его внутри страницы — шапка и подвал остаются на месте.

Шапка страницы — первая строка грида; слоты раскладываются Triplet'ом.

Основная зона страницы — занимает всё место между шапкой и подвалом.

Подвал страницы — последняя строка грида, тот же Triplet.