react-virtual-renderer 1.0.8 → 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 +126 -94
- 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,172 +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
8
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
9
9
|
const scrollTimeout = useRef(null);
|
|
10
|
-
|
|
11
|
-
* ✅ FIX 1: REAL container width using ResizeObserver
|
|
12
|
-
*/
|
|
10
|
+
// ✅ FIX 1: Proper ResizeObserver with validation
|
|
13
11
|
useEffect(() => {
|
|
14
12
|
if (!containerRef.current)
|
|
15
13
|
return;
|
|
16
14
|
const el = containerRef.current;
|
|
17
15
|
const observer = new ResizeObserver((entries) => {
|
|
18
16
|
for (const entry of entries) {
|
|
19
|
-
|
|
17
|
+
const width = entry.contentRect.width;
|
|
18
|
+
if (width > 0) {
|
|
19
|
+
setContainerWidth(width);
|
|
20
|
+
}
|
|
20
21
|
}
|
|
21
22
|
});
|
|
22
23
|
observer.observe(el);
|
|
23
24
|
return () => observer.disconnect();
|
|
24
25
|
}, []);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
|
33
37
|
const cols = useMemo(() => {
|
|
34
38
|
if (columnCount === "auto") {
|
|
35
|
-
const minColWidth =
|
|
36
|
-
|
|
39
|
+
const minColWidth = 200;
|
|
40
|
+
const calculatedCols = Math.max(1, Math.floor(containerWidth / (minColWidth + gap)));
|
|
41
|
+
return calculatedCols;
|
|
37
42
|
}
|
|
38
|
-
return Math.max(1, columnCount);
|
|
39
|
-
}, [columnCount, containerWidth]);
|
|
40
|
-
|
|
41
|
-
* Column width
|
|
42
|
-
*/
|
|
43
|
+
return Math.max(1, Number(columnCount));
|
|
44
|
+
}, [columnCount, containerWidth, gap]);
|
|
45
|
+
// ✅ FIX 5: Proper column width calculation
|
|
43
46
|
const colWidth = useMemo(() => {
|
|
44
|
-
if (typeof columnWidth === "number")
|
|
47
|
+
if (typeof columnWidth === "number") {
|
|
45
48
|
return columnWidth;
|
|
46
|
-
|
|
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);
|
|
47
56
|
}, [columnWidth, containerWidth, cols, gap]);
|
|
48
|
-
|
|
49
|
-
* Positions (masonry + grid)
|
|
50
|
-
*/
|
|
57
|
+
// ✅ FIX 6: Improved position calculation for masonry AND grid
|
|
51
58
|
const positions = useMemo(() => {
|
|
59
|
+
if (!isReady)
|
|
60
|
+
return [];
|
|
52
61
|
const pos = [];
|
|
53
62
|
if (layout === "masonry") {
|
|
63
|
+
// Masonry: Fill shortest column
|
|
54
64
|
const colHeights = Array(cols).fill(0);
|
|
55
65
|
for (let i = 0; i < items.length; i++) {
|
|
56
|
-
const
|
|
57
|
-
const h = typeof rowHeight === "function"
|
|
66
|
+
const itemHeight = typeof rowHeight === "function"
|
|
58
67
|
? rowHeight(i)
|
|
59
|
-
: 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];
|
|
60
73
|
pos.push({
|
|
61
|
-
x:
|
|
62
|
-
y:
|
|
74
|
+
x: xPos,
|
|
75
|
+
y: yPos,
|
|
63
76
|
width: colWidth,
|
|
64
|
-
height:
|
|
77
|
+
height: itemHeight,
|
|
65
78
|
});
|
|
66
|
-
|
|
79
|
+
// Update column height
|
|
80
|
+
colHeights[minColIndex] += itemHeight + gap;
|
|
67
81
|
}
|
|
68
82
|
}
|
|
69
83
|
else {
|
|
84
|
+
// Grid: Standard rows and columns
|
|
70
85
|
for (let i = 0; i < items.length; i++) {
|
|
71
86
|
const row = Math.floor(i / cols);
|
|
72
87
|
const col = i % cols;
|
|
73
|
-
const
|
|
88
|
+
const itemHeight = typeof rowHeight === "function"
|
|
74
89
|
? rowHeight(i)
|
|
75
|
-
: rowHeight;
|
|
90
|
+
: Number(rowHeight);
|
|
76
91
|
pos.push({
|
|
77
92
|
x: col * (colWidth + gap),
|
|
78
|
-
y: row * (
|
|
93
|
+
y: row * (itemHeight + gap),
|
|
79
94
|
width: colWidth,
|
|
80
|
-
height:
|
|
95
|
+
height: itemHeight,
|
|
81
96
|
});
|
|
82
97
|
}
|
|
83
98
|
}
|
|
84
99
|
return pos;
|
|
85
|
-
}, [items, cols, colWidth, gap, layout, rowHeight]);
|
|
86
|
-
|
|
87
|
-
* Visible range
|
|
88
|
-
*/
|
|
100
|
+
}, [items, cols, colWidth, gap, layout, rowHeight, isReady]);
|
|
101
|
+
// ✅ FIX 7: Better visible range calculation
|
|
89
102
|
const visibleRange = useMemo(() => {
|
|
90
|
-
|
|
91
|
-
|
|
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
|
+
}
|
|
92
121
|
const start = Math.max(0, startIndex - overscan);
|
|
93
|
-
const end = endIndex
|
|
94
|
-
? items.length - 1
|
|
95
|
-
: Math.min(items.length - 1, endIndex + overscan);
|
|
122
|
+
const end = Math.min(items.length - 1, endIndex + overscan);
|
|
96
123
|
return { start, end };
|
|
97
|
-
}, [positions, scrollTop, height, overscan, items.length]);
|
|
98
|
-
|
|
99
|
-
* Total height
|
|
100
|
-
*/
|
|
101
|
-
const rowHeightValue = typeof rowHeight === 'function' ? rowHeight(0) : rowHeight;
|
|
124
|
+
}, [positions, scrollTop, height, overscan, items.length, isReady]);
|
|
125
|
+
// ✅ FIX 8: Proper total height calculation
|
|
102
126
|
const totalHeight = useMemo(() => {
|
|
103
127
|
if (!positions.length)
|
|
104
128
|
return 0;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
*/
|
|
114
|
-
const handleScroll = (e) => {
|
|
115
|
-
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;
|
|
116
137
|
setScrollTop(top);
|
|
117
138
|
setIsScrolling(true);
|
|
118
|
-
onScroll?.(top,
|
|
139
|
+
onScroll?.(top, left);
|
|
140
|
+
// Clear previous timeout
|
|
119
141
|
if (scrollTimeout.current) {
|
|
120
142
|
clearTimeout(scrollTimeout.current);
|
|
121
143
|
}
|
|
144
|
+
// Set new timeout
|
|
122
145
|
scrollTimeout.current = setTimeout(() => {
|
|
123
146
|
setIsScrolling(false);
|
|
124
147
|
}, 120);
|
|
125
|
-
};
|
|
148
|
+
}, [onScroll]);
|
|
149
|
+
// ✅ FIX 10: Notify visible range change
|
|
126
150
|
useEffect(() => {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
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,
|
|
136
159
|
overflowY: "auto",
|
|
137
160
|
overflowX: "hidden",
|
|
138
161
|
position: "relative",
|
|
139
|
-
...
|
|
162
|
+
...containerStyle,
|
|
140
163
|
};
|
|
141
164
|
const innerStyleComputed = {
|
|
142
165
|
position: "relative",
|
|
143
|
-
height: totalHeight,
|
|
144
|
-
width: cols * colWidth +
|
|
166
|
+
height: totalHeight || 1, // Ensure minimum height
|
|
167
|
+
width: Math.max(0, cols * colWidth + (cols - 1) * gap),
|
|
168
|
+
...innerStyle,
|
|
145
169
|
};
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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];
|
|
154
187
|
if (!item || !pos)
|
|
155
188
|
return null;
|
|
156
|
-
const
|
|
189
|
+
const itemStyle = {
|
|
157
190
|
position: "absolute",
|
|
158
|
-
top: pos.y
|
|
159
|
-
left: pos.x
|
|
160
|
-
width: pos.width
|
|
161
|
-
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",
|
|
162
196
|
};
|
|
163
|
-
return (_jsx("div", { style:
|
|
197
|
+
return (_jsx("div", { style: itemStyle, children: renderItem({
|
|
164
198
|
item,
|
|
165
|
-
index,
|
|
199
|
+
index: vItem.index,
|
|
166
200
|
isScrolling,
|
|
167
|
-
|
|
168
|
-
}) }, itemKey?.(index, item) ??
|
|
169
|
-
index));
|
|
201
|
+
}) }, vItem.key));
|
|
170
202
|
}) }) }));
|
|
171
203
|
});
|
|
172
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"}
|