cogsbox-state 0.5.345 → 0.5.347

package/package.json

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

package/src/CogsState.tsx

@@ -1807,29 +1807,12 @@ function createProxyHandler<T>(
                 overscan = 6,
                 stickToBottom = false,
               } = options;
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
+
               const containerRef = useRef<HTMLDivElement | null>(null);
-              // We'll set the range to the end first, then let an effect handle the scroll.
-              const initialRange = () => {
-                const sourceArray = getGlobalStore
-                  .getState()
-                  .getNestedState(stateKey, path) as any[];
-                if (stickToBottom) {
-                  const visibleCount = 10; // A reasonable guess for initial render
-                  return {
-                    startIndex: Math.max(
-                      0,
-                      sourceArray.length - visibleCount - overscan
-                    ),
-                    endIndex: sourceArray.length,
-                  };
-                }
-                return { startIndex: 0, endIndex: 10 };
-              };
-              const [range, setRange] = useState(initialRange);
+              const [range, setRange] = useState({
+                startIndex: 0,
+                endIndex: 10,
+              });
               const isLockedToBottomRef = useRef(stickToBottom);
 
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
@@ -1843,6 +1826,10 @@ function createProxyHandler<T>(
                 return unsubscribe;
               }, [stateKey]);
 
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
               const totalCount = sourceArray.length;
 
               const { totalHeight, positions } = useMemo(() => {
@@ -1880,47 +1867,67 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // This is the implementation of YOUR ALGORITHM.
+              // --- YOUR SCROLLING ALGORITHM (UNCHANGED and WORKING) ---
+              // This effect is the entry point. It triggers when new items are added.
               useLayoutEffect(() => {
                 const container = containerRef.current;
+                // Only run if we are supposed to be at the bottom.
                 if (
                   !container ||
-                  !stickToBottom ||
-                  !isLockedToBottomRef.current
+                  !isLockedToBottomRef.current ||
+                  totalCount === 0
                 ) {
                   return;
                 }
 
-                // STEP 1: Check if the last item is measured. This is our "ready" signal.
-                const lastItemIndex = totalCount - 1;
-                const shadowArray =
-                  getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
-                  [];
-                const lastItemIsMeasured =
-                  lastItemIndex >= 0 &&
-                  shadowArray[lastItemIndex]?.virtualizer?.itemHeight > 0;
-
-                // STEP 2: If it's measured, we know totalHeight is correct. We can now scroll.
-                if (lastItemIsMeasured || totalCount === 0) {
-                  // A timeout is essential for 'smooth' to work reliably after a render.
-                  const scrollTimeout = setTimeout(() => {
+                // STEP 1: Set the range to the end so the last items are rendered.
+                const visibleCount = 10;
+                setRange({
+                  startIndex: Math.max(0, totalCount - visibleCount - overscan),
+                  endIndex: totalCount,
+                });
+
+                // STEP 2: Start the LOOP.
+                let loopCount = 0;
+                const intervalId = setInterval(() => {
+                  loopCount++;
+                  // The Check: Get the last item's height FROM THE SHADOW OBJECT.
+                  const lastItemIndex = totalCount - 1;
+                  const shadowArray =
+                    getGlobalStore
+                      .getState()
+                      .getShadowMetadata(stateKey, path) || [];
+                  const lastItemHeight =
+                    shadowArray[lastItemIndex]?.virtualizer?.itemHeight || 0;
+
+                  if (lastItemHeight > 0) {
+                    // EXIT CONDITION MET
+                    clearInterval(intervalId); // Stop the loop.
+
+                    // STEP 3: Scroll.
                     container.scrollTo({
                       top: container.scrollHeight,
                       behavior: "smooth",
                     });
-                  }, 50); // A small buffer is safer than 0ms.
+                  } else {
+                    if (loopCount > 20) {
+                      // Safety break
+                      clearInterval(intervalId);
+                    }
+                  }
+                }, 100);
 
-                  return () => clearTimeout(scrollTimeout);
-                }
-                // If the last item is NOT measured, this effect does nothing and simply waits.
-                // It will automatically re-run when the measurement comes in (via shadowUpdateTrigger).
-              }, [totalCount, totalHeight, stickToBottom]); // Re-run when layout changes.
+                // Cleanup: Stop the loop if the component unmounts.
+                return () => clearInterval(intervalId);
+              }, [totalCount]); // This whole process triggers ONLY when totalCount changes.
 
-              // This effect ONLY handles user interaction and range updates.
+              // --- THE FIX IS HERE ---
+              // This effect now correctly handles user scrolling AND updates the view.
               useEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
+                // This function now always has the LATEST totalCount and positions.
                 const updateVirtualRange = () => {
                   const { scrollTop, clientHeight } = container;
                   let low = 0,
@@ -1954,18 +1961,19 @@ function createProxyHandler<T>(
                   if (!isAtBottom) {
                     isLockedToBottomRef.current = false;
                   }
+                  // This always calls the fresh version of updateVirtualRange.
                   updateVirtualRange();
                 };
 
                 container.addEventListener("scroll", handleUserScroll, {
                   passive: true,
                 });
-                // Initial range calculation
-                updateVirtualRange();
+                updateVirtualRange(); // Update range on initial load and when data changes.
 
+                // This cleanup is crucial. It removes the old listener before adding a new one.
                 return () =>
                   container.removeEventListener("scroll", handleUserScroll);
-              }, [totalCount, positions]);
+              }, [totalCount, positions]); // Its dependency array now includes totalCount and positions.
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -2010,7 +2018,6 @@ function createProxyHandler<T>(
                   },
                 },
               };
-
               return {
                 virtualState,
                 virtualizerProps,