masonry-simple 4.5.0 → 5.0.1

package/README.md

@@ -2,15 +2,24 @@
 
 A lightweight masonry layout helper built on top of CSS Grid.
 
+[![npm](https://img.shields.io/npm/v/masonry-simple.svg?colorB=brightgreen)](https://www.npmjs.com/package/masonry-simple)
+[![NPM Downloads](https://img.shields.io/npm/dm/masonry-simple.svg?style=flat)](https://www.npmjs.com/package/masonry-simple)
+
+[Demo](https://codepen.io/ux-ui/pen/poxGEqX)
+
+---
+
 - Idempotent lifecycle: `init()`, `refresh()`, `destroy()`.
 - Unified layout scheduling for resize, mutations, image load, and manual refresh.
 - Safe teardown with observer/listener cleanup and inline-style restoration.
 - Supports dynamic image content and responsive CSS changes.
 
+---
+
 ## Install
 
 ```bash
-yarn add masonry-simple
+npm install masonry-simple
 ```
 
 ## Usage (TypeScript)

package/dist/index.cjs

@@ -0,0 +1,198 @@
+
+//#region src/index.ts
+var MasonrySimple = class {
+	containerOption;
+	container = null;
+	gridItems = [];
+	rowHeight = 1;
+	rowGap = 0;
+	resizeScheduled = false;
+	rafId = null;
+	resizeObserver = null;
+	mutationObserver = null;
+	observerAbortController = null;
+	imageAbortController = null;
+	observedImages = /* @__PURE__ */ new WeakSet();
+	isInitialized = false;
+	isDestroyed = false;
+	originalContainerStyles = {
+		gridAutoRows: "",
+		contain: "",
+		alignItems: ""
+	};
+	constructor(options = {}) {
+		this.containerOption = options.container;
+	}
+	init() {
+		if (this.isInitialized) return;
+		this.container = this.resolveContainer();
+		if (!this.container) return;
+		this.isInitialized = true;
+		this.isDestroyed = false;
+		this.setupAbortControllers();
+		this.storeContainerStyles();
+		this.initializeContainerStyles();
+		this.initializeGridItems();
+		this.setupResizeObserver();
+		this.setupMutationObserver();
+		this.scheduleLayout();
+	}
+	refresh() {
+		if (!this.isInitialized || this.isDestroyed || !this.container) return;
+		this.initializeGridItems();
+		this.scheduleLayout();
+	}
+	destroy() {
+		if (!this.isInitialized && !this.container) return;
+		this.isDestroyed = true;
+		this.isInitialized = false;
+		this.cancelScheduledLayout();
+		this.observerAbortController?.abort();
+		this.imageAbortController?.abort();
+		this.resizeObserver?.disconnect();
+		this.mutationObserver?.disconnect();
+		this.gridItems.forEach((item) => {
+			item.style.gridRowEnd = "";
+		});
+		if (this.container) {
+			this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;
+			this.container.style.contain = this.originalContainerStyles.contain;
+			this.container.style.alignItems = this.originalContainerStyles.alignItems;
+		}
+		this.gridItems = [];
+		this.rowHeight = 1;
+		this.rowGap = 0;
+		this.resizeObserver = null;
+		this.mutationObserver = null;
+		this.observerAbortController = null;
+		this.imageAbortController = null;
+		this.observedImages = /* @__PURE__ */ new WeakSet();
+		this.resizeScheduled = false;
+		this.container = null;
+		this.originalContainerStyles = {
+			gridAutoRows: "",
+			contain: "",
+			alignItems: ""
+		};
+	}
+	resolveContainer() {
+		if (this.containerOption instanceof HTMLElement) return this.containerOption;
+		if (typeof document === "undefined") return null;
+		if (typeof this.containerOption === "string") return document.querySelector(this.containerOption);
+		return document.querySelector(".masonry");
+	}
+	scheduleLayout() {
+		if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;
+		this.resizeScheduled = true;
+		if (typeof requestAnimationFrame === "function") {
+			this.rafId = requestAnimationFrame(() => {
+				this.rafId = null;
+				this.resizeScheduled = false;
+				this.performLayout();
+			});
+			return;
+		}
+		this.rafId = null;
+		this.resizeScheduled = false;
+		this.performLayout();
+	}
+	cancelScheduledLayout() {
+		if (this.rafId !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.rafId);
+		this.rafId = null;
+		this.resizeScheduled = false;
+	}
+	performLayout() {
+		if (!this.isInitialized || this.isDestroyed || !this.container) return;
+		this.measureContainerMetrics();
+		this.resizeAllItems();
+	}
+	resizeAllItems() {
+		const denominator = this.rowHeight + this.rowGap;
+		this.gridItems.forEach((item) => {
+			if (denominator <= 0 || !Number.isFinite(denominator)) {
+				item.style.gridRowEnd = "span 1";
+				return;
+			}
+			const rowSpan = Math.max(1, Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator));
+			item.style.gridRowEnd = `span ${rowSpan}`;
+		});
+	}
+	setupAbortControllers() {
+		this.observerAbortController = new AbortController();
+		this.imageAbortController = new AbortController();
+		this.observerAbortController.signal.addEventListener("abort", () => {
+			this.resizeObserver?.disconnect();
+			this.mutationObserver?.disconnect();
+		});
+	}
+	setupResizeObserver() {
+		if (!this.container || typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => this.handleResize());
+		this.resizeObserver.observe(this.container);
+	}
+	setupMutationObserver() {
+		if (!this.container || typeof MutationObserver === "undefined") return;
+		this.mutationObserver = new MutationObserver(() => {
+			this.initializeGridItems();
+			this.scheduleLayout();
+		});
+		this.mutationObserver.observe(this.container, {
+			childList: true,
+			subtree: false
+		});
+	}
+	handleResize() {
+		this.scheduleLayout();
+	}
+	initializeContainerStyles() {
+		if (!this.container) return;
+		this.container.style.gridAutoRows = "1px";
+		this.container.style.contain = "layout";
+		this.container.style.alignItems = "start";
+	}
+	measureContainerMetrics() {
+		if (!this.container) return;
+		const cs = getComputedStyle(this.container);
+		this.rowGap = this.parseCssPixelValue(cs.rowGap);
+		const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);
+		this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;
+	}
+	initializeGridItems() {
+		if (!this.container) return;
+		this.gridItems = Array.from(this.container.children).filter((item) => item instanceof HTMLElement);
+		this.gridItems.forEach((item) => {
+			item.querySelectorAll("img").forEach((image) => {
+				this.observeImage(image);
+			});
+		});
+	}
+	observeImage(image) {
+		if (image.complete || this.observedImages.has(image)) return;
+		this.observedImages.add(image);
+		const onLoad = () => this.scheduleLayout();
+		if (this.imageAbortController) {
+			image.addEventListener("load", onLoad, {
+				once: true,
+				signal: this.imageAbortController.signal
+			});
+			return;
+		}
+		image.addEventListener("load", onLoad, { once: true });
+	}
+	parseCssPixelValue(value) {
+		const parsedValue = Number.parseFloat(value);
+		return Number.isFinite(parsedValue) ? parsedValue : 0;
+	}
+	storeContainerStyles() {
+		if (!this.container) return;
+		this.originalContainerStyles = {
+			gridAutoRows: this.container.style.gridAutoRows || "",
+			contain: this.container.style.contain || "",
+			alignItems: this.container.style.alignItems || ""
+		};
+	}
+};
+
+//#endregion
+module.exports = MasonrySimple;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["interface MasonrySimpleOptions {\n  container?: HTMLElement | string;\n}\n\nexport default class MasonrySimple {\n  private readonly containerOption: HTMLElement | string | undefined;\n  private container: HTMLElement | null = null;\n  private gridItems: HTMLElement[] = [];\n  private rowHeight = 1;\n  private rowGap = 0;\n  private resizeScheduled = false;\n  private rafId: number | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private observerAbortController: AbortController | null = null;\n  private imageAbortController: AbortController | null = null;\n  private observedImages = new WeakSet<HTMLImageElement>();\n  private isInitialized = false;\n  private isDestroyed = false;\n  private originalContainerStyles = {\n    gridAutoRows: '',\n    contain: '',\n    alignItems: '',\n  };\n\n  constructor(options: MasonrySimpleOptions = {}) {\n    this.containerOption = options.container;\n  }\n\n  public init(): void {\n    if (this.isInitialized) return;\n\n    this.container = this.resolveContainer();\n\n    if (!this.container) return;\n\n    this.isInitialized = true;\n    this.isDestroyed = false;\n\n    this.setupAbortControllers();\n    this.storeContainerStyles();\n    this.initializeContainerStyles();\n    this.initializeGridItems();\n    this.setupResizeObserver();\n    this.setupMutationObserver();\n    this.scheduleLayout();\n  }\n\n  public refresh(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.initializeGridItems();\n    this.scheduleLayout();\n  }\n\n  public destroy(): void {\n    if (!this.isInitialized && !this.container) return;\n\n    this.isDestroyed = true;\n    this.isInitialized = false;\n    this.cancelScheduledLayout();\n    this.observerAbortController?.abort();\n    this.imageAbortController?.abort();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.gridItems.forEach((item) => {\n      item.style.gridRowEnd = '';\n    });\n\n    if (this.container) {\n      this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;\n      this.container.style.contain = this.originalContainerStyles.contain;\n      this.container.style.alignItems = this.originalContainerStyles.alignItems;\n    }\n\n    this.gridItems = [];\n    this.rowHeight = 1;\n    this.rowGap = 0;\n    this.resizeObserver = null;\n    this.mutationObserver = null;\n    this.observerAbortController = null;\n    this.imageAbortController = null;\n    this.observedImages = new WeakSet<HTMLImageElement>();\n    this.resizeScheduled = false;\n    this.container = null;\n    this.originalContainerStyles = {\n      gridAutoRows: '',\n      contain: '',\n      alignItems: '',\n    };\n  }\n\n  private resolveContainer(): HTMLElement | null {\n    if (this.containerOption instanceof HTMLElement) {\n      return this.containerOption;\n    }\n\n    if (typeof document === 'undefined') return null;\n\n    if (typeof this.containerOption === 'string') {\n      return document.querySelector<HTMLElement>(this.containerOption);\n    }\n\n    return document.querySelector<HTMLElement>('.masonry');\n  }\n\n  private scheduleLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;\n\n    this.resizeScheduled = true;\n\n    if (typeof requestAnimationFrame === 'function') {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null;\n        this.resizeScheduled = false;\n        this.performLayout();\n      });\n\n      return;\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n    this.performLayout();\n  }\n\n  private cancelScheduledLayout(): void {\n    if (this.rafId !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n  }\n\n  private performLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.measureContainerMetrics();\n    this.resizeAllItems();\n  }\n\n  private resizeAllItems(): void {\n    const denominator = this.rowHeight + this.rowGap;\n\n    this.gridItems.forEach((item) => {\n      if (denominator <= 0 || !Number.isFinite(denominator)) {\n        item.style.gridRowEnd = 'span 1';\n\n        return;\n      }\n\n      const rowSpan = Math.max(\n        1,\n        Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator),\n      );\n      item.style.gridRowEnd = `span ${rowSpan}`;\n    });\n  }\n\n  private setupAbortControllers(): void {\n    this.observerAbortController = new AbortController();\n    this.imageAbortController = new AbortController();\n\n    this.observerAbortController.signal.addEventListener('abort', () => {\n      this.resizeObserver?.disconnect();\n      this.mutationObserver?.disconnect();\n    });\n  }\n\n  private setupResizeObserver(): void {\n    if (!this.container || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  private setupMutationObserver(): void {\n    if (!this.container || typeof MutationObserver === 'undefined') return;\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.initializeGridItems();\n      this.scheduleLayout();\n    });\n\n    this.mutationObserver.observe(this.container, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  private handleResize(): void {\n    this.scheduleLayout();\n  }\n\n  private initializeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.container.style.gridAutoRows = '1px';\n    this.container.style.contain = 'layout';\n    this.container.style.alignItems = 'start';\n  }\n\n  private measureContainerMetrics(): void {\n    if (!this.container) return;\n\n    const cs = getComputedStyle(this.container);\n\n    this.rowGap = this.parseCssPixelValue(cs.rowGap);\n\n    const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);\n\n    this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;\n  }\n\n  private initializeGridItems(): void {\n    if (!this.container) return;\n\n    this.gridItems = Array.from(this.container.children).filter(\n      (item): item is HTMLElement => item instanceof HTMLElement,\n    );\n\n    this.gridItems.forEach((item) => {\n      const images = item.querySelectorAll('img');\n\n      images.forEach((image) => {\n        this.observeImage(image);\n      });\n    });\n  }\n\n  private observeImage(image: HTMLImageElement): void {\n    if (image.complete || this.observedImages.has(image)) return;\n\n    this.observedImages.add(image);\n\n    const onLoad = (): void => this.scheduleLayout();\n\n    if (this.imageAbortController) {\n      image.addEventListener('load', onLoad, {\n        once: true,\n        signal: this.imageAbortController.signal,\n      });\n\n      return;\n    }\n\n    image.addEventListener('load', onLoad, { once: true });\n  }\n\n  private parseCssPixelValue(value: string): number {\n    const parsedValue = Number.parseFloat(value);\n\n    return Number.isFinite(parsedValue) ? parsedValue : 0;\n  }\n\n  private storeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.originalContainerStyles = {\n      gridAutoRows: this.container.style.gridAutoRows || '',\n      contain: this.container.style.contain || '',\n      alignItems: this.container.style.alignItems || '',\n    };\n  }\n}\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+//#region src/index.d.ts
+interface MasonrySimpleOptions {
+  container?: HTMLElement | string;
+}
+declare class MasonrySimple {
+  private readonly containerOption;
+  private container;
+  private gridItems;
+  private rowHeight;
+  private rowGap;
+  private resizeScheduled;
+  private rafId;
+  private resizeObserver;
+  private mutationObserver;
+  private observerAbortController;
+  private imageAbortController;
+  private observedImages;
+  private isInitialized;
+  private isDestroyed;
+  private originalContainerStyles;
+  constructor(options?: MasonrySimpleOptions);
+  init(): void;
+  refresh(): void;
+  destroy(): void;
+  private resolveContainer;
+  private scheduleLayout;
+  private cancelScheduledLayout;
+  private performLayout;
+  private resizeAllItems;
+  private setupAbortControllers;
+  private setupResizeObserver;
+  private setupMutationObserver;
+  private handleResize;
+  private initializeContainerStyles;
+  private measureContainerMetrics;
+  private initializeGridItems;
+  private observeImage;
+  private parseCssPixelValue;
+  private storeContainerStyles;
+}
+export = MasonrySimple;
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -1,43 +1,43 @@
-declare class MasonrySimple {
-    private readonly containerOption;
-    private container;
-    private gridItems;
-    private rowHeight;
-    private rowGap;
-    private resizeScheduled;
-    private rafId;
-    private resizeObserver;
-    private mutationObserver;
-    private observerAbortController;
-    private imageAbortController;
-    private observedImages;
-    private isInitialized;
-    private isDestroyed;
-    private originalContainerStyles;
-    constructor(options?: MasonrySimpleOptions);
-    init(): void;
-    refresh(): void;
-    destroy(): void;
-    private resolveContainer;
-    private scheduleLayout;
-    private cancelScheduledLayout;
-    private performLayout;
-    private resizeAllItems;
-    private setupAbortControllers;
-    private setupResizeObserver;
-    private setupMutationObserver;
-    private handleResize;
-    private initializeContainerStyles;
-    private measureContainerMetrics;
-    private initializeGridItems;
-    private observeImage;
-    private parseCssPixelValue;
-    private storeContainerStyles;
-}
-export default MasonrySimple;
-
-declare interface MasonrySimpleOptions {
-    container?: HTMLElement | string;
-}
-
-export { }
+//#region src/index.d.ts
+interface MasonrySimpleOptions {
+  container?: HTMLElement | string;
+}
+declare class MasonrySimple {
+  private readonly containerOption;
+  private container;
+  private gridItems;
+  private rowHeight;
+  private rowGap;
+  private resizeScheduled;
+  private rafId;
+  private resizeObserver;
+  private mutationObserver;
+  private observerAbortController;
+  private imageAbortController;
+  private observedImages;
+  private isInitialized;
+  private isDestroyed;
+  private originalContainerStyles;
+  constructor(options?: MasonrySimpleOptions);
+  init(): void;
+  refresh(): void;
+  destroy(): void;
+  private resolveContainer;
+  private scheduleLayout;
+  private cancelScheduledLayout;
+  private performLayout;
+  private resizeAllItems;
+  private setupAbortControllers;
+  private setupResizeObserver;
+  private setupMutationObserver;
+  private handleResize;
+  private initializeContainerStyles;
+  private measureContainerMetrics;
+  private initializeGridItems;
+  private observeImage;
+  private parseCssPixelValue;
+  private storeContainerStyles;
+}
+//#endregion
+export { MasonrySimple as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,197 @@
+//#region src/index.ts
+var MasonrySimple = class {
+	containerOption;
+	container = null;
+	gridItems = [];
+	rowHeight = 1;
+	rowGap = 0;
+	resizeScheduled = false;
+	rafId = null;
+	resizeObserver = null;
+	mutationObserver = null;
+	observerAbortController = null;
+	imageAbortController = null;
+	observedImages = /* @__PURE__ */ new WeakSet();
+	isInitialized = false;
+	isDestroyed = false;
+	originalContainerStyles = {
+		gridAutoRows: "",
+		contain: "",
+		alignItems: ""
+	};
+	constructor(options = {}) {
+		this.containerOption = options.container;
+	}
+	init() {
+		if (this.isInitialized) return;
+		this.container = this.resolveContainer();
+		if (!this.container) return;
+		this.isInitialized = true;
+		this.isDestroyed = false;
+		this.setupAbortControllers();
+		this.storeContainerStyles();
+		this.initializeContainerStyles();
+		this.initializeGridItems();
+		this.setupResizeObserver();
+		this.setupMutationObserver();
+		this.scheduleLayout();
+	}
+	refresh() {
+		if (!this.isInitialized || this.isDestroyed || !this.container) return;
+		this.initializeGridItems();
+		this.scheduleLayout();
+	}
+	destroy() {
+		if (!this.isInitialized && !this.container) return;
+		this.isDestroyed = true;
+		this.isInitialized = false;
+		this.cancelScheduledLayout();
+		this.observerAbortController?.abort();
+		this.imageAbortController?.abort();
+		this.resizeObserver?.disconnect();
+		this.mutationObserver?.disconnect();
+		this.gridItems.forEach((item) => {
+			item.style.gridRowEnd = "";
+		});
+		if (this.container) {
+			this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;
+			this.container.style.contain = this.originalContainerStyles.contain;
+			this.container.style.alignItems = this.originalContainerStyles.alignItems;
+		}
+		this.gridItems = [];
+		this.rowHeight = 1;
+		this.rowGap = 0;
+		this.resizeObserver = null;
+		this.mutationObserver = null;
+		this.observerAbortController = null;
+		this.imageAbortController = null;
+		this.observedImages = /* @__PURE__ */ new WeakSet();
+		this.resizeScheduled = false;
+		this.container = null;
+		this.originalContainerStyles = {
+			gridAutoRows: "",
+			contain: "",
+			alignItems: ""
+		};
+	}
+	resolveContainer() {
+		if (this.containerOption instanceof HTMLElement) return this.containerOption;
+		if (typeof document === "undefined") return null;
+		if (typeof this.containerOption === "string") return document.querySelector(this.containerOption);
+		return document.querySelector(".masonry");
+	}
+	scheduleLayout() {
+		if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;
+		this.resizeScheduled = true;
+		if (typeof requestAnimationFrame === "function") {
+			this.rafId = requestAnimationFrame(() => {
+				this.rafId = null;
+				this.resizeScheduled = false;
+				this.performLayout();
+			});
+			return;
+		}
+		this.rafId = null;
+		this.resizeScheduled = false;
+		this.performLayout();
+	}
+	cancelScheduledLayout() {
+		if (this.rafId !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.rafId);
+		this.rafId = null;
+		this.resizeScheduled = false;
+	}
+	performLayout() {
+		if (!this.isInitialized || this.isDestroyed || !this.container) return;
+		this.measureContainerMetrics();
+		this.resizeAllItems();
+	}
+	resizeAllItems() {
+		const denominator = this.rowHeight + this.rowGap;
+		this.gridItems.forEach((item) => {
+			if (denominator <= 0 || !Number.isFinite(denominator)) {
+				item.style.gridRowEnd = "span 1";
+				return;
+			}
+			const rowSpan = Math.max(1, Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator));
+			item.style.gridRowEnd = `span ${rowSpan}`;
+		});
+	}
+	setupAbortControllers() {
+		this.observerAbortController = new AbortController();
+		this.imageAbortController = new AbortController();
+		this.observerAbortController.signal.addEventListener("abort", () => {
+			this.resizeObserver?.disconnect();
+			this.mutationObserver?.disconnect();
+		});
+	}
+	setupResizeObserver() {
+		if (!this.container || typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => this.handleResize());
+		this.resizeObserver.observe(this.container);
+	}
+	setupMutationObserver() {
+		if (!this.container || typeof MutationObserver === "undefined") return;
+		this.mutationObserver = new MutationObserver(() => {
+			this.initializeGridItems();
+			this.scheduleLayout();
+		});
+		this.mutationObserver.observe(this.container, {
+			childList: true,
+			subtree: false
+		});
+	}
+	handleResize() {
+		this.scheduleLayout();
+	}
+	initializeContainerStyles() {
+		if (!this.container) return;
+		this.container.style.gridAutoRows = "1px";
+		this.container.style.contain = "layout";
+		this.container.style.alignItems = "start";
+	}
+	measureContainerMetrics() {
+		if (!this.container) return;
+		const cs = getComputedStyle(this.container);
+		this.rowGap = this.parseCssPixelValue(cs.rowGap);
+		const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);
+		this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;
+	}
+	initializeGridItems() {
+		if (!this.container) return;
+		this.gridItems = Array.from(this.container.children).filter((item) => item instanceof HTMLElement);
+		this.gridItems.forEach((item) => {
+			item.querySelectorAll("img").forEach((image) => {
+				this.observeImage(image);
+			});
+		});
+	}
+	observeImage(image) {
+		if (image.complete || this.observedImages.has(image)) return;
+		this.observedImages.add(image);
+		const onLoad = () => this.scheduleLayout();
+		if (this.imageAbortController) {
+			image.addEventListener("load", onLoad, {
+				once: true,
+				signal: this.imageAbortController.signal
+			});
+			return;
+		}
+		image.addEventListener("load", onLoad, { once: true });
+	}
+	parseCssPixelValue(value) {
+		const parsedValue = Number.parseFloat(value);
+		return Number.isFinite(parsedValue) ? parsedValue : 0;
+	}
+	storeContainerStyles() {
+		if (!this.container) return;
+		this.originalContainerStyles = {
+			gridAutoRows: this.container.style.gridAutoRows || "",
+			contain: this.container.style.contain || "",
+			alignItems: this.container.style.alignItems || ""
+		};
+	}
+};
+
+//#endregion
+export { MasonrySimple as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["interface MasonrySimpleOptions {\n  container?: HTMLElement | string;\n}\n\nexport default class MasonrySimple {\n  private readonly containerOption: HTMLElement | string | undefined;\n  private container: HTMLElement | null = null;\n  private gridItems: HTMLElement[] = [];\n  private rowHeight = 1;\n  private rowGap = 0;\n  private resizeScheduled = false;\n  private rafId: number | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private observerAbortController: AbortController | null = null;\n  private imageAbortController: AbortController | null = null;\n  private observedImages = new WeakSet<HTMLImageElement>();\n  private isInitialized = false;\n  private isDestroyed = false;\n  private originalContainerStyles = {\n    gridAutoRows: '',\n    contain: '',\n    alignItems: '',\n  };\n\n  constructor(options: MasonrySimpleOptions = {}) {\n    this.containerOption = options.container;\n  }\n\n  public init(): void {\n    if (this.isInitialized) return;\n\n    this.container = this.resolveContainer();\n\n    if (!this.container) return;\n\n    this.isInitialized = true;\n    this.isDestroyed = false;\n\n    this.setupAbortControllers();\n    this.storeContainerStyles();\n    this.initializeContainerStyles();\n    this.initializeGridItems();\n    this.setupResizeObserver();\n    this.setupMutationObserver();\n    this.scheduleLayout();\n  }\n\n  public refresh(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.initializeGridItems();\n    this.scheduleLayout();\n  }\n\n  public destroy(): void {\n    if (!this.isInitialized && !this.container) return;\n\n    this.isDestroyed = true;\n    this.isInitialized = false;\n    this.cancelScheduledLayout();\n    this.observerAbortController?.abort();\n    this.imageAbortController?.abort();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.gridItems.forEach((item) => {\n      item.style.gridRowEnd = '';\n    });\n\n    if (this.container) {\n      this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;\n      this.container.style.contain = this.originalContainerStyles.contain;\n      this.container.style.alignItems = this.originalContainerStyles.alignItems;\n    }\n\n    this.gridItems = [];\n    this.rowHeight = 1;\n    this.rowGap = 0;\n    this.resizeObserver = null;\n    this.mutationObserver = null;\n    this.observerAbortController = null;\n    this.imageAbortController = null;\n    this.observedImages = new WeakSet<HTMLImageElement>();\n    this.resizeScheduled = false;\n    this.container = null;\n    this.originalContainerStyles = {\n      gridAutoRows: '',\n      contain: '',\n      alignItems: '',\n    };\n  }\n\n  private resolveContainer(): HTMLElement | null {\n    if (this.containerOption instanceof HTMLElement) {\n      return this.containerOption;\n    }\n\n    if (typeof document === 'undefined') return null;\n\n    if (typeof this.containerOption === 'string') {\n      return document.querySelector<HTMLElement>(this.containerOption);\n    }\n\n    return document.querySelector<HTMLElement>('.masonry');\n  }\n\n  private scheduleLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;\n\n    this.resizeScheduled = true;\n\n    if (typeof requestAnimationFrame === 'function') {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null;\n        this.resizeScheduled = false;\n        this.performLayout();\n      });\n\n      return;\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n    this.performLayout();\n  }\n\n  private cancelScheduledLayout(): void {\n    if (this.rafId !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n  }\n\n  private performLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.measureContainerMetrics();\n    this.resizeAllItems();\n  }\n\n  private resizeAllItems(): void {\n    const denominator = this.rowHeight + this.rowGap;\n\n    this.gridItems.forEach((item) => {\n      if (denominator <= 0 || !Number.isFinite(denominator)) {\n        item.style.gridRowEnd = 'span 1';\n\n        return;\n      }\n\n      const rowSpan = Math.max(\n        1,\n        Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator),\n      );\n      item.style.gridRowEnd = `span ${rowSpan}`;\n    });\n  }\n\n  private setupAbortControllers(): void {\n    this.observerAbortController = new AbortController();\n    this.imageAbortController = new AbortController();\n\n    this.observerAbortController.signal.addEventListener('abort', () => {\n      this.resizeObserver?.disconnect();\n      this.mutationObserver?.disconnect();\n    });\n  }\n\n  private setupResizeObserver(): void {\n    if (!this.container || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  private setupMutationObserver(): void {\n    if (!this.container || typeof MutationObserver === 'undefined') return;\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.initializeGridItems();\n      this.scheduleLayout();\n    });\n\n    this.mutationObserver.observe(this.container, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  private handleResize(): void {\n    this.scheduleLayout();\n  }\n\n  private initializeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.container.style.gridAutoRows = '1px';\n    this.container.style.contain = 'layout';\n    this.container.style.alignItems = 'start';\n  }\n\n  private measureContainerMetrics(): void {\n    if (!this.container) return;\n\n    const cs = getComputedStyle(this.container);\n\n    this.rowGap = this.parseCssPixelValue(cs.rowGap);\n\n    const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);\n\n    this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;\n  }\n\n  private initializeGridItems(): void {\n    if (!this.container) return;\n\n    this.gridItems = Array.from(this.container.children).filter(\n      (item): item is HTMLElement => item instanceof HTMLElement,\n    );\n\n    this.gridItems.forEach((item) => {\n      const images = item.querySelectorAll('img');\n\n      images.forEach((image) => {\n        this.observeImage(image);\n      });\n    });\n  }\n\n  private observeImage(image: HTMLImageElement): void {\n    if (image.complete || this.observedImages.has(image)) return;\n\n    this.observedImages.add(image);\n\n    const onLoad = (): void => this.scheduleLayout();\n\n    if (this.imageAbortController) {\n      image.addEventListener('load', onLoad, {\n        once: true,\n        signal: this.imageAbortController.signal,\n      });\n\n      return;\n    }\n\n    image.addEventListener('load', onLoad, { once: true });\n  }\n\n  private parseCssPixelValue(value: string): number {\n    const parsedValue = Number.parseFloat(value);\n\n    return Number.isFinite(parsedValue) ? parsedValue : 0;\n  }\n\n  private storeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.originalContainerStyles = {\n      gridAutoRows: this.container.style.gridAutoRows || '',\n      contain: this.container.style.contain || '',\n      alignItems: this.container.style.alignItems || '',\n    };\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-simple",
-  "version": "4.5.0",
+  "version": "5.0.1",
   "description": "MasonrySimple implements a simple system for placing masonry style elements using CSS Grid. Masonry placement is used for dynamic grids where elements may have different heights and need to be placed neatly without gaps.",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -14,49 +14,57 @@
   "homepage": "https://github.com/ux-ui-pro/masonry-simple",
   "sideEffects": false,
   "type": "module",
-  "packageManager": "yarn@1.22.22",
+  "packageManager": "npm@10.9.3",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.19.0"
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "vite build",
-    "dev": "vite",
-    "verify": "yarn build && yarn lint && yarn typecheck && yarn test:smoke",
-    "lint": "biome check src tests",
-    "lint:fix": "biome check --write src tests",
-    "format": "biome format --write src tests",
+    "build": "tsdown",
+    "verify": "npm run lint && npm run typecheck && npm run build && npm run test:smoke && npm run pack:check",
+    "lint": "biome check src tests tsdown.config.ts",
+    "lint:fix": "biome check --write src tests tsdown.config.ts",
+    "format": "biome format --write src tests tsdown.config.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test:smoke": "node --test tests/*.js",
-    "prepublishOnly": "yarn clean && yarn verify"
+    "test:smoke": "node --test \"tests/**/*.js\"",
+    "pack:check": "npm pack --dry-run && publint && attw --pack . --profile node16 --ignore-rules false-export-default",
+    "prepublishOnly": "npm run clean && npm run verify"
   },
   "source": "src/index.ts",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "browser": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "default": "./dist/index.umd.js"
-    },
-    "./dist/*": "./dist/*"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
   },
   "files": [
     "dist",
     "README.md",
     "LICENSE"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
-    "@biomejs/biome": "2.4.8",
-    "@types/node": "25.5.0",
-    "esbuild": "0.27.4",
+    "@arethetypeswrong/cli": "^0.18.3",
+    "@biomejs/biome": "2.4.16",
+    "@types/node": "25.9.2",
+    "@ux-ui/biome-config": "^0.1.0",
+    "@ux-ui/tsconfig-base": "^0.1.0",
+    "@ux-ui/tsdown-config": "^0.1.0",
+    "publint": "^0.3.21",
     "rimraf": "6.1.3",
-    "typescript": "6.0.2",
-    "vite": "8.0.2",
-    "vite-plugin-dts": "4.5.4"
+    "tsdown": "0.22.3",
+    "typescript": "6.0.3"
   },
   "keywords": [
     "masonry",

package/dist/index.cjs.js

@@ -1,3 +0,0 @@
-var r=class{containerOption;container=null;gridItems=[];rowHeight=1;rowGap=0;resizeScheduled=!1;rafId=null;resizeObserver=null;mutationObserver=null;observerAbortController=null;imageAbortController=null;observedImages=new WeakSet;isInitialized=!1;isDestroyed=!1;originalContainerStyles={gridAutoRows:"",contain:"",alignItems:""};constructor(e={}){this.containerOption=e.container}init(){this.isInitialized||(this.container=this.resolveContainer(),this.container&&(this.isInitialized=!0,this.isDestroyed=!1,this.setupAbortControllers(),this.storeContainerStyles(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.setupMutationObserver(),this.scheduleLayout()))}refresh(){!this.isInitialized||this.isDestroyed||!this.container||(this.initializeGridItems(),this.scheduleLayout())}destroy(){!this.isInitialized&&!this.container||(this.isDestroyed=!0,this.isInitialized=!1,this.cancelScheduledLayout(),this.observerAbortController?.abort(),this.imageAbortController?.abort(),this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect(),this.gridItems.forEach(e=>{e.style.gridRowEnd=""}),this.container&&(this.container.style.gridAutoRows=this.originalContainerStyles.gridAutoRows,this.container.style.contain=this.originalContainerStyles.contain,this.container.style.alignItems=this.originalContainerStyles.alignItems),this.gridItems=[],this.rowHeight=1,this.rowGap=0,this.resizeObserver=null,this.mutationObserver=null,this.observerAbortController=null,this.imageAbortController=null,this.observedImages=new WeakSet,this.resizeScheduled=!1,this.container=null,this.originalContainerStyles={gridAutoRows:"",contain:"",alignItems:""})}resolveContainer(){return this.containerOption instanceof HTMLElement?this.containerOption:typeof document>"u"?null:typeof this.containerOption=="string"?document.querySelector(this.containerOption):document.querySelector(".masonry")}scheduleLayout(){if(!(!this.isInitialized||this.isDestroyed||!this.container||this.resizeScheduled)){if(this.resizeScheduled=!0,typeof requestAnimationFrame=="function"){this.rafId=requestAnimationFrame(()=>{this.rafId=null,this.resizeScheduled=!1,this.performLayout()});return}this.rafId=null,this.resizeScheduled=!1,this.performLayout()}}cancelScheduledLayout(){this.rafId!==null&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(this.rafId),this.rafId=null,this.resizeScheduled=!1}performLayout(){!this.isInitialized||this.isDestroyed||!this.container||(this.measureContainerMetrics(),this.resizeAllItems())}resizeAllItems(){const e=this.rowHeight+this.rowGap;this.gridItems.forEach(t=>{if(e<=0||!Number.isFinite(e)){t.style.gridRowEnd="span 1";return}const i=Math.max(1,Math.ceil((t.getBoundingClientRect().height+this.rowGap)/e));t.style.gridRowEnd=`span ${i}`})}setupAbortControllers(){this.observerAbortController=new AbortController,this.imageAbortController=new AbortController,this.observerAbortController.signal.addEventListener("abort",()=>{this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect()})}setupResizeObserver(){!this.container||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.container))}setupMutationObserver(){!this.container||typeof MutationObserver>"u"||(this.mutationObserver=new MutationObserver(()=>{this.initializeGridItems(),this.scheduleLayout()}),this.mutationObserver.observe(this.container,{childList:!0,subtree:!1}))}handleResize(){this.scheduleLayout()}initializeContainerStyles(){this.container&&(this.container.style.gridAutoRows="1px",this.container.style.contain="layout",this.container.style.alignItems="start")}measureContainerMetrics(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=this.parseCssPixelValue(e.rowGap);const t=this.parseCssPixelValue(e.gridAutoRows);this.rowHeight=t>0?t:1}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children).filter(e=>e instanceof HTMLElement),this.gridItems.forEach(e=>{e.querySelectorAll("img").forEach(t=>{this.observeImage(t)})}))}observeImage(e){if(e.complete||this.observedImages.has(e))return;this.observedImages.add(e);const t=()=>this.scheduleLayout();if(this.imageAbortController){e.addEventListener("load",t,{once:!0,signal:this.imageAbortController.signal});return}e.addEventListener("load",t,{once:!0})}parseCssPixelValue(e){const t=Number.parseFloat(e);return Number.isFinite(t)?t:0}storeContainerStyles(){this.container&&(this.originalContainerStyles={gridAutoRows:this.container.style.gridAutoRows||"",contain:this.container.style.contain||"",alignItems:this.container.style.alignItems||""})}};module.exports=r;
-
-//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["interface MasonrySimpleOptions {\n  container?: HTMLElement | string;\n}\n\nexport default class MasonrySimple {\n  private readonly containerOption: HTMLElement | string | undefined;\n  private container: HTMLElement | null = null;\n  private gridItems: HTMLElement[] = [];\n  private rowHeight = 1;\n  private rowGap = 0;\n  private resizeScheduled = false;\n  private rafId: number | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private observerAbortController: AbortController | null = null;\n  private imageAbortController: AbortController | null = null;\n  private observedImages = new WeakSet<HTMLImageElement>();\n  private isInitialized = false;\n  private isDestroyed = false;\n  private originalContainerStyles = {\n    gridAutoRows: '',\n    contain: '',\n    alignItems: '',\n  };\n\n  constructor(options: MasonrySimpleOptions = {}) {\n    this.containerOption = options.container;\n  }\n\n  public init(): void {\n    if (this.isInitialized) return;\n\n    this.container = this.resolveContainer();\n\n    if (!this.container) return;\n\n    this.isInitialized = true;\n    this.isDestroyed = false;\n\n    this.setupAbortControllers();\n    this.storeContainerStyles();\n    this.initializeContainerStyles();\n    this.initializeGridItems();\n    this.setupResizeObserver();\n    this.setupMutationObserver();\n    this.scheduleLayout();\n  }\n\n  public refresh(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.initializeGridItems();\n    this.scheduleLayout();\n  }\n\n  public destroy(): void {\n    if (!this.isInitialized && !this.container) return;\n\n    this.isDestroyed = true;\n    this.isInitialized = false;\n    this.cancelScheduledLayout();\n    this.observerAbortController?.abort();\n    this.imageAbortController?.abort();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.gridItems.forEach((item) => {\n      item.style.gridRowEnd = '';\n    });\n\n    if (this.container) {\n      this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;\n      this.container.style.contain = this.originalContainerStyles.contain;\n      this.container.style.alignItems = this.originalContainerStyles.alignItems;\n    }\n\n    this.gridItems = [];\n    this.rowHeight = 1;\n    this.rowGap = 0;\n    this.resizeObserver = null;\n    this.mutationObserver = null;\n    this.observerAbortController = null;\n    this.imageAbortController = null;\n    this.observedImages = new WeakSet<HTMLImageElement>();\n    this.resizeScheduled = false;\n    this.container = null;\n    this.originalContainerStyles = {\n      gridAutoRows: '',\n      contain: '',\n      alignItems: '',\n    };\n  }\n\n  private resolveContainer(): HTMLElement | null {\n    if (this.containerOption instanceof HTMLElement) {\n      return this.containerOption;\n    }\n\n    if (typeof document === 'undefined') return null;\n\n    if (typeof this.containerOption === 'string') {\n      return document.querySelector<HTMLElement>(this.containerOption);\n    }\n\n    return document.querySelector<HTMLElement>('.masonry');\n  }\n\n  private scheduleLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;\n\n    this.resizeScheduled = true;\n\n    if (typeof requestAnimationFrame === 'function') {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null;\n        this.resizeScheduled = false;\n        this.performLayout();\n      });\n\n      return;\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n    this.performLayout();\n  }\n\n  private cancelScheduledLayout(): void {\n    if (this.rafId !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n  }\n\n  private performLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.measureContainerMetrics();\n    this.resizeAllItems();\n  }\n\n  private resizeAllItems(): void {\n    const denominator = this.rowHeight + this.rowGap;\n\n    this.gridItems.forEach((item) => {\n      if (denominator <= 0 || !Number.isFinite(denominator)) {\n        item.style.gridRowEnd = 'span 1';\n\n        return;\n      }\n\n      const rowSpan = Math.max(\n        1,\n        Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator),\n      );\n      item.style.gridRowEnd = `span ${rowSpan}`;\n    });\n  }\n\n  private setupAbortControllers(): void {\n    this.observerAbortController = new AbortController();\n    this.imageAbortController = new AbortController();\n\n    this.observerAbortController.signal.addEventListener('abort', () => {\n      this.resizeObserver?.disconnect();\n      this.mutationObserver?.disconnect();\n    });\n  }\n\n  private setupResizeObserver(): void {\n    if (!this.container || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  private setupMutationObserver(): void {\n    if (!this.container || typeof MutationObserver === 'undefined') return;\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.initializeGridItems();\n      this.scheduleLayout();\n    });\n\n    this.mutationObserver.observe(this.container, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  private handleResize(): void {\n    this.scheduleLayout();\n  }\n\n  private initializeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.container.style.gridAutoRows = '1px';\n    this.container.style.contain = 'layout';\n    this.container.style.alignItems = 'start';\n  }\n\n  private measureContainerMetrics(): void {\n    if (!this.container) return;\n\n    const cs = getComputedStyle(this.container);\n\n    this.rowGap = this.parseCssPixelValue(cs.rowGap);\n\n    const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);\n\n    this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;\n  }\n\n  private initializeGridItems(): void {\n    if (!this.container) return;\n\n    this.gridItems = Array.from(this.container.children).filter(\n      (item): item is HTMLElement => item instanceof HTMLElement,\n    );\n\n    this.gridItems.forEach((item) => {\n      const images = item.querySelectorAll('img');\n\n      images.forEach((image) => {\n        this.observeImage(image);\n      });\n    });\n  }\n\n  private observeImage(image: HTMLImageElement): void {\n    if (image.complete || this.observedImages.has(image)) return;\n\n    this.observedImages.add(image);\n\n    const onLoad = (): void => this.scheduleLayout();\n\n    if (this.imageAbortController) {\n      image.addEventListener('load', onLoad, {\n        once: true,\n        signal: this.imageAbortController.signal,\n      });\n\n      return;\n    }\n\n    image.addEventListener('load', onLoad, { once: true });\n  }\n\n  private parseCssPixelValue(value: string): number {\n    const parsedValue = Number.parseFloat(value);\n\n    return Number.isFinite(parsedValue) ? parsedValue : 0;\n  }\n\n  private storeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.originalContainerStyles = {\n      gridAutoRows: this.container.style.gridAutoRows || '',\n      contain: this.container.style.contain || '',\n      alignItems: this.container.style.alignItems || '',\n    };\n  }\n}\n"],"mappings":"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"}

