mtrl-addons 0.1.2 → 0.2.2

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 (117) hide show
  1. package/AI.md +28 -230
  2. package/CLAUDE.md +882 -0
  3. package/build.js +253 -24
  4. package/package.json +14 -4
  5. package/scripts/debug/vlist-selection.ts +121 -0
  6. package/src/components/index.ts +5 -41
  7. package/src/components/{list → vlist}/config.ts +66 -95
  8. package/src/components/vlist/constants.ts +23 -0
  9. package/src/components/vlist/features/api.ts +626 -0
  10. package/src/components/vlist/features/index.ts +10 -0
  11. package/src/components/vlist/features/selection.ts +436 -0
  12. package/src/components/vlist/features/viewport.ts +59 -0
  13. package/src/components/vlist/index.ts +17 -0
  14. package/src/components/{list → vlist}/types.ts +242 -32
  15. package/src/components/vlist/vlist.ts +92 -0
  16. package/src/core/compose/features/gestures/index.ts +227 -0
  17. package/src/core/compose/features/gestures/longpress.ts +383 -0
  18. package/src/core/compose/features/gestures/pan.ts +424 -0
  19. package/src/core/compose/features/gestures/pinch.ts +475 -0
  20. package/src/core/compose/features/gestures/rotate.ts +485 -0
  21. package/src/core/compose/features/gestures/swipe.ts +492 -0
  22. package/src/core/compose/features/gestures/tap.ts +334 -0
  23. package/src/core/compose/features/index.ts +2 -38
  24. package/src/core/compose/index.ts +13 -29
  25. package/src/core/gestures/index.ts +31 -0
  26. package/src/core/gestures/longpress.ts +68 -0
  27. package/src/core/gestures/manager.ts +418 -0
  28. package/src/core/gestures/pan.ts +48 -0
  29. package/src/core/gestures/pinch.ts +58 -0
  30. package/src/core/gestures/rotate.ts +58 -0
  31. package/src/core/gestures/swipe.ts +66 -0
  32. package/src/core/gestures/tap.ts +45 -0
  33. package/src/core/gestures/types.ts +387 -0
  34. package/src/core/gestures/utils.ts +128 -0
  35. package/src/core/index.ts +27 -151
  36. package/src/core/layout/schema.ts +153 -72
  37. package/src/core/layout/types.ts +5 -2
  38. package/src/core/viewport/constants.ts +145 -0
  39. package/src/core/viewport/features/base.ts +73 -0
  40. package/src/core/viewport/features/collection.ts +1182 -0
  41. package/src/core/viewport/features/events.ts +130 -0
  42. package/src/core/viewport/features/index.ts +20 -0
  43. package/src/core/{list-manager/features/viewport → viewport/features}/item-size.ts +31 -34
  44. package/src/core/{list-manager/features/viewport → viewport/features}/loading.ts +4 -4
  45. package/src/core/viewport/features/momentum.ts +269 -0
  46. package/src/core/viewport/features/placeholders.ts +335 -0
  47. package/src/core/viewport/features/rendering.ts +962 -0
  48. package/src/core/viewport/features/scrollbar.ts +434 -0
  49. package/src/core/viewport/features/scrolling.ts +634 -0
  50. package/src/core/viewport/features/utils.ts +94 -0
  51. package/src/core/viewport/features/virtual.ts +525 -0
  52. package/src/core/viewport/index.ts +31 -0
  53. package/src/core/viewport/types.ts +133 -0
  54. package/src/core/viewport/utils/speed-tracker.ts +79 -0
  55. package/src/core/viewport/viewport.ts +265 -0
  56. package/src/index.ts +0 -7
  57. package/src/styles/components/_vlist.scss +352 -0
  58. package/src/styles/index.scss +1 -1
  59. package/test/components/vlist-selection.test.ts +240 -0
  60. package/test/components/vlist.test.ts +63 -0
  61. package/test/core/collection/adapter.test.ts +161 -0
  62. package/bun.lock +0 -792
  63. package/src/components/list/api.ts +0 -314
  64. package/src/components/list/constants.ts +0 -56
  65. package/src/components/list/features/api.ts +0 -428
  66. package/src/components/list/features/index.ts +0 -31
  67. package/src/components/list/features/list-manager.ts +0 -502
  68. package/src/components/list/index.ts +0 -39
  69. package/src/components/list/list.ts +0 -234
  70. package/src/core/collection/base-collection.ts +0 -100
  71. package/src/core/collection/collection-composer.ts +0 -178
  72. package/src/core/collection/collection.ts +0 -745
  73. package/src/core/collection/constants.ts +0 -172
  74. package/src/core/collection/events.ts +0 -428
  75. package/src/core/collection/features/api/loading.ts +0 -279
  76. package/src/core/collection/features/operations/data-operations.ts +0 -147
  77. package/src/core/collection/index.ts +0 -104
  78. package/src/core/collection/state.ts +0 -497
  79. package/src/core/collection/types.ts +0 -404
  80. package/src/core/compose/features/collection.ts +0 -119
  81. package/src/core/compose/features/selection.ts +0 -213
  82. package/src/core/compose/features/styling.ts +0 -108
  83. package/src/core/list-manager/api.ts +0 -599
  84. package/src/core/list-manager/config.ts +0 -593
  85. package/src/core/list-manager/constants.ts +0 -268
  86. package/src/core/list-manager/features/api.ts +0 -58
  87. package/src/core/list-manager/features/collection/collection.ts +0 -705
  88. package/src/core/list-manager/features/collection/index.ts +0 -17
  89. package/src/core/list-manager/features/viewport/constants.ts +0 -42
  90. package/src/core/list-manager/features/viewport/index.ts +0 -16
  91. package/src/core/list-manager/features/viewport/placeholders.ts +0 -281
  92. package/src/core/list-manager/features/viewport/rendering.ts +0 -575
  93. package/src/core/list-manager/features/viewport/scrollbar.ts +0 -495
  94. package/src/core/list-manager/features/viewport/scrolling.ts +0 -795
  95. package/src/core/list-manager/features/viewport/template.ts +0 -220
  96. package/src/core/list-manager/features/viewport/viewport.ts +0 -654
  97. package/src/core/list-manager/features/viewport/virtual.ts +0 -309
  98. package/src/core/list-manager/index.ts +0 -279
  99. package/src/core/list-manager/list-manager.ts +0 -206
  100. package/src/core/list-manager/types.ts +0 -439
  101. package/src/core/list-manager/utils/calculations.ts +0 -290
  102. package/src/core/list-manager/utils/range-calculator.ts +0 -349
  103. package/src/core/list-manager/utils/speed-tracker.ts +0 -273
  104. package/src/styles/components/_list.scss +0 -244
  105. package/src/types/mtrl.d.ts +0 -6
  106. package/test/components/list.test.ts +0 -256
  107. package/test/core/collection/failed-ranges.test.ts +0 -270
  108. package/test/core/compose/features.test.ts +0 -183
  109. package/test/core/list-manager/features/collection.test.ts +0 -704
  110. package/test/core/list-manager/features/viewport.test.ts +0 -698
  111. package/test/core/list-manager/list-manager.test.ts +0 -593
  112. package/test/core/list-manager/utils/calculations.test.ts +0 -433
  113. package/test/core/list-manager/utils/range-calculator.test.ts +0 -569
  114. package/test/core/list-manager/utils/speed-tracker.test.ts +0 -530
  115. package/tsconfig.build.json +0 -23
  116. /package/src/components/{list → vlist}/features.ts +0 -0
  117. /package/src/core/{compose → viewport}/features/performance.ts +0 -0
