lazy-render-virtual-scroll 1.0.8 → 1.1.0

package/dist/cjs/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var vue = require('vue');
-var core = require('@angular/core');
 var React = require('react');
 
 class WindowManager {
@@ -806,8 +804,14 @@ class PerformanceOptimizer {
         }
         this.lastUpdate = currentTime;
         if (this.updateQueue.length > 0) {
-            // Schedule remaining updates for next frame
-            requestAnimationFrame(() => this.processUpdateQueue());
+            // 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;
@@ -1112,6 +1116,10 @@ class GPUAccelerator {
     }
     // 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 ||
@@ -1378,419 +1386,203 @@ class Engine {
     }
 }
 
-const useLazyScroll = (config) => {
-    const { fetchMore, ...engineConfig } = config;
-    const engine = new Engine(engineConfig);
-    engine.setFetchMoreCallback(fetchMore);
-    const visibleRange = vue.ref({ start: 0, end: 0 });
-    const loadedItems = vue.ref([]);
-    const isLoading = vue.ref(false);
-    const containerRef = vue.ref(null);
-    const scrollTop = vue.ref(0);
-    // Initialize scroll listener
-    let scrollHandler = null;
-    vue.onMounted(() => {
-        if (containerRef.value) {
-            scrollHandler = () => {
-                if (containerRef.value) {
-                    scrollTop.value = containerRef.value.scrollTop;
-                    updateScrollPosition(scrollTop.value);
+class ScrollObserver {
+    constructor(container, callback, options) {
+        this.observer = null;
+        this.sentinelElement = null;
+        /**
+         * Handle scroll events
+         */
+        this.onScroll = () => {
+            // Debounced scroll handler to prevent too frequent updates
+            this.debounce(() => {
+                this.callback(this.container.scrollTop);
+            }, 16); // ~60fps
+        };
+        this.container = container;
+        this.callback = callback;
+        this.options = {
+            root: container,
+            threshold: [0, 1],
+            ...options
+        };
+    }
+    /**
+     * Start observing scroll events
+     */
+    observe() {
+        // Create a sentinel element at the bottom to detect when user scrolls near the end
+        this.sentinelElement = document.createElement('div');
+        this.sentinelElement.style.height = '1px'; // Very small element
+        this.sentinelElement.setAttribute('data-lazy-sentinel', '');
+        // Add sentinel to the container
+        this.container.appendChild(this.sentinelElement);
+        // Create intersection observer to detect when sentinel comes into view
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    // Trigger callback with current scroll position
+                    this.callback(this.container.scrollTop);
                 }
-            };
-            containerRef.value.addEventListener('scroll', scrollHandler, { passive: true });
-        }
-    });
-    vue.onUnmounted(() => {
-        if (containerRef.value && scrollHandler) {
-            containerRef.value.removeEventListener('scroll', scrollHandler);
+            });
+        }, this.options);
+        this.observer.observe(this.sentinelElement);
+        // Also listen to scroll events for continuous updates
+        this.container.addEventListener('scroll', this.onScroll, { passive: true });
+    }
+    /**
+     * Debounce function for scroll events
+     */
+    debounce(func, wait) {
+        let timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(func, wait);
+    }
+    /**
+     * Disconnect observer and clean up
+     */
+    disconnect() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
         }
-        engine.cleanup();
-    });
-    // Watch for scroll position changes
-    vue.watch(scrollTop, (newScrollTop) => {
-        updateScrollPosition(newScrollTop);
-    });
-    const updateScrollPosition = async (position) => {
-        await engine.updateScrollPosition(position);
-        const state = engine.getState();
-        visibleRange.value = state.visibleRange;
-        isLoading.value = state.isLoading;
-    };
-    // Refresh function
-    const refresh = () => {
-        if (containerRef.value) {
-            updateScrollPosition(containerRef.value.scrollTop);
+        if (this.sentinelElement) {
+            this.sentinelElement.remove();
+            this.sentinelElement = null;
         }
-    };
-    return {
-        visibleRange: vue.computed(() => visibleRange.value),
-        loadedItems: vue.computed(() => loadedItems.value),
-        isLoading: vue.computed(() => isLoading.value),
-        containerRef,
-        refresh
-    };
-};
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-}
-function __runInitializers(thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-}
-function __setFunctionName(f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+        this.container.removeEventListener('scroll', this.onScroll);
+    }
+}
 
