social-masonry 1.0.0 → 1.0.1

package/dist/react/index.esm.js

@@ -1,47 +1,57 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
 
 /**
  * Social Masonry - Utility Functions
  */
+// ============================================
+// URL Parsing Utilities
+// ============================================
 /**
- * Debounce function execution
+ * Extract tweet ID from Twitter/X URL
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function debounce(fn, delay) {
-    let timeoutId = null;
-    return function (...args) {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            fn.apply(this, args);
-            timeoutId = null;
-        }, delay);
-    };
+function extractTweetId(url) {
+    if (!url)
+        return null;
+    const match = url.match(/(?:twitter\.com|x\.com)\/\w+\/status\/(\d+)/);
+    return match ? match[1] : null;
 }
 /**
- * Throttle function execution
+ * Extract post ID from Instagram URL
  */
-function throttle(fn, limit) {
-    let inThrottle = false;
-    let lastArgs = null;
-    return function (...args) {
-        if (!inThrottle) {
-            fn.apply(this, args);
-            inThrottle = true;
-            setTimeout(() => {
-                inThrottle = false;
-                if (lastArgs) {
-                    fn.apply(this, lastArgs);
-                    lastArgs = null;
-                }
-            }, limit);
-        }
-        else {
-            lastArgs = args;
-        }
-    };
+function extractInstagramId(url) {
+    if (!url)
+        return null;
+    const match = url.match(/instagram\.com\/(?:p|reel)\/([A-Za-z0-9_-]+)/);
+    return match ? match[1] : null;
+}
+/**
+ * Generate unique ID from post URL
+ */
+function generatePostId(post) {
+    if (post.id)
+        return post.id;
+    if (post.platform === 'twitter') {
+        const tweetId = extractTweetId(post.url);
+        return tweetId ? `tw-${tweetId}` : `tw-${hashString(post.url)}`;
+    }
+    if (post.platform === 'instagram') {
+        const igId = extractInstagramId(post.url);
+        return igId ? `ig-${igId}` : `ig-${hashString(post.url)}`;
+    }
+    return `post-${hashString(post.url)}`;
+}
+/**
+ * Simple string hash function
+ */
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
 }
 /**
  * Get number of columns based on viewport width
@@ -69,660 +79,279 @@ const defaultColumnConfig = [
     { columns: 2, minWidth: 600 },
     { columns: 1, minWidth: 0 },
 ];
-/**
- * Format number with abbreviations (1K, 1M, etc.)
- */
-function formatNumber(num) {
-    if (num >= 1000000) {
-        return `${(num / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
-    }
-    if (num >= 1000) {
-        return `${(num / 1000).toFixed(1).replace(/\.0$/, '')}K`;
-    }
-    return num.toString();
-}
-/**
- * Format relative time
- */
-function formatRelativeTime(date) {
-    const now = new Date();
-    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-    if (diffInSeconds < 60) {
-        return 'now';
-    }
-    const diffInMinutes = Math.floor(diffInSeconds / 60);
-    if (diffInMinutes < 60) {
-        return `${diffInMinutes}m`;
-    }
-    const diffInHours = Math.floor(diffInMinutes / 60);
-    if (diffInHours < 24) {
-        return `${diffInHours}h`;
-    }
-    const diffInDays = Math.floor(diffInHours / 24);
-    if (diffInDays < 7) {
-        return `${diffInDays}d`;
-    }
-    const diffInWeeks = Math.floor(diffInDays / 7);
-    if (diffInWeeks < 4) {
-        return `${diffInWeeks}w`;
-    }
-    // Format as date for older posts
-    return date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-    });
-}
-/**
- * Parse CSS value to pixels
- */
-function parseCSSValue(value, containerWidth) {
-    if (typeof value === 'number') {
-        return value;
-    }
-    const numMatch = value.match(/^([\d.]+)(px|rem|em|%|vw)?$/);
-    if (!numMatch) {
-        return 0;
-    }
-    const num = parseFloat(numMatch[1]);
-    const unit = numMatch[2] || 'px';
-    switch (unit) {
-        case 'px':
-            return num;
-        case 'rem':
-            return num * 16; // Assume 16px base
-        case 'em':
-            return num * 16;
-        case '%':
-            return 0;
-        case 'vw':
-            return (num / 100) * window.innerWidth;
-        default:
-            return num;
-    }
-}
-/**
- * Check if element is in viewport
- */
-function isInViewport(element, scrollTop, viewportHeight, overscan = 0) {
-    const expandedTop = scrollTop - overscan;
-    const expandedBottom = scrollTop + viewportHeight + overscan;
-    return element.bottom >= expandedTop && element.top <= expandedBottom;
-}
-/**
- * Get scroll position
- */
-function getScrollPosition(scrollContainer) {
-    if (!scrollContainer || scrollContainer === window) {
-        return {
-            scrollTop: window.scrollY || document.documentElement.scrollTop,
-            viewportHeight: window.innerHeight,
-        };
-    }
-    return {
-        scrollTop: scrollContainer.scrollTop,
-        viewportHeight: scrollContainer.clientHeight,
-    };
-}
-/**
- * Type guard for Twitter posts
- */
-function isTwitterPost(post) {
-    return post.platform === 'twitter';
-}
-/**
- * Type guard for Instagram posts
- */
-function isInstagramPost(post) {
-    return post.platform === 'instagram';
-}
-/**
- * Request animation frame with fallback
- */
-const raf = typeof requestAnimationFrame !== 'undefined'
-    ? requestAnimationFrame
-    : (callback) => setTimeout(callback, 16);
-/**
- * Cancel animation frame with fallback
- */
-const cancelRaf = typeof cancelAnimationFrame !== 'undefined'
-    ? cancelAnimationFrame
-    : (id) => clearTimeout(id);
 
-/**
- * Social Masonry - Layout Engine
- * Calculates positions for masonry grid items
- */
-class LayoutEngine {
-    constructor(options) {
-        this.options = {
-            gap: 16,
-            columns: defaultColumnConfig,
-            defaultColumns: 3,
-            padding: 0,
-            animationDuration: 300,
-            animate: true,
-            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            ...options,
-        };
-        this.state = {
-            positions: new Map(),
-            columnHeights: [],
-            containerHeight: 0,
-            columnWidth: 0,
-        };
-    }
-    /**
-     * Calculate layout for all posts
-     */
-    calculate(posts) {
-        const { containerWidth, itemHeights } = this.options;
-        const gap = parseCSSValue(this.options.gap);
-        const padding = parseCSSValue(this.options.padding);
-        // Calculate column count and width
-        const columnCount = getColumnCount(this.options.columns, containerWidth);
-        const availableWidth = containerWidth - padding * 2;
-        const totalGapWidth = gap * (columnCount - 1);
-        const columnWidth = (availableWidth - totalGapWidth) / columnCount;
-        // Initialize column heights
-        const columnHeights = new Array(columnCount).fill(0);
-        const positions = new Map();
-        // Place each item in the shortest column
-        for (const post of posts) {
-            const itemHeight = itemHeights.get(post.id) ?? this.estimateHeight(post, columnWidth);
-            // Find shortest column
-            const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
-            // Calculate position
-            const x = padding + shortestColumn * (columnWidth + gap);
-            const y = columnHeights[shortestColumn];
-            positions.set(post.id, {
-                id: post.id,
-                x,
-                y,
-                width: columnWidth,
-                height: itemHeight,
-                column: shortestColumn,
-            });
-            // Update column height
-            columnHeights[shortestColumn] = y + itemHeight + gap;
+// ============================================
+// Script Loading
+// ============================================
+let twitterScriptLoaded = false;
+let instagramScriptLoaded = false;
+const loadTwitterScript = () => {
+    if (twitterScriptLoaded)
+        return Promise.resolve();
+    if (typeof window === 'undefined')
+        return Promise.resolve();
+    return new Promise((resolve) => {
+        if (window.twttr) {
+            twitterScriptLoaded = true;
+            resolve();
+            return;
         }
-        // Remove last gap from column heights
-        const containerHeight = Math.max(...columnHeights.map(h => h - gap), 0);
-        this.state = {
-            positions,
-            columnHeights,
-            containerHeight,
-            columnWidth,
+        const script = document.createElement('script');
+        script.src = 'https://platform.twitter.com/widgets.js';
+        script.async = true;
+        script.onload = () => {
+            twitterScriptLoaded = true;
+            resolve();
         };
-        return this.state;
-    }
-    /**
-     * Estimate item height based on content
-     */
-    estimateHeight(post, columnWidth) {
-        let height = 0;
-        // Header (avatar, name, etc.)
-        height += 56;
-        // Text content
-        if (post.platform === 'twitter') {
-            const textLength = post.content.text.length;
-            const avgCharsPerLine = Math.floor(columnWidth / 8); // ~8px per char
-            const lines = Math.ceil(textLength / avgCharsPerLine);
-            height += lines * 24; // ~24px per line
-        }
-        else if (post.content.caption) {
-            const captionLength = post.content.caption.length;
-            const avgCharsPerLine = Math.floor(columnWidth / 8);
-            const lines = Math.min(Math.ceil(captionLength / avgCharsPerLine), 4); // Max 4 lines
-            height += lines * 20;
-        }
-        // Media
-        if (post.platform === 'twitter' && post.media?.length) {
-            const media = post.media[0];
-            const aspectRatio = media.aspectRatio ?? 16 / 9;
-            height += columnWidth / aspectRatio;
-        }
-        else if (post.platform === 'instagram') {
-            const aspectRatio = post.media.aspectRatio ?? 1;
-            height += columnWidth / aspectRatio;
+        document.head.appendChild(script);
+    });
+};
+const loadInstagramScript = () => {
+    if (instagramScriptLoaded)
+        return Promise.resolve();
+    if (typeof window === 'undefined')
+        return Promise.resolve();
+    return new Promise((resolve) => {
+        if (window.instgrm) {
+            instagramScriptLoaded = true;
+            resolve();
+            return;
         }
-        // Footer (metrics, timestamp)
-        height += 44;
-        // Padding
-        height += 24;
-        return Math.round(height);
-    }
-    /**
-     * Update single item height and recalculate affected items
-     */
-    updateItemHeight(id, height) {
-        this.options.itemHeights.set(id, height);
-    }
-    /**
-     * Get current layout state
-     */
-    getState() {
-        return this.state;
-    }
-    /**
-     * Get position for specific item
-     */
-    getPosition(id) {
-        return this.state.positions.get(id);
-    }
-    /**
-     * Update container width
-     */
-    setContainerWidth(width) {
-        this.options.containerWidth = width;
-    }
-    /**
-     * Get current column count
-     */
-    getColumnCount() {
-        return getColumnCount(this.options.columns, this.options.containerWidth);
-    }
-    /**
-     * Get CSS variables for animations
-     */
-    getCSSVariables() {
-        return {
-            '--sm-animation-duration': `${this.options.animationDuration}ms`,
-            '--sm-easing': this.options.easing,
-            '--sm-gap': typeof this.options.gap === 'number'
-                ? `${this.options.gap}px`
-                : this.options.gap,
-            '--sm-column-width': `${this.state.columnWidth}px`,
-            '--sm-container-height': `${this.state.containerHeight}px`,
+        const script = document.createElement('script');
+        script.src = 'https://www.instagram.com/embed.js';
+        script.async = true;
+        script.onload = () => {
+            instagramScriptLoaded = true;
+            resolve();
         };
-    }
-}
-
-/**
- * Social Masonry - Virtualization Engine
- * Handles virtual scrolling for large lists
- */
-class VirtualizationEngine {
-    constructor(options) {
-        this.visibleItems = [];
-        this.rafId = null;
-        this.lastScrollTop = 0;
-        this.isScrolling = false;
-        this.scrollEndTimeout = null;
-        this.options = {
-            enabled: true,
-            overscan: 3,
-            estimatedItemHeight: 400,
-            scrollContainer: null,
-            ...options,
+        document.head.appendChild(script);
+    });
+};
+const TwitterEmbed = ({ url, theme = 'light', onLoad, onError, }) => {
+    const containerRef = useRef(null);
+    const embedRef = useRef(null);
+    const [loading, setLoading] = useState(true);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
         };
-        this.posts = options.posts;
-        this.positions = options.positions;
-        this.onVisibleItemsChange = options.onVisibleItemsChange;
-        this.scrollHandler = throttle(this.handleScroll.bind(this), 16);
-    }
-    /**
-     * Initialize scroll listener
-     */
-    init() {
-        if (!this.options.enabled)
-            return;
-        const container = this.options.scrollContainer ?? window;
-        container.addEventListener('scroll', this.scrollHandler, { passive: true });
-        // Initial calculation
-        this.calculateVisibleItems();
-    }
-    /**
-     * Destroy and cleanup
-     */
-    destroy() {
-        const container = this.options.scrollContainer ?? window;
-        container.removeEventListener('scroll', this.scrollHandler);
-        if (this.rafId !== null) {
-            cancelRaf(this.rafId);
-        }
-        if (this.scrollEndTimeout) {
-            clearTimeout(this.scrollEndTimeout);
-        }
-    }
-    /**
-     * Handle scroll event
-     */
-    handleScroll() {
-        if (this.rafId !== null)
+    }, []);
+    useEffect(() => {
+        const embedContainer = embedRef.current;
+        if (!embedContainer)
             return;
-        this.isScrolling = true;
-        // Clear existing scroll end timeout
-        if (this.scrollEndTimeout) {
-            clearTimeout(this.scrollEndTimeout);
-        }
-        // Set scroll end detection
-        this.scrollEndTimeout = setTimeout(() => {
-            this.isScrolling = false;
-        }, 150);
-        this.rafId = raf(() => {
-            this.rafId = null;
-            this.calculateVisibleItems();
-        });
-    }
-    /**
-     * Calculate which items are visible
-     */
-    calculateVisibleItems() {
-        const { scrollTop, viewportHeight } = getScrollPosition(this.options.scrollContainer);
-        const overscanPx = this.options.overscan * this.options.estimatedItemHeight;
-        this.lastScrollTop = scrollTop;
-        const newVisibleItems = [];
-        for (let i = 0; i < this.posts.length; i++) {
-            const post = this.posts[i];
-            const position = this.positions.get(post.id);
-            if (!position)
-                continue;
-            const isVisible = isInViewport({
-                top: position.y,
-                bottom: position.y + position.height,
-            }, scrollTop, viewportHeight, overscanPx);
-            if (isVisible) {
-                newVisibleItems.push({
-                    index: i,
-                    post,
-                    position,
-                    isVisible: true,
-                });
+        // Create a fresh container for the widget
+        const widgetContainer = document.createElement('div');
+        embedContainer.appendChild(widgetContainer);
+        setLoading(true);
+        loadTwitterScript().then(() => {
+            if (!mountedRef.current)
+                return;
+            const twttr = window.twttr;
+            if (!twttr) {
+                onError?.(new Error('Twitter widgets not loaded'));
+                setLoading(false);
+                return;
             }
-        }
-        // Check if visible items changed
-        const hasChanged = this.hasVisibleItemsChanged(newVisibleItems);
-        if (hasChanged) {
-            this.visibleItems = newVisibleItems;
-            this.onVisibleItemsChange?.(newVisibleItems);
-        }
-        return this.visibleItems;
-    }
-    /**
-     * Check if visible items have changed
-     */
-    hasVisibleItemsChanged(newItems) {
-        if (newItems.length !== this.visibleItems.length) {
-            return true;
-        }
-        for (let i = 0; i < newItems.length; i++) {
-            if (newItems[i].post.id !== this.visibleItems[i].post.id) {
-                return true;
+            // Extract tweet ID from URL
+            const match = url.match(/(?:twitter\.com|x\.com)\/\w+\/status\/(\d+)/);
+            if (!match) {
+                onError?.(new Error('Invalid Twitter URL'));
+                setLoading(false);
+                return;
             }
-        }
-        return false;
-    }
-    /**
-     * Update posts and positions
-     */
-    update(posts, positions) {
-        this.posts = posts;
-        this.positions = positions;
-        this.calculateVisibleItems();
-    }
-    /**
-     * Get visible items
-     */
-    getVisibleItems() {
-        return this.visibleItems;
-    }
-    /**
-     * Get all items (for non-virtualized mode)
-     */
-    getAllItems() {
-        return this.posts.map((post, index) => ({
-            index,
-            post,
-            position: this.positions.get(post.id),
-            isVisible: true,
-        }));
-    }
-    /**
-     * Check if scrolling
-     */
-    getIsScrolling() {
-        return this.isScrolling;
-    }
-    /**
-     * Get scroll direction
-     */
-    getScrollDirection() {
-        const { scrollTop } = getScrollPosition(this.options.scrollContainer);
-        if (scrollTop > this.lastScrollTop) {
-            return 'down';
-        }
-        else if (scrollTop < this.lastScrollTop) {
-            return 'up';
-        }
-        return 'none';
-    }
-    /**
-     * Check if near bottom (for infinite scroll)
-     */
-    isNearBottom(threshold = 500) {
-        const { scrollTop, viewportHeight } = getScrollPosition(this.options.scrollContainer);
-        // Get container height from positions
-        let maxBottom = 0;
-        for (const position of this.positions.values()) {
-            maxBottom = Math.max(maxBottom, position.y + position.height);
-        }
-        return scrollTop + viewportHeight >= maxBottom - threshold;
-    }
-    /**
-     * Scroll to item
-     */
-    scrollToItem(id, behavior = 'smooth') {
-        const position = this.positions.get(id);
-        if (!position)
-            return;
-        const container = this.options.scrollContainer ?? window;
-        if (container === window) {
-            window.scrollTo({
-                top: position.y,
-                behavior,
-            });
-        }
-        else {
-            container.scrollTo({
-                top: position.y,
-                behavior,
+            twttr.widgets.createTweet(match[1], widgetContainer, {
+                theme,
+                conversation: 'none',
+                dnt: true,
+            }).then((el) => {
+                if (!mountedRef.current)
+                    return;
+                setLoading(false);
+                if (el) {
+                    onLoad?.();
+                }
+                else {
+                    onError?.(new Error('Tweet not found or unavailable'));
+                }
+            }).catch((err) => {
+                if (!mountedRef.current)
+                    return;
+                setLoading(false);
+                onError?.(err);
             });
-        }
-    }
-    /**
-     * Get render range for optimization
-     */
-    getRenderRange() {
-        if (this.visibleItems.length === 0) {
-            return { start: 0, end: 0 };
-        }
-        const indices = this.visibleItems.map(item => item.index);
-        return {
-            start: Math.min(...indices),
-            end: Math.max(...indices) + 1,
+        });
+        return () => {
+            // Safely remove the widget container
+            if (embedContainer && widgetContainer.parentNode === embedContainer) {
+                embedContainer.removeChild(widgetContainer);
+            }
         };
-    }
-}
-
-// ============================================
-// Icons
-// ============================================
-const TwitterIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", className: className, children: jsx("path", { fill: "currentColor", d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }));
-const InstagramIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", className: className, children: jsx("path", { fill: "currentColor", d: "M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 1.802c-2.67 0-2.986.01-4.04.058-.976.045-1.505.207-1.858.344-.466.182-.8.398-1.15.748-.35.35-.566.684-.748 1.15-.137.353-.3.882-.344 1.857-.048 1.055-.058 1.37-.058 4.041 0 2.67.01 2.986.058 4.04.045.976.207 1.505.344 1.858.182.466.399.8.748 1.15.35.35.684.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058 2.67 0 2.987-.01 4.04-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.684.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041 0-2.67-.01-2.986-.058-4.04-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 0 0-.748-1.15 3.098 3.098 0 0 0-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.055-.048-1.37-.058-4.041-.058zm0 3.063a5.135 5.135 0 1 1 0 10.27 5.135 5.135 0 0 1 0-10.27zm0 8.468a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666zm6.538-8.671a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z" }) }));
-const VerifiedIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", className: className, children: jsx("path", { fill: "currentColor", d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" }) }));
-const PlayIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", className: className, children: jsx("path", { fill: "currentColor", d: "M8 5v14l11-7z" }) }));
-const Card = ({ post, position, variant = 'default', theme = 'auto', borderRadius = 12, showPlatformIcon = true, showAuthor = true, showMetrics = true, showTimestamp = true, formatDate = formatRelativeTime, formatNumber: formatNum = formatNumber, className = '', hoverEffect = true, imageLoading = 'lazy', fallbackImage = '', onPostClick, onAuthorClick, onMediaClick, onHeightChange, }) => {
-    const cardRef = useRef(null);
+    }, [url, theme, onLoad, onError]);
+    return (jsxs("div", { ref: containerRef, className: "sm-twitter-embed", children: [loading && (jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: 200,
+                    backgroundColor: theme === 'dark' ? '#15202b' : '#f5f5f5',
+                    borderRadius: 12,
+                }, children: jsx("div", { style: { color: theme === 'dark' ? '#8899a6' : '#666' }, children: "Loading..." }) })), jsx("div", { ref: embedRef })] }));
+};
+const InstagramEmbed = ({ url, onLoad, onError, }) => {
+    const containerRef = useRef(null);
+    const embedRef = useRef(null);
+    const [loading, setLoading] = useState(true);
+    const mountedRef = useRef(true);
     useEffect(() => {
-        if (cardRef.current && onHeightChange) {
-            const height = cardRef.current.offsetHeight;
-            if (height !== position.height) {
-                onHeightChange(post.id, height);
-            }
-        }
-    }, [post.id, position.height, onHeightChange]);
-    const handlePostClick = useCallback((e) => {
-        const target = e.target;
-        if (target.tagName === 'A' || target.closest('a'))
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        const embedContainer = embedRef.current;
+        if (!embedContainer)
+            return;
+        // Extract post ID from URL
+        const match = url.match(/instagram\.com\/(?:p|reel)\/([A-Za-z0-9_-]+)/);
+        if (!match) {
+            onError?.(new Error('Invalid Instagram URL'));
+            setLoading(false);
             return;
-        onPostClick?.(post, e);
-    }, [post, onPostClick]);
-    const handleAuthorClick = useCallback((e) => {
-        e.stopPropagation();
-        onAuthorClick?.(post, e);
-    }, [post, onAuthorClick]);
-    const handleMediaClick = useCallback((index) => (e) => {
-        e.stopPropagation();
-        onMediaClick?.(post, index, e);
-    }, [post, onMediaClick]);
-    const classes = [
-        'sm-card',
-        `sm-card--${post.platform}`,
-        `sm-card--${variant}`,
-        `sm-card--${theme}`,
-        hoverEffect && 'sm-card--hover',
-        className,
-    ].filter(Boolean).join(' ');
-    const style = {
-        position: 'absolute',
-        left: position.x,
-        top: position.y,
-        width: position.width,
-        borderRadius: typeof borderRadius === 'number' ? borderRadius : borderRadius,
-        cursor: onPostClick ? 'pointer' : undefined,
-    };
-    const date = post.createdAt instanceof Date ? post.createdAt : new Date(post.createdAt);
-    return (jsxs("div", { ref: cardRef, className: classes, style: style, onClick: handlePostClick, "data-post-id": post.id, "data-platform": post.platform, children: [showPlatformIcon && (jsx("div", { className: "sm-card__platform-icon", children: post.platform === 'twitter' ? (jsx(TwitterIcon, { className: "sm-platform-icon sm-platform-icon--twitter" })) : (jsx(InstagramIcon, { className: "sm-platform-icon sm-platform-icon--instagram" })) })), showAuthor && (jsxs("div", { className: "sm-card__header", onClick: onAuthorClick ? handleAuthorClick : undefined, style: { cursor: onAuthorClick ? 'pointer' : undefined }, children: [jsx("img", { src: post.author.avatarUrl || fallbackImage, alt: post.author.displayName || post.author.username, className: "sm-card__avatar", loading: imageLoading, onError: (e) => {
-                            if (fallbackImage) {
-                                e.target.src = fallbackImage;
-                            }
-                        } }), jsxs("div", { className: "sm-card__author", children: [jsxs("span", { className: "sm-card__author-name", children: [post.author.displayName || post.author.username, post.author.verified && jsx(VerifiedIcon, { className: "sm-card__verified" })] }), jsxs("span", { className: "sm-card__author-handle", children: ["@", post.author.username] })] })] })), jsxs("div", { className: "sm-card__content", children: [isTwitterPost(post) && (jsx("p", { className: "sm-card__text", children: post.content.text })), isInstagramPost(post) && post.content.caption && (jsx("p", { className: "sm-card__caption", children: post.content.caption.length > 150
-                            ? `${post.content.caption.substring(0, 150)}...`
-                            : post.content.caption }))] }), isTwitterPost(post) && post.media && post.media.length > 0 && (jsx("div", { className: `sm-card__media ${post.media.length > 1 ? `sm-card__media-grid sm-card__media-grid--${Math.min(post.media.length, 4)}` : ''}`, children: post.media.slice(0, 4).map((media, index) => (jsxs("div", { className: `sm-card__media-item ${media.type !== 'image' ? 'sm-card__media-item--video' : ''}`, onClick: onMediaClick ? handleMediaClick(index) : undefined, style: { cursor: onMediaClick ? 'pointer' : undefined }, children: [jsx("img", { src: media.thumbnailUrl || media.url, alt: "Post media", loading: imageLoading, onError: (e) => {
-                                if (fallbackImage) {
-                                    e.target.src = fallbackImage;
-                                }
-                            } }), (media.type === 'video' || media.type === 'gif') && (jsx("div", { className: "sm-card__play-button", children: jsx(PlayIcon, {}) }))] }, index))) })), isInstagramPost(post) && (jsxs("div", { className: "sm-card__media", style: { aspectRatio: post.media.aspectRatio || 1 }, children: [jsx("img", { src: post.media.thumbnailUrl || post.media.url, alt: "Post media", loading: imageLoading, onError: (e) => {
-                            if (fallbackImage) {
-                                e.target.src = fallbackImage;
-                            }
-                        } }), post.media.type === 'video' && (jsx("div", { className: "sm-card__play-button", children: jsx(PlayIcon, {}) })), post.media.type === 'carousel' && (jsx("div", { className: "sm-card__carousel-indicator", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm12 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" }) }) }))] })), (showMetrics || showTimestamp) && (jsxs("div", { className: "sm-card__footer", children: [showMetrics && post.metrics && (jsxs("div", { className: "sm-card__metrics", children: [isTwitterPost(post) && (jsxs(Fragment, { children: [post.metrics.replies !== undefined && (jsxs("span", { className: "sm-card__metric", children: [jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z" }) }), formatNum(post.metrics.replies)] })), post.metrics.retweets !== undefined && (jsxs("span", { className: "sm-card__metric", children: [jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z" }) }), formatNum(post.metrics.retweets)] })), post.metrics.likes !== undefined && (jsxs("span", { className: "sm-card__metric", children: [jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z" }) }), formatNum(post.metrics.likes)] }))] })), isInstagramPost(post) && (jsxs(Fragment, { children: [post.metrics.likes !== undefined && (jsxs("span", { className: "sm-card__metric", children: [jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218z" }) }), formatNum(post.metrics.likes)] })), post.metrics.comments !== undefined && (jsxs("span", { className: "sm-card__metric", children: [jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { fill: "currentColor", d: "M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22l-1.344-4.992zM10 12a1 1 0 1 1 1 1 1 1 0 0 1-1-1zm-4 0a1 1 0 1 1 1 1 1 1 0 0 1-1-1zm8 0a1 1 0 1 1 1 1 1 1 0 0 1-1-1z" }) }), formatNum(post.metrics.comments)] }))] }))] })), showTimestamp && (jsx("time", { className: "sm-card__timestamp", dateTime: date.toISOString(), children: formatDate(date) }))] }))] }));
+        }
+        // Create a fresh container for the widget
+        const widgetContainer = document.createElement('div');
+        widgetContainer.innerHTML = `
+      <blockquote
+        class="instagram-media"
+        data-instgrm-captioned
+        data-instgrm-permalink="https://www.instagram.com/p/${match[1]}/"
+        data-instgrm-version="14"
+        style="
+          background:#FFF;
+          border:0;
+          border-radius:12px;
+          box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);
+          margin: 0;
+          max-width:100%;
+          min-width:100%;
+          padding:0;
+          width:100%;
+        "
+      >
+      </blockquote>
+    `;
+        embedContainer.appendChild(widgetContainer);
+        loadInstagramScript().then(() => {
+            if (!mountedRef.current)
+                return;
+            const instgrm = window.instgrm;
+            if (instgrm) {
+                instgrm.Embeds.process();
+                setLoading(false);
+                onLoad?.();
+            }
+        });
+        return () => {
+            // Safely remove the widget container
+            if (embedContainer && widgetContainer.parentNode === embedContainer) {
+                embedContainer.removeChild(widgetContainer);
+            }
+        };
+    }, [url, onLoad, onError]);
+    return (jsxs("div", { ref: containerRef, className: "sm-instagram-embed", children: [loading && (jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: 400,
+                    backgroundColor: '#fafafa',
+                    borderRadius: 12,
+                }, children: jsx("div", { style: { color: '#666' }, children: "Loading..." }) })), jsx("div", { ref: embedRef })] }));
 };
 const SocialMasonry = forwardRef((props, ref) => {
-    const { posts: initialPosts = [], gap = 16, columns = defaultColumnConfig, padding = 0, animationDuration = 300, animate = true, easing = 'cubic-bezier(0.4, 0, 0.2, 1)', virtualization, loadMoreThreshold: _loadMoreThreshold = 500, onLoadMore: _onLoadMore, onLayoutComplete, className, style, ...cardProps } = props;
+    const { posts: initialPosts = [], gap = 16, columns = defaultColumnConfig, theme = 'light', onEmbedLoad, onEmbedError, className, style, } = props;
     const containerRef = useRef(null);
     const [posts, setPosts] = useState(initialPosts);
-    const [positions, setPositions] = useState(new Map());
-    const [containerHeight, setContainerHeight] = useState(0);
-    const [itemHeights] = useState(() => new Map());
-    const [visibleItems, setVisibleItems] = useState([]);
-    const layoutEngine = useMemo(() => {
-        return new LayoutEngine({
-            gap,
-            columns,
-            padding,
-            animationDuration,
-            animate,
-            easing,
-            containerWidth: containerRef.current?.clientWidth || 800,
-            itemHeights,
-        });
-    }, [gap, columns, padding, animationDuration, animate, easing]);
-    const virtualizationEngine = useMemo(() => {
-        if (!virtualization?.enabled)
-            return null;
-        return new VirtualizationEngine({
-            ...virtualization,
-            posts,
-            positions,
-            onVisibleItemsChange: setVisibleItems,
-        });
-    }, [virtualization?.enabled]);
-    // Calculate layout
-    const calculateLayout = useCallback(() => {
-        if (!containerRef.current)
-            return;
-        layoutEngine.setContainerWidth(containerRef.current.clientWidth);
-        const state = layoutEngine.calculate(posts);
-        setPositions(state.positions);
-        setContainerHeight(state.containerHeight);
-        if (virtualizationEngine) {
-            virtualizationEngine.update(posts, state.positions);
-            setVisibleItems(virtualizationEngine.calculateVisibleItems());
-        }
-        onLayoutComplete?.(Array.from(state.positions.values()));
-    }, [posts, layoutEngine, virtualizationEngine, onLayoutComplete]);
-    // Handle resize
+    const [columnCount, setColumnCount] = useState(3);
+    // Update posts when initialPosts changes
+    useEffect(() => {
+        setPosts(initialPosts);
+    }, [initialPosts]);
+    // Calculate column count based on container width
     useEffect(() => {
-        const handleResize = debounce(() => {
-            calculateLayout();
-        }, 150);
-        const resizeObserver = new ResizeObserver(handleResize);
+        const updateColumnCount = () => {
+            if (!containerRef.current)
+                return;
+            const width = containerRef.current.clientWidth;
+            const count = getColumnCount(columns, width);
+            setColumnCount(count);
+        };
+        updateColumnCount();
+        const resizeObserver = new ResizeObserver(updateColumnCount);
         if (containerRef.current) {
             resizeObserver.observe(containerRef.current);
         }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [calculateLayout]);
-    // Initial layout
-    useEffect(() => {
-        calculateLayout();
-    }, [posts, calculateLayout]);
-    // Initialize virtualization
-    useEffect(() => {
-        if (virtualizationEngine) {
-            virtualizationEngine.init();
-            return () => virtualizationEngine.destroy();
-        }
-        return undefined;
-    }, [virtualizationEngine]);
-    // Handle height change
-    const handleHeightChange = useCallback((id, height) => {
-        itemHeights.set(id, height);
-        calculateLayout();
-    }, [itemHeights, calculateLayout]);
+        return () => resizeObserver.disconnect();
+    }, [columns]);
     // Expose methods via ref
     useImperativeHandle(ref, () => ({
         addPosts: (newPosts) => {
             setPosts(prev => [...prev, ...newPosts]);
         },
         setPosts: (newPosts) => {
-            itemHeights.clear();
             setPosts(newPosts);
         },
         removePost: (id) => {
-            itemHeights.delete(id);
-            setPosts(prev => prev.filter(p => p.id !== id));
+            setPosts(prev => prev.filter(p => generatePostId(p) !== id));
         },
         refresh: () => {
-            itemHeights.clear();
-            calculateLayout();
-        },
-        scrollToPost: (id, behavior = 'smooth') => {
-            const position = positions.get(id);
-            if (position) {
-                window.scrollTo({ top: position.y, behavior });
+            // Re-process embeds
+            const instgrm = window.instgrm;
+            if (instgrm) {
+                instgrm.Embeds.process();
             }
         },
-    }), [positions, calculateLayout, itemHeights]);
-    // Determine which posts to render
-    const postsToRender = virtualizationEngine
-        ? visibleItems.map(item => item.post)
-        : posts;
+    }), []);
+    // Distribute posts into columns (CSS-based masonry simulation)
+    const distributeToColumns = useCallback(() => {
+        const cols = Array.from({ length: columnCount }, () => []);
+        posts.forEach((post, index) => {
+            cols[index % columnCount].push(post);
+        });
+        return cols;
+    }, [posts, columnCount]);
+    const postColumns = distributeToColumns();
     return (jsxs("div", { ref: containerRef, className: `sm-container ${className || ''}`, style: {
-            position: 'relative',
+            display: 'flex',
+            gap,
             width: '100%',
-            height: containerHeight,
             ...style,
-        }, children: [postsToRender.map(post => {
-                const position = positions.get(post.id);
-                if (!position)
+        }, children: [postColumns.map((columnPosts, colIndex) => (jsx("div", { className: "sm-column", style: {
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap,
+                    minWidth: 0,
+                }, children: columnPosts.map(post => {
+                    const postId = generatePostId(post);
+                    if (post.platform === 'twitter') {
+                        return (jsx("div", { className: "sm-embed sm-embed--twitter", children: jsx(TwitterEmbed, { url: post.url, theme: theme, onLoad: () => onEmbedLoad?.(post), onError: (error) => onEmbedError?.(post, error) }) }, postId));
+                    }
+                    if (post.platform === 'instagram') {
+                        return (jsx("div", { className: "sm-embed sm-embed--instagram", children: jsx(InstagramEmbed, { url: post.url, onLoad: () => onEmbedLoad?.(post), onError: (error) => onEmbedError?.(post, error) }) }, postId));
+                    }
                     return null;
-                // Extract event handlers and adapt types
-                const { onPostClick, onAuthorClick, onMediaClick, ...restCardProps } = cardProps;
-                return (jsx(Card, { post: post, position: position, onHeightChange: handleHeightChange, onPostClick: onPostClick ? (p, e) => onPostClick(p, e.nativeEvent) : undefined, onAuthorClick: onAuthorClick ? (p, e) => onAuthorClick(p, e.nativeEvent) : undefined, onMediaClick: onMediaClick ? (p, i, e) => onMediaClick(p, i, e.nativeEvent) : undefined, ...restCardProps }, post.id));
-            }), posts.length === 0 && (jsx("div", { className: "sm-empty", children: "No posts to display" }))] }));
+                }) }, colIndex))), posts.length === 0 && (jsx("div", { className: "sm-empty", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 40,
+                    color: '#666',
+                    fontSize: 14,
+                    width: '100%',
+                }, children: "No posts to display" }))] }));
 });
 SocialMasonry.displayName = 'SocialMasonry';