@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/grid/types.js

@@ -0,0 +1,102 @@
+import { gapClasses } from "../stack/types.js";
+import { cva } from "class-variance-authority";
+// src/components/grid/types.ts
+/**
+* Классы колонок по брейкпоинтам.
+* Перечислены целиком, чтобы Tailwind потребителя их увидел.
+*/
+const gridColumnsClasses = {
+	"base": {
+		1: "grid-cols-1",
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4",
+		5: "grid-cols-5",
+		6: "grid-cols-6",
+		7: "grid-cols-7",
+		8: "grid-cols-8",
+		9: "grid-cols-9",
+		10: "grid-cols-10",
+		11: "grid-cols-11",
+		12: "grid-cols-12"
+	},
+	"sm": {
+		1: "sm:grid-cols-1",
+		2: "sm:grid-cols-2",
+		3: "sm:grid-cols-3",
+		4: "sm:grid-cols-4",
+		5: "sm:grid-cols-5",
+		6: "sm:grid-cols-6",
+		7: "sm:grid-cols-7",
+		8: "sm:grid-cols-8",
+		9: "sm:grid-cols-9",
+		10: "sm:grid-cols-10",
+		11: "sm:grid-cols-11",
+		12: "sm:grid-cols-12"
+	},
+	"md": {
+		1: "md:grid-cols-1",
+		2: "md:grid-cols-2",
+		3: "md:grid-cols-3",
+		4: "md:grid-cols-4",
+		5: "md:grid-cols-5",
+		6: "md:grid-cols-6",
+		7: "md:grid-cols-7",
+		8: "md:grid-cols-8",
+		9: "md:grid-cols-9",
+		10: "md:grid-cols-10",
+		11: "md:grid-cols-11",
+		12: "md:grid-cols-12"
+	},
+	"lg": {
+		1: "lg:grid-cols-1",
+		2: "lg:grid-cols-2",
+		3: "lg:grid-cols-3",
+		4: "lg:grid-cols-4",
+		5: "lg:grid-cols-5",
+		6: "lg:grid-cols-6",
+		7: "lg:grid-cols-7",
+		8: "lg:grid-cols-8",
+		9: "lg:grid-cols-9",
+		10: "lg:grid-cols-10",
+		11: "lg:grid-cols-11",
+		12: "lg:grid-cols-12"
+	},
+	"xl": {
+		1: "xl:grid-cols-1",
+		2: "xl:grid-cols-2",
+		3: "xl:grid-cols-3",
+		4: "xl:grid-cols-4",
+		5: "xl:grid-cols-5",
+		6: "xl:grid-cols-6",
+		7: "xl:grid-cols-7",
+		8: "xl:grid-cols-8",
+		9: "xl:grid-cols-9",
+		10: "xl:grid-cols-10",
+		11: "xl:grid-cols-11",
+		12: "xl:grid-cols-12"
+	},
+	"2xl": {
+		1: "2xl:grid-cols-1",
+		2: "2xl:grid-cols-2",
+		3: "2xl:grid-cols-3",
+		4: "2xl:grid-cols-4",
+		5: "2xl:grid-cols-5",
+		6: "2xl:grid-cols-6",
+		7: "2xl:grid-cols-7",
+		8: "2xl:grid-cols-8",
+		9: "2xl:grid-cols-9",
+		10: "2xl:grid-cols-10",
+		11: "2xl:grid-cols-11",
+		12: "2xl:grid-cols-12"
+	}
+};
+/**
+* Стили сетки: отступ между ячейками. Колонки — gridColumnsClasses.
+* Экспортируются, чтобы разложить сеткой другой элемент: gridVariants({ gap: 4 }).
+*/
+const gridVariants = cva("grid", {
+	variants: { gap: gapClasses },
+	defaultVariants: { gap: 4 }
+});
+export { gridColumnsClasses, gridVariants };

package/dist/components/hover-card/hover-card.d.ts

