cogsbox-state 0.5.318 → 0.5.320

package/package.json

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

package/src/CogsState.tsx

@@ -1809,6 +1809,14 @@ function createProxyHandler<T>(
               } = options;
 
               const containerRef = useRef<HTMLDivElement | null>(null);
+
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
+              const totalCount = sourceArray.length;
+
+              // Start at top, will adjust once container is measured
               const [range, setRange] = useState({
                 startIndex: 0,
                 endIndex: 10,
@@ -1816,104 +1824,41 @@ function createProxyHandler<T>(
 
               const isLockedToBottomRef = useRef(stickToBottom);
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
-
-              // Track if we've scrolled to bottom after initial load
-              const hasScrolledToBottomRef = useRef(false);
-              const lastTotalCountRef = useRef(0);
+              const hasInitializedRef = useRef(false);
 
               useEffect(() => {
-                let updateCount = 0;
                 const unsubscribe = getGlobalStore
                   .getState()
                   .subscribeToShadowState(stateKey, () => {
-                    updateCount++;
-                    if (updateCount <= 5) {
-                      console.log(
-                        `[VirtualView] Shadow update #${updateCount}`
-                      );
-                    }
                     setShadowUpdateTrigger((prev) => prev + 1);
                   });
                 return unsubscribe;
               }, [stateKey]);
 
-              const sourceArray = getGlobalStore().getNestedState(
+              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
-              ) as any[];
-              const totalCount = sourceArray.length;
-
-              console.log(
-                `[VirtualView] Initial setup - totalCount: ${totalCount}, itemHeight: ${itemHeight}, stickToBottom: ${stickToBottom}`
-              );
+                path.join("."),
+                itemHeight,
+                shadowUpdateTrigger,
+              ]);
 
-              // Reset when array size changes significantly
-              if (totalCount !== lastTotalCountRef.current) {
-                console.log(
-                  `[VirtualView] Array size changed from ${lastTotalCountRef.current} to ${totalCount}`
-                );
-                hasScrolledToBottomRef.current = false;
-                lastTotalCountRef.current = totalCount;
-              }
-
-              // Calculate heights from shadow state
-              const { totalHeight, positions, visibleMeasured } =
-                useMemo(() => {
-                  const shadowArray =
-                    getGlobalStore
-                      .getState()
-                      .getShadowMetadata(stateKey, path) || [];
-                  let height = 0;
-                  const pos: number[] = [];
-                  let measuredCount = 0;
-                  let visibleMeasuredCount = 0;
-
-                  for (let i = 0; i < totalCount; i++) {
-                    pos[i] = height;
-                    const measuredHeight =
-                      shadowArray[i]?.virtualizer?.itemHeight;
-                    if (measuredHeight) {
-                      measuredCount++;
-                      // Count measured items in current visible range
-                      if (i >= range.startIndex && i < range.endIndex) {
-                        visibleMeasuredCount++;
-                      }
-                    }
-                    height += measuredHeight || itemHeight;
-                  }
-
-                  // Check if all VISIBLE items are measured
-                  const visibleCount = range.endIndex - range.startIndex;
-                  const allVisibleMeasured =
-                    visibleMeasuredCount === visibleCount && visibleCount > 0;
-
-                  console.log(
-                    `[VirtualView] Heights calc - measured: ${measuredCount}/${totalCount}, visible measured: ${visibleMeasuredCount}/${visibleCount}, totalHeight: ${height}`
-                  );
-
-                  return {
-                    totalHeight: height,
-                    positions: pos,
-                    visibleMeasured: allVisibleMeasured,
-                  };
-                }, [
-                  totalCount,
-                  stateKey,
-                  path.join("."),
-                  itemHeight,
-                  shadowUpdateTrigger,
-                  range, // Add range dependency
-                ]);
-
-              // Memoize the virtualized slice
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
-
-                console.log(
-                  `[VirtualView] Creating virtual slice - range: ${start}-${end} (${end - start} items)`
-                );
-
                 const validIndices = Array.from(
                   { length: end - start },
                   (_, i) => start + i
@@ -1925,7 +1870,6 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // Main layout effect
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
@@ -1966,44 +1910,32 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // For stick to bottom: check conditions without triggering re-renders
+                // Initialize at bottom if needed
                 if (
                   stickToBottom &&
-                  !hasScrolledToBottomRef.current &&
-                  totalCount > 0
+                  !hasInitializedRef.current &&
+                  totalCount > 0 &&
+                  container.clientHeight > 0
                 ) {
-                  // Check current range without dependency
-                  const currentRange = range;
-                  const atEnd = currentRange.endIndex >= totalCount - 5; // Close to end
+                  hasInitializedRef.current = true;
 
-                  if (atEnd) {
-                    console.log(
-                      `[VirtualView] At end of list, scrolling to bottom`
-                    );
-                    hasScrolledToBottomRef.current = true;
-
-                    setTimeout(() => {
-                      const scrollTarget = container.scrollHeight + 1000;
-                      container.scrollTo({
-                        top: scrollTarget,
-                        behavior: "auto",
-                      });
-                      isLockedToBottomRef.current = true;
-                    }, 50);
-                  } else {
-                    // Jump close to the bottom
-                    console.log(
-                      `[VirtualView] Jumping near bottom to trigger measurements`
-                    );
-                    const estimatedScrollPosition = Math.max(
-                      0,
-                      (totalCount - 20) * itemHeight
-                    );
-                    container.scrollTo({
-                      top: estimatedScrollPosition,
-                      behavior: "auto",
-                    });
-                  }
+                  // Now we have the actual container height, calculate visible items
+                  const visibleCount = Math.ceil(
+                    container.clientHeight / itemHeight
+                  );
+                  const startIdx = Math.max(
+                    0,
+                    totalCount - visibleCount - overscan
+                  );
+
+                  // Set range to show bottom items
+                  setRange({
+                    startIndex: startIdx,
+                    endIndex: totalCount,
+                  });
+
+                  // Scroll to bottom
+                  container.scrollTop = container.scrollHeight;
                 }
 
                 updateVirtualRange();
@@ -2011,7 +1943,7 @@ function createProxyHandler<T>(
                 return () => {
                   container.removeEventListener("scroll", handleUserScroll);
                 };
-              }, [totalCount, positions, stickToBottom]); // Removed visibleMeasured and range.endIndex
+              }, [totalCount, positions, stickToBottom, itemHeight, overscan]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {