@dreamstack-us/section-flow 0.0.1

package/dist/index.cjs

@@ -0,0 +1,2281 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const react = __toESM(require("react"));
+const react_native = __toESM(require("react-native"));
+const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
+
+//#region src/constants.ts
+/**
+* Default configuration values for SectionFlow
+*/
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+const DEFAULT_ESTIMATED_HEADER_SIZE = 40;
+const DEFAULT_ESTIMATED_FOOTER_SIZE = 0;
+const DEFAULT_DRAW_DISTANCE = 250;
+const DEFAULT_MAX_POOL_SIZE = 10;
+const DEFAULT_ITEM_TYPE = "default";
+const SECTION_HEADER_TYPE = "__section_header__";
+const SECTION_FOOTER_TYPE = "__section_footer__";
+const DEFAULT_VIEWABILITY_CONFIG = {
+	minimumViewTime: 250,
+	viewAreaCoveragePercentThreshold: 0,
+	itemVisiblePercentThreshold: 50,
+	waitForInteraction: false
+};
+const SCROLL_VELOCITY_THRESHOLD = 2;
+
+//#endregion
+//#region src/core/LayoutCache.ts
+var LayoutCacheImpl = class {
+	cache = new Map();
+	typeStats = new Map();
+	get(key) {
+		return this.cache.get(key);
+	}
+	set(key, layout) {
+		this.cache.set(key, layout);
+	}
+	has(key) {
+		return this.cache.has(key);
+	}
+	delete(key) {
+		this.cache.delete(key);
+	}
+	clear() {
+		this.cache.clear();
+		this.typeStats.clear();
+	}
+	/**
+	* Invalidate all cached layouts from a given flat index onwards.
+	* Used when items are inserted/removed and positions need recalculation.
+	*/
+	invalidateFrom(flatIndex, keyToIndexMap) {
+		for (const [key, index] of keyToIndexMap) if (index >= flatIndex) this.cache.delete(key);
+	}
+	/**
+	* Get the average measured size for items of a given type.
+	* Used for predicting unmeasured item sizes.
+	*/
+	getAverageSize(itemType) {
+		const stats = this.typeStats.get(itemType);
+		if (!stats || stats.count === 0) return void 0;
+		return stats.totalSize / stats.count;
+	}
+	/**
+	* Record a measurement for computing type averages.
+	*/
+	recordMeasurement(itemType, size) {
+		let stats = this.typeStats.get(itemType);
+		if (!stats) {
+			stats = {
+				totalSize: 0,
+				count: 0
+			};
+			this.typeStats.set(itemType, stats);
+		}
+		stats.totalSize += size;
+		stats.count += 1;
+	}
+	get size() {
+		return this.cache.size;
+	}
+};
+/**
+* Factory function to create a LayoutCache instance.
+*/
+function createLayoutCache() {
+	return new LayoutCacheImpl();
+}
+
+//#endregion
+//#region src/core/LinearLayoutPositioner.ts
+/**
+* LinearLayoutPositioner implements the LayoutPositioner interface for
+* standard vertical or horizontal list layouts.
+*
+* It computes absolute positions for each item based on:
+* 1. Measured sizes from LayoutCache (when available)
+* 2. Estimated sizes (when not yet measured)
+* 3. Type-specific size predictions
+*/
+var LinearLayoutPositioner = class {
+	flattenedData = [];
+	computedLayouts = new Map();
+	totalContentSize = {
+		width: 0,
+		height: 0
+	};
+	layoutsValid = false;
+	constructor(layoutCache, getItemType, options = {}) {
+		this.layoutCache = layoutCache;
+		this.getItemType = getItemType;
+		this.horizontal = options.horizontal ?? false;
+		this.estimatedItemSize = options.estimatedItemSize ?? DEFAULT_ESTIMATED_ITEM_SIZE;
+		this.estimatedHeaderSize = options.estimatedHeaderSize ?? DEFAULT_ESTIMATED_HEADER_SIZE;
+		this.estimatedFooterSize = options.estimatedFooterSize ?? DEFAULT_ESTIMATED_FOOTER_SIZE;
+		this.containerWidth = options.containerWidth ?? 0;
+		this.containerHeight = options.containerHeight ?? 0;
+	}
+	/**
+	* Update the flattened data and invalidate layouts.
+	*/
+	setData(flattenedData) {
+		this.flattenedData = flattenedData;
+		this.invalidateAll();
+	}
+	/**
+	* Update container dimensions.
+	*/
+	setContainerSize(width, height) {
+		if (this.containerWidth !== width || this.containerHeight !== height) {
+			this.containerWidth = width;
+			this.containerHeight = height;
+			this.invalidateAll();
+		}
+	}
+	/**
+	* Get the estimated size for an item based on its type.
+	*/
+	getEstimatedSize(flatIndex) {
+		const item = this.flattenedData[flatIndex];
+		if (!item) return this.estimatedItemSize;
+		const itemType = this.getItemType(flatIndex);
+		const avgSize = this.layoutCache.getAverageSize(itemType);
+		if (avgSize !== void 0) return avgSize;
+		if (item.type === "section-header") return this.estimatedHeaderSize;
+		if (item.type === "section-footer") return this.estimatedFooterSize;
+		return this.estimatedItemSize;
+	}
+	/**
+	* Get the actual or estimated size for an item.
+	*/
+	getItemSize(flatIndex) {
+		const item = this.flattenedData[flatIndex];
+		if (!item) return this.estimatedItemSize;
+		const cached = this.layoutCache.get(item.key);
+		if (cached) return this.horizontal ? cached.width : cached.height;
+		return this.getEstimatedSize(flatIndex);
+	}
+	/**
+	* Compute layouts for all items if not already computed.
+	*/
+	ensureLayoutsComputed() {
+		if (this.layoutsValid) return;
+		this.computedLayouts.clear();
+		let offset = 0;
+		const crossAxisSize = this.horizontal ? this.containerHeight : this.containerWidth;
+		for (let i = 0; i < this.flattenedData.length; i++) {
+			const size = this.getItemSize(i);
+			const layout = this.horizontal ? {
+				x: offset,
+				y: 0,
+				width: size,
+				height: crossAxisSize
+			} : {
+				x: 0,
+				y: offset,
+				width: crossAxisSize,
+				height: size
+			};
+			this.computedLayouts.set(i, layout);
+			offset += size;
+		}
+		this.totalContentSize = this.horizontal ? {
+			width: offset,
+			height: crossAxisSize
+		} : {
+			width: crossAxisSize,
+			height: offset
+		};
+		this.layoutsValid = true;
+	}
+	/**
+	* Get the layout for a specific index.
+	*/
+	getLayoutForIndex(index) {
+		this.ensureLayoutsComputed();
+		return this.computedLayouts.get(index) ?? {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+	}
+	/**
+	* Get the total content size.
+	*/
+	getContentSize() {
+		this.ensureLayoutsComputed();
+		return this.totalContentSize;
+	}
+	/**
+	* Get the range of visible indices for the given scroll position.
+	* Uses binary search for efficiency with large lists.
+	*/
+	getVisibleRange(scrollOffset, viewportSize, overscan) {
+		this.ensureLayoutsComputed();
+		if (this.flattenedData.length === 0) return {
+			startIndex: 0,
+			endIndex: -1
+		};
+		const startOffset = Math.max(0, scrollOffset - overscan);
+		const endOffset = scrollOffset + viewportSize + overscan;
+		const startIndex = this.binarySearchStart(startOffset);
+		const endIndex = this.binarySearchEnd(endOffset);
+		return {
+			startIndex: Math.max(0, startIndex),
+			endIndex: Math.min(this.flattenedData.length - 1, endIndex)
+		};
+	}
+	/**
+	* Binary search to find first item that ends after the given offset.
+	*/
+	binarySearchStart(offset) {
+		let low = 0;
+		let high = this.flattenedData.length - 1;
+		while (low < high) {
+			const mid = Math.floor((low + high) / 2);
+			const layout = this.computedLayouts.get(mid);
+			if (!layout) {
+				low = mid + 1;
+				continue;
+			}
+			const itemEnd = this.horizontal ? layout.x + layout.width : layout.y + layout.height;
+			if (itemEnd <= offset) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	}
+	/**
+	* Binary search to find last item that starts before the given offset.
+	*/
+	binarySearchEnd(offset) {
+		let low = 0;
+		let high = this.flattenedData.length - 1;
+		while (low < high) {
+			const mid = Math.ceil((low + high) / 2);
+			const layout = this.computedLayouts.get(mid);
+			if (!layout) {
+				high = mid - 1;
+				continue;
+			}
+			const itemStart = this.horizontal ? layout.x : layout.y;
+			if (itemStart >= offset) high = mid - 1;
+			else low = mid;
+		}
+		return high;
+	}
+	/**
+	* Update the layout for a specific index after measurement.
+	*/
+	updateItemLayout(index, layout) {
+		const item = this.flattenedData[index];
+		if (!item) return;
+		const itemType = this.getItemType(index);
+		const size = this.horizontal ? layout.width : layout.height;
+		this.layoutCache.recordMeasurement(itemType, size);
+		this.layoutCache.set(item.key, layout);
+		this.invalidateFrom(index);
+	}
+	/**
+	* Invalidate layouts from a given index.
+	*/
+	invalidateFrom(index) {
+		for (let i = index; i < this.flattenedData.length; i++) this.computedLayouts.delete(i);
+		this.layoutsValid = false;
+	}
+	/**
+	* Invalidate all layouts.
+	*/
+	invalidateAll() {
+		this.computedLayouts.clear();
+		this.layoutsValid = false;
+	}
+	/**
+	* Get the index of the item at or just before the given offset.
+	*/
+	getIndexForOffset(offset) {
+		this.ensureLayoutsComputed();
+		if (this.flattenedData.length === 0) return 0;
+		return this.binarySearchStart(offset);
+	}
+	/**
+	* Get the total number of items.
+	*/
+	getTotalItemCount() {
+		return this.flattenedData.length;
+	}
+};
+/**
+* Factory function to create a LinearLayoutPositioner.
+*/
+function createLayoutPositioner(layoutCache, getItemType, options) {
+	return new LinearLayoutPositioner(layoutCache, getItemType, options);
+}
+
+//#endregion
+//#region src/core/SectionLayoutManager.ts
+var SectionLayoutManagerImpl = class {
+	sections = [];
+	flattenedData = [];
+	collapsedSections = new Set();
+	sectionBoundaries = new Map();
+	flatIndexToSection = new Map();
+	constructor(layoutCache, options = {}) {
+		this.layoutCache = layoutCache;
+		this.horizontal = options.horizontal ?? false;
+		this.hasSectionFooters = options.hasSectionFooters ?? false;
+		this.layoutPositioner = new LinearLayoutPositioner(layoutCache, (flatIndex) => this.getItemTypeForIndex(flatIndex), {
+			horizontal: this.horizontal,
+			estimatedItemSize: options.estimatedItemSize,
+			estimatedHeaderSize: options.estimatedHeaderSize,
+			estimatedFooterSize: options.estimatedFooterSize
+		});
+	}
+	/**
+	* Get the item type for a flat index (used by layout positioner).
+	*/
+	getItemTypeForIndex(flatIndex) {
+		const item = this.flattenedData[flatIndex];
+		if (!item) return "default";
+		if (item.type === "section-header") return "__section_header__";
+		if (item.type === "section-footer") return "__section_footer__";
+		return "default";
+	}
+	/**
+	* Update sections and compute flattened data.
+	*/
+	updateData(sections, collapsedSections) {
+		this.sections = sections;
+		this.collapsedSections = collapsedSections;
+		this.flattenedData = [];
+		this.sectionBoundaries.clear();
+		this.flatIndexToSection.clear();
+		let flatIndex = 0;
+		for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
+			const section = sections[sectionIndex];
+			const isCollapsed = collapsedSections.has(section.key);
+			const boundary = {
+				sectionIndex,
+				sectionKey: section.key,
+				headerFlatIndex: flatIndex,
+				firstItemFlatIndex: -1,
+				lastItemFlatIndex: -1,
+				footerFlatIndex: null,
+				itemCount: 0
+			};
+			this.flattenedData.push({
+				type: "section-header",
+				key: `header-${section.key}`,
+				sectionKey: section.key,
+				sectionIndex,
+				itemIndex: -1,
+				item: null,
+				section
+			});
+			this.flatIndexToSection.set(flatIndex, boundary);
+			flatIndex++;
+			if (!isCollapsed) {
+				boundary.firstItemFlatIndex = flatIndex;
+				for (let itemIndex = 0; itemIndex < section.data.length; itemIndex++) {
+					this.flattenedData.push({
+						type: "item",
+						key: `item-${section.key}-${itemIndex}`,
+						sectionKey: section.key,
+						sectionIndex,
+						itemIndex,
+						item: section.data[itemIndex],
+						section
+					});
+					this.flatIndexToSection.set(flatIndex, boundary);
+					flatIndex++;
+				}
+				boundary.lastItemFlatIndex = flatIndex - 1;
+				boundary.itemCount = section.data.length;
+				if (this.hasSectionFooters) {
+					boundary.footerFlatIndex = flatIndex;
+					this.flattenedData.push({
+						type: "section-footer",
+						key: `footer-${section.key}`,
+						sectionKey: section.key,
+						sectionIndex,
+						itemIndex: -1,
+						item: null,
+						section
+					});
+					this.flatIndexToSection.set(flatIndex, boundary);
+					flatIndex++;
+				}
+			}
+			this.sectionBoundaries.set(section.key, boundary);
+		}
+		this.layoutPositioner.setData(this.flattenedData);
+		return this.flattenedData;
+	}
+	/**
+	* Get the flat index for a section/item coordinate.
+	*/
+	getFlatIndex(sectionIndex, itemIndex) {
+		const section = this.sections[sectionIndex];
+		if (!section) return -1;
+		const boundary = this.sectionBoundaries.get(section.key);
+		if (!boundary) return -1;
+		if (itemIndex === -1) return boundary.headerFlatIndex;
+		if (this.collapsedSections.has(section.key)) return -1;
+		if (itemIndex < 0 || itemIndex >= section.data.length) return -1;
+		return boundary.firstItemFlatIndex + itemIndex;
+	}
+	/**
+	* Get section/item coordinates from a flat index.
+	*/
+	getSectionItemIndex(flatIndex) {
+		const item = this.flattenedData[flatIndex];
+		if (!item) return {
+			sectionIndex: -1,
+			itemIndex: -1,
+			isHeader: false,
+			isFooter: false
+		};
+		return {
+			sectionIndex: item.sectionIndex,
+			itemIndex: item.itemIndex,
+			isHeader: item.type === "section-header",
+			isFooter: item.type === "section-footer"
+		};
+	}
+	/**
+	* Get layout info for a section.
+	*/
+	getSectionLayout(sectionKey) {
+		const boundary = this.sectionBoundaries.get(sectionKey);
+		if (!boundary) return null;
+		const headerLayout = this.layoutPositioner.getLayoutForIndex(boundary.headerFlatIndex);
+		let footerLayout = null;
+		if (boundary.footerFlatIndex !== null) footerLayout = this.layoutPositioner.getLayoutForIndex(boundary.footerFlatIndex);
+		const isCollapsed = this.collapsedSections.has(sectionKey);
+		let itemsStartOffset = this.horizontal ? headerLayout.x + headerLayout.width : headerLayout.y + headerLayout.height;
+		let itemsEndOffset = itemsStartOffset;
+		if (!isCollapsed && boundary.lastItemFlatIndex >= boundary.firstItemFlatIndex) {
+			const lastItemLayout = this.layoutPositioner.getLayoutForIndex(boundary.lastItemFlatIndex);
+			itemsEndOffset = this.horizontal ? lastItemLayout.x + lastItemLayout.width : lastItemLayout.y + lastItemLayout.height;
+		}
+		return {
+			sectionKey,
+			sectionIndex: boundary.sectionIndex,
+			headerLayout,
+			footerLayout,
+			itemsStartOffset,
+			itemsEndOffset,
+			itemCount: boundary.itemCount,
+			isCollapsed
+		};
+	}
+	/**
+	* Get the section containing a given scroll offset.
+	*/
+	getSectionAtOffset(offset) {
+		for (const [sectionKey] of this.sectionBoundaries) {
+			const layout = this.getSectionLayout(sectionKey);
+			if (!layout) continue;
+			const sectionStart = this.horizontal ? layout.headerLayout.x : layout.headerLayout.y;
+			const sectionEnd = layout.itemsEndOffset;
+			if (offset >= sectionStart && offset < sectionEnd) return layout;
+		}
+		return null;
+	}
+	/**
+	* Get layout info for all sections.
+	*/
+	getAllSectionLayouts() {
+		const layouts = [];
+		for (const [sectionKey] of this.sectionBoundaries) {
+			const layout = this.getSectionLayout(sectionKey);
+			if (layout) layouts.push(layout);
+		}
+		return layouts;
+	}
+	/**
+	* Set a section's collapsed state.
+	*/
+	setSectionCollapsed(sectionKey, collapsed) {
+		if (collapsed) this.collapsedSections.add(sectionKey);
+		else this.collapsedSections.delete(sectionKey);
+		this.updateData(this.sections, this.collapsedSections);
+	}
+	/**
+	* Check if a section is collapsed.
+	*/
+	isSectionCollapsed(sectionKey) {
+		return this.collapsedSections.has(sectionKey);
+	}
+	/**
+	* Get all collapsed sections.
+	*/
+	getCollapsedSections() {
+		return new Set(this.collapsedSections);
+	}
+	/**
+	* Get the layout positioner for direct layout operations.
+	*/
+	getLayoutPositioner() {
+		return this.layoutPositioner;
+	}
+};
+/**
+* Factory function to create a SectionLayoutManager.
+*/
+function createSectionLayoutManager(layoutCache, options) {
+	return new SectionLayoutManagerImpl(layoutCache, options);
+}
+
+//#endregion
+//#region src/hooks/useScrollHandler.ts
+/**
+* Hook for tracking scroll state with velocity and direction detection.
+* Used for adaptive buffering and scroll optimization.
+*/
+function useScrollHandler(options = {}) {
+	const { horizontal = false, onScrollStateChange, onEndReached, onEndReachedThreshold = .5 } = options;
+	const scrollState = (0, react.useRef)({
+		offset: 0,
+		velocity: 0,
+		direction: "idle",
+		isScrolling: false,
+		contentSize: 0,
+		viewportSize: 0
+	});
+	const lastOffset = (0, react.useRef)(0);
+	const lastTimestamp = (0, react.useRef)(Date.now());
+	const endReachedCalled = (0, react.useRef)(false);
+	/**
+	* Calculate velocity from consecutive scroll events.
+	*/
+	const calculateVelocity = (0, react.useCallback)((newOffset) => {
+		const now = Date.now();
+		const timeDelta = now - lastTimestamp.current;
+		if (timeDelta === 0) return scrollState.current.velocity;
+		const offsetDelta = newOffset - lastOffset.current;
+		const velocity = offsetDelta / timeDelta;
+		lastOffset.current = newOffset;
+		lastTimestamp.current = now;
+		return velocity;
+	}, []);
+	/**
+	* Determine scroll direction from velocity.
+	*/
+	const getDirection = (0, react.useCallback)((velocity) => {
+		if (Math.abs(velocity) < .1) return "idle";
+		return velocity > 0 ? "forward" : "backward";
+	}, []);
+	/**
+	* Check if we've reached the end and should trigger callback.
+	*/
+	const checkEndReached = (0, react.useCallback)(() => {
+		if (!onEndReached) return;
+		const { offset, contentSize, viewportSize } = scrollState.current;
+		const distanceFromEnd = contentSize - offset - viewportSize;
+		const threshold = viewportSize * onEndReachedThreshold;
+		if (distanceFromEnd <= threshold && !endReachedCalled.current) {
+			endReachedCalled.current = true;
+			onEndReached(distanceFromEnd);
+		} else if (distanceFromEnd > threshold) endReachedCalled.current = false;
+	}, [onEndReached, onEndReachedThreshold]);
+	/**
+	* Update scroll state and notify listeners.
+	*/
+	const updateScrollState = (0, react.useCallback)((event, isScrolling) => {
+		const { contentOffset, contentSize, layoutMeasurement } = event;
+		const offset = horizontal ? contentOffset.x : contentOffset.y;
+		const size = horizontal ? contentSize.width : contentSize.height;
+		const viewport = horizontal ? layoutMeasurement.width : layoutMeasurement.height;
+		const velocity = calculateVelocity(offset);
+		const direction = getDirection(velocity);
+		scrollState.current = {
+			offset,
+			velocity,
+			direction,
+			isScrolling,
+			contentSize: size,
+			viewportSize: viewport
+		};
+		onScrollStateChange?.(scrollState.current);
+		checkEndReached();
+	}, [
+		horizontal,
+		calculateVelocity,
+		getDirection,
+		onScrollStateChange,
+		checkEndReached
+	]);
+	const onScroll = (0, react.useCallback)((event) => {
+		updateScrollState(event.nativeEvent, scrollState.current.isScrolling);
+	}, [updateScrollState]);
+	const onScrollBeginDrag = (0, react.useCallback)((event) => {
+		scrollState.current.isScrolling = true;
+		updateScrollState(event.nativeEvent, true);
+	}, [updateScrollState]);
+	const onScrollEndDrag = (0, react.useCallback)((event) => {
+		updateScrollState(event.nativeEvent, scrollState.current.isScrolling);
+	}, [updateScrollState]);
+	const onMomentumScrollBegin = (0, react.useCallback)((event) => {
+		scrollState.current.isScrolling = true;
+		updateScrollState(event.nativeEvent, true);
+	}, [updateScrollState]);
+	const onMomentumScrollEnd = (0, react.useCallback)((event) => {
+		scrollState.current.isScrolling = false;
+		scrollState.current.direction = "idle";
+		scrollState.current.velocity = 0;
+		updateScrollState(event.nativeEvent, false);
+	}, [updateScrollState]);
+	const onContentSizeChange = (0, react.useCallback)((width, height) => {
+		scrollState.current.contentSize = horizontal ? width : height;
+	}, [horizontal]);
+	return {
+		scrollState,
+		onScroll,
+		onScrollBeginDrag,
+		onScrollEndDrag,
+		onMomentumScrollBegin,
+		onMomentumScrollEnd,
+		onContentSizeChange
+	};
+}
+/**
+* Hook to calculate adaptive draw distance based on scroll velocity.
+* Increases buffer for fast scrolling to reduce blank areas.
+*/
+function useAdaptiveDrawDistance(baseDistance, scrollVelocity) {
+	return (0, react.useMemo)(() => {
+		const absVelocity = Math.abs(scrollVelocity);
+		if (absVelocity < SCROLL_VELOCITY_THRESHOLD) return baseDistance;
+		const velocityMultiplier = Math.min(3, 1 + absVelocity / SCROLL_VELOCITY_THRESHOLD);
+		return Math.round(baseDistance * velocityMultiplier);
+	}, [baseDistance, scrollVelocity]);
+}
+
+//#endregion
+//#region src/core/CellRecycler.ts
+/**
+* CellRecycler manages pools of recycled cell instances per item type.
+* This is the core of FlashList-style performance - reusing view components
+* instead of destroying and recreating them.
+*/
+var CellRecyclerImpl = class {
+	pools = new Map();
+	inUse = new Map();
+	cellCounter = 0;
+	constructor(defaultMaxPoolSize = DEFAULT_MAX_POOL_SIZE) {
+		this.defaultMaxPoolSize = defaultMaxPoolSize;
+	}
+	/**
+	* Acquire a cell from the pool for the given type.
+	* Returns null if no recycled cells are available (caller should create new).
+	*/
+	acquireCell(type, flatIndex) {
+		const pool = this.pools.get(type);
+		if (!pool || pool.cells.length === 0) return null;
+		const cell = pool.cells.pop();
+		cell.flatIndex = flatIndex;
+		let inUseSet = this.inUse.get(type);
+		if (!inUseSet) {
+			inUseSet = new Set();
+			this.inUse.set(type, inUseSet);
+		}
+		inUseSet.add(cell.key);
+		return cell;
+	}
+	/**
+	* Release a cell back to its pool for recycling.
+	*/
+	releaseCell(cell) {
+		const { itemType: type, key } = cell;
+		const inUseSet = this.inUse.get(type);
+		if (inUseSet) inUseSet.delete(key);
+		let pool = this.pools.get(type);
+		if (!pool) {
+			pool = {
+				type,
+				cells: [],
+				maxSize: this.defaultMaxPoolSize
+			};
+			this.pools.set(type, pool);
+		}
+		if (pool.cells.length < pool.maxSize) pool.cells.push(cell);
+	}
+	/**
+	* Clear all recycled cells from all pools.
+	* Useful when data changes significantly.
+	*/
+	clearPools() {
+		this.pools.clear();
+		this.inUse.clear();
+	}
+	/**
+	* Set the maximum pool size for a specific item type.
+	*/
+	setMaxPoolSize(type, size) {
+		let pool = this.pools.get(type);
+		if (!pool) {
+			pool = {
+				type,
+				cells: [],
+				maxSize: size
+			};
+			this.pools.set(type, pool);
+		} else {
+			pool.maxSize = size;
+			while (pool.cells.length > size) pool.cells.pop();
+		}
+	}
+	/**
+	* Get statistics about pool usage for debugging.
+	*/
+	getPoolStats() {
+		const stats = new Map();
+		const allTypes = new Set([...this.pools.keys(), ...this.inUse.keys()]);
+		for (const type of allTypes) {
+			const pool = this.pools.get(type);
+			const inUseSet = this.inUse.get(type);
+			stats.set(type, {
+				available: pool?.cells.length ?? 0,
+				inUse: inUseSet?.size ?? 0
+			});
+		}
+		return stats;
+	}
+	/**
+	* Generate a unique key for a new cell.
+	*/
+	generateCellKey(type) {
+		return `${type}-${++this.cellCounter}`;
+	}
+	/**
+	* Create a new cell (when pool is empty).
+	*/
+	createCell(type, flatIndex) {
+		const key = this.generateCellKey(type);
+		const cell = {
+			key,
+			itemType: type,
+			flatIndex
+		};
+		let inUseSet = this.inUse.get(type);
+		if (!inUseSet) {
+			inUseSet = new Set();
+			this.inUse.set(type, inUseSet);
+		}
+		inUseSet.add(key);
+		return cell;
+	}
+	/**
+	* Get or create a cell - the main method used during rendering.
+	* First tries to acquire from pool, then creates new if needed.
+	*/
+	getCell(type, flatIndex) {
+		const recycled = this.acquireCell(type, flatIndex);
+		if (recycled) return recycled;
+		return this.createCell(type, flatIndex);
+	}
+};
+/**
+* Factory function to create a CellRecycler instance.
+*/
+function createCellRecycler(defaultMaxPoolSize = DEFAULT_MAX_POOL_SIZE) {
+	return new CellRecyclerImpl(defaultMaxPoolSize);
+}
+
+//#endregion
+//#region src/hooks/useRecycler.ts
+/**
+* Hook for managing cell recycling state.
+* Provides methods to acquire and release cells based on visibility.
+*/
+function useRecycler(options) {
+	const { flattenedData, getItemType, maxPoolSize } = options;
+	const recycler = (0, react.useRef)(null);
+	if (!recycler.current) recycler.current = createCellRecycler(maxPoolSize);
+	const activeCells = (0, react.useRef)(new Map());
+	const visibleRange = (0, react.useRef)({
+		start: 0,
+		end: -1
+	});
+	/**
+	* Get the item type for a flat index.
+	*/
+	const getTypeForIndex = (0, react.useCallback)((flatIndex) => {
+		const item = flattenedData[flatIndex];
+		if (!item) return DEFAULT_ITEM_TYPE;
+		if (item.type === "section-header") return SECTION_HEADER_TYPE;
+		if (item.type === "section-footer") return SECTION_FOOTER_TYPE;
+		if (getItemType && item.item !== null) return getItemType(item.item, item.itemIndex);
+		return DEFAULT_ITEM_TYPE;
+	}, [flattenedData, getItemType]);
+	/**
+	* Get or create a cell for a flat index.
+	*/
+	const getCell = (0, react.useCallback)((flatIndex) => {
+		const existing = activeCells.current.get(flatIndex);
+		if (existing) return existing;
+		const type = getTypeForIndex(flatIndex);
+		const cell = recycler.current.getCell(type, flatIndex);
+		activeCells.current.set(flatIndex, cell);
+		return cell;
+	}, [getTypeForIndex]);
+	/**
+	* Release a cell back to the pool.
+	*/
+	const releaseCell = (0, react.useCallback)((cell) => {
+		activeCells.current.delete(cell.flatIndex);
+		recycler.current.releaseCell(cell);
+	}, []);
+	/**
+	* Update the visible range and recycle cells outside it.
+	*/
+	const updateVisibleRange = (0, react.useCallback)((startIndex, endIndex) => {
+		const prevStart = visibleRange.current.start;
+		const prevEnd = visibleRange.current.end;
+		visibleRange.current = {
+			start: startIndex,
+			end: endIndex
+		};
+		for (const [flatIndex, cell] of activeCells.current) if (flatIndex < startIndex || flatIndex > endIndex) releaseCell(cell);
+	}, [releaseCell]);
+	/**
+	* Clear all pools (e.g., on data change).
+	*/
+	const clearPools = (0, react.useCallback)(() => {
+		activeCells.current.clear();
+		recycler.current.clearPools();
+	}, []);
+	/**
+	* Get pool statistics for debugging.
+	*/
+	const getPoolStats = (0, react.useCallback)(() => {
+		return recycler.current.getPoolStats();
+	}, []);
+	const dataLength = flattenedData.length;
+	(0, react.useEffect)(() => {
+		if (activeCells.current.size > dataLength * 2) clearPools();
+	}, [dataLength, clearPools]);
+	return {
+		getCell,
+		releaseCell,
+		updateVisibleRange,
+		clearPools,
+		getPoolStats
+	};
+}
+/**
+* Hook to determine which item type to use for rendering.
+* Returns a stable function that maps flat indices to type strings.
+*/
+function useItemTypeResolver(flattenedData, getItemType) {
+	return (0, react.useCallback)((flatIndex) => {
+		const item = flattenedData[flatIndex];
+		if (!item) return DEFAULT_ITEM_TYPE;
+		if (item.type === "section-header") return SECTION_HEADER_TYPE;
+		if (item.type === "section-footer") return SECTION_FOOTER_TYPE;
+		if (getItemType && item.item !== null) return getItemType(item.item, item.itemIndex);
+		return DEFAULT_ITEM_TYPE;
+	}, [flattenedData, getItemType]);
+}
+
+//#endregion
+//#region src/hooks/useStickyHeader.ts
+/**
+* Hook for computing sticky header positioning.
+* Handles the "pushing" effect when the next section header approaches.
+*/
+function useStickyHeader(options) {
+	const { sectionLayouts, scrollOffset, viewportHeight, horizontal = false, enabled = true } = options;
+	return (0, react.useMemo)(() => {
+		if (!enabled || sectionLayouts.length === 0) return {
+			sectionKey: null,
+			sectionIndex: -1,
+			translateY: 0,
+			isSticky: false,
+			headerLayout: null
+		};
+		let currentSection = null;
+		let nextSection = null;
+		for (let i = 0; i < sectionLayouts.length; i++) {
+			const section = sectionLayouts[i];
+			const headerStart = horizontal ? section.headerLayout.x : section.headerLayout.y;
+			if (headerStart <= scrollOffset) {
+				currentSection = section;
+				nextSection = sectionLayouts[i + 1] ?? null;
+			} else break;
+		}
+		if (!currentSection) return {
+			sectionKey: null,
+			sectionIndex: -1,
+			translateY: 0,
+			isSticky: false,
+			headerLayout: null
+		};
+		const headerSize = horizontal ? currentSection.headerLayout.width : currentSection.headerLayout.height;
+		let translateY = 0;
+		if (nextSection) {
+			const nextHeaderStart = horizontal ? nextSection.headerLayout.x : nextSection.headerLayout.y;
+			const pushPoint = nextHeaderStart - headerSize;
+			if (scrollOffset > pushPoint) translateY = pushPoint - scrollOffset;
+		}
+		return {
+			sectionKey: currentSection.sectionKey,
+			sectionIndex: currentSection.sectionIndex,
+			translateY,
+			isSticky: true,
+			headerLayout: currentSection.headerLayout
+		};
+	}, [
+		sectionLayouts,
+		scrollOffset,
+		viewportHeight,
+		horizontal,
+		enabled
+	]);
+}
+/**
+* Hook for tracking multiple sticky headers (e.g., for multi-level sections).
+*/
+function useMultipleStickyHeaders(sectionLayouts, scrollOffset, levels = 1) {
+	return (0, react.useMemo)(() => {
+		const states = [];
+		if (sectionLayouts.length === 0) return states;
+		let currentSection = null;
+		let nextSection = null;
+		for (let i = 0; i < sectionLayouts.length; i++) {
+			const section = sectionLayouts[i];
+			const headerStart = section.headerLayout.y;
+			if (headerStart <= scrollOffset) {
+				currentSection = section;
+				nextSection = sectionLayouts[i + 1] ?? null;
+			} else break;
+		}
+		if (currentSection) {
+			const headerSize = currentSection.headerLayout.height;
+			let translateY = 0;
+			if (nextSection) {
+				const nextHeaderStart = nextSection.headerLayout.y;
+				const pushPoint = nextHeaderStart - headerSize;
+				if (scrollOffset > pushPoint) translateY = pushPoint - scrollOffset;
+			}
+			states.push({
+				sectionKey: currentSection.sectionKey,
+				sectionIndex: currentSection.sectionIndex,
+				translateY,
+				isSticky: true,
+				headerLayout: currentSection.headerLayout
+			});
+		}
+		return states;
+	}, [
+		sectionLayouts,
+		scrollOffset,
+		levels
+	]);
+}
+/**
+* Hook for determining sticky header opacity during transitions.
+*/
+function useStickyHeaderOpacity(stickyState, fadeDistance = 20) {
+	return (0, react.useMemo)(() => {
+		if (!stickyState.isSticky) return 0;
+		if (stickyState.translateY >= 0) return 1;
+		const fadeProgress = Math.abs(stickyState.translateY) / fadeDistance;
+		return Math.max(0, 1 - fadeProgress);
+	}, [
+		stickyState.isSticky,
+		stickyState.translateY,
+		fadeDistance
+	]);
+}
+
+//#endregion
+//#region src/core/ViewabilityTracker.ts
+var ViewabilityTrackerImpl = class {
+	flattenedData = [];
+	scrollOffset = 0;
+	viewportSize = 0;
+	trackedItems = new Map();
+	currentlyViewable = new Set();
+	callbacks = new Set();
+	hasInteracted = false;
+	pendingUpdate = null;
+	constructor(layoutPositioner, flattenedData, config = {}, horizontal = false) {
+		this.layoutPositioner = layoutPositioner;
+		this.flattenedData = flattenedData;
+		this.horizontal = horizontal;
+		this.config = {
+			minimumViewTime: config.minimumViewTime ?? DEFAULT_VIEWABILITY_CONFIG.minimumViewTime,
+			viewAreaCoveragePercentThreshold: config.viewAreaCoveragePercentThreshold ?? DEFAULT_VIEWABILITY_CONFIG.viewAreaCoveragePercentThreshold,
+			itemVisiblePercentThreshold: config.itemVisiblePercentThreshold ?? DEFAULT_VIEWABILITY_CONFIG.itemVisiblePercentThreshold,
+			waitForInteraction: config.waitForInteraction ?? DEFAULT_VIEWABILITY_CONFIG.waitForInteraction
+		};
+	}
+	/**
+	* Update flattened data when it changes.
+	*/
+	setData(flattenedData) {
+		this.flattenedData = flattenedData;
+		this.trackedItems.clear();
+		this.currentlyViewable.clear();
+		this.scheduleUpdate();
+	}
+	/**
+	* Update the current scroll offset.
+	*/
+	updateScrollOffset(offset) {
+		this.scrollOffset = offset;
+		this.scheduleUpdate();
+	}
+	/**
+	* Update the viewport size.
+	*/
+	setViewportSize(size) {
+		if (this.viewportSize !== size) {
+			this.viewportSize = size;
+			this.scheduleUpdate();
+		}
+	}
+	/**
+	* Record that user has interacted with the list.
+	*/
+	recordInteraction() {
+		if (!this.hasInteracted) {
+			this.hasInteracted = true;
+			this.scheduleUpdate();
+		}
+	}
+	/**
+	* Schedule a viewability update (debounced).
+	*/
+	scheduleUpdate() {
+		if (this.pendingUpdate) return;
+		this.pendingUpdate = setTimeout(() => {
+			this.pendingUpdate = null;
+			this.computeViewability();
+		}, 0);
+	}
+	/**
+	* Compute which items are viewable based on current scroll position.
+	*/
+	computeViewability() {
+		if (this.config.waitForInteraction && !this.hasInteracted) return;
+		const now = Date.now();
+		const newViewable = new Set();
+		const changed = [];
+		const { startIndex, endIndex } = this.layoutPositioner.getVisibleRange(this.scrollOffset, this.viewportSize, 0);
+		for (let i = startIndex; i <= endIndex; i++) {
+			const layout = this.layoutPositioner.getLayoutForIndex(i);
+			const isViewable = this.isItemViewable(i, layout);
+			if (isViewable) {
+				newViewable.add(i);
+				let tracked = this.trackedItems.get(i);
+				if (!tracked) {
+					tracked = {
+						flatIndex: i,
+						isViewable: false,
+						lastVisibleTime: now,
+						becameVisibleAt: now
+					};
+					this.trackedItems.set(i, tracked);
+				}
+				if (!tracked.isViewable && tracked.becameVisibleAt !== null) {
+					const visibleDuration = now - tracked.becameVisibleAt;
+					if (visibleDuration >= this.config.minimumViewTime) {
+						tracked.isViewable = true;
+						changed.push(this.createViewToken(i, true));
+					}
+				}
+				tracked.lastVisibleTime = now;
+			}
+		}
+		for (const flatIndex of this.currentlyViewable) if (!newViewable.has(flatIndex)) {
+			const tracked = this.trackedItems.get(flatIndex);
+			if (tracked && tracked.isViewable) {
+				tracked.isViewable = false;
+				tracked.becameVisibleAt = null;
+				changed.push(this.createViewToken(flatIndex, false));
+			}
+		}
+		this.currentlyViewable = newViewable;
+		if (changed.length > 0) {
+			const viewableItems = Array.from(this.currentlyViewable).filter((i) => this.trackedItems.get(i)?.isViewable).map((i) => this.createViewToken(i, true));
+			for (const callback of this.callbacks) callback({
+				viewableItems,
+				changed
+			});
+		}
+	}
+	/**
+	* Check if an item meets viewability thresholds.
+	*/
+	isItemViewable(flatIndex, layout) {
+		const itemStart = this.horizontal ? layout.x : layout.y;
+		const itemSize = this.horizontal ? layout.width : layout.height;
+		const itemEnd = itemStart + itemSize;
+		const viewportStart = this.scrollOffset;
+		const viewportEnd = this.scrollOffset + this.viewportSize;
+		const visibleStart = Math.max(itemStart, viewportStart);
+		const visibleEnd = Math.min(itemEnd, viewportEnd);
+		const visibleSize = Math.max(0, visibleEnd - visibleStart);
+		if (this.config.itemVisiblePercentThreshold > 0) {
+			const visiblePercent = itemSize > 0 ? visibleSize / itemSize * 100 : 0;
+			if (visiblePercent < this.config.itemVisiblePercentThreshold) return false;
+		}
+		if (this.config.viewAreaCoveragePercentThreshold > 0) {
+			const coveragePercent = this.viewportSize > 0 ? visibleSize / this.viewportSize * 100 : 0;
+			if (coveragePercent < this.config.viewAreaCoveragePercentThreshold) return false;
+		}
+		return visibleSize > 0;
+	}
+	/**
+	* Create a ViewToken for an item.
+	*/
+	createViewToken(flatIndex, isViewable) {
+		const item = this.flattenedData[flatIndex];
+		return {
+			item: item?.item ?? null,
+			key: item?.key ?? `item-${flatIndex}`,
+			index: flatIndex,
+			isViewable,
+			section: item?.section
+		};
+	}
+	/**
+	* Get all currently visible indices.
+	*/
+	getVisibleIndices() {
+		return Array.from(this.currentlyViewable);
+	}
+	/**
+	* Check if a specific index is visible.
+	*/
+	isIndexVisible(index) {
+		return this.currentlyViewable.has(index);
+	}
+	/**
+	* Get the first visible index.
+	*/
+	getFirstVisibleIndex() {
+		if (this.currentlyViewable.size === 0) return -1;
+		return Math.min(...this.currentlyViewable);
+	}
+	/**
+	* Get the last visible index.
+	*/
+	getLastVisibleIndex() {
+		if (this.currentlyViewable.size === 0) return -1;
+		return Math.max(...this.currentlyViewable);
+	}
+	/**
+	* Register a callback for viewability changes.
+	*/
+	onViewableItemsChanged(callback) {
+		this.callbacks.add(callback);
+		return () => {
+			this.callbacks.delete(callback);
+		};
+	}
+	/**
+	* Clean up resources.
+	*/
+	dispose() {
+		if (this.pendingUpdate) {
+			clearTimeout(this.pendingUpdate);
+			this.pendingUpdate = null;
+		}
+		this.callbacks.clear();
+		this.trackedItems.clear();
+		this.currentlyViewable.clear();
+	}
+};
+/**
+* Factory function to create a ViewabilityTracker.
+*/
+function createViewabilityTracker(layoutPositioner, flattenedData, config, horizontal) {
+	return new ViewabilityTrackerImpl(layoutPositioner, flattenedData, config, horizontal);
+}
+
+//#endregion
+//#region src/hooks/useViewability.ts
+/**
+* Hook for tracking item viewability and triggering callbacks.
+*/
+function useViewability(options) {
+	const { flattenedData, layoutPositioner, scrollOffset, viewportSize, horizontal = false, viewabilityConfig = DEFAULT_VIEWABILITY_CONFIG, onViewableItemsChanged } = options;
+	const trackerRef = (0, react.useRef)(null);
+	if (!trackerRef.current) trackerRef.current = createViewabilityTracker(layoutPositioner, flattenedData, viewabilityConfig, horizontal);
+	const tracker = trackerRef.current;
+	(0, react.useEffect)(() => {
+		tracker.setData(flattenedData);
+	}, [tracker, flattenedData]);
+	(0, react.useEffect)(() => {
+		tracker.setViewportSize(viewportSize);
+	}, [tracker, viewportSize]);
+	(0, react.useEffect)(() => {
+		tracker.updateScrollOffset(scrollOffset);
+	}, [tracker, scrollOffset]);
+	(0, react.useEffect)(() => {
+		if (!onViewableItemsChanged) return;
+		const unsubscribe = tracker.onViewableItemsChanged(onViewableItemsChanged);
+		return unsubscribe;
+	}, [tracker, onViewableItemsChanged]);
+	(0, react.useEffect)(() => {
+		return () => {
+			tracker.dispose();
+		};
+	}, [tracker]);
+	const recordInteraction = (0, react.useCallback)(() => {
+		tracker.recordInteraction();
+	}, [tracker]);
+	const getVisibleItems = (0, react.useCallback)(() => {
+		return tracker.getVisibleIndices().map((flatIndex) => {
+			const item = flattenedData[flatIndex];
+			return {
+				item: item?.item ?? null,
+				key: item?.key ?? `item-${flatIndex}`,
+				index: flatIndex,
+				isViewable: true,
+				section: item?.section
+			};
+		});
+	}, [tracker, flattenedData]);
+	const visibleState = (0, react.useMemo)(() => {
+		const indices = tracker.getVisibleIndices();
+		return {
+			visibleIndices: indices,
+			firstVisibleIndex: tracker.getFirstVisibleIndex(),
+			lastVisibleIndex: tracker.getLastVisibleIndex()
+		};
+	}, [
+		tracker,
+		scrollOffset,
+		viewportSize
+	]);
+	return {
+		...visibleState,
+		getVisibleItems,
+		recordInteraction
+	};
+}
+/**
+* Hook for handling multiple viewability configs with different callbacks.
+*/
+function useMultipleViewabilityConfigs(flattenedData, layoutPositioner, scrollOffset, viewportSize, configs, horizontal = false) {
+	const trackersRef = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		trackersRef.current = configs.map((config) => createViewabilityTracker(layoutPositioner, flattenedData, config.viewabilityConfig, horizontal));
+		const unsubscribes = trackersRef.current.map((tracker, index) => tracker.onViewableItemsChanged(configs[index].onViewableItemsChanged));
+		return () => {
+			unsubscribes.forEach((unsub) => unsub());
+			trackersRef.current.forEach((tracker) => tracker.dispose());
+			trackersRef.current = [];
+		};
+	}, [
+		configs,
+		flattenedData,
+		layoutPositioner,
+		horizontal
+	]);
+	(0, react.useEffect)(() => {
+		trackersRef.current.forEach((tracker) => tracker.setData(flattenedData));
+	}, [flattenedData]);
+	(0, react.useEffect)(() => {
+		trackersRef.current.forEach((tracker) => tracker.setViewportSize(viewportSize));
+	}, [viewportSize]);
+	(0, react.useEffect)(() => {
+		trackersRef.current.forEach((tracker) => tracker.updateScrollOffset(scrollOffset));
+	}, [scrollOffset]);
+}
+
+//#endregion
+//#region src/state/SectionFlowContext.tsx
+const SectionFlowContext = (0, react.createContext)(void 0);
+/**
+* Hook to access SectionFlow context.
+* Must be used within a SectionFlowProvider.
+*/
+function useSectionFlowContext() {
+	const context = (0, react.useContext)(SectionFlowContext);
+	if (!context) throw new Error("useSectionFlowContext must be used within a SectionFlowProvider");
+	return context;
+}
+/**
+* Provider component for SectionFlow context.
+*/
+function SectionFlowProvider({ children, sections, flattenedData, layoutManager, layoutCache, horizontal, collapsedSections, scrollOffset, viewportWidth, viewportHeight, stickySectionHeadersEnabled, estimatedItemSize, drawDistance, debug, renderItem, renderSectionHeader, renderSectionFooter, onCellMeasured, onSectionToggle, getItemType }) {
+	const value = (0, react.useMemo)(() => ({
+		sections,
+		flattenedData,
+		layoutManager,
+		layoutCache,
+		horizontal,
+		collapsedSections,
+		scrollOffset,
+		viewportWidth,
+		viewportHeight,
+		stickySectionHeadersEnabled,
+		estimatedItemSize,
+		drawDistance,
+		debug,
+		renderItem,
+		renderSectionHeader,
+		renderSectionFooter,
+		onCellMeasured,
+		onSectionToggle,
+		getItemType
+	}), [
+		sections,
+		flattenedData,
+		layoutManager,
+		layoutCache,
+		horizontal,
+		collapsedSections,
+		scrollOffset,
+		viewportWidth,
+		viewportHeight,
+		stickySectionHeadersEnabled,
+		estimatedItemSize,
+		drawDistance,
+		debug,
+		renderItem,
+		renderSectionHeader,
+		renderSectionFooter,
+		onCellMeasured,
+		onSectionToggle,
+		getItemType
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionFlowContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/RecyclerCell.tsx
+/**
+* RecyclerCell wraps each item with absolute positioning.
+* This is the fundamental unit of the recycling system.
+*
+* Key responsibilities:
+* 1. Position the item at the correct x/y coordinates
+* 2. Report layout measurements back to the system
+* 3. Maintain stable identity for recycling (via key)
+*/
+function RecyclerCellComponent({ cell, layout, children, onLayout, debug = false }) {
+	const handleLayout = (0, react.useCallback)((event) => {
+		const { x, y, width, height } = event.nativeEvent.layout;
+		onLayout(cell.key, cell.flatIndex, {
+			x,
+			y,
+			width,
+			height
+		});
+	}, [
+		cell.key,
+		cell.flatIndex,
+		onLayout
+	]);
+	const positionStyle = {
+		position: "absolute",
+		left: layout.x,
+		top: layout.y,
+		width: layout.width
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: [positionStyle, debug && styles$4.debug],
+		onLayout: handleLayout,
+		children
+	});
+}
+const styles$4 = react_native.StyleSheet.create({ debug: {
+	borderWidth: 1,
+	borderColor: "rgba(255, 0, 0, 0.3)"
+} });
+/**
+* Memoized cell component to prevent unnecessary re-renders.
+* Only re-renders when:
+* - Cell key changes (different item)
+* - Layout position changes
+* - Children change (new render)
+*/
+const RecyclerCell = (0, react.memo)(RecyclerCellComponent, (prevProps, nextProps) => {
+	return prevProps.cell.key === nextProps.cell.key && prevProps.cell.flatIndex === nextProps.cell.flatIndex && prevProps.layout.x === nextProps.layout.x && prevProps.layout.y === nextProps.layout.y && prevProps.layout.width === nextProps.layout.width && prevProps.layout.height === nextProps.layout.height && prevProps.children === nextProps.children && prevProps.debug === nextProps.debug;
+});
+RecyclerCell.displayName = "RecyclerCell";
+
+//#endregion
+//#region src/components/RecyclerContainer.tsx
+/**
+* RecyclerContainer manages the absolute-positioned content area.
+* It renders only the visible items within the current scroll window.
+*
+* Key responsibilities:
+* 1. Set content size for scroll container
+* 2. Render visible items at correct positions
+* 3. Coordinate cell recycling
+*/
+function RecyclerContainerComponent({ flattenedData, visibleRange, getLayoutForIndex, getCell, contentSize, renderItem, renderSectionHeader, renderSectionFooter, onCellLayout, horizontal = false, debug = false }) {
+	const { startIndex, endIndex } = visibleRange;
+	const cells = (0, react.useMemo)(() => {
+		const result = [];
+		for (let i = startIndex; i <= endIndex; i++) {
+			const item = flattenedData[i];
+			if (!item) continue;
+			const cell = getCell(i);
+			const layout = getLayoutForIndex(i);
+			let content = null;
+			switch (item.type) {
+				case "section-header":
+					if (renderSectionHeader) content = renderSectionHeader({
+						section: item.section,
+						sectionIndex: item.sectionIndex
+					});
+					break;
+				case "section-footer":
+					if (renderSectionFooter) content = renderSectionFooter({
+						section: item.section,
+						sectionIndex: item.sectionIndex
+					});
+					break;
+				case "item":
+					if (item.item !== null) content = renderItem({
+						item: item.item,
+						index: item.itemIndex,
+						section: item.section,
+						sectionIndex: item.sectionIndex
+					});
+					break;
+			}
+			if (content) result.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecyclerCell, {
+				cell,
+				layout,
+				onLayout: onCellLayout,
+				debug,
+				children: content
+			}, cell.key));
+		}
+		return result;
+	}, [
+		startIndex,
+		endIndex,
+		flattenedData,
+		getCell,
+		getLayoutForIndex,
+		renderItem,
+		renderSectionHeader,
+		renderSectionFooter,
+		onCellLayout,
+		debug
+	]);
+	const containerStyle = (0, react.useMemo)(() => ({
+		width: contentSize.width || "100%",
+		height: contentSize.height,
+		position: "relative"
+	}), [contentSize.width, contentSize.height]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: [containerStyle, debug && styles$3.debug],
+		children: cells
+	});
+}
+const styles$3 = react_native.StyleSheet.create({ debug: { backgroundColor: "rgba(0, 255, 0, 0.05)" } });
+const RecyclerContainer = (0, react.memo)(RecyclerContainerComponent);
+
+//#endregion
+//#region src/components/StickyHeaderContainer.tsx
+/**
+* Container for the sticky section header.
+* Positioned at the top (or left for horizontal) of the viewport.
+* Handles the "push" effect when the next section approaches.
+*/
+function StickyHeaderContainerComponent({ stickySection, translateY, sections, renderSectionHeader, horizontal = false, style }) {
+	if (!stickySection) return null;
+	const section = sections.find((s) => s.key === stickySection.sectionKey);
+	if (!section) return null;
+	const headerContent = renderSectionHeader({
+		section,
+		sectionIndex: stickySection.sectionIndex
+	});
+	if (!headerContent) return null;
+	const containerStyle = (0, react.useMemo)(() => ({
+		position: "absolute",
+		top: horizontal ? void 0 : 0,
+		left: horizontal ? 0 : 0,
+		right: horizontal ? void 0 : 0,
+		transform: horizontal ? [{ translateX: translateY }] : [{ translateY }],
+		zIndex: 1e3,
+		elevation: 4
+	}), [horizontal, translateY]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: [
+			containerStyle,
+			styles$2.shadow,
+			style
+		],
+		pointerEvents: "box-none",
+		children: headerContent
+	});
+}
+const styles$2 = react_native.StyleSheet.create({ shadow: {
+	shadowColor: "#000",
+	shadowOffset: {
+		width: 0,
+		height: 2
+	},
+	shadowOpacity: .1,
+	shadowRadius: 4
+} });
+const StickyHeaderContainer = (0, react.memo)(StickyHeaderContainerComponent);
+function AnimatedStickyHeaderContainerComponent({ stickySection, animatedTranslateY, sections, renderSectionHeader, horizontal = false, style }) {
+	if (!stickySection) return null;
+	const section = sections.find((s) => s.key === stickySection.sectionKey);
+	if (!section) return null;
+	const headerContent = renderSectionHeader({
+		section,
+		sectionIndex: stickySection.sectionIndex
+	});
+	if (!headerContent) return null;
+	const animatedStyle = (0, react.useMemo)(() => ({
+		position: "absolute",
+		top: horizontal ? void 0 : 0,
+		left: 0,
+		right: horizontal ? void 0 : 0,
+		transform: horizontal ? [{ translateX: animatedTranslateY }] : [{ translateY: animatedTranslateY }],
+		zIndex: 1e3,
+		elevation: 4
+	}), [horizontal, animatedTranslateY]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, {
+		style: [
+			animatedStyle,
+			styles$2.shadow,
+			style
+		],
+		pointerEvents: "box-none",
+		children: headerContent
+	});
+}
+const AnimatedStickyHeaderContainer = (0, react.memo)(AnimatedStickyHeaderContainerComponent);
+
+//#endregion
+//#region src/components/SectionFlow.tsx
+/**
+* SectionFlow - High-performance section list for React Native
+*
+* A drop-in replacement for SectionList with FlashList-style cell recycling.
+* Provides smooth 60fps scrolling through:
+* - Cell recycling (reuses views instead of creating new ones)
+* - Synchronous measurements (New Architecture)
+* - Type-based recycle pools
+* - Absolute positioning with computed layouts
+*/
+function SectionFlowInner(props, ref) {
+	const { sections, renderItem, renderSectionHeader, renderSectionFooter, keyExtractor, getItemType, estimatedItemSize = DEFAULT_ESTIMATED_ITEM_SIZE, estimatedSectionHeaderSize = DEFAULT_ESTIMATED_HEADER_SIZE, estimatedSectionFooterSize = 0, horizontal = false, stickySectionHeadersEnabled = true, stickyHeaderStyle, collapsible = false, defaultCollapsed = [], onSectionToggle, maxItemsInRecyclePool, drawDistance = DEFAULT_DRAW_DISTANCE, viewabilityConfig, onViewableItemsChanged, onEndReached, onEndReachedThreshold, style, contentContainerStyle, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, refreshing, onRefresh, extraData, debug = false,...scrollViewProps } = props;
+	const scrollViewRef = (0, react.useRef)(null);
+	const [viewportSize, setViewportSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const [scrollOffset, setScrollOffset] = (0, react.useState)(0);
+	const [collapsedSections, setCollapsedSections] = (0, react.useState)(() => new Set(defaultCollapsed));
+	const layoutCache = (0, react.useMemo)(() => createLayoutCache(), []);
+	const layoutManager = (0, react.useMemo)(() => createSectionLayoutManager(layoutCache, {
+		horizontal,
+		estimatedItemSize,
+		estimatedHeaderSize: estimatedSectionHeaderSize,
+		estimatedFooterSize: estimatedSectionFooterSize,
+		hasSectionFooters: !!renderSectionFooter
+	}), [
+		layoutCache,
+		horizontal,
+		estimatedItemSize,
+		estimatedSectionHeaderSize,
+		estimatedSectionFooterSize,
+		renderSectionFooter
+	]);
+	const flattenedData = (0, react.useMemo)(() => layoutManager.updateData(sections, collapsedSections), [
+		layoutManager,
+		sections,
+		collapsedSections,
+		extraData
+	]);
+	(0, react.useEffect)(() => {
+		layoutManager.getLayoutPositioner().setContainerSize(viewportSize.width, viewportSize.height);
+	}, [layoutManager, viewportSize]);
+	const getItemTypeForIndex = (0, react.useCallback)((flatIndex) => {
+		const item = flattenedData[flatIndex];
+		if (!item) return DEFAULT_ITEM_TYPE;
+		if (item.type === "section-header") return SECTION_HEADER_TYPE;
+		if (item.type === "section-footer") return SECTION_FOOTER_TYPE;
+		if (getItemType && item.item !== null) return getItemType(item.item, item.itemIndex, item.section);
+		return DEFAULT_ITEM_TYPE;
+	}, [flattenedData, getItemType]);
+	const { scrollState, onScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd } = useScrollHandler({
+		horizontal,
+		onScrollStateChange: (state) => {
+			setScrollOffset(state.offset);
+		},
+		onEndReached: onEndReached ? (distance) => onEndReached({ distanceFromEnd: distance }) : void 0,
+		onEndReachedThreshold
+	});
+	const { getCell, releaseCell, updateVisibleRange, clearPools, getPoolStats } = useRecycler({
+		flattenedData,
+		getItemType,
+		maxPoolSize: maxItemsInRecyclePool
+	});
+	const layoutPositioner = layoutManager.getLayoutPositioner();
+	const viewportDimension = horizontal ? viewportSize.width : viewportSize.height;
+	const visibleRange = (0, react.useMemo)(() => layoutPositioner.getVisibleRange(scrollOffset, viewportDimension, drawDistance), [
+		layoutPositioner,
+		scrollOffset,
+		viewportDimension,
+		drawDistance
+	]);
+	(0, react.useEffect)(() => {
+		updateVisibleRange(visibleRange.startIndex, visibleRange.endIndex);
+	}, [
+		updateVisibleRange,
+		visibleRange.startIndex,
+		visibleRange.endIndex
+	]);
+	const sectionLayouts = (0, react.useMemo)(() => layoutManager.getAllSectionLayouts(), [
+		layoutManager,
+		flattenedData,
+		scrollOffset
+	]);
+	const stickyHeaderState = useStickyHeader({
+		sectionLayouts,
+		scrollOffset,
+		viewportHeight: viewportDimension,
+		horizontal,
+		enabled: stickySectionHeadersEnabled
+	});
+	const viewabilityResult = useViewability({
+		flattenedData,
+		layoutPositioner,
+		scrollOffset,
+		viewportSize: viewportDimension,
+		horizontal,
+		viewabilityConfig,
+		onViewableItemsChanged
+	});
+	const handleCellLayout = (0, react.useCallback)((key, flatIndex, layout) => {
+		layoutPositioner.updateItemLayout(flatIndex, layout);
+	}, [layoutPositioner]);
+	const handleViewportLayout = (0, react.useCallback)((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		setViewportSize({
+			width,
+			height
+		});
+	}, []);
+	const handleSectionToggle = (0, react.useCallback)((sectionKey) => {
+		setCollapsedSections((prev) => {
+			const next = new Set(prev);
+			const isCollapsed = next.has(sectionKey);
+			if (isCollapsed) next.delete(sectionKey);
+			else next.add(sectionKey);
+			onSectionToggle?.(sectionKey, !isCollapsed);
+			return next;
+		});
+	}, [onSectionToggle]);
+	const contentSize = (0, react.useMemo)(() => layoutPositioner.getContentSize(), [layoutPositioner, flattenedData]);
+	const scrollToOffset = (0, react.useCallback)((options) => {
+		scrollViewRef.current?.scrollTo({
+			x: horizontal ? options.offset : 0,
+			y: horizontal ? 0 : options.offset,
+			animated: options.animated ?? true
+		});
+	}, [horizontal]);
+	const scrollToSection = (0, react.useCallback)((options) => {
+		const { sectionKey, sectionIndex, animated = true, viewPosition = 0 } = options;
+		let targetSection = null;
+		if (sectionKey) targetSection = layoutManager.getSectionLayout(sectionKey);
+		else if (sectionIndex !== void 0) {
+			const section = sections[sectionIndex];
+			if (section) targetSection = layoutManager.getSectionLayout(section.key);
+		}
+		if (targetSection) {
+			const headerOffset = horizontal ? targetSection.headerLayout.x : targetSection.headerLayout.y;
+			scrollToOffset({
+				offset: headerOffset,
+				animated
+			});
+		}
+	}, [
+		layoutManager,
+		sections,
+		horizontal,
+		scrollToOffset
+	]);
+	const scrollToItem = (0, react.useCallback)((options) => {
+		const { sectionKey, sectionIndex, itemIndex, animated = true } = options;
+		let targetSectionIndex = sectionIndex;
+		if (sectionKey) targetSectionIndex = sections.findIndex((s) => s.key === sectionKey);
+		if (targetSectionIndex === void 0 || targetSectionIndex < 0) return;
+		const flatIndex = layoutManager.getFlatIndex(targetSectionIndex, itemIndex);
+		if (flatIndex < 0) return;
+		const layout = layoutPositioner.getLayoutForIndex(flatIndex);
+		const offset = horizontal ? layout.x : layout.y;
+		scrollToOffset({
+			offset,
+			animated
+		});
+	}, [
+		layoutManager,
+		layoutPositioner,
+		sections,
+		horizontal,
+		scrollToOffset
+	]);
+	const scrollToEnd = (0, react.useCallback)((options) => {
+		const totalSize = horizontal ? contentSize.width : contentSize.height;
+		const offset = Math.max(0, totalSize - viewportDimension);
+		scrollToOffset({
+			offset,
+			animated: options?.animated ?? true
+		});
+	}, [
+		contentSize,
+		viewportDimension,
+		horizontal,
+		scrollToOffset
+	]);
+	(0, react.useImperativeHandle)(ref, () => ({
+		scrollToSection,
+		scrollToItem,
+		scrollToOffset,
+		scrollToEnd,
+		toggleSection: handleSectionToggle,
+		getSectionLayouts: () => sectionLayouts,
+		getVisibleItems: viewabilityResult.getVisibleItems,
+		recordInteraction: viewabilityResult.recordInteraction,
+		flashScrollIndicators: () => scrollViewRef.current?.flashScrollIndicators()
+	}), [
+		scrollToSection,
+		scrollToItem,
+		scrollToOffset,
+		scrollToEnd,
+		handleSectionToggle,
+		sectionLayouts,
+		viewabilityResult
+	]);
+	if (sections.length === 0 && ListEmptyComponent) {
+		const EmptyComponent = typeof ListEmptyComponent === "function" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListEmptyComponent, {}) : ListEmptyComponent;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: [styles$1.container, style],
+			children: EmptyComponent
+		});
+	}
+	const HeaderComponent = ListHeaderComponent ? typeof ListHeaderComponent === "function" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListHeaderComponent, {}) : ListHeaderComponent : null;
+	const FooterComponent = ListFooterComponent ? typeof ListFooterComponent === "function" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListFooterComponent, {}) : ListFooterComponent : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: [styles$1.container, style],
+		onLayout: handleViewportLayout,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.ScrollView, {
+				ref: scrollViewRef,
+				horizontal,
+				scrollEventThrottle: 16,
+				onScroll,
+				onScrollBeginDrag,
+				onScrollEndDrag,
+				onMomentumScrollBegin,
+				onMomentumScrollEnd,
+				contentContainerStyle,
+				refreshControl: onRefresh ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.RefreshControl, {
+					refreshing: refreshing ?? false,
+					onRefresh
+				}) : void 0,
+				...scrollViewProps,
+				children: [
+					HeaderComponent,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionFlowProvider, {
+						sections,
+						flattenedData,
+						layoutManager,
+						layoutCache,
+						horizontal,
+						collapsedSections,
+						scrollOffset,
+						viewportWidth: viewportSize.width,
+						viewportHeight: viewportSize.height,
+						stickySectionHeadersEnabled,
+						estimatedItemSize,
+						drawDistance,
+						debug,
+						renderItem,
+						renderSectionHeader,
+						renderSectionFooter,
+						onCellMeasured: handleCellLayout,
+						onSectionToggle: collapsible ? handleSectionToggle : void 0,
+						getItemType: getItemTypeForIndex,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecyclerContainer, {
+							flattenedData,
+							visibleRange,
+							getLayoutForIndex: (index) => layoutPositioner.getLayoutForIndex(index),
+							getCell,
+							contentSize,
+							renderItem,
+							renderSectionHeader,
+							renderSectionFooter,
+							onCellLayout: handleCellLayout,
+							horizontal,
+							debug
+						})
+					}),
+					FooterComponent
+				]
+			}),
+			stickySectionHeadersEnabled && renderSectionHeader && stickyHeaderState.sectionKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickyHeaderContainer, {
+				stickySection: sectionLayouts.find((s) => s.sectionKey === stickyHeaderState.sectionKey) ?? null,
+				translateY: stickyHeaderState.translateY,
+				sections,
+				renderSectionHeader,
+				horizontal,
+				style: stickyHeaderStyle
+			}),
+			debug && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				style: styles$1.debugOverlay,
+				pointerEvents: "none"
+			})
+		]
+	});
+}
+const styles$1 = react_native.StyleSheet.create({
+	container: { flex: 1 },
+	debugOverlay: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0
+	}
+});
+/**
+* Export with proper generic typing.
+* Usage: <SectionFlow<MyItemType> sections={...} renderItem={...} />
+*/
+const SectionFlow = (0, react.forwardRef)(SectionFlowInner);
+SectionFlow.displayName = "SectionFlow";
+
+//#endregion
+//#region src/components/SectionHeader.tsx
+/**
+* Default section header component.
+* Can be overridden by providing renderSectionHeader prop to SectionFlow.
+*/
+function SectionHeaderComponent({ section, sectionIndex, isCollapsed = false, collapsible = false, onToggle, renderContent, style }) {
+	const handlePress = (0, react.useCallback)(() => {
+		if (collapsible && onToggle) onToggle(section.key);
+	}, [
+		collapsible,
+		onToggle,
+		section.key
+	]);
+	if (renderContent) {
+		const content = renderContent({
+			section,
+			sectionIndex,
+			isCollapsed
+		});
+		if (content) {
+			if (collapsible) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableOpacity, {
+				onPress: handlePress,
+				activeOpacity: .7,
+				children: content
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { children: content });
+		}
+	}
+	const Wrapper = collapsible ? react_native.TouchableOpacity : react_native.View;
+	const wrapperProps = collapsible ? {
+		onPress: handlePress,
+		activeOpacity: .7
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+		...wrapperProps,
+		style: [styles.container, style],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: styles.title,
+			children: section.title ?? section.key
+		}), collapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: styles.indicator,
+			children: isCollapsed ? "▸" : "▾"
+		})]
+	});
+}
+const styles = react_native.StyleSheet.create({
+	container: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		backgroundColor: "#f5f5f5",
+		borderBottomWidth: react_native.StyleSheet.hairlineWidth,
+		borderBottomColor: "#e0e0e0"
+	},
+	title: {
+		fontSize: 14,
+		fontWeight: "600",
+		color: "#333",
+		textTransform: "uppercase",
+		letterSpacing: .5
+	},
+	indicator: {
+		fontSize: 14,
+		color: "#666"
+	}
+});
+const SectionHeader = (0, react.memo)(SectionHeaderComponent);
+
+//#endregion
+//#region src/hooks/useLayoutMeasurement.ts
+/**
+* Hook for synchronous layout measurement using New Architecture features.
+*
+* In React Native's New Architecture with Fabric, useLayoutEffect runs synchronously
+* before paint, allowing us to measure and correct layouts without visible glitches.
+*
+* This hook provides:
+* 1. A ref to attach to the View
+* 2. An onLayout callback for initial/resize measurements
+* 3. A measure function for on-demand measurement
+*/
+function useLayoutMeasurement(options) {
+	const { onMeasure, enabled = true } = options;
+	const ref = (0, react.useRef)(null);
+	const lastMeasurement = (0, react.useRef)(null);
+	/**
+	* Measure the view using measureInWindow for absolute positioning.
+	* In New Architecture, this is synchronous when called in useLayoutEffect.
+	*/
+	const measure = (0, react.useCallback)(() => {
+		if (!enabled || !ref.current) return;
+		ref.current.measureInWindow((x, y, width, height) => {
+			const layout = {
+				x,
+				y,
+				width,
+				height
+			};
+			if (!lastMeasurement.current || lastMeasurement.current.width !== width || lastMeasurement.current.height !== height) {
+				lastMeasurement.current = layout;
+				onMeasure(layout);
+			}
+		});
+	}, [enabled, onMeasure]);
+	/**
+	* Handle layout events from React Native's onLayout prop.
+	* This fires on mount and whenever the layout changes.
+	*/
+	const onLayout = (0, react.useCallback)((event) => {
+		if (!enabled) return;
+		const { x, y, width, height } = event.nativeEvent.layout;
+		const layout = {
+			x,
+			y,
+			width,
+			height
+		};
+		if (!lastMeasurement.current || lastMeasurement.current.width !== width || lastMeasurement.current.height !== height) {
+			lastMeasurement.current = layout;
+			onMeasure(layout);
+		}
+	}, [enabled, onMeasure]);
+	return {
+		ref,
+		onLayout,
+		measure
+	};
+}
+/**
+* Hook for measuring a cell's layout and reporting to the layout system.
+* Uses synchronous measurement in New Architecture for smooth corrections.
+*/
+function useCellMeasurement(cellKey, onCellMeasured, enabled = true) {
+	const handleMeasure = (0, react.useCallback)((layout) => {
+		onCellMeasured(cellKey, layout);
+	}, [cellKey, onCellMeasured]);
+	return useLayoutMeasurement({
+		onMeasure: handleMeasure,
+		enabled
+	});
+}
+/**
+* Hook for progressive rendering - measures initial items and expands.
+* Implements FlashList v2's progressive rendering strategy.
+*/
+function useProgressiveRender(totalItems, initialCount, batchSize, onRenderCountChange) {
+	const renderCount = (0, react.useRef)(Math.min(initialCount, totalItems));
+	const measuredCount = (0, react.useRef)(0);
+	const onItemMeasured = (0, react.useCallback)((index) => {
+		measuredCount.current++;
+		if (measuredCount.current >= renderCount.current && renderCount.current < totalItems) {
+			const newCount = Math.min(renderCount.current + batchSize, totalItems);
+			renderCount.current = newCount;
+			onRenderCountChange(newCount);
+		}
+	}, [
+		totalItems,
+		batchSize,
+		onRenderCountChange
+	]);
+	return {
+		renderCount: renderCount.current,
+		onItemMeasured
+	};
+}
+
+//#endregion
+//#region src/utils/flattenSections.ts
+/**
+* Flatten sections into a single array of items for virtualization.
+* Each item includes metadata about its section and position.
+*/
+function flattenSections(sections, options = {}) {
+	const { collapsedSections = new Set(), includeSectionFooters = false } = options;
+	const result = [];
+	for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
+		const section = sections[sectionIndex];
+		const isCollapsed = collapsedSections.has(section.key);
+		result.push({
+			type: "section-header",
+			key: `header-${section.key}`,
+			sectionKey: section.key,
+			sectionIndex,
+			itemIndex: -1,
+			item: null,
+			section
+		});
+		if (!isCollapsed) {
+			for (let itemIndex = 0; itemIndex < section.data.length; itemIndex++) result.push({
+				type: "item",
+				key: `item-${section.key}-${itemIndex}`,
+				sectionKey: section.key,
+				sectionIndex,
+				itemIndex,
+				item: section.data[itemIndex],
+				section
+			});
+			if (includeSectionFooters) result.push({
+				type: "section-footer",
+				key: `footer-${section.key}`,
+				sectionKey: section.key,
+				sectionIndex,
+				itemIndex: -1,
+				item: null,
+				section
+			});
+		}
+	}
+	return result;
+}
+/**
+* Get the flat index for a specific section and item index.
+*/
+function getFlatIndex(sections, sectionIndex, itemIndex, collapsedSections = new Set(), includeSectionFooters = false) {
+	let flatIndex = 0;
+	for (let i = 0; i < sectionIndex; i++) {
+		const section = sections[i];
+		flatIndex++;
+		if (!collapsedSections.has(section.key)) {
+			flatIndex += section.data.length;
+			if (includeSectionFooters) flatIndex++;
+		}
+	}
+	flatIndex++;
+	if (itemIndex >= 0 && !collapsedSections.has(sections[sectionIndex].key)) flatIndex += itemIndex;
+	return flatIndex;
+}
+/**
+* Get section and item index from a flat index.
+*/
+function getSectionItemFromFlatIndex(sections, flatIndex, collapsedSections = new Set(), includeSectionFooters = false) {
+	let currentFlatIndex = 0;
+	for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
+		const section = sections[sectionIndex];
+		const isCollapsed = collapsedSections.has(section.key);
+		if (currentFlatIndex === flatIndex) return {
+			sectionIndex,
+			itemIndex: -1,
+			type: "header"
+		};
+		currentFlatIndex++;
+		if (!isCollapsed) {
+			for (let itemIndex = 0; itemIndex < section.data.length; itemIndex++) {
+				if (currentFlatIndex === flatIndex) return {
+					sectionIndex,
+					itemIndex,
+					type: "item"
+				};
+				currentFlatIndex++;
+			}
+			if (includeSectionFooters) {
+				if (currentFlatIndex === flatIndex) return {
+					sectionIndex,
+					itemIndex: -1,
+					type: "footer"
+				};
+				currentFlatIndex++;
+			}
+		}
+	}
+	return null;
+}
+
+//#endregion
+//#region src/utils/keyExtractor.ts
+/**
+* Key extraction utilities for list items.
+*/
+/**
+* Default key extractor that uses index as string.
+* Note: Using indices as keys is not recommended for dynamic lists.
+*/
+function defaultKeyExtractor(item, index) {
+	const anyItem = item;
+	if (typeof anyItem?.id === "string" || typeof anyItem?.id === "number") return String(anyItem.id);
+	if (typeof anyItem?.key === "string" || typeof anyItem?.key === "number") return String(anyItem.key);
+	if (typeof anyItem?._id === "string" || typeof anyItem?._id === "number") return String(anyItem._id);
+	if (typeof anyItem?.uuid === "string") return anyItem.uuid;
+	return String(index);
+}
+/**
+* Create a key extractor function with a custom field name.
+*/
+function createKeyExtractor(field) {
+	return (item) => {
+		const value = item[field];
+		if (value !== void 0 && value !== null) return String(value);
+		throw new Error(`Key field "${String(field)}" not found on item`);
+	};
+}
+/**
+* Create a composite key from multiple fields.
+*/
+function createCompositeKeyExtractor(fields) {
+	return (item) => {
+		return fields.map((field) => {
+			const value = item[field];
+			return value !== void 0 && value !== null ? String(value) : "";
+		}).join("-");
+	};
+}
+/**
+* Validate that keys are unique within a list.
+* Throws an error if duplicates are found.
+*/
+function validateUniqueKeys(items, keyExtractor) {
+	const seen = new Set();
+	for (let i = 0; i < items.length; i++) {
+		const key = keyExtractor(items[i], i);
+		if (seen.has(key)) throw new Error(`Duplicate key "${key}" found at index ${i}. Keys must be unique within a list.`);
+		seen.add(key);
+	}
+}
+
+//#endregion
+//#region src/utils/binarySearch.ts
+/**
+* Binary search utilities for efficient offset-to-index lookups.
+*/
+/**
+* Binary search to find the index of an item with a specific value.
+* Returns -1 if not found.
+*/
+function binarySearch(array, target, getValue) {
+	let low = 0;
+	let high = array.length - 1;
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		const value = getValue(array[mid]);
+		if (value === target) return mid;
+		else if (value < target) low = mid + 1;
+		else high = mid - 1;
+	}
+	return -1;
+}
+/**
+* Binary search to find the insertion position for a value.
+* Returns the index where the value should be inserted to maintain sorted order.
+*/
+function binarySearchInsertPosition(array, target, getValue) {
+	let low = 0;
+	let high = array.length;
+	while (low < high) {
+		const mid = Math.floor((low + high) / 2);
+		const value = getValue(array[mid]);
+		if (value < target) low = mid + 1;
+		else high = mid;
+	}
+	return low;
+}
+
+//#endregion
+exports.AnimatedStickyHeaderContainer = AnimatedStickyHeaderContainer;
+exports.DEFAULT_DRAW_DISTANCE = DEFAULT_DRAW_DISTANCE;
+exports.DEFAULT_ESTIMATED_HEADER_SIZE = DEFAULT_ESTIMATED_HEADER_SIZE;
+exports.DEFAULT_ESTIMATED_ITEM_SIZE = DEFAULT_ESTIMATED_ITEM_SIZE;
+exports.DEFAULT_ITEM_TYPE = DEFAULT_ITEM_TYPE;
+exports.DEFAULT_MAX_POOL_SIZE = DEFAULT_MAX_POOL_SIZE;
+exports.LinearLayoutPositioner = LinearLayoutPositioner;
+exports.RecyclerCell = RecyclerCell;
+exports.RecyclerContainer = RecyclerContainer;
+exports.SECTION_FOOTER_TYPE = SECTION_FOOTER_TYPE;
+exports.SECTION_HEADER_TYPE = SECTION_HEADER_TYPE;
+exports.SectionFlow = SectionFlow;
+exports.SectionFlowProvider = SectionFlowProvider;
+exports.SectionHeader = SectionHeader;
+exports.StickyHeaderContainer = StickyHeaderContainer;
+exports.binarySearch = binarySearch;
+exports.binarySearchInsertPosition = binarySearchInsertPosition;
+exports.createCellRecycler = createCellRecycler;
+exports.createCompositeKeyExtractor = createCompositeKeyExtractor;
+exports.createKeyExtractor = createKeyExtractor;
+exports.createLayoutCache = createLayoutCache;
+exports.createLayoutPositioner = createLayoutPositioner;
+exports.createSectionLayoutManager = createSectionLayoutManager;
+exports.createViewabilityTracker = createViewabilityTracker;
+exports.defaultKeyExtractor = defaultKeyExtractor;
+exports.flattenSections = flattenSections;
+exports.getFlatIndex = getFlatIndex;
+exports.getSectionItemFromFlatIndex = getSectionItemFromFlatIndex;
+exports.useAdaptiveDrawDistance = useAdaptiveDrawDistance;
+exports.useCellMeasurement = useCellMeasurement;
+exports.useItemTypeResolver = useItemTypeResolver;
+exports.useLayoutMeasurement = useLayoutMeasurement;
+exports.useMultipleStickyHeaders = useMultipleStickyHeaders;
+exports.useMultipleViewabilityConfigs = useMultipleViewabilityConfigs;
+exports.useProgressiveRender = useProgressiveRender;
+exports.useRecycler = useRecycler;
+exports.useScrollHandler = useScrollHandler;
+exports.useSectionFlowContext = useSectionFlowContext;
+exports.useStickyHeader = useStickyHeader;
+exports.useStickyHeaderOpacity = useStickyHeaderOpacity;
+exports.useViewability = useViewability;
+exports.validateUniqueKeys = validateUniqueKeys;
+//# sourceMappingURL=index.cjs.map