lazy-render-virtual-scroll 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/dist/adapters/react/index.d.ts +91 -2
  2. package/dist/cjs/adapters/react/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  3. package/dist/cjs/adapters/react/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  4. package/dist/cjs/adapters/react/adapters/react/components/index.d.ts +2 -0
  5. package/dist/cjs/adapters/react/adapters/react/components/index.d.ts.map +1 -1
  6. package/dist/cjs/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  7. package/dist/cjs/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  8. package/dist/cjs/adapters/react/components/index.d.ts +2 -0
  9. package/dist/cjs/adapters/react/components/index.d.ts.map +1 -1
  10. package/dist/cjs/adapters/react/core/AccessibilityManager.d.ts +86 -0
  11. package/dist/cjs/adapters/react/core/AccessibilityManager.d.ts.map +1 -0
  12. package/dist/cjs/adapters/react/core/AnimationManager.d.ts +63 -0
  13. package/dist/cjs/adapters/react/core/AnimationManager.d.ts.map +1 -0
  14. package/dist/cjs/adapters/react/core/PerformanceAnalytics.d.ts +83 -0
  15. package/dist/cjs/adapters/react/core/PerformanceAnalytics.d.ts.map +1 -0
  16. package/dist/cjs/adapters/react/core/PerformanceDashboard.d.ts +60 -0
  17. package/dist/cjs/adapters/react/core/PerformanceDashboard.d.ts.map +1 -0
  18. package/dist/cjs/adapters/react/index.d.ts +4 -0
  19. package/dist/cjs/adapters/react/index.d.ts.map +1 -1
  20. package/dist/cjs/adapters/react/index.js +282 -0
  21. package/dist/cjs/adapters/react/index.js.map +1 -1
  22. package/dist/cjs/angular/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  23. package/dist/cjs/angular/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  24. package/dist/cjs/angular/adapters/react/components/index.d.ts +2 -0
  25. package/dist/cjs/angular/adapters/react/components/index.d.ts.map +1 -1
  26. package/dist/cjs/angular/core/AccessibilityManager.d.ts +86 -0
  27. package/dist/cjs/angular/core/AccessibilityManager.d.ts.map +1 -0
  28. package/dist/cjs/angular/core/AnimationManager.d.ts +63 -0
  29. package/dist/cjs/angular/core/AnimationManager.d.ts.map +1 -0
  30. package/dist/cjs/angular/core/PerformanceAnalytics.d.ts +83 -0
  31. package/dist/cjs/angular/core/PerformanceAnalytics.d.ts.map +1 -0
  32. package/dist/cjs/angular/core/PerformanceDashboard.d.ts +60 -0
  33. package/dist/cjs/angular/core/PerformanceDashboard.d.ts.map +1 -0
  34. package/dist/cjs/angular/index.d.ts +4 -0
  35. package/dist/cjs/angular/index.d.ts.map +1 -1
  36. package/dist/cjs/core/AccessibilityManager.d.ts +86 -0
  37. package/dist/cjs/core/AccessibilityManager.d.ts.map +1 -0
  38. package/dist/cjs/core/AnimationManager.d.ts +63 -0
  39. package/dist/cjs/core/AnimationManager.d.ts.map +1 -0
  40. package/dist/cjs/core/PerformanceAnalytics.d.ts +83 -0
  41. package/dist/cjs/core/PerformanceAnalytics.d.ts.map +1 -0
  42. package/dist/cjs/core/PerformanceDashboard.d.ts +60 -0
  43. package/dist/cjs/core/PerformanceDashboard.d.ts.map +1 -0
  44. package/dist/cjs/index.d.ts +4 -0
  45. package/dist/cjs/index.d.ts.map +1 -1
  46. package/dist/cjs/index.js +756 -0
  47. package/dist/cjs/index.js.map +1 -1
  48. package/dist/cjs/svelte/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  49. package/dist/cjs/svelte/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  50. package/dist/cjs/svelte/adapters/react/components/index.d.ts +2 -0
  51. package/dist/cjs/svelte/adapters/react/components/index.d.ts.map +1 -1
  52. package/dist/cjs/svelte/core/AccessibilityManager.d.ts +86 -0
  53. package/dist/cjs/svelte/core/AccessibilityManager.d.ts.map +1 -0
  54. package/dist/cjs/svelte/core/AnimationManager.d.ts +63 -0
  55. package/dist/cjs/svelte/core/AnimationManager.d.ts.map +1 -0
  56. package/dist/cjs/svelte/core/PerformanceAnalytics.d.ts +83 -0
  57. package/dist/cjs/svelte/core/PerformanceAnalytics.d.ts.map +1 -0
  58. package/dist/cjs/svelte/core/PerformanceDashboard.d.ts +60 -0
  59. package/dist/cjs/svelte/core/PerformanceDashboard.d.ts.map +1 -0
  60. package/dist/cjs/svelte/index.d.ts +4 -0
  61. package/dist/cjs/svelte/index.d.ts.map +1 -1
  62. package/dist/cjs/vue/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  63. package/dist/cjs/vue/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  64. package/dist/cjs/vue/adapters/react/components/index.d.ts +2 -0
  65. package/dist/cjs/vue/adapters/react/components/index.d.ts.map +1 -1
  66. package/dist/cjs/vue/core/AccessibilityManager.d.ts +86 -0
  67. package/dist/cjs/vue/core/AccessibilityManager.d.ts.map +1 -0
  68. package/dist/cjs/vue/core/AnimationManager.d.ts +63 -0
  69. package/dist/cjs/vue/core/AnimationManager.d.ts.map +1 -0
  70. package/dist/cjs/vue/core/PerformanceAnalytics.d.ts +83 -0
  71. package/dist/cjs/vue/core/PerformanceAnalytics.d.ts.map +1 -0
  72. package/dist/cjs/vue/core/PerformanceDashboard.d.ts +60 -0
  73. package/dist/cjs/vue/core/PerformanceDashboard.d.ts.map +1 -0
  74. package/dist/cjs/vue/index.d.ts +4 -0
  75. package/dist/cjs/vue/index.d.ts.map +1 -1
  76. package/dist/esm/adapters/react/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  77. package/dist/esm/adapters/react/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  78. package/dist/esm/adapters/react/adapters/react/components/index.d.ts +2 -0
  79. package/dist/esm/adapters/react/adapters/react/components/index.d.ts.map +1 -1
  80. package/dist/esm/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  81. package/dist/esm/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  82. package/dist/esm/adapters/react/components/index.d.ts +2 -0
  83. package/dist/esm/adapters/react/components/index.d.ts.map +1 -1
  84. package/dist/esm/adapters/react/core/AccessibilityManager.d.ts +86 -0
  85. package/dist/esm/adapters/react/core/AccessibilityManager.d.ts.map +1 -0
  86. package/dist/esm/adapters/react/core/AnimationManager.d.ts +63 -0
  87. package/dist/esm/adapters/react/core/AnimationManager.d.ts.map +1 -0
  88. package/dist/esm/adapters/react/core/PerformanceAnalytics.d.ts +83 -0
  89. package/dist/esm/adapters/react/core/PerformanceAnalytics.d.ts.map +1 -0
  90. package/dist/esm/adapters/react/core/PerformanceDashboard.d.ts +60 -0
  91. package/dist/esm/adapters/react/core/PerformanceDashboard.d.ts.map +1 -0
  92. package/dist/esm/adapters/react/index.d.ts +4 -0
  93. package/dist/esm/adapters/react/index.d.ts.map +1 -1
  94. package/dist/esm/adapters/react/index.js +282 -1
  95. package/dist/esm/adapters/react/index.js.map +1 -1
  96. package/dist/esm/angular/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  97. package/dist/esm/angular/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  98. package/dist/esm/angular/adapters/react/components/index.d.ts +2 -0
  99. package/dist/esm/angular/adapters/react/components/index.d.ts.map +1 -1
  100. package/dist/esm/angular/core/AccessibilityManager.d.ts +86 -0
  101. package/dist/esm/angular/core/AccessibilityManager.d.ts.map +1 -0
  102. package/dist/esm/angular/core/AnimationManager.d.ts +63 -0
  103. package/dist/esm/angular/core/AnimationManager.d.ts.map +1 -0
  104. package/dist/esm/angular/core/PerformanceAnalytics.d.ts +83 -0
  105. package/dist/esm/angular/core/PerformanceAnalytics.d.ts.map +1 -0
  106. package/dist/esm/angular/core/PerformanceDashboard.d.ts +60 -0
  107. package/dist/esm/angular/core/PerformanceDashboard.d.ts.map +1 -0
  108. package/dist/esm/angular/index.d.ts +4 -0
  109. package/dist/esm/angular/index.d.ts.map +1 -1
  110. package/dist/esm/core/AccessibilityManager.d.ts +86 -0
  111. package/dist/esm/core/AccessibilityManager.d.ts.map +1 -0
  112. package/dist/esm/core/AnimationManager.d.ts +63 -0
  113. package/dist/esm/core/AnimationManager.d.ts.map +1 -0
  114. package/dist/esm/core/PerformanceAnalytics.d.ts +83 -0
  115. package/dist/esm/core/PerformanceAnalytics.d.ts.map +1 -0
  116. package/dist/esm/core/PerformanceDashboard.d.ts +60 -0
  117. package/dist/esm/core/PerformanceDashboard.d.ts.map +1 -0
  118. package/dist/esm/index.d.ts +4 -0
  119. package/dist/esm/index.d.ts.map +1 -1
  120. package/dist/esm/index.js +753 -1
  121. package/dist/esm/index.js.map +1 -1
  122. package/dist/esm/svelte/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  123. package/dist/esm/svelte/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  124. package/dist/esm/svelte/adapters/react/components/index.d.ts +2 -0
  125. package/dist/esm/svelte/adapters/react/components/index.d.ts.map +1 -1
  126. package/dist/esm/svelte/core/AccessibilityManager.d.ts +86 -0
  127. package/dist/esm/svelte/core/AccessibilityManager.d.ts.map +1 -0
  128. package/dist/esm/svelte/core/AnimationManager.d.ts +63 -0
  129. package/dist/esm/svelte/core/AnimationManager.d.ts.map +1 -0
  130. package/dist/esm/svelte/core/PerformanceAnalytics.d.ts +83 -0
  131. package/dist/esm/svelte/core/PerformanceAnalytics.d.ts.map +1 -0
  132. package/dist/esm/svelte/core/PerformanceDashboard.d.ts +60 -0
  133. package/dist/esm/svelte/core/PerformanceDashboard.d.ts.map +1 -0
  134. package/dist/esm/svelte/index.d.ts +4 -0
  135. package/dist/esm/svelte/index.d.ts.map +1 -1
  136. package/dist/esm/vue/adapters/react/components/PerformanceMonitor.d.ts +10 -0
  137. package/dist/esm/vue/adapters/react/components/PerformanceMonitor.d.ts.map +1 -0
  138. package/dist/esm/vue/adapters/react/components/index.d.ts +2 -0
  139. package/dist/esm/vue/adapters/react/components/index.d.ts.map +1 -1
  140. package/dist/esm/vue/core/AccessibilityManager.d.ts +86 -0
  141. package/dist/esm/vue/core/AccessibilityManager.d.ts.map +1 -0
  142. package/dist/esm/vue/core/AnimationManager.d.ts +63 -0
  143. package/dist/esm/vue/core/AnimationManager.d.ts.map +1 -0
  144. package/dist/esm/vue/core/PerformanceAnalytics.d.ts +83 -0
  145. package/dist/esm/vue/core/PerformanceAnalytics.d.ts.map +1 -0
  146. package/dist/esm/vue/core/PerformanceDashboard.d.ts +60 -0
  147. package/dist/esm/vue/core/PerformanceDashboard.d.ts.map +1 -0
  148. package/dist/esm/vue/index.d.ts +4 -0
  149. package/dist/esm/vue/index.d.ts.map +1 -1
  150. package/dist/index.d.ts +289 -1
  151. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -2920,6 +2920,758 @@ class IntelligentPagination {
2920
2920
  }
