cogsbox-state 0.5.294 → 0.5.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.294",
+  "version": "0.5.296",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -1814,20 +1814,6 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              // --- State Tracking Refs for Stability ---
-              const isAtBottomRef = useRef(stickToBottom);
-              // Store the scroll position before a new item is added
-              const scrollOffsetRef = useRef(0);
-              // Ref to track if the list has grown, to trigger scroll correction
-              const listGrewRef = useRef(false);
-
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
-              const totalCount = sourceArray.length;
-
-              // Helper to get measured heights or the default
               const getItemHeight = useCallback(
                 (index: number): number => {
                   const metadata = getGlobalStore
@@ -1838,20 +1824,28 @@ function createProxyHandler<T>(
                 [itemHeight, stateKey, path]
               );
 
-              // Pre-calculate total height and the top offset of each item
+              const isAtBottomRef = useRef(stickToBottom);
+              const previousTotalCountRef = useRef(0);
+              const isInitialMountRef = useRef(true);
+
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
+              const totalCount = sourceArray.length;
+
               const { totalHeight, positions } = useMemo(() => {
-                let currentHeight = 0;
+                let height = 0;
                 const pos: number[] = [];
                 for (let i = 0; i < totalCount; i++) {
-                  pos[i] = currentHeight;
-                  currentHeight += getItemHeight(i);
+                  pos[i] = height;
+                  height += getItemHeight(i);
+                  console.log("height", getItemHeight(i), height);
                 }
-
-                console.log("totalHeight", currentHeight);
-                return { totalHeight: currentHeight, positions: pos };
+                return { totalHeight: height, positions: pos };
               }, [totalCount, getItemHeight]);
 
-              // This is identical to your original code
+              // This logic is IDENTICAL to your original code.
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1866,55 +1860,38 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // --- STABLE SCROLL LOGIC ---
-              // useLayoutEffect runs after DOM mutations but before the browser paints.
-              // This is the perfect place to correct scroll positions.
+              // This useLayoutEffect is from your original code.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                // If the list grew, we need to adjust the scroll position
-                // to prevent the content from jumping.
-                if (listGrewRef.current) {
-                  listGrewRef.current = false; // Reset the flag
-
-                  if (isAtBottomRef.current) {
-                    // If we were at the bottom, stay at the bottom.
-                    // This is the fix for the auto-scroll issue.
-                    container.scrollTop = container.scrollHeight;
-                  } else {
-                    // If we were in the middle, restore the previous scroll position
-                    // plus the height of the content that was added above us.
-                    // This is an advanced case, but for now, let's keep it simple
-                    // as most use-cases are for chat-like views. For a simple list,
-                    // just staying at the bottom is the main goal.
-                  }
-                }
-              }, [totalHeight]); // This effect runs whenever the total height changes
-
-              useEffect(() => {
-                const container = containerRef.current;
-                if (!container) return;
-
-                // Track the previous total count to detect when new items are added
-                let previousTotalCount = totalCount;
+                const wasAtBottom = isAtBottomRef.current;
+                const listGrew = totalCount > previousTotalCountRef.current;
+                previousTotalCountRef.current = totalCount;
 
                 const handleScroll = () => {
-                  if (!container) return;
                   const { scrollTop, clientHeight, scrollHeight } = container;
-                  // Update "is at bottom" status on every scroll
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
-                  scrollOffsetRef.current = scrollTop;
-
-                  // Find start/end indices based on positions
-                  let startIndex = 0;
-                  for (let i = 0; i < positions.length; i++) {
-                    if (positions[i]! >= scrollTop) {
-                      startIndex = i;
-                      break;
+
+                  // --- THE ROBUST FIX: Binary search to find the start index ---
+                  // This is extremely fast and correctly handles all scroll positions.
+                  let search = (list: number[], value: number) => {
+                    let low = 0;
+                    let high = list.length - 1;
+                    while (low <= high) {
+                      const mid = Math.floor((low + high) / 2);
+                      const midValue = list[mid]!;
+                      if (midValue < value) {
+                        low = mid + 1;
+                      } else {
+                        high = mid - 1;
+                      }
                     }
-                  }
+                    return low;
+                  };
+
+                  let startIndex = search(positions, scrollTop);
 
                   let endIndex = startIndex;
                   while (
@@ -1926,7 +1903,7 @@ function createProxyHandler<T>(
 
                   startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
-
+                  console.log("startIndex", startIndex, "endIndex", endIndex);
                   setRange((prevRange) => {
                     if (
                       prevRange.startIndex !== startIndex ||
@@ -1938,20 +1915,33 @@ function createProxyHandler<T>(
                   });
                 };
 
-                // Check if the list has grown *before* the next render cycle
-                if (totalCount > previousTotalCount) {
-                  listGrewRef.current = true;
-                }
-                previousTotalCount = totalCount;
-
                 container.addEventListener("scroll", handleScroll, {
                   passive: true,
                 });
-                handleScroll(); // Initial calculation
+
+                // This stickToBottom logic is IDENTICAL to your original.
+                if (stickToBottom) {
+                  if (isInitialMountRef.current) {
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: "auto",
+                    });
+                  } else if (wasAtBottom && listGrew) {
+                    requestAnimationFrame(() => {
+                      container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: "smooth",
+                      });
+                    });
+                  }
+                }
+
+                isInitialMountRef.current = false;
+                handleScroll();
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, overscan, positions]); // Depend on positions to re-run scroll logic
+              }, [totalCount, overscan, stickToBottom, positions]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -1967,9 +1957,9 @@ function createProxyHandler<T>(
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current && positions[index] !== undefined) {
+                  if (containerRef.current) {
                     containerRef.current.scrollTo({
-                      top: positions[index],
+                      top: positions[index] || 0,
                       behavior,
                     });
                   }