social-masonry 1.0.0 → 1.0.1

package/dist/index.esm.js

@@ -1,44 +1,86 @@
 /**
  * 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;
+}
+/**
+ * Detect platform from URL
+ */
+function detectPlatform(url) {
+    if (/(?:twitter\.com|x\.com)\/\w+\/status\/\d+/.test(url)) {
+        return 'twitter';
+    }
+    if (/instagram\.com\/(?:p|reel)\/[A-Za-z0-9_-]+/.test(url)) {
+        return 'instagram';
+    }
+    return null;
+}
+/**
+ * Generate embed URL for Twitter
+ */
+function getTwitterEmbedUrl(tweetId, options = {}) {
+    const params = new URLSearchParams();
+    params.set('id', tweetId);
+    if (options.theme)
+        params.set('theme', options.theme);
+    if (options.hideCard)
+        params.set('cards', 'hidden');
+    if (options.hideThread)
+        params.set('conversation', 'none');
+    return `https://platform.twitter.com/embed/Tweet.html?${params.toString()}`;
+}
+/**
+ * Generate embed URL for Instagram
+ */
+function getInstagramEmbedUrl(postId) {
+    return `https://www.instagram.com/p/${postId}/embed/`;
+}
+/**
+ * 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
@@ -67,137 +109,10 @@ const defaultColumnConfig = [
     { 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
+ * Default embed heights
  */
