react-virtual-renderer 1.0.7 → 1.0.9
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.
- package/dist/components/VirtualGrid.d.ts.map +1 -1
- package/dist/components/VirtualGrid.js +137 -107
- package/dist/components/VirtualGrid.js.map +1 -1
- package/dist/components/VirtualList.d.ts +57 -5
- package/dist/components/VirtualList.d.ts.map +1 -1
- package/dist/components/VirtualList.js +366 -97
- package/dist/components/VirtualList.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/types.d.ts +7 -5
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualGrid.d.ts","sourceRoot":"","sources":["../../src/components/VirtualGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"VirtualGrid.d.ts","sourceRoot":"","sources":["../../src/components/VirtualGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAS7D,eAAO,MAAM,WAAW,8FAgTvB,CAAC"}
|
|
@@ -1,174 +1,204 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo, useState, useRef, useEffect, useImperativeHandle, } from "react";
|
|
3
|
-
export const VirtualGrid = forwardRef(({ items, renderItem, itemKey, height = 600, width = "100%", columnCount = 3, rowHeight = 200, columnWidth, layout = "grid", overscan = 5, gap = 16, onScroll, innerClassName, innerStyle, }, ref) => {
|
|
2
|
+
import { forwardRef, useMemo, useState, useRef, useEffect, useImperativeHandle, useCallback, } from "react";
|
|
3
|
+
export const VirtualGrid = forwardRef(({ items, renderItem, itemKey, height = 600, width = "100%", columnCount = 3, rowHeight = 200, columnWidth, layout = "grid", overscan = 5, gap = 16, onScroll, onVisibleRangeChange, innerClassName, innerStyle, containerClassName, containerStyle, }, ref) => {
|
|
4
4
|
const containerRef = useRef(null);
|
|
5
5
|
useImperativeHandle(ref, () => containerRef.current);
|
|
6
6
|
const [scrollTop, setScrollTop] = useState(0);
|
|
7
7
|
const [isScrolling, setIsScrolling] = useState(false);
|
|
8
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
8
9
|
const scrollTimeout = useRef(null);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
// ✅ FIX 1: Proper ResizeObserver with validation
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!containerRef.current)
|
|
13
|
+
return;
|
|
14
|
+
const el = containerRef.current;
|
|
15
|
+
const observer = new ResizeObserver((entries) => {
|
|
16
|
+
for (const entry of entries) {
|
|
17
|
+
const width = entry.contentRect.width;
|
|
18
|
+
if (width > 0) {
|
|
19
|
+
setContainerWidth(width);
|
|
20
|
+
}
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
});
|
|
23
|
+
observer.observe(el);
|
|
24
|
+
return () => observer.disconnect();
|
|
25
|
+
}, []);
|
|
26
|
+
// ✅ FIX 2: Cleanup timeout on unmount
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
return () => {
|
|
29
|
+
if (scrollTimeout.current) {
|
|
30
|
+
clearTimeout(scrollTimeout.current);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}, []);
|
|
34
|
+
// ✅ FIX 3: Better ready check
|
|
35
|
+
const isReady = containerWidth > 0 && items.length > 0;
|
|
36
|
+
// ✅ FIX 4: Proper column calculation with gap
|
|
29
37
|
const cols = useMemo(() => {
|
|
30
38
|
if (columnCount === "auto") {
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const minColWidth = 250; // you can tune this
|
|
35
|
-
return Math.max(1, Math.floor(containerWidth / minColWidth));
|
|
39
|
+
const minColWidth = 200;
|
|
40
|
+
const calculatedCols = Math.max(1, Math.floor(containerWidth / (minColWidth + gap)));
|
|
41
|
+
return calculatedCols;
|
|
36
42
|
}
|
|
37
|
-
return Math.max(1, columnCount);
|
|
38
|
-
}, [columnCount,
|
|
39
|
-
|
|
40
|
-
* ✅ FIX 2: Safe column width (NO NaN ever)
|
|
41
|
-
*/
|
|
43
|
+
return Math.max(1, Number(columnCount));
|
|
44
|
+
}, [columnCount, containerWidth, gap]);
|
|
45
|
+
// ✅ FIX 5: Proper column width calculation
|
|
42
46
|
const colWidth = useMemo(() => {
|
|
43
|
-
if (typeof columnWidth === "number")
|
|
47
|
+
if (typeof columnWidth === "number") {
|
|
44
48
|
return columnWidth;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
}
|
|
50
|
+
if (columnWidth && typeof columnWidth === "function") {
|
|
51
|
+
return columnWidth(0);
|
|
52
|
+
}
|
|
53
|
+
// Calculate: (containerWidth - totalGaps) / numberOfColumns
|
|
54
|
+
const totalGapWidth = gap * Math.max(0, cols - 1);
|
|
55
|
+
return Math.max(50, (containerWidth - totalGapWidth) / cols);
|
|
49
56
|
}, [columnWidth, containerWidth, cols, gap]);
|
|
50
|
-
|
|
51
|
-
* Precompute positions
|
|
52
|
-
*/
|
|
57
|
+
// ✅ FIX 6: Improved position calculation for masonry AND grid
|
|
53
58
|
const positions = useMemo(() => {
|
|
59
|
+
if (!isReady)
|
|
60
|
+
return [];
|
|
54
61
|
const pos = [];
|
|
55
|
-
if (!Number.isFinite(colWidth))
|
|
56
|
-
return pos;
|
|
57
62
|
if (layout === "masonry") {
|
|
63
|
+
// Masonry: Fill shortest column
|
|
58
64
|
const colHeights = Array(cols).fill(0);
|
|
59
65
|
for (let i = 0; i < items.length; i++) {
|
|
60
|
-
const
|
|
61
|
-
const h = typeof rowHeight === "function"
|
|
66
|
+
const itemHeight = typeof rowHeight === "function"
|
|
62
67
|
? rowHeight(i)
|
|
63
|
-
: rowHeight;
|
|
68
|
+
: Number(rowHeight);
|
|
69
|
+
// Find shortest column
|
|
70
|
+
const minColIndex = colHeights.indexOf(Math.min(...colHeights));
|
|
71
|
+
const xPos = minColIndex * (colWidth + gap);
|
|
72
|
+
const yPos = colHeights[minColIndex];
|
|
64
73
|
pos.push({
|
|
65
|
-
x:
|
|
66
|
-
y:
|
|
74
|
+
x: xPos,
|
|
75
|
+
y: yPos,
|
|
67
76
|
width: colWidth,
|
|
68
|
-
height:
|
|
77
|
+
height: itemHeight,
|
|
69
78
|
});
|
|
70
|
-
|
|
79
|
+
// Update column height
|
|
80
|
+
colHeights[minColIndex] += itemHeight + gap;
|
|
71
81
|
}
|
|
72
82
|
}
|
|
73
83
|
else {
|
|
84
|
+
// Grid: Standard rows and columns
|
|
74
85
|
for (let i = 0; i < items.length; i++) {
|
|
75
86
|
const row = Math.floor(i / cols);
|
|
76
87
|
const col = i % cols;
|
|
77
|
-
const
|
|
88
|
+
const itemHeight = typeof rowHeight === "function"
|
|
78
89
|
? rowHeight(i)
|
|
79
|
-
: rowHeight;
|
|
90
|
+
: Number(rowHeight);
|
|
80
91
|
pos.push({
|
|
81
92
|
x: col * (colWidth + gap),
|
|
82
|
-
y: row * (
|
|
93
|
+
y: row * (itemHeight + gap),
|
|
83
94
|
width: colWidth,
|
|
84
|
-
height:
|
|
95
|
+
height: itemHeight,
|
|
85
96
|
});
|
|
86
97
|
}
|
|
87
98
|
}
|
|
88
99
|
return pos;
|
|
89
|
-
}, [items, cols, colWidth, gap, layout, rowHeight]);
|
|
90
|
-
|
|
91
|
-
* Visible range (safe + stable)
|
|
92
|
-
*/
|
|
100
|
+
}, [items, cols, colWidth, gap, layout, rowHeight, isReady]);
|
|
101
|
+
// ✅ FIX 7: Better visible range calculation
|
|
93
102
|
const visibleRange = useMemo(() => {
|
|
94
|
-
|
|
95
|
-
|
|
103
|
+
if (!positions.length || !isReady) {
|
|
104
|
+
return { start: 0, end: 0 };
|
|
105
|
+
}
|
|
106
|
+
const heightNum = typeof height === "string" ? parseInt(height) : Number(height);
|
|
107
|
+
let startIndex = 0;
|
|
108
|
+
for (let i = 0; i < positions.length; i++) {
|
|
109
|
+
if (positions[i].y + positions[i].height >= scrollTop) {
|
|
110
|
+
startIndex = i;
|
|
111
|
+
break;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
let endIndex = positions.length - 1;
|
|
115
|
+
for (let i = positions.length - 1; i >= 0; i--) {
|
|
116
|
+
if (positions[i].y <= scrollTop + heightNum) {
|
|
117
|
+
endIndex = i;
|
|
118
|
+
break;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
96
121
|
const start = Math.max(0, startIndex - overscan);
|
|
97
|
-
const end = endIndex
|
|
98
|
-
? items.length - 1
|
|
99
|
-
: Math.min(items.length - 1, endIndex + overscan);
|
|
122
|
+
const end = Math.min(items.length - 1, endIndex + overscan);
|
|
100
123
|
return { start, end };
|
|
101
|
-
}, [positions, scrollTop, height, overscan, items.length]);
|
|
102
|
-
|
|
103
|
-
* Total height (safe)
|
|
104
|
-
*/
|
|
124
|
+
}, [positions, scrollTop, height, overscan, items.length, isReady]);
|
|
125
|
+
// ✅ FIX 8: Proper total height calculation
|
|
105
126
|
const totalHeight = useMemo(() => {
|
|
106
127
|
if (!positions.length)
|
|
107
128
|
return 0;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
* Scroll handler
|
|
117
|
-
*/
|
|
118
|
-
const handleScroll = (e) => {
|
|
119
|
-
const top = e.currentTarget.scrollTop;
|
|
129
|
+
const maxHeight = Math.max(...positions.map((p) => p.y + p.height));
|
|
130
|
+
return maxHeight || 0;
|
|
131
|
+
}, [positions]);
|
|
132
|
+
// ✅ FIX 9: Better scroll handler
|
|
133
|
+
const handleScroll = useCallback((e) => {
|
|
134
|
+
const target = e.currentTarget;
|
|
135
|
+
const top = target.scrollTop;
|
|
136
|
+
const left = target.scrollLeft;
|
|
120
137
|
setScrollTop(top);
|
|
121
138
|
setIsScrolling(true);
|
|
122
|
-
onScroll?.(top,
|
|
139
|
+
onScroll?.(top, left);
|
|
140
|
+
// Clear previous timeout
|
|
123
141
|
if (scrollTimeout.current) {
|
|
124
142
|
clearTimeout(scrollTimeout.current);
|
|
125
143
|
}
|
|
144
|
+
// Set new timeout
|
|
126
145
|
scrollTimeout.current = setTimeout(() => {
|
|
127
146
|
setIsScrolling(false);
|
|
128
147
|
}, 120);
|
|
129
|
-
};
|
|
148
|
+
}, [onScroll]);
|
|
149
|
+
// ✅ FIX 10: Notify visible range change
|
|
130
150
|
useEffect(() => {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
width,
|
|
151
|
+
onVisibleRangeChange?.(visibleRange.start, visibleRange.end);
|
|
152
|
+
}, [visibleRange, onVisibleRangeChange]);
|
|
153
|
+
// ✅ FIX 11: Proper height/width conversion
|
|
154
|
+
const heightNum = typeof height === "string" ? height : `${height}px`;
|
|
155
|
+
const widthNum = typeof width === "string" ? width : `${width}px`;
|
|
156
|
+
const containerStyleComputed = {
|
|
157
|
+
height: heightNum,
|
|
158
|
+
width: widthNum,
|
|
140
159
|
overflowY: "auto",
|
|
141
160
|
overflowX: "hidden",
|
|
142
161
|
position: "relative",
|
|
143
|
-
...
|
|
162
|
+
...containerStyle,
|
|
144
163
|
};
|
|
145
|
-
const safeColWidth = Number.isFinite(colWidth) ? colWidth : 200;
|
|
146
164
|
const innerStyleComputed = {
|
|
147
165
|
position: "relative",
|
|
148
|
-
height: totalHeight,
|
|
149
|
-
width: cols *
|
|
166
|
+
height: totalHeight || 1, // Ensure minimum height
|
|
167
|
+
width: Math.max(0, cols * colWidth + (cols - 1) * gap),
|
|
168
|
+
...innerStyle,
|
|
150
169
|
};
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
170
|
+
// ✅ FIX 12: Complete render logic
|
|
171
|
+
if (!isReady) {
|
|
172
|
+
return (_jsx("div", { ref: containerRef, className: containerClassName, style: containerStyleComputed, onScroll: handleScroll, children: _jsx("div", { className: innerClassName, style: innerStyleComputed }) }));
|
|
173
|
+
}
|
|
174
|
+
// ✅ FIX 13: Render visible items properly
|
|
175
|
+
const visibleItems = [];
|
|
176
|
+
for (let i = visibleRange.start; i <= visibleRange.end; i++) {
|
|
177
|
+
if (i >= 0 && i < items.length) {
|
|
178
|
+
visibleItems.push({
|
|
179
|
+
index: i,
|
|
180
|
+
key: itemKey?.(i, items[i]) ?? i,
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
return (_jsx("div", { ref: containerRef, className: containerClassName, style: containerStyleComputed, onScroll: handleScroll, children: _jsx("div", { className: innerClassName, style: innerStyleComputed, children: visibleItems.map((vItem) => {
|
|
185
|
+
const item = items[vItem.index];
|
|
186
|
+
const pos = positions[vItem.index];
|
|
155
187
|
if (!item || !pos)
|
|
156
188
|
return null;
|
|
157
|
-
|
|
158
|
-
return null;
|
|
159
|
-
const style = {
|
|
189
|
+
const itemStyle = {
|
|
160
190
|
position: "absolute",
|
|
161
|
-
top: pos.y
|
|
162
|
-
left: pos.x
|
|
163
|
-
width: pos.width
|
|
164
|
-
height: pos.height
|
|
191
|
+
top: `${pos.y}px`,
|
|
192
|
+
left: `${pos.x}px`,
|
|
193
|
+
width: `${pos.width}px`,
|
|
194
|
+
height: `${pos.height}px`,
|
|
195
|
+
boxSizing: "border-box",
|
|
165
196
|
};
|
|
166
|
-
return (_jsx("div", { style:
|
|
197
|
+
return (_jsx("div", { style: itemStyle, children: renderItem({
|
|
167
198
|
item,
|
|
168
|
-
index,
|
|
199
|
+
index: vItem.index,
|
|
169
200
|
isScrolling,
|
|
170
|
-
|
|
171
|
-
}) }, itemKey?.(index, item) ?? index));
|
|
201
|
+
}) }, vItem.key));
|
|
172
202
|
}) }) }));
|
|
173
203
|
});
|
|
174
204
|
VirtualGrid.displayName = "VirtualGrid";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualGrid.js","sourceRoot":"","sources":["../../src/components/VirtualGrid.tsx"],"names":[],"mappings":";AAAA,OAAc,EACV,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,mBAAmB,
|
|
1
|
+
{"version":3,"file":"VirtualGrid.js","sourceRoot":"","sources":["../../src/components/VirtualGrid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,60 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { VirtualListProps } from '../types';
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
3
2
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* Props passed to renderItem function
|
|
4
|
+
* Fully generic with TypeScript
|
|
6
5
|
*/
|
|
7
|
-
export
|
|
6
|
+
export interface RenderItemProps<T> {
|
|
7
|
+
item: T;
|
|
8
|
+
index: number;
|
|
9
|
+
isScrolling: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Props for the item wrapper component
|
|
13
|
+
*/
|
|
14
|
+
export interface ItemWrapperProps<T> {
|
|
15
|
+
item: T;
|
|
16
|
+
index: number;
|
|
17
|
+
style: CSSProperties;
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Main VirtualList Props - Fully Generic
|
|
22
|
+
*/
|
|
23
|
+
export interface VirtualListProps<T> {
|
|
24
|
+
items: T[];
|
|
25
|
+
renderItem: (props: RenderItemProps<T>) => React.ReactNode;
|
|
26
|
+
height?: number | string;
|
|
27
|
+
width?: number | string;
|
|
28
|
+
itemSize?: number | ((index: number) => number);
|
|
29
|
+
getItemSize?: (index: number) => number;
|
|
30
|
+
estimatedItemSize?: number;
|
|
31
|
+
overscan?: number;
|
|
32
|
+
scrollDirection?: 'forward' | 'backward' | 'both';
|
|
33
|
+
itemKey?: (index: number, item: T) => string | number;
|
|
34
|
+
itemWrapper?: (props: ItemWrapperProps<T>) => React.ReactNode;
|
|
35
|
+
className?: string;
|
|
36
|
+
itemClassName?: string;
|
|
37
|
+
style?: CSSProperties;
|
|
38
|
+
onScroll?: (scrollTop: number, direction: string) => void;
|
|
39
|
+
onScrollEnd?: (direction: 'forward' | 'backward') => void;
|
|
40
|
+
stickyIndices?: number[];
|
|
41
|
+
innerRef?: React.Ref<HTMLDivElement>;
|
|
42
|
+
scrollOffsetRef?: React.MutableRefObject<number>;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* VirtualList Handle for imperative API
|
|
46
|
+
*/
|
|
47
|
+
export interface VirtualListHandle {
|
|
48
|
+
scrollToItem: (index: number, alignment?: 'auto' | 'start' | 'center' | 'end') => void;
|
|
49
|
+
scrollToOffset: (offset: number) => void;
|
|
50
|
+
resetAfterIndex: (index: number, shouldForceUpdate?: boolean) => void;
|
|
51
|
+
getScrollOffset: () => number;
|
|
52
|
+
}
|
|
53
|
+
export declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps<any> & React.RefAttributes<HTMLDivElement & VirtualListHandle>>;
|
|
54
|
+
export default VirtualList;
|
|
55
|
+
/**
|
|
56
|
+
* Type helper for extracting generic type
|
|
57
|
+
* Usage: type MyItemType = ExtractVirtualListType<typeof myVirtualListRef>;
|
|
58
|
+
*/
|
|
59
|
+
export type ExtractVirtualListType<T> = T extends React.Ref<HTMLDivElement & VirtualListHandle> ? any : never;
|
|
8
60
|
//# sourceMappingURL=VirtualList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../src/components/VirtualList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../src/components/VirtualList.tsx"],"names":[],"mappings":"AA4QA,OAAO,KAAK,EAAE,EAOV,aAAa,EAChB,MAAM,OAAO,CAAC;AAQf;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAC9B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAE/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAG3D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAGlD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAG9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IAGtB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,KAAK,IAAI,CAAC;IAG1D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAGzB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC;IACvF,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtE,eAAe,EAAE,MAAM,MAAM,CAAC;CACjC;AAMD,eAAO,MAAM,WAAW,kHA6PvB,CAAC;AAIF,eAAe,WAAW,CAAC;AAM3B;;;GAGG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,cAAc,GAAG,iBAAiB,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC"}
|