cogsbox-state 0.5.376 → 0.5.378

package/package.json

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

package/src/CogsState.tsx

@@ -1827,8 +1827,7 @@ function createProxyHandler<T>(
               const isProgrammaticScroll = useRef(false);
               const prevTotalCountRef = useRef(0);
               const prevDepsRef = useRef(dependencies);
-              const lastScrollTopRef = useRef(0);
-
+              const lastUpdateAtScrollTop = useRef(0);
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
               useEffect(() => {
@@ -1934,11 +1933,13 @@ function createProxyHandler<T>(
                   console.log(
                     "ACTION (GETTING_HEIGHTS): Setting range to end and starting loop."
                   );
+
                   setRange({
                     startIndex: Math.max(0, totalCount - 10 - overscan),
                     endIndex: totalCount,
                   });
 
+                  let intervalId: NodeJS.Timeout;
                   intervalId = setInterval(() => {
                     const lastItemIndex = totalCount - 1;
                     const shadowArray =
@@ -1950,15 +1951,36 @@ function createProxyHandler<T>(
 
                     if (lastItemHeight > 0) {
                       clearInterval(intervalId);
-                      if (!shouldNotScroll.current) {
-                        console.log(
-                          "ACTION (GETTING_HEIGHTS): Measurement success -> SCROLLING_TO_BOTTOM"
-                        );
 
-                        setStatus("SCROLLING_TO_BOTTOM");
+                      if (!shouldNotScroll.current) {
+                        const prevCount = prevTotalCountRef.current;
+                        const addedItems = totalCount - prevCount;
+                        const smallAddition = addedItems > 0 && addedItems <= 3;
+
+                        if (smallAddition) {
+                          const addedHeight =
+                            positions[totalCount - 1]! -
+                            (positions[prevCount] ?? 0);
+                          container.scrollBy({
+                            top: addedHeight,
+                            behavior: "smooth",
+                          });
+
+                          console.log(
+                            "ACTION (GETTING_HEIGHTS): Small addition -> LOCKED_AT_BOTTOM"
+                          );
+                          setStatus("LOCKED_AT_BOTTOM");
+                        } else {
+                          console.log(
+                            "ACTION (GETTING_HEIGHTS): Large change -> SCROLLING_TO_BOTTOM"
+                          );
+                          setStatus("SCROLLING_TO_BOTTOM");
+                        }
                       }
                     }
                   }, 100);
+
+                  return () => clearInterval(intervalId);
                 } else if (status === "SCROLLING_TO_BOTTOM") {
                   console.log(
                     "ACTION (SCROLLING_TO_BOTTOM): Executing scroll."
@@ -1988,84 +2010,51 @@ function createProxyHandler<T>(
                   return () => clearTimeout(timeoutId);
                 }
 
-                // If status is IDLE_NOT_AT_BOTTOM or LOCKED_AT_BOTTOM, we do nothing here.
-                // The scroll has either finished or been disabled by the user.
-
                 return () => {
                   if (intervalId) clearInterval(intervalId);
                 };
               }, [status, totalCount, positions]);
 
-              // --- 3. USER INTERACTION & RANGE UPDATER ---
               useEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                // We no longer need a manual threshold. The `positions` array is our threshold.
+                const scrollThreshold = itemHeight;
 
                 const handleUserScroll = () => {
-                  // Essential check to ignore our own programmatic scrolls.
                   if (isProgrammaticScroll.current) {
                     return;
                   }
 
-                  const { scrollTop, clientHeight } = container;
-
-                  // --- Part 1: Quick state update logic (still important) ---
-                  const isAtBottom =
-                    container.scrollHeight -
-                      scrollTop -
-                      container.clientHeight <
-                    1;
-
-                  if (!isAtBottom) {
-                    if (status !== "IDLE_NOT_AT_BOTTOM") {
-                      setStatus("IDLE_NOT_AT_BOTTOM");
-                    }
-                  } else {
-                    if (status === "IDLE_NOT_AT_BOTTOM") {
-                      setStatus("LOCKED_AT_BOTTOM");
-                    }
+                  const scrollTop = container.scrollTop;
+                  if (
+                    Math.abs(scrollTop - lastUpdateAtScrollTop.current) <
+                    scrollThreshold
+                  ) {
+                    return;
                   }
-                  // NOTE: We've removed `shouldNotScroll` as its purpose is now better
-                  // served by the state machine itself. The state `IDLE_NOT_AT_BOTTOM`
-                  // already tells us the user has scrolled up.
 
-                  // --- Part 2: Index-Based Invalidation (The real optimization) ---
+                  console.log(
+                    `Threshold passed at ${scrollTop}px. Recalculating range...`
+                  );
 
-                  // Find the index of the item at the top of the viewport.
-                  // This binary search is extremely fast.
+                  // NOW we do the expensive work.
+                  const { clientHeight } = container;
                   let high = totalCount - 1;
                   let low = 0;
-                  let potentialTopIndex = 0;
+                  let topItemIndex = 0;
                   while (low <= high) {
                     const mid = Math.floor((low + high) / 2);
                     if (positions[mid]! < scrollTop) {
-                      potentialTopIndex = mid;
+                      topItemIndex = mid;
                       low = mid + 1;
                     } else {
                       high = mid - 1;
                     }
                   }
 
-                  // Compare the potential new start index with the current one.
-                  // Remember to account for the overscan!
-                  const potentialStartIndex = Math.max(
-                    0,
-                    potentialTopIndex - overscan
-                  );
-                  if (potentialStartIndex === range.startIndex) {
-                    // The visible items haven't changed, so we do nothing.
-                    // This is the core of the optimization.
-                    return;
-                  }
-
-                  // --- Part 3: If we're here, we MUST update the range ---
-                  console.log(
-                    `Index changed from ${range.startIndex} to ${potentialStartIndex}. Updating range.`
-                  );
-
-                  let endIndex = potentialStartIndex;
+                  const startIndex = Math.max(0, topItemIndex - overscan);
+                  let endIndex = startIndex;
                   const visibleEnd = scrollTop + clientHeight;
                   while (
                     endIndex < totalCount &&
@@ -2075,9 +2064,12 @@ function createProxyHandler<T>(
                   }
 
                   setRange({
-                    startIndex: potentialStartIndex,
+                    startIndex,
                     endIndex: Math.min(totalCount, endIndex + overscan),
                   });
+
+                  // Finally, we record that we did the work at THIS scroll position.
+                  lastUpdateAtScrollTop.current = scrollTop;
                 };
 
                 container.addEventListener("scroll", handleUserScroll, {
@@ -2085,7 +2077,7 @@ function createProxyHandler<T>(
                 });
                 return () =>
                   container.removeEventListener("scroll", handleUserScroll);
-              }, [totalCount, positions, status, range.startIndex]); // Add range.startIndex!
+              }, [totalCount, positions, itemHeight, overscan, status]);
 
               const scrollToBottom = useCallback(() => {
                 console.log(