masonry-snap-grid-layout 0.0.2 → 0.0.4

package/README.md

@@ -1,16 +1,19 @@
 # masonry-snap-grid-layout
 
+[![npm version](https://img.shields.io/npm/v/masonry-snap-grid-layout?color=brightgreen)](https://www.npmjs.com/package/masonry-snap-grid-layout)
+[![CI/CD](https://github.com/khachatryan-dev/masonry-snap-grid-layout/actions/workflows/publish.yml/badge.svg)](https://github.com/khachatryan-dev/masonry-snap-grid-layout/actions)
+
 A performant masonry grid layout library with smooth animations, customizable gutter, columns, and dynamic item content.
 
 ---
 
 ## 🚀 Features
 
-- **Dynamic Columns & Gutter**: Automatically adapts to container width.
-- **Smooth Animations**: Transitions when layout changes or items shuffle.
-- **Customizable Item Content**: Pass your own HTML or render functions.
-- **Lightweight & Dependency-Free**: Vanilla TypeScript for easy integration.
-- **Responsive & Accessible**: Works well on all screen sizes.
+* **Dynamic Columns & Gutter**: Automatically adapts to container width.
+* **Smooth Animations**: Transitions when layout changes or items shuffle.
+* **Customizable Item Content**: Pass your own HTML or render functions.
+* **Lightweight & Dependency-Free**: Vanilla TypeScript for easy integration.
+* **Responsive & Accessible**: Works well on all screen sizes.
 
 ---
 
@@ -20,14 +23,14 @@ A performant masonry grid layout library with smooth animations, customizable gu
 npm install masonry-snap-grid-layout
 # or
 yarn add masonry-snap-grid-layout
-```
+````
 
 ---
 
-## 💡 Usage Example
+## 💡 Usage Example (Vanilla JS)
 
 ```ts
-import { MasonrySnapGridLayout } from 'masonry-snap-grid-layout';
+import MasonrySnapGridLayout from 'masonry-snap-grid-layout';
 
 const container = document.getElementById('masonry-container')!;
 const masonry = new MasonrySnapGridLayout(container, {
@@ -39,52 +42,117 @@ const masonry = new MasonrySnapGridLayout(container, {
   itemContent: (index) => {
     const div = document.createElement('div');
     div.textContent = `Custom Item #${index + 1}`;
-    div.style.padding = '10px';
-    div.style.backgroundColor = '#ddd';
-    div.style.borderRadius = '8px';
     return div;
-  }
+  },
 });
 ```
 
+In your HTML:
+
+```html
+<div id="masonry-container" style="position: relative; width: 100%;"></div>
+```
+
+---
+
+## 💙 React Usage Example
+
+```tsx
+'use client';
+
+import React from 'react';
+import MasonrySnapGrid from 'masonry-snap-grid-layout/react'; // Adjust path if needed
+
+export default function MasonryGrid() {
+  const items = Array.from({ length: 25 }, (_, i) => i);
+
+  return (
+    <MasonrySnapGrid
+      items={items}
+      options={{
+        gutter: 16,
+        minColWidth: 220,
+        animate: true,
+        transitionDuration: 400,
+      }}
+      renderItem={(item, index) => (
+        <div>
+          React Item #{index + 1}
+        </div>
+      )}
+      className="my-masonry-container"
+      style={{ position: 'relative', width: '100%' }}
+    />
+  );
+}
+```
+
 ---
 
 ## ⚙️ API
 
 ### Constructor
 
-`new MasonrySnapGridLayout(container: HTMLElement, options?: MasonrySnapGridLayoutOptions)`
+```ts
+new MasonrySnapGridLayout(container: HTMLElement, options?: MasonrySnapGridLayoutOptions)
+```
 
-- **container** — The container element where items are rendered.
-- **options** — Configuration options (optional).
+* **container** — The container element where items are rendered.
+* **options** — Configuration options (optional).
 
 ### Methods
 
-- `shuffleItems(): void` — Shuffle items randomly with animation.
-- `addItems(count: number): void` — Add more items dynamically.
+* `shuffleItems(): void` — Shuffle items randomly with animation.
+* `addItems(count: number): void` — Add more items dynamically.
+* `destroy(): void` — Clean up and remove all items and event listeners.
 
 ---
 
 ## 🛠️ Options
 
-| Option             | Type                               | Default     | Description                              |
-|--------------------|----------------------------------|-------------|------------------------------------------|
-| `gutter`           | `number`                         | `16`        | Spacing between items in pixels.        |
-| `minColWidth`      | `number`                         | `250`       | Minimum column width in pixels.         |
-| `animate`          | `boolean`                        | `true`      | Enable/disable animations.               |
-| `transitionDuration` | `number`                       | `400`       | Animation duration in milliseconds.     |
-| `initialItems`     | `number`                         | `30`        | Number of items generated initially.    |
-| `classNames`       | `object`                         | Default CSS classes | Override CSS class names for styling.   |
-| `itemContent`      | `string` \| `HTMLElement` \| `(index: number) => HTMLElement \| string` | `null` | Content or content generator callback for items. |
+| Option               | Type                                                                    | Default             | Description                                      |
+| -------------------- | ----------------------------------------------------------------------- | ------------------- | ------------------------------------------------ |
+| `gutter`             | `number`                                                                | `16`                | Spacing between items in pixels.                 |
+| `minColWidth`        | `number`                                                                | `250`               | Minimum column width in pixels.                  |
+| `animate`            | `boolean`                                                               | `true`              | Enable/disable animations.                       |
+| `transitionDuration` | `number`                                                                | `400`               | Animation duration in milliseconds.              |
+| `initialItems`       | `number`                                                                | `30`                | Number of items generated initially.             |
+| `classNames`         | `Partial<MasonrySnapGridLayoutClassNames>`                              | Default CSS classes | Override CSS class names for styling.            |
+| `itemContent`        | `string` \| `HTMLElement` \| `(index: number) => HTMLElement \| string` | `null`              | Content or content generator callback for items. |
 
 ---
 
-## 🎨 Styling
+## 🎨 Styling & Animations
 
-You can customize the styles by overriding the CSS classes defined or by providing your own CSS class names through `classNames` option.
+You can customize styles by overriding the CSS classes or providing your own via the `classNames` option.
+
+The layout uses smooth `transform` transitions with `cubic-bezier(0.4, 0, 0.2, 1)` easing for a polished, natural animation effect.
+
+---
+
+## 🔁 CI/CD
+
+This package uses **GitHub Actions** to automatically publish new versions to **npm** when you push a version tag like `v1.0.0`.
+
+To use it:
+
+```bash
+npm version patch
+git push origin main --tags
+```
+
+Make sure your `NPM_TOKEN` is saved in GitHub Secrets for automatic publishing.
+
+---
+
+## 📦 npm Package
+
+📌 [View on npm](https://www.npmjs.com/package/masonry-snap-grid-layout)
 
 ---
 
 ## 📄 License
 
-MIT © Aram Khachatryan
+MIT © [Aram Khachatryan](https://github.com/khachatryan-dev)
+
+---

package/dist/esm/index.css

@@ -0,0 +1,45 @@
+/* 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 {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  transition: height var(--transition-duration) ease-out;
+}
+.masonry-snap-grid-layout-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;
+  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;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -0,0 +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":[]}

package/dist/esm/index.js

@@ -1,21 +1,18 @@
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
-  container;
-  options;
-  classNames;
-  items = [];
-  positions = [];
-  columnHeights = [];
-  columns = 0;
-  lastPositions = [];
-  resizeRaf = null;
   /**
    * Constructor initializes the layout with container element and options
    * @param container HTMLElement container where masonry items are rendered
    * @param options configuration options for layout and styling
    */
-  constructor(container, options = {}) {
-    this.container = container;
+  constructor(container2, options = {}) {
+    this.items = [];
+    this.positions = [];
+    this.columnHeights = [];
+    this.columns = 0;
+    this.lastPositions = [];
+    this.resizeRaf = null;
+    this.container = container2;
     this.options = {
       gutter: 16,
       minColWidth: 250,
@@ -235,6 +232,31 @@ var MasonrySnapGridLayout = class {
 };
 
 // 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":["/**\r\n * MasonrySnapGridLayout\r\n * A performant masonry grid layout library with smooth animations,\r\n * customizable gutter, columns, and dynamic item content.\r\n *\r\n * Package name: masonry-snap-grid-layout\r\n */\r\n\r\nimport { 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    /**\r\n     * Constructor initializes the layout with container element and options\r\n     * @param container HTMLElement container where masonry items are rendered\r\n     * @param options configuration options for layout and styling\r\n     */\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n\r\n        // Set default options with overrides from user\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 30,\r\n            itemContent: null,\r\n            classNames: {\r\n                container: \"masonry-snap-grid-layout-container\",\r\n                item: \"masonry-snap-grid-layout-item\",\r\n                itemContent: \"item-content\",\r\n                itemHeader: \"item-header\",\r\n                itemTitle: \"item-title\",\r\n                itemId: \"item-id\",\r\n                itemBody: \"item-body\",\r\n                progressBar: \"progress-bar\",\r\n                progress: \"progress\",\r\n                itemFooter: \"item-footer\",\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Merge default classNames with user provided classNames\r\n        this.classNames = {\r\n            container: \"masonry-snap-grid-layout-container\",\r\n            item: \"masonry-snap-grid-layout-item\",\r\n            itemContent: \"item-content\",\r\n            itemHeader: \"item-header\",\r\n            itemTitle: \"item-title\",\r\n            itemId: \"item-id\",\r\n            itemBody: \"item-body\",\r\n            progressBar: \"progress-bar\",\r\n            progress: \"progress\",\r\n            itemFooter: \"item-footer\",\r\n            ...(this.options.classNames || {}),\r\n        };\r\n\r\n        // Add container class for styling\r\n        this.container.classList.add(this.classNames.container);\r\n\r\n        // Initialize the layout\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization: set listeners, generate initial items, layout\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    /**\r\n     * Setup event listeners for window resize and container resize observer\r\n     */\r\n    private setupEventListeners() {\r\n        // Use ResizeObserver to handle container size changes\r\n        const resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener(\"resize\", () => this.handleResize());\r\n    }\r\n\r\n    /**\r\n     * Generate specified number of items, removing excess if any\r\n     * @param count number of items to generate\r\n     */\r\n    private generateItems(count: number) {\r\n        // Remove extra items if reducing count\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    /**\r\n     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template\r\n     * @param index index of the item\r\n     * @returns HTMLElement for the item\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\r\n        // Determine content type: function, static HTMLElement, static string, or fallback to default\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === \"function\") {\r\n            // Call function with index to get content\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === \"string\") {\r\n            // Use static content\r\n            content = contentOption;\r\n        } else {\r\n            // Fallback to default item content template string\r\n            content = this.defaultItemContent(index);\r\n        }\r\n\r\n        // Insert content into item element\r\n        if (typeof content === \"string\") {\r\n            div.innerHTML = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Random height to simulate masonry effect\r\n        const height = 120 + Math.floor(Math.random() * 180);\r\n        div.style.height = `${height}px`;\r\n\r\n        // Color with HSL for distinct appearance\r\n        const hue = (index * 137.508) % 360; // golden angle\r\n        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;\r\n\r\n        return div;\r\n    }\r\n\r\n    /**\r\n     * Default item content template string\r\n     * @param index index of the item\r\n     * @returns string HTML template for item content\r\n     */\r\n    private defaultItemContent(index: number): string {\r\n        return `\r\n      <div class=\"${this.classNames.itemContent}\">\r\n        <div class=\"${this.classNames.itemHeader}\">\r\n          <div class=\"${this.classNames.itemTitle}\">Item ${index + 1}</div>\r\n          <div class=\"${this.classNames.itemId}\">#${index + 1}</div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemBody}\">\r\n          <div class=\"${this.classNames.progressBar}\">\r\n            <div class=\"${this.classNames.progress}\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemFooter}\">\r\n          ${this.getRandomEmoji()}\r\n        </div>\r\n      </div>\r\n    `;\r\n    }\r\n\r\n    /**\r\n     * Returns a random emoji from a fixed set for item footer\r\n     */\r\n    private getRandomEmoji(): string {\r\n        const emojis = [\"🚀\", \"✨\", \"🔥\", \"💡\", \"🌟\", \"🎯\", \"⚡\", \"💻\", \"🔧\", \"📊\"];\r\n        return emojis[Math.floor(Math.random() * emojis.length)];\r\n    }\r\n\r\n    /**\r\n     * Calculate positions of each item in masonry grid based on container width, gutter, min column width\r\n     */\r\n    private calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate number of columns that fit\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n\r\n        // Calculate each column width\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        // Store previous positions for animation\r\n        this.lastPositions = [...this.positions];\r\n\r\n        // Reset column heights array\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        // Calculate position for each item and assign column\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            // Find the shortest column index\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            // Calculate item's x,y position\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Save calculated position\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n\r\n            // Update column height to include this item + gutter\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height to max column height for proper scrolling\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    /**\r\n     * Apply calculated positions to each item with optional animation\r\n     * @param animate whether to animate layout changes (default false)\r\n     */\r\n    private 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            // Set item width for responsive columns\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                // Calculate differences for smooth animation\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                // Apply initial transform to old position (without transition)\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n\r\n                // Trigger reflow to apply the style immediately\r\n                void item.offsetHeight;\r\n\r\n                // Animate transform to new position\r\n                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                // Directly set transform without animation\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    /**\r\n     * Handle container resize using RAF to optimize performance\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    /**\r\n     * Shuffle items randomly and reapply layout with animation\r\n     */\r\n    public shuffleItems() {\r\n        // Fisher-Yates shuffle algorithm\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        // Re-append items in new order in DOM\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        // Update layout positions and animate\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    /**\r\n     * Add more items dynamically\r\n     * @param count number of items to add\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","import MasonrySnapGridLayout from './MasonrySnapGridLayout';\nexport default MasonrySnapGridLayout;\nexport { MasonrySnapGridLayout };"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["/**\r\n * MasonrySnapGridLayout\r\n * A performant masonry grid layout library with smooth animations,\r\n * customizable gutter, columns, and dynamic item content.\r\n *\r\n * Package name: masonry-snap-grid-layout\r\n */\r\n\r\nimport { 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    /**\r\n     * Constructor initializes the layout with container element and options\r\n     * @param container HTMLElement container where masonry items are rendered\r\n     * @param options configuration options for layout and styling\r\n     */\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n\r\n        // Set default options with overrides from user\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 30,\r\n            itemContent: null,\r\n            classNames: {\r\n                container: \"masonry-snap-grid-layout-container\",\r\n                item: \"masonry-snap-grid-layout-item\",\r\n                itemContent: \"item-content\",\r\n                itemHeader: \"item-header\",\r\n                itemTitle: \"item-title\",\r\n                itemId: \"item-id\",\r\n                itemBody: \"item-body\",\r\n                progressBar: \"progress-bar\",\r\n                progress: \"progress\",\r\n                itemFooter: \"item-footer\",\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Merge default classNames with user provided classNames\r\n        this.classNames = {\r\n            container: \"masonry-snap-grid-layout-container\",\r\n            item: \"masonry-snap-grid-layout-item\",\r\n            itemContent: \"item-content\",\r\n            itemHeader: \"item-header\",\r\n            itemTitle: \"item-title\",\r\n            itemId: \"item-id\",\r\n            itemBody: \"item-body\",\r\n            progressBar: \"progress-bar\",\r\n            progress: \"progress\",\r\n            itemFooter: \"item-footer\",\r\n            ...(this.options.classNames || {}),\r\n        };\r\n\r\n        // Add container class for styling\r\n        this.container.classList.add(this.classNames.container);\r\n\r\n        // Initialize the layout\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization: set listeners, generate initial items, layout\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    /**\r\n     * Setup event listeners for window resize and container resize observer\r\n     */\r\n    private setupEventListeners() {\r\n        // Use ResizeObserver to handle container size changes\r\n        const resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener(\"resize\", () => this.handleResize());\r\n    }\r\n\r\n    /**\r\n     * Generate specified number of items, removing excess if any\r\n     * @param count number of items to generate\r\n     */\r\n    private generateItems(count: number) {\r\n        // Remove extra items if reducing count\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    /**\r\n     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template\r\n     * @param index index of the item\r\n     * @returns HTMLElement for the item\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\r\n        // Determine content type: function, static HTMLElement, static string, or fallback to default\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === \"function\") {\r\n            // Call function with index to get content\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === \"string\") {\r\n            // Use static content\r\n            content = contentOption;\r\n        } else {\r\n            // Fallback to default item content template string\r\n            content = this.defaultItemContent(index);\r\n        }\r\n\r\n        // Insert content into item element\r\n        if (typeof content === \"string\") {\r\n            div.innerHTML = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Random height to simulate masonry effect\r\n        const height = 120 + Math.floor(Math.random() * 180);\r\n        div.style.height = `${height}px`;\r\n\r\n        // Color with HSL for distinct appearance\r\n        const hue = (index * 137.508) % 360; // golden angle\r\n        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;\r\n\r\n        return div;\r\n    }\r\n\r\n    /**\r\n     * Default item content template string\r\n     * @param index index of the item\r\n     * @returns string HTML template for item content\r\n     */\r\n    private defaultItemContent(index: number): string {\r\n        return `\r\n      <div class=\"${this.classNames.itemContent}\">\r\n        <div class=\"${this.classNames.itemHeader}\">\r\n          <div class=\"${this.classNames.itemTitle}\">Item ${index + 1}</div>\r\n          <div class=\"${this.classNames.itemId}\">#${index + 1}</div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemBody}\">\r\n          <div class=\"${this.classNames.progressBar}\">\r\n            <div class=\"${this.classNames.progress}\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemFooter}\">\r\n          ${this.getRandomEmoji()}\r\n        </div>\r\n      </div>\r\n    `;\r\n    }\r\n\r\n    /**\r\n     * Returns a random emoji from a fixed set for item footer\r\n     */\r\n    private getRandomEmoji(): string {\r\n        const emojis = [\"🚀\", \"✨\", \"🔥\", \"💡\", \"🌟\", \"🎯\", \"⚡\", \"💻\", \"🔧\", \"📊\"];\r\n        return emojis[Math.floor(Math.random() * emojis.length)];\r\n    }\r\n\r\n    /**\r\n     * Calculate positions of each item in masonry grid based on container width, gutter, min column width\r\n     */\r\n    private calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate number of columns that fit\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n\r\n        // Calculate each column width\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        // Store previous positions for animation\r\n        this.lastPositions = [...this.positions];\r\n\r\n        // Reset column heights array\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        // Calculate position for each item and assign column\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            // Find the shortest column index\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            // Calculate item's x,y position\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Save calculated position\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n\r\n            // Update column height to include this item + gutter\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height to max column height for proper scrolling\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    /**\r\n     * Apply calculated positions to each item with optional animation\r\n     * @param animate whether to animate layout changes (default false)\r\n     */\r\n    private 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            // Set item width for responsive columns\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                // Calculate differences for smooth animation\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                // Apply initial transform to old position (without transition)\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n\r\n                // Trigger reflow to apply the style immediately\r\n                void item.offsetHeight;\r\n\r\n                // Animate transform to new position\r\n                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                // Directly set transform without animation\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    /**\r\n     * Handle container resize using RAF to optimize performance\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    /**\r\n     * Shuffle items randomly and reapply layout with animation\r\n     */\r\n    public shuffleItems() {\r\n        // Fisher-Yates shuffle algorithm\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        // Re-append items in new order in DOM\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        // Update layout positions and animate\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    /**\r\n     * Add more items dynamically\r\n     * @param count number of items to add\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","import './masonry-snap-grid-layout.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\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 };"],"mappings":"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","names":["container"]}

package/dist/index.css

@@ -0,0 +1,45 @@
+/* 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 {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  transition: height var(--transition-duration) ease-out;
+}
+.masonry-snap-grid-layout-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;
+  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;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +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":[]}

package/dist/index.js

@@ -27,22 +27,19 @@ module.exports = __toCommonJS(index_exports);
 
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
-  container;
-  options;
-  classNames;
-  items = [];
-  positions = [];
-  columnHeights = [];
-  columns = 0;
-  lastPositions = [];
-  resizeRaf = null;
   /**
    * Constructor initializes the layout with container element and options
    * @param container HTMLElement container where masonry items are rendered
    * @param options configuration options for layout and styling
    */
-  constructor(container, options = {}) {
-    this.container = container;
+  constructor(container2, options = {}) {
+    this.items = [];
+    this.positions = [];
+    this.columnHeights = [];
+    this.columns = 0;
+    this.lastPositions = [];
+    this.resizeRaf = null;
+    this.container = container2;
     this.options = {
       gutter: 16,
       minColWidth: 250,
@@ -262,6 +259,31 @@ var MasonrySnapGridLayout = class {
 };
 
 // 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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import MasonrySnapGridLayout from './MasonrySnapGridLayout';\nexport default MasonrySnapGridLayout;\nexport { MasonrySnapGridLayout };","/**\r\n * MasonrySnapGridLayout\r\n * A performant masonry grid layout library with smooth animations,\r\n * customizable gutter, columns, and dynamic item content.\r\n *\r\n * Package name: masonry-snap-grid-layout\r\n */\r\n\r\nimport { 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    /**\r\n     * Constructor initializes the layout with container element and options\r\n     * @param container HTMLElement container where masonry items are rendered\r\n     * @param options configuration options for layout and styling\r\n     */\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n\r\n        // Set default options with overrides from user\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 30,\r\n            itemContent: null,\r\n            classNames: {\r\n                container: \"masonry-snap-grid-layout-container\",\r\n                item: \"masonry-snap-grid-layout-item\",\r\n                itemContent: \"item-content\",\r\n                itemHeader: \"item-header\",\r\n                itemTitle: \"item-title\",\r\n                itemId: \"item-id\",\r\n                itemBody: \"item-body\",\r\n                progressBar: \"progress-bar\",\r\n                progress: \"progress\",\r\n                itemFooter: \"item-footer\",\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Merge default classNames with user provided classNames\r\n        this.classNames = {\r\n            container: \"masonry-snap-grid-layout-container\",\r\n            item: \"masonry-snap-grid-layout-item\",\r\n            itemContent: \"item-content\",\r\n            itemHeader: \"item-header\",\r\n            itemTitle: \"item-title\",\r\n            itemId: \"item-id\",\r\n            itemBody: \"item-body\",\r\n            progressBar: \"progress-bar\",\r\n            progress: \"progress\",\r\n            itemFooter: \"item-footer\",\r\n            ...(this.options.classNames || {}),\r\n        };\r\n\r\n        // Add container class for styling\r\n        this.container.classList.add(this.classNames.container);\r\n\r\n        // Initialize the layout\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization: set listeners, generate initial items, layout\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    /**\r\n     * Setup event listeners for window resize and container resize observer\r\n     */\r\n    private setupEventListeners() {\r\n        // Use ResizeObserver to handle container size changes\r\n        const resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener(\"resize\", () => this.handleResize());\r\n    }\r\n\r\n    /**\r\n     * Generate specified number of items, removing excess if any\r\n     * @param count number of items to generate\r\n     */\r\n    private generateItems(count: number) {\r\n        // Remove extra items if reducing count\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    /**\r\n     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template\r\n     * @param index index of the item\r\n     * @returns HTMLElement for the item\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\r\n        // Determine content type: function, static HTMLElement, static string, or fallback to default\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === \"function\") {\r\n            // Call function with index to get content\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === \"string\") {\r\n            // Use static content\r\n            content = contentOption;\r\n        } else {\r\n            // Fallback to default item content template string\r\n            content = this.defaultItemContent(index);\r\n        }\r\n\r\n        // Insert content into item element\r\n        if (typeof content === \"string\") {\r\n            div.innerHTML = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Random height to simulate masonry effect\r\n        const height = 120 + Math.floor(Math.random() * 180);\r\n        div.style.height = `${height}px`;\r\n\r\n        // Color with HSL for distinct appearance\r\n        const hue = (index * 137.508) % 360; // golden angle\r\n        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;\r\n\r\n        return div;\r\n    }\r\n\r\n    /**\r\n     * Default item content template string\r\n     * @param index index of the item\r\n     * @returns string HTML template for item content\r\n     */\r\n    private defaultItemContent(index: number): string {\r\n        return `\r\n      <div class=\"${this.classNames.itemContent}\">\r\n        <div class=\"${this.classNames.itemHeader}\">\r\n          <div class=\"${this.classNames.itemTitle}\">Item ${index + 1}</div>\r\n          <div class=\"${this.classNames.itemId}\">#${index + 1}</div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemBody}\">\r\n          <div class=\"${this.classNames.progressBar}\">\r\n            <div class=\"${this.classNames.progress}\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemFooter}\">\r\n          ${this.getRandomEmoji()}\r\n        </div>\r\n      </div>\r\n    `;\r\n    }\r\n\r\n    /**\r\n     * Returns a random emoji from a fixed set for item footer\r\n     */\r\n    private getRandomEmoji(): string {\r\n        const emojis = [\"🚀\", \"✨\", \"🔥\", \"💡\", \"🌟\", \"🎯\", \"⚡\", \"💻\", \"🔧\", \"📊\"];\r\n        return emojis[Math.floor(Math.random() * emojis.length)];\r\n    }\r\n\r\n    /**\r\n     * Calculate positions of each item in masonry grid based on container width, gutter, min column width\r\n     */\r\n    private calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate number of columns that fit\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n\r\n        // Calculate each column width\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        // Store previous positions for animation\r\n        this.lastPositions = [...this.positions];\r\n\r\n        // Reset column heights array\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        // Calculate position for each item and assign column\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            // Find the shortest column index\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            // Calculate item's x,y position\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Save calculated position\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n\r\n            // Update column height to include this item + gutter\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height to max column height for proper scrolling\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    /**\r\n     * Apply calculated positions to each item with optional animation\r\n     * @param animate whether to animate layout changes (default false)\r\n     */\r\n    private 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            // Set item width for responsive columns\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                // Calculate differences for smooth animation\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                // Apply initial transform to old position (without transition)\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n\r\n                // Trigger reflow to apply the style immediately\r\n                void item.offsetHeight;\r\n\r\n                // Animate transform to new position\r\n                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                // Directly set transform without animation\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    /**\r\n     * Handle container resize using RAF to optimize performance\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    /**\r\n     * Shuffle items randomly and reapply layout with animation\r\n     */\r\n    public shuffleItems() {\r\n        // Fisher-Yates shuffle algorithm\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        // Re-append items in new order in DOM\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        // Update layout positions and animate\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    /**\r\n     * Add more items dynamically\r\n     * @param count number of items to add\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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import './masonry-snap-grid-layout.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\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 };","/**\r\n * MasonrySnapGridLayout\r\n * A performant masonry grid layout library with smooth animations,\r\n * customizable gutter, columns, and dynamic item content.\r\n *\r\n * Package name: masonry-snap-grid-layout\r\n */\r\n\r\nimport { 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    /**\r\n     * Constructor initializes the layout with container element and options\r\n     * @param container HTMLElement container where masonry items are rendered\r\n     * @param options configuration options for layout and styling\r\n     */\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n\r\n        // Set default options with overrides from user\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 30,\r\n            itemContent: null,\r\n            classNames: {\r\n                container: \"masonry-snap-grid-layout-container\",\r\n                item: \"masonry-snap-grid-layout-item\",\r\n                itemContent: \"item-content\",\r\n                itemHeader: \"item-header\",\r\n                itemTitle: \"item-title\",\r\n                itemId: \"item-id\",\r\n                itemBody: \"item-body\",\r\n                progressBar: \"progress-bar\",\r\n                progress: \"progress\",\r\n                itemFooter: \"item-footer\",\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Merge default classNames with user provided classNames\r\n        this.classNames = {\r\n            container: \"masonry-snap-grid-layout-container\",\r\n            item: \"masonry-snap-grid-layout-item\",\r\n            itemContent: \"item-content\",\r\n            itemHeader: \"item-header\",\r\n            itemTitle: \"item-title\",\r\n            itemId: \"item-id\",\r\n            itemBody: \"item-body\",\r\n            progressBar: \"progress-bar\",\r\n            progress: \"progress\",\r\n            itemFooter: \"item-footer\",\r\n            ...(this.options.classNames || {}),\r\n        };\r\n\r\n        // Add container class for styling\r\n        this.container.classList.add(this.classNames.container);\r\n\r\n        // Initialize the layout\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization: set listeners, generate initial items, layout\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    /**\r\n     * Setup event listeners for window resize and container resize observer\r\n     */\r\n    private setupEventListeners() {\r\n        // Use ResizeObserver to handle container size changes\r\n        const resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener(\"resize\", () => this.handleResize());\r\n    }\r\n\r\n    /**\r\n     * Generate specified number of items, removing excess if any\r\n     * @param count number of items to generate\r\n     */\r\n    private generateItems(count: number) {\r\n        // Remove extra items if reducing count\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    /**\r\n     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template\r\n     * @param index index of the item\r\n     * @returns HTMLElement for the item\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\r\n        // Determine content type: function, static HTMLElement, static string, or fallback to default\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === \"function\") {\r\n            // Call function with index to get content\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === \"string\") {\r\n            // Use static content\r\n            content = contentOption;\r\n        } else {\r\n            // Fallback to default item content template string\r\n            content = this.defaultItemContent(index);\r\n        }\r\n\r\n        // Insert content into item element\r\n        if (typeof content === \"string\") {\r\n            div.innerHTML = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Random height to simulate masonry effect\r\n        const height = 120 + Math.floor(Math.random() * 180);\r\n        div.style.height = `${height}px`;\r\n\r\n        // Color with HSL for distinct appearance\r\n        const hue = (index * 137.508) % 360; // golden angle\r\n        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;\r\n\r\n        return div;\r\n    }\r\n\r\n    /**\r\n     * Default item content template string\r\n     * @param index index of the item\r\n     * @returns string HTML template for item content\r\n     */\r\n    private defaultItemContent(index: number): string {\r\n        return `\r\n      <div class=\"${this.classNames.itemContent}\">\r\n        <div class=\"${this.classNames.itemHeader}\">\r\n          <div class=\"${this.classNames.itemTitle}\">Item ${index + 1}</div>\r\n          <div class=\"${this.classNames.itemId}\">#${index + 1}</div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemBody}\">\r\n          <div class=\"${this.classNames.progressBar}\">\r\n            <div class=\"${this.classNames.progress}\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemFooter}\">\r\n          ${this.getRandomEmoji()}\r\n        </div>\r\n      </div>\r\n    `;\r\n    }\r\n\r\n    /**\r\n     * Returns a random emoji from a fixed set for item footer\r\n     */\r\n    private getRandomEmoji(): string {\r\n        const emojis = [\"🚀\", \"✨\", \"🔥\", \"💡\", \"🌟\", \"🎯\", \"⚡\", \"💻\", \"🔧\", \"📊\"];\r\n        return emojis[Math.floor(Math.random() * emojis.length)];\r\n    }\r\n\r\n    /**\r\n     * Calculate positions of each item in masonry grid based on container width, gutter, min column width\r\n     */\r\n    private calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate number of columns that fit\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n\r\n        // Calculate each column width\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        // Store previous positions for animation\r\n        this.lastPositions = [...this.positions];\r\n\r\n        // Reset column heights array\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        // Calculate position for each item and assign column\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            // Find the shortest column index\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            // Calculate item's x,y position\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Save calculated position\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n\r\n            // Update column height to include this item + gutter\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height to max column height for proper scrolling\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    /**\r\n     * Apply calculated positions to each item with optional animation\r\n     * @param animate whether to animate layout changes (default false)\r\n     */\r\n    private 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            // Set item width for responsive columns\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                // Calculate differences for smooth animation\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                // Apply initial transform to old position (without transition)\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n\r\n                // Trigger reflow to apply the style immediately\r\n                void item.offsetHeight;\r\n\r\n                // Animate transform to new position\r\n                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                // Directly set transform without animation\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    /**\r\n     * Handle container resize using RAF to optimize performance\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    /**\r\n     * Shuffle items randomly and reapply layout with animation\r\n     */\r\n    public shuffleItems() {\r\n        // Fisher-Yates shuffle algorithm\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        // Re-append items in new order in DOM\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        // Update layout positions and animate\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    /**\r\n     * Add more items dynamically\r\n     * @param count number of items to add\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"],"mappings":"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","names":["container"]}

package/package.json

@@ -1,28 +1,71 @@
-{
-  "name": "masonry-snap-grid-layout",
-  "version": "0.0.2",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs"
-      }
-    }
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --dts --format esm,cjs --legacy-output",
-    "dev": "tsup src/index.ts --watch --dts --format esm,cjs --legacy-output"
-  },
-  "devDependencies": {
-    "tsup": "8.3.5",
-    "typescript": "^5.0.0"
-  }
-}
+{
+  "name": "masonry-snap-grid-layout",
+  "version": "0.0.4",
+  "description": "A performant, responsive masonry layout library with smooth animations, dynamic columns, and zero dependencies.",
+  "keywords": [
+    "masonry",
+    "grid",
+    "layout",
+    "responsive",
+    "typescript",
+    "animation",
+    "vanilla-js",
+    "masonry-layout"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/reactjs.tsx --dts --format esm,cjs --legacy-output",
+    "dev": "tsup src/index.ts src/reactjs.tsx --watch --dts --format esm,cjs --legacy-output"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/khachatryan-dev/masonry-snap-grid-layout.git"
+  },
+  "homepage": "https://github.com/khachatryan-dev/masonry-snap-grid-layout#readme",
+  "bugs": {
+    "url": "https://github.com/khachatryan-dev/masonry-snap-grid-layout/issues"
+  },
+  "author": "Aram Khachatryan <arkhachat@gmail.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "tsup": "8.3.5",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "react": "^19.1.1"
+  }
+}

package/.idea/masonry-snap-grid-layout.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/masonry-snap-grid-layout.iml" filepath="$PROJECT_DIR$/.idea/masonry-snap-grid-layout.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/src/MasonrySnapGridLayout.ts

@@ -1,322 +0,0 @@
-/**
- * MasonrySnapGridLayout
- * A performant masonry grid layout library with smooth animations,
- * customizable gutter, columns, and dynamic item content.
- *
- * Package name: masonry-snap-grid-layout
- */
-
-import { MasonrySnapGridLayoutClassNames, MasonrySnapGridLayoutOptions } from "./types";
-
-export default class MasonrySnapGridLayout {
-    private readonly container: HTMLElement;
-    private readonly options: Required<MasonrySnapGridLayoutOptions>;
-    private classNames: Required<MasonrySnapGridLayoutClassNames>;
-
-    private items: HTMLElement[] = [];
-    private positions: { x: number; y: number; width: number; height: number }[] = [];
-    private columnHeights: number[] = [];
-    private columns: number = 0;
-    private lastPositions: typeof this.positions = [];
-    private resizeRaf: number | null = null;
-
-    /**
-     * Constructor initializes the layout with container element and options
-     * @param container HTMLElement container where masonry items are rendered
-     * @param options configuration options for layout and styling
-     */
-    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {
-        this.container = container;
-
-        // Set default options with overrides from user
-        this.options = {
-            gutter: 16,
-            minColWidth: 250,
-            animate: true,
-            transitionDuration: 400,
-            initialItems: 30,
-            itemContent: null,
-            classNames: {
-                container: "masonry-snap-grid-layout-container",
-                item: "masonry-snap-grid-layout-item",
-                itemContent: "item-content",
-                itemHeader: "item-header",
-                itemTitle: "item-title",
-                itemId: "item-id",
-                itemBody: "item-body",
-                progressBar: "progress-bar",
-                progress: "progress",
-                itemFooter: "item-footer",
-            },
-            ...options,
-        };
-
-        // Merge default classNames with user provided classNames
-        this.classNames = {
-            container: "masonry-snap-grid-layout-container",
-            item: "masonry-snap-grid-layout-item",
-            itemContent: "item-content",
-            itemHeader: "item-header",
-            itemTitle: "item-title",
-            itemId: "item-id",
-            itemBody: "item-body",
-            progressBar: "progress-bar",
-            progress: "progress",
-            itemFooter: "item-footer",
-            ...(this.options.classNames || {}),
-        };
-
-        // Add container class for styling
-        this.container.classList.add(this.classNames.container);
-
-        // Initialize the layout
-        this.init();
-    }
-
-    /**
-     * Initialization: set listeners, generate initial items, layout
-     */
-    private init() {
-        this.setupEventListeners();
-        this.generateItems(this.options.initialItems);
-        this.calculateLayout();
-        this.applyLayout(false);
-    }
-
-    /**
-     * Setup event listeners for window resize and container resize observer
-     */
-    private setupEventListeners() {
-        // Use ResizeObserver to handle container size changes
-        const resizeObserver = new ResizeObserver(() => this.handleResize());
-        resizeObserver.observe(this.container);
-
-        window.addEventListener("resize", () => this.handleResize());
-    }
-
-    /**
-     * Generate specified number of items, removing excess if any
-     * @param count number of items to generate
-     */
-    private generateItems(count: number) {
-        // Remove extra items if reducing 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;
-        const fragment = document.createDocumentFragment();
-
-        for (let i = startIndex; i < count; i++) {
-            const item = this.createItem(i);
-            fragment.appendChild(item);
-            this.items.push(item);
-        }
-
-        this.container.appendChild(fragment);
-    }
-
-    /**
-     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template
-     * @param index index of the item
-     * @returns HTMLElement for the item
-     */
-    private createItem(index: number): HTMLElement {
-        const div = document.createElement("div");
-        div.className = this.classNames.item;
-
-        const contentOption = this.options.itemContent;
-
-        // Determine content type: function, static HTMLElement, static string, or fallback to default
-        let content: HTMLElement | string;
-
-        if (typeof contentOption === "function") {
-            // Call function with index to get content
-            content = contentOption(index);
-        } else if (contentOption instanceof HTMLElement || typeof contentOption === "string") {
-            // Use static content
-            content = contentOption;
-        } else {
-            // Fallback to default item content template string
-            content = this.defaultItemContent(index);
-        }
-
-        // Insert content into item element
-        if (typeof content === "string") {
-            div.innerHTML = content;
-        } else {
-            div.appendChild(content);
-        }
-
-        // Random height to simulate masonry effect
-        const height = 120 + Math.floor(Math.random() * 180);
-        div.style.height = `${height}px`;
-
-        // Color with HSL for distinct appearance
-        const hue = (index * 137.508) % 360; // golden angle
-        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;
-
-        return div;
-    }
-
-    /**
-     * Default item content template string
-     * @param index index of the item
-     * @returns string HTML template for item content
-     */
-    private defaultItemContent(index: number): string {
-        return `
-      <div class="${this.classNames.itemContent}">
-        <div class="${this.classNames.itemHeader}">
-          <div class="${this.classNames.itemTitle}">Item ${index + 1}</div>
-          <div class="${this.classNames.itemId}">#${index + 1}</div>
-        </div>
-        <div class="${this.classNames.itemBody}">
-          <div class="${this.classNames.progressBar}">
-            <div class="${this.classNames.progress}"></div>
-          </div>
-        </div>
-        <div class="${this.classNames.itemFooter}">
-          ${this.getRandomEmoji()}
-        </div>
-      </div>
-    `;
-    }
-
-    /**
-     * Returns a random emoji from a fixed set for item footer
-     */
-    private getRandomEmoji(): string {
-        const emojis = ["🚀", "✨", "🔥", "💡", "🌟", "🎯", "⚡", "💻", "🔧", "📊"];
-        return emojis[Math.floor(Math.random() * emojis.length)];
-    }
-
-    /**
-     * Calculate positions of each item in masonry grid based on container width, gutter, min column width
-     */
-    private calculateLayout() {
-        const { gutter, minColWidth } = this.options;
-        const containerWidth = this.container.clientWidth;
-
-        // Calculate number of columns that fit
-        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
-
-        // Calculate each column width
-        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;
-
-        // Store previous positions for animation
-        this.lastPositions = [...this.positions];
-
-        // Reset column heights array
-        this.columnHeights = new Array(this.columns).fill(0);
-        this.positions = [];
-
-        // Calculate position for each item and assign column
-        this.items.forEach((item, i) => {
-            const height = item.offsetHeight;
-
-            // Find the shortest column index
-            let minCol = 0;
-            for (let c = 1; c < this.columns; c++) {
-                if (this.columnHeights[c] < this.columnHeights[minCol]) {
-                    minCol = c;
-                }
-            }
-
-            // Calculate item's x,y position
-            const x = minCol * (colWidth + gutter);
-            const y = this.columnHeights[minCol];
-
-            // Save calculated position
-            this.positions[i] = { x, y, width: colWidth, height };
-
-            // Update column height to include this item + gutter
-            this.columnHeights[minCol] += height + gutter;
-        });
-
-        // Set container height to max column height for proper scrolling
-        const maxHeight = Math.max(...this.columnHeights);
-        this.container.style.height = `${maxHeight}px`;
-    }
-
-    /**
-     * Apply calculated positions to each item with optional animation
-     * @param animate whether to animate layout changes (default false)
-     */
-    private applyLayout(animate: boolean = 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 };
-
-            // Set item width for responsive columns
-            item.style.width = `${pos.width}px`;
-
-            if (animate) {
-                // Calculate differences for smooth animation
-                const dx = lastPos.x - pos.x;
-                const dy = lastPos.y - pos.y;
-
-                // Apply initial transform to old position (without transition)
-                item.style.transition = "none";
-                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;
-
-                // Trigger reflow to apply the style immediately
-                void item.offsetHeight;
-
-                // Animate transform to new position
-                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
-                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
-            } else {
-                // Directly set transform without animation
-                item.style.transition = "none";
-                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
-            }
-        });
-    }
-
-    /**
-     * Handle container resize using RAF to optimize performance
-     */
-    private handleResize() {
-        if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);
-        this.resizeRaf = requestAnimationFrame(() => {
-            this.calculateLayout();
-            this.applyLayout(true);
-        });
-    }
-
-    /**
-     * Shuffle items randomly and reapply layout with animation
-     */
-    public shuffleItems() {
-        // Fisher-Yates shuffle algorithm
-        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]];
-        }
-
-        // Re-append items in new order in DOM
-        const fragment = document.createDocumentFragment();
-        this.items.forEach((item) => fragment.appendChild(item));
-        this.container.appendChild(fragment);
-
-        // Update layout positions and animate
-        this.calculateLayout();
-        this.applyLayout(true);
-    }
-
-    /**
-     * Add more items dynamically
-     * @param count number of items to add
-     */
-    public addItems(count: number) {
-        const newCount = this.items.length + count;
-        this.generateItems(newCount);
-        this.calculateLayout();
-        this.applyLayout(true);
-    }
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-import MasonrySnapGridLayout from './MasonrySnapGridLayout';
-export default MasonrySnapGridLayout;
-export { MasonrySnapGridLayout };