@@ -0,0 +1,19 @@
+import { HoverCardContentPropsT, HoverCardPropsT, HoverCardTriggerPropsT } from "./types.js";
+/**
+ * Карточка при наведении: превью содержимого за ссылкой. Только для зрячих пользователей мыши
+ * @param props - пропсы карточки
+ * @returns корень без своей разметки
+ */
+export declare function HoverCard({ onOpenChange, ...props }: HoverCardPropsT): import("react").JSX.Element;
+/**
+ * Ссылка с карточкой: при наведении показывает её. Свой элемент — через render={<Button />}
+ * @param props - пропсы ссылки
+ * @returns a
+ */
+export declare function HoverCardTrigger(props: HoverCardTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое карточки: рендерится в портале рядом со ссылкой
+ * @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+ * @returns портал с карточкой
+ */
+export declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, collisionPadding, arrowPadding, sticky, ...props }: HoverCardContentPropsT): import("react").JSX.Element;

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+// src/components/hover-card/hover-card.tsx
+/**
+* Карточка при наведении: превью содержимого за ссылкой. Только для зрячих пользователей мыши
+* @param props - пропсы карточки
+* @returns корень без своей разметки
+*/
+function HoverCard({ onOpenChange, ...props }) {
+	/**
+	* Карточку показали или скрыли: наружу только флаг
+	* @param open - открыта ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Ссылка с карточкой: при наведении показывает её. Свой элемент — через render={<Button />}
+* @param props - пропсы ссылки
+* @returns a
+*/
+function HoverCardTrigger(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+/**
+* Содержимое карточки: рендерится в портале рядом со ссылкой
+* @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+* @returns портал с карточкой
+*/
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding, arrowPadding, sticky, ...props }) {
+	const classes = cn("z-50", "w-64", "origin-(--transform-origin)", "rounded-lg", "bg-popover", "p-2.5", "text-sm", "text-popover-foreground", "shadow-md", "ring-1", "ring-foreground/10", "outline-hidden", "duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className);
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionPadding,
+		arrowPadding,
+		sticky
+	};
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			className: "isolate z-50",
+			...positionerProps,
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				className: classes,
+				...props
+			})
+		})
+	});
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,3 @@
+import { HoverCardContentPropsT, HoverCardPropsT, HoverCardTriggerPropsT } from "./types.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+export { HoverCard, HoverCardContent, type HoverCardContentPropsT, type HoverCardPropsT, HoverCardTrigger, type HoverCardTriggerPropsT };

package/dist/components/hover-card/index.js

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";

package/dist/components/hover-card/types.d.ts

