Lip Gloss: раскладка и выравнивание

Свойство Width на стиле делает больше, чем кажется. Во-первых, длинный текст переносится по словам на ширину блока минус горизонтальные паддинги. Во-вторых, короткие строки добираются пробелами до полной ширины — даже если вы рендерите одну строку, результат будет именно такой ширины. Высота ведёт себя зеркально: Height добивает блок пустыми строками, а куда именно — регулирует AlignVertical с позициями Top, Center и Bottom. Из этого следует привычка, на которой держится вся раскладка: любой блок, который вы собираетесь склеивать с соседями, рендерите с явной Width. Блок без ширины — лента по ширине самого длинного слова, и при склейке он станет источником кривизны. Ширина в символах, а не в пикселях: с кириллицей проблем нет, но помните, что ширина измеряется в ячейках терминала, и это ровно та единица, которой измеряется окно.

JoinHorizontal принимает позицию и любое число блоков, склеивая их по горизонтали. Позиция — где короткий блок прижмётся к высокому: константы Top, Center и Bottom покрывают обычные случаи, но под капотом это просто дробь от нуля до единицы, и JoinHorizontal(0.2, ...) прижмёт блок на пятую часть высоты от верха. Блоки с меньшим числом строк дополняются пустыми строками — сверху, снизу или по обе стороны, в зависимости от позиции. JoinVertical — зеркальный случай: склейка стопкой, где каждая строка дополняется пробелами до ширины самого широкого блока, а позиция Left, Center или Right решает, к какому краю прижиматься. Важная деталь, экономящая часы: JoinHorizontal сам дополняет каждую строку каждого блока до ширины блока, поэтому склеенный результат остаётся прямоугольником — рваные правые края у вас не появятся, даже если забыли про Width. Зазор между панелями — тоже блок: отдельный стиль с PaddingRight или строка пробелов нужной ширины.

Align управляет текстом внутри блока с заданной Width: Align(lipgloss.Center) отцентрует каждую строку, Left и Right прижмут к краям. Вертикальный собрат AlignVertical делает то же с Height: контент уедет вверх, в центр или вниз блока. Метод Align принимает до двух позиций — сначала горизонталь, потом вертикаль, поэтому Align(Center, Center) — это полностью отцентрованный текст в блоке. Классический приём раскладки — статус-бар с прижатыми к разным краям элементами: левый блок и правый блок рендерятся отдельно, ширина зазора считается вычитанием из общей ширины строки, а между ними кладётся строка пробелов через JoinHorizontal. Функции lipgloss.Width и lipgloss.Height измеряют уже отрендеренный текст — с учётом невидимых управляющих кодов, но без них в счёте: вернуть видимую ширину раскрашенной строки — ровно то, что нужно для такого вычитания.

Функция Place решает обратную задачу: не вставить блок в раскладку, а вставить раскладку вокруг блока. Place(width, height, hPos, vPos, content) возвращает бокс заданного размера, внутри которого контент стоит по указанным позициям — по горизонтали Left, Center, Right, по вертикали Top, Center, Bottom. Частные случаи — PlaceHorizontal и PlaceVertical, когда хватает одной оси. Если контент шире запрошенного бокса, Place не режет его, а оставляет как есть — обрезка ваша забота, и это спасает от пропавших строк. Пустоту внутри бокса можно раскрасить: опции WhitespaceOption добавляют фону цвет через WithWhitespaceBackground или заполняют её не пробелами, а символом через WithWhitespaceChars. Типичные применения: пустое состояние списка по центру экрана, сплэш при старте, подсказка в середине большой панели, когда контента ещё нет.

Грида в Lip Gloss нет, но ячейка собирается за минуту: стиль с Width и Height — это ровно одна ячейка фиксированного размера, и матрица из таких ячеек склеивается двумя циклами — строки через JoinVertical с Left, колонки внутри строки через JoinHorizontal. Колонки не разъедутся, если все ячейки одного ряда объявили одинаковую Width: выравнивание сетки — ваша дисциплина, а не забота библиотеки. Для настоящих табличных данных с курсором и прокруткой этот приём не нужен — берите bubbles/table из тринадцатого урока; сетка из стилей хороша для плиток дашборда: четыре карточки два на два с цифрами внутри. Честное ограничение: содержимое ячейки шире Width — перенесётся по словам, что для коротких подписей обычно и нужно; высота больше двух строк в ячейке уже намекает, что пора выделять панель отдельно.

Раскладка, которая не реагирует на окно, живёт до первого resize. Схема адаптива механическая: в модели появляются поля width и height, Update ловит tea.WindowSizeMsg и сохраняет msg.Width и msg.Height, а View собирает экран из этих чисел — сайдбару фиксированная ширина, таблице всё, что осталось, статус-бару ровно msg.Width. Пересчитывать ширины колонок и размеры внутренних компонентов логично там же, в ветке сообщения: у таблицы и textarea для этого есть свои SetWidth и SetHeight. Здесь проходит граница с полноэкранным режимом: пока рисуетесь построчно, высота окна вас почти не волнует, а в alt-screen весь экран ваш, и высота становится такой же важной, как ширина. Эту пару — alt-screen и полная геометрия окна — разбирает урок про alt-screen, здесь берём только правило: раскладка — функция размеров из модели, а не догадка в View.

Экран собран — следующий шаг заставить его занять весь терминал по-настоящему: урок про alt-screen и размеры окна доведёт WindowSizeMsg до конца и покажет, чем полноэкранный режим отличается от построчного вывода. Панели, собранные здесь, хочется и щёлкать: клики по координатам приносит урок про мышь. Когда стилей и раскладки становится много, им пора в отдельный файл — этому учит урок про структуру крупного проекта, где styles.go становится обязательным жильцом. Полная программа курса — на странице курса Bubble Tea. Практика: соберите экран из шапки, двух панелей и статус-бара, затем растяните и сожмите окно терминала — если панели ведут себя как приклеенные, а зазор статус-бара тянется ровно, адаптив у вас получился.