package/src/masonry-snap-grid-layout.css

@@ -1,75 +0,0 @@
-/*
-  Masonry Snap Grid Layout Styles
-
-  CSS variables for easy customization:
-  --gutter: spacing between items
-  --columns: number of columns (calculated dynamically)
-  --min-col-width: minimum width of columns
-  --transition-duration: animation timing
-  --primary-color, --secondary-color: gradient colors for items
-  --text-color: color for text inside items
-  --shadow-color: shadow color for item depth
-  --item-radius: border-radius for rounded corners
-*/
-
-/* Root CSS variables for theming */
-: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;
-}
-
-/* Container for masonry grid — relative positioning for absolute item placement */
-.masonry-snap-grid-layout-container {
-    position: relative;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    transition: height var(--transition-duration) ease-out;
-}
-
-/* Each item absolutely positioned within container */
-.masonry-snap-grid-layout-item {
-    position: absolute;
-    color: var(--text-color);
-    border-radius: var(--item-radius);
-    padding: 16px;
-    font-size: 1rem;
-    box-shadow: 0 6px 12px var(--shadow-color);
-    user-select: none;
-    cursor: grab;
-    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;
-}
-
-/* Hover state for better UX */
-.masonry-snap-grid-layout-item:hover {
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-    transform: translateY(-2px);
-}
-
-/* Active / grabbing state */
-.masonry-snap-grid-layout-item:active {
-    cursor: grabbing;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-    z-index: 10;
-}
-
-/* Dragging style */
-.masonry-snap-grid-layout-item.dragging {
-    z-index: 1000;
-    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
-    opacity: 0.9;
-    transition: none;
-}