package/dist/index.es.js

@@ -1,135 +0,0 @@
-var r = class {
-  containerOption;
-  container = null;
-  gridItems = [];
-  rowHeight = 1;
-  rowGap = 0;
-  resizeScheduled = !1;
-  rafId = null;
-  resizeObserver = null;
-  mutationObserver = null;
-  observerAbortController = null;
-  imageAbortController = null;
-  observedImages = /* @__PURE__ */ new WeakSet();
-  isInitialized = !1;
-  isDestroyed = !1;
-  originalContainerStyles = {
-    gridAutoRows: "",
-    contain: "",
-    alignItems: ""
-  };
-  constructor(e = {}) {
-    this.containerOption = e.container;
-  }
-  init() {
-    this.isInitialized || (this.container = this.resolveContainer(), this.container && (this.isInitialized = !0, this.isDestroyed = !1, this.setupAbortControllers(), this.storeContainerStyles(), this.initializeContainerStyles(), this.initializeGridItems(), this.setupResizeObserver(), this.setupMutationObserver(), this.scheduleLayout()));
-  }
-  refresh() {
-    !this.isInitialized || this.isDestroyed || !this.container || (this.initializeGridItems(), this.scheduleLayout());
-  }
-  destroy() {
-    !this.isInitialized && !this.container || (this.isDestroyed = !0, this.isInitialized = !1, this.cancelScheduledLayout(), this.observerAbortController?.abort(), this.imageAbortController?.abort(), this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect(), this.gridItems.forEach((e) => {
-      e.style.gridRowEnd = "";
-    }), this.container && (this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows, this.container.style.contain = this.originalContainerStyles.contain, this.container.style.alignItems = this.originalContainerStyles.alignItems), this.gridItems = [], this.rowHeight = 1, this.rowGap = 0, this.resizeObserver = null, this.mutationObserver = null, this.observerAbortController = null, this.imageAbortController = null, this.observedImages = /* @__PURE__ */ new WeakSet(), this.resizeScheduled = !1, this.container = null, this.originalContainerStyles = {
-      gridAutoRows: "",
-      contain: "",
-      alignItems: ""
-    });
-  }
-  resolveContainer() {
-    return this.containerOption instanceof HTMLElement ? this.containerOption : typeof document > "u" ? null : typeof this.containerOption == "string" ? document.querySelector(this.containerOption) : document.querySelector(".masonry");
-  }
-  scheduleLayout() {
-    if (!(!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled)) {
-      if (this.resizeScheduled = !0, typeof requestAnimationFrame == "function") {
-        this.rafId = requestAnimationFrame(() => {
-          this.rafId = null, this.resizeScheduled = !1, this.performLayout();
-        });
-        return;
-      }
-      this.rafId = null, this.resizeScheduled = !1, this.performLayout();
-    }
-  }
-  cancelScheduledLayout() {
-    this.rafId !== null && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(this.rafId), this.rafId = null, this.resizeScheduled = !1;
-  }
-  performLayout() {
-    !this.isInitialized || this.isDestroyed || !this.container || (this.measureContainerMetrics(), this.resizeAllItems());
-  }
-  resizeAllItems() {
-    const e = this.rowHeight + this.rowGap;
-    this.gridItems.forEach((t) => {
-      if (e <= 0 || !Number.isFinite(e)) {
-        t.style.gridRowEnd = "span 1";
-        return;
-      }
-      const i = Math.max(1, Math.ceil((t.getBoundingClientRect().height + this.rowGap) / e));
-      t.style.gridRowEnd = `span ${i}`;
-    });
-  }
-  setupAbortControllers() {
-    this.observerAbortController = new AbortController(), this.imageAbortController = new AbortController(), this.observerAbortController.signal.addEventListener("abort", () => {
-      this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect();
-    });
-  }
-  setupResizeObserver() {
-    !this.container || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this.container));
-  }
-  setupMutationObserver() {
-    !this.container || typeof MutationObserver > "u" || (this.mutationObserver = new MutationObserver(() => {
-      this.initializeGridItems(), this.scheduleLayout();
-    }), this.mutationObserver.observe(this.container, {
-      childList: !0,
-      subtree: !1
-    }));
-  }
-  handleResize() {
-    this.scheduleLayout();
-  }
-  initializeContainerStyles() {
-    this.container && (this.container.style.gridAutoRows = "1px", this.container.style.contain = "layout", this.container.style.alignItems = "start");
-  }
-  measureContainerMetrics() {
-    if (!this.container) return;
-    const e = getComputedStyle(this.container);
-    this.rowGap = this.parseCssPixelValue(e.rowGap);
-    const t = this.parseCssPixelValue(e.gridAutoRows);
-    this.rowHeight = t > 0 ? t : 1;
-  }
-  initializeGridItems() {
-    this.container && (this.gridItems = Array.from(this.container.children).filter((e) => e instanceof HTMLElement), this.gridItems.forEach((e) => {
-      e.querySelectorAll("img").forEach((t) => {
-        this.observeImage(t);
-      });
-    }));
-  }
-  observeImage(e) {
-    if (e.complete || this.observedImages.has(e)) return;
-    this.observedImages.add(e);
-    const t = () => this.scheduleLayout();
-    if (this.imageAbortController) {
-      e.addEventListener("load", t, {
-        once: !0,
-        signal: this.imageAbortController.signal
-      });
-      return;
-    }
-    e.addEventListener("load", t, { once: !0 });
-  }
-  parseCssPixelValue(e) {
-    const t = Number.parseFloat(e);
-    return Number.isFinite(t) ? t : 0;
-  }
-  storeContainerStyles() {
-    this.container && (this.originalContainerStyles = {
-      gridAutoRows: this.container.style.gridAutoRows || "",
-      contain: this.container.style.contain || "",
-      alignItems: this.container.style.alignItems || ""
-    });
-  }
-};
-export {
-  r as default
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["interface MasonrySimpleOptions {\n  container?: HTMLElement | string;\n}\n\nexport default class MasonrySimple {\n  private readonly containerOption: HTMLElement | string | undefined;\n  private container: HTMLElement | null = null;\n  private gridItems: HTMLElement[] = [];\n  private rowHeight = 1;\n  private rowGap = 0;\n  private resizeScheduled = false;\n  private rafId: number | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private observerAbortController: AbortController | null = null;\n  private imageAbortController: AbortController | null = null;\n  private observedImages = new WeakSet<HTMLImageElement>();\n  private isInitialized = false;\n  private isDestroyed = false;\n  private originalContainerStyles = {\n    gridAutoRows: '',\n    contain: '',\n    alignItems: '',\n  };\n\n  constructor(options: MasonrySimpleOptions = {}) {\n    this.containerOption = options.container;\n  }\n\n  public init(): void {\n    if (this.isInitialized) return;\n\n    this.container = this.resolveContainer();\n\n    if (!this.container) return;\n\n    this.isInitialized = true;\n    this.isDestroyed = false;\n\n    this.setupAbortControllers();\n    this.storeContainerStyles();\n    this.initializeContainerStyles();\n    this.initializeGridItems();\n    this.setupResizeObserver();\n    this.setupMutationObserver();\n    this.scheduleLayout();\n  }\n\n  public refresh(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.initializeGridItems();\n    this.scheduleLayout();\n  }\n\n  public destroy(): void {\n    if (!this.isInitialized && !this.container) return;\n\n    this.isDestroyed = true;\n    this.isInitialized = false;\n    this.cancelScheduledLayout();\n    this.observerAbortController?.abort();\n    this.imageAbortController?.abort();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.gridItems.forEach((item) => {\n      item.style.gridRowEnd = '';\n    });\n\n    if (this.container) {\n      this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;\n      this.container.style.contain = this.originalContainerStyles.contain;\n      this.container.style.alignItems = this.originalContainerStyles.alignItems;\n    }\n\n    this.gridItems = [];\n    this.rowHeight = 1;\n    this.rowGap = 0;\n    this.resizeObserver = null;\n    this.mutationObserver = null;\n    this.observerAbortController = null;\n    this.imageAbortController = null;\n    this.observedImages = new WeakSet<HTMLImageElement>();\n    this.resizeScheduled = false;\n    this.container = null;\n    this.originalContainerStyles = {\n      gridAutoRows: '',\n      contain: '',\n      alignItems: '',\n    };\n  }\n\n  private resolveContainer(): HTMLElement | null {\n    if (this.containerOption instanceof HTMLElement) {\n      return this.containerOption;\n    }\n\n    if (typeof document === 'undefined') return null;\n\n    if (typeof this.containerOption === 'string') {\n      return document.querySelector<HTMLElement>(this.containerOption);\n    }\n\n    return document.querySelector<HTMLElement>('.masonry');\n  }\n\n  private scheduleLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;\n\n    this.resizeScheduled = true;\n\n    if (typeof requestAnimationFrame === 'function') {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null;\n        this.resizeScheduled = false;\n        this.performLayout();\n      });\n\n      return;\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n    this.performLayout();\n  }\n\n  private cancelScheduledLayout(): void {\n    if (this.rafId !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n  }\n\n  private performLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.measureContainerMetrics();\n    this.resizeAllItems();\n  }\n\n  private resizeAllItems(): void {\n    const denominator = this.rowHeight + this.rowGap;\n\n    this.gridItems.forEach((item) => {\n      if (denominator <= 0 || !Number.isFinite(denominator)) {\n        item.style.gridRowEnd = 'span 1';\n\n        return;\n      }\n\n      const rowSpan = Math.max(\n        1,\n        Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator),\n      );\n      item.style.gridRowEnd = `span ${rowSpan}`;\n    });\n  }\n\n  private setupAbortControllers(): void {\n    this.observerAbortController = new AbortController();\n    this.imageAbortController = new AbortController();\n\n    this.observerAbortController.signal.addEventListener('abort', () => {\n      this.resizeObserver?.disconnect();\n      this.mutationObserver?.disconnect();\n    });\n  }\n\n  private setupResizeObserver(): void {\n    if (!this.container || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  private setupMutationObserver(): void {\n    if (!this.container || typeof MutationObserver === 'undefined') return;\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.initializeGridItems();\n      this.scheduleLayout();\n    });\n\n    this.mutationObserver.observe(this.container, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  private handleResize(): void {\n    this.scheduleLayout();\n  }\n\n  private initializeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.container.style.gridAutoRows = '1px';\n    this.container.style.contain = 'layout';\n    this.container.style.alignItems = 'start';\n  }\n\n  private measureContainerMetrics(): void {\n    if (!this.container) return;\n\n    const cs = getComputedStyle(this.container);\n\n    this.rowGap = this.parseCssPixelValue(cs.rowGap);\n\n    const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);\n\n    this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;\n  }\n\n  private initializeGridItems(): void {\n    if (!this.container) return;\n\n    this.gridItems = Array.from(this.container.children).filter(\n      (item): item is HTMLElement => item instanceof HTMLElement,\n    );\n\n    this.gridItems.forEach((item) => {\n      const images = item.querySelectorAll('img');\n\n      images.forEach((image) => {\n        this.observeImage(image);\n      });\n    });\n  }\n\n  private observeImage(image: HTMLImageElement): void {\n    if (image.complete || this.observedImages.has(image)) return;\n\n    this.observedImages.add(image);\n\n    const onLoad = (): void => this.scheduleLayout();\n\n    if (this.imageAbortController) {\n      image.addEventListener('load', onLoad, {\n        once: true,\n        signal: this.imageAbortController.signal,\n      });\n\n      return;\n    }\n\n    image.addEventListener('load', onLoad, { once: true });\n  }\n\n  private parseCssPixelValue(value: string): number {\n    const parsedValue = Number.parseFloat(value);\n\n    return Number.isFinite(parsedValue) ? parsedValue : 0;\n  }\n\n  private storeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.originalContainerStyles = {\n      gridAutoRows: this.container.style.gridAutoRows || '',\n      contain: this.container.style.contain || '',\n      alignItems: this.container.style.alignItems || '',\n    };\n  }\n}\n"],"mappings":"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"}

