cogsbox-state 0.5.349 → 0.5.350

package/package.json

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

package/src/CogsState.tsx

@@ -1813,12 +1813,8 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
               const isLockedToBottomRef = useRef(stickToBottom);
-              const prevTotalCountRef = useRef(sourceArray.length);
+              const prevTotalCountRef = useRef(0);
 
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
@@ -1831,6 +1827,10 @@ function createProxyHandler<T>(
                 return unsubscribe;
               }, [stateKey]);
 
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
               const totalCount = sourceArray.length;
 
               const { totalHeight, positions } = useMemo(() => {
@@ -1868,14 +1868,55 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // The one and only layout effect.
+              // --- YOUR WORKING SCROLL ALGORITHM - UNTOUCHED ---
               useLayoutEffect(() => {
                 const container = containerRef.current;
-                if (!container) return;
-
                 const hasNewItems = totalCount > prevTotalCountRef.current;
 
-                // This function is now ALWAYS fresh.
+                if (
+                  !container ||
+                  !stickToBottom ||
+                  !isLockedToBottomRef.current ||
+                  !hasNewItems
+                ) {
+                  return;
+                }
+
+                // STEP 1: Set range to the end to render the items we need to measure.
+                setRange({
+                  startIndex: Math.max(0, totalCount - 10 - overscan),
+                  endIndex: totalCount,
+                });
+
+                // STEP 2: The LOOP.
+                const intervalId = setInterval(() => {
+                  const lastItemIndex = totalCount - 1;
+                  const shadowArray =
+                    getGlobalStore
+                      .getState()
+                      .getShadowMetadata(stateKey, path) || [];
+                  const lastItemHeight =
+                    shadowArray[lastItemIndex]?.virtualizer?.itemHeight || 0;
+
+                  if (lastItemHeight > 0) {
+                    clearInterval(intervalId);
+                    // STEP 3: Scroll.
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: "smooth",
+                    });
+                  }
+                }, 100);
+
+                return () => clearInterval(intervalId);
+              }, [totalCount]);
+
+              // --- THE FIX IS HERE ---
+              // This effect now correctly updates when data changes.
+              useEffect(() => {
+                const container = containerRef.current;
+                if (!container) return;
+
                 const updateVirtualRange = () => {
                   const { scrollTop, clientHeight } = container;
                   let low = 0,
@@ -1900,39 +1941,6 @@ function createProxyHandler<T>(
                   });
                 };
 
-                // --- YOUR SCROLLING LOGIC ---
-                // It only runs if we have new items and are locked to the bottom.
-                if (hasNewItems && isLockedToBottomRef.current) {
-                  // STEP 1: Set range to the end to start measuring.
-                  setRange({
-                    startIndex: Math.max(0, totalCount - 10 - overscan),
-                    endIndex: totalCount,
-                  });
-
-                  // STEP 2: Start the LOOP.
-                  const intervalId = setInterval(() => {
-                    const lastItemIndex = totalCount - 1;
-                    const shadowArray =
-                      getGlobalStore
-                        .getState()
-                        .getShadowMetadata(stateKey, path) || [];
-                    const lastItemHeight =
-                      shadowArray[lastItemIndex]?.virtualizer?.itemHeight || 0;
-
-                    if (lastItemHeight > 0) {
-                      clearInterval(intervalId);
-                      container.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: "smooth",
-                      });
-                    }
-                  }, 100);
-
-                  // This return is the cleanup for the if-block.
-                  return () => clearInterval(intervalId);
-                }
-
-                // --- USER SCROLL HANDLING ---
                 const handleUserScroll = () => {
                   const isAtBottom =
                     container.scrollHeight -
@@ -1948,14 +1956,13 @@ function createProxyHandler<T>(
                 container.addEventListener("scroll", handleUserScroll, {
                   passive: true,
                 });
-                updateVirtualRange(); // Always update range for current view.
+                updateVirtualRange(); // Always update range on render.
 
-                // This return is the cleanup for the whole effect.
                 return () =>
                   container.removeEventListener("scroll", handleUserScroll);
-              }, [totalCount, positions]); // Re-run when layout-related data changes.
+              }, [totalCount, positions]); // FIX: This now has dependencies.
 
-              // This simple effect tracks the item count for the next render.
+              // Simple effect to track previous item count for the scroll algorithm.
               useEffect(() => {
                 prevTotalCountRef.current = totalCount;
               });
@@ -1963,6 +1970,8 @@ function createProxyHandler<T>(
                 (behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current) {
                     isLockedToBottomRef.current = true;
+                    console.log("USER ACTION: Scroll lock ENABLED.");
+                    // This is a manual trigger, so we don't need the loop. Just scroll.
                     containerRef.current.scrollTo({
                       top: containerRef.current.scrollHeight,
                       behavior,
@@ -1976,6 +1985,7 @@ function createProxyHandler<T>(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current && positions[index] !== undefined) {
                     isLockedToBottomRef.current = false;
+                    console.log("USER ACTION: Scroll lock DISABLED.");
                     containerRef.current.scrollTo({
                       top: positions[index],
                       behavior,
@@ -2002,6 +2012,7 @@ function createProxyHandler<T>(
                   },
                 },
               };
+
               return {
                 virtualState,
                 virtualizerProps,