package/src/types.ts

@@ -1,51 +0,0 @@
-/**
- * MasonrySnapGridLayoutClassNames
- * Optional CSS class names to override default styling selectors.
- * Enables user to customize CSS classes easily.
- */
-export interface MasonrySnapGridLayoutClassNames {
-    container?: string;    // Class for masonry container wrapper
-    item?: string;         // Class for each masonry item
-    itemContent?: string;  // Wrapper for content inside each item
-    itemHeader?: string;   // Header section inside an item
-    itemTitle?: string;    // Title text inside header
-    itemId?: string;       // ID label inside header
-    itemBody?: string;     // Main content/body of item
-    progressBar?: string;  // Progress bar container
-    progress?: string;     // Actual progress bar fill
-    itemFooter?: string;   // Footer section inside item
-}
-
-/**
- * MasonrySnapGridLayoutOptions
- * Configuration options accepted by MasonrySnapGridLayout.
- */
-export interface MasonrySnapGridLayoutOptions {
-    /** Spacing between items in pixels (default: 16) */
-    gutter?: number;
-
-    /** Minimum width for each column in pixels (default: 250) */
-    minColWidth?: number;
-
-    /** Enable or disable animations (default: true) */
-    animate?: boolean;
-
-    /** Duration of animation transitions in milliseconds (default: 400) */
-    transitionDuration?: number;
-
-    /** Initial number of items to generate on init (default: 30) */
-    initialItems?: number;
-
-    /**
-     * Optional class names object to override default CSS class names
-     */
-    classNames?: MasonrySnapGridLayoutClassNames;
-
-    /**
-     * Item content can be:
-     * - a callback function that receives the item index and returns an HTMLElement or string (HTML markup),
-     * - a static HTMLElement or string (HTML markup) for all items,
-     * - or null to use the default template.
-     */
-    itemContent?: ((index: number) => HTMLElement | string) | HTMLElement | string | null;
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "declaration": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true
-  },
-  "include": ["src/**/*"]
-}

package/tsup.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-    entry: ['src/index.ts'],
-    format: ['esm', 'cjs'],
-    dts: true,
-    clean: true,
-    legacyOutput: true, // Important for proper default exports
-    target: 'esnext',
-    splitting: false,
-    sourcemap: true,
-    esbuildOptions(options) {
-        options.tsconfig = './tsconfig.json';
-    }
-});