cogsbox-state 0.5.322 → 0.5.324

package/package.json

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

package/src/CogsState.tsx

@@ -1814,7 +1814,10 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
+              // This ref tracks if the user is locked to the bottom.
               const isLockedToBottomRef = useRef(stickToBottom);
+
+              // This state triggers a re-render when item heights change.
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
               useEffect(() => {
@@ -1832,6 +1835,7 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
+              // Calculate heights from shadow state. This runs when data or measurements change.
               const { totalHeight, positions } = useMemo(() => {
                 const shadowArray =
                   getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
@@ -1853,6 +1857,7 @@ function createProxyHandler<T>(
                 shadowUpdateTrigger,
               ]);
 
+              // Memoize the virtualized slice of data.
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1867,10 +1872,14 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
+              // This is the main effect that handles all scrolling and updates.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
+                let scrollTimeoutId: NodeJS.Timeout;
+
+                // This function determines what's visible in the viewport.
                 const updateVirtualRange = () => {
                   if (!container) return;
                   const { scrollTop } = container;
@@ -1894,6 +1903,7 @@ function createProxyHandler<T>(
                   setRange({ startIndex, endIndex });
                 };
 
+                // This function handles ONLY user-initiated scrolls.
                 const handleUserScroll = () => {
                   isLockedToBottomRef.current =
                     container.scrollHeight -
@@ -1907,20 +1917,31 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
+                // --- THE CORE FIX ---
+                if (stickToBottom) {
+                  // We use a timeout to wait for React to render AND for useMeasure to update heights.
+                  // This is the CRUCIAL part that fixes the race condition.
+                  scrollTimeoutId = setTimeout(() => {
+                    // By the time this runs, `container.scrollHeight` is accurate.
+                    // We only scroll if the user hasn't manually scrolled up in the meantime.
+                    if (isLockedToBottomRef.current) {
+                      container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: "auto", // ALWAYS 'auto' for an instant, correct jump.
+                      });
+                    }
+                  }, 1000); // A small 50ms delay is a robust buffer.
+                }
+
                 updateVirtualRange();
 
+                // Cleanup function is vital to prevent memory leaks.
                 return () => {
+                  clearTimeout(scrollTimeoutId);
                   container.removeEventListener("scroll", handleUserScroll);
                 };
-              }, [totalCount, positions]);
-
-              // SEPARATE EFFECT JUST FOR SCROLLING TO BOTTOM
-              useEffect(() => {
-                if (stickToBottom && containerRef.current && totalCount > 0) {
-                  // Just scroll to a massive number every time count changes
-                  containerRef.current.scrollTop = 999999999;
-                }
-              }, [totalCount, stickToBottom]);
+                // This effect re-runs whenever the list size or item heights change.
+              }, [totalCount, positions, stickToBottom]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {