Masonry Kit

Framework-agnostic движок masonry/bento-сетки — с измерением через ResizeObserver и позиционированием через transform, где бенто-карточки colSpan/rowSpan заложены с самого начала, а не пристроены поверх. Адаптеры для Vue 3, React и Nuxt делят одно ядро. Разметка и содержимое карточек остаются полностью вашими — пакет только измеряет их и расставляет.

Возможности

• Skyline-упаковка, обобщённая на спаны — классическая masonry-упаковка «в наименее заполненную колонку», расширенная на бенто-карточки colSpan/rowSpan с первой строчки кода, а не пристроенная поверх позже; 'balanced' (по умолчанию) выбирает наименее заполненную группу колонок под каждую карточку, 'ordered' — строгий round-robin
• Один движок для обоих направлений — direction: 'vertical' (колонки) и 'horizontal' (строки) используют одну и ту же геометрию ядра, а не два отдельных алгоритма, которые приходится держать в синхроне
• Transform-позиционирование, а не CSS columns/Grid masonry — каждая карточка измеряется через ResizeObserver и расставляется через transform: translate(), так что reflow никогда не вызывает собственный layout, а изменение высоты картинки после load само пересобирает сетку
• Встроенная виртуализация — двухфазная раскладка для больших списков: карточки вне видимой области (± overscan) вообще пропускают измерение DOM и используют оценку размера — пересчёт остаётся дешёвым независимо от размера списка
• FLIP-анимация reflow — карточки плавно съезжают на новое место вместо телепортации, и проявляются/исчезают при добавлении/удалении — целиком через инлайн-стили, без обязательного CSS
• SSR-safe — приближение через CSS columns рендерится до появления движка (на сервере и один клиентский кадр до первого реального измерения), а затем сменяется точной раскладкой в тот же кадр, когда движок измеряет
• Клавиатурная пересортировка — взять/переместить/отпустить через пробел и стрелки, с озвучиванием через live-регион; указательный/тач-drag был опробован и намеренно не реализован — skyline-упаковка делает live-перетаскивание мышью непредсказуемым (кто окажется соседом, зависит от точного пути курсора, а не только от точки посадки) так, как дискретный шаг клавиатурой — нет
• Адаптеры для Vue, React и Nuxt поверх одного ядра — пара компонент/хук <MasonryGrid> для каждого фреймворка, каждый реэкспортирует всю поверхность ядра, так что установки одного адаптера достаточно, чтобы добраться и до framework-agnostic слоя
• Ноль peer-зависимостей в ядре — @macrulez/masonry-kit-core работает где угодно, включая вообще без фреймворка