virtua 0.50.2 → 0.50.4

package/lib/solid/index.jsx

@@ -8,6 +8,7 @@ var clamp = (value, minValue, maxValue) => min(maxValue, max(minValue, value));
 var sort = (arr) => {
 	return [...arr].sort((a, b) => a - b);
 };
+var timeout = setTimeout;
 var microtask = typeof queueMicrotask === "function" ? queueMicrotask : (fn) => {
 	Promise.resolve().then(fn);
 };
@@ -29,112 +30,6 @@ var once = (fn) => {
 	};
 };
 
-//#endregion
-//#region src/core/cache.ts
-var UNCACHED = -1;
-var fill = (array, length, prepend) => {
-	const key = prepend ? "unshift" : "push";
-	for (let i = 0; i < length; i++) {
-		array[key](-1);
-	}
-	return array;
-};
-var getItemSize = (cache, index) => {
-	const size = cache._sizes[index];
-	return size === -1 ? cache._defaultItemSize : size;
-};
-var setItemSize = (cache, index, size) => {
-	const isInitialMeasurement = cache._sizes[index] === -1;
-	cache._sizes[index] = size;
-	cache._computedOffsetIndex = min(index, cache._computedOffsetIndex);
-	return isInitialMeasurement;
-};
-var getItemOffset = (cache, index) => {
-	if (!cache._length) return 0;
-	if (cache._computedOffsetIndex >= index) {
-		return cache._offsets[index];
-	}
-	if (cache._computedOffsetIndex < 0) {
-		cache._offsets[0] = 0;
-		cache._computedOffsetIndex = 0;
-	}
-	let i = cache._computedOffsetIndex;
-	let top = cache._offsets[i];
-	while (i < index) {
-		top += getItemSize(cache, i);
-		cache._offsets[++i] = top;
-	}
-	cache._computedOffsetIndex = index;
-	return top;
-};
-var findIndex = (cache, offset, low = 0, high = cache._length - 1) => {
-	let found = low;
-	while (low <= high) {
-		const mid = floor((low + high) / 2);
-		if (getItemOffset(cache, mid) <= offset) {
-			found = mid;
-			low = mid + 1;
-		} else {
-			high = mid - 1;
-		}
-	}
-	return clamp(found, 0, cache._length - 1);
-};
-var computeRange = (cache, startOffset, endOffset, prevStartIndex) => {
-	prevStartIndex = min(prevStartIndex, cache._length - 1);
-	if (getItemOffset(cache, prevStartIndex) <= startOffset) {
-		const end = findIndex(cache, endOffset, prevStartIndex);
-		return [findIndex(cache, startOffset, prevStartIndex, end), end];
-	} else {
-		const start = findIndex(cache, startOffset, undefined, prevStartIndex);
-		return [start, findIndex(cache, endOffset, start)];
-	}
-};
-var estimateDefaultItemSize = (cache, startIndex) => {
-	let measuredCountBeforeStart = 0;
-	const measuredSizes = [];
-	cache._sizes.forEach((s, i) => {
-		if (s !== -1) {
-			measuredSizes.push(s);
-			if (i < startIndex) {
-				measuredCountBeforeStart++;
-			}
-		}
-	});
-	cache._computedOffsetIndex = -1;
-	const sorted = sort(measuredSizes);
-	const len = sorted.length;
-	const mid = len / 2 | 0;
-	const median = len % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
-	const prevDefaultItemSize = cache._defaultItemSize;
-	return ((cache._defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
-};
-var initCache = (length, itemSize, sizes) => {
-	return {
-		_defaultItemSize: itemSize,
-		_sizes: sizes ? fill(sizes.slice(0, min(length, sizes.length)), max(0, length - sizes.length)) : fill([], length),
-		_length: length,
-		_computedOffsetIndex: -1,
-		_offsets: fill([], length + 1)
-	};
-};
-var takeCacheSnapshot = (cache) => {
-	return [cache._sizes.slice(), cache._defaultItemSize];
-};
-var updateCacheLength = (cache, length, isShift) => {
-	const diff = length - cache._length;
-	cache._computedOffsetIndex = isShift ? -1 : min(length - 1, cache._computedOffsetIndex);
-	cache._length = length;
-	if (diff > 0) {
-		fill(cache._offsets, diff);
-		fill(cache._sizes, diff, isShift);
-		return cache._defaultItemSize * diff;
-	} else {
-		cache._offsets.splice(diff);
-		return (isShift ? cache._sizes.splice(0, -diff) : cache._sizes.splice(diff)).reduce((acc, removed) => acc - (removed === -1 ? cache._defaultItemSize : removed), 0);
-	}
-};
-
 //#endregion
 //#region src/core/environment.ts
 var isBrowser = typeof window !== "undefined";
@@ -175,7 +70,8 @@ var UPDATE_SCROLL_END_EVENT = 8;
 var getScrollSize = (store) => {
 	return max(store.$getTotalSize(), store.$getViewportSize());
 };
-var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnapshot, shouldAutoEstimateItemSize = false) => {
+var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItemOffset: getOffset, $getItemSize: getItemSize, $setItemSize: setItemSize, $isSizeEqual: isSizeEqual, $getTotalSize: getTotalSize, $getLength: getLength, $setLength: setLength, $estimateDefaultSize: estimateDefaultSize }, ssrCount = 0) => {
+	let shouldAutoEstimateItemSize = !!estimateDefaultSize;
 	let isSSR = !!ssrCount;
 	let stateVersion = 1;
 	let viewportSize = 0;
@@ -190,27 +86,16 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 	let _prevRange = [0, isSSR ? max(ssrCount - 1, 0) : -1];
 	let _totalMeasuredSize = 0;
 	let _isViewportMeasured = false;
-	const cache = initCache(elementsCount, cacheSnapshot ? cacheSnapshot[1] : itemSize, cacheSnapshot && cacheSnapshot[0]);
 	const subscribers = new Set();
 	const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
 	const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;
-	const getRange = (startOffset, endOffset) => {
-		return computeRange(cache, startOffset, endOffset, _prevRange[0]);
-	};
-	const getTotalSize = () => getItemOffset(cache, cache._length);
-	const getItemOffset$1 = (index, fromEnd) => {
-		const offset = getItemOffset(cache, index) - pendingJump;
+	const getItemOffset = (index, fromEnd) => {
+		const offset = getOffset(index) - pendingJump;
 		if (fromEnd) {
-			return getTotalSize() - offset - getItemSize$1(index);
+			return getTotalSize() - offset - getItemSize(index);
 		}
 		return offset;
 	};
-	const getItemSize$1 = (index) => {
-		return getItemSize(cache, index);
-	};
-	const isSizeEqual = (index, value = -1) => {
-		return cache._sizes[index] === value;
-	};
 	const applyJump = (j) => {
 		if (j) {
 			if (isIOSWebKit() && _scrollDirection !== SCROLL_IDLE || _frozenRange && _scrollMode === SCROLL_BY_MANUAL_SCROLL) {
@@ -225,9 +110,6 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 			subscribers.clear();
 		},
 		$getStateVersion: () => stateVersion,
-		$getCacheSnapshot: () => {
-			return takeCacheSnapshot(cache);
-		},
 		$getRange: (bufferSize = 200) => {
 			if (!_isViewportMeasured || isSSR) {
 				return _prevRange;
@@ -254,13 +136,13 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 					endIndex = max(endIndex, _frozenRange[1]);
 				}
 			}
-			return [max(startIndex, 0), min(endIndex, cache._length - 1)];
+			return [max(startIndex, 0), min(endIndex, getLength() - 1)];
 		},
-		$findItemIndex: (offset) => findIndex(cache, offset - startSpacerSize),
+		$findItemIndex: (offset) => findIndex(offset - startSpacerSize),
 		$isUnmeasuredItem: isSizeEqual,
-		$getItemOffset: getItemOffset$1,
-		$getItemSize: getItemSize$1,
-		$getItemsLength: () => cache._length,
+		$getItemOffset: getItemOffset,
+		$getItemSize: getItemSize,
+		$getItemsLength: getLength,
 		$getScrollOffset: () => scrollOffset,
 		$isScrolling: () => _scrollDirection !== SCROLL_IDLE,
 		$getViewportSize: () => viewportSize,
@@ -331,24 +213,24 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 							shouldKeep = index < _frozenRange[0];
 						} else {
 							const start = getRelativeScrollOffset();
-							const itemOffset = getItemOffset$1(index);
-							const itemSize = getItemSize$1(index);
+							const itemOffset = getItemOffset(index);
+							const itemSize = getItemSize(index);
 							shouldKeep = _scrollDirection !== SCROLL_DOWN && _scrollMode === SCROLL_BY_NATIVE ? itemOffset + itemSize <= start : itemOffset < start && itemOffset + itemSize < start + viewportSize;
 						}
 						if (shouldKeep) {
-							acc += size - getItemSize$1(index);
+							acc += size - getItemSize(index);
 						}
 						return acc;
 					}, 0));
 					for (const [index, size] of updated) {
-						const prevSize = getItemSize$1(index);
-						const isInitialMeasurement = setItemSize(cache, index, size);
+						const prevSize = getItemSize(index);
+						const isInitialMeasurement = setItemSize(index, size);
 						if (shouldAutoEstimateItemSize) {
 							_totalMeasuredSize += isInitialMeasurement ? size : size - prevSize;
 						}
 					}
 					if (shouldAutoEstimateItemSize && viewportSize && _totalMeasuredSize > viewportSize) {
-						applyJump(estimateDefaultItemSize(cache, findIndex(cache, getVisibleOffset())));
+						applyJump(estimateDefaultSize(findIndex(getVisibleOffset())));
 						shouldAutoEstimateItemSize = false;
 					}
 					mutated = 1 + 2;