package/dist/index.umd.js

@@ -1,3 +0,0 @@
-(function(i,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define([],e):(i=typeof globalThis<"u"?globalThis:i||self,i.MasonrySimple=e())})(this,function(){var i=class{containerOption;container=null;gridItems=[];rowHeight=1;rowGap=0;resizeScheduled=!1;rafId=null;resizeObserver=null;mutationObserver=null;observerAbortController=null;imageAbortController=null;observedImages=new WeakSet;isInitialized=!1;isDestroyed=!1;originalContainerStyles={gridAutoRows:"",contain:"",alignItems:""};constructor(e={}){this.containerOption=e.container}init(){this.isInitialized||(this.container=this.resolveContainer(),this.container&&(this.isInitialized=!0,this.isDestroyed=!1,this.setupAbortControllers(),this.storeContainerStyles(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.setupMutationObserver(),this.scheduleLayout()))}refresh(){!this.isInitialized||this.isDestroyed||!this.container||(this.initializeGridItems(),this.scheduleLayout())}destroy(){!this.isInitialized&&!this.container||(this.isDestroyed=!0,this.isInitialized=!1,this.cancelScheduledLayout(),this.observerAbortController?.abort(),this.imageAbortController?.abort(),this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect(),this.gridItems.forEach(e=>{e.style.gridRowEnd=""}),this.container&&(this.container.style.gridAutoRows=this.originalContainerStyles.gridAutoRows,this.container.style.contain=this.originalContainerStyles.contain,this.container.style.alignItems=this.originalContainerStyles.alignItems),this.gridItems=[],this.rowHeight=1,this.rowGap=0,this.resizeObserver=null,this.mutationObserver=null,this.observerAbortController=null,this.imageAbortController=null,this.observedImages=new WeakSet,this.resizeScheduled=!1,this.container=null,this.originalContainerStyles={gridAutoRows:"",contain:"",alignItems:""})}resolveContainer(){return this.containerOption instanceof HTMLElement?this.containerOption:typeof document>"u"?null:typeof this.containerOption=="string"?document.querySelector(this.containerOption):document.querySelector(".masonry")}scheduleLayout(){if(!(!this.isInitialized||this.isDestroyed||!this.container||this.resizeScheduled)){if(this.resizeScheduled=!0,typeof requestAnimationFrame=="function"){this.rafId=requestAnimationFrame(()=>{this.rafId=null,this.resizeScheduled=!1,this.performLayout()});return}this.rafId=null,this.resizeScheduled=!1,this.performLayout()}}cancelScheduledLayout(){this.rafId!==null&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(this.rafId),this.rafId=null,this.resizeScheduled=!1}performLayout(){!this.isInitialized||this.isDestroyed||!this.container||(this.measureContainerMetrics(),this.resizeAllItems())}resizeAllItems(){const e=this.rowHeight+this.rowGap;this.gridItems.forEach(t=>{if(e<=0||!Number.isFinite(e)){t.style.gridRowEnd="span 1";return}const s=Math.max(1,Math.ceil((t.getBoundingClientRect().height+this.rowGap)/e));t.style.gridRowEnd=`span ${s}`})}setupAbortControllers(){this.observerAbortController=new AbortController,this.imageAbortController=new AbortController,this.observerAbortController.signal.addEventListener("abort",()=>{this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect()})}setupResizeObserver(){!this.container||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.container))}setupMutationObserver(){!this.container||typeof MutationObserver>"u"||(this.mutationObserver=new MutationObserver(()=>{this.initializeGridItems(),this.scheduleLayout()}),this.mutationObserver.observe(this.container,{childList:!0,subtree:!1}))}handleResize(){this.scheduleLayout()}initializeContainerStyles(){this.container&&(this.container.style.gridAutoRows="1px",this.container.style.contain="layout",this.container.style.alignItems="start")}measureContainerMetrics(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=this.parseCssPixelValue(e.rowGap);const t=this.parseCssPixelValue(e.gridAutoRows);this.rowHeight=t>0?t:1}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children).filter(e=>e instanceof HTMLElement),this.gridItems.forEach(e=>{e.querySelectorAll("img").forEach(t=>{this.observeImage(t)})}))}observeImage(e){if(e.complete||this.observedImages.has(e))return;this.observedImages.add(e);const t=()=>this.scheduleLayout();if(this.imageAbortController){e.addEventListener("load",t,{once:!0,signal:this.imageAbortController.signal});return}e.addEventListener("load",t,{once:!0})}parseCssPixelValue(e){const t=Number.parseFloat(e);return Number.isFinite(t)?t:0}storeContainerStyles(){this.container&&(this.originalContainerStyles={gridAutoRows:this.container.style.gridAutoRows||"",contain:this.container.style.contain||"",alignItems:this.container.style.alignItems||""})}};return i});
-
-//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.umd.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["interface MasonrySimpleOptions {\n  container?: HTMLElement | string;\n}\n\nexport default class MasonrySimple {\n  private readonly containerOption: HTMLElement | string | undefined;\n  private container: HTMLElement | null = null;\n  private gridItems: HTMLElement[] = [];\n  private rowHeight = 1;\n  private rowGap = 0;\n  private resizeScheduled = false;\n  private rafId: number | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private observerAbortController: AbortController | null = null;\n  private imageAbortController: AbortController | null = null;\n  private observedImages = new WeakSet<HTMLImageElement>();\n  private isInitialized = false;\n  private isDestroyed = false;\n  private originalContainerStyles = {\n    gridAutoRows: '',\n    contain: '',\n    alignItems: '',\n  };\n\n  constructor(options: MasonrySimpleOptions = {}) {\n    this.containerOption = options.container;\n  }\n\n  public init(): void {\n    if (this.isInitialized) return;\n\n    this.container = this.resolveContainer();\n\n    if (!this.container) return;\n\n    this.isInitialized = true;\n    this.isDestroyed = false;\n\n    this.setupAbortControllers();\n    this.storeContainerStyles();\n    this.initializeContainerStyles();\n    this.initializeGridItems();\n    this.setupResizeObserver();\n    this.setupMutationObserver();\n    this.scheduleLayout();\n  }\n\n  public refresh(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.initializeGridItems();\n    this.scheduleLayout();\n  }\n\n  public destroy(): void {\n    if (!this.isInitialized && !this.container) return;\n\n    this.isDestroyed = true;\n    this.isInitialized = false;\n    this.cancelScheduledLayout();\n    this.observerAbortController?.abort();\n    this.imageAbortController?.abort();\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.gridItems.forEach((item) => {\n      item.style.gridRowEnd = '';\n    });\n\n    if (this.container) {\n      this.container.style.gridAutoRows = this.originalContainerStyles.gridAutoRows;\n      this.container.style.contain = this.originalContainerStyles.contain;\n      this.container.style.alignItems = this.originalContainerStyles.alignItems;\n    }\n\n    this.gridItems = [];\n    this.rowHeight = 1;\n    this.rowGap = 0;\n    this.resizeObserver = null;\n    this.mutationObserver = null;\n    this.observerAbortController = null;\n    this.imageAbortController = null;\n    this.observedImages = new WeakSet<HTMLImageElement>();\n    this.resizeScheduled = false;\n    this.container = null;\n    this.originalContainerStyles = {\n      gridAutoRows: '',\n      contain: '',\n      alignItems: '',\n    };\n  }\n\n  private resolveContainer(): HTMLElement | null {\n    if (this.containerOption instanceof HTMLElement) {\n      return this.containerOption;\n    }\n\n    if (typeof document === 'undefined') return null;\n\n    if (typeof this.containerOption === 'string') {\n      return document.querySelector<HTMLElement>(this.containerOption);\n    }\n\n    return document.querySelector<HTMLElement>('.masonry');\n  }\n\n  private scheduleLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container || this.resizeScheduled) return;\n\n    this.resizeScheduled = true;\n\n    if (typeof requestAnimationFrame === 'function') {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null;\n        this.resizeScheduled = false;\n        this.performLayout();\n      });\n\n      return;\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n    this.performLayout();\n  }\n\n  private cancelScheduledLayout(): void {\n    if (this.rafId !== null && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    this.rafId = null;\n    this.resizeScheduled = false;\n  }\n\n  private performLayout(): void {\n    if (!this.isInitialized || this.isDestroyed || !this.container) return;\n\n    this.measureContainerMetrics();\n    this.resizeAllItems();\n  }\n\n  private resizeAllItems(): void {\n    const denominator = this.rowHeight + this.rowGap;\n\n    this.gridItems.forEach((item) => {\n      if (denominator <= 0 || !Number.isFinite(denominator)) {\n        item.style.gridRowEnd = 'span 1';\n\n        return;\n      }\n\n      const rowSpan = Math.max(\n        1,\n        Math.ceil((item.getBoundingClientRect().height + this.rowGap) / denominator),\n      );\n      item.style.gridRowEnd = `span ${rowSpan}`;\n    });\n  }\n\n  private setupAbortControllers(): void {\n    this.observerAbortController = new AbortController();\n    this.imageAbortController = new AbortController();\n\n    this.observerAbortController.signal.addEventListener('abort', () => {\n      this.resizeObserver?.disconnect();\n      this.mutationObserver?.disconnect();\n    });\n  }\n\n  private setupResizeObserver(): void {\n    if (!this.container || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  private setupMutationObserver(): void {\n    if (!this.container || typeof MutationObserver === 'undefined') return;\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.initializeGridItems();\n      this.scheduleLayout();\n    });\n\n    this.mutationObserver.observe(this.container, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  private handleResize(): void {\n    this.scheduleLayout();\n  }\n\n  private initializeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.container.style.gridAutoRows = '1px';\n    this.container.style.contain = 'layout';\n    this.container.style.alignItems = 'start';\n  }\n\n  private measureContainerMetrics(): void {\n    if (!this.container) return;\n\n    const cs = getComputedStyle(this.container);\n\n    this.rowGap = this.parseCssPixelValue(cs.rowGap);\n\n    const parsedRowHeight = this.parseCssPixelValue(cs.gridAutoRows);\n\n    this.rowHeight = parsedRowHeight > 0 ? parsedRowHeight : 1;\n  }\n\n  private initializeGridItems(): void {\n    if (!this.container) return;\n\n    this.gridItems = Array.from(this.container.children).filter(\n      (item): item is HTMLElement => item instanceof HTMLElement,\n    );\n\n    this.gridItems.forEach((item) => {\n      const images = item.querySelectorAll('img');\n\n      images.forEach((image) => {\n        this.observeImage(image);\n      });\n    });\n  }\n\n  private observeImage(image: HTMLImageElement): void {\n    if (image.complete || this.observedImages.has(image)) return;\n\n    this.observedImages.add(image);\n\n    const onLoad = (): void => this.scheduleLayout();\n\n    if (this.imageAbortController) {\n      image.addEventListener('load', onLoad, {\n        once: true,\n        signal: this.imageAbortController.signal,\n      });\n\n      return;\n    }\n\n    image.addEventListener('load', onLoad, { once: true });\n  }\n\n  private parseCssPixelValue(value: string): number {\n    const parsedValue = Number.parseFloat(value);\n\n    return Number.isFinite(parsedValue) ? parsedValue : 0;\n  }\n\n  private storeContainerStyles(): void {\n    if (!this.container) return;\n\n    this.originalContainerStyles = {\n      gridAutoRows: this.container.style.gridAutoRows || '',\n      contain: this.container.style.contain || '',\n      alignItems: this.container.style.alignItems || '',\n    };\n  }\n}\n"],"mappings":"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"}