cogsbox-state 0.5.308 → 0.5.310

package/package.json

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

package/src/CogsState.tsx

@@ -1817,6 +1817,20 @@ function createProxyHandler<T>(
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
+              const previousTotalHeightRef = useRef(0);
+              const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
+
+              useEffect(() => {
+                // Subscribe to shadow state updates for this stateKey
+                const unsubscribe = getGlobalStore
+                  .getState()
+                  .subscribeToShadowState(stateKey, () => {
+                    // Force recalculation when shadow state updates
+                    setShadowUpdateTrigger((prev) => prev + 1);
+                  });
+
+                return unsubscribe;
+              }, [stateKey]);
 
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
@@ -1840,7 +1854,14 @@ function createProxyHandler<T>(
                 }
 
                 return { totalHeight: height, positions: pos };
-              }, [totalCount, stateKey, path.join("."), itemHeight]);
+              }, [
+                totalCount,
+                stateKey,
+                path.join("."),
+                itemHeight,
+                shadowUpdateTrigger,
+              ]);
+
               console.log("height", totalHeight);
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
@@ -1862,12 +1883,14 @@ function createProxyHandler<T>(
 
                 const wasAtBottom = isAtBottomRef.current;
                 const listGrew = totalCount > previousTotalCountRef.current;
+                const heightGrew = totalHeight > previousTotalHeightRef.current;
                 previousTotalCountRef.current = totalCount;
+                previousTotalHeightRef.current = totalHeight;
 
                 const handleScroll = () => {
                   const { scrollTop, clientHeight, scrollHeight } = container;
                   isAtBottomRef.current =
-                    scrollHeight - scrollTop - clientHeight < 10;
+                    scrollHeight - scrollTop - clientHeight < 30;
 
                   // Binary search for start index
                   let low = 0,
@@ -1920,7 +1943,7 @@ function createProxyHandler<T>(
                       behavior: "auto",
                     });
                     isInitialMountRef.current = false;
-                  } else if (wasAtBottom && listGrew) {
+                  } else if (wasAtBottom && (listGrew || heightGrew)) {
                     console.log(
                       "stickToBottom wasAtBottom && listGrew",
                       container.scrollHeight