cogsbox-state 0.5.298 → 0.5.300

package/package.json

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

package/src/CogsState.tsx

@@ -1876,20 +1876,28 @@ function createProxyHandler<T>(
                   validIndices,
                 });
               }, [range.startIndex, range.endIndex, sourceArray]);
-
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                const wasAtBottom = isAtBottomRef.current;
                 const listGrew = totalCount > previousTotalCountRef.current;
+
+                // --- THE FIX for BOTH initial load and new entries ---
+                // We capture the scroll position *before* we do anything else.
+                // We also check if we are VERY close to the bottom. This will be true
+                // on initial load (0 scrollHeight, 0 scrollTop) and when user is at the end.
+                const wasAtBottom =
+                  container.scrollHeight -
+                    container.scrollTop -
+                    container.clientHeight <
+                  5;
+
+                // Now we update the ref for the *next* render cycle.
                 previousTotalCountRef.current = totalCount;
 
                 const handleScroll = () => {
+                  // ... (binary search logic to setRange is the same) ...
                   const { scrollTop, clientHeight, scrollHeight } = container;
-                  isAtBottomRef.current =
-                    scrollHeight - scrollTop - clientHeight < 10;
-
                   let search = (list: number[], value: number) => {
                     let low = 0;
                     let high = list.length - 1;
@@ -1903,7 +1911,6 @@ function createProxyHandler<T>(
                     }
                     return low;
                   };
-
                   let startIndex = search(positions, scrollTop);
                   let endIndex = startIndex;
                   while (
@@ -1912,10 +1919,8 @@ function createProxyHandler<T>(
                   ) {
                     endIndex++;
                   }
-
                   startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
-
                   setRange((prevRange) => {
                     if (
                       prevRange.startIndex !== startIndex ||
@@ -1930,23 +1935,24 @@ function createProxyHandler<T>(
                 container.addEventListener("scroll", handleScroll, {
                   passive: true,
                 });
+                handleScroll();
 
-                if (stickToBottom) {
-                  if (isInitialMountRef.current) {
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "auto",
-                    });
-                  } else if (wasAtBottom && listGrew) {
-                    // Use 'auto' for an instant jump to the bottom to prevent visual glitches.
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "auto",
-                    });
-                  }
+                // This single block now handles all cases.
+                if (
+                  stickToBottom &&
+                  (listGrew || isInitialMountRef.current) &&
+                  wasAtBottom
+                ) {
+                  container.scrollTo({
+                    top: container.scrollHeight,
+                    behavior: "auto",
+                  });
+                }
+
+                // We only set this to false after the first correct layout has been established.
+                if (positions.length > 0) {
+                  isInitialMountRef.current = false;
                 }
-                isInitialMountRef.current = false;
-                handleScroll();
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);