@@ -0,0 +1,27 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { FloatingPropsT } from "../../lib/floating.js";
+import { PreviewCard } from "@base-ui/react/preview-card";
+/**
+ * Пропсы карточки при наведении
+ */
+export type HoverCardPropsT = Omit<PreviewCard.Root.Props, 'onOpenChange'> & {
+  /** Карточка открыта — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Карточка открыта при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Карточку показали или скрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Пропсы ссылки с карточкой
+ */
+export type HoverCardTriggerPropsT = PartPropsT<PreviewCard.Trigger.Props> & {
+  /** Задержка перед показом в мс. По умолчанию 600 */
+  delay?: number;
+  /** Задержка перед скрытием в мс. По умолчанию 300 */
+  closeDelay?: number;
+};
+/**
+ * Пропсы содержимого карточки
+ */
+export type HoverCardContentPropsT = PartPropsT<PreviewCard.Popup.Props> & FloatingPropsT;

package/dist/components/image-gallery/image-gallery.d.ts

@@ -0,0 +1,8 @@
+import { ImageGalleryPropsT } from "./types.js";
+/**
+ * Галерея изображений: сетка «кирпичной кладки» с ленивой загрузкой.
+ * Нажатие на изображение плавно увеличивает его поверх страницы
+ * @param props - пропсы галереи
+ * @returns контейнер с плитками и просмотром изображения
+ */
+export declare function ImageGallery({ images, gap, columns, lazyLoading, filterImages, sortImages, onImageClick, openLabel, closeLabel, itemClassName, viewerClassName, backdropClassName, className, style, ref, ...props }: ImageGalleryPropsT): import("react").JSX.Element;

package/dist/components/image-gallery/image-gallery.js

@@ -0,0 +1,294 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { getMasonryLayout } from "./masonry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+// src/components/image-gallery/image-gallery.tsx
+const DEFAULT_OPEN_LABEL = "Открыть изображение";
+const LAZY_MARGIN = 500;
+const MOBILE_WIDTH = 480;
+const TABLET_WIDTH = 768;
+const FALLBACK_RATIOS = [
+	.75,
+	1,
+	1.5,
+	2
+];
+const morphTransition = {
+	type: "spring",
+	stiffness: 120,
+	damping: 15
+};
+/**
+* Изображению без размеров подставляет размеры по номеру, чтобы раскладка была стабильной
+* @param image - изображение
+* @param index - номер в списке
+* @returns изображение с размерами
+*/
+function withDimensions(image, index) {
+	if (image.width && image.height) return image;
+	const ratio = FALLBACK_RATIOS[index % FALLBACK_RATIOS.length] ?? 1;
+	return {
+		...image,
+		width: 800,
+		height: Math.round(800 / ratio)
+	};
+}
+/**
+* Скругление элемента в px из его классов. motion сохраняет скругление при анимации
+* размера, только если оно задано числом в style, иначе углы сжимаются вместе с картинкой
+* @param ref - элемент, у которого берётся скругление
+* @returns скругление в px или undefined до измерения
+*/
+function useBorderRadius(ref) {
+	const [radius, setRadius] = useState();
+	useLayoutEffect(() => {
+		if (ref.current) setRadius(parseFloat(getComputedStyle(ref.current).borderTopLeftRadius));
+	}, [ref]);
+	return radius;
+}
+/**
+* Число колонок по ширине галереи
+* @param width - ширина контейнера, px
+* @param columns - число колонок для разной ширины
+* @returns число колонок
+*/
+function getColumnCount(width, columns = {}) {
+	if (width < MOBILE_WIDTH) return columns.mobile ?? 1;
+	if (width < TABLET_WIDTH) return columns.tablet ?? 2;
+	return columns.desktop ?? 3;
+}
+/**
+* Галерея изображений: сетка «кирпичной кладки» с ленивой загрузкой.
+* Нажатие на изображение плавно увеличивает его поверх страницы
+* @param props - пропсы галереи
+* @returns контейнер с плитками и просмотром изображения
+*/
+function ImageGallery({ images, gap = 16, columns, lazyLoading = true, filterImages, sortImages, onImageClick, openLabel = DEFAULT_OPEN_LABEL, closeLabel = texts.close, itemClassName, viewerClassName, backdropClassName, className, style, ref, ...props }) {
+	const galleryId = useId();
+	const containerRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const visibleImages = useMemo(() => {
+		let result = images.map(withDimensions);
+		if (filterImages) result = result.filter(filterImages);
+		if (sortImages) result = result.sort(sortImages);
+		return result;
+	}, [
+		images,
+		filterImages,
+		sortImages
+	]);
+	const columnCount = getColumnCount(containerWidth, columns);
+	const layout = useMemo(() => getMasonryLayout(visibleImages, containerWidth, columnCount, gap), [
+		visibleImages,
+		containerWidth,
+		columnCount,
+		gap
+	]);
+	const activeImage = activeIndex === null ? void 0 : visibleImages[activeIndex];
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setContainerWidth(container.clientWidth));
+		setContainerWidth(container.clientWidth);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Элемент галереи: для измерения ширины и наружу
+	* @param node - элемент или null при размонтировании
+	*/
+	const setRef = (node) => {
+		containerRef.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	};
+	/**
+	* Нажатие на плитку: открыть изображение и сообщить наружу
+	* @param item - плитка
+	*/
+	const handleItemClick = (item) => {
+		setActiveIndex(item.index);
+		onImageClick?.(item.image, item.index);
+	};
+	const closeViewer = () => setActiveIndex(null);
+	const rootStyle = {
+		height: layout.height,
+		...style
+	};
+	const classes = cn("relative", "w-full", className);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-gallery",
+		ref: setRef,
+		className: classes,
+		style: rootStyle,
+		...props,
+		children: [layout.items.map((item) => /* @__PURE__ */ jsx(ImageGalleryItem, {
+			item,
+			layoutId: `${galleryId}-${item.index}`,
+			lazyLoading,
+			openLabel,
+			className: itemClassName,
+			onOpen: handleItemClick
+		}, `${item.image.src}-${item.index}`)), /* @__PURE__ */ jsx(ImageGalleryViewer, {
+			image: activeImage,
+			layoutId: `${galleryId}-${activeIndex}`,
+			closeLabel,
+			className: viewerClassName,
+			backdropClassName,
+			onClose: closeViewer
+		})]
+	});
+}
+/**
+* Плитка галереи: кнопка с изображением, пока изображение не загружено — заглушка
+* @param props - пропсы плитки
+* @returns кнопка открытия изображения
+*/
+function ImageGalleryItem({ item, layoutId, lazyLoading, openLabel, className, onOpen }) {
+	const buttonRef = useRef(null);
+	const [isNear, setIsNear] = useState(false);
+	const isLoaded = !lazyLoading || isNear;
+	const radius = useBorderRadius(buttonRef);
+	useEffect(() => {
+		const button = buttonRef.current;
+		if (!lazyLoading || !button) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setIsNear(true);
+				observer.disconnect();
+			}
+		}, { rootMargin: `${LAZY_MARGIN}px` });
+		observer.observe(button);
+		return () => observer.disconnect();
+	}, [lazyLoading]);
+	const classes = cn("group/image-gallery-item", "absolute", "block", "cursor-zoom-in", "rounded-lg", "outline-none", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", !isLoaded && ["animate-pulse", "bg-muted"], className);
+	const buttonStyle = {
+		left: item.x,
+		top: item.y,
+		width: item.width,
+		height: item.height
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "image-gallery-item",
+		ref: buttonRef,
+		type: "button",
+		"aria-label": `${openLabel}: ${item.image.alt}`,
+		className: classes,
+		style: buttonStyle,
+		onClick: () => onOpen(item),
+		children: isLoaded && /* @__PURE__ */ jsx(motion.img, {
+			"data-slot": "image-gallery-image",
+			layoutId,
+			src: item.image.src,
+			alt: "",
+			draggable: false,
+			transition: morphTransition,
+			className: "size-full rounded-[inherit] object-cover object-center",
+			style: { borderRadius: radius }
+		})
+	});
+}
+/**
+* Просмотр: затемнение и увеличенное изображение поверх страницы. Закрывается
+* нажатием, клавишей Escape; прокрутка страницы блокируется
+* @param props - пропсы просмотра
+* @returns портал с затемнением и изображением
+*/
+function ImageGalleryViewer({ image, layoutId, closeLabel, className, backdropClassName, onClose }) {
+	const [isMounted, setIsMounted] = useState(false);
+	const isOpen = image !== void 0;
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") onClose();
+		};
+		const previousOverflow = document.body.style.overflow;
+		const previousFocus = document.activeElement;
+		const blockedElements = [];
+		for (const element of document.body.children) {
+			const slot = element.getAttribute("data-slot");
+			if (slot === "image-gallery-backdrop" || slot === "image-gallery-viewer") continue;
+			if (!element.hasAttribute("inert")) {
+				element.setAttribute("inert", "");
+				blockedElements.push(element);
+			}
+		}
+		document.body.style.overflow = "hidden";
+		document.addEventListener("keydown", handleKeyDown);
+		document.querySelector("[data-slot=\"image-gallery-viewer\"]")?.focus({ preventScroll: true });
+		return () => {
+			for (const element of blockedElements) element.removeAttribute("inert");
+			document.body.style.overflow = previousOverflow;
+			document.removeEventListener("keydown", handleKeyDown);
+			if (previousFocus instanceof HTMLElement) previousFocus.focus({ preventScroll: true });
+		};
+	}, [isOpen, onClose]);
+	if (!isMounted) return null;
+	const backdropClasses = cn("fixed", "inset-0", "z-50", "cursor-zoom-out", "bg-black/80", backdropClassName);
+	const imageClasses = cn("pointer-events-auto", "max-h-[90vh]", "max-w-[90vw]", "cursor-zoom-out", "rounded-lg", "object-cover", "object-center", className);
+	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: image && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.button, {
+		"data-slot": "image-gallery-backdrop",
+		type: "button",
+		"aria-label": closeLabel,
+		tabIndex: -1,
+		className: backdropClasses,
+		initial: { opacity: 0 },
+		animate: {
+			opacity: 1,
+			pointerEvents: "auto"
+		},
+		exit: {
+			opacity: 0,
+			pointerEvents: "none"
+		},
+		transition: { duration: .3 },
+		onClick: onClose
+	}, "backdrop"), /* @__PURE__ */ jsx("div", {
+		"data-slot": "image-gallery-viewer",
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": image.alt,
+		tabIndex: -1,
+		className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center outline-none",
+		children: /* @__PURE__ */ jsx(ImageGalleryViewerImage, {
+			image,
+			layoutId,
+			className: imageClasses,
+			onClose
+		})
+	}, layoutId)] }) }), document.body);
+}
+/**
+* Увеличенное изображение: прилетает из плитки и улетает обратно, сохраняя скругление
+* @param props - пропсы изображения
+* @returns изображение
+*/
+function ImageGalleryViewerImage({ image, layoutId, className, onClose }) {
+	const imageRef = useRef(null);
+	const radius = useBorderRadius(imageRef);
+	return /* @__PURE__ */ jsx(motion.img, {
+		"data-slot": "image-gallery-viewer-image",
+		ref: imageRef,
+		layoutId,
+		src: image.src,
+		alt: image.alt,
+		animate: { pointerEvents: "auto" },
+		exit: { pointerEvents: "none" },
+		transition: morphTransition,
+		className,
+		style: { borderRadius: radius },
+		onClick: onClose
+	});
+}
+export { ImageGallery };

