cogsbox-state 0.5.418 → 0.5.420

package/package.json

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

package/src/CogsState.tsx

@@ -1822,8 +1822,9 @@ function createProxyHandler<T>(
               });
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
               const wasAtBottomRef = useRef(true);
-              const previousCountRef = useRef(0);
               const userHasScrolledAwayRef = useRef(false);
+              const previousCountRef = useRef(0);
+
               // Subscribe to shadow state updates
               useEffect(() => {
                 const unsubscribe = getGlobalStore
@@ -1909,13 +1910,12 @@ function createProxyHandler<T>(
                 const isInitialLoad =
                   previousCountRef.current === 0 && totalCount > 0;
 
-                // Only auto-scroll if we haven't scrolled away AND we're at bottom
+                // Only auto-scroll if user hasn't scrolled away
                 if (
                   (hasNewItems || isInitialLoad) &&
                   wasAtBottomRef.current &&
                   !userHasScrolledAwayRef.current
                 ) {
-                  // First, ensure the last items are in range
                   const visibleCount = Math.ceil(
                     (containerRef.current?.clientHeight || 0) / itemHeight
                   );
@@ -1929,22 +1929,18 @@ function createProxyHandler<T>(
 
                   setRange(newRange);
 
-                  // Then scroll to the last item after it renders
                   const timeoutId = setTimeout(() => {
-                    const scrolled = scrollToLastItem();
-                    if (!scrolled && containerRef.current) {
-                      // Fallback if ref not available yet
+                    if (containerRef.current) {
                       containerRef.current.scrollTop =
                         containerRef.current.scrollHeight;
                     }
                   }, 50);
 
-                  previousCountRef.current = totalCount;
                   return () => clearTimeout(timeoutId);
                 }
 
                 previousCountRef.current = totalCount;
-              }, [totalCount]);
+              }, [totalCount, itemHeight, overscan]);
 
               // Handle scroll events
               useEffect(() => {
@@ -1956,17 +1952,16 @@ function createProxyHandler<T>(
                   const distanceFromBottom =
                     scrollHeight - scrollTop - clientHeight;
 
-                  // Track if user is at bottom with tight tolerance
-                  const isAtBottom = distanceFromBottom < 5;
-                  wasAtBottomRef.current = isAtBottom;
+                  // Track if we're at bottom
+                  wasAtBottomRef.current = distanceFromBottom < 5;
 
-                  // If user scrolls away from bottom, set the flag
-                  if (!isAtBottom && distanceFromBottom > 50) {
+                  // If user scrolls away from bottom past threshold, set flag
+                  if (distanceFromBottom > 100) {
                     userHasScrolledAwayRef.current = true;
                   }
 
-                  // If user scrolls back to bottom, clear the flag
-                  if (isAtBottom) {
+                  // If user scrolls back to bottom, clear flag
+                  if (distanceFromBottom < 5) {
                     userHasScrolledAwayRef.current = false;
                   }
 
@@ -1993,15 +1988,25 @@ function createProxyHandler<T>(
                     endIndex: Math.min(totalCount, endIndex + 1 + overscan),
                   });
                 };
+
                 container.addEventListener("scroll", handleScroll, {
                   passive: true,
                 });
 
-                // Initial setup
-                if (stickToBottom && totalCount > 0) {
-                  // For initial load, jump to bottom
-                  container.scrollTop = container.scrollHeight;
+                // Only auto-scroll on initial load when user hasn't scrolled away
+                if (
+                  stickToBottom &&
+                  totalCount > 0 &&
+                  !userHasScrolledAwayRef.current
+                ) {
+                  const { scrollTop } = container;
+                  // Only if we're at the very top (initial load)
+                  if (scrollTop === 0) {
+                    container.scrollTop = container.scrollHeight;
+                    wasAtBottomRef.current = true;
+                  }
                 }
+
                 handleScroll();
 
                 return () => {
@@ -2011,6 +2016,7 @@ function createProxyHandler<T>(
 
               const scrollToBottom = useCallback(() => {
                 wasAtBottomRef.current = true;
+                userHasScrolledAwayRef.current = false;
                 const scrolled = scrollToLastItem();
                 if (!scrolled && containerRef.current) {
                   containerRef.current.scrollTop =