Палитра

Временная страница для проверки токенов и компонентов. Разбита на табы, слаг таба — в пути: перезагрузка (в том числе HMR) оставляет на текущем. Таб-бар — наш жеFilterChips.

Свой 500:

Image / Picture — картинки через CDN-трансформер

Аналог NuxtImage без build-time пайплайна: transforms уходит query-параметрами в URL, ресайзит Bunny Optimizer. Провайдер меняется одной строкой вlib/image/transformer.ts, компоненты о нём не знают. Относительныйsrc приклеивается к PUBLIC_CDN_BASE_URL; абсолютные, data:и blob: проходят как есть. Параметры видны в атрибутах — смотрите devtools.

`transforms={{ width: 400, quality: 80 }}` — относительный src + база из env

`widths={[320, 640, 960]}` + `sizes` → srcset;`aspectRatio: '16:9'` считает и интринсик-высоту

`Picture formats={['webp']}` — source + фолбэк;`saturation: -80`, чтобы отличить на глаз

NsfwShield — SFW-режим

Включите «Режим: SFW» наверху — каждый щит замылит своё содержимое (backdrop-filter+ тонировка) и покажет мебель по размеру блока: sm — только ghost-глазик,md — глазик и outline-кнопка «Show» (новый тон: на ховере фон светлеет, текст темнеет — единственная кнопка с инверсией), lg/xl — предупреждение, крупный глазик и «Unlock» с настраиваемой подписью. Клик по кнопке снимает щит только у этого блока(событие nsfw:reveal отменяемое — баннер сможет вместо раскрытия увести на регистрацию). Режим — атрибут data-sfw на <html>: в проде его поставит сервер по куке, тут — тумблер. Глазик eye-off-solid собран из нашегоeye + разрыв и косая черта: перечёркнутого в макете нет.