package/dist/components/image-gallery/index.d.ts

@@ -0,0 +1,4 @@
+import { ImageGalleryColumnsI, ImageGalleryImageI, ImageGalleryPropsT, MasonryItemI, MasonryLayoutI } from "./types.js";
+import { ImageGallery } from "./image-gallery.js";
+import { getMasonryLayout } from "./masonry.js";
+export { ImageGallery, type ImageGalleryColumnsI, type ImageGalleryImageI, type ImageGalleryPropsT, type MasonryItemI, type MasonryLayoutI, getMasonryLayout };

package/dist/components/image-gallery/index.js

@@ -0,0 +1,3 @@
+import { getMasonryLayout } from "./masonry.js";
+import { ImageGallery } from "./image-gallery.js";
+export { ImageGallery, getMasonryLayout };

package/dist/components/image-gallery/masonry.d.ts

@@ -0,0 +1,11 @@
+import { ImageGalleryImageI, MasonryLayoutI } from "./types.js";
+/**
+ * Раскладка «кирпичной кладки»: каждое изображение идёт в самую низкую колонку,
+ * затем плитки колонки растягиваются так, чтобы все колонки закончились на одной высоте
+ * @param images - изображения
+ * @param containerWidth - ширина контейнера, px
+ * @param columnCount - число колонок
+ * @param gap - промежуток между плитками, px
+ * @returns плитки с позициями и общая высота
+ */
+export declare function getMasonryLayout(images: ImageGalleryImageI[], containerWidth: number, columnCount: number, gap: number): MasonryLayoutI;

