lazy-render-virtual-scroll 1.0.7 → 1.0.9

package/dist/esm/vanilla/index.js

@@ -0,0 +1,1666 @@
+class WindowManager {
+    constructor(itemHeight, viewportHeight, bufferSize = 5) {
+        this.itemHeight = itemHeight;
+        this.viewportHeight = viewportHeight;
+        this.bufferSize = bufferSize;
+    }
+    /**
+     * Calculate the visible range based on scroll position
+     */
+    calculateVisibleRange(scrollTop) {
+        // Calculate how many items fit in the viewport
+        const itemsPerViewport = Math.ceil(this.viewportHeight / this.itemHeight);
+        // Calculate the starting index based on scroll position
+        const startIndex = Math.floor(scrollTop / this.itemHeight);
+        // Calculate the ending index with buffer
+        const endIndex = Math.min(startIndex + itemsPerViewport + this.bufferSize, Number.MAX_SAFE_INTEGER // Will be limited by total items later
+        );
+        return {
+            start: Math.max(0, startIndex - this.bufferSize),
+            end: endIndex
+        };
+    }
+    /**
+     * Update viewport height if it changes
+     */
+    updateViewportHeight(height) {
+        this.viewportHeight = height;
+    }
+    /**
+     * Update item height if it changes
+     */
+    updateItemHeight(height) {
+        this.itemHeight = height;
+    }
+    /**
+     * Update buffer size if it changes
+     */
+    updateBufferSize(size) {
+        this.bufferSize = size;
+    }
+}
+
+class PrefetchManager {
+    /**
+     * This class is kept for backward compatibility
+     * Intelligent prefetching is now handled in the Engine class
+     */
+    constructor() { }
+    /**
+     * Legacy method - not used in intelligent mode
+     */
+    shouldPrefetch(visibleEnd, totalLoaded) {
+        // Simple rule: if visible end is approaching the loaded boundary, fetch more
+        return visibleEnd >= totalLoaded - 5; // Default buffer
+    }
+    /**
+     * Update buffer size if it changes (for backward compatibility)
+     */
+    updateBufferSize(size) {
+        // This method exists for backward compatibility
+        // Intelligent prefetching is now handled in the Engine class
+    }
+}
+
+class RequestQueue {
+    constructor(maxConcurrent = 1) {
+        this.queue = [];
+        this.processing = false;
+        this.maxConcurrent = maxConcurrent;
+    }
+    /**
+     * Add a request to the queue
+     */
+    add(requestFn) {
+        return new Promise((resolve, reject) => {
+            this.queue.push(() => requestFn().then(resolve).catch(reject));
+            // Start processing if not already processing
+            if (!this.processing) {
+                this.processQueue();
+            }
+        });
+    }
+    /**
+     * Process the queue
+     */
+    async processQueue() {
+        if (this.queue.length === 0) {
+            this.processing = false;
+            return;
+        }
+        this.processing = true;
+        // Process up to maxConcurrent requests
+        const concurrentRequests = [];
+        const count = Math.min(this.maxConcurrent, this.queue.length);
+        for (let i = 0; i < count; i++) {
+            const requestFn = this.queue.shift();
+            if (requestFn) {
+                concurrentRequests.push(requestFn());
+            }
+        }
+        try {
+            await Promise.all(concurrentRequests);
+        }
+        catch (error) {
+            console.error('Request queue error:', error);
+        }
+        // Process remaining items
+        await this.processQueue();
+    }
+    /**
+     * Clear the queue
+     */
+    clear() {
+        this.queue = [];
+    }
+    /**
+     * Get the current queue length
+     */
+    getLength() {
+        return this.queue.length;
+    }
+}
+
+class IntelligentScrollDetector {
+    constructor() {
+        this.lastScrollTop = 0;
+        this.lastTime = 0;
+        this.velocityHistory = [];
+        this.HISTORY_SIZE = 5;
+        this.scrollTimeout = null;
+        this.isIdle = true;
+        this.lastTime = performance.now();
+    }
+    // Calculate velocity from scroll event
+    calculateVelocity(scrollTop) {
+        const now = performance.now();
+        const deltaY = scrollTop - this.lastScrollTop;
+        const deltaTime = now - this.lastTime;
+        // Calculate velocity (pixels per millisecond)
+        const velocity = deltaTime > 0 ? deltaY / deltaTime : 0;
+        // Store in history for smoothing
+        this.velocityHistory.push(velocity);
+        if (this.velocityHistory.length > this.HISTORY_SIZE) {
+            this.velocityHistory.shift();
+        }
+        // Update for next calculation
+        this.lastScrollTop = scrollTop;
+        this.lastTime = now;
+        // Update idle state
+        this.isIdle = false;
+        this.resetIdleTimer();
+        // Return smoothed velocity (average of recent values)
+        return this.getAverageVelocity();
+    }
+    // Get smoothed velocity from history
+    getAverageVelocity() {
+        if (this.velocityHistory.length === 0)
+            return 0;
+        const sum = this.velocityHistory.reduce((acc, vel) => acc + vel, 0);
+        return sum / this.velocityHistory.length;
+    }
+    // Determine scroll direction from velocity
+    getDirection(velocity) {
+        if (Math.abs(velocity) < 0.1)
+            return 'stationary';
+        return velocity > 0 ? 'down' : 'up';
+    }
+    // Calculate buffer size based on scroll velocity
+    calculateBuffer(velocity) {
+        const absVelocity = Math.abs(velocity);
+        if (absVelocity > 1.5) {
+            return 20; // Large buffer for fast scrolling
+        }
+        else if (absVelocity > 1.0) {
+            return 10; // Medium buffer
+        }
+        else if (absVelocity > 0.3) {
+            return 7; // Small buffer for medium scrolling
+        }
+        else {
+            return 5; // Minimal buffer when nearly stationary
+        }
+    }
+    // Calculate prefetch distance based on velocity
+    calculatePrefetchDistance(velocity) {
+        const absVelocity = Math.abs(velocity);
+        if (absVelocity > 2.0)
+            return 1200; // Far ahead for fast scrolling
+        if (absVelocity > 1.0)
+            return 800; // Medium distance
+        if (absVelocity > 0.3)
+            return 400; // Close distance for slow scroll
+        return 200; // Minimal prefetch when nearly stationary
+    }
+    // Predict where user will be in X milliseconds
+    predictPosition(currentPosition, velocity, msAhead = 500) {
+        return currentPosition + (velocity * msAhead);
+    }
+    // Check if user is currently idle
+    getIsIdle() {
+        return this.isIdle;
+    }
+    // Reset idle timer
+    resetIdleTimer() {
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+        this.scrollTimeout = window.setTimeout(() => {
+            this.isIdle = true;
+        }, 150); // 150ms after last scroll = idle
+    }
+    // Clean up resources
+    cleanup() {
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+    }
+}
+
+class NetworkSpeedDetector {
+    constructor() {
+        this.bandwidthHistory = [];
+        this.latencyHistory = [];
+        this.HISTORY_SIZE = 5;
+    }
+    // Estimate available bandwidth
+    async estimateBandwidth() {
+        const startTime = performance.now();
+        const testData = new Array(10000).fill('test_data').join('');
+        try {
+            // Send test request to measure bandwidth
+            const response = await fetch('/api/network-test', {
+                method: 'POST',
+                body: testData
+            });
+            const endTime = performance.now();
+            const duration = (endTime - startTime) / 1000; // seconds
+            const dataSize = testData.length; // bytes
+            const bandwidth = dataSize / duration; // bytes per second
+            this.bandwidthHistory.push(bandwidth);
+            if (this.bandwidthHistory.length > this.HISTORY_SIZE) {
+                this.bandwidthHistory.shift();
+            }
+            return this.getAverageBandwidth();
+        }
+        catch (error) {
+            // If network test fails, return a conservative estimate
+            return 100000; // 100 KB/s as fallback
+        }
+    }
+    // Measure network latency
+    async measureLatency() {
+        try {
+            const startTime = performance.now();
+            await fetch('/api/ping');
+            const endTime = performance.now();
+            const latency = endTime - startTime;
+            this.latencyHistory.push(latency);
+            if (this.latencyHistory.length > this.HISTORY_SIZE) {
+                this.latencyHistory.shift();
+            }
+            return this.getAverageLatency();
+        }
+        catch (error) {
+            // If ping fails, return a high latency as fallback
+            return 1000; // 1 second as fallback
+        }
+    }
+    // Assess overall connection quality
+    async assessConnectionQuality() {
+        try {
+            const [bandwidth, latency] = await Promise.all([
+                this.estimateBandwidth(),
+                this.measureLatency()
+            ]);
+            if (latency > 1000)
+                return 'poor'; // High latency
+            if (bandwidth < 100000)
+                return 'poor'; // Low bandwidth (< 100 KB/s)
+            if (latency > 500 || bandwidth < 500000)
+                return 'good'; // Moderate
+            return 'excellent'; // Fast and responsive
+        }
+        catch (_a) {
+            return 'offline';
+        }
+    }
+    getAverageBandwidth() {
+        if (this.bandwidthHistory.length === 0)
+            return 0;
+        const sum = this.bandwidthHistory.reduce((a, b) => a + b, 0);
+        return sum / this.bandwidthHistory.length;
+    }
+    getAverageLatency() {
+        if (this.latencyHistory.length === 0)
+            return 0;
+        const sum = this.latencyHistory.reduce((a, b) => a + b, 0);
+        return sum / this.latencyHistory.length;
+    }
+    // Get current network statistics
+    getNetworkStats() {
+        return {
+            bandwidth: this.getAverageBandwidth(),
+            latency: this.getAverageLatency(),
+            history: [...this.bandwidthHistory]
+        };
+    }
+}
+
+class NetworkAwarePrefetchManager {
+    constructor(networkDetector) {
+        this.basePrefetchDistance = 400; // Base prefetch distance in pixels
+        this.networkDetector = networkDetector;
+    }
+    // Calculate prefetch distance based on network conditions
+    async calculateNetworkAdjustedPrefetch(velocity) {
+        const connectionQuality = await this.networkDetector.assessConnectionQuality();
+        // Base prefetch distance from scroll velocity
+        let baseDistance = this.basePrefetchDistance;
+        if (Math.abs(velocity) > 2.0)
+            baseDistance = 1200;
+        else if (Math.abs(velocity) > 1.0)
+            baseDistance = 800;
+        else if (Math.abs(velocity) > 0.3)
+            baseDistance = 400;
+        else
+            baseDistance = 200;
+        // Adjust based on network quality
+        switch (connectionQuality) {
+            case 'excellent':
+                return Math.round(baseDistance * 1.5); // Extra prefetch on fast networks
+            case 'good':
+                return Math.round(baseDistance * 1.2); // Slightly more prefetch
+            case 'poor':
+                return Math.round(baseDistance * 0.7); // Less prefetch on slow networks
+            case 'offline':
+                return Math.round(baseDistance * 0.3); // Minimal prefetch when offline
+            default:
+                return baseDistance;
+        }
+    }
+    // Calculate batch size based on network conditions
+    async calculateNetworkAdjustedBatchSize(velocity) {
+        const connectionQuality = await this.networkDetector.assessConnectionQuality();
+        // Base batch size from scroll velocity
+        let baseBatchSize = 10; // Default batch size
+        if (Math.abs(velocity) > 2.0)
+            baseBatchSize = 20; // Fast scroll needs more
+        else if (Math.abs(velocity) > 1.0)
+            baseBatchSize = 15;
+        else if (Math.abs(velocity) > 0.3)
+            baseBatchSize = 10;
+        else
+            baseBatchSize = 5; // Slow scroll needs less
+        // Adjust based on network quality
+        switch (connectionQuality) {
+            case 'excellent':
+                return Math.min(baseBatchSize * 2, 50); // Large batches on fast networks
+            case 'good':
+                return Math.min(baseBatchSize * 1.5, 30); // Medium batches
+            case 'poor':
+                return Math.max(Math.round(baseBatchSize * 0.5), 5); // Small batches on slow networks
+            case 'offline':
+                return Math.max(Math.round(baseBatchSize * 0.3), 3); // Minimal batches when offline
+            default:
+                return baseBatchSize;
+        }
+    }
+    // Determine if prefetch should be delayed based on network conditions
+    async shouldDelayPrefetch() {
+        const connectionQuality = await this.networkDetector.assessConnectionQuality();
+        return connectionQuality === 'poor';
+    }
+}
+
+class NetworkAwareRequestQueue {
+    constructor(networkDetector) {
+        this.queue = [];
+        this.processing = false;
+        this.maxConcurrent = 1;
+        this.offlineQueue = [];
+        this.networkDetector = networkDetector;
+    }
+    // Add request with network-aware concurrency
+    async add(requestFn) {
+        // Adjust concurrency based on network conditions
+        const connectionQuality = await this.networkDetector.assessConnectionQuality();
+        switch (connectionQuality) {
+            case 'excellent':
+                this.maxConcurrent = 3; // Allow more concurrent requests
+                break;
+            case 'good':
+                this.maxConcurrent = 2; // Moderate concurrency
+                break;
+            case 'poor':
+                this.maxConcurrent = 1; // Sequential requests on slow networks
+                break;
+            case 'offline':
+                // Queue for later when online
+                return this.handleOfflineRequest(requestFn);
+            default:
+                this.maxConcurrent = 1;
+        }
+        return new Promise((resolve, reject) => {
+            this.queue.push(() => requestFn().then(resolve).catch(reject));
+            if (!this.processing) {
+                this.processQueue();
+            }
+        });
+    }
+    // Process queue with network-aware concurrency
+    async processQueue() {
+        if (this.queue.length === 0) {
+            this.processing = false;
+            return;
+        }
+        this.processing = true;
+        // Process up to maxConcurrent requests
+        const concurrentRequests = [];
+        const count = Math.min(this.maxConcurrent, this.queue.length);
+        for (let i = 0; i < count; i++) {
+            const requestFn = this.queue.shift();
+            if (requestFn) {
+                concurrentRequests.push(requestFn());
+            }
+        }
+        try {
+            await Promise.all(concurrentRequests);
+        }
+        catch (error) {
+            console.error('Network-aware request queue error:', error);
+        }
+        // Process remaining items
+        await this.processQueue();
+    }
+    // Handle requests when offline
+    async handleOfflineRequest(requestFn) {
+        // Store request for later execution
+        return new Promise((resolve, reject) => {
+            // Add to offline queue
+            this.offlineQueue.push(() => requestFn().then(resolve).catch(reject));
+            // Check for network restoration periodically
+            const checkOnline = () => {
+                if (navigator.onLine) {
+                    // Process offline queue
+                    this.processOfflineQueue();
+                    resolve(null); // Resolve with null since we can't return the actual result
+                }
+                else {
+                    setTimeout(checkOnline, 5000); // Check again in 5 seconds
+                }
+            };
+            checkOnline();
+        });
+    }
+    // Process offline queue when back online
+    async processOfflineQueue() {
+        const offlineRequests = [...this.offlineQueue];
+        this.offlineQueue = [];
+        for (const requestFn of offlineRequests) {
+            try {
+                await requestFn();
+            }
+            catch (error) {
+                console.error('Offline request failed:', error);
+                // Add back to offline queue for retry
+                this.offlineQueue.push(requestFn);
+            }
+        }
+    }
+    // Get current queue status
+    getQueueStatus() {
+        return {
+            pending: this.queue.length,
+            offline: this.offlineQueue.length,
+            maxConcurrent: this.maxConcurrent
+        };
+    }
+    // Clear all queues
+    clear() {
+        this.queue = [];
+        this.offlineQueue = [];
+        this.processing = false;
+    }
+}
+
+class DevicePerformanceMonitor {
+    constructor() {
+        this.frameRateHistory = [];
+        this.memoryUsageHistory = [];
+        this.gcMonitoring = false;
+        this.HISTORY_SIZE = 10;
+        this.setupPerformanceMonitoring();
+    }
+    // Monitor frame rate
+    async getFrameRate() {
+        return new Promise(resolve => {
+            const start = performance.now();
+            let frames = 0;
+            const measure = () => {
+                frames++;
+                if (frames >= 60) { // Measure over 60 frames
+                    const elapsed = performance.now() - start;
+                    const fps = Math.round((frames / elapsed) * 1000);
+                    this.frameRateHistory.push(fps);
+                    if (this.frameRateHistory.length > this.HISTORY_SIZE) {
+                        this.frameRateHistory.shift();
+                    }
+                    resolve(fps);
+                }
+                else {
+                    requestAnimationFrame(measure);
+                }
+            };
+            requestAnimationFrame(measure);
+        });
+    }
+    // Get average frame rate
+    getAverageFrameRate() {
+        if (this.frameRateHistory.length === 0)
+            return 60;
+        const sum = this.frameRateHistory.reduce((a, b) => a + b, 0);
+        return sum / this.frameRateHistory.length;
+    }
+    // Monitor memory usage (where available)
+    getMemoryInfo() {
+        if ('memory' in performance) {
+            // @ts-ignore - memory property is non-standard
+            const mem = performance.memory;
+            if (mem) {
+                return {
+                    used: mem.usedJSHeapSize,
+                    total: mem.jsHeapSizeLimit
+                };
+            }
+        }
+        return null;
+    }
+    // Assess overall device performance
+    async assessPerformance() {
+        const frameRate = await this.getFrameRate();
+        const memoryInfo = this.getMemoryInfo();
+        // Normalize frame rate (60fps = excellent, 30fps = poor)
+        const frameRateScore = Math.min(frameRate / 60, 1);
+        // If we have memory info, factor it in
+        if (memoryInfo) {
+            const memoryScore = 1 - (memoryInfo.used / memoryInfo.total);
+            return (frameRateScore * 0.7) + (memoryScore * 0.3);
+        }
+        return frameRateScore;
+    }
+    setupPerformanceMonitoring() {
+        // Set up performance monitoring intervals
+        setInterval(() => {
+            this.getFrameRate(); // Update frame rate history
+        }, 5000); // Every 5 seconds
+    }
+    // Get performance insights
+    getPerformanceInsights() {
+        const frameRate = this.getAverageFrameRate();
+        const memoryInfo = this.getMemoryInfo();
+        // Calculate performance score based on frame rate
+        const performanceScore = Math.min(frameRate / 60, 1);
+        return {
+            frameRate,
+            performanceScore,
+            memoryUsed: (memoryInfo === null || memoryInfo === void 0 ? void 0 : memoryInfo.used) || null,
+            memoryTotal: (memoryInfo === null || memoryInfo === void 0 ? void 0 : memoryInfo.total) || null
+        };
+    }
+}
+
+class ContentComplexityAnalyzer {
+    // Analyze content complexity based on various factors
+    analyzeContentComplexity(items) {
+        if (items.length === 0)
+            return 0.1; // Minimal complexity for empty
+        let totalComplexity = 0;
+        for (const item of items) {
+            // Analyze different aspects of complexity
+            const textComplexity = this.analyzeTextComplexity(item);
+            const mediaComplexity = this.analyzeMediaComplexity(item);
+            const componentComplexity = this.analyzeComponentComplexity(item);
+            totalComplexity += (textComplexity + mediaComplexity + componentComplexity) / 3;
+        }
+        // Return average complexity normalized to 0-1 scale
+        return Math.min(totalComplexity / items.length, 1);
+    }
+    analyzeTextComplexity(item) {
+        let complexity = 0;
+        // Length of text content
+        if (typeof item.text === 'string') {
+            complexity += Math.min(item.text.length / 1000, 0.5); // Max 0.5 for text
+        }
+        // Number of text elements
+        if (Array.isArray(item.textElements)) {
+            complexity += Math.min(item.textElements.length / 10, 0.3); // Max 0.3 for elements
+        }
+        // Formatting complexity
+        if (item.hasRichText)
+            complexity += 0.2;
+        return Math.min(complexity, 1);
+    }
+    analyzeMediaComplexity(item) {
+        let complexity = 0;
+        // Number of media elements
+        if (Array.isArray(item.media)) {
+            complexity += Math.min(item.media.length * 0.2, 0.5);
+        }
+        // Media types (images, videos are more complex than icons)
+        if (item.hasVideo)
+            complexity += 0.3;
+        if (item.hasImage)
+            complexity += 0.15;
+        if (item.hasSVG)
+            complexity += 0.1;
+        return Math.min(complexity, 1);
+    }
+    analyzeComponentComplexity(item) {
+        let complexity = 0;
+        // Number of nested components
+        if (typeof item.componentDepth === 'number') {
+            complexity += Math.min(item.componentDepth * 0.1, 0.4);
+        }
+        // Interactivity
+        if (item.interactive)
+            complexity += 0.2;
+        if (item.hasAnimations)
+            complexity += 0.2;
+        if (item.hasState)
+            complexity += 0.1;
+        return Math.min(complexity, 1);
+    }
+    // Get complexity insights
+    getComplexityInsights(items) {
+        if (items.length === 0) {
+            return {
+                averageComplexity: 0.1,
+                textComplexity: 0,
+                mediaComplexity: 0,
+                componentComplexity: 0
+            };
+        }
+        let totalText = 0, totalMedia = 0, totalComponent = 0;
+        for (const item of items) {
+            totalText += this.analyzeTextComplexity(item);
+            totalMedia += this.analyzeMediaComplexity(item);
+            totalComponent += this.analyzeComponentComplexity(item);
+        }
+        return {
+            averageComplexity: this.analyzeContentComplexity(items),
+            textComplexity: totalText / items.length,
+            mediaComplexity: totalMedia / items.length,
+            componentComplexity: totalComponent / items.length
+        };
+    }
+}
+
+class AdaptiveBufferCalculator {
+    constructor() {
+        this.scrollFactor = 0.3; // Weight for scroll velocity
+        this.networkFactor = 0.3; // Weight for network quality
+        this.performanceFactor = 0.2; // Weight for device performance
+        this.contentFactor = 0.2; // Weight for content complexity
+        this.performanceMonitor = new DevicePerformanceMonitor();
+        this.contentAnalyzer = new ContentComplexityAnalyzer();
+    }
+    // Calculate optimal buffer size based on multiple factors
+    async calculateOptimalBuffer(params) {
+        // Calculate scroll-based buffer
+        const scrollBuffer = this.calculateScrollBuffer(params.scrollVelocity, params.baseBuffer);
+        // Calculate network-based adjustment
+        const networkAdjustment = this.calculateNetworkAdjustment(params.networkQuality);
+        // Calculate performance-based adjustment
+        const performanceScore = await this.performanceMonitor.assessPerformance();
+        const performanceAdjustment = this.calculatePerformanceAdjustment(performanceScore);
+        // Calculate content-based adjustment
+        const contentComplexity = this.contentAnalyzer.analyzeContentComplexity(params.visibleItems);
+        const contentAdjustment = this.calculateContentAdjustment(contentComplexity);
+        // Combine all factors
+        const weightedBuffer = (scrollBuffer * this.scrollFactor +
+            (params.baseBuffer * networkAdjustment) * this.networkFactor +
+            (params.baseBuffer * performanceAdjustment) * this.performanceFactor +
+            (params.baseBuffer * contentAdjustment) * this.contentFactor);
+        // Apply reasonable bounds
+        return Math.max(3, Math.min(50, Math.round(weightedBuffer)));
+    }
+    calculateScrollBuffer(velocity, baseBuffer) {
+        const absVelocity = Math.abs(velocity);
+        if (absVelocity > 2.0)
+            return baseBuffer * 4; // Very fast scroll
+        if (absVelocity > 1.0)
+            return baseBuffer * 2.5; // Fast scroll
+        if (absVelocity > 0.3)
+            return baseBuffer * 1.5; // Medium scroll
+        return baseBuffer * 0.8; // Slow scroll
+    }
+    calculateNetworkAdjustment(quality) {
+        switch (quality) {
+            case 'excellent': return 1.5; // More buffer on fast networks
+            case 'good': return 1.2; // Slightly more
+            case 'poor': return 0.7; // Less buffer on slow networks
+            case 'offline': return 0.5; // Minimal buffer when offline
+            default: return 1.0;
+        }
+    }
+    calculatePerformanceAdjustment(performance) {
+        // performance is 0-1 scale (0 = poor, 1 = excellent)
+        return 0.5 + (performance * 0.8); // Range from 0.5 to 1.3
+    }
+    calculateContentAdjustment(complexity) {
+        // complexity is 0-1 scale (0 = simple, 1 = complex)
+        return 1.5 - (complexity * 0.8); // Range from 0.7 to 1.5
+    }
+    // Get adaptive insights
+    async getAdaptiveInsights(params) {
+        const buffer = await this.calculateOptimalBuffer(params);
+        const perfInsights = this.performanceMonitor.getPerformanceInsights();
+        const complexityInsights = this.contentAnalyzer.getComplexityInsights(params.visibleItems);
+        return {
+            currentBuffer: buffer,
+            performance: {
+                frameRate: perfInsights.frameRate,
+                score: perfInsights.performanceScore
+            },
+            network: {
+                quality: params.networkQuality,
+                adjustment: this.calculateNetworkAdjustment(params.networkQuality)
+            },
+            complexity: {
+                score: this.contentAnalyzer.analyzeContentComplexity(params.visibleItems),
+                breakdown: complexityInsights
+            },
+            factors: {
+                scroll: this.calculateScrollBuffer(params.scrollVelocity, params.baseBuffer),
+                network: this.calculateNetworkAdjustment(params.networkQuality),
+                performance: this.calculatePerformanceAdjustment(perfInsights.performanceScore),
+                content: this.calculateContentAdjustment(complexityInsights.averageComplexity)
+            }
+        };
+    }
+}
+
+class PerformanceOptimizer {
+    constructor() {
+        this.frameBudget = 16; // Target for 60fps (16.67ms per frame)
+        this.lastFrameTime = 0;
+        this.animationFrameId = null;
+        this.isOptimizing = false;
+        // Frame rate limiter to prevent excessive updates
+        this.lastUpdate = 0;
+        this.minUpdateInterval = 16; // Minimum 16ms between updates (60fps)
+        // Batch updates to reduce DOM manipulations
+        this.updateQueue = [];
+        this.isProcessingQueue = false;
+        // Memory optimization
+        this.cleanupThreshold = 1000; // Clean up items beyond this threshold
+        this.gcInterval = null;
+        this.setupPerformanceMonitoring();
+    }
+    // Optimize rendering by limiting updates to frame budget
+    scheduleOptimizedUpdate(updateFn) {
+        const now = performance.now();
+        // Throttle updates based on frame rate
+        if (now - this.lastUpdate < this.minUpdateInterval) {
+            // Queue the update for later
+            this.updateQueue.push(updateFn);
+            if (!this.isProcessingQueue) {
+                this.processUpdateQueue();
+            }
+            return;
+        }
+        // Check if we have enough time in the current frame
+        if (this.getTimeRemaining() > 4) { // Leave 4ms buffer
+            updateFn();
+            this.lastUpdate = now;
+        }
+        else {
+            // Schedule for next frame
+            this.updateQueue.push(updateFn);
+            if (!this.isProcessingQueue) {
+                this.processUpdateQueue();
+            }
+        }
+    }
+    // Process queued updates efficiently
+    async processUpdateQueue() {
+        if (this.updateQueue.length === 0) {
+            this.isProcessingQueue = false;
+            return;
+        }
+        this.isProcessingQueue = true;
+        const currentTime = performance.now();
+        // Process as many updates as possible within frame budget
+        while (this.updateQueue.length > 0 && this.getTimeRemaining() > 2) {
+            const updateFn = this.updateQueue.shift();
+            if (updateFn) {
+                updateFn();
+            }
+        }
+        this.lastUpdate = currentTime;
+        if (this.updateQueue.length > 0) {
+            // Schedule remaining updates for next frame (only in browser environment)
+            if (typeof requestAnimationFrame !== 'undefined') {
+                requestAnimationFrame(() => this.processUpdateQueue());
+            }
+            else {
+                // In Node.js environment, use setTimeout as fallback
+                setTimeout(() => this.processUpdateQueue(), 0);
+            }
+        }
+        else {
+            this.isProcessingQueue = false;
+        }
+    }
+    // Get remaining time in current frame
+    getTimeRemaining() {
+        if (typeof performance === 'undefined' || !performance.now) {
+            return 16; // Fallback to 60fps
+        }
+        const currentTime = performance.now();
+        // Typically browsers target 10ms remaining time for smoothness
+        return Math.max(0, this.frameBudget - (currentTime - this.lastFrameTime));
+    }
+    // Memory optimization: cleanup off-screen items
+    optimizeMemory(cleanupFn, visibleRange) {
+        // Determine cleanup range (items far from visible range)
+        const cleanupStart = Math.max(0, visibleRange.end + this.cleanupThreshold);
+        const cleanupEnd = Math.max(0, visibleRange.start - this.cleanupThreshold);
+        if (cleanupStart > visibleRange.end) {
+            cleanupFn(visibleRange.end, cleanupStart);
+        }
+        if (cleanupEnd < visibleRange.start) {
+            cleanupFn(cleanupEnd, visibleRange.start);
+        }
+    }
+    // Enable GPU acceleration for smoother scrolling
+    enableGPUCssAcceleration(element) {
+        // Force hardware acceleration
+        element.style.willChange = 'transform';
+        element.style.transform = 'translateZ(0)';
+        element.style.backfaceVisibility = 'hidden';
+    }
+    // Disable GPU acceleration when not needed
+    disableGPUCssAcceleration(element) {
+        element.style.willChange = 'auto';
+        element.style.transform = '';
+        element.style.backfaceVisibility = '';
+    }
+    // Optimize for different device capabilities
+    getOptimizationProfile() {
+        // Simple profile detection based on common device characteristics
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        // Detect low-end devices
+        if (this.isLowEndDevice(userAgent)) {
+            return {
+                frameRate: 30, // Lower target for low-end devices
+                batchSize: 5, // Smaller batches
+                bufferMultiplier: 0.5, // Smaller buffer
+                updateInterval: 32 // 30fps interval
+            };
+        }
+        // Default profile for capable devices
+        return {
+            frameRate: 60,
+            batchSize: 10,
+            bufferMultiplier: 1.0,
+            updateInterval: 16 // 60fps interval
+        };
+    }
+    isLowEndDevice(userAgent) {
+        // Simple heuristic for low-end devices
+        const lowEndPatterns = [
+            /Android.*Mobile/,
+            /iPhone.*OS [0-9]+_[0-9]+/,
+            /Opera Mini/,
+            /IEMobile/
+        ];
+        return lowEndPatterns.some(pattern => pattern.test(userAgent));
+    }
+    // Setup performance monitoring
+    setupPerformanceMonitoring() {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || typeof requestAnimationFrame === 'undefined') {
+            // In Node.js environment, skip browser-specific monitoring
+            return;
+        }
+        // Monitor frame rate
+        let frameCount = 0;
+        let lastTime = performance.now();
+        const monitorFrameRate = () => {
+            frameCount++;
+            const currentTime = performance.now();
+            if (currentTime - lastTime >= 1000) { // Every second
+                const fps = frameCount;
+                frameCount = 0;
+                lastTime = currentTime;
+                // Adjust optimization based on actual FPS
+                if (fps < 30) {
+                    this.frameBudget = 32; // Target 30fps
+                }
+                else if (fps < 50) {
+                    this.frameBudget = 20; // Target 50fps
+                }
+                else {
+                    this.frameBudget = 16; // Target 60fps
+                }
+            }
+            this.animationFrameId = requestAnimationFrame(monitorFrameRate);
+        };
+        this.animationFrameId = requestAnimationFrame(monitorFrameRate);
+        // Setup garbage collection monitoring
+        this.gcInterval = window.setInterval(() => {
+            if ('gc' in window) {
+                // @ts-ignore - gc is non-standard
+                window.gc();
+            }
+        }, 30000); // GC every 30 seconds
+    }
+    // Get performance insights
+    getPerformanceInsights() {
+        return {
+            frameRate: 60, // Would be calculated from monitoring
+            memoryUsage: this.getMemoryUsage(),
+            updateFrequency: 1000 / this.minUpdateInterval,
+            optimizationActive: this.isOptimizing
+        };
+    }
+    getMemoryUsage() {
+        var _a;
+        if ('memory' in performance) {
+            // @ts-ignore - memory property is non-standard
+            return ((_a = performance.memory) === null || _a === void 0 ? void 0 : _a.usedJSHeapSize) || null;
+        }
+        return null;
+    }
+    // Cleanup resources
+    cleanup() {
+        if (this.animationFrameId && typeof cancelAnimationFrame !== 'undefined') {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        if (this.gcInterval && typeof clearInterval !== 'undefined') {
+            clearInterval(this.gcInterval);
+        }
+        this.updateQueue = [];
+        this.isProcessingQueue = false;
+    }
+}
+
+class MemoryManager {
+    constructor(maxCacheSize = 1000) {
+        this.itemCache = new Map();
+        this.maxCacheSize = 1000; // Maximum items to keep in cache
+        this.cleanupThreshold = 500; // Start cleanup when cache exceeds this
+        this.visibleRange = { start: 0, end: 0 };
+        this.totalItems = 0;
+        this.maxCacheSize = maxCacheSize;
+    }
+    // Set visible range to optimize cache
+    setVisibleRange(range) {
+        this.visibleRange = range;
+    }
+    // Set total number of items
+    setTotalItems(total) {
+        this.totalItems = total;
+    }
+    // Get item from cache
+    get(key) {
+        return this.itemCache.get(key) || null;
+    }
+    // Set item in cache
+    set(key, value) {
+        this.itemCache.set(key, value);
+        // Clean up if cache is too large
+        if (this.itemCache.size > this.maxCacheSize) {
+            this.cleanupCache();
+        }
+    }
+    // Check if item exists in cache
+    has(key) {
+        return this.itemCache.has(key);
+    }
+    // Remove item from cache
+    delete(key) {
+        return this.itemCache.delete(key);
+    }
+    // Clear entire cache
+    clear() {
+        this.itemCache.clear();
+    }
+    // Clean up cache based on visibility and distance from visible range
+    cleanupCache() {
+        if (this.itemCache.size <= this.cleanupThreshold) {
+            return; // No need to clean up
+        }
+        const itemsToRemove = [];
+        // Find items that are far from visible range
+        for (const [key] of this.itemCache.entries()) {
+            const distanceFromVisible = this.getDistanceFromVisible(key);
+            // Remove items that are far from visible range
+            if (distanceFromVisible > 100) { // Arbitrary threshold
+                itemsToRemove.push(key);
+            }
+        }
+        // If we still have too many items, remove oldest accessed items
+        if (this.itemCache.size - itemsToRemove.length > this.cleanupThreshold) {
+            const sortedKeys = Array.from(this.itemCache.keys())
+                .sort((a, b) => a - b); // Sort by key (assuming they're indexes)
+            // Remove items that are furthest from visible range
+            for (const key of sortedKeys) {
+                if (this.itemCache.size <= this.cleanupThreshold)
+                    break;
+                const distance = this.getDistanceFromVisible(key);
+                if (distance > 50) { // Remove items beyond 50 units from visible
+                    itemsToRemove.push(key);
+                }
+            }
+        }
+        // Actually remove items
+        for (const key of itemsToRemove) {
+            this.itemCache.delete(key);
+        }
+    }
+    // Calculate distance from visible range
+    getDistanceFromVisible(index) {
+        if (index >= this.visibleRange.start && index <= this.visibleRange.end) {
+            return 0; // Inside visible range
+        }
+        if (index < this.visibleRange.start) {
+            return this.visibleRange.start - index;
+        }
+        return index - this.visibleRange.end;
+    }
+    // Get cache statistics
+    getStats() {
+        const visibleItems = Array.from(this.itemCache.keys())
+            .filter(key => key >= this.visibleRange.start && key <= this.visibleRange.end)
+            .length;
+        const offScreenItems = this.itemCache.size - visibleItems;
+        // Rough estimate of memory usage (in bytes)
+        let memoryEstimate = 0;
+        for (const [_, value] of this.itemCache.entries()) {
+            memoryEstimate += this.estimateObjectSize(value);
+        }
+        return {
+            size: this.itemCache.size,
+            maxCacheSize: this.maxCacheSize,
+            visibleItems,
+            offScreenItems,
+            memoryEstimate
+        };
+    }
+    // Estimate object size in bytes
+    estimateObjectSize(obj) {
+        if (obj === null || obj === undefined)
+            return 0;
+        if (typeof obj === 'string')
+            return obj.length * 2; // UTF-16 chars
+        if (typeof obj === 'number')
+            return 8; // 8 bytes for number
+        if (typeof obj === 'boolean')
+            return 4; // 4 bytes for boolean
+        if (typeof obj === 'object') {
+            let size = 0;
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    size += key.length * 2; // Key size
+                    size += this.estimateObjectSize(obj[key]); // Value size
+                }
+            }
+            return size;
+        }
+        return 0; // Other types
+    }
+    // Prune cache to only keep essential items
+    pruneEssential() {
+        const essentialItems = [];
+        // Keep items in visible range and nearby
+        for (const [key, value] of this.itemCache.entries()) {
+            if (this.isEssential(key)) {
+                essentialItems.push([key, value]);
+            }
+        }
+        // Clear cache and repopulate with essential items
+        this.itemCache.clear();
+        for (const [key, value] of essentialItems) {
+            this.itemCache.set(key, value);
+        }
+    }
+    // Check if item is essential (within buffer zone)
+    isEssential(index) {
+        const bufferZone = 20; // Keep items within 20 positions of visible range
+        return index >= (this.visibleRange.start - bufferZone) &&
+            index <= (this.visibleRange.end + bufferZone);
+    }
+    // Get cache size
+    getSize() {
+        return this.itemCache.size;
+    }
+    // Get cache keys
+    getKeys() {
+        return Array.from(this.itemCache.keys());
+    }
+}
+
+class GPUAccelerator {
+    constructor() {
+        this.gpuAccelerationEnabled = false;
+        this.gpuElements = new WeakSet();
+        this.animationFrameId = null;
+        this.gpuAccelerationEnabled = this.isGPUSupported();
+    }
+    // Check if GPU acceleration is supported
+    isGPUSupported() {
+        // Check if we're in a browser environment
+        if (typeof document === 'undefined') {
+            return false; // Not supported in Node.js environment
+        }
+        // Check for 3D transform support
+        const testEl = document.createElement('div');
+        return testEl.style.webkitTransform !== undefined ||
+            testEl.style.transform !== undefined;
+    }
+    // Enable GPU acceleration for an element
+    enableForElement(element) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        // Apply GPU-accelerated styles
+        element.style.willChange = 'transform';
+        element.style.transform = 'translateZ(0)';
+        element.style.backfaceVisibility = 'hidden';
+        element.style.perspective = '1000px';
+        // Add to tracked elements
+        this.gpuElements.add(element);
+    }
+    // Disable GPU acceleration for an element
+    disableForElement(element) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        // Remove GPU-accelerated styles
+        element.style.willChange = 'auto';
+        element.style.transform = '';
+        element.style.backfaceVisibility = '';
+        element.style.perspective = '';
+        // Remove from tracked elements
+        this.gpuElements.delete(element);
+    }
+    // Apply GPU acceleration to a list of elements
+    enableForElements(elements) {
+        elements.forEach(el => this.enableForElement(el));
+    }
+    // Batch update GPU acceleration
+    batchUpdate(elements, enable) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        if (enable) {
+            this.enableForElements(elements);
+        }
+        else {
+            elements.forEach(el => this.disableForElement(el));
+        }
+    }
+    // Optimize scrolling container for GPU acceleration
+    optimizeScrollContainer(container) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        // Apply optimizations to container
+        container.style.transform = 'translateZ(0)';
+        container.style.willChange = 'scroll-position';
+        container.style.webkitOverflowScrolling = 'touch'; // For iOS
+    }
+    // Optimize individual items for GPU acceleration
+    optimizeItem(item) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        // Apply lightweight GPU acceleration
+        item.style.transform = 'translateZ(0)';
+        item.style.willChange = 'transform';
+    }
+    // Get GPU acceleration status
+    getStatus() {
+        // Since WeakSet doesn't have a size property, we can't count directly
+        // This is a limitation of WeakSet
+        return {
+            enabled: this.gpuAccelerationEnabled,
+            supported: this.isGPUSupported(),
+            elementCount: 0 // Placeholder - would need different tracking method
+        };
+    }
+    // Optimize for different scenarios
+    optimizeForScenario(scenario) {
+        if (!this.gpuAccelerationEnabled)
+            return;
+        switch (scenario) {
+            case 'scrolling':
+                // Optimize for smooth scrolling
+                document.body.style.willChange = 'transform';
+                break;
+            case 'animation':
+                // Optimize for animations
+                document.body.style.transform = 'translateZ(0)';
+                break;
+            case 'static':
+                // Remove optimizations when not needed
+                document.body.style.willChange = 'auto';
+                document.body.style.transform = '';
+                break;
+        }
+    }
+    // Cleanup GPU acceleration resources
+    cleanup() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        // Reset any applied styles (would need to track them)
+        this.gpuElements = new WeakSet();
+    }
+    // Check if element has GPU acceleration enabled
+    isAccelerated(element) {
+        return this.gpuElements.has(element);
+    }
+    // Get optimization recommendations
+    getRecommendations() {
+        const recommendations = [];
+        if (!this.gpuAccelerationEnabled) {
+            recommendations.push('GPU acceleration not supported on this device');
+        }
+        else {
+            recommendations.push('GPU acceleration enabled for smooth performance');
+            recommendations.push('Using hardware-accelerated compositing');
+            recommendations.push('Optimized for 60fps rendering');
+        }
+        return recommendations;
+    }
+}
+
+class Engine {
+    constructor(config) {
+        this.fetchMoreCallback = null;
+        this.config = {
+            ...config,
+            bufferSize: config.bufferSize || 5
+        };
+        this.windowManager = new WindowManager(this.config.itemHeight, this.config.viewportHeight, this.config.bufferSize);
+        this.prefetchManager = new PrefetchManager(this.config.bufferSize);
+        this.requestQueue = new RequestQueue(1); // Single request at a time
+        this.intelligentScrollDetector = new IntelligentScrollDetector();
+        this.networkDetector = new NetworkSpeedDetector();
+        this.networkAwarePrefetchManager = new NetworkAwarePrefetchManager(this.networkDetector);
+        this.networkAwareRequestQueue = new NetworkAwareRequestQueue(this.networkDetector);
+        this.adaptiveBufferCalculator = new AdaptiveBufferCalculator();
+        this.performanceOptimizer = new PerformanceOptimizer();
+        this.memoryManager = new MemoryManager(1000); // Cache up to 1000 items
+        this.gpuAccelerator = new GPUAccelerator();
+        this.totalItems = this.config.totalItems || Number.MAX_SAFE_INTEGER;
+        this.state = {
+            scrollTop: 0,
+            visibleRange: { start: 0, end: 0 },
+            loadedItems: 0,
+            isLoading: false
+        };
+    }
+    /**
+     * Update scroll position and recalculate visible range with intelligent detection
+     */
+    async updateScrollPosition(scrollTop) {
+        // Use performance optimizer to schedule updates efficiently
+        this.performanceOptimizer.scheduleOptimizedUpdate(async () => {
+            // Calculate velocity and other intelligent metrics
+            const velocity = this.intelligentScrollDetector.calculateVelocity(scrollTop);
+            this.intelligentScrollDetector.getDirection(velocity);
+            // Get network quality for adaptive buffering
+            const networkQuality = await this.networkDetector.assessConnectionQuality();
+            // Calculate adaptive buffer considering all factors
+            const adaptiveBuffer = await this.adaptiveBufferCalculator.calculateOptimalBuffer({
+                scrollVelocity: velocity,
+                networkQuality,
+                baseBuffer: this.intelligentScrollDetector.calculateBuffer(velocity),
+                visibleItems: [] // In a real implementation, this would be the actual visible items
+            });
+            // Update window manager with adaptive buffer
+            this.windowManager.updateBufferSize(adaptiveBuffer);
+            // Update memory manager with visible range
+            this.memoryManager.setVisibleRange({
+                start: Math.max(0, this.state.visibleRange.start - adaptiveBuffer),
+                end: this.state.visibleRange.end + adaptiveBuffer
+            });
+            this.state.scrollTop = scrollTop;
+            this.state.visibleRange = this.windowManager.calculateVisibleRange(scrollTop);
+            // Check if we need to fetch more items
+            if (await this.shouldFetchMore()) {
+                await this.fetchMore();
+            }
+        });
+    }
+    /**
+     * Get the current visible range
+     */
+    getVisibleRange() {
+        return this.state.visibleRange;
+    }
+    /**
+     * Check if more items should be fetched with intelligent and network-aware detection
+     */
+    async shouldFetchMore() {
+        if (!this.fetchMoreCallback)
+            return false;
+        if (this.state.isLoading)
+            return false;
+        if (this.state.loadedItems >= this.totalItems)
+            return false;
+        // Get current velocity for intelligent prefetching
+        const velocity = this.intelligentScrollDetector.calculateVelocity(this.state.scrollTop);
+        // Get network quality for adaptive prefetching
+        await this.networkDetector.assessConnectionQuality();
+        // Calculate network-adjusted prefetch distance
+        const prefetchDistance = await this.networkAwarePrefetchManager.calculateNetworkAdjustedPrefetch(velocity);
+        // Use intelligent prefetch logic
+        const visibleEnd = this.state.visibleRange.end;
+        const totalLoaded = this.state.loadedItems;
+        // Intelligent prefetch: if visible end is approaching the loaded boundary
+        return visibleEnd >= totalLoaded - prefetchDistance;
+    }
+    /**
+     * Fetch more items with network awareness
+     */
+    async fetchMore() {
+        if (!this.fetchMoreCallback || this.state.isLoading)
+            return;
+        this.state.isLoading = true;
+        try {
+            // Use network-aware request queue
+            const result = await this.networkAwareRequestQueue.add(this.fetchMoreCallback);
+            // Assuming the result contains new items
+            // In a real implementation, this would update the loaded items count
+            this.state.loadedItems += Array.isArray(result) ? result.length : 1;
+        }
+        catch (error) {
+            console.error('Error fetching more items:', error);
+        }
+        finally {
+            this.state.isLoading = false;
+        }
+    }
+    /**
+     * Set the fetchMore callback function
+     */
+    setFetchMoreCallback(callback) {
+        this.fetchMoreCallback = callback;
+    }
+    /**
+     * Update total items count
+     */
+    updateTotalItems(count) {
+        this.totalItems = count;
+    }
+    /**
+     * Get current engine state
+     */
+    getState() {
+        return { ...this.state };
+    }
+    /**
+     * Update viewport dimensions
+     */
+    updateDimensions(viewportHeight, itemHeight) {
+        this.windowManager.updateViewportHeight(viewportHeight);
+        this.windowManager.updateItemHeight(itemHeight);
+        // Recalculate visible range with new dimensions
+        this.state.visibleRange = this.windowManager.calculateVisibleRange(this.state.scrollTop);
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        this.requestQueue.clear();
+        this.networkAwareRequestQueue.clear();
+        this.fetchMoreCallback = null;
+        this.intelligentScrollDetector.cleanup();
+        this.performanceOptimizer.cleanup();
+        this.memoryManager.clear();
+    }
+}
+
+class LazyScroll {
+  constructor(container, config) {
+    this.container = container;
+    this.config = {
+      itemHeight: config.itemHeight || 50,
+      viewportHeight: config.viewportHeight || 400,
+      bufferSize: config.bufferSize || 5,
+      fetchMore: config.fetchMore || (() => Promise.resolve([]))
+    };
+
+    this.engine = new Engine(this.config);
+    this.engine.setFetchMoreCallback(this.config.fetchMore);
+
+    this.visibleRange = { start: 0, end: 0 };
+    this.isLoading = false;
+    this.items = [];
+    this.visibleItems = [];
+
+    this.scrollHandler = this.onScroll.bind(this);
+    this.container.addEventListener('scroll', this.scrollHandler, { passive: true });
+  }
+
+  onScroll() {
+    const scrollTop = this.container.scrollTop;
+    this.engine.updateScrollPosition(scrollTop);
+
+    const state = this.engine.getState();
+    this.visibleRange = state.visibleRange;
+    this.isLoading = state.isLoading;
+
+    this.render();
+  }
+
+  setItems(items) {
+    this.items = items;
+    this.render();
+  }
+
+  render() {
+    // Calculate paddings
+    const topPadding = this.visibleRange.start * this.config.itemHeight;
+    const bottomPadding = Math.max(0, (this.items.length - this.visibleRange.end) * this.config.itemHeight);
+
+    // Get visible items
+    this.visibleItems = this.items.slice(this.visibleRange.start, this.visibleRange.end);
+
+    // Clear container except for paddings and content
+    const existingContent = this.container.querySelector('.lazy-scroll-content');
+    if (existingContent) {
+      existingContent.remove();
+    }
+
+    // Create content wrapper
+    const contentWrapper = document.createElement('div');
+    contentWrapper.className = 'lazy-scroll-content';
+
+    // Add top padding
+    const topPaddingDiv = document.createElement('div');
+    topPaddingDiv.style.height = `${topPadding}px`;
+    contentWrapper.appendChild(topPaddingDiv);
+
+    // Add visible items
+    this.visibleItems.forEach((item, index) => {
+      const itemElement = this.createItemElement(item, this.visibleRange.start + index);
+      contentWrapper.appendChild(itemElement);
+    });
+
+    // Add bottom padding
+    const bottomPaddingDiv = document.createElement('div');
+    bottomPaddingDiv.style.height = `${bottomPadding}px`;
+    contentWrapper.appendChild(bottomPaddingDiv);
+
+    // Add loading indicator if needed
+    if (this.isLoading) {
+      const loadingElement = document.createElement('div');
+      loadingElement.className = 'lazy-loading';
+      loadingElement.textContent = 'Loading more items...';
+      contentWrapper.appendChild(loadingElement);
+    }
+
+    this.container.appendChild(contentWrapper);
+  }
+
+  createItemElement(item, index) {
+    const itemElement = document.createElement('div');
+    itemElement.style.height = `${this.config.itemHeight}px`;
+    itemElement.className = 'lazy-item';
+
+    // Default content - can be customized
+    itemElement.textContent = `Item ${index}: ${item.text || item.id || 'Content'}`;
+
+    return itemElement;
+  }
+
+  updateConfig(newConfig) {
+    if (newConfig.itemHeight !== undefined) this.config.itemHeight = newConfig.itemHeight;
+    if (newConfig.viewportHeight !== undefined) this.config.viewportHeight = newConfig.viewportHeight;
+    if (newConfig.bufferSize !== undefined) this.config.bufferSize = newConfig.bufferSize;
+    if (newConfig.fetchMore !== undefined) {
+      this.config.fetchMore = newConfig.fetchMore;
+      this.engine.setFetchMoreCallback(newConfig.fetchMore);
+    }
+
+    // Re-render with new config
+    this.render();
+  }
+
+  destroy() {
+    this.container.removeEventListener('scroll', this.scrollHandler);
+    this.engine.cleanup();
+  }
+
+  // Public methods
+  getVisibleRange() {
+    return { ...this.visibleRange };
+  }
+
+  refresh() {
+    this.onScroll();
+  }
+}
+
+// Factory function for easier usage
+function createLazyScroll(container, config) {
+  return new LazyScroll(container, config);
+}
+
+class LazyScrollElement extends HTMLElement {
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: 'open' });
+    
+    // Default values
+    this.itemHeight = 50;
+    this.viewportHeight = 400;
+    this.bufferSize = 5;
+    this.items = [];
+    
+    // Styles
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        display: block;
+      }
+      
+      .lazy-scroll-container {
+        position: relative;
+        overflow-y: auto;
+      }
+      
+      .lazy-item {
+        width: 100%;
+      }
+      
+      .lazy-loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
+    `;
+    
+    this.shadow.appendChild(style);
+  }
+
+  static get observedAttributes() {
+    return ['item-height', 'viewport-height', 'buffer-size'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'item-height':
+        this.itemHeight = parseInt(newValue) || 50;
+        break;
+      case 'viewport-height':
+        this.viewportHeight = parseInt(newValue) || 400;
+        break;
+      case 'buffer-size':
+        this.bufferSize = parseInt(newValue) || 5;
+        break;
+    }
+    
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.updateConfig({
+        itemHeight: this.itemHeight,
+        viewportHeight: this.viewportHeight,
+        bufferSize: this.bufferSize
+      });
+    }
+  }
+
+  connectedCallback() {
+    // Create container
+    this.container = document.createElement('div');
+    this.container.className = 'lazy-scroll-container';
+    this.container.style.height = `${this.viewportHeight}px`;
+    this.container.style.overflowY = 'auto';
+    
+    this.shadow.appendChild(this.container);
+
+    // Get fetchMore function from attribute or slot
+    const fetchMoreAttr = this.getAttribute('fetch-more');
+    let fetchMoreFn = () => Promise.resolve([]);
+    
+    if (fetchMoreAttr) {
+      try {
+        // If fetchMore is a function name in global scope
+        fetchMoreFn = window[fetchMoreAttr] || (() => Promise.resolve([]));
+      } catch (e) {
+        console.warn('Could not find fetchMore function:', fetchMoreAttr);
+      }
+    }
+
+    // Initialize lazy scroll
+    this.lazyScrollInstance = createLazyScroll(this.container, {
+      itemHeight: this.itemHeight,
+      viewportHeight: this.viewportHeight,
+      bufferSize: this.bufferSize,
+      fetchMore: fetchMoreFn
+    });
+
+    // Handle items from light DOM
+    this.updateItemsFromSlot();
+    
+    // Observe child changes
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateItemsFromSlot();
+    });
+    
+    this.mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.destroy();
+    }
+    
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+
+  updateItemsFromSlot() {
+    // Get items from light DOM or data attribute
+    const itemsData = this.getAttribute('items');
+    if (itemsData) {
+      try {
+        const items = JSON.parse(itemsData);
+        if (this.lazyScrollInstance) {
+          this.lazyScrollInstance.setItems(items);
+        }
+      } catch (e) {
+        console.warn('Could not parse items data:', itemsData);
+      }
+    }
+  }
+
+  // Public methods
+  setItems(items) {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.setItems(items);
+    }
+  }
+
+  refresh() {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.refresh();
+    }
+  }
+
+  getVisibleRange() {
+    if (this.lazyScrollInstance) {
+      return this.lazyScrollInstance.getVisibleRange();
+    }
+    return { start: 0, end: 0 };
+  }
+}
+
+// Register the custom element
+customElements.define('lazy-scroll-element', LazyScrollElement);
+
+export { LazyScroll, LazyScrollElement, createLazyScroll };
+//# sourceMappingURL=index.js.map