@@ -1,268 +0,0 @@
1
- /**
2
- * Constants for the mtrl-addons List Manager (Performance Layer)
3
- *
4
- * Performance-related constants only - NO DATA constants
5
- */
6
-
7
- /**
8
- * Virtual scrolling constants - unified virtual viewport + custom scrollbar strategy
9
- */
10
- export const VIRTUAL_SCROLLING = {
11
- // Virtual viewport strategy
12
- DEFAULT_OVERSCAN: 2,
13
- } as const;
14
-
15
- /**
16
- * Element recycling constants
17
- */
18
- export const ELEMENT_RECYCLING = {
19
- // Pool management
20
- DEFAULT_MAX_POOL_SIZE: 100,
21
- DEFAULT_MIN_POOL_SIZE: 10,
22
-
23
- // Recycling strategies
24
- DEFAULT_STRATEGY: "lru",
25
- } as const;
26
-
27
- /**
28
- * Viewport management constants
29
- */
30
- export const VIEWPORT = {
31
- // Intersection observer settings
32
- DEFAULT_INTERSECTION_THRESHOLD: 0.1,
33
- DEFAULT_INTERSECTION_ROOT_MARGIN: "50px",
34
- } as const;
35
-
36
- /**
37
- * Performance monitoring constants
38
- */
39
- export const PERFORMANCE = {
40
- // FPS monitoring
41
- DEFAULT_FPS_TARGET: 60,
42
-
43
- // Memory monitoring
44
- MEMORY_WARNING_THRESHOLD: 0.8, // 80% of threshold
45
- } as const;
46
-
47
- /**
48
- * Scroll behavior constants
49
- */
50
- export const SCROLL = {
51
- // Scroll behavior
52
- DEFAULT_BEHAVIOR: "smooth",
53
-
54
- // Scroll easing
55
- DEFAULT_EASING: "ease-in-out",
56
- DEFAULT_EASING_DURATION: 300,
57
- } as const;
58
-
59
- /**
60
- * CSS classes for List Manager components
61
- */
62
- export const CLASSES = {
63
- // Scrollbar classes
64
- SCROLLBAR: "list__scrollbar",
65
- SCROLLBAR_TRACK: "list__scrollbar-track",
66
- SCROLLBAR_THUMB: "list__scrollbar-thumb",
67
- SCROLLBAR_ENABLED: "list__scrollbar-enabled",
68
- SCROLLBAR_SCROLLING: "list__scrollbar--scrolling",
69
- SCROLLBAR_DRAGGING: "list__scrollbar--dragging",
70
- SCROLLBAR_THUMB_DRAGGING: "list__scrollbar-thumb--dragging",
71
- } as const;
72
-
73
- /**
74
- * List Manager defaults for initialization
75
- */
76
- export const LIST_MANAGER_DEFAULTS = {
77
- // Performance defaults
78
- PERFORMANCE_ENABLED: true,
79
- } as const;
80
-
81
- /**
82
- * Orientation constants
83
- */
84
- export const ORIENTATION = {
85
- // Default orientation
86
- DEFAULT_ORIENTATION: "vertical",
87
- DEFAULT_CROSS_AXIS_ALIGNMENT: "stretch",
88
- REVERSE_DIRECTION: false,
89
- } as const;
90
-
91
- /**
92
- * Speed tracking constants for velocity-based loading
93
- */
94
- export const SPEED_TRACKING = {
95
- // Velocity thresholds (px/ms)
96
- FAST_SCROLL_THRESHOLD: 3, // px/ms - typical mouse wheel fast scroll
97
- SLOW_SCROLL_THRESHOLD: 0.5, // px/ms - slow scrolling
98
- CANCEL_LOAD_THRESHOLD: 15, // px/ms - cancel loads above this speed
99
-
100
- // Velocity calculation
101
- DECELERATION_FACTOR: 0.95, // velocity decay per frame
102
- MEASUREMENT_WINDOW: 100, // ms - window for speed calculation
103
- MIN_MEASUREMENT_INTERVAL: 16, // ms - minimum time between measurements
104
-
105
- // Smoothing
106
- VELOCITY_SMOOTHING: true,
107
- SMOOTHING_FACTOR: 0.3, // weight of new velocity vs smoothed
108
-
109
- // Direction detection
110
- ACCELERATION_THRESHOLD: 0.5, // px/ms² - detect acceleration
111
- DIRECTION_CHANGE_THRESHOLD: 0.1, // px/ms - minimum velocity to detect direction change
112
-
113
- // Momentum
114
- MOMENTUM_DECAY_TIME: 1000, // ms - time for momentum to decay
115
- } as const;
116
-
117
- /**
118
- * Range loading constants
119
- */
120
- export const RANGE_LOADING = {
121
- // Range sizing
122
- DEFAULT_RANGE_SIZE: 20, // items per range
123
- MIN_RANGE_SIZE: 10,
124
- MAX_RANGE_SIZE: 100,
125
-
126
- // Buffer management
127
- BUFFER_SIZE: 10, // extra items to maintain
128
- MIN_BUFFER_SIZE: 5,
129
- MAX_BUFFER_SIZE: 50,
130
-
131
- // Prefetching
132
- PREFETCH_RANGES: 0, // ranges to load ahead
133
- PREFETCH_THRESHOLD: 0.8, // start prefetch when 80% through current range
134
- PRELOAD_DIRECTION_BIAS: 0.7, // 70% in scroll direction, 30% opposite
135
-
136
- // Request management
137
- MAX_CONCURRENT_REQUESTS: 3,
138
- REQUEST_TIMEOUT: 5000, // 5 seconds
139
- RETRY_ATTEMPTS: 2,
140
- RETRY_DELAY: 1000, // 1 second
141
-
142
- // Range optimization
143
- RANGE_OVERLAP: 0.1, // 10% overlap between ranges
144
- DYNAMIC_RANGE_SIZING: true,
145
- VIEWPORT_SIZE_MULTIPLIER: 2, // range size = viewport * multiplier
146
-
147
- // Placeholder management
148
- PLACEHOLDER_TIMEOUT: 100, // ms - delay before showing placeholders
149
- EMPTY_RANGE_CACHE_TIME: 5 * 60 * 1000, // 5 minutes
150
- } as const;
151
-
152
- /**
153
- * Placeholder configuration
154
- */
155
- export const PLACEHOLDER = {
156
- // Feature flags
157
- PLACEHOLDER_FLAG: "_placeholder",
158
-
159
- // Pattern analysis
160
- PATTERN_ANALYSIS: {
161
- SAMPLE_SIZE: 50, // analyze first N items
162
- },
163
- } as const;
164
-
165
- /**
166
- * Initial load configuration
167
- */
168
- export const INITIAL_LOAD = {
169
- // Load strategy
170
- STRATEGY: "placeholders", // "placeholders" | "direct" | "progressive"
171
- VIEWPORT_MULTIPLIER: 1.5, // load 1.5x viewport capacity
172
- MIN_INITIAL_ITEMS: 10,
173
- MAX_INITIAL_ITEMS: 100,
174
-
175
- // Placeholder generation
176
- PLACEHOLDER_COUNT: 20, // default placeholder count
177
- SHOW_LOADING_STATE: true,
178
- LOADING_DELAY: 100, // ms - delay before showing loading state
179
- } as const;
180
-
181
- /**
182
- * Boundary handling constants
183
- */
184
- export const BOUNDARIES = {
185
- // Overscroll prevention
186
- PREVENT_OVERSCROLL: true,
187
- MAINTAIN_EDGE_RANGES: true,
188
-
189
- // Boundary physics
190
- BOUNDARY_RESISTANCE: 0.3,
191
- BOUNCE_BACK_DURATION: 300,
192
- EDGE_TOLERANCE: 5,
193
-
194
- // Scroll limits
195
- MIN_SCROLL_POSITION: 0,
196
- MAX_SCROLL_BUFFER: 100, // px - extra scroll at bottom
197
- } as const;
198
-
199
- /**
200
- * Configurable constants for List Manager performance and behavior
201
- * All values are configurable to allow fine-tuning for different use cases
202
- */
203
- export const LIST_MANAGER_CONSTANTS = {
204
- VIRTUAL_SCROLL: {
205
- DEFAULT_ITEM_SIZE: 84, // Updated to 84px per user request
206
- OVERSCAN_BUFFER: 2, // Reduced from 5 to 2 for fewer visible items
207
- SCROLL_SENSITIVITY: 1.0,
208
- },
209
-
210
- SPEED_TRACKING: {
211
- FAST_SCROLL_THRESHOLD: 20, // px/ms - reduced from 1000 to realistic wheel scroll speeds
212
- SLOW_SCROLL_THRESHOLD: 10, // px/ms - reduced proportionally
213
- DECELERATION_FACTOR: 0.85, // velocity decay per frame (more aggressive decay)
214
- MEASUREMENT_WINDOW: 100, // ms - window for speed calculation
215
- },
216
-
217
- RANGE_LOADING: {
218
- DEFAULT_RANGE_SIZE: 20, // items per range (old pageSize)
219
- BUFFER_SIZE: 3, // extra items to maintain
220
- PREFETCH_RANGES: 0, // ranges to load ahead
221
- MAX_CONCURRENT_REQUESTS: 1, // prevent request spam
222
- },
223
-
224
- SCROLLBAR: {
225
- THUMB_MIN_SIZE: 20, // minimum thumb size
226
- },
227
-
228
- PLACEHOLDER: {
229
- MASK_CHARACTER: "░", // Character used for masking
230
- RANDOM_LENGTH_VARIANCE: true, // Use random lengths within detected ranges
231
- },
232
-
233
- PERFORMANCE: {
234
- THROTTLE_SCROLL: 8, // ms - scroll event throttling
235
- DEBOUNCE_LOADING: 150, // ms - increased from 50ms to prevent rapid deferred loads
236
- },
237
-
238
- // Initial load configuration
239
- INITIAL_LOAD: {
240
- VIEWPORT_MULTIPLIER: 1.5, // load 1.5x viewport capacity
241
- MIN_ITEMS: 10,
242
- MAX_ITEMS: 100,
243
- },
244
-
245
- // Boundaries configuration
246
- BOUNDARIES: {
247
- BOUNDARY_RESISTANCE: 0.3,
248
- },
249
- } as const;
250
-
251
- /**
252
- * Type for overriding constants at runtime
253
- */
254
- export type ListManagerConstants = typeof LIST_MANAGER_CONSTANTS;
255
-
256
- /**
257
- * Helper function to merge user constants with defaults
258
- */
259
- export function mergeConstants(
260
- userConstants: Partial<ListManagerConstants> = {}
261
- ): ListManagerConstants {
262
- return {
263
- ...LIST_MANAGER_CONSTANTS,
264
- ...userConstants,
265
- };
266
- }
267
-
268
- // NO DATA constants: API_ADAPTER, DATA_CACHE, DATA_PERSISTENCE, etc. - those belong to Collection
@@ -1,58 +0,0 @@
1
- // src/core/list-manager/features/api.ts
2
-
3
- /**
4
- * API Bridge - Event communication between features and components
5
- *
6
- * This module provides a clean interface for:
7
- * - Feature-to-component event forwarding
8
- * - Component-to-feature method calls
9
- * - Standardized event naming and data structures
10
- */
11
-
12
- import type { ListManagerEvents, ListManagerEventData } from "../../types";
13
-
14
- /**
15
- * Event bridge for forwarding feature events to components
16
- */
17
- export const createEventBridge = (component: any) => {
18
- return {
19
- forwardEvent<T extends ListManagerEvents>(
20
- event: T,
21
- data: ListManagerEventData[T]
22
- ) {
23
- // Forward to component's event system
24
- if (component.emit) {
25
- component.emit(event, data);
26
- }
27
- },
28
-
29
- // Convenience methods for common events
30
- notifyViewportChanged(data: ListManagerEventData[ListManagerEvents.VIEWPORT_CHANGED]) {
31
- this.forwardEvent(ListManagerEvents.VIEWPORT_CHANGED, data);
32
- },
33
-
34
- notifyRangeLoaded(data: ListManagerEventData[ListManagerEvents.RANGE_LOADED]) {
35
- this.forwardEvent(ListManagerEvents.RANGE_LOADED, data);
36
- },
37
-
38
- notifyError(data: ListManagerEventData[ListManagerEvents.ERROR_OCCURRED]) {
39
- this.forwardEvent(ListManagerEvents.ERROR_OCCURRED, data);
40
- }
41
- };
42
- };
43
-
44
- /**
45
- * Standard API methods that features can expose to components
46
- */
47
- export interface FeatureAPI {
48
- // Core lifecycle
49
- initialize(): void;
50
- destroy(): void;
51
-
52
- // Configuration
53
- updateConfig(config: any): void;
54
- getConfig(): any;
55
-
56
- // Status
57
- isInitialized(): boolean;
58
- }