-let LazyScrollDirective = (() => {
-    let _classDecorators = [core.Directive({
-            selector: '[lazyScroll]'
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _items_decorators;
-    let _items_initializers = [];
-    let _items_extraInitializers = [];
-    let _itemHeight_decorators;
-    let _itemHeight_initializers = [];
-    let _itemHeight_extraInitializers = [];
-    let _viewportHeight_decorators;
-    let _viewportHeight_initializers = [];
-    let _viewportHeight_extraInitializers = [];
-    let _bufferSize_decorators;
-    let _bufferSize_initializers = [];
-    let _bufferSize_extraInitializers = [];
-    let _fetchMore_decorators;
-    let _fetchMore_initializers = [];
-    let _fetchMore_extraInitializers = [];
-    let _visibleRangeChange_decorators;
-    let _visibleRangeChange_initializers = [];
-    let _visibleRangeChange_extraInitializers = [];
-    let _loadingChange_decorators;
-    let _loadingChange_initializers = [];
-    let _loadingChange_extraInitializers = [];
-    _classThis = class {
-        constructor(el) {
-            this.el = el;
-            this.items = __runInitializers(this, _items_initializers, []);
-            this.itemHeight = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _itemHeight_initializers, 50));
-            this.viewportHeight = (__runInitializers(this, _itemHeight_extraInitializers), __runInitializers(this, _viewportHeight_initializers, 400));
-            this.bufferSize = (__runInitializers(this, _viewportHeight_extraInitializers), __runInitializers(this, _bufferSize_initializers, 5));
-            this.fetchMore = (__runInitializers(this, _bufferSize_extraInitializers), __runInitializers(this, _fetchMore_initializers, void 0));
-            this.visibleRangeChange = (__runInitializers(this, _fetchMore_extraInitializers), __runInitializers(this, _visibleRangeChange_initializers, new core.EventEmitter()));
-            this.loadingChange = (__runInitializers(this, _visibleRangeChange_extraInitializers), __runInitializers(this, _loadingChange_initializers, new core.EventEmitter()));
-            this.engine = (__runInitializers(this, _loadingChange_extraInitializers), null);
-            this.scrollListener = null;
-        }
-        ngOnInit() {
-            const config = {
-                itemHeight: this.itemHeight,
-                viewportHeight: this.viewportHeight,
-                bufferSize: this.bufferSize
-            };
-            this.engine = new Engine(config);
-            if (this.fetchMore) {
-                this.engine.setFetchMoreCallback(this.fetchMore);
-            }
-            // Add scroll listener
-            this.scrollListener = () => {
-                this.onScroll();
-            };
-            this.el.nativeElement.addEventListener('scroll', this.scrollListener, { passive: true });
-        }
-        ngOnDestroy() {
-            if (this.scrollListener) {
-                this.el.nativeElement.removeEventListener('scroll', this.scrollListener);
-            }
-            if (this.engine) {
-                this.engine.cleanup();
-                this.engine = null;
-            }
-        }
-        onScroll() {
-            if (this.engine) {
-                const scrollTop = this.el.nativeElement.scrollTop;
-                this.engine.updateScrollPosition(scrollTop);
-                const state = this.engine.getState();
-                this.visibleRangeChange.emit(state.visibleRange);
-                this.loadingChange.emit(state.isLoading);
+const useLazyList = (config) => {
+    const { fetchMore, ...engineConfig } = config;
+    const engineRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: 0 });
+    const [loadedItems, setLoadedItems] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [scrollAnalysis, setScrollAnalysis] = React.useState({
+        velocity: 0,
+        direction: 'stationary',
+        buffer: 5,
+        prefetchDistance: 400,
+        predictedPosition: 0,
+        isIdle: true
+    });
+    // Initialize engine
+    React.useEffect(() => {
+        engineRef.current = new Engine(engineConfig);
+        engineRef.current.setFetchMoreCallback(fetchMore);
+        return () => {
+            if (engineRef.current) {
+                engineRef.current.cleanup();
             }
+        };
+    }, []);
+    // Update engine when config changes
+    React.useEffect(() => {
+        if (engineRef.current) {
+            engineRef.current.updateDimensions(engineConfig.viewportHeight, engineConfig.itemHeight);
         }
-        // Method to refresh the scroll position
-        refresh() {
-            if (this.engine) {
-                const scrollTop = this.el.nativeElement.scrollTop;
-                this.engine.updateScrollPosition(scrollTop);
-            }
+    }, [engineConfig.viewportHeight, engineConfig.itemHeight]);
+    // Handle scroll events
+    const handleScroll = React.useCallback((scrollTop) => {
+        if (engineRef.current) {
+            engineRef.current.updateScrollPosition(scrollTop);
+            // Update state based on engine
+            const state = engineRef.current.getState();
+            setVisibleRange(state.visibleRange);
+            setIsLoading(state.isLoading);
         }
-        // Method to get current visible range
-        getVisibleRange() {
-            if (this.engine) {
-                return this.engine.getState().visibleRange;
+    }, []);
+    // Set container reference
+    const setContainerRef = (element) => {
+        if (element) {
+            containerRef.current = element;
+            // Initialize scroll observer when container is available
+            if (typeof window !== 'undefined' && element) {
+                // In a real implementation, we would use ScrollObserver here
+                // For now, we'll just attach a basic scroll listener
+                const handleScrollEvent = () => {
+                    handleScroll(element.scrollTop);
+                };
+                element.addEventListener('scroll', handleScrollEvent, { passive: true });
+                // Cleanup
+                return () => {
+                    element.removeEventListener('scroll', handleScrollEvent);
+                };
             }
-            return { start: 0, end: 0 };
-        }
-    };
-    __setFunctionName(_classThis, "LazyScrollDirective");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-        _items_decorators = [core.Input()];
-        _itemHeight_decorators = [core.Input()];
-        _viewportHeight_decorators = [core.Input()];
-        _bufferSize_decorators = [core.Input()];
-        _fetchMore_decorators = [core.Input()];
-        _visibleRangeChange_decorators = [core.Output()];
-        _loadingChange_decorators = [core.Output()];
-        __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
-        __esDecorate(null, null, _itemHeight_decorators, { kind: "field", name: "itemHeight", static: false, private: false, access: { has: obj => "itemHeight" in obj, get: obj => obj.itemHeight, set: (obj, value) => { obj.itemHeight = value; } }, metadata: _metadata }, _itemHeight_initializers, _itemHeight_extraInitializers);
-        __esDecorate(null, null, _viewportHeight_decorators, { kind: "field", name: "viewportHeight", static: false, private: false, access: { has: obj => "viewportHeight" in obj, get: obj => obj.viewportHeight, set: (obj, value) => { obj.viewportHeight = value; } }, metadata: _metadata }, _viewportHeight_initializers, _viewportHeight_extraInitializers);
-        __esDecorate(null, null, _bufferSize_decorators, { kind: "field", name: "bufferSize", static: false, private: false, access: { has: obj => "bufferSize" in obj, get: obj => obj.bufferSize, set: (obj, value) => { obj.bufferSize = value; } }, metadata: _metadata }, _bufferSize_initializers, _bufferSize_extraInitializers);
-        __esDecorate(null, null, _fetchMore_decorators, { kind: "field", name: "fetchMore", static: false, private: false, access: { has: obj => "fetchMore" in obj, get: obj => obj.fetchMore, set: (obj, value) => { obj.fetchMore = value; } }, metadata: _metadata }, _fetchMore_initializers, _fetchMore_extraInitializers);
-        __esDecorate(null, null, _visibleRangeChange_decorators, { kind: "field", name: "visibleRangeChange", static: false, private: false, access: { has: obj => "visibleRangeChange" in obj, get: obj => obj.visibleRangeChange, set: (obj, value) => { obj.visibleRangeChange = value; } }, metadata: _metadata }, _visibleRangeChange_initializers, _visibleRangeChange_extraInitializers);
-        __esDecorate(null, null, _loadingChange_decorators, { kind: "field", name: "loadingChange", static: false, private: false, access: { has: obj => "loadingChange" in obj, get: obj => obj.loadingChange, set: (obj, value) => { obj.loadingChange = value; } }, metadata: _metadata }, _loadingChange_initializers, _loadingChange_extraInitializers);
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
-    return _classThis;
-})();
-
-let LazyScrollComponent = (() => {
-    let _classDecorators = [core.Component({
-            selector: 'lazy-scroll',
-            template: `
-    <div 
-      class="lazy-scroll-container"
-      [style.height.px]="viewportHeight"
-      [style.overflow-y]="'auto'"
-      [lazyScroll]="true"
-      [items]="items"
-      [itemHeight]="itemHeight"
-      [viewportHeight]="viewportHeight"
-      [bufferSize]="bufferSize"
-      [fetchMore]="fetchMore"
-      (visibleRangeChange)="onVisibleRangeChange($event)"
-      (loadingChange)="onLoadingChange($event)"
-      #scrollContainer
-    >
-      <!-- Top padding -->
-      <div [style.height.px]="topPadding"></div>
-      
-      <!-- Visible items -->
-      <div 
-        *ngFor="let item of visibleItems; let i = index; trackBy: trackByFn" 
-        [style.height.px]="itemHeight"
-        class="lazy-item"
-      >
-        <ng-container 
-          *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: visibleRange.start + i }">
-        </ng-container>
-      </div>
-      
-      <!-- Bottom padding -->
-      <div [style.height.px]="bottomPadding"></div>
-      
-      <!-- Loading indicator -->
-      <div *ngIf="isLoading" class="lazy-loading">
-        Loading more items...
-      </div>
-    </div>
-  `,
-            styles: [`
-    .lazy-scroll-container {
-      position: relative;
-    }
-    
-    .lazy-item {
-      width: 100%;
-    }
-    
-    .lazy-loading {
-      text-align: center;
-      padding: 20px;
-      color: #666;
-    }
-  `]
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _items_decorators;
-    let _items_initializers = [];
-    let _items_extraInitializers = [];
-    let _itemHeight_decorators;
-    let _itemHeight_initializers = [];
-    let _itemHeight_extraInitializers = [];
-    let _viewportHeight_decorators;
-    let _viewportHeight_initializers = [];
-    let _viewportHeight_extraInitializers = [];
-    let _bufferSize_decorators;
-    let _bufferSize_initializers = [];
-    let _bufferSize_extraInitializers = [];
-    let _fetchMore_decorators;
-    let _fetchMore_initializers = [];
-    let _fetchMore_extraInitializers = [];
-    let _visibleRangeChange_decorators;
-    let _visibleRangeChange_initializers = [];
-    let _visibleRangeChange_extraInitializers = [];
-    let _loadingChange_decorators;
-    let _loadingChange_initializers = [];
-    let _loadingChange_extraInitializers = [];
-    let _itemTemplate_decorators;
-    let _itemTemplate_initializers = [];
-    let _itemTemplate_extraInitializers = [];
-    _classThis = class {
-        constructor() {
-            this.items = __runInitializers(this, _items_initializers, []);
-            this.itemHeight = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _itemHeight_initializers, 50));
-            this.viewportHeight = (__runInitializers(this, _itemHeight_extraInitializers), __runInitializers(this, _viewportHeight_initializers, 400));
-            this.bufferSize = (__runInitializers(this, _viewportHeight_extraInitializers), __runInitializers(this, _bufferSize_initializers, 5));
-            this.fetchMore = (__runInitializers(this, _bufferSize_extraInitializers), __runInitializers(this, _fetchMore_initializers, void 0));
-            this.visibleRangeChange = (__runInitializers(this, _fetchMore_extraInitializers), __runInitializers(this, _visibleRangeChange_initializers, new core.EventEmitter()));
-            this.loadingChange = (__runInitializers(this, _visibleRangeChange_extraInitializers), __runInitializers(this, _loadingChange_initializers, new core.EventEmitter()));
-            this.itemTemplate = (__runInitializers(this, _loadingChange_extraInitializers), __runInitializers(this, _itemTemplate_initializers, void 0));
-            this.visibleRange = (__runInitializers(this, _itemTemplate_extraInitializers), { start: 0, end: 0 });
-            this.isLoading = false;
-        }
-        get topPadding() {
-            return this.visibleRange.start * this.itemHeight;
-        }
-        get bottomPadding() {
-            return Math.max(0, (this.items.length - this.visibleRange.end) * this.itemHeight);
-        }
-        get visibleItems() {
-            return this.items.slice(this.visibleRange.start, this.visibleRange.end);
-        }
-        ngAfterViewInit() {
-            // Component initialized
-        }
-        ngOnDestroy() {
-            // Cleanup if needed
-        }
-        onVisibleRangeChange(range) {
-            this.visibleRange = range;
-            this.visibleRangeChange.emit(range);
-        }
-        onLoadingChange(loading) {
-            this.isLoading = loading;
-            this.loadingChange.emit(loading);
-        }
-        trackByFn(index, item) {
-            return item.id || index;
         }
     };
-    __setFunctionName(_classThis, "LazyScrollComponent");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-        _items_decorators = [core.Input()];
-        _itemHeight_decorators = [core.Input()];
-        _viewportHeight_decorators = [core.Input()];
-        _bufferSize_decorators = [core.Input()];
-        _fetchMore_decorators = [core.Input()];
-        _visibleRangeChange_decorators = [core.Output()];
-        _loadingChange_decorators = [core.Output()];
-        _itemTemplate_decorators = [core.ContentChild('itemTemplate', { read: core.TemplateRef })];
-        __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
-        __esDecorate(null, null, _itemHeight_decorators, { kind: "field", name: "itemHeight", static: false, private: false, access: { has: obj => "itemHeight" in obj, get: obj => obj.itemHeight, set: (obj, value) => { obj.itemHeight = value; } }, metadata: _metadata }, _itemHeight_initializers, _itemHeight_extraInitializers);
-        __esDecorate(null, null, _viewportHeight_decorators, { kind: "field", name: "viewportHeight", static: false, private: false, access: { has: obj => "viewportHeight" in obj, get: obj => obj.viewportHeight, set: (obj, value) => { obj.viewportHeight = value; } }, metadata: _metadata }, _viewportHeight_initializers, _viewportHeight_extraInitializers);
-        __esDecorate(null, null, _bufferSize_decorators, { kind: "field", name: "bufferSize", static: false, private: false, access: { has: obj => "bufferSize" in obj, get: obj => obj.bufferSize, set: (obj, value) => { obj.bufferSize = value; } }, metadata: _metadata }, _bufferSize_initializers, _bufferSize_extraInitializers);
-        __esDecorate(null, null, _fetchMore_decorators, { kind: "field", name: "fetchMore", static: false, private: false, access: { has: obj => "fetchMore" in obj, get: obj => obj.fetchMore, set: (obj, value) => { obj.fetchMore = value; } }, metadata: _metadata }, _fetchMore_initializers, _fetchMore_extraInitializers);
-        __esDecorate(null, null, _visibleRangeChange_decorators, { kind: "field", name: "visibleRangeChange", static: false, private: false, access: { has: obj => "visibleRangeChange" in obj, get: obj => obj.visibleRangeChange, set: (obj, value) => { obj.visibleRangeChange = value; } }, metadata: _metadata }, _visibleRangeChange_initializers, _visibleRangeChange_extraInitializers);
-        __esDecorate(null, null, _loadingChange_decorators, { kind: "field", name: "loadingChange", static: false, private: false, access: { has: obj => "loadingChange" in obj, get: obj => obj.loadingChange, set: (obj, value) => { obj.loadingChange = value; } }, metadata: _metadata }, _loadingChange_initializers, _loadingChange_extraInitializers);
-        __esDecorate(null, null, _itemTemplate_decorators, { kind: "field", name: "itemTemplate", static: false, private: false, access: { has: obj => "itemTemplate" in obj, get: obj => obj.itemTemplate, set: (obj, value) => { obj.itemTemplate = value; } }, metadata: _metadata }, _itemTemplate_initializers, _itemTemplate_extraInitializers);
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
-    return _classThis;
-})();
-
-function lazyScroll(node, config) {
-    const engine = new Engine({
-        itemHeight: config.itemHeight,
-        viewportHeight: config.viewportHeight,
-        bufferSize: config.bufferSize || 5
-    });
-    engine.setFetchMoreCallback(config.fetchMore);
-    let scrollHandler = null;
-    // Initialize scroll handler
-    scrollHandler = () => {
-        const scrollTop = node.scrollTop;
-        engine.updateScrollPosition(scrollTop);
-    };
-    // Add scroll listener
-    node.addEventListener('scroll', scrollHandler, { passive: true });
-    // Return destroy function
     return {
-        update(newConfig) {
-            // Update configuration if needed
-            if (newConfig.fetchMore !== config.fetchMore) {
-                engine.setFetchMoreCallback(newConfig.fetchMore);
+        visibleRange,
+        loadedItems,
+        isLoading,
+        scrollAnalysis,
+        setContainerRef,
+        // Helper function to trigger manual refresh
+        refresh: () => {
+            var _a;
+            if (engineRef.current) {
+                engineRef.current.updateScrollPosition(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
             }
-            config = newConfig;
         },
-        destroy() {
-            // Remove scroll listener
-            if (scrollHandler) {
-                node.removeEventListener('scroll', scrollHandler);
+        // Function to get current scroll analysis
+        getScrollAnalysis: () => {
+            if (engineRef.current) {
+                // In a real implementation, we would get the analysis from the engine
+                // For now, we'll return the current state
+                return scrollAnalysis;
             }
-            // Cleanup engine
-            engine.cleanup();
+            return {
+                velocity: 0,
+                direction: 'stationary',
+                buffer: 5,
+                prefetchDistance: 400,
+                predictedPosition: 0,
+                isIdle: true
+            };
         }
     };
-}
+};
+
+const LazyList = React.forwardRef((props, ref) => {
+    const { fetchMore, renderItem, items, itemHeight, viewportHeight, bufferSize, className = '', style = {}, ...rest } = props;
+    const { visibleRange, setContainerRef, isLoading } = useLazyList({
+        fetchMore,
+        itemHeight,
+        viewportHeight,
+        bufferSize,
+        ...rest
+    });
+    // Calculate container height to simulate infinite scroll
+    const containerHeight = items.length * itemHeight;
+    const visibleItems = items.slice(visibleRange.start, visibleRange.end);
+    // Calculate top padding to maintain scroll position
+    const paddingTop = visibleRange.start * itemHeight;
+    return (React.createElement("div", { ref: (el) => {
+            setContainerRef(el);
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(el);
+                }
+                else {
+                    ref.current = el;
+                }
+            }
+        }, className: `lazy-list ${className}`, style: {
+            height: `${viewportHeight}px`,
+            overflowY: 'auto',
+            ...style
+        }, ...rest },
+        React.createElement("div", { style: { height: `${paddingTop}px` } }),
+        visibleItems.map((item, index) => (React.createElement("div", { key: visibleRange.start + index, style: { height: `${itemHeight}px` }, className: "lazy-item" }, renderItem(item, visibleRange.start + index)))),
+        React.createElement("div", { style: {
+                height: `${Math.max(0, containerHeight - (visibleRange.end * itemHeight))}px`
+            } }),
+        isLoading && (React.createElement("div", { className: "lazy-loading" }, "Loading more items..."))));
+});
+LazyList.displayName = 'LazyList';
 
 class LazyScroll {
   constructor(container, config) {
@@ -2072,204 +1864,6 @@ class LazyScrollElement extends HTMLElement {
 // Register the custom element
 customElements.define('lazy-scroll-element', LazyScrollElement);
 
-class ScrollObserver {
-    constructor(container, callback, options) {
-        this.observer = null;
-        this.sentinelElement = null;
-        /**
-         * Handle scroll events
-         */
-        this.onScroll = () => {
-            // Debounced scroll handler to prevent too frequent updates
-            this.debounce(() => {
-                this.callback(this.container.scrollTop);
-            }, 16); // ~60fps
-        };
-        this.container = container;
-        this.callback = callback;
-        this.options = {
-            root: container,
-            threshold: [0, 1],
-            ...options
-        };
-    }
-    /**
-     * Start observing scroll events
-     */
-    observe() {
-        // Create a sentinel element at the bottom to detect when user scrolls near the end
-        this.sentinelElement = document.createElement('div');
-        this.sentinelElement.style.height = '1px'; // Very small element
-        this.sentinelElement.setAttribute('data-lazy-sentinel', '');
-        // Add sentinel to the container
-        this.container.appendChild(this.sentinelElement);
-        // Create intersection observer to detect when sentinel comes into view
-        this.observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    // Trigger callback with current scroll position
-                    this.callback(this.container.scrollTop);
-                }
-            });
-        }, this.options);
-        this.observer.observe(this.sentinelElement);
-        // Also listen to scroll events for continuous updates
-        this.container.addEventListener('scroll', this.onScroll, { passive: true });
-    }
-    /**
-     * Debounce function for scroll events
-     */
-    debounce(func, wait) {
-        let timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(func, wait);
-    }
-    /**
-     * Disconnect observer and clean up
-     */
-    disconnect() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-        if (this.sentinelElement) {
-            this.sentinelElement.remove();
-            this.sentinelElement = null;
-        }
-        this.container.removeEventListener('scroll', this.onScroll);
-    }
-}
-
-const useLazyList = (config) => {
-    const { fetchMore, ...engineConfig } = config;
-    const engineRef = React.useRef(null);
-    const containerRef = React.useRef(null);
-    const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: 0 });
-    const [loadedItems, setLoadedItems] = React.useState([]);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [scrollAnalysis, setScrollAnalysis] = React.useState({
-        velocity: 0,
-        direction: 'stationary',
-        buffer: 5,
-        prefetchDistance: 400,
-        predictedPosition: 0,
-        isIdle: true
-    });
-    // Initialize engine
-    React.useEffect(() => {
-        engineRef.current = new Engine(engineConfig);
-        engineRef.current.setFetchMoreCallback(fetchMore);
-        return () => {
-            if (engineRef.current) {
-                engineRef.current.cleanup();
-            }
-        };
-    }, []);
-    // Update engine when config changes
-    React.useEffect(() => {
-        if (engineRef.current) {
-            engineRef.current.updateDimensions(engineConfig.viewportHeight, engineConfig.itemHeight);
-        }
-    }, [engineConfig.viewportHeight, engineConfig.itemHeight]);
-    // Handle scroll events
-    const handleScroll = React.useCallback((scrollTop) => {
-        if (engineRef.current) {
-            engineRef.current.updateScrollPosition(scrollTop);
-            // Update state based on engine
-            const state = engineRef.current.getState();
-            setVisibleRange(state.visibleRange);
-            setIsLoading(state.isLoading);
-        }
-    }, []);
-    // Set container reference
-    const setContainerRef = (element) => {
-        if (element) {
-            containerRef.current = element;
-            // Initialize scroll observer when container is available
-            if (typeof window !== 'undefined' && element) {
-                // In a real implementation, we would use ScrollObserver here
-                // For now, we'll just attach a basic scroll listener
-                const handleScrollEvent = () => {
-                    handleScroll(element.scrollTop);
-                };
-                element.addEventListener('scroll', handleScrollEvent, { passive: true });
-                // Cleanup
-                return () => {
-                    element.removeEventListener('scroll', handleScrollEvent);
-                };
-            }
-        }
-    };
-    return {
-        visibleRange,
-        loadedItems,
-        isLoading,
-        scrollAnalysis,
-        setContainerRef,
-        // Helper function to trigger manual refresh
-        refresh: () => {
-            var _a;
-            if (engineRef.current) {
-                engineRef.current.updateScrollPosition(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
-            }
-        },
-        // Function to get current scroll analysis
-        getScrollAnalysis: () => {
-            if (engineRef.current) {
-                // In a real implementation, we would get the analysis from the engine
-                // For now, we'll return the current state
-                return scrollAnalysis;
-            }
-            return {
-                velocity: 0,
-                direction: 'stationary',
-                buffer: 5,
-                prefetchDistance: 400,
-                predictedPosition: 0,
-                isIdle: true
-            };
-        }
-    };
-};
-
-const LazyList = React.forwardRef((props, ref) => {
-    const { fetchMore, renderItem, items, itemHeight, viewportHeight, bufferSize, className = '', style = {}, ...rest } = props;
-    const { visibleRange, setContainerRef, isLoading } = useLazyList({
-        fetchMore,
-        itemHeight,
-        viewportHeight,
-        bufferSize,
-        ...rest
-    });
-    // Calculate container height to simulate infinite scroll
-    const containerHeight = items.length * itemHeight;
-    const visibleItems = items.slice(visibleRange.start, visibleRange.end);
-    // Calculate top padding to maintain scroll position
-    const paddingTop = visibleRange.start * itemHeight;
-    return (React.createElement("div", { ref: (el) => {
-            setContainerRef(el);
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(el);
-                }
-                else {
-                    ref.current = el;
-                }
-            }
-        }, className: `lazy-list ${className}`, style: {
-            height: `${viewportHeight}px`,
-            overflowY: 'auto',
-            ...style
-        }, ...rest },
-        React.createElement("div", { style: { height: `${paddingTop}px` } }),
-        visibleItems.map((item, index) => (React.createElement("div", { key: visibleRange.start + index, style: { height: `${itemHeight}px` }, className: "lazy-item" }, renderItem(item, visibleRange.start + index)))),
-        React.createElement("div", { style: {
-                height: `${Math.max(0, containerHeight - (visibleRange.end * itemHeight))}px`
-            } }),
-        isLoading && (React.createElement("div", { className: "lazy-loading" }, "Loading more items..."))));
-});
-LazyList.displayName = 'LazyList';
-
 /**
  * Debounce function to limit the rate at which a function is called
  */
@@ -2309,8 +1903,6 @@ exports.GPUAccelerator = GPUAccelerator;
 exports.IntelligentScrollDetector = IntelligentScrollDetector;
 exports.LazyList = LazyList;
 exports.LazyScroll = LazyScroll;
-exports.LazyScrollComponent = LazyScrollComponent;
-exports.LazyScrollDirective = LazyScrollDirective;
 exports.LazyScrollElement = LazyScrollElement;
 exports.MemoryManager = MemoryManager;
 exports.NetworkAwarePrefetchManager = NetworkAwarePrefetchManager;
@@ -2323,8 +1915,6 @@ exports.ScrollObserver = ScrollObserver;
 exports.WindowManager = WindowManager;
 exports.createLazyScroll = createLazyScroll;
 exports.debounce = debounce;
-exports.lazyScroll = lazyScroll;
 exports.throttle = throttle;
 exports.useLazyList = useLazyList;
-exports.useLazyScroll = useLazyScroll;
 //# sourceMappingURL=index.js.map