masonry-snap-grid-layout 1.0.3 → 1.0.4

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.cts

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

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.ts

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

package/dist/esm/index.css

@@ -0,0 +1,17 @@
+/* src/index.css */
+.masonry-snap-grid-container {
+  position: relative;
+  width: 100%;
+  transition: height 0.4s ease-out;
+  overflow: hidden;
+}
+.masonry-snap-grid-item {
+  position: absolute;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  box-sizing: border-box;
+  transform-origin: top left;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.css"],"sourcesContent":[".masonry-snap-grid-container {\r\n    position: relative;\r\n    width: 100%;\r\n    transition: height 0.4s ease-out;\r\n    overflow: hidden;\r\n}\r\n\r\n.masonry-snap-grid-item {\r\n    position: absolute;\r\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    will-change: transform;\r\n    box-sizing: border-box;\r\n    transform-origin: top left;\r\n    backface-visibility: hidden;\r\n    perspective: 1000px;\r\n}"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}

package/dist/esm/index.js

@@ -0,0 +1,84 @@
+// src/MasonrySnapGridLayout.ts
+var MasonrySnapGridLayout = class {
+  constructor(container, options) {
+    this.items = [];
+    this.columnHeights = [];
+    this.rafId = null;
+    this.container = container;
+    this.options = {
+      gutter: 16,
+      minColWidth: 250,
+      animate: true,
+      transitionDuration: 400,
+      classNames: {
+        container: "masonry-snap-grid-container",
+        item: "masonry-snap-grid-item"
+      },
+      ...options
+    };
+    this.container.classList.add(this.options.classNames.container || "");
+    this.renderItems();
+    this.setupResizeObserver();
+  }
+  renderItems() {
+    this.items.forEach((item) => item.remove());
+    this.items = [];
+    const fragment = document.createDocumentFragment();
+    this.options.items.forEach((itemData) => {
+      const itemElement = this.options.renderItem(itemData);
+      itemElement.classList.add(this.options.classNames.item || "");
+      fragment.appendChild(itemElement);
+      this.items.push(itemElement);
+    });
+    this.container.appendChild(fragment);
+    this.updateLayout();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => this.updateLayout());
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  updateLayout() {
+    const { gutter, minColWidth, animate, transitionDuration } = this.options;
+    const containerWidth = this.container.clientWidth;
+    const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
+    const colWidth = (containerWidth - (columns - 1) * gutter) / columns;
+    this.columnHeights = new Array(columns).fill(0);
+    this.items.forEach((item) => {
+      const height = item.offsetHeight;
+      const minCol = this.findShortestColumn();
+      const x = minCol * (colWidth + gutter);
+      const y = this.columnHeights[minCol];
+      item.style.width = `${colWidth}px`;
+      item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      item.style.transition = animate ? `transform ${transitionDuration}ms ease` : "none";
+      this.columnHeights[minCol] += height + gutter;
+    });
+    const maxHeight = Math.max(...this.columnHeights);
+    this.container.style.height = `${maxHeight}px`;
+  }
+  findShortestColumn() {
+    return this.columnHeights.indexOf(Math.min(...this.columnHeights));
+  }
+  updateItems(newItems) {
+    this.options.items = newItems;
+    this.renderItems();
+  }
+  destroy() {
+    this.resizeObserver?.disconnect();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.container.innerHTML = "";
+    this.container.removeAttribute("style");
+    this.container.classList.remove(this.options.classNames.container || "");
+  }
+};
+
+// src/index.ts
+var index_default = MasonrySnapGridLayout;
+export {
+  MasonrySnapGridLayout,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout<T = any> {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\r\n    private items: HTMLElement[] = [];\r\n    private columnHeights: number[] = [];\r\n    private resizeObserver: ResizeObserver | undefined;\r\n    private rafId: number | null = null;\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\r\n        this.container = container;\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            classNames: {\r\n                container: 'masonry-snap-grid-container',\r\n                item: 'masonry-snap-grid-item',\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Apply container class\r\n        this.container.classList.add(this.options.classNames.container || \"\");\r\n\r\n        // Initialize\r\n        this.renderItems();\r\n        this.setupResizeObserver();\r\n    }\r\n\r\n    private renderItems() {\r\n        // Clear existing items\r\n        this.items.forEach(item => item.remove());\r\n        this.items = [];\r\n\r\n        // Create fragment for batch DOM insertion\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        // Create and append items\r\n        this.options.items.forEach(itemData => {\r\n            const itemElement = this.options.renderItem(itemData);\r\n            itemElement.classList.add(this.options.classNames.item|| \"\");\r\n            fragment.appendChild(itemElement);\r\n            this.items.push(itemElement);\r\n        });\r\n\r\n        this.container.appendChild(fragment);\r\n        this.updateLayout();\r\n    }\r\n\r\n    private setupResizeObserver() {\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            if (this.rafId) cancelAnimationFrame(this.rafId);\r\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\r\n        });\r\n        this.resizeObserver.observe(this.container);\r\n    }\r\n\r\n    private updateLayout() {\r\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate columns\r\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\r\n\r\n        // Reset column heights\r\n        this.columnHeights = new Array(columns).fill(0);\r\n\r\n        // Position items\r\n        this.items.forEach((item) => {\r\n            const height = item.offsetHeight;\r\n            const minCol = this.findShortestColumn();\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Apply position and size\r\n            item.style.width = `${colWidth}px`;\r\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n            item.style.transition = animate\r\n                ? `transform ${transitionDuration}ms ease`\r\n                : 'none';\r\n\r\n            // Update column height\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    private findShortestColumn(): number {\r\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\r\n    }\r\n\r\n    public updateItems(newItems: T[]) {\r\n        this.options.items = newItems;\r\n        this.renderItems();\r\n    }\r\n\r\n    public destroy() {\r\n        this.resizeObserver?.disconnect();\r\n        if (this.rafId) cancelAnimationFrame(this.rafId);\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.options.classNames.container || \"\");\r\n    }\r\n}","import './index.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\nimport {MasonrySnapGridLayoutOptions}  from './types';\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };"],"mappings":";AAEA,IAAqB,wBAArB,MAAoD;AAAA,EAQhD,YAAY,WAAwB,SAA0C;AAL9E,SAAQ,QAAuB,CAAC;AAChC,SAAQ,gBAA0B,CAAC;AAEnC,SAAQ,QAAuB;AAG3B,SAAK,YAAY;AACjB,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,YAAY;AAAA,QACR,WAAW;AAAA,QACX,MAAM;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,QAAQ,WAAW,aAAa,EAAE;AAGpE,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEQ,cAAc;AAElB,SAAK,MAAM,QAAQ,UAAQ,KAAK,OAAO,CAAC;AACxC,SAAK,QAAQ,CAAC;AAGd,UAAM,WAAW,SAAS,uBAAuB;AAGjD,SAAK,QAAQ,MAAM,QAAQ,cAAY;AACnC,YAAM,cAAc,KAAK,QAAQ,WAAW,QAAQ;AACpD,kBAAY,UAAU,IAAI,KAAK,QAAQ,WAAW,QAAO,EAAE;AAC3D,eAAS,YAAY,WAAW;AAChC,WAAK,MAAM,KAAK,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,UAAU,YAAY,QAAQ;AACnC,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,UAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,WAAK,QAAQ,sBAAsB,MAAM,KAAK,aAAa,CAAC;AAAA,IAChE,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,SAAS;AAAA,EAC9C;AAAA,EAEQ,eAAe;AACnB,UAAM,EAAE,QAAQ,aAAa,SAAS,mBAAmB,IAAI,KAAK;AAClE,UAAM,iBAAiB,KAAK,UAAU;AAGtC,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AAC1F,UAAM,YAAY,kBAAkB,UAAU,KAAK,UAAU;AAG7D,SAAK,gBAAgB,IAAI,MAAM,OAAO,EAAE,KAAK,CAAC;AAG9C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,YAAM,SAAS,KAAK;AACpB,YAAM,SAAS,KAAK,mBAAmB;AACvC,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAGnC,WAAK,MAAM,QAAQ,GAAG,QAAQ;AAC9B,WAAK,MAAM,YAAY,eAAe,CAAC,OAAO,CAAC;AAC/C,WAAK,MAAM,aAAa,UAClB,aAAa,kBAAkB,YAC/B;AAGN,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAGD,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,qBAA6B;AACjC,WAAO,KAAK,cAAc,QAAQ,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAAA,EACrE;AAAA,EAEO,YAAY,UAAe;AAC9B,SAAK,QAAQ,QAAQ;AACrB,SAAK,YAAY;AAAA,EACrB;AAAA,EAEO,UAAU;AACb,SAAK,gBAAgB,WAAW;AAChC,QAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,QAAQ,WAAW,aAAa,EAAE;AAAA,EAC3E;AACJ;;;AC1GA,IAAO,gBAAQ;","names":[]}

package/dist/esm/react.js

@@ -0,0 +1,141 @@
+// src/react.tsx
+import {
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import ReactDOM from "react-dom/client";
+
+// src/MasonrySnapGridLayout.ts
+var MasonrySnapGridLayout = class {
+  constructor(container, options) {
+    this.items = [];
+    this.columnHeights = [];
+    this.rafId = null;
+    this.container = container;
+    this.options = {
+      gutter: 16,
+      minColWidth: 250,
+      animate: true,
+      transitionDuration: 400,
+      classNames: {
+        container: "masonry-snap-grid-container",
+        item: "masonry-snap-grid-item"
+      },
+      ...options
+    };
+    this.container.classList.add(this.options.classNames.container || "");
+    this.renderItems();
+    this.setupResizeObserver();
+  }
+  renderItems() {
+    this.items.forEach((item) => item.remove());
+    this.items = [];
+    const fragment = document.createDocumentFragment();
+    this.options.items.forEach((itemData) => {
+      const itemElement = this.options.renderItem(itemData);
+      itemElement.classList.add(this.options.classNames.item || "");
+      fragment.appendChild(itemElement);
+      this.items.push(itemElement);
+    });
+    this.container.appendChild(fragment);
+    this.updateLayout();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => this.updateLayout());
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  updateLayout() {
+    const { gutter, minColWidth, animate, transitionDuration } = this.options;
+    const containerWidth = this.container.clientWidth;
+    const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
+    const colWidth = (containerWidth - (columns - 1) * gutter) / columns;
+    this.columnHeights = new Array(columns).fill(0);
+    this.items.forEach((item) => {
+      const height = item.offsetHeight;
+      const minCol = this.findShortestColumn();
+      const x = minCol * (colWidth + gutter);
+      const y = this.columnHeights[minCol];
+      item.style.width = `${colWidth}px`;
+      item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      item.style.transition = animate ? `transform ${transitionDuration}ms ease` : "none";
+      this.columnHeights[minCol] += height + gutter;
+    });
+    const maxHeight = Math.max(...this.columnHeights);
+    this.container.style.height = `${maxHeight}px`;
+  }
+  findShortestColumn() {
+    return this.columnHeights.indexOf(Math.min(...this.columnHeights));
+  }
+  updateItems(newItems) {
+    this.options.items = newItems;
+    this.renderItems();
+  }
+  destroy() {
+    this.resizeObserver?.disconnect();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.container.innerHTML = "";
+    this.container.removeAttribute("style");
+    this.container.classList.remove(this.options.classNames.container || "");
+  }
+};
+
+// src/react.tsx
+import { jsx } from "react/jsx-runtime";
+function MasonrySnapGridInner({
+  items,
+  renderItem,
+  className,
+  style,
+  ...options
+}, ref) {
+  const containerRef = useRef(null);
+  const masonryRef = useRef(null);
+  const rootsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!containerRef.current) return;
+    masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {
+      ...options,
+      items,
+      renderItem: (item) => {
+        const div = document.createElement("div");
+        const root = ReactDOM.createRoot(div);
+        root.render(renderItem(item));
+        rootsRef.current.set(div, root);
+        return div;
+      }
+    });
+    return () => {
+      rootsRef.current.forEach((root) => root.unmount());
+      rootsRef.current.clear();
+      masonryRef.current?.destroy();
+      masonryRef.current = null;
+    };
+  }, [options, renderItem]);
+  useEffect(() => {
+    if (masonryRef.current) {
+      masonryRef.current.updateItems(items);
+    }
+  }, [items]);
+  useImperativeHandle(ref, () => ({
+    layout: masonryRef.current
+  }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { position: "relative", width: "100%", ...style }
+    }
+  );
+}
+var MasonrySnapGrid = forwardRef(MasonrySnapGridInner);
+var react_default = MasonrySnapGridInner;
+export {
+  react_default as default
+};
+//# sourceMappingURL=react.js.map