@@ -367,11 +249,11 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 				}
 				case 5: {
 					if (payload[1]) {
-						applyJump(updateCacheLength(cache, payload[0], true));
+						applyJump(setLength(payload[0], true));
 						_scrollMode = SCROLL_BY_SHIFT;
 						mutated = 1;
 					} else {
-						updateCacheLength(cache, payload[0]);
+						setLength(payload[0]);
 						mutated = 1;
 					}
 					break;
@@ -408,8 +290,139 @@ var createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnaps
 };
 
 //#endregion
-//#region src/core/scroller.ts
-var timeout = setTimeout;
+//#region src/core/cache.ts
+var UNCACHED = -1;
+var findIndex = (getOffset, length, offset, low = 0, high = length - 1) => {
+	let found = low;
+	while (low <= high) {
+		const mid = floor((low + high) / 2);
+		if (getOffset(mid) <= offset) {
+			found = mid;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+	return clamp(found, 0, length - 1);
+};
+
+//#endregion
+//#region src/core/layouts/list.ts
+var fill = (array, length, prepend) => {
+	const key = prepend ? "unshift" : "push";
+	for (let i = 0; i < length; i++) {
+		array[key](-1);
+	}
+	return array;
+};
+var createListLayout = (length, itemSize, snapshot) => {
+	let defaultItemSize = snapshot && snapshot[1] || itemSize || 40;
+	let computedOffsetIndex = -1;
+	let prevStartIndex = 0;
+	const restoredSizes = snapshot && snapshot[0];
+	const sizes = restoredSizes ? fill(restoredSizes.slice(0, min(length, restoredSizes.length)), max(0, length - restoredSizes.length)) : fill([], length);
+	const offsets = fill([], length + 1);
+	const getSize = (index) => {
+		const size = sizes[index];
+		return size === -1 ? defaultItemSize : size;
+	};
+	const getOffset = (index) => {
+		if (!length) return 0;
+		if (computedOffsetIndex >= index) {
+			return offsets[index];
+		}
+		if (computedOffsetIndex < 0) {
+			offsets[0] = 0;
+			computedOffsetIndex = 0;
+		}
+		let i = computedOffsetIndex;
+		let top = offsets[i];
+		while (i < index) {
+			top += getSize(i);
+			offsets[++i] = top;
+		}
+		computedOffsetIndex = index;
+		return top;
+	};
+	return {
+		$getRange: (startOffset, endOffset) => {
+			prevStartIndex = min(prevStartIndex, length - 1);
+			let start;
+			let end;
+			if (getOffset(prevStartIndex) <= startOffset) {
+				end = findIndex(getOffset, length, endOffset, prevStartIndex);
+				start = findIndex(getOffset, length, startOffset, prevStartIndex, end);
+			} else {
+				start = findIndex(getOffset, length, startOffset, undefined, prevStartIndex);
+				end = findIndex(getOffset, length, endOffset, start);
+			}
+			prevStartIndex = start;
+			return [start, end];
+		},
+		$findIndex: (offset) => findIndex(getOffset, length, offset),
+		$getItemOffset: getOffset,
+		$getItemSize: getSize,
+		$setItemSize: (index, size) => {
+			const isInitialMeasurement = sizes[index] === -1;
+			sizes[index] = size;
+			computedOffsetIndex = min(index, computedOffsetIndex);
+			return isInitialMeasurement;
+		},
+		$isSizeEqual: (index, size = -1) => sizes[index] === size,
+		$getTotalSize: () => getOffset(length),
+		$getLength: () => length,
+		$setLength: (nextLength, isShift) => {
+			const diff = nextLength - length;
+			computedOffsetIndex = isShift ? -1 : min(nextLength - 1, computedOffsetIndex);
+			length = nextLength;
+			if (diff > 0) {
+				fill(offsets, diff);
+				fill(sizes, diff, isShift);
+				return defaultItemSize * diff;
+			} else {
+				offsets.splice(diff);
+				return (isShift ? sizes.splice(0, -diff) : sizes.splice(diff)).reduce((acc, removed) => acc - (removed === -1 ? defaultItemSize : removed), 0);
+			}
+		},
+		$estimateDefaultSize: itemSize ? undefined : (startIndex) => {
+			let measuredCountBeforeStart = 0;
+			const measuredSizes = [];
+			sizes.forEach((s, i) => {
+				if (s !== -1) {
+					measuredSizes.push(s);
+					if (i < startIndex) {
+						measuredCountBeforeStart++;
+					}
+				}
+			});
+			computedOffsetIndex = -1;
+			const sorted = sort(measuredSizes);
+			const len = sorted.length;
+			const mid = len / 2 | 0;
+			const median = len % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+			const prevDefaultItemSize = defaultItemSize;
+			return ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
+		},
+		$snapshot: () => [sizes.slice(), defaultItemSize]
+	};
+};
+
+//#endregion
+//#region src/core/observer.ts
+var createResizeObserver = (cb) => {
+	let ro;
+	return {
+		_observe(e) {
+			(ro || (ro = new (getCurrentWindow(getCurrentDocument(e))).ResizeObserver(cb))).observe(e);
+		},
+		_unobserve(e) {
+			ro.unobserve(e);
+		},
+		_dispose() {
+			ro && ro.disconnect();
+		}
+	};
+};
 var debounce = (fn, ms) => {
 	let id;
 	const cancel = () => {
@@ -499,6 +512,9 @@ var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, upda
 		}
 	};
 };
+
+//#endregion
+//#region src/core/driver.ts
 var createScrollScheduler = (store, initialized, scroll) => {
 	let cancelScroll;
 	return [async (getTargetOffset, smooth) => {
@@ -564,7 +580,7 @@ var createScrollScheduler = (store, initialized, scroll) => {
 		cancelScroll && cancelScroll();
 	}];
 };
-var createScroller = (store, isHorizontal) => {
+var createContainerDriver = (store, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
@@ -582,9 +598,28 @@ var createScroller = (store, isHorizontal) => {
 			viewportElement[scrollOffsetKey] = offset;
 		}
 	});
+	const sizeKey = isHorizontal ? "width" : "height";
+	const mountedIndexes = new WeakMap();
+	const resizeObserver = createResizeObserver((entries) => {
+		const resizes = [];
+		for (const { target, contentRect } of entries) {
+			if (!target.offsetParent) continue;
+			if (target === viewportElement) {
+				store.$update(4, contentRect[sizeKey]);
+			} else {
+				const index = mountedIndexes.get(target);
+				if (index != null) {
+					resizes.push([index, contentRect[sizeKey]]);
+				}
+			}
+		}
+		if (resizes.length) {
+			store.$update(3, resizes);
+		}
+	});
 	return {
-		$observe(_, viewport) {
-			viewportElement = viewport;
+		$observe(containerElement, viewport = containerElement.parentElement) {
+			resizeObserver._observe(viewportElement = viewport);
 			if (isHorizontal) {
 				isNegative = getComputedStyle(viewport).direction === "rtl";
 			}
@@ -605,43 +640,32 @@ var createScroller = (store, isHorizontal) => {
 			initialized[1](true);
 		},
 		$dispose() {
+			resizeObserver._dispose();
 			scrollObserver && scrollObserver._dispose();
 			initialized[1](false);
 			initialized = createPromise();
 		},
-		$isNegative: () => isNegative,
-		$scrollTo(offset) {
-			scheduleScroll(() => offset);
-		},
-		$scrollBy(offset) {
-			offset += store.$getScrollOffset();
-			scheduleScroll(() => offset);
-		},
-		$scrollToIndex(index, { align, smooth, offset = 0 } = {}) {
-			index = clamp(index, 0, store.$getItemsLength() - 1);
-			if (align === "nearest") {
-				const itemOffset = store.$getItemOffset(index);
-				const scrollOffset = store.$getScrollOffset();
-				if (itemOffset < scrollOffset) {
-					align = "start";
-				} else if (itemOffset + store.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
-					align = "end";
-				} else {
-					return;
-				}
-			}
-			scheduleScroll(() => {
-				return offset + store.$getStartSpacerSize() + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - store.$getViewportSize() : align === "center" ? (store.$getItemSize(index) - store.$getViewportSize()) / 2 : 0);
-			}, smooth);
+		$observeItem(el, index) {
+			mountedIndexes.set(el, index);
+			resizeObserver._observe(el);
+			return () => {
+				mountedIndexes.delete(el);
+				resizeObserver._unobserve(el);
+			};
 		},
-		$fixScrollJump: () => {
+		$isNegative: () => isNegative,
+		$scheduleScroll: scheduleScroll,
+		$fixScrollJump() {
 			scrollObserver && scrollObserver._fixScrollJump();
-		}
+		},
+		$getBaseOffset: store.$getStartSpacerSize,
+		$getScrollbarSize: () => 0
 	};
 };
-var createWindowScroller = (store, isHorizontal) => {
+var createWindowDriver = (store, isHorizontal) => {
 	let containerElement;
 	let scrollObserver;
+	let cleanupOnWindowResize;
 	let initialized = createPromise();
 	let isNegative = false;
 	const scrollToKey = isHorizontal ? "left" : "top";
@@ -657,6 +681,21 @@ var createWindowScroller = (store, isHorizontal) => {
 			window.scroll({ [scrollToKey]: offset });
 		}
 	});
+	const sizeKey = isHorizontal ? "width" : "height";
+	const mountedIndexes = new WeakMap();
+	const resizeObserver = createResizeObserver((entries) => {
+		const resizes = [];
+		for (const { target, contentRect } of entries) {
+			if (!target.offsetParent) continue;
+			const index = mountedIndexes.get(target);
+			if (index != null) {
+				resizes.push([index, contentRect[sizeKey]]);
+			}
+		}
+		if (resizes.length) {
+			store.$update(3, resizes);
+		}
+	});
 	const calcOffsetToViewport = (node, viewport, window, isHorizontal, offset = 0) => {
 		const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
 		const offsetSum = offset + (isHorizontal && isNegative ? window.innerWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
@@ -672,6 +711,14 @@ var createWindowScroller = (store, isHorizontal) => {
 			const scrollOffsetKey = isHorizontal ? "scrollX" : "scrollY";
 			const document = getCurrentDocument(container);
 			const window = getCurrentWindow(document);
+			const onWindowResize = () => {
+				store.$update(4, window[isHorizontal ? "innerWidth" : "innerHeight"]);
+			};
+			window.addEventListener("resize", onWindowResize);
+			microtask(onWindowResize);
+			cleanupOnWindowResize = () => {
+				window.removeEventListener("resize", onWindowResize);
+			};
 			if (isHorizontal) {
 				isNegative = getComputedStyle(getDocumentElement(document)).direction === "rtl";
 			}
@@ -685,181 +732,56 @@ var createWindowScroller = (store, isHorizontal) => {
 			initialized[1](true);
 		},
 		$dispose() {
+			cleanupOnWindowResize && cleanupOnWindowResize();
+			resizeObserver._dispose();
 			scrollObserver && scrollObserver._dispose();
 			containerElement = undefined;
 			initialized[1](false);
 			initialized = createPromise();
 		},
+		$observeItem(el, index) {
+			mountedIndexes.set(el, index);
+			resizeObserver._observe(el);
+			return () => {
+				mountedIndexes.delete(el);
+				resizeObserver._unobserve(el);
+			};
+		},
 		$isNegative: () => isNegative,
-		$fixScrollJump: () => {
+		$scheduleScroll: scheduleScroll,
+		$fixScrollJump() {
 			scrollObserver && scrollObserver._fixScrollJump();
 		},
-		$scrollToIndex(index, { align, smooth, offset = 0 } = {}) {
-			if (!containerElement) return;
-			index = clamp(index, 0, store.$getItemsLength() - 1);
-			if (align === "nearest") {
-				const itemOffset = store.$getItemOffset(index);
-				const scrollOffset = store.$getScrollOffset();
-				if (itemOffset < scrollOffset) {
-					align = "start";
-				} else if (itemOffset + store.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
-					align = "end";
-				} else {
-					return;
-				}
-			}
+		$getBaseOffset() {
 			const document = getCurrentDocument(containerElement);
-			const window = getCurrentWindow(document);
-			const html = getDocumentElement(document);
-			const getScrollbarSize = () => store.$getViewportSize() - (isHorizontal ? html.clientWidth : html.clientHeight);
-			scheduleScroll(() => {
-				return offset + calcOffsetToViewport(containerElement, document.body, window, isHorizontal) + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - (store.$getViewportSize() - getScrollbarSize()) : align === "center" ? (store.$getItemSize(index) - (store.$getViewportSize() - getScrollbarSize())) / 2 : 0);
-			}, smooth);
-		}
-	};
-};
-var createGridScroller = (rowStore, colStore) => {
-	const rowScroller = createScroller(rowStore, false);
-	const colScroller = createScroller(colStore, true);
-	return {
-		$observe(container, viewport) {
-			rowScroller.$observe(container, viewport);
-			colScroller.$observe(container, viewport);
-		},
-		$dispose() {
-			rowScroller.$dispose();
-			colScroller.$dispose();
-		},
-		$isNegative: colScroller.$isNegative,
-		$scrollTo(row, col) {
-			if (row != null) {
-				rowScroller.$scrollTo(row);
-			}
-			if (col != null) {
-				colScroller.$scrollTo(col);
-			}
-		},
-		$scrollBy(row, col) {
-			if (row != null) {
-				rowScroller.$scrollBy(row);
-			}
-			if (col != null) {
-				colScroller.$scrollBy(col);
-			}
-		},
-		$scrollToIndex(row, col) {
-			if (row != null) {
-				rowScroller.$scrollToIndex(row);
-			}
-			if (col != null) {
-				colScroller.$scrollToIndex(col);
-			}
-		},
-		$fixScrollJump() {
-			rowScroller.$fixScrollJump();
-			colScroller.$fixScrollJump();
-		}
-	};
-};
-
-//#endregion
-//#region src/core/resizer.ts
-var createResizeObserver = (cb) => {
-	let ro;
-	return {
-		_observe(e) {
-			(ro || (ro = new (getCurrentWindow(getCurrentDocument(e))).ResizeObserver(cb))).observe(e);
+			return calcOffsetToViewport(containerElement, document.body, getCurrentWindow(document), isHorizontal);
 		},
-		_unobserve(e) {
-			ro.unobserve(e);
-		},
-		_dispose() {
-			ro && ro.disconnect();
+		$getScrollbarSize() {
+			const html = getDocumentElement(getCurrentDocument(containerElement));
+			return store.$getViewportSize() - (isHorizontal ? html.clientWidth : html.clientHeight);
 		}
 	};
 };
-var createResizer = (store, isHorizontal) => {
+var createContainerGridDriver = (rowStore, colStore) => {
 	let viewportElement;
-	const sizeKey = isHorizontal ? "width" : "height";
-	const mountedIndexes = new WeakMap();
-	const resizeObserver = createResizeObserver((entries) => {
-		const resizes = [];
-		for (const { target, contentRect } of entries) {
-			if (!target.offsetParent) continue;
-			if (target === viewportElement) {
-				store.$update(4, contentRect[sizeKey]);
-			} else {
-				const index = mountedIndexes.get(target);
-				if (index != null) {
-					resizes.push([index, contentRect[sizeKey]]);
-				}
-			}
-		}
-		if (resizes.length) {
-			store.$update(3, resizes);
+	let rowScrollObserver;
+	let colScrollObserver;
+	let initialized = createPromise();
+	let isNegative = false;
+	const [scheduleScrollX, cancelScrollX] = createScrollScheduler(colStore, () => initialized[0], (offset, smooth) => {
+		const opts = { left: normalizeScrollOffset(offset, isNegative) };
+		if (smooth) {
+			opts.behavior = "smooth";
 		}
+		viewportElement.scrollTo(opts);
 	});
-	return {
-		$observeRoot(viewport) {
-			resizeObserver._observe(viewportElement = viewport);
-		},
-		$observeItem: (el, i) => {
-			mountedIndexes.set(el, i);
-			resizeObserver._observe(el);
-			return () => {
-				mountedIndexes.delete(el);
-				resizeObserver._unobserve(el);
-			};
-		},
-		$dispose: resizeObserver._dispose
-	};
-};
-var createWindowResizer = (store, isHorizontal) => {
-	const sizeKey = isHorizontal ? "width" : "height";
-	const windowSizeKey = isHorizontal ? "innerWidth" : "innerHeight";
-	const mountedIndexes = new WeakMap();
-	const resizeObserver = createResizeObserver((entries) => {
-		const resizes = [];
-		for (const { target, contentRect } of entries) {
-			if (!target.offsetParent) continue;
-			const index = mountedIndexes.get(target);
-			if (index != null) {
-				resizes.push([index, contentRect[sizeKey]]);
-			}
-		}
-		if (resizes.length) {
-			store.$update(3, resizes);
+	const [scheduleScrollY, cancelScrollY] = createScrollScheduler(rowStore, () => initialized[0], (offset, smooth) => {
+		const opts = { top: offset };
+		if (smooth) {
+			opts.behavior = "smooth";
 		}
+		viewportElement.scrollTo(opts);
 	});
-	let cleanupOnWindowResize;
-	return {
-		$observeRoot(container) {
-			const window = getCurrentWindow(getCurrentDocument(container));
-			const onWindowResize = () => {
-				store.$update(4, window[windowSizeKey]);
-			};
-			window.addEventListener("resize", onWindowResize);
-			microtask(onWindowResize);
-			cleanupOnWindowResize = () => {
-				window.removeEventListener("resize", onWindowResize);
-			};
-		},
-		$observeItem: (el, i) => {
-			mountedIndexes.set(el, i);
-			resizeObserver._observe(el);
-			return () => {
-				mountedIndexes.delete(el);
-				resizeObserver._unobserve(el);
-			};
-		},
-		$dispose() {
-			cleanupOnWindowResize && cleanupOnWindowResize();
-			resizeObserver._dispose();
-		}
-	};
-};
-var createGridResizer = (rowStore, colStore) => {
-	let viewportElement;
 	const mountedIndexes = new WeakMap();
 	const maybeCachedRowIndexes = new Set();
 	const maybeCachedColIndexes = new Set();
@@ -936,9 +858,40 @@ var createGridResizer = (rowStore, colStore) => {
 			colStore.$update(3, widthResizes);
 		}
 	});
+	const observeAxisScroll = (store, isHorizontal, cancelScroll) => {
+		const viewport = viewportElement;
+		const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
+		const overflowKey = isHorizontal ? "overflowX" : "overflowY";
+		const negative = isHorizontal && isNegative;
+		return createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], negative), (jump, shift, isMomentumScrolling) => {
+			if (isMomentumScrolling) {
+				const style = viewport.style;
+				const prev = style[overflowKey];
+				style[overflowKey] = "hidden";
+				timeout(() => {
+					style[overflowKey] = prev;
+				});
+			}
+			viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, negative);
+			if (shift) {
+				cancelScroll();
+			}
+		});
+	};
 	return {
-		$observeRoot(viewport) {
+		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
+			isNegative = getComputedStyle(viewport).direction === "rtl";
+			rowScrollObserver = observeAxisScroll(rowStore, false, cancelScrollY);
+			colScrollObserver = observeAxisScroll(colStore, true, cancelScrollX);
+			initialized[1](true);
+		},
+		$dispose() {
+			resizeObserver._dispose();
+			rowScrollObserver && rowScrollObserver._dispose();
+			colScrollObserver && colScrollObserver._dispose();
+			initialized[1](false);
+			initialized = createPromise();
 		},
 		$observeItem(el, rowIndex, colIndex) {
 			mountedIndexes.set(el, [rowIndex, colIndex]);
@@ -950,6 +903,14 @@ var createGridResizer = (rowStore, colStore) => {
 				resizeObserver._unobserve(el);
 			};
 		},
+		$resizeRows(rows) {
+			for (const [r] of rows) {
+				for (let c = 0; c < colStore.$getItemsLength(); c++) {
+					sizeCache.delete(getKey(r, c));
+				}
+			}
+			rowStore.$update(3, rows);
+		},
 		$resizeCols(cols) {
 			for (const [c] of cols) {
 				for (let r = 0; r < rowStore.$getItemsLength(); r++) {
@@ -958,18 +919,71 @@ var createGridResizer = (rowStore, colStore) => {
 			}
 			colStore.$update(3, cols);
 		},
-		$resizeRows(rows) {
-			for (const [r] of rows) {
-				for (let c = 0; c < colStore.$getItemsLength(); c++) {
-					sizeCache.delete(getKey(r, c));
-				}
-			}
-			rowStore.$update(3, rows);
+		$isNegative: () => isNegative,
+		$scheduleScrollX: scheduleScrollX,
+		$scheduleScrollY: scheduleScrollY,
+		$fixScrollJump() {
+			rowScrollObserver && rowScrollObserver._fixScrollJump();
+			colScrollObserver && colScrollObserver._fixScrollJump();
 		},
-		$dispose: resizeObserver._dispose
+		$getBaseOffset: (isHorizontal) => (isHorizontal ? colStore : rowStore).$getStartSpacerSize()
 	};
 };
 
+//#endregion
+//#region src/core/scroll-to.ts
+var scrollTo = (driver, offset) => {
+	driver.$scheduleScroll(() => offset);
+};
+var scrollBy = (driver, store, offset) => {
+	scrollTo(driver, offset + store.$getScrollOffset());
+};
+var scrollToIndex = (driver, store, index, { align, smooth, offset = 0 } = {}) => {
+	index = clamp(index, 0, store.$getItemsLength() - 1);
+	if (align === "nearest") {
+		const itemOffset = store.$getItemOffset(index);
+		const scrollOffset = store.$getScrollOffset();
+		if (itemOffset < scrollOffset) {
+			align = "start";
+		} else if (itemOffset + store.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
+			align = "end";
+		} else {
+			return;
+		}
+	}
+	driver.$scheduleScroll(() => {
+		return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - (store.$getViewportSize() - driver.$getScrollbarSize()) : align === "center" ? (store.$getItemSize(index) - (store.$getViewportSize() - driver.$getScrollbarSize())) / 2 : 0);
+	}, smooth);
+};
+var gridScrollTo = (driver, row, col) => {
+	if (row != null) {
+		driver.$scheduleScrollY(() => row);
+	}
+	if (col != null) {
+		driver.$scheduleScrollX(() => col);
+	}
+};
+var gridScrollBy = (driver, rowStore, colStore, row, col) => {
+	if (row != null) {
+		const target = row + rowStore.$getScrollOffset();
+		driver.$scheduleScrollY(() => target);
+	}
+	if (col != null) {
+		const target = col + colStore.$getScrollOffset();
+		driver.$scheduleScrollX(() => target);
+	}
+};
+var gridScrollToIndex = (driver, rowStore, colStore, row, col) => {
+	if (row != null) {
+		const index = clamp(row, 0, rowStore.$getItemsLength() - 1);
+		driver.$scheduleScrollY(() => driver.$getBaseOffset(false) + rowStore.$getItemOffset(index));
+	}
+	if (col != null) {
+		const index = clamp(col, 0, colStore.$getItemsLength() - 1);
+		driver.$scheduleScrollX(() => driver.$getBaseOffset(true) + colStore.$getItemOffset(index));
+	}
+};
+
 //#endregion
 //#region src/solid/ListItem.tsx
 var ListItem = (props) => {
@@ -981,13 +995,15 @@ var ListItem = (props) => {
 	});
 	const style = createMemo(() => {
 		const isHorizontal = props._isHorizontal;
+		const hide = props._hide;
+		const isSSR = props._isSSR;
 		const style = {
 			contain: "layout style",
-			position: "absolute",
+			position: hide && isSSR ? undefined : "absolute",
 			[isHorizontal ? "height" : "width"]: "100%",
 			[isHorizontal ? "top" : "left"]: "0px",
 			[isHorizontal ? "left" : "top"]: props._offset + "px",
-			visibility: props._hide ? "hidden" : undefined
+			visibility: !hide || isSSR ? undefined : "hidden"
 		};
 		if (isHorizontal) {
 			style.display = "inline-flex";
@@ -1009,11 +1025,12 @@ var isSameRange = (prev, next) => {
 //#region src/solid/Virtualizer.tsx
 var Virtualizer = (props) => {
 	let containerRef;
-	const { itemSize, horizontal = false, cache } = props;
+	const { itemSize, horizontal = false, cache, ssrCount } = props;
 	props = mergeProps({ as: "div" }, props);
-	const store = createVirtualStore(props.data.length, itemSize, undefined, cache, !itemSize);
-	const resizer = createResizer(store, horizontal);
-	const scroller = createScroller(store, horizontal);
+	const [isSSR, setIsSSR] = createSignal(!!ssrCount);
+	const layout = createListLayout(props.data.length, itemSize, cache);
+	const store = createVirtualStore(layout, ssrCount);
+	const driver = createContainerDriver(store, horizontal);
 	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
 	store.$subscribe(1, () => {
 		setRerender(store.$getStateVersion());
@@ -1034,12 +1051,13 @@ var Virtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
-	const isNegative = createMemo(() => stateVersion() && scroller.$isNegative());
+	const isNegative = createMemo(() => stateVersion() && driver.$isNegative());
 	onMount(() => {
+		setIsSSR(false);
 		if (props.ref) {
 			props.ref({
 				get cache() {
-					return store.$getCacheSnapshot();
+					return layout.$snapshot();
 				},
 				get scrollOffset() {
 					return store.$getScrollOffset();
@@ -1053,22 +1071,18 @@ var Virtualizer = (props) => {
 				findItemIndex: store.$findItemIndex,
 				getItemOffset: store.$getItemOffset,
 				getItemSize: store.$getItemSize,
-				scrollToIndex: scroller.$scrollToIndex,
-				scrollTo: scroller.$scrollTo,
-				scrollBy: scroller.$scrollBy
+				scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
+				scrollTo: (offset) => scrollTo(driver, offset),
+				scrollBy: (offset) => scrollBy(driver, store, offset)
 			});
 		}
-		const container = containerRef;
-		const scrollable = props.scrollRef || container.parentElement;
-		resizer.$observeRoot(scrollable);
-		scroller.$observe(container, scrollable);
+		driver.$observe(containerRef, props.scrollRef);
 		onCleanup(() => {
 			if (props.ref) {
 				props.ref();
 			}
 			store.$dispose();
-			resizer.$dispose();
-			scroller.$dispose();
+			driver.$dispose();
 		});
 	});
 	createComputed(on(() => props.startMargin || 0, (value) => {
@@ -1077,7 +1091,7 @@ var Virtualizer = (props) => {
 		}
 	}));
 	createEffect(on(stateVersion, () => {
-		scroller.$fixScrollJump();
+		driver.$fixScrollJump();
 	}));
 	const dataSlice = createMemo(() => {
 		const count = props.data.length;
@@ -1120,7 +1134,7 @@ var Virtualizer = (props) => {
 		const children = createMemo(() => {
 			return untrack(() => props.children(data, index));
 		});
-		return <ListItem _as={props.item} _index={index()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal} />;
+		return <ListItem _as={props.item} _index={index()} _resizer={driver.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal} _isSSR={isSSR()} />;
 	};
 	return <Dynamic component={props.as} ref={containerRef} style={{
 		contain: "size style",
@@ -1149,6 +1163,7 @@ var VList = (props) => {
 		"children",
 		"bufferSize",
 		"itemSize",
+		"ssrCount",
 		"shift",
 		"horizontal",
 		"keepMounted",
@@ -1166,7 +1181,7 @@ var VList = (props) => {
 		height: "100%",
 		...local.style
 	}}>
-      <Virtualizer ref={local.ref} data={local.data} bufferSize={local.bufferSize} itemSize={local.itemSize} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
+      <Virtualizer ref={local.ref} data={local.data} bufferSize={local.bufferSize} itemSize={local.itemSize} ssrCount={local.ssrCount} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
         {local.children}
       </Virtualizer>
     </div>;
@@ -1176,10 +1191,11 @@ var VList = (props) => {
 //#region src/solid/WindowVirtualizer.tsx
 var WindowVirtualizer = (props) => {
 	let containerRef;
-	const { ref: _ref, data: _data, children: _children, itemSize, shift: _shift, horizontal = false, cache, onScrollEnd: _onScrollEnd } = props;
-	const store = createVirtualStore(props.data.length, itemSize, undefined, cache, !itemSize);
-	const resizer = createWindowResizer(store, horizontal);
-	const scroller = createWindowScroller(store, horizontal);
+	const { ref: _ref, data: _data, children: _children, itemSize, ssrCount, shift: _shift, horizontal = false, cache, onScrollEnd: _onScrollEnd } = props;
+	const [isSSR, setIsSSR] = createSignal(!!ssrCount);
+	const layout = createListLayout(props.data.length, itemSize, cache);
+	const store = createVirtualStore(layout, ssrCount);
+	const driver = createWindowDriver(store, horizontal);
 	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
 	store.$subscribe(1, () => {
 		setRerender(store.$getStateVersion());
@@ -1200,12 +1216,13 @@ var WindowVirtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
-	const isNegative = createMemo(() => stateVersion() && scroller.$isNegative());
+	const isNegative = createMemo(() => stateVersion() && driver.$isNegative());
 	onMount(() => {
+		setIsSSR(false);
 		if (props.ref) {
 			props.ref({
 				get cache() {
-					return store.$getCacheSnapshot();
+					return layout.$snapshot();
 				},
 				get scrollOffset() {
 					return store.$getScrollOffset();
@@ -1216,22 +1233,20 @@ var WindowVirtualizer = (props) => {
 				findItemIndex: store.$findItemIndex,
 				getItemOffset: store.$getItemOffset,
 				getItemSize: store.$getItemSize,
-				scrollToIndex: scroller.$scrollToIndex
+				scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts)
 			});
 		}
-		resizer.$observeRoot(containerRef);
-		scroller.$observe(containerRef);
+		driver.$observe(containerRef);
 		onCleanup(() => {
 			if (props.ref) {
 				props.ref();
 			}
 			store.$dispose();
-			resizer.$dispose();
-			scroller.$dispose();
+			driver.$dispose();
 		});
 	});
 	createEffect(on(stateVersion, () => {
-		scroller.$fixScrollJump();
+		driver.$fixScrollJump();
 	}));
 	const dataSlice = createMemo(() => {
 		const count = props.data.length;
@@ -1269,7 +1284,7 @@ var WindowVirtualizer = (props) => {
 		const children = createMemo(() => {
 			return untrack(() => props.children(data, itemIndex));
 		});
-		return <ListItem _index={itemIndex()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal} />;
+		return <ListItem _index={itemIndex()} _resizer={driver.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal} _isSSR={isSSR()} />;
 	}}
       </For>
     </div>;