cogsbox-state 0.5.422 → 0.5.424

package/package.json

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

package/src/CogsState.tsx

@@ -1824,7 +1824,7 @@ function createProxyHandler<T>(
               const wasAtBottomRef = useRef(true);
               const userHasScrolledAwayRef = useRef(false);
               const previousCountRef = useRef(0);
-
+              const lastRangeRef = useRef(range);
               // Subscribe to shadow state updates
               useEffect(() => {
                 const unsubscribe = getGlobalStore
@@ -1930,12 +1930,8 @@ function createProxyHandler<T>(
                   setRange(newRange);
 
                   const timeoutId = setTimeout(() => {
-                    if (containerRef.current) {
-                      containerRef.current.scrollTop =
-                        containerRef.current.scrollHeight;
-                    }
+                    scrollToIndex(totalCount - 1, "smooth");
                   }, 50);
-
                   return () => clearTimeout(timeoutId);
                 }
 
@@ -1960,7 +1956,7 @@ function createProxyHandler<T>(
                     userHasScrolledAwayRef.current = true;
                   }
 
-                  // If user scrolls back to bottom, clear flag
+                  // If user scrolls back to bottom, cle
                   if (distanceFromBottom < 5) {
                     userHasScrolledAwayRef.current = false;
                   }
@@ -1983,10 +1979,26 @@ function createProxyHandler<T>(
                     endIndex = i;
                   }
 
-                  setRange({
-                    startIndex: Math.max(0, startIndex),
-                    endIndex: Math.min(totalCount, endIndex + 1 + overscan),
-                  });
+                  const newStartIndex = Math.max(0, startIndex);
+                  const newEndIndex = Math.min(
+                    totalCount,
+                    endIndex + 1 + overscan
+                  );
+
+                  // THE FIX: Only update state if the visible range of items has changed.
+                  if (
+                    newStartIndex !== lastRangeRef.current.startIndex ||
+                    newEndIndex !== lastRangeRef.current.endIndex
+                  ) {
+                    lastRangeRef.current = {
+                      startIndex: newStartIndex,
+                      endIndex: newEndIndex,
+                    };
+                    setRange({
+                      startIndex: newStartIndex,
+                      endIndex: newEndIndex,
+                    });
+                  }
                 };
 
                 container.addEventListener("scroll", handleScroll, {
@@ -2023,32 +2035,48 @@ function createProxyHandler<T>(
                     containerRef.current.scrollHeight;
                 }
               }, [scrollToLastItem]);
-
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
+                  const container = containerRef.current;
+                  if (!container) return;
+
+                  const isLastItem = index === totalCount - 1;
+
+                  // --- Special Case: The Last Item ---
+                  if (isLastItem) {
+                    // For the last item, scrollIntoView can fail. The most reliable method
+                    // is to scroll the parent container to its maximum scroll height.
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: behavior,
+                    });
+                    return; // We're done.
+                  }
+
+                  // --- Standard Case: All Other Items ---
+                  // For all other items, we find the ref and use scrollIntoView.
                   const shadowArray =
                     getGlobalStore
                       .getState()
                       .getShadowMetadata(stateKey, path) || [];
                   const itemData = shadowArray[index];
+                  const element = itemData?.virtualizer?.domRef;
 
-                  if (itemData?.virtualizer?.domRef) {
-                    const element = itemData.virtualizer.domRef;
-                    if (element && element.scrollIntoView) {
-                      element.scrollIntoView({ behavior, block: "end" });
-                      return;
-                    }
-                  }
-
-                  // Fallback to position-based scrolling
-                  if (containerRef.current && positions[index] !== undefined) {
-                    containerRef.current.scrollTo({
+                  if (element) {
+                    // 'center' gives a better user experience for items in the middle of the list.
+                    element.scrollIntoView({
+                      behavior: behavior,
+                      block: "center",
+                    });
+                  } else if (positions[index] !== undefined) {
+                    // Fallback if the ref isn't available for some reason.
+                    container.scrollTo({
                       top: positions[index],
                       behavior,
                     });
                   }
                 },
-                [positions, stateKey, path]
+                [positions, stateKey, path, totalCount] // Add totalCount to the dependencies
               );
 
               const virtualizerProps = {