Page

Page — каркас страницы: шапка, контент и подвал.

Проп layout выбирает раскладку. application (по умолчанию) — каркас приложения на весь вьюпорт (100dvw × 100dvh, overflow: hidden): страница не скроллится, скролл живёт внутри зон. site — каркас сайта: высота окна берётся за минимум, дальше страница растёт по контенту и скроллится окном. Раскладка идёт в паре с импортом стилей — @tulls/ui/application.css или @tulls/ui/site.css (см. Установку): скролл самой страницы разрешает именно он.

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

Своего фона у Page.Root нет — его рисует Page.Bg: слой на всю страницу под остальными частями. Без него страница остаётся прозрачной. Сам по себе слой — заливка токеном фона приложения, с пропом glow к ней добавляется фирменное свечение Tulls: широкое, еле заметное фиолетовое пятно из левого верхнего угла. Приложения Tulls ставят <Page.Bg glow />.

Свой фон — например у сайта — передаётся детьми: они кладутся в одну ячейку поверх базовой заливки, накладываются друг на друга и растягиваются на весь слой, так что градиент, картинка и анимация собираются стопкой. Слой обрезает вылезающее (overflow: hidden), а точечная правка самой заливки делается через className — как и у остальных частей, атрибуты div'а прокидываются насквозь.

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

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

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

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

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

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

Фон страницы — слой на всю её площадь под шапкой, контентом и подвалом; свои слои фона передаются детьми.

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

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

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