Panel

Panel — панель рабочей области: скруглённый блок на фоне приложения, из которых собирается интерфейс (панели сплита документов, тулбоксы).

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

Panel.Header и Panel.Footer по умолчанию построены на Triplet: три равные колонки left / center / right, в каждый слот можно передать строку или произвольный ReactNode. Если шапке нужна не трёхколоночная раскладка, а произвольная разметка (например, ряд табов документов), передай её через children — тогда Triplet не рендерится и слоты игнорируются.

Panel.Content — в отличие от Page.Content скролл уже встроен: зона построена на ScrollArea, поэтому переполнившееся содержимое скроллится внутри панели само, оборачивать его в скролл-область не нужно.

В примерах ниже высоту и фон приложения даёт демо-рамка — в реальном коде она не нужна.

Panel.Header отдельно от панели: слева заголовок, по центру поиск, справа действие.

Panel.Footer — те же слоты и та же раскладка, что у шапки, но без children: произвольная разметка есть только у шапки.

Список длиннее панели: Panel.Content скроллит его сам — шапка и подвал остаются на месте.

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

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

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