@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Virtualizer2.js

@@ -0,0 +1,751 @@
+import { filterDOMProps } from "./utils.js";
+import { CollectionRendererContext } from "./Collection.js";
+import { createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, setStyleProperty, spread, template, use } from "solid-js/web";
+import { createContext, createMemo, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
+//#region src/VirtualizerLayouts.ts
+function clampRange(itemCount, start, end, itemSize) {
+	const safeStart = Math.max(0, Math.min(start, itemCount));
+	const safeEnd = Math.max(safeStart, Math.min(end, itemCount));
+	return {
+		start: safeStart,
+		end: safeEnd,
+		offsetTop: safeStart * itemSize,
+		offsetBottom: Math.max(0, (itemCount - safeEnd) * itemSize)
+	};
+}
+function calculateLinearVisibleRange(itemCount, scrollOffset, viewportSize, itemSize, overscan) {
+	if (itemCount <= 0) return {
+		start: 0,
+		end: 0,
+		offsetTop: 0,
+		offsetBottom: 0
+	};
+	const safeItemSize = Math.max(1, itemSize);
+	const safeViewport = Math.max(1, viewportSize);
+	const safeOverscan = Math.max(0, overscan);
+	const start = Math.floor(scrollOffset / safeItemSize) - safeOverscan;
+	return clampRange(itemCount, start, start + (Math.ceil(safeViewport / safeItemSize) + safeOverscan * 2), safeItemSize);
+}
+var ListLayout = class {
+	getVisibleRange(ctx, options) {
+		return calculateLinearVisibleRange(ctx.itemCount, ctx.scrollOffset, ctx.viewportSize, options?.itemSize ?? 40, options?.overscan ?? ctx.overscan);
+	}
+	getLayoutInfo(index, context, options) {
+		const itemSize = Math.max(1, options?.itemSize ?? 40);
+		if ((options?.orientation ?? "vertical") === "horizontal") return {
+			key: String(index),
+			index,
+			rect: {
+				x: index * itemSize,
+				y: 0,
+				width: itemSize,
+				height: Math.max(0, context.viewportHeight ?? 0)
+			}
+		};
+		return {
+			key: String(index),
+			index,
+			rect: {
+				x: 0,
+				y: index * itemSize,
+				width: Math.max(0, context.viewportWidth),
+				height: itemSize
+			}
+		};
+	}
+	getDropTargetFromPoint(point, itemCount, options) {
+		if (itemCount <= 0) return {
+			type: "root",
+			index: -1,
+			position: "on"
+		};
+		const itemSize = Math.max(1, options?.itemSize ?? 40);
+		const offset = (options?.orientation ?? "vertical") === "horizontal" ? point.x : point.y;
+		if (offset < 0) return {
+			type: "item",
+			index: 0,
+			position: "before"
+		};
+		if (offset >= itemCount * itemSize) return {
+			type: "item",
+			index: itemCount - 1,
+			position: "after"
+		};
+		const rawIndex = Math.floor(offset / itemSize);
+		const index = Math.max(0, Math.min(rawIndex, itemCount - 1));
+		const offsetWithinItem = Math.max(0, offset - index * itemSize);
+		const threshold = itemSize / 3;
+		return {
+			type: "item",
+			index,
+			position: offsetWithinItem < threshold ? "before" : offsetWithinItem > threshold * 2 ? "after" : "on"
+		};
+	}
+};
+var TableLayout = class extends ListLayout {};
+var GridLayout = class {
+	getVisibleRange(ctx, options) {
+		if (ctx.itemCount <= 0) return {
+			start: 0,
+			end: 0,
+			offsetTop: 0,
+			offsetBottom: 0
+		};
+		const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+		const columns = Math.max(1, options?.columnCount ?? 1);
+		const safeViewport = Math.max(1, ctx.viewportSize);
+		const safeOverscan = Math.max(0, options?.overscan ?? ctx.overscan);
+		const startRow = Math.max(0, Math.floor(ctx.scrollOffset / rowHeight) - safeOverscan);
+		const endRow = startRow + (Math.ceil(safeViewport / rowHeight) + safeOverscan * 2);
+		const start = startRow * columns;
+		const end = Math.min(ctx.itemCount, endRow * columns);
+		const totalRows = Math.ceil(ctx.itemCount / columns);
+		const clampedStartRow = Math.floor(start / columns);
+		const renderedRows = Math.ceil((end - start) / columns);
+		return {
+			start,
+			end,
+			offsetTop: clampedStartRow * rowHeight,
+			offsetBottom: Math.max(0, (totalRows - clampedStartRow - renderedRows) * rowHeight)
+		};
+	}
+	getLayoutInfo(index, context, options) {
+		const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+		const columns = Math.max(1, options?.columnCount ?? 1);
+		const row = Math.floor(index / columns);
+		const col = index % columns;
+		const width = Math.max(1, context.viewportWidth);
+		const cellWidth = Math.floor(width / columns);
+		return {
+			key: String(index),
+			index,
+			rect: {
+				x: col * cellWidth,
+				y: row * rowHeight,
+				width: cellWidth,
+				height: rowHeight
+			}
+		};
+	}
+	getDropTargetFromPoint(point, itemCount, options) {
+		if (itemCount <= 0) return {
+			type: "root",
+			index: -1,
+			position: "on"
+		};
+		const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+		const columns = Math.max(1, options?.columnCount ?? 1);
+		const totalHeight = Math.ceil(itemCount / columns) * rowHeight;
+		if (point.y < 0) return {
+			type: "item",
+			index: 0,
+			position: "before"
+		};
+		if (point.y >= totalHeight) return {
+			type: "item",
+			index: itemCount - 1,
+			position: "after"
+		};
+		const cellWidth = Math.max(1, options?.viewportWidth ?? 320) / columns;
+		const row = Math.max(0, Math.floor(point.y / rowHeight));
+		const col = Math.max(0, Math.min(columns - 1, Math.floor(Math.max(0, point.x) / cellWidth)));
+		const index = Math.max(0, Math.min(itemCount - 1, row * columns + col));
+		const withinRow = Math.max(0, point.y - row * rowHeight);
+		const threshold = rowHeight / 3;
+		return {
+			type: "item",
+			index,
+			position: withinRow < threshold ? "before" : withinRow > threshold * 2 ? "after" : "on"
+		};
+	}
+};
+var WaterfallLayout = class extends GridLayout {
+	getVisibleRange(ctx, options) {
+		const width = Math.max(1, options?.viewportWidth ?? 320);
+		const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+		const gap = Math.max(0, options?.gap ?? 0);
+		const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+		return super.getVisibleRange(ctx, {
+			...options,
+			columnCount
+		});
+	}
+	getLayoutInfo(index, context, options) {
+		const width = Math.max(1, options?.viewportWidth ?? context.viewportWidth);
+		const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+		const gap = Math.max(0, options?.gap ?? 0);
+		const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+		return super.getLayoutInfo(index, context, {
+			...options,
+			columnCount
+		});
+	}
+	getDropTargetFromPoint(point, itemCount, options) {
+		const width = Math.max(1, options?.viewportWidth ?? 320);
+		const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+		const gap = Math.max(0, options?.gap ?? 0);
+		const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+		return super.getDropTargetFromPoint(point, itemCount, {
+			...options,
+			columnCount
+		});
+	}
+};
+//#endregion
+//#region src/Virtualizer.tsx
+/**
+* Virtualizer primitive for solidaria-components.
+*
+* Phase 1 parity: provides RAC-like API and context contract with
+* a safe non-virtualized fallback render path.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div><div data-virtualizer-content>`);
+const VirtualizerContext = createContext(null);
+function useVirtualizerContext() {
+	return useContext(VirtualizerContext);
+}
+function getObjectValue(value, key) {
+	return value?.[key];
+}
+function isSameRange(a, b) {
+	return a.start === b.start && a.end === b.end && a.offsetTop === b.offsetTop && a.offsetBottom === b.offsetBottom;
+}
+function isSameLayoutInfo(a, b) {
+	return a.key === b.key && a.index === b.index && a.rect.x === b.rect.x && a.rect.y === b.rect.y && a.rect.width === b.rect.width && a.rect.height === b.rect.height;
+}
+/**
+* A Virtualizer renders collection content under a virtualized layout contract.
+* Current implementation supports fixed-size visible range virtualization.
+*/
+function Virtualizer(props) {
+	const [local, domProps] = splitProps(props, [
+		"children",
+		"layout",
+		"layoutOptions",
+		"renderDropIndicator",
+		"getDropOperation",
+		"allowsWindowScrolling",
+		"class",
+		"style"
+	]);
+	const [scrollOffset, setScrollOffset] = createSignal(0);
+	const [scrollOffsetX, setScrollOffsetX] = createSignal(0);
+	const [viewportOffset, setViewportOffset] = createSignal(0);
+	const [windowViewportSize, setWindowViewportSize] = createSignal(0);
+	const [measuredViewportSize, setMeasuredViewportSize] = createSignal(0);
+	const [measuredViewportWidth, setMeasuredViewportWidth] = createSignal(0);
+	const allowsWindowScrolling = createMemo(() => local.allowsWindowScrolling ?? true);
+	const [isScrolling, setIsScrolling] = createSignal(false);
+	const [dropTargetResolver, setDropTargetResolver] = createSignal(void 0);
+	const [dropTargetItemCountResolver, setDropTargetItemCountResolver] = createSignal(void 0);
+	const [dropTargetIndexResolver, setDropTargetIndexResolver] = createSignal(void 0);
+	const [dropOperationResolver, setDropOperationResolver] = createSignal(void 0);
+	const [keyboardNavigationOverride, setKeyboardNavigationOverride] = createSignal(void 0);
+	let containerRef;
+	const fallbackLayout = new ListLayout();
+	const visibleRangeCache = /* @__PURE__ */ new Map();
+	const layoutInfoCache = /* @__PURE__ */ new Map();
+	const layout = createMemo(() => {
+		if (typeof local.layout === "function") return new local.layout();
+		return local.layout;
+	});
+	const resolvedLayout = createMemo(() => {
+		return layout() ?? new ListLayout();
+	});
+	const resolvedLayoutOptions = createMemo(() => {
+		const fromLayout = resolvedLayout().useLayoutOptions?.();
+		if (local.layoutOptions && fromLayout) return {
+			...local.layoutOptions,
+			...fromLayout
+		};
+		return local.layoutOptions ?? fromLayout;
+	});
+	const virtualOptions = createMemo(() => resolvedLayoutOptions());
+	const layoutOptionsWithViewport = createMemo(() => {
+		const options = resolvedLayoutOptions();
+		if (options && typeof options === "object") return {
+			...options,
+			viewportWidth: measuredViewportWidth()
+		};
+		return { viewportWidth: measuredViewportWidth() };
+	});
+	const itemSize = createMemo(() => getObjectValue(virtualOptions(), "itemSize") ?? 40);
+	const overscan = createMemo(() => getObjectValue(virtualOptions(), "overscan") ?? 2);
+	const orientation = createMemo(() => getObjectValue(virtualOptions(), "orientation") ?? "vertical");
+	const viewportSize = createMemo(() => {
+		const explicit = getObjectValue(virtualOptions(), "viewportSize");
+		if (explicit != null) return explicit;
+		const elementSize = measuredViewportSize() ?? 0;
+		if (allowsWindowScrolling()) return Math.max(0, Math.min(elementSize - viewportOffset(), windowViewportSize()));
+		return elementSize;
+	});
+	const effectiveScrollOffset = createMemo(() => allowsWindowScrolling() ? scrollOffset() + viewportOffset() : scrollOffset());
+	const mainScrollOffset = createMemo(() => orientation() === "horizontal" ? scrollOffsetX() : effectiveScrollOffset());
+	const mainViewportSize = createMemo(() => {
+		if (orientation() !== "horizontal") return viewportSize();
+		const explicit = getObjectValue(virtualOptions(), "viewportSize");
+		return explicit != null ? explicit : measuredViewportWidth();
+	});
+	const getVisibleRange = (itemCount) => {
+		const ctx = {
+			itemCount,
+			scrollOffset: mainScrollOffset(),
+			viewportSize: mainViewportSize(),
+			overscan: overscan(),
+			viewportWidth: measuredViewportWidth()
+		};
+		const nextRange = resolvedLayout().getVisibleRange?.(ctx, layoutOptionsWithViewport()) ?? calculateLinearVisibleRange(itemCount, ctx.scrollOffset, ctx.viewportSize, itemSize(), ctx.overscan);
+		const cachedRange = visibleRangeCache.get(itemCount);
+		if (cachedRange && isSameRange(cachedRange, nextRange)) return cachedRange;
+		visibleRangeCache.set(itemCount, nextRange);
+		return nextRange;
+	};
+	const getLayoutInfo = (index) => {
+		const ctx = {
+			viewportWidth: measuredViewportWidth(),
+			viewportHeight: measuredViewportSize()
+		};
+		const nextInfo = resolvedLayout().getLayoutInfo?.(index, ctx, layoutOptionsWithViewport()) ?? (orientation() === "horizontal" ? {
+			key: String(index),
+			index,
+			rect: {
+				x: index * itemSize(),
+				y: 0,
+				width: itemSize(),
+				height: Math.max(0, measuredViewportSize())
+			}
+		} : {
+			key: String(index),
+			index,
+			rect: {
+				x: 0,
+				y: index * itemSize(),
+				width: Math.max(0, measuredViewportWidth()),
+				height: itemSize()
+			}
+		});
+		const cachedInfo = layoutInfoCache.get(index);
+		if (cachedInfo && isSameLayoutInfo(cachedInfo, nextInfo)) return cachedInfo;
+		layoutInfoCache.set(index, nextInfo);
+		return nextInfo;
+	};
+	const getDropTargetFromPoint = (point, itemCount) => {
+		const target = resolvedLayout().getDropTargetFromPoint?.(point, itemCount, layoutOptionsWithViewport()) ?? fallbackLayout.getDropTargetFromPoint(point, itemCount, virtualOptions());
+		if (!target) return null;
+		const resolver = dropTargetResolver();
+		return resolver ? resolver(target) : target;
+	};
+	const assignDropTargetResolver = (resolver) => {
+		setDropTargetResolver(() => resolver);
+	};
+	const assignDropTargetItemCountResolver = (resolver) => {
+		setDropTargetItemCountResolver(() => resolver);
+	};
+	const assignDropTargetIndexResolver = (resolver) => {
+		setDropTargetIndexResolver(() => resolver);
+	};
+	const assignDropOperationResolver = (resolver) => {
+		setDropOperationResolver(() => resolver);
+	};
+	const assignKeyboardNavigationOverride = (override) => {
+		setKeyboardNavigationOverride(() => override);
+	};
+	const toCollectionDropTarget = (target) => {
+		if (target.type === "root") return { type: "root" };
+		return {
+			type: "item",
+			key: target.key ?? target.index,
+			dropPosition: target.position
+		};
+	};
+	const getCollectionDropTargetFromPoint = (x, y, isValidDropTarget) => {
+		const itemCount = dropTargetItemCountResolver()?.() ?? 0;
+		const virtualTarget = getDropTargetFromPoint({
+			x,
+			y
+		}, itemCount);
+		if (!virtualTarget) return null;
+		const mappedTarget = toCollectionDropTarget(virtualTarget);
+		if (isValidDropTarget(mappedTarget)) return mappedTarget;
+		if (mappedTarget.type === "item") {
+			const alternatePositions = mappedTarget.dropPosition === "on" ? ["before", "after"] : mappedTarget.dropPosition === "before" ? ["on", "after"] : ["on", "before"];
+			for (const position of alternatePositions) {
+				const alternateTarget = {
+					...mappedTarget,
+					dropPosition: position
+				};
+				if (isValidDropTarget(alternateTarget)) return alternateTarget;
+			}
+			const rootTarget = { type: "root" };
+			if (isValidDropTarget(rootTarget)) return rootTarget;
+		}
+		return null;
+	};
+	const getCollectionDropOperation = (target, types, allowedOperations) => {
+		const resolver = dropOperationResolver() ?? local.getDropOperation;
+		if (resolver) return resolver(target, types, allowedOperations);
+		if (allowedOperations.length === 0) return "cancel";
+		if (target.type === "root") {
+			if (allowedOperations.includes("copy")) return "copy";
+			if (allowedOperations.includes("move")) return "move";
+		} else if (target.dropPosition === "on") {
+			if (allowedOperations.includes("copy")) return "copy";
+			if (allowedOperations.includes("move")) return "move";
+		} else {
+			if (allowedOperations.includes("move")) return "move";
+			if (allowedOperations.includes("copy")) return "copy";
+		}
+		if (allowedOperations.includes("link")) return "link";
+		return allowedOperations.find((operation) => operation !== "cancel") ?? "cancel";
+	};
+	const getBaseKeyboardNavigationTarget = (target, direction, isValidDropTarget) => {
+		const itemCount = dropTargetItemCountResolver()?.() ?? 0;
+		if (itemCount <= 0) {
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		}
+		const resolveCurrentIndex = (currentTarget) => {
+			if (!currentTarget || currentTarget.type === "root") return null;
+			const resolver = dropTargetIndexResolver();
+			if (resolver) {
+				const fromResolver = resolver(currentTarget.key);
+				if (fromResolver != null && fromResolver >= 0 && fromResolver < itemCount) return fromResolver;
+				return null;
+			}
+			if (typeof currentTarget.key === "number" && currentTarget.key >= 0 && currentTarget.key < itemCount) return currentTarget.key;
+			return null;
+		};
+		const getCurrentIndex = (currentTarget) => {
+			if (!currentTarget || currentTarget.type === "root") return direction === "next" ? -1 : itemCount;
+			const resolvedIndex = resolveCurrentIndex(currentTarget);
+			if (resolvedIndex != null) return resolvedIndex;
+			return direction === "next" ? -1 : itemCount;
+		};
+		const tryCurrentItemTransition = (currentTarget) => {
+			if (!currentTarget || currentTarget.type !== "item") return null;
+			const tryPosition = (position) => {
+				if (currentTarget.dropPosition === position) return null;
+				const nextTarget = {
+					type: "item",
+					key: currentTarget.key,
+					dropPosition: position
+				};
+				return isValidDropTarget(nextTarget) ? nextTarget : null;
+			};
+			if (direction === "next") {
+				if (currentTarget.dropPosition === "before") return tryPosition("on") ?? tryPosition("after");
+				if (currentTarget.dropPosition === "on") return tryPosition("after");
+			} else {
+				if (currentTarget.dropPosition === "after") return tryPosition("on") ?? tryPosition("before");
+				if (currentTarget.dropPosition === "on") return tryPosition("before");
+			}
+			return null;
+		};
+		const scanFromIndex = (startIndex, step, directionForInsertion) => {
+			for (let index = startIndex; index >= 0 && index < itemCount; index += step) {
+				const onTarget = tryTarget(index, "on");
+				if (onTarget) return onTarget;
+				const insertionOrder = directionForInsertion === "next" ? ["before", "after"] : ["after", "before"];
+				for (const position of insertionOrder) {
+					const insertionTarget = tryTarget(index, position);
+					if (insertionTarget) return insertionTarget;
+				}
+			}
+			return null;
+		};
+		const findNavigationTarget = (currentIndex, step = 1) => {
+			const delta = direction === "next" ? 1 : -1;
+			const nextStart = currentIndex + delta * Math.max(1, step);
+			const clampedStart = Math.max(0, Math.min(itemCount - 1, nextStart));
+			if (nextStart < 0 || nextStart >= itemCount) {
+				const rootTarget = { type: "root" };
+				return isValidDropTarget(rootTarget) ? rootTarget : null;
+			}
+			const primaryTarget = scanFromIndex(clampedStart, delta, direction);
+			if (primaryTarget) return primaryTarget;
+			const oppositeDirection = direction === "next" ? "previous" : "next";
+			const oppositeTarget = scanFromIndex(clampedStart - delta, -delta, oppositeDirection);
+			if (oppositeTarget) return oppositeTarget;
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		};
+		const tryTarget = (index, position) => {
+			const layoutInfo = getLayoutInfo(index);
+			const virtualTarget = getDropTargetFromPoint({
+				x: layoutInfo.rect.x + 1,
+				y: layoutInfo.rect.y + layoutInfo.rect.height / 2
+			}, itemCount);
+			if (!virtualTarget || virtualTarget.type === "root") return null;
+			const nextTarget = toCollectionDropTarget({
+				...virtualTarget,
+				position
+			});
+			return isValidDropTarget(nextTarget) ? nextTarget : null;
+		};
+		const tryBoundaryTarget = (boundaryDirection) => {
+			const boundaryIndex = boundaryDirection === "next" ? 0 : itemCount - 1;
+			const boundaryOrder = boundaryDirection === "next" ? [
+				"before",
+				"on",
+				"after"
+			] : [
+				"after",
+				"on",
+				"before"
+			];
+			for (const position of boundaryOrder) {
+				const candidate = tryTarget(boundaryIndex, position);
+				if (candidate) return candidate;
+			}
+			return null;
+		};
+		const directTransition = resolveCurrentIndex(target) != null ? tryCurrentItemTransition(target) : null;
+		if (directTransition) return directTransition;
+		if (!target || target.type === "root") {
+			const boundaryTarget = tryBoundaryTarget(direction);
+			if (boundaryTarget) return boundaryTarget;
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		}
+		const currentIndex = getCurrentIndex(target);
+		const nextStart = currentIndex + (direction === "next" ? 1 : -1);
+		if (nextStart < 0 || nextStart >= itemCount) {
+			const rootTarget = { type: "root" };
+			if (isValidDropTarget(rootTarget)) return rootTarget;
+			const wrappedBoundary = tryBoundaryTarget(direction);
+			if (wrappedBoundary) return wrappedBoundary;
+			return null;
+		}
+		return findNavigationTarget(currentIndex, 1);
+	};
+	const getKeyboardNavigationTarget = (target, direction, isValidDropTarget) => {
+		const override = keyboardNavigationOverride();
+		if (override) return override(target, direction, isValidDropTarget);
+		return getBaseKeyboardNavigationTarget(target, direction, isValidDropTarget);
+	};
+	const getKeyboardPageNavigationTarget = (target, direction, isValidDropTarget) => {
+		const itemCount = dropTargetItemCountResolver()?.() ?? 0;
+		if (itemCount <= 0) {
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		}
+		if (!target || target.type === "root") {
+			const startIndex = direction === "next" ? 0 : itemCount - 1;
+			const delta = direction === "next" ? 1 : -1;
+			const boundaryOrder = direction === "next" ? [
+				"before",
+				"on",
+				"after"
+			] : [
+				"after",
+				"on",
+				"before"
+			];
+			for (let index = startIndex; index >= 0 && index < itemCount; index += delta) {
+				const layoutInfo = getLayoutInfo(index);
+				const virtualTarget = getDropTargetFromPoint({
+					x: layoutInfo.rect.x + 1,
+					y: layoutInfo.rect.y + layoutInfo.rect.height / 2
+				}, itemCount);
+				if (!virtualTarget || virtualTarget.type === "root") continue;
+				for (const position of boundaryOrder) {
+					const candidate = toCollectionDropTarget({
+						...virtualTarget,
+						position
+					});
+					if (isValidDropTarget(candidate)) return candidate;
+				}
+			}
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		}
+		const resolver = dropTargetIndexResolver();
+		const resolvedIndex = resolver?.(target.key);
+		const currentIndex = resolvedIndex != null ? resolvedIndex : resolver ? direction === "next" ? -1 : itemCount : typeof target.key === "number" ? target.key : direction === "next" ? -1 : itemCount;
+		const pageSize = Math.max(1, Math.floor(mainViewportSize() / Math.max(1, itemSize())));
+		const delta = direction === "next" ? 1 : -1;
+		const nextStart = currentIndex + delta * pageSize;
+		const clampedStart = Math.max(0, Math.min(itemCount - 1, nextStart));
+		const tryTarget = (index, position) => {
+			const layoutInfo = getLayoutInfo(index);
+			const virtualTarget = getDropTargetFromPoint({
+				x: layoutInfo.rect.x + 1,
+				y: layoutInfo.rect.y + layoutInfo.rect.height / 2
+			}, itemCount);
+			if (!virtualTarget || virtualTarget.type === "root") return null;
+			const nextTarget = toCollectionDropTarget({
+				...virtualTarget,
+				position
+			});
+			return isValidDropTarget(nextTarget) ? nextTarget : null;
+		};
+		const scanFromIndex = (startIndex, step) => {
+			const insertionOrder = step > 0 ? ["before", "after"] : ["after", "before"];
+			for (let index = startIndex; index >= 0 && index < itemCount; index += step) {
+				const onTarget = tryTarget(index, "on");
+				if (onTarget) return onTarget;
+				for (const position of insertionOrder) {
+					const insertionTarget = tryTarget(index, position);
+					if (insertionTarget) return insertionTarget;
+				}
+			}
+			return null;
+		};
+		if (nextStart < 0 || nextStart >= itemCount) {
+			if (direction === "next") {
+				const endBoundaryTarget = tryTarget(itemCount - 1, "after") ?? tryTarget(itemCount - 1, "on") ?? tryTarget(itemCount - 1, "before");
+				if (endBoundaryTarget) return endBoundaryTarget;
+				const backwardFallback = scanFromIndex(itemCount - 1, -1);
+				if (backwardFallback) return backwardFallback;
+			} else {
+				if (currentIndex <= 0) {
+					const rootTarget = { type: "root" };
+					if (isValidDropTarget(rootTarget)) return rootTarget;
+				}
+				const startBoundaryTarget = tryTarget(0, "before") ?? tryTarget(0, "on") ?? tryTarget(0, "after");
+				if (startBoundaryTarget) return startBoundaryTarget;
+				const forwardFallback = scanFromIndex(0, 1);
+				if (forwardFallback) return forwardFallback;
+			}
+			const rootTarget = { type: "root" };
+			return isValidDropTarget(rootTarget) ? rootTarget : null;
+		}
+		const primaryTarget = scanFromIndex(clampedStart, delta);
+		if (primaryTarget) return primaryTarget;
+		const oppositeTarget = scanFromIndex(clampedStart - delta, -delta);
+		if (oppositeTarget) return oppositeTarget;
+		const rootTarget = { type: "root" };
+		return isValidDropTarget(rootTarget) ? rootTarget : null;
+	};
+	const contextValue = createMemo(() => ({
+		layout: resolvedLayout(),
+		layoutOptions: resolvedLayoutOptions(),
+		isVirtualized: true,
+		orientation: orientation(),
+		getVisibleRange,
+		getLayoutInfo,
+		getDropTargetFromPoint,
+		setDropTargetResolver: assignDropTargetResolver,
+		setDropTargetItemCountResolver: assignDropTargetItemCountResolver,
+		setDropTargetIndexResolver: assignDropTargetIndexResolver,
+		setDropOperationResolver: assignDropOperationResolver,
+		setKeyboardNavigationOverride: assignKeyboardNavigationOverride,
+		getBaseKeyboardNavigationTarget
+	}));
+	const collectionRenderer = createMemo(() => ({
+		renderItem: (item) => item,
+		isVirtualized: true,
+		layoutDelegate: resolvedLayout(),
+		dropTargetDelegate: {
+			getDropTargetFromPoint: getCollectionDropTargetFromPoint,
+			getDropOperation: getCollectionDropOperation,
+			getKeyboardNavigationTarget,
+			getKeyboardPageNavigationTarget
+		},
+		renderDropIndicator: local.renderDropIndicator
+	}));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	const updateViewportSize = () => {
+		if (!containerRef) return;
+		const nextHeight = containerRef.clientHeight;
+		const nextWidth = containerRef.clientWidth;
+		if (nextHeight !== measuredViewportSize()) setMeasuredViewportSize(nextHeight);
+		if (nextWidth !== measuredViewportWidth()) setMeasuredViewportWidth(nextWidth);
+	};
+	const updateWindowViewport = () => {
+		if (typeof window === "undefined") return;
+		const next = window.innerHeight;
+		if (next !== windowViewportSize()) setWindowViewportSize(next);
+	};
+	const updateViewportOffset = () => {
+		if (!containerRef || !allowsWindowScrolling()) return;
+		const rect = containerRef.getBoundingClientRect();
+		const next = rect.y < 0 ? -rect.y : 0;
+		if (next !== viewportOffset()) setViewportOffset(next);
+	};
+	let scrollFrame;
+	let scrollEndTimeout;
+	onCleanup(() => {
+		if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
+		if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
+	});
+	onMount(() => {
+		updateViewportSize();
+		updateWindowViewport();
+		updateViewportOffset();
+		const handleResize = () => {
+			updateViewportSize();
+			updateWindowViewport();
+			updateViewportOffset();
+		};
+		window.addEventListener("resize", handleResize);
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateViewportSize()) : null;
+		if (containerRef && resizeObserver) resizeObserver.observe(containerRef);
+		const handleDocumentScroll = (e) => {
+			if (!containerRef) return;
+			const target = e.target;
+			const isContainer = target === containerRef;
+			const isAncestor = target === document || target === window || target instanceof Node && target.contains(containerRef);
+			if (!isContainer && !isAncestor) return;
+			if (!isContainer && !allowsWindowScrolling()) return;
+			if (!isScrolling()) setIsScrolling(true);
+			if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
+			scrollEndTimeout = setTimeout(() => {
+				scrollEndTimeout = void 0;
+				setIsScrolling(false);
+			}, 300);
+			if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
+			scrollFrame = requestAnimationFrame(() => {
+				scrollFrame = void 0;
+				if (isContainer) {
+					const next = Math.max(0, containerRef.scrollTop);
+					if (next !== scrollOffset()) setScrollOffset(next);
+					const nextX = Math.max(0, containerRef.scrollLeft);
+					if (nextX !== scrollOffsetX()) setScrollOffsetX(nextX);
+				} else updateViewportOffset();
+				updateViewportSize();
+			});
+		};
+		document.addEventListener("scroll", handleDocumentScroll, true);
+		onCleanup(() => {
+			window.removeEventListener("resize", handleResize);
+			resizeObserver?.disconnect();
+			document.removeEventListener("scroll", handleDocumentScroll, true);
+		});
+	});
+	return createComponent(CollectionRendererContext.Provider, {
+		get value() {
+			return collectionRenderer();
+		},
+		get children() {
+			return createComponent(VirtualizerContext.Provider, {
+				get value() {
+					return contextValue();
+				},
+				get children() {
+					var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild;
+					use((el) => {
+						containerRef = el;
+					}, _el$);
+					spread(_el$, mergeProps(filteredDomProps, {
+						get ["class"]() {
+							return local.class;
+						},
+						get style() {
+							return local.style;
+						},
+						"data-virtualizer": ""
+					}), false, true);
+					insert(_el$2, () => local.children);
+					effect((_$p) => setStyleProperty(_el$2, "pointer-events", isScrolling() ? "none" : void 0));
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { ListLayout as a, GridLayout as i, VirtualizerContext as n, TableLayout as o, useVirtualizerContext as r, WaterfallLayout as s, Virtualizer as t };
+
+//# sourceMappingURL=Virtualizer2.js.map