2921
2921
  }
2922
2922
 
2923
+ /**
2924
+ * Performance Analytics Engine
2925
+ * Tracks render time, memory usage, and network performance
2926
+ */
2927
+ class PerformanceAnalytics {
2928
+ constructor() {
2929
+ this.renderTimeHistory = [];
2930
+ this.memoryHistory = [];
2931
+ this.networkLatencyHistory = [];
2932
+ this.frameTimestamps = [];
2933
+ this.droppedFrames = 0;
2934
+ this.jankCount = 0;
2935
+ this.MAX_HISTORY = 100;
2936
+ this.JANK_THRESHOLD = 50; // ms
2937
+ }
2938
+ /**
2939
+ * Track render time for an item
2940
+ */
2941
+ trackRenderTime(renderTime) {
2942
+ this.renderTimeHistory.push(renderTime);
2943
+ if (this.renderTimeHistory.length > this.MAX_HISTORY) {
2944
+ this.renderTimeHistory.shift();
2945
+ }
2946
+ }
2947
+ /**
2948
+ * Track memory usage
2949
+ */
2950
+ trackMemoryUsage(memoryMB) {
2951
+ this.memoryHistory.push(memoryMB);
2952
+ if (this.memoryHistory.length > this.MAX_HISTORY) {
2953
+ this.memoryHistory.shift();
2954
+ }
2955
+ }
2956
+ /**
2957
+ * Track network request latency
2958
+ */
2959
+ trackNetworkLatency(latency) {
2960
+ this.networkLatencyHistory.push(latency);
2961
+ if (this.networkLatencyHistory.length > this.MAX_HISTORY) {
2962
+ this.networkLatencyHistory.shift();
2963
+ }
2964
+ }
2965
+ /**
2966
+ * Track frame timing for FPS calculation
2967
+ */
2968
+ trackFrame() {
2969
+ const now = performance.now();
2970
+ this.frameTimestamps.push(now);
2971
+ // Keep only last 60 frames (1 second at 60fps)
2972
+ if (this.frameTimestamps.length > 60) {
2973
+ this.frameTimestamps.shift();
2974
+ }
2975
+ // Detect jank (frame took longer than JANK_THRESHOLD)
2976
+ if (this.frameTimestamps.length >= 2) {
2977
+ const frameTime = now - this.frameTimestamps[this.frameTimestamps.length - 2];
2978
+ if (frameTime > this.JANK_THRESHOLD) {
2979
+ this.jankCount++;
2980
+ this.droppedFrames++;
2981
+ }
2982
+ }
2983
+ }
2984
+ /**
2985
+ * Get current FPS
2986
+ */
2987
+ getCurrentFPS() {
2988
+ if (this.frameTimestamps.length < 2)
2989
+ return 60;
2990
+ const now = performance.now();
2991
+ const oneSecondAgo = now - 1000;
2992
+ const framesInLastSecond = this.frameTimestamps.filter(t => t > oneSecondAgo).length;
2993
+ return framesInLastSecond;
2994
+ }
2995
+ /**
2996
+ * Get comprehensive performance metrics
2997
+ */
2998
+ getMetrics() {
2999
+ return {
3000
+ renderTime: {
3001
+ average: this.getAverage(this.renderTimeHistory),
3002
+ min: Math.min(...this.renderTimeHistory, 0),
3003
+ max: Math.max(...this.renderTimeHistory, 0),
3004
+ count: this.renderTimeHistory.length
3005
+ },
3006
+ memoryUsage: {
3007
+ current: this.memoryHistory[this.memoryHistory.length - 1] || 0,
3008
+ peak: Math.max(...this.memoryHistory, 0),
3009
+ trend: this.getTrend(this.memoryHistory)
3010
+ },
3011
+ networkPerformance: {
3012
+ averageLatency: this.getAverage(this.networkLatencyHistory),
3013
+ averageSpeed: 0, // Would need actual network speed data
3014
+ failedRequests: 0 // Would need to track failures
3015
+ },
3016
+ scrollPerformance: {
3017
+ averageFPS: this.getCurrentFPS(),
3018
+ droppedFrames: this.droppedFrames,
3019
+ jankCount: this.jankCount
3020
+ }
3021
+ };
3022
+ }
3023
+ /**
3024
+ * Get average from array
3025
+ */
3026
+ getAverage(arr) {
3027
+ if (arr.length === 0)
3028
+ return 0;
3029
+ return arr.reduce((a, b) => a + b, 0) / arr.length;
3030
+ }
3031
+ /**
3032
+ * Get trend from array
3033
+ */
3034
+ getTrend(arr) {
3035
+ if (arr.length < 10)
3036
+ return 'stable';
3037
+ const recent = arr.slice(-10);
3038
+ const older = arr.slice(-20, -10);
3039
+ const recentAvg = this.getAverage(recent);
3040
+ const olderAvg = this.getAverage(older);
3041
+ const change = (recentAvg - olderAvg) / olderAvg;
3042
+ if (change > 0.1)
3043
+ return 'increasing';
3044
+ if (change < -0.1)
3045
+ return 'decreasing';
3046
+ return 'stable';
3047
+ }
3048
+ /**
3049
+ * Reset all metrics
3050
+ */
3051
+ reset() {
3052
+ this.renderTimeHistory = [];
3053
+ this.memoryHistory = [];
3054
+ this.networkLatencyHistory = [];
3055
+ this.frameTimestamps = [];
3056
+ this.droppedFrames = 0;
3057
+ this.jankCount = 0;
3058
+ }
3059
+ /**
3060
+ * Get performance score (0-100)
3061
+ */
3062
+ getPerformanceScore() {
3063
+ const metrics = this.getMetrics();
3064
+ let score = 100;
3065
+ // Penalize low FPS
3066
+ if (metrics.scrollPerformance.averageFPS < 60) {
3067
+ score -= (60 - metrics.scrollPerformance.averageFPS) * 0.5;
3068
+ }
3069
+ // Penalize high render times
3070
+ if (metrics.renderTime.average > 16) {
3071
+ score -= (metrics.renderTime.average - 16) * 0.3;
3072
+ }
3073
+ // Penalize jank
3074
+ score -= metrics.scrollPerformance.jankCount * 0.2;
3075
+ // Penalize memory increase
3076
+ if (metrics.memoryUsage.trend === 'increasing') {
3077
+ score -= 10;
3078
+ }
3079
+ return Math.max(0, Math.min(100, score));
3080
+ }
3081
+ /**
3082
+ * Get optimization recommendations
3083
+ */
3084
+ getRecommendations() {
3085
+ const recommendations = [];
3086
+ const metrics = this.getMetrics();
3087
+ if (metrics.scrollPerformance.averageFPS < 30) {
3088
+ recommendations.push('Critical: FPS is very low. Consider reducing item complexity or increasing batch size.');
3089
+ }
3090
+ else if (metrics.scrollPerformance.averageFPS < 60) {
3091
+ recommendations.push('Warning: FPS below 60. Consider optimizing render performance.');
3092
+ }
3093
+ if (metrics.renderTime.average > 50) {
3094
+ recommendations.push('Warning: High render time. Consider simplifying item components.');
3095
+ }
3096
+ if (metrics.memoryUsage.trend === 'increasing') {
3097
+ recommendations.push('Warning: Memory usage increasing. Check for memory leaks.');
3098
+ }
3099
+ if (metrics.scrollPerformance.jankCount > 10) {
3100
+ recommendations.push('Warning: Frequent jank detected. Consider smoothing scroll animations.');
3101
+ }
3102
+ if (recommendations.length === 0) {
3103
+ recommendations.push('Performance is optimal. No issues detected.');
3104
+ }
3105
+ return recommendations;
3106
+ }
3107
+ }
3108
+
3109
+ /**
3110
+ * Performance Dashboard
3111
+ * Real-time performance monitoring and bottleneck identification
3112
+ */
3113
+ class PerformanceDashboard {
3114
+ constructor(analytics) {
3115
+ this.updateInterval = 1000; // 1 second
3116
+ this.listeners = [];
3117
+ this.intervalId = null;
3118
+ this.isMonitoring = false;
3119
+ this.analytics = analytics;
3120
+ }
3121
+ /**
3122
+ * Start real-time monitoring
3123
+ */
3124
+ startMonitoring() {
3125
+ if (this.isMonitoring)
3126
+ return;
3127
+ this.isMonitoring = true;
3128
+ this.intervalId = window.setInterval(() => {
3129
+ const data = this.getDashboardData();
3130
+ this.notifyListeners(data);
3131
+ }, this.updateInterval);
3132
+ }
3133
+ /**
3134
+ * Stop monitoring
3135
+ */
3136
+ stopMonitoring() {
3137
+ if (!this.isMonitoring)
3138
+ return;
3139
+ this.isMonitoring = false;
3140
+ if (this.intervalId !== null) {
3141
+ clearInterval(this.intervalId);
3142
+ this.intervalId = null;
3143
+ }
3144
+ }
3145
+ /**
3146
+ * Get current dashboard data
3147
+ */
3148
+ getDashboardData() {
3149
+ const metrics = this.analytics.getMetrics();
3150
+ const score = this.analytics.getPerformanceScore();
3151
+ const recommendations = this.analytics.getRecommendations();
3152
+ // Identify bottlenecks
3153
+ const bottlenecks = this.identifyBottlenecks(metrics);
3154
+ return {
3155
+ overallScore: score,
3156
+ fps: metrics.scrollPerformance.averageFPS,
3157
+ renderTime: metrics.renderTime.average,
3158
+ memoryUsage: metrics.memoryUsage.current,
3159
+ networkLatency: metrics.networkPerformance.averageLatency,
3160
+ recommendations,
3161
+ bottlenecks
3162
+ };
3163
+ }
3164
+ /**
3165
+ * Identify performance bottlenecks
3166
+ */
3167
+ identifyBottlenecks(metrics) {
3168
+ const bottlenecks = [];
3169
+ // FPS bottleneck
3170
+ if (metrics.scrollPerformance.averageFPS < 30) {
3171
+ bottlenecks.push('CRITICAL: Low FPS - Rendering is the bottleneck');
3172
+ }
3173
+ else if (metrics.scrollPerformance.averageFPS < 60) {
3174
+ bottlenecks.push('WARNING: Below 60 FPS - Consider optimizing renders');
3175
+ }
3176
+ // Render time bottleneck
3177
+ if (metrics.renderTime.average > 50) {
3178
+ bottlenecks.push('HIGH: Slow render times - Simplify item components');
3179
+ }
3180
+ else if (metrics.renderTime.average > 16) {
3181
+ bottlenecks.push('MEDIUM: Render time above frame budget');
3182
+ }
3183
+ // Memory bottleneck
3184
+ if (metrics.memoryUsage.trend === 'increasing') {
3185
+ bottlenecks.push('WARNING: Memory leak detected - Check cleanup logic');
3186
+ }
3187
+ // Network bottleneck
3188
+ if (metrics.networkPerformance.averageLatency > 500) {
3189
+ bottlenecks.push('HIGH: Network latency - Implement better caching');
3190
+ }
3191
+ // Jank bottleneck
3192
+ if (metrics.scrollPerformance.jankCount > 20) {
3193
+ bottlenecks.push('CRITICAL: Frequent jank - Smooth scroll performance');
3194
+ }
3195
+ if (bottlenecks.length === 0) {
3196
+ bottlenecks.push('No bottlenecks detected - Performance is optimal');
3197
+ }
3198
+ return bottlenecks;
3199
+ }
3200
+ /**
3201
+ * Add listener for dashboard updates
3202
+ */
3203
+ addListener(callback) {
3204
+ this.listeners.push(callback);
3205
+ }
3206
+ /**
3207
+ * Remove listener
3208
+ */
3209
+ removeListener(callback) {
3210
+ const index = this.listeners.indexOf(callback);
3211
+ if (index > -1) {
3212
+ this.listeners.splice(index, 1);
3213
+ }
3214
+ }
3215
+ /**
3216
+ * Notify all listeners
3217
+ */
3218
+ notifyListeners(data) {
3219
+ this.listeners.forEach(listener => {
3220
+ try {
3221
+ listener(data);
3222
+ }
3223
+ catch (error) {
3224
+ console.error('Dashboard listener error:', error);
3225
+ }
3226
+ });
3227
+ }
3228
+ /**
3229
+ * Export metrics as JSON
3230
+ */
3231
+ exportMetrics() {
3232
+ const metrics = this.analytics.getMetrics();
3233
+ return JSON.stringify(metrics, null, 2);
3234
+ }
3235
+ /**
3236
+ * Get performance report
3237
+ */
3238
+ getPerformanceReport() {
3239
+ const data = this.getDashboardData();
3240
+ let report = '=== PERFORMANCE REPORT ===\n\n';
3241
+ report += `Overall Score: ${data.overallScore}/100\n`;
3242
+ report += `FPS: ${data.fps}\n`;
3243
+ report += `Average Render Time: ${data.renderTime.toFixed(2)}ms\n`;
3244
+ report += `Memory Usage: ${data.memoryUsage.toFixed(2)}MB\n`;
3245
+ report += `Network Latency: ${data.networkLatency.toFixed(2)}ms\n\n`;
3246
+ report += 'BOTTLENECKS:\n';
3247
+ data.bottlenecks.forEach(b => {
3248
+ report += ` - ${b}\n`;
3249
+ });
3250
+ report += '\nRECOMMENDATIONS:\n';
3251
+ data.recommendations.forEach(r => {
3252
+ report += ` - ${r}\n`;
3253
+ });
3254
+ return report;
3255
+ }
3256
+ }
3257
+
3258
+ /**
3259
+ * Accessibility Manager
3260
+ * Handles keyboard navigation, screen reader compatibility, and ARIA attributes
3261
+ */
3262
+ class AccessibilityManager {
3263
+ constructor(config) {
3264
+ this.focusedIndex = -1;
3265
+ this.containerElement = null;
3266
+ this.itemElements = [];
3267
+ this.config = {
3268
+ enableKeyboardNav: true,
3269
+ enableScreenReader: true,
3270
+ enableARIA: true,
3271
+ ...config
3272
+ };
3273
+ }
3274
+ /**
3275
+ * Initialize accessibility features
3276
+ */
3277
+ initialize(container) {
3278
+ this.containerElement = container;
3279
+ // Set ARIA roles
3280
+ if (this.config.enableARIA) {
3281
+ this.setupARIA();
3282
+ }
3283
+ // Setup keyboard navigation
3284
+ if (this.config.enableKeyboardNav) {
3285
+ this.setupKeyboardNav();
3286
+ }
3287
+ // Setup screen reader announcements
3288
+ if (this.config.enableScreenReader) {
3289
+ this.setupScreenReader();
3290
+ }
3291
+ }
3292
+ /**
3293
+ * Setup ARIA attributes
3294
+ */
3295
+ setupARIA() {
3296
+ if (!this.containerElement)
3297
+ return;
3298
+ // Set list role
3299
+ this.containerElement.setAttribute('role', 'list');
3300
+ this.containerElement.setAttribute('aria-label', 'Virtual scroll list');
3301
+ // Set tabindex for keyboard focus
3302
+ this.containerElement.setAttribute('tabindex', '0');
3303
+ }
3304
+ /**
3305
+ * Setup keyboard navigation
3306
+ */
3307
+ setupKeyboardNav() {
3308
+ if (!this.containerElement)
3309
+ return;
3310
+ this.containerElement.addEventListener('keydown', (e) => {
3311
+ this.handleKeyDown(e);
3312
+ });
3313
+ }
3314
+ /**
3315
+ * Handle keyboard events
3316
+ */
3317
+ handleKeyDown(e) {
3318
+ switch (e.key) {
3319
+ case 'ArrowDown':
3320
+ e.preventDefault();
3321
+ this.focusNext();
3322
+ break;
3323
+ case 'ArrowUp':
3324
+ e.preventDefault();
3325
+ this.focusPrevious();
3326
+ break;
3327
+ case 'Home':
3328
+ e.preventDefault();
3329
+ this.focusFirst();
3330
+ break;
3331
+ case 'End':
3332
+ e.preventDefault();
3333
+ this.focusLast();
3334
+ break;
3335
+ case 'PageDown':
3336
+ e.preventDefault();
3337
+ this.focusPageDown();
3338
+ break;
3339
+ case 'PageUp':
3340
+ e.preventDefault();
3341
+ this.focusPageUp();
3342
+ break;
3343
+ }
3344
+ }
3345
+ /**
3346
+ * Focus next item
3347
+ */
3348
+ focusNext() {
3349
+ if (this.focusedIndex < this.itemElements.length - 1) {
3350
+ this.focusedIndex++;
3351
+ this.focusItem(this.focusedIndex);
3352
+ }
3353
+ }
3354
+ /**
3355
+ * Focus previous item
3356
+ */
3357
+ focusPrevious() {
3358
+ if (this.focusedIndex > 0) {
3359
+ this.focusedIndex--;
3360
+ this.focusItem(this.focusedIndex);
3361
+ }
3362
+ }
3363
+ /**
3364
+ * Focus first item
3365
+ */
3366
+ focusFirst() {
3367
+ this.focusedIndex = 0;
3368
+ this.focusItem(0);
3369
+ }
3370
+ /**
3371
+ * Focus last item
3372
+ */
3373
+ focusLast() {
3374
+ this.focusedIndex = this.itemElements.length - 1;
3375
+ this.focusItem(this.focusedIndex);
3376
+ }
3377
+ /**
3378
+ * Focus page down (10 items)
3379
+ */
3380
+ focusPageDown() {
3381
+ this.focusedIndex = Math.min(this.focusedIndex + 10, this.itemElements.length - 1);
3382
+ this.focusItem(this.focusedIndex);
3383
+ }
3384
+ /**
3385
+ * Focus page up (10 items)
3386
+ */
3387
+ focusPageUp() {
3388
+ this.focusedIndex = Math.max(this.focusedIndex - 10, 0);
3389
+ this.focusItem(this.focusedIndex);
3390
+ }
3391
+ /**
3392
+ * Focus specific item
3393
+ */
3394
+ focusItem(index) {
3395
+ if (index >= 0 && index < this.itemElements.length) {
3396
+ const element = this.itemElements[index];
3397
+ element.focus();
3398
+ element.scrollIntoView({ block: 'nearest' });
3399
+ // Announce to screen readers
3400
+ this.announce(`Item ${index + 1} of ${this.itemElements.length}`);
3401
+ }
3402
+ }
3403
+ /**
3404
+ * Setup screen reader support
3405
+ */
3406
+ setupScreenReader() {
3407
+ // Create live region for announcements
3408
+ const liveRegion = document.createElement('div');
3409
+ liveRegion.setAttribute('role', 'status');
3410
+ liveRegion.setAttribute('aria-live', 'polite');
3411
+ liveRegion.setAttribute('aria-atomic', 'true');
3412
+ liveRegion.className = 'sr-only';
3413
+ liveRegion.style.cssText = `
3414
+ position: absolute;
3415
+ width: 1px;
3416
+ height: 1px;
3417
+ padding: 0;
3418
+ margin: -1px;
3419
+ overflow: hidden;
3420
+ clip: rect(0, 0, 0, 0);
3421
+ white-space: nowrap;
3422
+ border: 0;
3423
+ `;
3424
+ document.body.appendChild(liveRegion);
3425
+ }
3426
+ /**
3427
+ * Announce message to screen readers
3428
+ */
3429
+ announce(message) {
3430
+ const liveRegion = document.querySelector('[role="status"][aria-live="polite"]');
3431
+ if (liveRegion) {
3432
+ liveRegion.textContent = message;
3433
+ // Clear after announcement
3434
+ setTimeout(() => {
3435
+ liveRegion.textContent = '';
3436
+ }, 1000);
3437
+ }
3438
+ }
3439
+ /**
3440
+ * Update item elements
3441
+ */
3442
+ updateItems(elements) {
3443
+ this.itemElements = elements;
3444
+ // Set ARIA attributes on items
3445
+ if (this.config.enableARIA) {
3446
+ elements.forEach((el, index) => {
3447
+ el.setAttribute('role', 'listitem');
3448
+ el.setAttribute('aria-setsize', elements.length.toString());
3449
+ el.setAttribute('aria-posinset', (index + 1).toString());
3450
+ el.setAttribute('tabindex', '-1');
3451
+ });
3452
+ }
3453
+ }
3454
+ /**
3455
+ * Set focused index from outside
3456
+ */
3457
+ setFocusedIndex(index) {
3458
+ this.focusedIndex = index;
3459
+ }
3460
+ /**
3461
+ * Get current focused index
3462
+ */
3463
+ getFocusedIndex() {
3464
+ return this.focusedIndex;
3465
+ }
3466
+ /**
3467
+ * Cleanup accessibility features
3468
+ */
3469
+ cleanup() {
3470
+ if (this.containerElement) {
3471
+ this.containerElement.removeEventListener('keydown', this.handleKeyDown.bind(this));
3472
+ }
3473
+ const liveRegion = document.querySelector('[role="status"][aria-live="polite"]');
3474
+ if (liveRegion) {
3475
+ liveRegion.remove();
3476
+ }
3477
+ }
3478
+ }
3479
+
3480
+ /**
3481
+ * Animation Manager
3482
+ * Handles smooth transitions, staggered animations, and performance-optimized animations
3483
+ */
3484
+ class AnimationManager {
3485
+ constructor(config) {
3486
+ this.activeAnimations = new Map();
3487
+ this.prefersReducedMotion = false;
3488
+ this.config = {
3489
+ enableTransitions: true,
3490
+ enableStagger: true,
3491
+ staggerDelay: 50,
3492
+ transitionDuration: 300,
3493
+ easingFunction: 'ease-out',
3494
+ ...config
3495
+ };
3496
+ // Check for reduced motion preference
3497
+ if (typeof window !== 'undefined') {
3498
+ this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
3499
+ }
3500
+ }
3501
+ /**
3502
+ * Animate item entrance
3503
+ */
3504
+ animateEntrance(element, index) {
3505
+ if (this.prefersReducedMotion || !this.config.enableTransitions) {
3506
+ element.style.opacity = '1';
3507
+ element.style.transform = 'none';
3508
+ return Promise.resolve();
3509
+ }
3510
+ return new Promise((resolve) => {
3511
+ // Initial state
3512
+ element.style.opacity = '0';
3513
+ element.style.transform = 'translateY(20px)';
3514
+ element.style.transition = `opacity ${this.config.transitionDuration}ms ${this.config.easingFunction},
3515
+ transform ${this.config.transitionDuration}ms ${this.config.easingFunction}`;
3516
+ // Trigger reflow
3517
+ element.offsetHeight;
3518
+ // Animate to final state
3519
+ if (this.config.enableStagger) {
3520
+ setTimeout(() => {
3521
+ element.style.opacity = '1';
3522
+ element.style.transform = 'translateY(0)';
3523
+ setTimeout(resolve, this.config.transitionDuration);
3524
+ }, index * this.config.staggerDelay);
3525
+ }
3526
+ else {
3527
+ element.style.opacity = '1';
3528
+ element.style.transform = 'translateY(0)';
3529
+ setTimeout(resolve, this.config.transitionDuration);
3530
+ }
3531
+ });
3532
+ }
3533
+ /**
3534
+ * Animate item exit
3535
+ */
3536
+ animateExit(element) {
3537
+ if (this.prefersReducedMotion || !this.config.enableTransitions) {
3538
+ element.style.opacity = '0';
3539
+ return Promise.resolve();
3540
+ }
3541
+ return new Promise((resolve) => {
3542
+ element.style.transition = `opacity ${this.config.transitionDuration}ms ${this.config.easingFunction}`;
3543
+ element.style.opacity = '0';
3544
+ setTimeout(resolve, this.config.transitionDuration);
3545
+ });
3546
+ }
3547
+ /**
3548
+ * Animate scroll indicator
3549
+ */
3550
+ animateScrollIndicator(element, direction) {
3551
+ if (this.prefersReducedMotion)
3552
+ return;
3553
+ const translation = direction === 'down' ? 'translateY(5px)' : 'translateY(-5px)';
3554
+ element.style.transition = `transform 200ms ${this.config.easingFunction}`;
3555
+ element.style.transform = translation;
3556
+ setTimeout(() => {
3557
+ element.style.transform = 'translateY(0)';
3558
+ }, 200);
3559
+ }
3560
+ /**
3561
+ * Smooth scroll to position
3562
+ */
3563
+ smoothScroll(container, targetPosition, duration = 500) {
3564
+ return new Promise((resolve) => {
3565
+ if (this.prefersReducedMotion) {
3566
+ container.scrollTop = targetPosition;
3567
+ resolve();
3568
+ return;
3569
+ }
3570
+ const startPosition = container.scrollTop;
3571
+ const distance = targetPosition - startPosition;
3572
+ const startTime = performance.now();
3573
+ const easeInOutQuad = (t) => {
3574
+ return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
3575
+ };
3576
+ const animate = (currentTime) => {
3577
+ const timeElapsed = currentTime - startTime;
3578
+ const progress = Math.min(timeElapsed / duration, 1);
3579
+ const ease = easeInOutQuad(progress);
3580
+ container.scrollTop = startPosition + distance * ease;
3581
+ if (timeElapsed < duration) {
3582
+ requestAnimationFrame(animate);
3583
+ }
3584
+ else {
3585
+ resolve();
3586
+ }
3587
+ };
3588
+ requestAnimationFrame(animate);
3589
+ });
3590
+ }
3591
+ /**
3592
+ * Animate loading skeleton
3593
+ */
3594
+ animateSkeleton(element) {
3595
+ if (this.prefersReducedMotion)
3596
+ return;
3597
+ element.style.background = 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)';
3598
+ element.style.backgroundSize = '200% 100%';
3599
+ element.style.animation = 'skeleton-loading 1.5s infinite';
3600
+ // Add keyframes if not already present
3601
+ if (!document.getElementById('skeleton-keyframes')) {
3602
+ const style = document.createElement('style');
3603
+ style.id = 'skeleton-keyframes';
3604
+ style.textContent = `
3605
+ @keyframes skeleton-loading {
3606
+ 0% { background-position: 200% 0; }
3607
+ 100% { background-position: -200% 0; }
3608
+ }
3609
+ `;
3610
+ document.head.appendChild(style);
3611
+ }
3612
+ }
3613
+ /**
3614
+ * Stop skeleton animation
3615
+ */
3616
+ stopSkeletonAnimation(element) {
3617
+ element.style.animation = '';
3618
+ element.style.background = '';
3619
+ element.style.backgroundSize = '';
3620
+ }
3621
+ /**
3622
+ * Animate item highlight
3623
+ */
3624
+ animateHighlight(element, color = '#ffeb3b', duration = 1000) {
3625
+ if (this.prefersReducedMotion)
3626
+ return Promise.resolve();
3627
+ return new Promise((resolve) => {
3628
+ const originalBackground = element.style.background;
3629
+ element.style.transition = `background ${duration / 2}ms ${this.config.easingFunction}`;
3630
+ element.style.background = color;
3631
+ setTimeout(() => {
3632
+ element.style.transition = `background ${duration / 2}ms ${this.config.easingFunction}`;
3633
+ element.style.background = originalBackground;
3634
+ setTimeout(resolve, duration / 2);
3635
+ }, duration / 2);
3636
+ });
3637
+ }
3638
+ /**
3639
+ * Batch animate multiple elements
3640
+ */
3641
+ async batchAnimate(elements, animation) {
3642
+ const promises = elements.map((el, index) => {
3643
+ if (animation === 'entrance') {
3644
+ return this.animateEntrance(el, index);
3645
+ }
3646
+ else {
3647
+ return this.animateExit(el);
3648
+ }
3649
+ });
3650
+ await Promise.all(promises);
3651
+ }
3652
+ /**
3653
+ * Cancel active animations
3654
+ */
3655
+ cancelAnimations() {
3656
+ this.activeAnimations.forEach((animation) => {
3657
+ animation.cancel();
3658
+ });
3659
+ this.activeAnimations.clear();
3660
+ }
3661
+ /**
3662
+ * Check if reduced motion is preferred
3663
+ */
3664
+ hasReducedMotion() {
3665
+ return this.prefersReducedMotion;
3666
+ }
3667
+ /**
3668
+ * Update animation config
3669
+ */
3670
+ updateConfig(config) {
3671
+ this.config = { ...this.config, ...config };
3672
+ }
3673
+ }
3674
+
2923
3675
  class ScrollObserver {
2924
3676
  constructor(container, callback, options) {
2925
3677
  this.observer = null;
@@ -3289,5 +4041,5 @@ const LazyScrollElement = typeof window !== 'undefined' && typeof HTMLElement !=
3289
4041
  ? LazyScrollElementClass // Will be replaced with actual element in browser
3290
4042
  : LazyScrollElementClass; // SSR-safe fallback
3291
4043
 
3292
- export { AdaptiveBufferCalculator, BatchSizeOptimizer, ContentComplexityAnalyzer, DevicePerformanceMonitor, DynamicHeightEngine, Engine, GPUAccelerator, HeightMeasurementCache, IntelligentPagination, IntelligentScrollDetector, LazyList, LazyScroll, LazyScrollElement, MemoryManager, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PerformanceOptimizer, PreemptiveCache, PrefetchManager, Priority, PriorityRequestQueue, RequestDeduplicator, RequestQueue, ScrollObserver, SmartPrefetchAlgorithm, VariableHeightManager, WindowManager, createLazyScroll, debounce, throttle, useLazyList };
4044
+ export { AccessibilityManager, AdaptiveBufferCalculator, AnimationManager, BatchSizeOptimizer, ContentComplexityAnalyzer, DevicePerformanceMonitor, DynamicHeightEngine, Engine, GPUAccelerator, HeightMeasurementCache, IntelligentPagination, IntelligentScrollDetector, LazyList, LazyScroll, LazyScrollElement, MemoryManager, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PerformanceAnalytics, PerformanceDashboard, PerformanceOptimizer, PreemptiveCache, PrefetchManager, Priority, PriorityRequestQueue, RequestDeduplicator, RequestQueue, ScrollObserver, SmartPrefetchAlgorithm, VariableHeightManager, WindowManager, createLazyScroll, debounce, throttle, useLazyList };
3293
4045
  //# sourceMappingURL=index.js.map