cogsbox-state 0.5.321 → 0.5.323

package/package.json

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

package/src/CogsState.tsx

@@ -1813,15 +1813,12 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
+
+              // This ref tracks if the user is locked to the bottom.
               const isLockedToBottomRef = useRef(stickToBottom);
-              const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
-              const hasScrolledToBottomRef = useRef(false);
 
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
-              const totalCount = sourceArray.length;
+              // This state triggers a re-render when item heights change.
+              const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
               useEffect(() => {
                 const unsubscribe = getGlobalStore
@@ -1832,52 +1829,35 @@ function createProxyHandler<T>(
                 return unsubscribe;
               }, [stateKey]);
 
-              const { totalHeight, positions, bottomItemsMeasured } =
-                useMemo(() => {
-                  const shadowArray =
-                    getGlobalStore
-                      .getState()
-                      .getShadowMetadata(stateKey, path) || [];
-                  let height = 0;
-                  const pos: number[] = [];
-                  let bottomMeasuredCount = 0;
-
-                  // Check how many of the last 20 items are measured
-                  const checkFromIndex = Math.max(0, totalCount - 20);
-
-                  for (let i = 0; i < totalCount; i++) {
-                    pos[i] = height;
-                    const measuredHeight =
-                      shadowArray[i]?.virtualizer?.itemHeight;
-
-                    if (measuredHeight) {
-                      height += measuredHeight;
-                      if (i >= checkFromIndex) {
-                        bottomMeasuredCount++;
-                      }
-                    } else {
-                      height += itemHeight;
-                    }
-                  }
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
+              const totalCount = sourceArray.length;
 
-                  // Bottom items are measured if we have measurements for the last 20 items
-                  const bottomReady =
-                    bottomMeasuredCount >=
-                    Math.min(20, totalCount - checkFromIndex);
-
-                  return {
-                    totalHeight: height,
-                    positions: pos,
-                    bottomItemsMeasured: bottomReady,
-                  };
-                }, [
-                  totalCount,
-                  stateKey,
-                  path.join("."),
-                  itemHeight,
-                  shadowUpdateTrigger,
-                ]);
+              // Calculate heights from shadow state. This runs when data or measurements change.
+              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.join("."),
+                itemHeight,
+                shadowUpdateTrigger,
+              ]);
 
+              // Memoize the virtualized slice of data.
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1892,10 +1872,14 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
+              // This is the main effect that handles all scrolling and updates.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
+                let scrollTimeoutId: NodeJS.Timeout;
+
+                // This function determines what's visible in the viewport.
                 const updateVirtualRange = () => {
                   if (!container) return;
                   const { scrollTop } = container;
@@ -1919,6 +1903,7 @@ function createProxyHandler<T>(
                   setRange({ startIndex, endIndex });
                 };
 
+                // This function handles ONLY user-initiated scrolls.
                 const handleUserScroll = () => {
                   isLockedToBottomRef.current =
                     container.scrollHeight -
@@ -1932,39 +1917,32 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // STICK TO BOTTOM LOGIC
-                if (
-                  stickToBottom &&
-                  !hasScrolledToBottomRef.current &&
-                  totalCount > 0
-                ) {
-                  if (!bottomItemsMeasured) {
-                    // Step 1: Jump to near bottom to trigger rendering of bottom items
-                    console.log(
-                      "[VirtualView] Jumping to near bottom to trigger measurements"
-                    );
-                    const jumpPosition = Math.max(
-                      0,
-                      (totalCount - 30) * itemHeight
-                    );
-                    container.scrollTop = jumpPosition;
-                  } else {
-                    // Step 2: Bottom items are measured, now scroll to actual bottom
-                    console.log(
-                      "[VirtualView] Bottom items measured, scrolling to true bottom"
-                    );
-                    hasScrolledToBottomRef.current = true;
-                    container.scrollTop = container.scrollHeight;
-                    isLockedToBottomRef.current = true;
-                  }
+                // --- THE CORE FIX ---
+                if (stickToBottom) {
+                  // We use a timeout to wait for React to render AND for useMeasure to update heights.
+                  // This is the CRUCIAL part that fixes the race condition.
+                  scrollTimeoutId = setTimeout(() => {
+                    // By the time this runs, `container.scrollHeight` is accurate.
+                    // We only scroll if the user hasn't manually scrolled up in the meantime.
+                    if (isLockedToBottomRef.current) {
+                      container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: "auto", // ALWAYS 'auto' for an instant, correct jump.
+                      });
+                    }
+                  }, 1000); // A small 50ms delay is a robust buffer.
                 }
 
+                // Update the visible range on initial load.
                 updateVirtualRange();
 
+                // Cleanup function is vital to prevent memory leaks.
                 return () => {
+                  clearTimeout(scrollTimeoutId);
                   container.removeEventListener("scroll", handleUserScroll);
                 };
-              }, [totalCount, positions, stickToBottom, bottomItemsMeasured]);
+                // This effect re-runs whenever the list size or item heights change.
+              }, [totalCount, positions, stickToBottom]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -1995,13 +1973,7 @@ function createProxyHandler<T>(
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
-                  style: {
-                    overflowY: "auto" as const,
-                    height: "100%",
-                    overflowAnchor: stickToBottom
-                      ? ("auto" as const)
-                      : ("none" as const),
-                  },
+                  style: { overflowY: "auto" as const, height: "100%" },
                 },
                 inner: {
                   style: {