masonry-simple 4.4.0 → 4.5.0

package/README.md

@@ -1,68 +1,126 @@
-<div align="center">
-<br>
+# masonry-simple
 
-<h1>masonry-simple</h1>
+A lightweight masonry layout helper built on top of CSS Grid.
 
-<p><sup>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.</sup></p>
+- 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.
 
-[![npm](https://img.shields.io/npm/v/masonry-simple.svg?colorB=brightgreen)](https://www.npmjs.com/package/masonry-simple)
-[![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/masonry-simple.svg)](https://github.com/ux-ui-pro/masonry-simple)
-[![NPM Downloads](https://img.shields.io/npm/dm/masonry-simple.svg?style=flat)](https://www.npmjs.org/package/masonry-simple)
+## Install
 
-<sup>1kB gzipped</sup>
-
-<a href="https://codepen.io/ux-ui/pen/poxGEqX">Demo</a>
-
-</div>
-<br>
-
-&#10148; **Install**
-```console
-$ yarn add masonry-simple
+```bash
+yarn add masonry-simple
 ```
-<br>
 
-&#10148; **Import**
-```javascript
+## Usage (TypeScript)
+
+```ts
 import MasonrySimple from 'masonry-simple';
-```
-<br>
 
-&#10148; **Usage**
-```javascript
 const masonry = new MasonrySimple({
   container: '.masonry',
 });
 
 masonry.init();
 ```
-```HTML
+
+## Usage (Vue 3)
+
+```vue
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
+import MasonrySimple from 'masonry-simple';
+
+const masonryRef = ref<HTMLElement | null>(null);
+const masonry = shallowRef<MasonrySimple | null>(null);
+
+onMounted(() => {
+  if (!masonryRef.value) return;
+  masonry.value = new MasonrySimple({ container: masonryRef.value });
+  masonry.value.init();
+});
+
+onBeforeUnmount(() => {
+  masonry.value?.destroy();
+  masonry.value = null;
+});
+</script>
+
+<template>
+  <div ref="masonryRef" class="masonry">
+    <div class="masonry__item">...</div>
+    <div class="masonry__item">...</div>
+  </div>
+</template>
+```
+
+## HTML Layout
+
+```html
 <div class="masonry">
   <div class="masonry__item">
-    ...
+    <img src="/img/1.jpg" alt="">
   </div>
   <div class="masonry__item">
-    ...
+    Lorem ipsum
   </div>
-  ...
 </div>
 ```
-```SCSS
+
+## CSS Contract
+
+```css
 .masonry {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-auto-flow: dense;
-  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
 }
 ```
-<br>
 
-&#10148; **Destroy**
-```javascript
+- Container must use CSS Grid.
+- Item heights are measured from rendered content.
+- Library temporarily applies inline styles while active:
+  - `gridAutoRows: 1px`
+  - `contain: layout`
+  - `alignItems: start`
+- These inline styles are restored on `destroy()`.
+
+## Options
+
+| Option      | Type                     | Default      | Description                                       |
+|:------------|:-------------------------|:------------:|:--------------------------------------------------|
+| `container` | `HTMLElement \| string`  | `'.masonry'` | Target container element or selector.             |
+
+## Methods
+
+```ts
+masonry.init();
+masonry.refresh();
 masonry.destroy();
 ```
-<br>
 
-&#10148; **License**
+## Lifecycle Behavior
+
+- `init()` is idempotent and does not duplicate observers/listeners.
+- `refresh()` re-collects grid items and schedules a single layout pass.
+- `destroy()` cancels scheduled animation frame work, disconnects observers, clears listeners, and resets item styles (`gridRowEnd`).
+- `refresh()` after `destroy()` is a safe no-op.
+
+## Edge Cases and Limitations
+
+- Missing container: methods do nothing.
+- SSR / non-DOM environments: graceful no-op behavior when `document` is unavailable.
+- Missing `ResizeObserver` / `MutationObserver`: layout still works via manual `refresh()`.
+- Hidden container (`display: none`) or zero-size state may produce temporary fallback spans.
+- If size changes happen without child mutations, call `refresh()` manually.
+
+## Performance Notes
+
+- Batch DOM changes and call one `refresh()`.
+- Avoid frequent style mutations during animation loops.
+- Prefer known image dimensions to reduce post-load relayout work.
+
+## License
 
-masonry-simple is released under MIT license
+MIT

package/dist/index.cjs.js

@@ -1 +1,3 @@
-"use strict";module.exports=class{container;gridItems=[];rowHeight=1;rowGap=0;resizeScheduled=!1;resizeObserver=null;mutationObserver=null;abortController=null;originalAutoRows="";constructor(t={}){this.container=t.container instanceof HTMLElement?t.container:typeof t.container=="string"?document.querySelector(t.container):document.querySelector(".masonry")}init(){this.container&&(this.setupAbortController(),this.storeAndSetAutoRows(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.setupMutationObserver(),this.resizeAllItems())}refresh(){this.initializeGridItems(),this.resizeAllItems()}destroy(){this.container&&(this.abortController?.abort(),this.container.style.gridAutoRows=this.originalAutoRows,this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>t.style.gridRowEnd=""),this.gridItems=[],this.resizeObserver=null,this.mutationObserver=null,this.abortController=null,this.originalAutoRows="")}handleResize(){this.resizeScheduled||(this.resizeScheduled=!0,requestAnimationFrame(()=>{this.resizeAllItems(),this.resizeScheduled=!1}))}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(t=>{const e=Math.ceil((t.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));t.style.gridRowEnd=`span ${e}`}))}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.container)}setupMutationObserver(){this.mutationObserver=new MutationObserver(()=>{this.initializeGridItems(),this.resizeAllItems()}),this.mutationObserver.observe(this.container,{childList:!0,subtree:!1})}initializeContainerStyles(){if(!this.container)return;const t=getComputedStyle(this.container);this.rowGap=parseInt(t.rowGap,10)||0;const e=parseInt(t.gridAutoRows,10);this.rowHeight=Number.isNaN(e)?this.rowHeight:e,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children),this.gridItems.forEach(t=>{const e=t.querySelector("img");e&&!e.complete&&e.addEventListener("load",()=>this.resizeAllItems(),{once:!0})}))}storeAndSetAutoRows(){this.container&&(this.originalAutoRows||(this.originalAutoRows=this.container.style.gridAutoRows||""),this.container.style.gridAutoRows="1px")}};
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -1,27 +1,43 @@
-interface MasonrySimpleOptions {
-    container?: HTMLElement | string;
-}
-export default class MasonrySimple {
-    private readonly container;
-    private gridItems;
-    private rowHeight;
-    private rowGap;
-    private resizeScheduled;
-    private resizeObserver;
-    private mutationObserver;
-    private abortController;
-    private originalAutoRows;
-    constructor(options?: MasonrySimpleOptions);
-    init(): void;
-    refresh(): void;
-    destroy(): void;
-    private handleResize;
-    private resizeAllItems;
-    private setupAbortController;
-    private setupResizeObserver;
-    private setupMutationObserver;
-    private initializeContainerStyles;
-    private initializeGridItems;
-    private storeAndSetAutoRows;
-}
-export {};
+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 { }

package/dist/index.es.js

@@ -1,66 +1,135 @@
-class s {
-  container;
+var r = class {
+  containerOption;
+  container = null;
   gridItems = [];
   rowHeight = 1;
   rowGap = 0;
   resizeScheduled = !1;
+  rafId = null;
   resizeObserver = null;
   mutationObserver = null;
-  abortController = null;
-  originalAutoRows = "";
-  constructor(t = {}) {
-    this.container = t.container instanceof HTMLElement ? t.container : typeof t.container == "string" ? document.querySelector(t.container) : document.querySelector(".masonry");
+  observerAbortController = null;
+  imageAbortController = null;
+  observedImages = /* @__PURE__ */ new WeakSet();
+  isInitialized = !1;
+  isDestroyed = !1;
+  originalContainerStyles = {
+    gridAutoRows: "",
+    contain: "",
+    alignItems: ""
+  };
+  constructor(e = {}) {
+    this.containerOption = e.container;
   }
   init() {
-    this.container && (this.setupAbortController(), this.storeAndSetAutoRows(), this.initializeContainerStyles(), this.initializeGridItems(), this.setupResizeObserver(), this.setupMutationObserver(), this.resizeAllItems());
+    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.initializeGridItems(), this.resizeAllItems();
+    !this.isInitialized || this.isDestroyed || !this.container || (this.initializeGridItems(), this.scheduleLayout());
   }
   destroy() {
-    this.container && (this.abortController?.abort(), this.container.style.gridAutoRows = this.originalAutoRows, this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((t) => t.style.gridRowEnd = ""), this.gridItems = [], this.resizeObserver = null, this.mutationObserver = null, this.abortController = null, this.originalAutoRows = "");
+    !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: ""
+    });
   }
-  handleResize() {
-    this.resizeScheduled || (this.resizeScheduled = !0, requestAnimationFrame(() => {
-      this.resizeAllItems(), this.resizeScheduled = !1;
-    }));
+  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() {
-    this.container && (this.container.style.alignItems = "start", this.gridItems.forEach((t) => {
-      const e = Math.ceil((t.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
-      t.style.gridRowEnd = `span ${e}`;
-    }));
+    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}`;
+    });
   }
-  setupAbortController() {
-    this.abortController = new AbortController(), this.abortController.signal.addEventListener("abort", () => {
+  setupAbortControllers() {
+    this.observerAbortController = new AbortController(), this.imageAbortController = new AbortController(), this.observerAbortController.signal.addEventListener("abort", () => {
       this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect();
     });
   }
   setupResizeObserver() {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this.container);
+    !this.container || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this.container));
   }
   setupMutationObserver() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.initializeGridItems(), this.resizeAllItems();
-    }), this.mutationObserver.observe(this.container, { childList: !0, subtree: !1 });
+    !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 t = getComputedStyle(this.container);
-    this.rowGap = parseInt(t.rowGap, 10) || 0;
-    const e = parseInt(t.gridAutoRows, 10);
-    this.rowHeight = Number.isNaN(e) ? this.rowHeight : e, this.container.style.contain = "layout";
+    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), this.gridItems.forEach((t) => {
-      const e = t.querySelector("img");
-      e && !e.complete && e.addEventListener("load", () => this.resizeAllItems(), { once: !0 });
+    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);
+      });
     }));
   }