-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;
-    }
-}
-/**
- * Generate unique ID
- */
-function generateId() {
-    return `sm-${Math.random().toString(36).substring(2, 9)}`;
-}
-/**
- * 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);
-/**
- * Check if we're in a browser environment
- */
-const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
-/**
- * Check if ResizeObserver is supported
- */
-const supportsResizeObserver = isBrowser && typeof ResizeObserver !== 'undefined';
+const DEFAULT_TWITTER_HEIGHT = 500;
+const DEFAULT_INSTAGRAM_HEIGHT = 600;
 
 /**
  * Social Masonry - Layout Engine
@@ -208,11 +123,11 @@ class LayoutEngine {
         this.options = {
             gap: 16,
             columns: defaultColumnConfig,
-            defaultColumns: 3,
             padding: 0,
             animationDuration: 300,
             animate: true,
-            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            twitterHeight: DEFAULT_TWITTER_HEIGHT,
+            instagramHeight: DEFAULT_INSTAGRAM_HEIGHT,
             ...options,
         };
         this.state = {
@@ -226,9 +141,7 @@ class LayoutEngine {
      * Calculate layout for all posts
      */
     calculate(posts) {
-        const { containerWidth, itemHeights } = this.options;
-        const gap = parseCSSValue(this.options.gap);
-        const padding = parseCSSValue(this.options.padding);
+        const { containerWidth, itemHeights, gap, padding } = this.options;
         // Calculate column count and width
         const columnCount = getColumnCount(this.options.columns, containerWidth);
         const availableWidth = containerWidth - padding * 2;
@@ -239,14 +152,15 @@ class LayoutEngine {
         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);
+            const postId = generatePostId(post);
+            const itemHeight = itemHeights.get(postId) ?? this.getDefaultHeight(post);
             // 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,
+            positions.set(postId, {
+                id: postId,
                 x,
                 y,
                 width: columnWidth,
@@ -267,43 +181,19 @@ class LayoutEngine {
         return this.state;
     }
     /**
-     * Estimate item height based on content
+     * Get default height for embed based on platform
      */
-    estimateHeight(post, columnWidth) {
-        let height = 0;
-        // Header (avatar, name, etc.)
-        height += 56;
-        // Text content
+    getDefaultHeight(post) {
         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;
+            return this.options.twitterHeight;
         }
-        else if (post.platform === 'instagram') {
-            const aspectRatio = post.media.aspectRatio ?? 1;
-            height += columnWidth / aspectRatio;
+        if (post.platform === 'instagram') {
+            return this.options.instagramHeight;
         }
-        // Footer (metrics, timestamp)
-        height += 44;
-        // Padding
-        height += 24;
-        return Math.round(height);
+        return DEFAULT_TWITTER_HEIGHT;
     }
     /**
-     * Update single item height and recalculate affected items
+     * Update single item height
      */
     updateItemHeight(id, height) {
         this.options.itemHeights.set(id, height);
@@ -332,20 +222,6 @@ class LayoutEngine {
     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`,
-        };
-    }
 }
 /**
  * Create a new layout engine instance
@@ -354,1142 +230,5 @@ function createLayoutEngine(options) {
     return new LayoutEngine(options);
 }
 
-/**
- * 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,
-        };
-        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)
-            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,
-                });
-            }
-        }
-        // 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;
-            }
-        }
-        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,
-            });
-        }
-    }
-    /**
-     * 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,
-        };
-    }
-}
-/**
- * Create a new virtualization engine instance
- */
-function createVirtualizationEngine(options) {
-    return new VirtualizationEngine(options);
-}
-
-/**
- * Social Masonry - Card Renderer
- * Renders social media post cards with proper styling
- */
-const DEFAULT_OPTIONS$1 = {
-    variant: 'default',
-    theme: 'auto',
-    borderRadius: 12,
-    showPlatformIcon: true,
-    showAuthor: true,
-    showMetrics: true,
-    showTimestamp: true,
-    formatDate: (date) => formatRelativeTime(date),
-    formatNumber: formatNumber,
-    className: '',
-    hoverEffect: true,
-    imageLoading: 'lazy',
-    fallbackImage: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Crect fill="%23f0f0f0" width="100" height="100"/%3E%3Ctext fill="%23999" font-family="sans-serif" font-size="14" x="50%" y="50%" text-anchor="middle" dy=".3em"%3ENo Image%3C/text%3E%3C/svg%3E',
-};
-class CardRenderer {
-    constructor(options = {}) {
-        this.options = {
-            ...DEFAULT_OPTIONS$1,
-            onPostClick: undefined,
-            onAuthorClick: undefined,
-            onMediaClick: undefined,
-            onImageError: undefined,
-            ...options,
-        };
-    }
-    /**
-     * Render a single card
-     */
-    render(post, position) {
-        const card = document.createElement('div');
-        card.className = this.getCardClasses(post);
-        card.setAttribute('data-post-id', post.id);
-        card.setAttribute('data-platform', post.platform);
-        // Apply position styles
-        Object.assign(card.style, {
-            position: 'absolute',
-            left: `${position.x}px`,
-            top: `${position.y}px`,
-            width: `${position.width}px`,
-            borderRadius: typeof this.options.borderRadius === 'number'
-                ? `${this.options.borderRadius}px`
-                : this.options.borderRadius,
-        });
-        // Build card content
-        card.innerHTML = this.buildCardHTML(post);
-        // Attach event listeners
-        this.attachEventListeners(card, post);
-        return card;
-    }
-    /**
-     * Get CSS classes for card
-     */
-    getCardClasses(post) {
-        const classes = [
-            'sm-card',
-            `sm-card--${post.platform}`,
-            `sm-card--${this.options.variant}`,
-            `sm-card--${this.options.theme}`,
-        ];
-        if (this.options.hoverEffect) {
-            classes.push('sm-card--hover');
-        }
-        if (this.options.className) {
-            classes.push(this.options.className);
-        }
-        return classes.join(' ');
-    }
-    /**
-     * Build card HTML
-     */
-    buildCardHTML(post) {
-        const parts = [];
-        // Platform icon
-        if (this.options.showPlatformIcon) {
-            parts.push(this.renderPlatformIcon(post.platform));
-        }
-        // Header with author
-        if (this.options.showAuthor) {
-            parts.push(this.renderHeader(post));
-        }
-        // Content
-        parts.push(this.renderContent(post));
-        // Media
-        parts.push(this.renderMedia(post));
-        // Footer with metrics
-        if (this.options.showMetrics || this.options.showTimestamp) {
-            parts.push(this.renderFooter(post));
-        }
-        return parts.join('');
-    }
-    /**
-     * Render platform icon
-     */
-    renderPlatformIcon(platform) {
-        const icons = {
-            twitter: `<svg viewBox="0 0 24 24" class="sm-platform-icon sm-platform-icon--twitter"><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"/></svg>`,
-            instagram: `<svg viewBox="0 0 24 24" class="sm-platform-icon sm-platform-icon--instagram"><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"/></svg>`,
-        };
-        return `<div class="sm-card__platform-icon">${icons[platform] || ''}</div>`;
-    }
-    /**
-     * Render card header
-     */
-    renderHeader(post) {
-        const author = post.author;
-        const avatarUrl = author.avatarUrl || this.options.fallbackImage;
-        const verifiedBadge = author.verified
-            ? `<svg class="sm-card__verified" viewBox="0 0 24 24"><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"/></svg>`
-            : '';
-        return `
-      <div class="sm-card__header">
-        <img 
-          src="${avatarUrl}" 
-          alt="${author.displayName || author.username}" 
-          class="sm-card__avatar"
-          loading="${this.options.imageLoading}"
-          onerror="this.src='${this.options.fallbackImage}'"
-        />
-        <div class="sm-card__author">
-          <span class="sm-card__author-name">
-            ${author.displayName || author.username}
-            ${verifiedBadge}
-          </span>
-          <span class="sm-card__author-handle">@${author.username}</span>
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * Render card content
-     */
-    renderContent(post) {
-        if (isTwitterPost(post)) {
-            return this.renderTwitterContent(post);
-        }
-        else if (isInstagramPost(post)) {
-            return this.renderInstagramContent(post);
-        }
-        return '';
-    }
-    /**
-     * Render Twitter content
-     */
-    renderTwitterContent(post) {
-        const text = post.content.html || this.linkifyText(post.content.text);
-        let quotedPost = '';
-        if (post.quotedPost) {
-            quotedPost = `
-        <div class="sm-card__quoted">
-          <div class="sm-card__quoted-header">
-            <span class="sm-card__quoted-name">${post.quotedPost.author.displayName}</span>
-            <span class="sm-card__quoted-handle">@${post.quotedPost.author.username}</span>
-          </div>
-          <div class="sm-card__quoted-text">${post.quotedPost.content.text}</div>
-        </div>
-      `;
-        }
-        return `
-      <div class="sm-card__content">
-        <p class="sm-card__text">${text}</p>
-        ${quotedPost}
-      </div>
-    `;
-    }
-    /**
-     * Render Instagram content
-     */
-    renderInstagramContent(post) {
-        if (!post.content.caption)
-            return '';
-        // Truncate caption if too long
-        const maxLength = 150;
-        let caption = post.content.caption;
-        let showMore = false;
-        if (caption.length > maxLength) {
-            caption = caption.substring(0, maxLength);
-            showMore = true;
-        }
-        return `
-      <div class="sm-card__content">
-        <p class="sm-card__caption">
-          ${this.linkifyText(caption)}${showMore ? '<span class="sm-card__more">... more</span>' : ''}
-        </p>
-      </div>
-    `;
-    }
-    /**
-     * Render media
-     */
-    renderMedia(post) {
-        if (isTwitterPost(post)) {
-            return this.renderTwitterMedia(post);
-        }
-        else if (isInstagramPost(post)) {
-            return this.renderInstagramMedia(post);
-        }
-        return '';
-    }
-    /**
-     * Render Twitter media
-     */
-    renderTwitterMedia(post) {
-        if (!post.media?.length)
-            return '';
-        const mediaCount = post.media.length;
-        const gridClass = mediaCount > 1 ? `sm-card__media-grid sm-card__media-grid--${Math.min(mediaCount, 4)}` : '';
-        const mediaItems = post.media.slice(0, 4).map((media, index) => {
-            if (media.type === 'video' || media.type === 'gif') {
-                return `
-          <div class="sm-card__media-item sm-card__media-item--video" data-index="${index}">
-            <img 
-              src="${media.thumbnailUrl || media.url}" 
-              alt="Video thumbnail"
-              loading="${this.options.imageLoading}"
-              onerror="this.src='${this.options.fallbackImage}'"
-            />
-            <div class="sm-card__play-button">
-              <svg viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
-            </div>
-          </div>
-        `;
-            }
-            return `
-        <div class="sm-card__media-item" data-index="${index}">
-          <img 
-            src="${media.url}" 
-            alt="Post media"
-            loading="${this.options.imageLoading}"
-            onerror="this.src='${this.options.fallbackImage}'"
-          />
-        </div>
-      `;
-        }).join('');
-        return `<div class="sm-card__media ${gridClass}">${mediaItems}</div>`;
-    }
-    /**
-     * Render Instagram media
-     */
-    renderInstagramMedia(post) {
-        const media = post.media;
-        const aspectRatio = media.aspectRatio || 1;
-        if (media.type === 'carousel' && media.carouselItems?.length) {
-            return `
-        <div class="sm-card__media sm-card__carousel" style="aspect-ratio: ${aspectRatio}">
-          <img 
-            src="${media.carouselItems[0].url}" 
-            alt="Post media"
-            loading="${this.options.imageLoading}"
-            onerror="this.src='${this.options.fallbackImage}'"
-          />
-          <div class="sm-card__carousel-indicator">
-            <svg viewBox="0 0 24 24"><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"/></svg>
-          </div>
-        </div>
-      `;
-        }
-        if (media.type === 'video') {
-            return `
-        <div class="sm-card__media sm-card__media--video" style="aspect-ratio: ${aspectRatio}">
-          <img 
-            src="${media.thumbnailUrl || media.url}" 
-            alt="Video thumbnail"
-            loading="${this.options.imageLoading}"
-            onerror="this.src='${this.options.fallbackImage}'"
-          />
-          <div class="sm-card__play-button">
-            <svg viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
-          </div>
-        </div>
-      `;
-        }
-        return `
-      <div class="sm-card__media" style="aspect-ratio: ${aspectRatio}">
-        <img 
-          src="${media.url}" 
-          alt="Post media"
-          loading="${this.options.imageLoading}"
-          onerror="this.src='${this.options.fallbackImage}'"
-        />
-      </div>
-    `;
-    }
-    /**
-     * Render footer with metrics
-     */
-    renderFooter(post) {
-        const parts = [];
-        if (this.options.showMetrics && post.metrics) {
-            parts.push(this.renderMetrics(post));
-        }
-        if (this.options.showTimestamp) {
-            const date = post.createdAt instanceof Date
-                ? post.createdAt
-                : new Date(post.createdAt);
-            parts.push(`
-        <time class="sm-card__timestamp" datetime="${date.toISOString()}">
-          ${this.options.formatDate(date)}
-        </time>
-      `);
-        }
-        return `<div class="sm-card__footer">${parts.join('')}</div>`;
-    }
-    /**
-     * Render metrics
-     */
-    renderMetrics(post) {
-        if (!post.metrics)
-            return '';
-        const formatNum = this.options.formatNumber;
-        if (isTwitterPost(post)) {
-            const metrics = post.metrics;
-            return `
-        <div class="sm-card__metrics">
-          ${metrics.replies !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><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"/></svg>
-              ${formatNum(metrics.replies)}
-            </span>
-          ` : ''}
-          ${metrics.retweets !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><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"/></svg>
-              ${formatNum(metrics.retweets)}
-            </span>
-          ` : ''}
-          ${metrics.likes !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><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"/></svg>
-              ${formatNum(metrics.likes)}
-            </span>
-          ` : ''}
-          ${metrics.views !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"/></svg>
-              ${formatNum(metrics.views)}
-            </span>
-          ` : ''}
-        </div>
-      `;
-        }
-        if (isInstagramPost(post)) {
-            const metrics = post.metrics;
-            return `
-        <div class="sm-card__metrics">
-          ${metrics.likes !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><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"/></svg>
-              ${formatNum(metrics.likes)}
-            </span>
-          ` : ''}
-          ${metrics.comments !== undefined ? `
-            <span class="sm-card__metric">
-              <svg viewBox="0 0 24 24"><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"/></svg>
-              ${formatNum(metrics.comments)}
-            </span>
-          ` : ''}
-        </div>
-      `;
-        }
-        return '';
-    }
-    /**
-     * Linkify text (URLs, mentions, hashtags)
-     */
-    linkifyText(text) {
-        // Escape HTML
-        let result = text
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-        // URLs
-        result = result.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer" class="sm-card__link">$1</a>');
-        // Mentions
-        result = result.replace(/@(\w+)/g, '<a href="#" class="sm-card__mention" data-username="$1">@$1</a>');
-        // Hashtags
-        result = result.replace(/#(\w+)/g, '<a href="#" class="sm-card__hashtag" data-tag="$1">#$1</a>');
-        return result;
-    }
-    /**
-     * Attach event listeners
-     */
-    attachEventListeners(card, post) {
-        // Post click
-        if (this.options.onPostClick) {
-            card.addEventListener('click', (e) => {
-                // Don't fire for links, buttons, etc.
-                const target = e.target;
-                if (target.tagName === 'A' || target.closest('a'))
-                    return;
-                this.options.onPostClick?.(post, e);
-            });
-            card.style.cursor = 'pointer';
-        }
-        // Author click
-        if (this.options.onAuthorClick) {
-            const header = card.querySelector('.sm-card__header');
-            if (header) {
-                header.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this.options.onAuthorClick?.(post, e);
-                });
-                header.style.cursor = 'pointer';
-            }
-        }
-        // Media click
-        if (this.options.onMediaClick) {
-            const mediaItems = card.querySelectorAll('.sm-card__media-item');
-            mediaItems.forEach((item) => {
-                item.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const index = parseInt(item.dataset.index || '0', 10);
-                    this.options.onMediaClick?.(post, index, e);
-                });
-                item.style.cursor = 'pointer';
-            });
-        }
-        // Image error handling
-        if (this.options.onImageError) {
-            const images = card.querySelectorAll('img');
-            images.forEach((img) => {
-                img.addEventListener('error', () => {
-                    this.options.onImageError?.(post, new Error('Image failed to load'));
-                });
-            });
-        }
-    }
-    /**
-     * Update card position
-     */
-    updatePosition(card, position) {
-        Object.assign(card.style, {
-            left: `${position.x}px`,
-            top: `${position.y}px`,
-            width: `${position.width}px`,
-        });
-    }
-    /**
-     * Update options
-     */
-    setOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-}
-/**
- * Create a new card renderer instance
- */
-function createCardRenderer(options) {
-    return new CardRenderer(options);
-}
-
-/**
- * Social Masonry - Main Class
- * Beautiful masonry layout for X (Twitter) and Instagram embeds
- */
-const DEFAULT_OPTIONS = {
-    // Layout
-    gap: 16,
-    columns: defaultColumnConfig,
-    defaultColumns: 3,
-    padding: 0,
-    animationDuration: 300,
-    animate: true,
-    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    // Card
-    variant: 'default',
-    theme: 'auto',
-    borderRadius: 12,
-    showPlatformIcon: true,
-    showAuthor: true,
-    showMetrics: true,
-    showTimestamp: true,
-    hoverEffect: true,
-    imageLoading: 'lazy',
-    // Virtualization
-    virtualization: {
-        enabled: false,
-        overscan: 3,
-        estimatedItemHeight: 400,
-        scrollContainer: null,
-    },
-    // Infinite scroll
-    loadMoreThreshold: 500,
-    showLoading: true,
-    // Debug
-    debug: false,
-};
-class SocialMasonry {
-    constructor(options) {
-        this.posts = [];
-        this.virtualizationEngine = null;
-        this.cards = new Map();
-        this.itemHeights = new Map();
-        this.resizeObserver = null;
-        this.isLoading = false;
-        if (!isBrowser) {
-            throw new Error('SocialMasonry requires a browser environment');
-        }
-        this.instanceId = generateId();
-        this.options = { ...DEFAULT_OPTIONS, ...options };
-        // Get container element
-        const container = typeof options.container === 'string'
-            ? document.querySelector(options.container)
-            : options.container;
-        if (!container) {
-            throw new Error('Container element not found');
-        }
-        this.container = container;
-        this.posts = options.posts || [];
-        // Initialize layout engine
-        this.layoutEngine = new LayoutEngine({
-            ...this.options,
-            containerWidth: this.container.clientWidth,
-            itemHeights: this.itemHeights,
-        });
-        // Initialize card renderer
-        this.cardRenderer = new CardRenderer({
-            ...this.options,
-        });
-        // Initialize virtualization if enabled
-        if (this.options.virtualization?.enabled) {
-            this.initVirtualization();
-        }
-        // Setup
-        this.setupContainer();
-        this.setupResizeObserver();
-        this.render();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Initialized', {
-                instanceId: this.instanceId,
-                posts: this.posts.length,
-                containerWidth: this.container.clientWidth,
-            });
-        }
-    }
-    /**
-     * Setup container styles
-     */
-    setupContainer() {
-        this.container.classList.add('sm-container');
-        this.container.setAttribute('data-sm-instance', this.instanceId);
-        Object.assign(this.container.style, {
-            position: 'relative',
-            width: '100%',
-        });
-    }
-    /**
-     * Setup resize observer
-     */
-    setupResizeObserver() {
-        if (!supportsResizeObserver) {
-            // Fallback to window resize
-            window.addEventListener('resize', debounce(() => this.handleResize(), 150));
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(debounce((entries) => {
-            for (const entry of entries) {
-                if (entry.target === this.container) {
-                    this.handleResize();
-                }
-            }
-        }, 150));
-        this.resizeObserver.observe(this.container);
-    }
-    /**
-     * Handle container resize
-     */
-    handleResize() {
-        const newWidth = this.container.clientWidth;
-        this.layoutEngine.setContainerWidth(newWidth);
-        this.recalculateLayout();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Resize', { width: newWidth });
-        }
-    }
-    /**
-     * Initialize virtualization
-     */
-    initVirtualization() {
-        const state = this.layoutEngine.getState();
-        this.virtualizationEngine = new VirtualizationEngine({
-            ...this.options.virtualization,
-            posts: this.posts,
-            positions: state.positions,
-            onVisibleItemsChange: (items) => this.handleVisibleItemsChange(items),
-        });
-        this.virtualizationEngine.init();
-        // Setup infinite scroll
-        if (this.options.onLoadMore) {
-            this.setupInfiniteScroll();
-        }
-    }
-    /**
-     * Handle visible items change (for virtualization)
-     */
-    handleVisibleItemsChange(items) {
-        const visibleIds = new Set(items.map(item => item.post.id));
-        // Remove cards that are no longer visible
-        for (const [id, card] of this.cards) {
-            if (!visibleIds.has(id)) {
-                card.remove();
-                this.cards.delete(id);
-            }
-        }
-        // Add new visible cards
-        for (const item of items) {
-            if (!this.cards.has(item.post.id)) {
-                this.renderCard(item.post, item.position);
-            }
-        }
-    }
-    /**
-     * Setup infinite scroll
-     */
-    setupInfiniteScroll() {
-        const checkLoadMore = () => {
-            if (!this.isLoading &&
-                this.virtualizationEngine?.isNearBottom(this.options.loadMoreThreshold || 500)) {
-                this.loadMore();
-            }
-        };
-        const scrollContainer = this.options.virtualization?.scrollContainer ?? window;
-        scrollContainer.addEventListener('scroll', checkLoadMore, { passive: true });
-    }
-    /**
-     * Load more posts
-     */
-    async loadMore() {
-        if (this.isLoading || !this.options.onLoadMore)
-            return;
-        this.isLoading = true;
-        this.showLoadingIndicator();
-        try {
-            await this.options.onLoadMore();
-        }
-        finally {
-            this.isLoading = false;
-            this.hideLoadingIndicator();
-        }
-    }
-    /**
-     * Show loading indicator
-     */
-    showLoadingIndicator() {
-        if (!this.options.showLoading)
-            return;
-        let loader = this.container.querySelector('.sm-loader');
-        if (!loader) {
-            loader = document.createElement('div');
-            loader.className = 'sm-loader';
-            if (this.options.loadingElement) {
-                if (typeof this.options.loadingElement === 'string') {
-                    loader.innerHTML = this.options.loadingElement;
-                }
-                else {
-                    loader.appendChild(this.options.loadingElement.cloneNode(true));
-                }
-            }
-            else {
-                loader.innerHTML = `
-          <div class="sm-loader__spinner">
-            <div></div><div></div><div></div>
-          </div>
-        `;
-            }
-            this.container.appendChild(loader);
-        }
-        loader.style.display = 'flex';
-    }
-    /**
-     * Hide loading indicator
-     */
-    hideLoadingIndicator() {
-        const loader = this.container.querySelector('.sm-loader');
-        if (loader) {
-            loader.style.display = 'none';
-        }
-    }
-    /**
-     * Render all posts
-     */
-    render() {
-        // Calculate layout
-        const state = this.layoutEngine.calculate(this.posts);
-        // Update container height
-        this.container.style.height = `${state.containerHeight}px`;
-        // Apply CSS variables
-        const cssVars = this.layoutEngine.getCSSVariables();
-        for (const [key, value] of Object.entries(cssVars)) {
-            this.container.style.setProperty(key, value);
-        }
-        // Render cards
-        if (this.virtualizationEngine) {
-            // Virtualized rendering
-            this.virtualizationEngine.update(this.posts, state.positions);
-            const visibleItems = this.virtualizationEngine.calculateVisibleItems();
-            this.handleVisibleItemsChange(visibleItems);
-        }
-        else {
-            // Full rendering
-            for (const post of this.posts) {
-                const position = state.positions.get(post.id);
-                if (position) {
-                    this.renderCard(post, position);
-                }
-            }
-        }
-        // Show empty state if no posts
-        if (this.posts.length === 0) {
-            this.showEmptyState();
-        }
-        else {
-            this.hideEmptyState();
-        }
-        // Callback
-        this.options.onLayoutComplete?.(Array.from(state.positions.values()));
-    }
-    /**
-     * Render a single card
-     */
-    renderCard(post, position) {
-        let card = this.cards.get(post.id);
-        if (card) {
-            // Update existing card position
-            this.cardRenderer.updatePosition(card, position);
-        }
-        else {
-            // Create new card
-            card = this.cardRenderer.render(post, position);
-            this.container.appendChild(card);
-            this.cards.set(post.id, card);
-            // Measure actual height after render
-            requestAnimationFrame(() => {
-                if (card) {
-                    const actualHeight = card.offsetHeight;
-                    if (actualHeight !== position.height) {
-                        this.itemHeights.set(post.id, actualHeight);
-                        this.recalculateLayout();
-                    }
-                }
-            });
-        }
-    }
-    /**
-     * Recalculate layout
-     */
-    recalculateLayout() {
-        const state = this.layoutEngine.calculate(this.posts);
-        this.container.style.height = `${state.containerHeight}px`;
-        // Update virtualization
-        if (this.virtualizationEngine) {
-            this.virtualizationEngine.update(this.posts, state.positions);
-        }
-        // Update card positions with animation
-        for (const [id, card] of this.cards) {
-            const position = state.positions.get(id);
-            if (position) {
-                if (this.options.animate) {
-                    card.style.transition = `left ${this.options.animationDuration}ms ${this.options.easing}, top ${this.options.animationDuration}ms ${this.options.easing}, width ${this.options.animationDuration}ms ${this.options.easing}`;
-                }
-                this.cardRenderer.updatePosition(card, position);
-            }
-        }
-        this.options.onLayoutComplete?.(Array.from(state.positions.values()));
-    }
-    /**
-     * Show empty state
-     */
-    showEmptyState() {
-        let empty = this.container.querySelector('.sm-empty');
-        if (!empty) {
-            empty = document.createElement('div');
-            empty.className = 'sm-empty';
-            if (this.options.emptyElement) {
-                if (typeof this.options.emptyElement === 'string') {
-                    empty.innerHTML = this.options.emptyElement;
-                }
-                else {
-                    empty.appendChild(this.options.emptyElement.cloneNode(true));
-                }
-            }
-            else {
-                empty.textContent = this.options.emptyMessage || 'No posts to display';
-            }
-            this.container.appendChild(empty);
-        }
-        empty.style.display = 'flex';
-    }
-    /**
-     * Hide empty state
-     */
-    hideEmptyState() {
-        const empty = this.container.querySelector('.sm-empty');
-        if (empty) {
-            empty.style.display = 'none';
-        }
-    }
-    // ============================================
-    // Public API
-    // ============================================
-    /**
-     * Add posts
-     */
-    addPosts(posts) {
-        this.posts = [...this.posts, ...posts];
-        this.render();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Added posts', { count: posts.length, total: this.posts.length });
-        }
-    }
-    /**
-     * Set posts (replace all)
-     */
-    setPosts(posts) {
-        // Clear existing cards
-        for (const card of this.cards.values()) {
-            card.remove();
-        }
-        this.cards.clear();
-        this.itemHeights.clear();
-        this.posts = posts;
-        this.render();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Set posts', { count: posts.length });
-        }
-    }
-    /**
-     * Remove post
-     */
-    removePost(id) {
-        const card = this.cards.get(id);
-        if (card) {
-            card.remove();
-            this.cards.delete(id);
-        }
-        this.itemHeights.delete(id);
-        this.posts = this.posts.filter(p => p.id !== id);
-        this.recalculateLayout();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Removed post', { id });
-        }
-    }
-    /**
-     * Update options
-     */
-    setOptions(options) {
-        this.options = { ...this.options, ...options };
-        this.cardRenderer.setOptions(options);
-        this.recalculateLayout();
-    }
-    /**
-     * Get layout state
-     */
-    getLayoutState() {
-        return this.layoutEngine.getState();
-    }
-    /**
-     * Get posts
-     */
-    getPosts() {
-        return [...this.posts];
-    }
-    /**
-     * Scroll to post
-     */
-    scrollToPost(id, behavior = 'smooth') {
-        if (this.virtualizationEngine) {
-            this.virtualizationEngine.scrollToItem(id, behavior);
-        }
-        else {
-            const position = this.layoutEngine.getPosition(id);
-            if (position) {
-                window.scrollTo({
-                    top: position.y,
-                    behavior,
-                });
-            }
-        }
-    }
-    /**
-     * Refresh layout
-     */
-    refresh() {
-        this.itemHeights.clear();
-        this.recalculateLayout();
-    }
-    /**
-     * Destroy instance
-     */
-    destroy() {
-        // Remove cards
-        for (const card of this.cards.values()) {
-            card.remove();
-        }
-        this.cards.clear();
-        // Remove observers
-        this.resizeObserver?.disconnect();
-        // Destroy virtualization
-        this.virtualizationEngine?.destroy();
-        // Clean up container
-        this.container.classList.remove('sm-container');
-        this.container.removeAttribute('data-sm-instance');
-        this.container.style.cssText = '';
-        // Remove internal elements
-        const loader = this.container.querySelector('.sm-loader');
-        const empty = this.container.querySelector('.sm-empty');
-        loader?.remove();
-        empty?.remove();
-        if (this.options.debug) {
-            console.log('[SocialMasonry] Destroyed', { instanceId: this.instanceId });
-        }
-    }
-}
-/**
- * Create a new SocialMasonry instance
- */
-function createSocialMasonry(options) {
-    return new SocialMasonry(options);
-}
-
-export { CardRenderer, LayoutEngine, SocialMasonry, VirtualizationEngine, createCardRenderer, createLayoutEngine, createSocialMasonry, createVirtualizationEngine, SocialMasonry as default, defaultColumnConfig, formatNumber, formatRelativeTime, isInstagramPost, isTwitterPost };
+export { DEFAULT_INSTAGRAM_HEIGHT, DEFAULT_TWITTER_HEIGHT, LayoutEngine, createLayoutEngine, defaultColumnConfig, detectPlatform, extractInstagramId, extractTweetId, generatePostId, getColumnCount, getInstagramEmbedUrl, getTwitterEmbedUrl };
 //# sourceMappingURL=index.esm.js.map