Палитра
Временная страница для проверки токенов и компонентов. Разбита на табы, слаг таба — в пути: перезагрузка (в том числе HMR) оставляет на текущем. Таб-бар — наш жеFilterChips.
Боковое меню (SideMenu)
Скруглённые карточки на фоне страницы, строки по 44. Два режима: закрытый —56px, только иконки; открытый — 160px, иконки + подписи + заголовки групп. Инсеты в обоих режимах одинаковые (ревизия их выровняла), так что анимация двигает только ширину панели на --ease-out — иконки стоят на месте, подписи и заголовки проявляются на --ease-standard; заголовки в закрытом режиме складываются в ноль по высоте. Иконки — только solid-семейство. Активный пункт — «пробитая» пилюля цветом страницы (инсет 2/4, r12), иконка и подпись в нём белые; всё остальное — приглушено(ревизия 7121:114295, меню перетягивало внимание): подписи и заголовки групп на secondary 50% и Regular, глифы — серый макета (--side-menu-icon-color). Ховер: строка заливается той же тёмной «дырой», что активная пилюля (пункты шапки — так же, решение после проб с lift-подсветкой), подпись и глиф светлеют до белого вместе. Между главной карточкой и тегами — промо Subscribe (проп promo): 56px на логотипной мадженте (--side-menu-promo-bg → новая шкала magenta, якорь #bb038d из logo-v2.svg; сознательно вне бренд-темы), в закрытой полосе схлопывается в иконочный квадрат.
Режим живёт на элементе атрибутом data-open, а водит его владелец кнопки — снаружи, событиями menu:toggle / menu:set (detail.open). Сайтовый экземпляр уже встроен в лайаут слева (SideNav): занимает физическую колонку, двигает контент, липнет под шапкой, режим переживает навигацию через localStorage — его водит бургер шапки. Ниже — отдельное демо компонента с фикстурой и отладочной кнопкой.
Шапка и поиск (Header / SearchField)
Шапка пересобрана по макету Header-Desktop-2.0-no-login и живёт наверху каждой страницы: приподнятый бар r16 на инсете 8, слева бургер + лого с CDN (logo-v2.svg), в центре навигация с точками New/Live (обе —--status-accent, слово пользователя; в макете Live оранжевая) и поиск, справа Sign In / Sign Up. Бургер водит сайтовое меню в лайауте — событием menu:toggle — и анимирован: длинная средняя палочка глифа выдвигается вправо, пока меню открыто, и влево, когда закрыто. Узкие вьюпорты: навигация прячется ниже lg, поиск — нижеmd.
Поиск — отдельный компонент-каркас (по договорённости): пилюля 32px, «пробитая» в цвет страницы, ввод принимает, но ничего не ищет. Выбранное состояние с крестиком (Text Search в макете) и сама механика — отдельным заходом. Ниже — экземпляр на приподнятой подложке, как в шапке:
data-surface="raised"