-  storeAndSetAutoRows() {
-    this.container && (this.originalAutoRows || (this.originalAutoRows = this.container.style.gridAutoRows || ""), this.container.style.gridAutoRows = "1px");
+  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 {
-  s as default
+  r as default
 };
+
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+(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

@@ -0,0 +1 @@
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-simple",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "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",
@@ -13,43 +13,49 @@
   },
   "homepage": "https://github.com/ux-ui-pro/masonry-simple",
   "sideEffects": false,
+  "type": "module",
+  "packageManager": "yarn@1.22.22",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "clean": "rimraf dist",
     "build": "vite build",
-    "lint:js": "eslint src/**/*.{ts,js}",
-    "lint:fix:js": "eslint src/**/*.{ts,js} --fix",
-    "format:js": "prettier --write src/**/*.{ts,js}",
-    "lint:fix": "yarn lint:fix:js && yarn format:js"
+    "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",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test:smoke": "node --test tests/*.js",
+    "prepublishOnly": "yarn clean && yarn 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",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js",
-      "import": "./dist/index.es.js"
+      "default": "./dist/index.umd.js"
     },
     "./dist/*": "./dist/*"
   },
   "files": [
-    "dist/"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "devDependencies": {
-    "@eslint/js": "9.31.0",
-    "@rollup/plugin-terser": "0.4.4",
-    "@types/node": "24.0.14",
-    "@typescript-eslint/eslint-plugin": "8.37.0",
-    "@typescript-eslint/parser": "8.37.0",
-    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.1.5",
-    "eslint-import-resolver-typescript": "4.4.4",
-    "eslint-plugin-import": "2.32.0",
-    "globals": "16.3.0",
-    "prettier": "3.6.2",
-    "rimraf": "6.0.1",
-    "typescript": "5.8.3",
-    "vite": "7.0.4",
+    "@biomejs/biome": "2.4.8",
+    "@types/node": "25.5.0",
+    "esbuild": "0.27.4",
+    "rimraf": "6.1.3",
+    "typescript": "6.0.2",
+    "vite": "8.0.2",
     "vite-plugin-dts": "4.5.4"
   },
   "keywords": [