@dynamic-scroll/core 1.2.1

package/dist/index.mjs

@@ -0,0 +1,880 @@
+import { memo, forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, useImperativeHandle, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/DynamicScroll.tsx
+function useHeightMap({
+  items,
+  estimatedItemSize
+}) {
+  const heightMapRef = useRef(/* @__PURE__ */ new Map());
+  const pendingIdsRef = useRef(/* @__PURE__ */ new Set());
+  const batchRafRef = useRef(null);
+  const [version, setVersion] = useState(0);
+  const unmeasuredIds = [];
+  const currentIds = /* @__PURE__ */ new Set();
+  if (estimatedItemSize === void 0) {
+    for (const item of items) {
+      currentIds.add(item.id);
+      if (!heightMapRef.current.has(item.id)) {
+        unmeasuredIds.push(item.id);
+      }
+    }
+    for (const id of pendingIdsRef.current) {
+      if (!currentIds.has(id)) {
+        pendingIdsRef.current.delete(id);
+      }
+    }
+    for (const id of unmeasuredIds) {
+      pendingIdsRef.current.add(id);
+    }
+  }
+  const isAllMeasured = estimatedItemSize !== void 0 || items.length > 0 && unmeasuredIds.length === 0;
+  const onItemMeasured = useCallback((id, height) => {
+    heightMapRef.current.set(id, height);
+    pendingIdsRef.current.delete(id);
+    if (pendingIdsRef.current.size === 0) {
+      setVersion((v) => v + 1);
+    }
+  }, []);
+  const onHeightChange = useCallback((id, height) => {
+    const cur = heightMapRef.current.get(id);
+    if (cur === height) return;
+    heightMapRef.current.set(id, height);
+    if (batchRafRef.current === null) {
+      batchRafRef.current = requestAnimationFrame(() => {
+        batchRafRef.current = null;
+        setVersion((v) => v + 1);
+      });
+    }
+  }, []);
+  return {
+    heightMapRef,
+    isAllMeasured,
+    unmeasuredIds,
+    onItemMeasured,
+    onHeightChange,
+    version
+  };
+}
+function usePositions({
+  items,
+  heightMapRef,
+  version,
+  estimatedItemSize
+}) {
+  const childPositions = useMemo(() => {
+    const positions = [0];
+    for (let i = 0; i < items.length; i++) {
+      const height = heightMapRef.current.get(items[i].id) ?? estimatedItemSize ?? 0;
+      positions.push(positions[i] + height);
+    }
+    return positions;
+  }, [items, version, estimatedItemSize]);
+  const totalHeight = childPositions.length > 1 ? childPositions[childPositions.length - 1] : 0;
+  return { childPositions, totalHeight };
+}
+function useGroupPositions(items, groupBy, heightMapRef, version) {
+  return useMemo(() => {
+    if (!groupBy || items.length === 0) return null;
+    const heightByGroup = /* @__PURE__ */ new Map();
+    const groupKeyByIndex = [];
+    const groupOrder = [];
+    for (let i = 0; i < items.length; i++) {
+      const key = groupBy(items[i]);
+      groupKeyByIndex.push(key);
+      const itemHeight = heightMapRef.current.get(items[i].id) ?? 0;
+      const current = heightByGroup.get(key) ?? 0;
+      heightByGroup.set(key, current + itemHeight);
+      if (!groupOrder.includes(key)) {
+        groupOrder.push(key);
+      }
+    }
+    const cumulativeHeightByGroup = /* @__PURE__ */ new Map();
+    let cumulative = 0;
+    for (let i = groupOrder.length - 1; i >= 0; i--) {
+      cumulativeHeightByGroup.set(groupOrder[i], cumulative);
+      cumulative += heightByGroup.get(groupOrder[i]) ?? 0;
+    }
+    return { heightByGroup, cumulativeHeightByGroup, groupKeyByIndex };
+  }, [items, groupBy, version]);
+}
+
+// src/utils/binarySearch.ts
+function generateStartNodeIndex(scrollTop, nodePositions, itemCount) {
+  let startRange = 0;
+  let endRange = itemCount - 1;
+  if (endRange < 0) return 0;
+  if (scrollTop <= 0) return 0;
+  while (endRange !== startRange) {
+    const middle = Math.floor((endRange - startRange) / 2 + startRange);
+    const nodeCenter = (nodePositions[middle] + nodePositions[middle + 1]) / 2;
+    if (nodeCenter <= scrollTop && nodePositions[middle + 1] > scrollTop) {
+      return middle;
+    }
+    if (middle === startRange) {
+      return endRange;
+    }
+    if (nodeCenter <= scrollTop) {
+      startRange = middle;
+    } else {
+      endRange = middle;
+    }
+  }
+  return startRange;
+}
+function generateEndNodeIndex(nodePositions, startNodeIndex, itemCount, viewportHeight) {
+  if (itemCount === 0) return 0;
+  const basePosition = nodePositions[startNodeIndex + 1] ?? nodePositions[startNodeIndex];
+  const targetPosition = basePosition + viewportHeight;
+  let low = startNodeIndex;
+  let high = itemCount - 1;
+  if (nodePositions[high] <= targetPosition) {
+    return high;
+  }
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (nodePositions[mid] <= targetPosition) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+  return low;
+}
+function generateCenteredStartNodeIndex(nodePositions, targetRowHeight, targetRowIndex, viewportHeight) {
+  if (!nodePositions || nodePositions.length === 0) return 0;
+  const totalHeight = nodePositions[targetRowIndex] + targetRowHeight;
+  if (totalHeight <= viewportHeight) return 0;
+  const viewHalf = Math.floor(viewportHeight / 2);
+  let start = 0;
+  let end = targetRowIndex;
+  let answer = 0;
+  let closestDistance = Infinity;
+  while (start <= end) {
+    const middle = Math.floor((end - start) / 2 + start);
+    const middleHeight = nodePositions[targetRowIndex] - nodePositions[middle] + targetRowHeight;
+    const distance = Math.abs(middleHeight - viewHalf);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      answer = middle;
+    }
+    if (viewHalf < middleHeight) {
+      start = middle + 1;
+    } else {
+      end = middle - 1;
+    }
+  }
+  return answer;
+}
+
+// src/hooks/useScrollState.ts
+function useScrollState({
+  scrollTop,
+  itemCount,
+  overscanCount = 8,
+  viewportHeight,
+  childPositions
+}) {
+  const firstVisibleNode = useMemo(
+    () => generateStartNodeIndex(scrollTop, childPositions, itemCount),
+    [scrollTop, childPositions, itemCount]
+  );
+  const lastVisibleNode = useMemo(
+    () => generateEndNodeIndex(
+      childPositions,
+      firstVisibleNode,
+      itemCount,
+      viewportHeight
+    ),
+    [childPositions, firstVisibleNode, itemCount, viewportHeight]
+  );
+  const startNode = Math.max(0, firstVisibleNode - overscanCount);
+  const endNode = Math.min(itemCount - 1, lastVisibleNode + overscanCount);
+  const visibleNodeCount = Math.max(0, endNode - startNode + 1);
+  return {
+    firstVisibleNode,
+    lastVisibleNode,
+    startNode,
+    endNode,
+    visibleNodeCount
+  };
+}
+function MeasureInner({
+  children,
+  itemId,
+  position,
+  onHeightChange,
+  knownHeight
+}) {
+  const ref = useRef(null);
+  const prevHeightRef = useRef(knownHeight ?? 0);
+  const [heightLocked, setHeightLocked] = useState(!!knownHeight);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const measure = () => {
+      const newHeight = Math.ceil(node.offsetHeight);
+      if (newHeight === 0 || prevHeightRef.current === newHeight) return;
+      const oldHeight = prevHeightRef.current;
+      prevHeightRef.current = newHeight;
+      console.log(`[Measure] ${itemId} height changed: ${oldHeight} \u2192 ${newHeight} (locked: ${heightLocked}, knownHeight: ${knownHeight})`);
+      onHeightChange(itemId, newHeight);
+    };
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(node);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [itemId, onHeightChange]);
+  useEffect(() => {
+    if (!heightLocked) return;
+    const node = ref.current;
+    if (!node) return;
+    const mutationObserver = new MutationObserver(() => {
+      console.log(`[Measure] ${itemId} mutation detected \u2192 unlocking height (was ${knownHeight}px)`);
+      setHeightLocked(false);
+    });
+    mutationObserver.observe(node, {
+      childList: true,
+      subtree: false
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [heightLocked]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-dynamic-scroll-item": itemId,
+      style: {
+        position: "absolute",
+        top: position,
+        left: 0,
+        width: "100%",
+        ...heightLocked && knownHeight ? { height: knownHeight, overflow: "hidden" } : {}
+      },
+      ref,
+      children
+    }
+  );
+}
+var Measure = memo(MeasureInner);
+var DEFAULT_OVERSCAN = 8;
+function VirtualScrollInner({
+  items,
+  renderItem,
+  childPositions,
+  totalHeight,
+  heightMapRef,
+  onHeightChange,
+  overscanCount = DEFAULT_OVERSCAN,
+  onStartReached,
+  onEndReached,
+  threshold = 0,
+  onAtBottomChange,
+  syncScrollUpdates = false,
+  className,
+  style,
+  isMeasuring = false,
+  loadingComponent,
+  bottomLoadingComponent,
+  initialScrollPosition = "bottom",
+  groupInfo,
+  renderGroupHeader
+}, ref) {
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const animationFrameRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const mountedRef = useRef(false);
+  const programmaticScrollRef = useRef(false);
+  const backwardLoadingRef = useRef(false);
+  const prevScrollHeightRef = useRef(0);
+  const forwardLoadingRef = useRef(false);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setViewportHeight(el.clientHeight);
+  }, []);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el || mountedRef.current || totalHeight <= 0) return;
+    mountedRef.current = true;
+    if (initialScrollPosition === "top") {
+      el.scrollTop = 0;
+      setScrollTop(0);
+      isAtBottomRef.current = false;
+      onAtBottomChange?.(false);
+    } else if (initialScrollPosition === "bottom") {
+      el.scrollTop = el.scrollHeight;
+      setScrollTop(el.scrollTop);
+      isAtBottomRef.current = true;
+      onAtBottomChange?.(true);
+    } else {
+      const { index, align = "center" } = initialScrollPosition;
+      if (index >= 0 && index < items.length) {
+        const itemTop = childPositions[index];
+        const itemHeight = heightMapRef.current.get(items[index].id) ?? 0;
+        let target;
+        if (align === "start") {
+          target = itemTop;
+        } else if (align === "end") {
+          target = itemTop + itemHeight - el.clientHeight;
+        } else {
+          target = itemTop + itemHeight / 2 - el.clientHeight / 2;
+        }
+        el.scrollTop = Math.max(0, target);
+        setScrollTop(el.scrollTop);
+        isAtBottomRef.current = false;
+        onAtBottomChange?.(false);
+      }
+    }
+  }, [totalHeight, onAtBottomChange, initialScrollPosition, items, childPositions, heightMapRef]);
+  const { startNode, endNode } = useScrollState({
+    scrollTop,
+    itemCount: items.length,
+    overscanCount,
+    viewportHeight,
+    childPositions
+  });
+  const onScroll = useCallback(
+    (e) => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      animationFrameRef.current = requestAnimationFrame(() => {
+        animationFrameRef.current = null;
+        const target = e.target;
+        const newScrollTop = target.scrollTop;
+        if (syncScrollUpdates) {
+          flushSync(() => setScrollTop(newScrollTop));
+        } else {
+          setScrollTop(newScrollTop);
+        }
+        if (programmaticScrollRef.current) return;
+        const atBottom = target.scrollHeight - newScrollTop - target.clientHeight <= 1;
+        if (isAtBottomRef.current !== atBottom) {
+          isAtBottomRef.current = atBottom;
+          onAtBottomChange?.(atBottom);
+        }
+      });
+    },
+    [syncScrollUpdates, onAtBottomChange]
+  );
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", onScroll);
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [onScroll]);
+  const scrollToBottom = useCallback(
+    (behavior = "auto") => {
+      const el = containerRef.current;
+      if (!el || items.length === 0) return;
+      el.scrollTo({ top: el.scrollHeight, left: 0, behavior });
+      isAtBottomRef.current = true;
+      onAtBottomChange?.(true);
+    },
+    [items.length, onAtBottomChange]
+  );
+  const scrollToItem = useCallback(
+    (index, align = "center") => {
+      const el = containerRef.current;
+      if (!el || index < 0 || index >= items.length) {
+        console.warn("[scrollToItem] SKIP", { index, itemsLength: items.length, hasEl: !!el });
+        return;
+      }
+      const itemTop = childPositions[index];
+      const itemHeight = heightMapRef.current.get(items[index].id) ?? 0;
+      let target;
+      if (align === "start") {
+        target = itemTop;
+      } else if (align === "end") {
+        target = itemTop + itemHeight - el.clientHeight;
+      } else {
+        target = itemTop + itemHeight / 2 - el.clientHeight / 2;
+      }
+      const maxScrollTop = el.scrollHeight - el.clientHeight;
+      const finalTarget = Math.max(0, Math.min(target, maxScrollTop));
+      console.log("[scrollToItem]", {
+        index,
+        align,
+        itemId: items[index].id,
+        itemTop,
+        itemHeight,
+        target,
+        finalTarget,
+        viewportHeight: el.clientHeight,
+        scrollHeight: el.scrollHeight,
+        totalHeight,
+        maxScrollTop
+      });
+      programmaticScrollRef.current = true;
+      isAtBottomRef.current = false;
+      el.scrollTo({ top: finalTarget, left: 0, behavior: "auto" });
+      requestAnimationFrame(() => {
+        programmaticScrollRef.current = false;
+      });
+    },
+    [childPositions, items, heightMapRef]
+  );
+  useImperativeHandle(ref, () => ({
+    scrollToItem,
+    scrollToBottom,
+    scrollToOffset: (offset, behavior = "auto") => {
+      containerRef.current?.scrollTo({ top: offset, left: 0, behavior });
+    },
+    getScrollOffset: () => containerRef.current?.scrollTop ?? 0
+  }));
+  useLayoutEffect(() => {
+    if (!mountedRef.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    if (prevScrollHeightRef.current > 0 && !isMeasuring) {
+      const diff = el.scrollHeight - prevScrollHeightRef.current;
+      console.log("[totalHeight] backward adjust", { diff, prevScrollHeight: prevScrollHeightRef.current, newScrollHeight: el.scrollHeight });
+      if (diff > 0) {
+        el.scrollTop += diff;
+        setScrollTop(el.scrollTop);
+      }
+      prevScrollHeightRef.current = 0;
+      backwardLoadingRef.current = false;
+      return;
+    }
+    if (forwardLoadingRef.current) {
+      if (!isMeasuring) {
+        forwardLoadingRef.current = false;
+      }
+      return;
+    }
+    if (isAtBottomRef.current && !isMeasuring) {
+      console.log("[totalHeight] stick-to-bottom", { scrollHeight: el.scrollHeight });
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [totalHeight, isMeasuring]);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el || !mountedRef.current || programmaticScrollRef.current) return;
+    const actualScrollTop = el.scrollTop;
+    if (actualScrollTop <= threshold && onStartReached && !backwardLoadingRef.current && prevScrollHeightRef.current === 0) {
+      console.log("[reach] START reached", { actualScrollTop, threshold, scrollHeight: el.scrollHeight, hasCallback: !!onStartReached });
+      backwardLoadingRef.current = true;
+      prevScrollHeightRef.current = el.scrollHeight;
+      Promise.resolve(onStartReached()).catch(() => {
+        prevScrollHeightRef.current = 0;
+        backwardLoadingRef.current = false;
+      });
+      return;
+    }
+    const distFromBottom = el.scrollHeight - actualScrollTop - el.clientHeight;
+    if (distFromBottom <= threshold && onEndReached && !forwardLoadingRef.current) {
+      console.log("[reach] END reached", { distFromBottom, threshold, actualScrollTop, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight });
+      forwardLoadingRef.current = true;
+      Promise.resolve(onEndReached()).catch(() => {
+        forwardLoadingRef.current = false;
+      });
+    }
+  }, [scrollTop, threshold, onStartReached, onEndReached]);
+  const visibleChildren = useMemo(() => {
+    if (viewportHeight === 0) return null;
+    const result = [];
+    for (let i = startNode; i <= endNode && i < items.length; i++) {
+      const item = items[i];
+      result.push(
+        /* @__PURE__ */ jsx(
+          Measure,
+          {
+            itemId: item.id,
+            position: childPositions[i],
+            onHeightChange,
+            knownHeight: heightMapRef.current.get(item.id),
+            children: renderItem(item, i)
+          },
+          item.id
+        )
+      );
+    }
+    return result;
+  }, [startNode, endNode, items, childPositions, renderItem, onHeightChange, viewportHeight]);
+  const groupWrappers = useMemo(() => {
+    if (!groupInfo || !renderGroupHeader || viewportHeight === 0) return null;
+    const renderedGroups = /* @__PURE__ */ new Set();
+    const result = [];
+    for (let i = startNode; i <= endNode && i < items.length; i++) {
+      const groupKey = groupInfo.groupKeyByIndex[i];
+      if (!groupKey || renderedGroups.has(groupKey)) continue;
+      renderedGroups.add(groupKey);
+      const groupTop = groupInfo.groupStartPositions.get(groupKey) ?? 0;
+      const groupHeight = groupInfo.heightByGroup.get(groupKey) ?? 0;
+      result.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: groupTop,
+              left: 0,
+              width: "100%",
+              height: groupHeight,
+              pointerEvents: "none",
+              zIndex: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "sticky",
+                  top: 0,
+                  pointerEvents: "auto"
+                },
+                children: renderGroupHeader(groupKey)
+              }
+            )
+          },
+          `__group_${groupKey}`
+        )
+      );
+    }
+    return result;
+  }, [groupInfo, renderGroupHeader, startNode, endNode, items, viewportHeight]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { overflow: "auto", position: "relative", ...style },
+      children: [
+        (backwardLoadingRef.current || isMeasuring) && loadingComponent,
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: totalHeight }, children: [
+          groupWrappers,
+          visibleChildren
+        ] }),
+        forwardLoadingRef.current && bottomLoadingComponent
+      ]
+    }
+  );
+}
+var VirtualScroll = forwardRef(VirtualScrollInner);
+var IMAGE_LOAD_TIMEOUT = 5e3;
+function InitialMeasure({
+  children,
+  itemId,
+  onMeasured
+}) {
+  const ref = useRef(null);
+  const reportedRef = useRef(false);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || reportedRef.current) return;
+    const report = (reason) => {
+      if (reportedRef.current) return;
+      reportedRef.current = true;
+      const height = Math.ceil(node.offsetHeight);
+      const images2 = node.querySelectorAll("img");
+      const imgInfo = Array.from(images2).map((img) => ({
+        complete: img.complete,
+        naturalHeight: img.naturalHeight,
+        offsetHeight: img.offsetHeight,
+        src: img.src.slice(-40)
+      }));
+      console.log(`[InitialMeasure] ${itemId} \u2192 ${height}px (${reason})`, imgInfo.length > 0 ? imgInfo : "no images");
+      onMeasured(itemId, Math.max(height, 1));
+    };
+    const images = node.querySelectorAll("img");
+    const pending = [];
+    images.forEach((img) => {
+      if (!img.complete) pending.push(img);
+    });
+    if (pending.length === 0) {
+      queueMicrotask(() => report(images.length > 0 ? "images already complete" : "no images"));
+      return;
+    }
+    console.log(`[InitialMeasure] ${itemId} waiting for ${pending.length} image(s)`);
+    let remaining = pending.length;
+    const onSettled = () => {
+      remaining--;
+      if (remaining <= 0) report("image load/error");
+    };
+    pending.forEach((img) => {
+      img.addEventListener("load", onSettled, { once: true });
+      img.addEventListener("error", onSettled, { once: true });
+    });
+    const timeout = setTimeout(() => report("timeout"), IMAGE_LOAD_TIMEOUT);
+    return () => {
+      clearTimeout(timeout);
+      pending.forEach((img) => {
+        img.removeEventListener("load", onSettled);
+        img.removeEventListener("error", onSettled);
+      });
+    };
+  }, [itemId, onMeasured]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-dynamic-scroll-measure": itemId,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        visibility: "hidden",
+        pointerEvents: "none"
+      },
+      children
+    }
+  );
+}
+function DynamicScrollInner({
+  items,
+  renderItem,
+  overscanCount,
+  estimatedItemSize,
+  onStartReached,
+  onEndReached,
+  threshold,
+  onAtBottomChange,
+  syncScrollUpdates,
+  className,
+  style,
+  groupBy,
+  renderGroupHeader,
+  renderGroupSeparator,
+  loadingComponent,
+  bottomLoadingComponent,
+  initialScrollPosition = "bottom",
+  onMeasurementComplete,
+  initialLoadingComponent
+}, ref) {
+  const itemsWithSeparators = useMemo(() => {
+    if (!groupBy || !renderGroupSeparator) return items;
+    const result = [];
+    let prevGroup = null;
+    for (let i = 0; i < items.length; i++) {
+      const currentGroup = groupBy(items[i]);
+      if (currentGroup !== prevGroup) {
+        result.push({
+          id: `__separator_${currentGroup}`,
+          __isSeparator: true,
+          __groupKey: currentGroup
+        });
+        prevGroup = currentGroup;
+      }
+      result.push(items[i]);
+    }
+    return result;
+  }, [items, groupBy, renderGroupSeparator]);
+  const wrappedRenderItem = useMemo(() => {
+    if (!groupBy || !renderGroupSeparator) return renderItem;
+    return (item, _index) => {
+      if ("__isSeparator" in item && item.__isSeparator) {
+        return renderGroupSeparator(item.__groupKey);
+      }
+      return renderItem(item, _index);
+    };
+  }, [groupBy, renderGroupSeparator, renderItem]);
+  const allItems = itemsWithSeparators;
+  const {
+    heightMapRef,
+    isAllMeasured,
+    unmeasuredIds,
+    onItemMeasured,
+    onHeightChange,
+    version
+  } = useHeightMap({ items: allItems, estimatedItemSize });
+  const hasEverMeasuredRef = useRef(false);
+  if (isAllMeasured && !hasEverMeasuredRef.current) {
+    hasEverMeasuredRef.current = true;
+    console.log("[DynamicScroll] initial measurement complete", { itemCount: allItems.length, unmeasuredCount: unmeasuredIds.length });
+  }
+  const isMeasuring = !isAllMeasured && hasEverMeasuredRef.current;
+  const innerRef = useRef(null);
+  const pendingScrollRef = useRef(null);
+  const isMeasuringRef = useRef(isMeasuring);
+  isMeasuringRef.current = isMeasuring;
+  const wasMeasuringRef = useRef(false);
+  useEffect(() => {
+    if (isMeasuring) {
+      wasMeasuringRef.current = true;
+      console.log("[DynamicScroll] measuring started", { unmeasuredCount: unmeasuredIds.length, totalItems: allItems.length });
+    } else if (wasMeasuringRef.current) {
+      wasMeasuringRef.current = false;
+      console.log("[DynamicScroll] measuring complete", { hasPendingScroll: !!pendingScrollRef.current });
+      if (pendingScrollRef.current) {
+        pendingScrollRef.current();
+        pendingScrollRef.current = null;
+      }
+      onMeasurementComplete?.();
+    }
+  }, [isMeasuring, onMeasurementComplete, unmeasuredIds.length, allItems.length]);
+  const toInternalIndex = useCallback(
+    (externalIndex) => {
+      if (!groupBy || !renderGroupSeparator) return externalIndex;
+      let separatorCount = 0;
+      let prevGroup = null;
+      for (let i = 0; i <= externalIndex && i < items.length; i++) {
+        const group = groupBy(items[i]);
+        if (group !== prevGroup) {
+          separatorCount++;
+          prevGroup = group;
+        }
+      }
+      return externalIndex + separatorCount;
+    },
+    [items, groupBy, renderGroupSeparator]
+  );
+  useImperativeHandle(ref, () => ({
+    scrollToItem: (index, align) => {
+      const internalIdx = toInternalIndex(index);
+      console.log("[DynamicScroll.scrollToItem]", { externalIndex: index, internalIndex: internalIdx, align, isMeasuring: isMeasuringRef.current });
+      const action = () => innerRef.current?.scrollToItem(internalIdx, align);
+      isMeasuringRef.current ? pendingScrollRef.current = action : action();
+    },
+    scrollToBottom: (behavior) => {
+      console.log("[DynamicScroll.scrollToBottom]", { behavior, isMeasuring: isMeasuringRef.current, queued: isMeasuringRef.current });
+      const action = () => innerRef.current?.scrollToBottom(behavior);
+      isMeasuringRef.current ? pendingScrollRef.current = action : action();
+    },
+    scrollToOffset: (offset, behavior) => {
+      const action = () => innerRef.current?.scrollToOffset(offset, behavior);
+      isMeasuringRef.current ? pendingScrollRef.current = action : action();
+    },
+    getScrollOffset: () => innerRef.current?.getScrollOffset() ?? 0
+  }));
+  const stableItemsRef = useRef(allItems);
+  if (!isMeasuring) {
+    stableItemsRef.current = allItems;
+  }
+  const stableItems = isMeasuring ? stableItemsRef.current : allItems;
+  const { childPositions, totalHeight } = usePositions({
+    items: stableItems,
+    heightMapRef,
+    version,
+    estimatedItemSize
+  });
+  const groupByWithSeparator = useMemo(() => {
+    if (!groupBy) return void 0;
+    return (item) => {
+      if ("__isSeparator" in item && item.__isSeparator) {
+        return item.__groupKey;
+      }
+      return groupBy(item);
+    };
+  }, [groupBy]);
+  const groupInfo = useGroupPositions(stableItems, groupByWithSeparator, heightMapRef, version);
+  const virtualScrollGroupInfo = useMemo(() => {
+    if (!groupInfo || childPositions.length === 0) return null;
+    const groupStartPositions = /* @__PURE__ */ new Map();
+    let prevGroup = null;
+    for (let i = 0; i < groupInfo.groupKeyByIndex.length; i++) {
+      const group = groupInfo.groupKeyByIndex[i];
+      if (group !== prevGroup) {
+        groupStartPositions.set(group, childPositions[i] ?? 0);
+        prevGroup = group;
+      }
+    }
+    return {
+      heightByGroup: groupInfo.heightByGroup,
+      groupKeyByIndex: groupInfo.groupKeyByIndex,
+      groupStartPositions
+    };
+  }, [groupInfo, childPositions]);
+  if (!hasEverMeasuredRef.current) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        style: {
+          overflow: "hidden",
+          position: "relative",
+          ...style
+        },
+        children: [
+          initialLoadingComponent,
+          unmeasuredIds.map((id) => {
+            const index = allItems.findIndex((item) => item.id === id);
+            if (index === -1) return null;
+            return /* @__PURE__ */ jsx(InitialMeasure, { itemId: id, onMeasured: onItemMeasured, children: wrappedRenderItem(allItems[index], index) }, id);
+          })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMeasuring && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          overflow: "hidden",
+          height: 0,
+          visibility: "hidden",
+          pointerEvents: "none"
+        },
+        children: unmeasuredIds.map((id) => {
+          const index = allItems.findIndex((item) => item.id === id);
+          if (index === -1) return null;
+          return /* @__PURE__ */ jsx(InitialMeasure, { itemId: id, onMeasured: onItemMeasured, children: wrappedRenderItem(allItems[index], index) }, id);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VirtualScroll,
+      {
+        ref: innerRef,
+        items: stableItems,
+        renderItem: wrappedRenderItem,
+        childPositions,
+        totalHeight,
+        heightMapRef,
+        onHeightChange,
+        overscanCount,
+        onStartReached: isMeasuring ? void 0 : onStartReached,
+        onEndReached: isMeasuring ? void 0 : onEndReached,
+        threshold,
+        onAtBottomChange,
+        syncScrollUpdates,
+        className,
+        style,
+        isMeasuring,
+        loadingComponent,
+        bottomLoadingComponent,
+        initialScrollPosition: typeof initialScrollPosition === "object" && "index" in initialScrollPosition ? { ...initialScrollPosition, index: toInternalIndex(initialScrollPosition.index) } : initialScrollPosition,
+        groupInfo: virtualScrollGroupInfo,
+        renderGroupHeader
+      }
+    )
+  ] });
+}
+var DynamicScroll = forwardRef(DynamicScrollInner);
+function StickyGroupHeader({
+  groupKey,
+  renderGroupHeader,
+  totalHeight,
+  cumulativeHeight,
+  topOffset = 0
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-dynamic-scroll-group-header": groupKey,
+      style: {
+        position: "sticky",
+        top: topOffset,
+        zIndex: 1,
+        height: totalHeight - cumulativeHeight,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { pointerEvents: "auto" }, children: renderGroupHeader(groupKey) })
+    }
+  );
+}
+
+export { DynamicScroll, InitialMeasure, Measure, StickyGroupHeader, VirtualScroll, generateCenteredStartNodeIndex, generateEndNodeIndex, generateStartNodeIndex, useGroupPositions, useHeightMap, usePositions, useScrollState };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map