package/dist/components/image-gallery/masonry.js

@@ -0,0 +1,62 @@
+// src/components/image-gallery/masonry.ts
+/**
+* Пропорции изображения: ширина к высоте, квадрат, если размеры не заданы
+* @param image - изображение
+* @returns отношение ширины к высоте
+*/
+function getAspectRatio(image) {
+	if (image.width && image.height) return image.width / image.height;
+	return 1;
+}
+/**
+* Раскладка «кирпичной кладки»: каждое изображение идёт в самую низкую колонку,
+* затем плитки колонки растягиваются так, чтобы все колонки закончились на одной высоте
+* @param images - изображения
+* @param containerWidth - ширина контейнера, px
+* @param columnCount - число колонок
+* @param gap - промежуток между плитками, px
+* @returns плитки с позициями и общая высота
+*/
+function getMasonryLayout(images, containerWidth, columnCount, gap) {
+	if (containerWidth <= 0 || images.length === 0 || columnCount < 1) return {
+		items: [],
+		height: 0
+	};
+	const columnWidth = (containerWidth - gap * (columnCount - 1)) / columnCount;
+	const columnHeights = Array.from({ length: columnCount }, () => 0);
+	const columns = Array.from({ length: columnCount }, () => []);
+	images.forEach((image, index) => {
+		const columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+		columnHeights[columnIndex] = (columnHeights[columnIndex] ?? 0) + columnWidth / getAspectRatio(image) + gap;
+		columns[columnIndex]?.push({
+			image,
+			index
+		});
+	});
+	const totalHeight = Math.max(...columnHeights) - gap;
+	const items = [];
+	columns.forEach((column, columnIndex) => {
+		if (column.length === 0) return;
+		let imagesHeight = 0;
+		for (const { image } of column) imagesHeight += columnWidth / getAspectRatio(image);
+		const scale = (totalHeight - gap * (column.length - 1)) / imagesHeight;
+		let offsetY = 0;
+		for (const { image, index } of column) {
+			const height = columnWidth / getAspectRatio(image) * scale;
+			items.push({
+				image,
+				index,
+				x: columnIndex * (columnWidth + gap),
+				y: offsetY,
+				width: columnWidth,
+				height
+			});
+			offsetY += height + gap;
+		}
+	});
+	return {
+		items,
+		height: totalHeight
+	};
+}
+export { getMasonryLayout };