package/dist/esm/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react.tsx","../../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\r\n    useEffect,\r\n    useRef,\r\n    forwardRef,\r\n    useImperativeHandle,\r\n} from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\r\nimport {\r\n    MasonrySnapGridLayoutOptions,\r\n    MasonrySnapGridRef,\r\n} from './types';\r\n\r\ninterface MasonrySnapGridProps<T>\r\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\r\n    items: T[];\r\n    renderItem: (item: T) => React.ReactNode;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nfunction MasonrySnapGridInner<T>(\r\n    {\r\n        items,\r\n        renderItem,\r\n        className,\r\n        style,\r\n        ...options\r\n    }: MasonrySnapGridProps<T>,\r\n    ref: React.Ref<MasonrySnapGridRef>\r\n) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\r\n\r\n    // React roots storage to prevent memory leaks\r\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\r\n\r\n    // Initialize masonry layout\r\n    useEffect(() => {\r\n        if (!containerRef.current) return;\r\n\r\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\r\n            ...options,\r\n            items,\r\n            renderItem: (item) => {\r\n                const div = document.createElement('div');\r\n                const root = ReactDOM.createRoot(div);\r\n                root.render(renderItem(item));\r\n                rootsRef.current.set(div, root);\r\n                return div;\r\n            },\r\n        });\r\n\r\n        return () => {\r\n            // Unmount all React roots to avoid memory leaks\r\n            rootsRef.current.forEach((root) => root.unmount());\r\n            rootsRef.current.clear();\r\n\r\n            masonryRef.current?.destroy();\r\n            masonryRef.current = null;\r\n        };\r\n    }, [options, renderItem]); // include renderItem if it's not memoized\r\n\r\n    // Update items on change\r\n    useEffect(() => {\r\n        if (masonryRef.current) {\r\n            masonryRef.current.updateItems(items);\r\n        }\r\n    }, [items]);\r\n\r\n    // Expose layout instance through ref\r\n    useImperativeHandle(ref, () => ({\r\n        layout: masonryRef.current!,\r\n    }));\r\n\r\n    return (\r\n        <div\r\n            ref={containerRef}\r\n            className={className}\r\n            style={{ position: 'relative', width: '100%', ...style }}\r\n        />\r\n    );\r\n}\r\n\r\n// Apply generic type correctly to forwardRef\r\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\r\n    props: MasonrySnapGridProps<T> & { ref?: React.Ref<MasonrySnapGridRef> }\r\n) => ReturnType<typeof MasonrySnapGridInner>;\r\n\r\nexport default MasonrySnapGridInner\r\n","import { MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout<T = any> {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\r\n    private items: HTMLElement[] = [];\r\n    private columnHeights: number[] = [];\r\n    private resizeObserver: ResizeObserver | undefined;\r\n    private rafId: number | null = null;\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\r\n        this.container = container;\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            classNames: {\r\n                container: 'masonry-snap-grid-container',\r\n                item: 'masonry-snap-grid-item',\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Apply container class\r\n        this.container.classList.add(this.options.classNames.container || \"\");\r\n\r\n        // Initialize\r\n        this.renderItems();\r\n        this.setupResizeObserver();\r\n    }\r\n\r\n    private renderItems() {\r\n        // Clear existing items\r\n        this.items.forEach(item => item.remove());\r\n        this.items = [];\r\n\r\n        // Create fragment for batch DOM insertion\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        // Create and append items\r\n        this.options.items.forEach(itemData => {\r\n            const itemElement = this.options.renderItem(itemData);\r\n            itemElement.classList.add(this.options.classNames.item|| \"\");\r\n            fragment.appendChild(itemElement);\r\n            this.items.push(itemElement);\r\n        });\r\n\r\n        this.container.appendChild(fragment);\r\n        this.updateLayout();\r\n    }\r\n\r\n    private setupResizeObserver() {\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            if (this.rafId) cancelAnimationFrame(this.rafId);\r\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\r\n        });\r\n        this.resizeObserver.observe(this.container);\r\n    }\r\n\r\n    private updateLayout() {\r\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate columns\r\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\r\n\r\n        // Reset column heights\r\n        this.columnHeights = new Array(columns).fill(0);\r\n\r\n        // Position items\r\n        this.items.forEach((item) => {\r\n            const height = item.offsetHeight;\r\n            const minCol = this.findShortestColumn();\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Apply position and size\r\n            item.style.width = `${colWidth}px`;\r\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n            item.style.transition = animate\r\n                ? `transform ${transitionDuration}ms ease`\r\n                : 'none';\r\n\r\n            // Update column height\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    private findShortestColumn(): number {\r\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\r\n    }\r\n\r\n    public updateItems(newItems: T[]) {\r\n        this.options.items = newItems;\r\n        this.renderItems();\r\n    }\r\n\r\n    public destroy() {\r\n        this.resizeObserver?.disconnect();\r\n        if (this.rafId) cancelAnimationFrame(this.rafId);\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.options.classNames.container || \"\");\r\n    }\r\n}"],"mappings":"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","names":[]}

