masonry-snap-grid-layout 1.0.2 → 1.0.4

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.cts

@@ -0,0 +1,34 @@
+interface MasonrySnapGridLayoutClassNames {
+    container?: string;
+    item?: string;
+}
+interface MasonrySnapGridLayoutOptions<T = unknown> {
+    gutter?: number;
+    minColWidth?: number;
+    animate?: boolean;
+    transitionDuration?: number;
+    items: T[];
+    renderItem: (item: T) => HTMLElement;
+    classNames?: MasonrySnapGridLayoutClassNames;
+}
+interface MasonrySnapGridRef {
+    layout: MasonrySnapGridLayout | null;
+}
+
+declare class MasonrySnapGridLayout<T = any> {
+    private readonly container;
+    private readonly options;
+    private items;
+    private columnHeights;
+    private resizeObserver;
+    private rafId;
+    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
+    private renderItems;
+    private setupResizeObserver;
+    private updateLayout;
+    private findShortestColumn;
+    updateItems(newItems: T[]): void;
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.ts

@@ -0,0 +1,34 @@
+interface MasonrySnapGridLayoutClassNames {
+    container?: string;
+    item?: string;
+}
+interface MasonrySnapGridLayoutOptions<T = unknown> {
+    gutter?: number;
+    minColWidth?: number;
+    animate?: boolean;
+    transitionDuration?: number;
+    items: T[];
+    renderItem: (item: T) => HTMLElement;
+    classNames?: MasonrySnapGridLayoutClassNames;
+}
+interface MasonrySnapGridRef {
+    layout: MasonrySnapGridLayout | null;
+}
+
+declare class MasonrySnapGridLayout<T = any> {
+    private readonly container;
+    private readonly options;
+    private items;
+    private columnHeights;
+    private resizeObserver;
+    private rafId;
+    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
+    private renderItems;
+    private setupResizeObserver;
+    private updateLayout;
+    private findShortestColumn;
+    updateItems(newItems: T[]): void;
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };

package/dist/esm/index.css

@@ -1,45 +1,17 @@
-/* src/masonry-snap-grid-layout.css */
-:root {
-  --gutter: 16px;
-  --columns: 4;
-  --min-col-width: 250px;
-  --transition-duration: 0.4s;
-  --primary-color: #6b73ff;
-  --secondary-color: #000dff;
-  --text-color: #fff;
-  --shadow-color: rgba(0, 0, 0, 0.1);
-  --item-radius: 8px;
-}
-.masonry-snap-grid-layout-container {
+/* src/index.css */
+.masonry-snap-grid-container {
   position: relative;
   width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  transition: height var(--transition-duration) ease-out;
+  transition: height 0.4s ease-out;
+  overflow: hidden;
 }
-.masonry-snap-grid-layout-item {
+.masonry-snap-grid-item {
   position: absolute;
-  color: var(--text-color);
-  border-radius: var(--item-radius);
-  font-size: 1rem;
-  box-shadow: 0 6px 12px var(--shadow-color);
-  user-select: none;
-  cursor: grab;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform;
-  transition:
-    transform var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.3s ease,
-    background 0.4s ease;
-  overflow: hidden;
-  z-index: 1;
-}
-.masonry-snap-grid-layout-item:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
-}
-.masonry-snap-grid-layout-item:active {
-  cursor: grabbing;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-  z-index: 10;
+  box-sizing: border-box;
+  transform-origin: top left;
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 /*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/masonry-snap-grid-layout.css"],"sourcesContent":["/*\r\n  Masonry Snap Grid Layout Styles\r\n\r\n  CSS variables for easy customization:\r\n  --gutter: spacing between items\r\n  --columns: number of columns (calculated dynamically)\r\n  --min-col-width: minimum width of columns\r\n  --transition-duration: animation timing\r\n  --primary-color, --secondary-color: gradient colors for items\r\n  --text-color: color for text inside items\r\n  --shadow-color: shadow color for item depth\r\n  --item-radius: border-radius for rounded corners\r\n*/\r\n\r\n/* Root CSS variables for theming */\r\n:root {\r\n    --gutter: 16px;\r\n    --columns: 4;\r\n    --min-col-width: 250px;\r\n    --transition-duration: 0.4s;\r\n    --primary-color: #6b73ff;\r\n    --secondary-color: #000dff;\r\n    --text-color: #fff;\r\n    --shadow-color: rgba(0, 0, 0, 0.1);\r\n    --item-radius: 8px;\r\n}\r\n\r\n/* Container for masonry grid — relative positioning for absolute item placement */\r\n.masonry-snap-grid-layout-container {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    transition: height var(--transition-duration) ease-out;\r\n}\r\n\r\n/* Each item absolutely positioned within container */\r\n.masonry-snap-grid-layout-item {\r\n    position: absolute;\r\n    color: var(--text-color);\r\n    border-radius: var(--item-radius);\r\n    font-size: 1rem;\r\n    box-shadow: 0 6px 12px var(--shadow-color);\r\n    user-select: none;\r\n    cursor: grab;\r\n    will-change: transform;\r\n    transition:\r\n            transform var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),\r\n            box-shadow 0.3s ease,\r\n            background 0.4s ease;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n}\r\n\r\n/* Hover state for better UX */\r\n.masonry-snap-grid-layout-item:hover {\r\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\r\n    transform: translateY(-2px);\r\n}\r\n\r\n/* Active / grabbing state */\r\n.masonry-snap-grid-layout-item:active {\r\n    cursor: grabbing;\r\n    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\r\n    z-index: 10;\r\n}\r\n\r\n"],"mappings":";AAeA;AACI,YAAU;AACV,aAAW;AACX,mBAAiB;AACjB,yBAAuB;AACvB,mBAAiB;AACjB,qBAAmB;AACnB,gBAAc;AACd,kBAAgB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9B,iBAAe;AACnB;AAGA,CAAC;AACG,YAAU;AACV,SAAO;AACP,aAAW;AACX,UAAQ,EAAE;AACV,cAAY,OAAO,IAAI,uBAAuB;AAClD;AAGA,CAAC;AACG,YAAU;AACV,SAAO,IAAI;AACX,iBAAe,IAAI;AACnB,aAAW;AACX,cAAY,EAAE,IAAI,KAAK,IAAI;AAC3B,eAAa;AACb,UAAQ;AACR,eAAa;AACb;AAAA,IACQ,UAAU,IAAI,uBAAuB,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;AAAA,IACjE,WAAW,KAAK,IAAI;AAAA,IACpB,WAAW,KAAK;AACxB,YAAU;AACV,WAAS;AACb;AAGA,CAlBC,6BAkB6B;AAC1B,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,aAAW,WAAW;AAC1B;AAGA,CAxBC,6BAwB6B;AAC1B,UAAQ;AACR,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC,WAAS;AACb;","names":[]}
+{"version":3,"sources":["../../src/index.css"],"sourcesContent":[".masonry-snap-grid-container {\r\n    position: relative;\r\n    width: 100%;\r\n    transition: height 0.4s ease-out;\r\n    overflow: hidden;\r\n}\r\n\r\n.masonry-snap-grid-item {\r\n    position: absolute;\r\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    will-change: transform;\r\n    box-sizing: border-box;\r\n    transform-origin: top left;\r\n    backface-visibility: hidden;\r\n    perspective: 1000px;\r\n}"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}

package/dist/esm/index.js

@@ -1,203 +1,81 @@
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
-  constructor(container2, options = {}) {
+  constructor(container, options) {
     this.items = [];
-    this.positions = [];
     this.columnHeights = [];
-    this.columns = 0;
-    this.lastPositions = [];
-    this.resizeRaf = null;
-    this.resizeObserver = null;
-    this.boundResizeHandler = this.handleResize.bind(this);
-    this.container = container2;
-    this.classNames = {
-      container: "masonry-snap-grid-container",
-      item: "masonry-snap-grid-item",
-      itemContent: "masonry-snap-grid-item-content",
-      itemHeader: "masonry-snap-grid-item-header",
-      itemTitle: "masonry-snap-grid-item-title",
-      itemId: "masonry-snap-grid-item-id",
-      itemBody: "masonry-snap-grid-item-body",
-      progressBar: "masonry-snap-grid-progress-bar",
-      progress: "masonry-snap-grid-progress",
-      itemFooter: "masonry-snap-grid-item-footer",
-      ...options.classNames || {}
-    };
+    this.rafId = null;
+    this.container = container;
     this.options = {
       gutter: 16,
       minColWidth: 250,
       animate: true,
       transitionDuration: 400,
-      initialItems: 0,
-      itemContent: null,
-      classNames: this.classNames,
+      classNames: {
+        container: "masonry-snap-grid-container",
+        item: "masonry-snap-grid-item"
+      },
       ...options
     };
-    this.container.classList.add(this.classNames.container);
-    this.init();
-  }
-  init() {
-    this.setupEventListeners();
-    this.generateItems(this.options.initialItems);
-    this.calculateLayout();
-    this.applyLayout(false);
-  }
-  setupEventListeners() {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize());
-    this.resizeObserver.observe(this.container);
-    window.addEventListener("resize", this.boundResizeHandler);
+    this.container.classList.add(this.options.classNames.container || "");
+    this.renderItems();
+    this.setupResizeObserver();
   }
-  generateItems(count) {
-    if (count < this.items.length) {
-      this.items.slice(count).forEach((item) => item.remove());
-      this.items = this.items.slice(0, count);
-      return;
-    }
-    const startIndex = this.items.length;
+  renderItems() {
+    this.items.forEach((item) => item.remove());
+    this.items = [];
     const fragment = document.createDocumentFragment();
-    for (let i = startIndex; i < count; i++) {
-      const item = this.createItem(i);
-      fragment.appendChild(item);
-      this.items.push(item);
-    }
+    this.options.items.forEach((itemData) => {
+      const itemElement = this.options.renderItem(itemData);
+      itemElement.classList.add(this.options.classNames.item || "");
+      fragment.appendChild(itemElement);
+      this.items.push(itemElement);
+    });
     this.container.appendChild(fragment);
+    this.updateLayout();
   }
-  createItem(index) {
-    const div = document.createElement("div");
-    div.className = this.classNames.item;
-    const contentOption = this.options.itemContent;
-    let content;
-    if (typeof contentOption === "function") {
-      content = contentOption(index);
-    } else if (contentOption instanceof HTMLElement || typeof contentOption === "string") {
-      content = contentOption;
-    } else {
-      content = `Item ${index + 1}`;
-    }
-    if (typeof content === "string") {
-      div.textContent = content;
-    } else {
-      div.appendChild(content);
-    }
-    const height = 120 + Math.floor(Math.random() * 100);
-    div.style.height = `${height}px`;
-    return div;
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => this.updateLayout());
+    });
+    this.resizeObserver.observe(this.container);
   }
-  calculateLayout() {
-    const { gutter, minColWidth } = this.options;
+  updateLayout() {
+    const { gutter, minColWidth, animate, transitionDuration } = this.options;
     const containerWidth = this.container.clientWidth;
-    this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
-    const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;
-    this.lastPositions = [...this.positions];
-    this.columnHeights = new Array(this.columns).fill(0);
-    this.positions = [];
-    this.items.forEach((item, i) => {
+    const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
+    const colWidth = (containerWidth - (columns - 1) * gutter) / columns;
+    this.columnHeights = new Array(columns).fill(0);
+    this.items.forEach((item) => {
       const height = item.offsetHeight;
-      let minCol = 0;
-      for (let c = 1; c < this.columns; c++) {
-        if (this.columnHeights[c] < this.columnHeights[minCol]) {
-          minCol = c;
-        }
-      }
+      const minCol = this.findShortestColumn();
       const x = minCol * (colWidth + gutter);
       const y = this.columnHeights[minCol];
-      this.positions[i] = { x, y, width: colWidth, height };
+      item.style.width = `${colWidth}px`;
+      item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      item.style.transition = animate ? `transform ${transitionDuration}ms ease` : "none";
       this.columnHeights[minCol] += height + gutter;
     });
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
-  applyLayout(animate = false) {
-    const duration = this.options.transitionDuration;
-    this.items.forEach((item, i) => {
-      const pos = this.positions[i] || { x: 0, y: 0, width: 0 };
-      const lastPos = this.lastPositions[i] || { x: 0, y: 0 };
-      item.style.width = `${pos.width}px`;
-      if (animate) {
-        const dx = lastPos.x - pos.x;
-        const dy = lastPos.y - pos.y;
-        item.style.transition = "none";
-        item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;
-        void item.offsetHeight;
-        item.style.transition = `transform ${duration}ms ease`;
-        item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
-      } else {
-        item.style.transition = "none";
-        item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
-      }
-    });
-  }
-  handleResize() {
-    if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);
-    this.resizeRaf = requestAnimationFrame(() => {
-      this.calculateLayout();
-      this.applyLayout(true);
-    });
-  }
-  shuffleItems() {
-    for (let i = this.items.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [this.items[i], this.items[j]] = [this.items[j], this.items[i]];
-    }
-    const fragment = document.createDocumentFragment();
-    this.items.forEach((item) => fragment.appendChild(item));
-    this.container.appendChild(fragment);
-    this.calculateLayout();
-    this.applyLayout(true);
+  findShortestColumn() {
+    return this.columnHeights.indexOf(Math.min(...this.columnHeights));
   }
-  addItems(count) {
-    const newCount = this.items.length + count;
-    this.generateItems(newCount);
-    this.calculateLayout();
-    this.applyLayout(true);
+  updateItems(newItems) {
+    this.options.items = newItems;
+    this.renderItems();
   }
   destroy() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    window.removeEventListener("resize", this.boundResizeHandler);
-    if (this.resizeRaf) {
-      cancelAnimationFrame(this.resizeRaf);
-      this.resizeRaf = null;
-    }
+    this.resizeObserver?.disconnect();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
     this.container.innerHTML = "";
     this.container.removeAttribute("style");
-    this.container.classList.remove(this.classNames.container);
-    this.items = [];
-    this.positions = [];
-    this.columnHeights = [];
-    this.columns = 0;
-    this.lastPositions = [];
+    this.container.classList.remove(this.options.classNames.container || "");
   }
 };
 
 // src/index.ts
-var container = document.getElementById("masonry");
-if (container) {
-  const masonry = new MasonrySnapGridLayout(container, {
-    gutter: 20,
-    minColWidth: 200,
-    animate: true,
-    initialItems: 40,
-    // Custom item content example
-    itemContent: (index) => {
-      const div = document.createElement("div");
-      div.textContent = `Custom Item ${index + 1}`;
-      div.style.color = "#fff";
-      div.style.fontWeight = "bold";
-      div.style.textAlign = "center";
-      div.style.padding = "1rem";
-      return div;
-    },
-    classNames: {
-      container: "masonry-snap-grid-layout-container",
-      item: "masonry-snap-grid-layout-item"
-    }
-  });
-  masonry.addItems(5);
-  masonry.shuffleItems();
-}
 var index_default = MasonrySnapGridLayout;
 export {
   MasonrySnapGridLayout,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutClassNames, MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions>;\r\n    private classNames: Required<MasonrySnapGridLayoutClassNames>;\r\n\r\n    private items: HTMLElement[] = [];\r\n    private positions: { x: number; y: number; width: number; height: number }[] = [];\r\n    private columnHeights: number[] = [];\r\n    private columns: number = 0;\r\n    private lastPositions: typeof this.positions = [];\r\n    private resizeRaf: number | null = null;\r\n\r\n    private resizeObserver: ResizeObserver | null = null;\r\n    private boundResizeHandler = this.handleResize.bind(this);\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n        this.classNames = {\r\n            container: 'masonry-snap-grid-container',\r\n            item: 'masonry-snap-grid-item',\r\n            itemContent: 'masonry-snap-grid-item-content',\r\n            itemHeader: 'masonry-snap-grid-item-header',\r\n            itemTitle: 'masonry-snap-grid-item-title',\r\n            itemId: 'masonry-snap-grid-item-id',\r\n            itemBody: 'masonry-snap-grid-item-body',\r\n            progressBar: 'masonry-snap-grid-progress-bar',\r\n            progress: 'masonry-snap-grid-progress',\r\n            itemFooter: 'masonry-snap-grid-item-footer',\r\n            ...(options.classNames || {}),\r\n        }\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 0,\r\n            itemContent: null,\r\n            classNames: this.classNames,\r\n            ...options,\r\n        };\r\n\r\n\r\n        this.container.classList.add(this.classNames.container);\r\n        this.init();\r\n    }\r\n\r\n    private init() {\r\n        this.setupEventListeners();\r\n        this.generateItems(this.options.initialItems);\r\n        this.calculateLayout();\r\n        this.applyLayout(false);\r\n    }\r\n\r\n    private setupEventListeners() {\r\n        this.resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        this.resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener('resize', this.boundResizeHandler);\r\n    }\r\n\r\n    public generateItems(count: number) {\r\n        if (count < this.items.length) {\r\n            this.items.slice(count).forEach((item) => item.remove());\r\n            this.items = this.items.slice(0, count);\r\n            return;\r\n        }\r\n\r\n        const startIndex = this.items.length;\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        for (let i = startIndex; i < count; i++) {\r\n            const item = this.createItem(i);\r\n            fragment.appendChild(item);\r\n            this.items.push(item);\r\n        }\r\n\r\n        this.container.appendChild(fragment);\r\n    }\r\n\r\n    private createItem(index: number): HTMLElement {\r\n        const div = document.createElement('div');\r\n        div.className = this.classNames.item;\r\n\r\n        const contentOption = this.options.itemContent;\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === 'function') {\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === 'string') {\r\n            content = contentOption;\r\n        } else {\r\n            content = `Item ${index + 1}`;\r\n        }\r\n\r\n        if (typeof content === 'string') {\r\n            div.textContent = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Assigning height dynamically for layout simulation (no styles applied)\r\n        const height = 120 + Math.floor(Math.random() * 100);\r\n        div.style.height = `${height}px`;\r\n\r\n        return div;\r\n    }\r\n\r\n    public calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        this.lastPositions = [...this.positions];\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            let minCol = 0;\r\n            for (let c = 1; c < this.columns; c++) {\r\n                if (this.columnHeights[c] < this.columnHeights[minCol]) {\r\n                    minCol = c;\r\n                }\r\n            }\r\n\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    applyLayout(animate: boolean = false) {\r\n        const duration = this.options.transitionDuration;\r\n\r\n        this.items.forEach((item, i) => {\r\n            const pos = this.positions[i] || { x: 0, y: 0, width: 0 };\r\n            const lastPos = this.lastPositions[i] || { x: 0, y: 0 };\r\n\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                item.style.transition = 'none';\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n                void item.offsetHeight;\r\n\r\n                item.style.transition = `transform ${duration}ms ease`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                item.style.transition = 'none';\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            }\r\n        });\r\n    }\r\n\r\n    private handleResize() {\r\n        if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);\r\n        this.resizeRaf = requestAnimationFrame(() => {\r\n            this.calculateLayout();\r\n            this.applyLayout(true);\r\n        });\r\n    }\r\n\r\n    public shuffleItems() {\r\n        for (let i = this.items.length - 1; i > 0; i--) {\r\n            const j = Math.floor(Math.random() * (i + 1));\r\n            [this.items[i], this.items[j]] = [this.items[j], this.items[i]];\r\n        }\r\n\r\n        const fragment = document.createDocumentFragment();\r\n        this.items.forEach((item) => fragment.appendChild(item));\r\n        this.container.appendChild(fragment);\r\n\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    public addItems(count: number) {\r\n        const newCount = this.items.length + count;\r\n        this.generateItems(newCount);\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    public destroy(): void {\r\n        if (this.resizeObserver) {\r\n            this.resizeObserver.disconnect();\r\n            this.resizeObserver = null;\r\n        }\r\n\r\n        window.removeEventListener('resize', this.boundResizeHandler);\r\n\r\n        if (this.resizeRaf) {\r\n            cancelAnimationFrame(this.resizeRaf);\r\n            this.resizeRaf = null;\r\n        }\r\n\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.classNames.container);\r\n\r\n        this.items = [];\r\n        this.positions = [];\r\n        this.columnHeights = [];\r\n        this.columns = 0;\r\n        this.lastPositions = [];\r\n    }\r\n}","import './masonry-snap-grid-layout.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\nimport {MasonrySnapGridLayoutOptions}  from './types';\r\n\r\nconst container = document.getElementById('masonry');\r\nif (container) {\r\n    const masonry = new MasonrySnapGridLayout(container, {\r\n        gutter: 20,\r\n        minColWidth: 200,\r\n        animate: true,\r\n        initialItems: 40,\r\n\r\n        // Custom item content example\r\n        itemContent: (index) => {\r\n            const div = document.createElement('div');\r\n            div.textContent = `Custom Item ${index + 1}`;\r\n            div.style.color = '#fff';\r\n            div.style.fontWeight = 'bold';\r\n            div.style.textAlign = 'center';\r\n            div.style.padding = '1rem';\r\n            return div;\r\n        },\r\n\r\n        classNames: {\r\n            container: 'masonry-snap-grid-layout-container',\r\n            item: 'masonry-snap-grid-layout-item',\r\n        },\r\n    });\r\n\r\n    // Example to update count later\r\n    masonry.addItems(5);\r\n\r\n    // Example to shuffle items\r\n    masonry.shuffleItems();\r\n}\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };"],"mappings":"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","names":["container"]}
+{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout<T = any> {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\r\n    private items: HTMLElement[] = [];\r\n    private columnHeights: number[] = [];\r\n    private resizeObserver: ResizeObserver | undefined;\r\n    private rafId: number | null = null;\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\r\n        this.container = container;\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            classNames: {\r\n                container: 'masonry-snap-grid-container',\r\n                item: 'masonry-snap-grid-item',\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Apply container class\r\n        this.container.classList.add(this.options.classNames.container || \"\");\r\n\r\n        // Initialize\r\n        this.renderItems();\r\n        this.setupResizeObserver();\r\n    }\r\n\r\n    private renderItems() {\r\n        // Clear existing items\r\n        this.items.forEach(item => item.remove());\r\n        this.items = [];\r\n\r\n        // Create fragment for batch DOM insertion\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        // Create and append items\r\n        this.options.items.forEach(itemData => {\r\n            const itemElement = this.options.renderItem(itemData);\r\n            itemElement.classList.add(this.options.classNames.item|| \"\");\r\n            fragment.appendChild(itemElement);\r\n            this.items.push(itemElement);\r\n        });\r\n\r\n        this.container.appendChild(fragment);\r\n        this.updateLayout();\r\n    }\r\n\r\n    private setupResizeObserver() {\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            if (this.rafId) cancelAnimationFrame(this.rafId);\r\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\r\n        });\r\n        this.resizeObserver.observe(this.container);\r\n    }\r\n\r\n    private updateLayout() {\r\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate columns\r\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\r\n\r\n        // Reset column heights\r\n        this.columnHeights = new Array(columns).fill(0);\r\n\r\n        // Position items\r\n        this.items.forEach((item) => {\r\n            const height = item.offsetHeight;\r\n            const minCol = this.findShortestColumn();\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Apply position and size\r\n            item.style.width = `${colWidth}px`;\r\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n            item.style.transition = animate\r\n                ? `transform ${transitionDuration}ms ease`\r\n                : 'none';\r\n\r\n            // Update column height\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    private findShortestColumn(): number {\r\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\r\n    }\r\n\r\n    public updateItems(newItems: T[]) {\r\n        this.options.items = newItems;\r\n        this.renderItems();\r\n    }\r\n\r\n    public destroy() {\r\n        this.resizeObserver?.disconnect();\r\n        if (this.rafId) cancelAnimationFrame(this.rafId);\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.options.classNames.container || \"\");\r\n    }\r\n}","import './index.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\nimport {MasonrySnapGridLayoutOptions}  from './types';\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };"],"mappings":";AAEA,IAAqB,wBAArB,MAAoD;AAAA,EAQhD,YAAY,WAAwB,SAA0C;AAL9E,SAAQ,QAAuB,CAAC;AAChC,SAAQ,gBAA0B,CAAC;AAEnC,SAAQ,QAAuB;AAG3B,SAAK,YAAY;AACjB,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,YAAY;AAAA,QACR,WAAW;AAAA,QACX,MAAM;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,QAAQ,WAAW,aAAa,EAAE;AAGpE,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEQ,cAAc;AAElB,SAAK,MAAM,QAAQ,UAAQ,KAAK,OAAO,CAAC;AACxC,SAAK,QAAQ,CAAC;AAGd,UAAM,WAAW,SAAS,uBAAuB;AAGjD,SAAK,QAAQ,MAAM,QAAQ,cAAY;AACnC,YAAM,cAAc,KAAK,QAAQ,WAAW,QAAQ;AACpD,kBAAY,UAAU,IAAI,KAAK,QAAQ,WAAW,QAAO,EAAE;AAC3D,eAAS,YAAY,WAAW;AAChC,WAAK,MAAM,KAAK,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,UAAU,YAAY,QAAQ;AACnC,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,UAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,WAAK,QAAQ,sBAAsB,MAAM,KAAK,aAAa,CAAC;AAAA,IAChE,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,SAAS;AAAA,EAC9C;AAAA,EAEQ,eAAe;AACnB,UAAM,EAAE,QAAQ,aAAa,SAAS,mBAAmB,IAAI,KAAK;AAClE,UAAM,iBAAiB,KAAK,UAAU;AAGtC,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AAC1F,UAAM,YAAY,kBAAkB,UAAU,KAAK,UAAU;AAG7D,SAAK,gBAAgB,IAAI,MAAM,OAAO,EAAE,KAAK,CAAC;AAG9C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,YAAM,SAAS,KAAK;AACpB,YAAM,SAAS,KAAK,mBAAmB;AACvC,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAGnC,WAAK,MAAM,QAAQ,GAAG,QAAQ;AAC9B,WAAK,MAAM,YAAY,eAAe,CAAC,OAAO,CAAC;AAC/C,WAAK,MAAM,aAAa,UAClB,aAAa,kBAAkB,YAC/B;AAGN,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAGD,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,qBAA6B;AACjC,WAAO,KAAK,cAAc,QAAQ,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAAA,EACrE;AAAA,EAEO,YAAY,UAAe;AAC9B,SAAK,QAAQ,QAAQ;AACrB,SAAK,YAAY;AAAA,EACrB;AAAA,EAEO,UAAU;AACb,SAAK,gBAAgB,WAAW;AAChC,QAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,QAAQ,WAAW,aAAa,EAAE;AAAA,EAC3E;AACJ;;;AC1GA,IAAO,gBAAQ;","names":[]}