cogsbox-state 0.5.304 → 0.5.306

package/package.json

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

package/src/CogsState.tsx

@@ -1814,10 +1814,21 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
+              // Force re-render when heights change
+              const [, forceUpdate] = useState({});
+
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
 
+              // Subscribe to shadow state changes
+              useEffect(() => {
+                const unsubscribe = getGlobalStore
+                  .getState()
+                  .subscribeToShadowState(stateKey, () => forceUpdate({}));
+                return unsubscribe;
+              }, [stateKey]);
+
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
                 path
@@ -1911,17 +1922,23 @@ function createProxyHandler<T>(
                 // Handle stick to bottom
                 if (stickToBottom) {
                   if (isInitialMountRef.current && totalCount > 0) {
-                    // Delay initial scroll to ensure items are rendered
-                    setTimeout(() => {
-                      if (containerRef.current) {
-                        containerRef.current.scrollTo({
-                          top: containerRef.current.scrollHeight,
-                          behavior: "auto",
-                        });
-                      }
-                    }, 0);
-                    isInitialMountRef.current = false;
-                  } else if (wasAtBottom && listGrew) {
+                    // Double rAF to ensure everything is rendered and measured
+                    requestAnimationFrame(() => {
+                      requestAnimationFrame(() => {
+                        if (containerRef.current) {
+                          containerRef.current.scrollTo({
+                            top: containerRef.current.scrollHeight,
+                            behavior: "auto",
+                          });
+                          isInitialMountRef.current = false;
+                        }
+                      });
+                    });
+                  } else if (
+                    !isInitialMountRef.current &&
+                    wasAtBottom &&
+                    listGrew
+                  ) {
                     // New items added and we were at bottom - stay at bottom
                     requestAnimationFrame(() => {
                       container.scrollTo({
@@ -1930,8 +1947,6 @@ function createProxyHandler<T>(
                       });
                     });
                   }
-                } else {
-                  isInitialMountRef.current = false;
                 }
 
                 // Run handleScroll once to set initial range