cogsbox-state 0.5.300 → 0.5.302

package/package.json

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

package/src/CogsState.tsx

@@ -1803,7 +1803,7 @@ function createProxyHandler<T>(
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
               const {
-                itemHeight = 50, // Default/estimated height
+                itemHeight = 50,
                 overscan = 5,
                 stickToBottom = false,
               } = options;
@@ -1820,27 +1820,21 @@ function createProxyHandler<T>(
                 []
               );
 
-              // --- This useEffect now cleanly subscribes to height changes ---
+              // Track scroll position
+              const isAtBottomRef = useRef(stickToBottom);
+              const previousTotalCountRef = useRef(0);
+              const isInitialMountRef = useRef(true);
+
               useEffect(() => {
-                // Subscribe to shadow state changes for this specific key.
                 const unsubscribe = getGlobalStore
                   .getState()
                   .subscribeToShadowState(stateKey, forceRecalculate);
-
-                // On initial mount, we still need to trigger one recalculation
-                // to capture heights from the very first render.
                 const timer = setTimeout(forceRecalculate, 50);
-
-                // Cleanup function to unsubscribe when the component unmounts.
                 return () => {
                   unsubscribe();
                   clearTimeout(timer);
                 };
-              }, [stateKey, forceRecalculate]); // Runs only once on mount.
-
-              const isAtBottomRef = useRef(stickToBottom);
-              const previousTotalCountRef = useRef(0);
-              const isInitialMountRef = useRef(true);
+              }, [stateKey, forceRecalculate]);
 
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
@@ -1875,52 +1869,46 @@ function createProxyHandler<T>(
                   ...meta,
                   validIndices,
                 });
-              }, [range.startIndex, range.endIndex, sourceArray]);
+              }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
+
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
+                const wasAtBottom = isAtBottomRef.current;
                 const listGrew = totalCount > previousTotalCountRef.current;
-
-                // --- THE FIX for BOTH initial load and new entries ---
-                // We capture the scroll position *before* we do anything else.
-                // We also check if we are VERY close to the bottom. This will be true
-                // on initial load (0 scrollHeight, 0 scrollTop) and when user is at the end.
-                const wasAtBottom =
-                  container.scrollHeight -
-                    container.scrollTop -
-                    container.clientHeight <
-                  5;
-
-                // Now we update the ref for the *next* render cycle.
                 previousTotalCountRef.current = totalCount;
 
                 const handleScroll = () => {
-                  // ... (binary search logic to setRange is the same) ...
                   const { scrollTop, clientHeight, scrollHeight } = container;
-                  let search = (list: number[], value: number) => {
-                    let low = 0;
-                    let high = list.length - 1;
-                    while (low <= high) {
-                      const mid = Math.floor((low + high) / 2);
-                      if (list[mid]! < value) {
-                        low = mid + 1;
-                      } else {
-                        high = mid - 1;
-                      }
+                  // Consider "at bottom" if within 10px
+                  isAtBottomRef.current =
+                    scrollHeight - scrollTop - clientHeight < 10;
+
+                  // Binary search for start index
+                  let low = 0,
+                    high = totalCount - 1;
+                  while (low <= high) {
+                    const mid = Math.floor((low + high) / 2);
+                    if (positions[mid]! < scrollTop) {
+                      low = mid + 1;
+                    } else {
+                      high = mid - 1;
                     }
-                    return low;
-                  };
-                  let startIndex = search(positions, scrollTop);
+                  }
+                  const startIndex = Math.max(0, high - overscan);
+
+                  // Find end index
                   let endIndex = startIndex;
+                  const visibleEnd = scrollTop + clientHeight;
                   while (
                     endIndex < totalCount &&
-                    positions[endIndex]! < scrollTop + clientHeight
+                    positions[endIndex]! < visibleEnd
                   ) {
                     endIndex++;
                   }
-                  startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
+
                   setRange((prevRange) => {
                     if (
                       prevRange.startIndex !== startIndex ||
@@ -1935,28 +1923,35 @@ function createProxyHandler<T>(
                 container.addEventListener("scroll", handleScroll, {
                   passive: true,
                 });
-                handleScroll();
 
-                // This single block now handles all cases.
-                if (
-                  stickToBottom &&
-                  (listGrew || isInitialMountRef.current) &&
-                  wasAtBottom
-                ) {
-                  container.scrollTo({
-                    top: container.scrollHeight,
-                    behavior: "auto",
-                  });
+                // Handle stick to bottom
+                if (stickToBottom) {
+                  if (isInitialMountRef.current) {
+                    // First render - go to bottom instantly
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: "auto",
+                    });
+                  } else if (wasAtBottom && listGrew) {
+                    // New items added and we were at bottom - stay at bottom
+                    requestAnimationFrame(() => {
+                      container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: "smooth",
+                      });
+                    });
+                  }
                 }
 
-                // We only set this to false after the first correct layout has been established.
-                if (positions.length > 0) {
-                  isInitialMountRef.current = false;
-                }
+                // Mark as no longer initial mount after first render
+                isInitialMountRef.current = false;
+
+                // Run handleScroll once to set initial range
+                handleScroll();
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, overscan, stickToBottom, positions]);
+              }, [totalCount, positions, overscan, stickToBottom]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -1972,9 +1967,9 @@ function createProxyHandler<T>(
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current) {
+                  if (containerRef.current && positions[index] !== undefined) {
                     containerRef.current.scrollTo({
-                      top: positions[index] || 0,
+                      top: positions[index],
                       behavior,
                     });
                   }
@@ -1985,10 +1980,13 @@ function createProxyHandler<T>(
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
-                  style: { overflowY: "auto", height: "100%" },
+                  style: { overflowY: "auto" as const, height: "100%" },
                 },
                 inner: {
-                  style: { height: `${totalHeight}px`, position: "relative" },
+                  style: {
+                    height: `${totalHeight}px`,
+                    position: "relative" as const,
+                  },
                 },
                 list: {
                   style: {
@@ -1999,7 +1997,7 @@ function createProxyHandler<T>(
 
               return {
                 virtualState,
-                virtualizerProps: virtualizerProps as any,
+                virtualizerProps,
                 scrollToBottom,
                 scrollToIndex,
               };