package/dist/index.css

@@ -0,0 +1,17 @@
+/* src/index.css */
+.masonry-snap-grid-container {
+  position: relative;
+  width: 100%;
+  transition: height 0.4s ease-out;
+  overflow: hidden;
+}
+.masonry-snap-grid-item {
+  position: absolute;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  box-sizing: border-box;
+  transform-origin: top left;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.css"],"sourcesContent":[".masonry-snap-grid-container {\r\n    position: relative;\r\n    width: 100%;\r\n    transition: height 0.4s ease-out;\r\n    overflow: hidden;\r\n}\r\n\r\n.masonry-snap-grid-item {\r\n    position: absolute;\r\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    will-change: transform;\r\n    box-sizing: border-box;\r\n    transform-origin: top left;\r\n    backface-visibility: hidden;\r\n    perspective: 1000px;\r\n}"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
+export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
+
+
+
+export { MasonrySnapGridLayout, MasonrySnapGridLayout as default };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-D7ctVJaF.js';
+export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-D7ctVJaF.js';
+
+
+
+export { MasonrySnapGridLayout, MasonrySnapGridLayout as default };

package/dist/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MasonrySnapGridLayout: () => MasonrySnapGridLayout,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/MasonrySnapGridLayout.ts
+var MasonrySnapGridLayout = class {
+  constructor(container, options) {
+    this.items = [];
+    this.columnHeights = [];
+    this.rafId = null;
+    this.container = container;
+    this.options = {
+      gutter: 16,
+      minColWidth: 250,
+      animate: true,
+      transitionDuration: 400,
+      classNames: {
+        container: "masonry-snap-grid-container",
+        item: "masonry-snap-grid-item"
+      },
+      ...options
+    };
+    this.container.classList.add(this.options.classNames.container || "");
+    this.renderItems();
+    this.setupResizeObserver();
+  }
+  renderItems() {
+    this.items.forEach((item) => item.remove());
+    this.items = [];
+    const fragment = document.createDocumentFragment();
+    this.options.items.forEach((itemData) => {
+      const itemElement = this.options.renderItem(itemData);
+      itemElement.classList.add(this.options.classNames.item || "");
+      fragment.appendChild(itemElement);
+      this.items.push(itemElement);
+    });
+    this.container.appendChild(fragment);
+    this.updateLayout();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => this.updateLayout());
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  updateLayout() {
+    const { gutter, minColWidth, animate, transitionDuration } = this.options;
+    const containerWidth = this.container.clientWidth;
+    const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
+    const colWidth = (containerWidth - (columns - 1) * gutter) / columns;
+    this.columnHeights = new Array(columns).fill(0);
+    this.items.forEach((item) => {
+      const height = item.offsetHeight;
+      const minCol = this.findShortestColumn();
+      const x = minCol * (colWidth + gutter);
+      const y = this.columnHeights[minCol];
+      item.style.width = `${colWidth}px`;
+      item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      item.style.transition = animate ? `transform ${transitionDuration}ms ease` : "none";
+      this.columnHeights[minCol] += height + gutter;
+    });
+    const maxHeight = Math.max(...this.columnHeights);
+    this.container.style.height = `${maxHeight}px`;
+  }
+  findShortestColumn() {
+    return this.columnHeights.indexOf(Math.min(...this.columnHeights));
+  }
+  updateItems(newItems) {
+    this.options.items = newItems;
+    this.renderItems();
+  }
+  destroy() {
+    this.resizeObserver?.disconnect();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.container.innerHTML = "";
+    this.container.removeAttribute("style");
+    this.container.classList.remove(this.options.classNames.container || "");
+  }
+};
+
+// src/index.ts
+var index_default = MasonrySnapGridLayout;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MasonrySnapGridLayout
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import './index.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\nimport {MasonrySnapGridLayoutOptions}  from './types';\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };","import { MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout<T = any> {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\r\n    private items: HTMLElement[] = [];\r\n    private columnHeights: number[] = [];\r\n    private resizeObserver: ResizeObserver | undefined;\r\n    private rafId: number | null = null;\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\r\n        this.container = container;\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            classNames: {\r\n                container: 'masonry-snap-grid-container',\r\n                item: 'masonry-snap-grid-item',\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Apply container class\r\n        this.container.classList.add(this.options.classNames.container || \"\");\r\n\r\n        // Initialize\r\n        this.renderItems();\r\n        this.setupResizeObserver();\r\n    }\r\n\r\n    private renderItems() {\r\n        // Clear existing items\r\n        this.items.forEach(item => item.remove());\r\n        this.items = [];\r\n\r\n        // Create fragment for batch DOM insertion\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        // Create and append items\r\n        this.options.items.forEach(itemData => {\r\n            const itemElement = this.options.renderItem(itemData);\r\n            itemElement.classList.add(this.options.classNames.item|| \"\");\r\n            fragment.appendChild(itemElement);\r\n            this.items.push(itemElement);\r\n        });\r\n\r\n        this.container.appendChild(fragment);\r\n        this.updateLayout();\r\n    }\r\n\r\n    private setupResizeObserver() {\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            if (this.rafId) cancelAnimationFrame(this.rafId);\r\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\r\n        });\r\n        this.resizeObserver.observe(this.container);\r\n    }\r\n\r\n    private updateLayout() {\r\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate columns\r\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\r\n\r\n        // Reset column heights\r\n        this.columnHeights = new Array(columns).fill(0);\r\n\r\n        // Position items\r\n        this.items.forEach((item) => {\r\n            const height = item.offsetHeight;\r\n            const minCol = this.findShortestColumn();\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Apply position and size\r\n            item.style.width = `${colWidth}px`;\r\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n            item.style.transition = animate\r\n                ? `transform ${transitionDuration}ms ease`\r\n                : 'none';\r\n\r\n            // Update column height\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    private findShortestColumn(): number {\r\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\r\n    }\r\n\r\n    public updateItems(newItems: T[]) {\r\n        this.options.items = newItems;\r\n        this.renderItems();\r\n    }\r\n\r\n    public destroy() {\r\n        this.resizeObserver?.disconnect();\r\n        if (this.rafId) cancelAnimationFrame(this.rafId);\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.options.classNames.container || \"\");\r\n    }\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAqB,wBAArB,MAAoD;AAAA,EAQhD,YAAY,WAAwB,SAA0C;AAL9E,SAAQ,QAAuB,CAAC;AAChC,SAAQ,gBAA0B,CAAC;AAEnC,SAAQ,QAAuB;AAG3B,SAAK,YAAY;AACjB,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,YAAY;AAAA,QACR,WAAW;AAAA,QACX,MAAM;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,QAAQ,WAAW,aAAa,EAAE;AAGpE,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEQ,cAAc;AAElB,SAAK,MAAM,QAAQ,UAAQ,KAAK,OAAO,CAAC;AACxC,SAAK,QAAQ,CAAC;AAGd,UAAM,WAAW,SAAS,uBAAuB;AAGjD,SAAK,QAAQ,MAAM,QAAQ,cAAY;AACnC,YAAM,cAAc,KAAK,QAAQ,WAAW,QAAQ;AACpD,kBAAY,UAAU,IAAI,KAAK,QAAQ,WAAW,QAAO,EAAE;AAC3D,eAAS,YAAY,WAAW;AAChC,WAAK,MAAM,KAAK,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,UAAU,YAAY,QAAQ;AACnC,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,UAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,WAAK,QAAQ,sBAAsB,MAAM,KAAK,aAAa,CAAC;AAAA,IAChE,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,SAAS;AAAA,EAC9C;AAAA,EAEQ,eAAe;AACnB,UAAM,EAAE,QAAQ,aAAa,SAAS,mBAAmB,IAAI,KAAK;AAClE,UAAM,iBAAiB,KAAK,UAAU;AAGtC,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AAC1F,UAAM,YAAY,kBAAkB,UAAU,KAAK,UAAU;AAG7D,SAAK,gBAAgB,IAAI,MAAM,OAAO,EAAE,KAAK,CAAC;AAG9C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,YAAM,SAAS,KAAK;AACpB,YAAM,SAAS,KAAK,mBAAmB;AACvC,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAGnC,WAAK,MAAM,QAAQ,GAAG,QAAQ;AAC9B,WAAK,MAAM,YAAY,eAAe,CAAC,OAAO,CAAC;AAC/C,WAAK,MAAM,aAAa,UAClB,aAAa,kBAAkB,YAC/B;AAGN,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAGD,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,qBAA6B;AACjC,WAAO,KAAK,cAAc,QAAQ,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAAA,EACrE;AAAA,EAEO,YAAY,UAAe;AAC9B,SAAK,QAAQ,QAAQ;AACrB,SAAK,YAAY;AAAA,EACrB;AAAA,EAEO,UAAU;AACb,SAAK,gBAAgB,WAAW;AAChC,QAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,QAAQ,WAAW,aAAa,EAAE;AAAA,EAC3E;AACJ;;;AD1GA,IAAO,gBAAQ;","names":[]}

package/dist/react.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
+
+interface MasonrySnapGridProps<T> extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {
+    items: T[];
+    renderItem: (item: T) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function MasonrySnapGridInner<T>({ items, renderItem, className, style, ...options }: MasonrySnapGridProps<T>, ref: React.Ref<MasonrySnapGridRef>): react_jsx_runtime.JSX.Element;
+
+export { MasonrySnapGridInner as default };

package/dist/react.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-D7ctVJaF.js';
+
+interface MasonrySnapGridProps<T> extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {
+    items: T[];
+    renderItem: (item: T) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function MasonrySnapGridInner<T>({ items, renderItem, className, style, ...options }: MasonrySnapGridProps<T>, ref: React.Ref<MasonrySnapGridRef>): react_jsx_runtime.JSX.Element;
+
+export { MasonrySnapGridInner as default };

package/dist/react.js

@@ -0,0 +1,167 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.tsx
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+var import_client = __toESM(require("react-dom/client"), 1);
+
+// src/MasonrySnapGridLayout.ts
+var MasonrySnapGridLayout = class {
+  constructor(container, options) {
+    this.items = [];
+    this.columnHeights = [];
+    this.rafId = null;
+    this.container = container;
+    this.options = {
+      gutter: 16,
+      minColWidth: 250,
+      animate: true,
+      transitionDuration: 400,
+      classNames: {
+        container: "masonry-snap-grid-container",
+        item: "masonry-snap-grid-item"
+      },
+      ...options
+    };
+    this.container.classList.add(this.options.classNames.container || "");
+    this.renderItems();
+    this.setupResizeObserver();
+  }
+  renderItems() {
+    this.items.forEach((item) => item.remove());
+    this.items = [];
+    const fragment = document.createDocumentFragment();
+    this.options.items.forEach((itemData) => {
+      const itemElement = this.options.renderItem(itemData);
+      itemElement.classList.add(this.options.classNames.item || "");
+      fragment.appendChild(itemElement);
+      this.items.push(itemElement);
+    });
+    this.container.appendChild(fragment);
+    this.updateLayout();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => this.updateLayout());
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  updateLayout() {
+    const { gutter, minColWidth, animate, transitionDuration } = this.options;
+    const containerWidth = this.container.clientWidth;
+    const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));
+    const colWidth = (containerWidth - (columns - 1) * gutter) / columns;
+    this.columnHeights = new Array(columns).fill(0);
+    this.items.forEach((item) => {
+      const height = item.offsetHeight;
+      const minCol = this.findShortestColumn();
+      const x = minCol * (colWidth + gutter);
+      const y = this.columnHeights[minCol];
+      item.style.width = `${colWidth}px`;
+      item.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      item.style.transition = animate ? `transform ${transitionDuration}ms ease` : "none";
+      this.columnHeights[minCol] += height + gutter;
+    });
+    const maxHeight = Math.max(...this.columnHeights);
+    this.container.style.height = `${maxHeight}px`;
+  }
+  findShortestColumn() {
+    return this.columnHeights.indexOf(Math.min(...this.columnHeights));
+  }
+  updateItems(newItems) {
+    this.options.items = newItems;
+    this.renderItems();
+  }
+  destroy() {
+    this.resizeObserver?.disconnect();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.container.innerHTML = "";
+    this.container.removeAttribute("style");
+    this.container.classList.remove(this.options.classNames.container || "");
+  }
+};
+
+// src/react.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MasonrySnapGridInner({
+  items,
+  renderItem,
+  className,
+  style,
+  ...options
+}, ref) {
+  const containerRef = (0, import_react.useRef)(null);
+  const masonryRef = (0, import_react.useRef)(null);
+  const rootsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current) return;
+    masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {
+      ...options,
+      items,
+      renderItem: (item) => {
+        const div = document.createElement("div");
+        const root = import_client.default.createRoot(div);
+        root.render(renderItem(item));
+        rootsRef.current.set(div, root);
+        return div;
+      }
+    });
+    return () => {
+      rootsRef.current.forEach((root) => root.unmount());
+      rootsRef.current.clear();
+      masonryRef.current?.destroy();
+      masonryRef.current = null;
+    };
+  }, [options, renderItem]);
+  (0, import_react.useEffect)(() => {
+    if (masonryRef.current) {
+      masonryRef.current.updateItems(items);
+    }
+  }, [items]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    layout: masonryRef.current
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { position: "relative", width: "100%", ...style }
+    }
+  );
+}
+var MasonrySnapGrid = (0, import_react.forwardRef)(MasonrySnapGridInner);
+var react_default = MasonrySnapGridInner;
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\r\n    useEffect,\r\n    useRef,\r\n    forwardRef,\r\n    useImperativeHandle,\r\n} from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\r\nimport {\r\n    MasonrySnapGridLayoutOptions,\r\n    MasonrySnapGridRef,\r\n} from './types';\r\n\r\ninterface MasonrySnapGridProps<T>\r\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\r\n    items: T[];\r\n    renderItem: (item: T) => React.ReactNode;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nfunction MasonrySnapGridInner<T>(\r\n    {\r\n        items,\r\n        renderItem,\r\n        className,\r\n        style,\r\n        ...options\r\n    }: MasonrySnapGridProps<T>,\r\n    ref: React.Ref<MasonrySnapGridRef>\r\n) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\r\n\r\n    // React roots storage to prevent memory leaks\r\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\r\n\r\n    // Initialize masonry layout\r\n    useEffect(() => {\r\n        if (!containerRef.current) return;\r\n\r\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\r\n            ...options,\r\n            items,\r\n            renderItem: (item) => {\r\n                const div = document.createElement('div');\r\n                const root = ReactDOM.createRoot(div);\r\n                root.render(renderItem(item));\r\n                rootsRef.current.set(div, root);\r\n                return div;\r\n            },\r\n        });\r\n\r\n        return () => {\r\n            // Unmount all React roots to avoid memory leaks\r\n            rootsRef.current.forEach((root) => root.unmount());\r\n            rootsRef.current.clear();\r\n\r\n            masonryRef.current?.destroy();\r\n            masonryRef.current = null;\r\n        };\r\n    }, [options, renderItem]); // include renderItem if it's not memoized\r\n\r\n    // Update items on change\r\n    useEffect(() => {\r\n        if (masonryRef.current) {\r\n            masonryRef.current.updateItems(items);\r\n        }\r\n    }, [items]);\r\n\r\n    // Expose layout instance through ref\r\n    useImperativeHandle(ref, () => ({\r\n        layout: masonryRef.current!,\r\n    }));\r\n\r\n    return (\r\n        <div\r\n            ref={containerRef}\r\n            className={className}\r\n            style={{ position: 'relative', width: '100%', ...style }}\r\n        />\r\n    );\r\n}\r\n\r\n// Apply generic type correctly to forwardRef\r\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\r\n    props: MasonrySnapGridProps<T> & { ref?: React.Ref<MasonrySnapGridRef> }\r\n) => ReturnType<typeof MasonrySnapGridInner>;\r\n\r\nexport default MasonrySnapGridInner\r\n","import { MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout<T = any> {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\r\n    private items: HTMLElement[] = [];\r\n    private columnHeights: number[] = [];\r\n    private resizeObserver: ResizeObserver | undefined;\r\n    private rafId: number | null = null;\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\r\n        this.container = container;\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            classNames: {\r\n                container: 'masonry-snap-grid-container',\r\n                item: 'masonry-snap-grid-item',\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Apply container class\r\n        this.container.classList.add(this.options.classNames.container || \"\");\r\n\r\n        // Initialize\r\n        this.renderItems();\r\n        this.setupResizeObserver();\r\n    }\r\n\r\n    private renderItems() {\r\n        // Clear existing items\r\n        this.items.forEach(item => item.remove());\r\n        this.items = [];\r\n\r\n        // Create fragment for batch DOM insertion\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        // Create and append items\r\n        this.options.items.forEach(itemData => {\r\n            const itemElement = this.options.renderItem(itemData);\r\n            itemElement.classList.add(this.options.classNames.item|| \"\");\r\n            fragment.appendChild(itemElement);\r\n            this.items.push(itemElement);\r\n        });\r\n\r\n        this.container.appendChild(fragment);\r\n        this.updateLayout();\r\n    }\r\n\r\n    private setupResizeObserver() {\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            if (this.rafId) cancelAnimationFrame(this.rafId);\r\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\r\n        });\r\n        this.resizeObserver.observe(this.container);\r\n    }\r\n\r\n    private updateLayout() {\r\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate columns\r\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\r\n\r\n        // Reset column heights\r\n        this.columnHeights = new Array(columns).fill(0);\r\n\r\n        // Position items\r\n        this.items.forEach((item) => {\r\n            const height = item.offsetHeight;\r\n            const minCol = this.findShortestColumn();\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Apply position and size\r\n            item.style.width = `${colWidth}px`;\r\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\r\n            item.style.transition = animate\r\n                ? `transform ${transitionDuration}ms ease`\r\n                : 'none';\r\n\r\n            // Update column height\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    private findShortestColumn(): number {\r\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\r\n    }\r\n\r\n    public updateItems(newItems: T[]) {\r\n        this.options.items = newItems;\r\n        this.renderItems();\r\n    }\r\n\r\n    public destroy() {\r\n        this.resizeObserver?.disconnect();\r\n        if (this.rafId) cancelAnimationFrame(this.rafId);\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.options.classNames.container || \"\");\r\n    }\r\n}"],"mappings":"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","names":["ReactDOM"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-snap-grid-layout",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A performant, responsive masonry layout library with smooth animations, dynamic columns, and zero dependencies.",
   "keywords": [
     "masonry",