cogsbox-state 0.5.302 → 0.5.304

package/package.json

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

package/src/CogsState.tsx

@@ -1814,48 +1814,33 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              const [heightsVersion, setHeightsVersion] = useState(0);
-              const forceRecalculate = useCallback(
-                () => setHeightsVersion((v) => v + 1),
-                []
-              );
-
-              // Track scroll position
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
 
-              useEffect(() => {
-                const unsubscribe = getGlobalStore
-                  .getState()
-                  .subscribeToShadowState(stateKey, forceRecalculate);
-                const timer = setTimeout(forceRecalculate, 50);
-                return () => {
-                  unsubscribe();
-                  clearTimeout(timer);
-                };
-              }, [stateKey, forceRecalculate]);
-
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
                 path
               ) as any[];
               const totalCount = sourceArray.length;
 
+              // Calculate heights from shadow state
               const { totalHeight, positions } = useMemo(() => {
                 const shadowArray =
                   getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
                   [];
                 let height = 0;
                 const pos: number[] = [];
+
                 for (let i = 0; i < totalCount; i++) {
                   pos[i] = height;
                   const measuredHeight =
                     shadowArray[i]?.virtualizer?.itemHeight;
                   height += measuredHeight || itemHeight;
                 }
+
                 return { totalHeight: height, positions: pos };
-              }, [totalCount, stateKey, path, itemHeight, heightsVersion]);
+              }, [totalCount, stateKey, path.join("."), itemHeight]);
 
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
@@ -1881,7 +1866,6 @@ function createProxyHandler<T>(
 
                 const handleScroll = () => {
                   const { scrollTop, clientHeight, scrollHeight } = container;
-                  // Consider "at bottom" if within 10px
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
 
@@ -1926,12 +1910,17 @@ function createProxyHandler<T>(
 
                 // Handle stick to bottom
                 if (stickToBottom) {
-                  if (isInitialMountRef.current) {
-                    // First render - go to bottom instantly
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "auto",
-                    });
+                  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) {
                     // New items added and we were at bottom - stay at bottom
                     requestAnimationFrame(() => {
@@ -1941,11 +1930,10 @@ function createProxyHandler<T>(
                       });
                     });
                   }
+                } else {
+                  isInitialMountRef.current = false;
                 }
 
-                // Mark as no longer initial mount after first render
-                isInitialMountRef.current = false;
-
                 // Run handleScroll once to set initial range
                 handleScroll();