import { ViewportInfo, ViewportPosition, ContextTrackingConfig } from './types'; /** * Callback for viewport change events. */ export type ViewportChangeCallback = (viewport: ViewportInfo) => void; /** * Callback for element visibility changes. */ export type VisibilityChangeCallback = (element: Element, position: ViewportPosition) => void; /** * Options for visibility observation. */ export interface VisibilityObserverOptions { /** Intersection thresholds (0-1) */ thresholds?: number[]; /** Root margin for early/late detection */ rootMargin?: string; /** Whether to track continuous position updates */ trackPosition?: boolean; /** Throttle interval for position updates (ms) */ throttleMs?: number; } /** * Default throttle interval for resize/scroll events. */ /** * Tracks viewport state including dimensions, scroll position, * and element visibility. * * @remarks * Uses a singleton pattern to ensure consistent viewport state * across the application. All updates are throttled for performance. * * @example * ```typescript * const tracker = ViewportTracker.getInstance(); * const viewport = tracker.getViewport(); * * tracker.onViewportChange((viewport) => { * console.log('Viewport changed:', viewport); * }); * * tracker.observeVisibility(element, (element, position) => { * console.log('Element visibility:', position.visibility); * }); * ``` */ export declare class ViewportTracker { private static instance; /** Current viewport state */ private viewport; /** Set of viewport change listeners */ private readonly viewportListeners; /** Map of elements to visibility callbacks */ private readonly visibilityCallbacks; /** Map of elements to their last known position */ private readonly elementPositions; /** Intersection observer for visibility tracking */ private intersectionObserver; /** Resize observer for viewport changes */ private resizeObserver; /** Configuration */ private readonly config; /** Throttle state for scroll events */ private scrollThrottleTimer; private lastScrollTime; /** Throttle state for resize events */ private resizeThrottleTimer; private lastResizeTime; /** Whether we're in SSR mode */ private readonly isSSR; /** * Creates a new ViewportTracker instance. * * @param config - Optional configuration */ private constructor(); /** * Gets the singleton instance. * * @param config - Optional configuration * @returns ViewportTracker instance */ static getInstance(config?: Partial): ViewportTracker; /** * Resets the singleton instance. */ static resetInstance(): void; /** * Gets the current viewport state. * * @returns Current ViewportInfo */ getViewport(): ViewportInfo; /** * Subscribes to viewport changes. * * @param callback - Callback function * @returns Unsubscribe function */ onViewportChange(callback: ViewportChangeCallback): () => void; /** * Forces a viewport state update. */ refreshViewport(): void; /** * Observes an element for visibility changes. * * @param element - Element to observe * @param callback - Callback for visibility changes * @param _options * @returns Unobserve function */ observeVisibility(element: Element, callback: VisibilityChangeCallback, _options?: VisibilityObserverOptions): () => void; /** * Gets the current viewport position of an element. * * @param element - Element to check * @returns ViewportPosition or null if not observed */ getElementPosition(element: Element): ViewportPosition | null; /** * Checks if an element is currently visible in the viewport. * * @param element - Element to check * @returns Whether element is visible */ isElementVisible(element: Element): boolean; /** * Creates a virtual viewport for optimized rendering. * Useful for large lists or grids. * * @param totalItems - Total number of items * @param itemHeight - Height of each item * @param overscan - Number of items to render outside viewport * @returns Virtual viewport bounds */ getVirtualViewportBounds(totalItems: number, itemHeight: number, overscan?: number): { startIndex: number; endIndex: number; offsetTop: number; }; /** * Destroys the tracker and cleans up resources. */ destroy(): void; /** * Creates initial viewport state. */ private createInitialViewport; /** * Initializes observers. */ private initializeObservers; /** * Attaches event listeners. */ private attachEventListeners; /** * Handles scroll events with throttling. */ private handleScroll; /** * Handles resize events with throttling. */ private handleResize; /** * Handles intersection observer entries. */ private handleIntersection; /** * Throttled scroll update. */ private throttledScroll; /** * Throttled resize update. */ private throttledResize; /** * Computes current viewport state. */ private computeViewport; /** * Gets safe area insets from CSS environment variables. */ private getSafeAreaInsets; /** * Updates the viewport state. */ private updateViewport; /** * Notifies all viewport listeners. */ private notifyViewportListeners; /** * Computes element position from intersection entry. */ private computePositionFromEntry; /** * Computes element position directly (not from intersection entry). */ private computeElementPosition; } /** * Gets the singleton ViewportTracker instance. * * @param config - Optional configuration * @returns ViewportTracker instance */ export declare function getViewportTracker(config?: Partial): ViewportTracker; /** * Gets the current viewport information. * * @returns Current ViewportInfo */ export declare function getViewport(): ViewportInfo; /** * Subscribes to viewport changes. * * @param callback - Callback function * @returns Unsubscribe function */ export declare function onViewportChange(callback: ViewportChangeCallback): () => void; /** * Checks if an element is visible in the viewport. * * @param element - Element to check * @returns Whether element is visible */ export declare function isElementInViewport(element: Element): boolean; /** * Gets viewport-relative position of an element. * * @param element - Element to check * @returns ViewportPosition or null */ export declare function getViewportPosition(element: Element): ViewportPosition | null; /** * Calculates the distance from an element to the viewport center. * * @param element - Element to check * @returns Distance in pixels, or Infinity if not in viewport */ export declare function getDistanceFromViewportCenter(element: Element): number; /** * Determines the optimal scroll position to bring an element into view. * * @param element - Element to scroll to * @param options - Scroll options * @returns Target scroll position */ export declare function getOptimalScrollPosition(element: Element, options?: { alignment?: 'start' | 'center' | 'end'; offset?: number; }): { x: number; y: number; };