social-masonry 1.0.0

package/dist/index.js

@@ -0,0 +1,1512 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Social Masonry - Utility Functions
+ */
+/**
+ * Debounce function execution
+ */
+// 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);
+    };
+}
+/**
+ * Throttle function execution
+ */
+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;
+        }
+    };
+}
+/**
+ * Get number of columns based on viewport width
+ */
+function getColumnCount(columns, containerWidth) {
+    if (typeof columns === 'number') {
+        return columns;
+    }
+    // Sort by minWidth descending
+    const sorted = [...columns].sort((a, b) => b.minWidth - a.minWidth);
+    for (const config of sorted) {
+        if (containerWidth >= config.minWidth) {
+            return config.columns;
+        }
+    }
+    // Return smallest breakpoint's columns or default to 1
+    return sorted[sorted.length - 1]?.columns ?? 1;
+}
+/**
+ * Default responsive column configuration
+ */
+const defaultColumnConfig = [
+    { columns: 4, minWidth: 1200 },
+    { columns: 3, minWidth: 900 },
+    { 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;
+    }
+}
+/**
+ * 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';
+
+/**
+ * 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;
+        }
+        // Remove last gap from column heights
+        const containerHeight = Math.max(...columnHeights.map(h => h - gap), 0);
+        this.state = {
+            positions,
+            columnHeights,
+            containerHeight,
+            columnWidth,
+        };
+        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;
+        }
+        // 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`,
+        };
+    }
+}
+/**
+ * Create a new layout engine instance
+ */
+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);
+}
+
+exports.CardRenderer = CardRenderer;
+exports.LayoutEngine = LayoutEngine;
+exports.SocialMasonry = SocialMasonry;
+exports.VirtualizationEngine = VirtualizationEngine;
+exports.createCardRenderer = createCardRenderer;
+exports.createLayoutEngine = createLayoutEngine;
+exports.createSocialMasonry = createSocialMasonry;
+exports.createVirtualizationEngine = createVirtualizationEngine;
+exports.default = SocialMasonry;
+exports.defaultColumnConfig = defaultColumnConfig;
+exports.formatNumber = formatNumber;
+exports.formatRelativeTime = formatRelativeTime;
+exports.isInstagramPost = isInstagramPost;
+exports.isTwitterPost = isTwitterPost;
+//# sourceMappingURL=index.js.map