cogsbox-state 0.5.295 → 0.5.297

package/package.json

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

package/src/CogsState.tsx

@@ -1802,7 +1802,6 @@ function createProxyHandler<T>(
             return (
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
-              // --- CHANGE 1: itemHeight is now optional, with a default fallback.
               const {
                 itemHeight = 50, // Default/estimated height
                 overscan = 5,
@@ -1815,18 +1814,26 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              // --- CHANGE 2: Add a helper to get the real height of each item. ---
-              const getItemHeight = useCallback(
-                (index: number): number => {
-                  const metadata = getGlobalStore
-                    .getState()
-                    .getShadowMetadata(stateKey, [...path, index.toString()]);
-                  return metadata?.virtualizer?.itemHeight || itemHeight;
-                },
-                [itemHeight, stateKey, path]
+              // --- STATE AND CALLBACKS FOR HEIGHTS ---
+              // This state value is the key. We increment it to force a re-calculation.
+              const [heightsVersion, setHeightsVersion] = useState(0);
+              // This callback is stable and won't cause re-renders itself.
+              const forceRecalculate = useCallback(
+                () => setHeightsVersion((v) => v + 1),
+                []
               );
 
-              // --- These refs are from your original code. NO CHANGE. ---
+              // --- ON MOUNT: SCHEDULE A RECALCULATION ---
+              // This solves the "initial load" problem. It ensures that after the first
+              // items render and measure themselves, we run the calculations again
+              // with the new, correct height data.
+              useEffect(() => {
+                const timer = setTimeout(() => {
+                  forceRecalculate();
+                }, 50); // A small delay helps batch initial measurements.
+                return () => clearTimeout(timer);
+              }, [forceRecalculate]);
+
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
@@ -1837,19 +1844,27 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
-              // --- CHANGE 3: Calculate the total height and position of each item. ---
-              // This is the only new block of logic required.
+              // --- EFFICIENT HEIGHT & POSITION CALCULATION ---
               const { totalHeight, positions } = useMemo(() => {
+                // Get the shadow object for the whole array ONCE. This is fast.
+                const shadowArray =
+                  getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
+                  [];
+
                 let height = 0;
                 const pos: number[] = [];
                 for (let i = 0; i < totalCount; i++) {
                   pos[i] = height;
-                  height += getItemHeight(i);
+                  // Access the height from the local shadowArray. No repeated deep lookups.
+                  const measuredHeight =
+                    shadowArray[i]?.virtualizer?.itemHeight;
+                  height += measuredHeight || itemHeight;
                 }
                 return { totalHeight: height, positions: pos };
-              }, [totalCount, getItemHeight]);
+                // This now depends on `heightsVersion`, so it re-runs when we force it.
+              }, [totalCount, stateKey, path, itemHeight, heightsVersion]);
 
-              // --- The virtualState logic is IDENTICAL to your original. NO CHANGE. ---
+              // This logic is from your original working code.
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1864,8 +1879,7 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // --- This useLayoutEffect is from your original code. ---
-              // --- We only change the math inside handleScroll. ---
+              // This is your original useLayoutEffect with the robust index calculation.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
@@ -1879,19 +1893,24 @@ function createProxyHandler<T>(
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
 
-                  // --- CHANGE 4: The math to find the start and end index. ---
-                  // This replaces `scrollTop / itemHeight` with a more accurate search.
-                  let startIndex = 0;
-                  // Find the first item whose top position is past the scroll top.
-                  for (let i = 0; i < positions.length; i++) {
-                    if (positions[i]! >= scrollTop) {
-                      startIndex = i;
-                      break;
+                  // ROBUST: Binary search to find the start index. Prevents errors.
+                  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;
+                      }
                     }
-                  }
+                    return low;
+                  };
+
+                  let startIndex = search(positions, scrollTop);
 
                   let endIndex = startIndex;
-                  // Find the first item whose top position is past the bottom of the viewport.
                   while (
                     endIndex < totalCount &&
                     positions[endIndex]! < scrollTop + clientHeight
@@ -1899,23 +1918,15 @@ function createProxyHandler<T>(
                     endIndex++;
                   }
 
-                  // Apply overscan, identical to your original code.
                   startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
-                  console.log(
-                    "startIndex",
-                    startIndex,
-                    "endIndex",
-                    endIndex,
-                    "totalHeight",
-                    totalHeight
-                  );
+
                   setRange((prevRange) => {
                     if (
                       prevRange.startIndex !== startIndex ||
                       prevRange.endIndex !== endIndex
                     ) {
-                      return { startIndex: startIndex, endIndex: endIndex };
+                      return { startIndex, endIndex };
                     }
                     return prevRange;
                   });
@@ -1925,7 +1936,7 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // --- This stickToBottom logic is IDENTICAL to your original. NO CHANGE. ---
+                // This stickToBottom logic is from your original working code.
                 if (stickToBottom) {
                   if (isInitialMountRef.current) {
                     container.scrollTo({
@@ -1947,7 +1958,6 @@ function createProxyHandler<T>(
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-                // --- We swap `itemHeight` for `positions` in the dependency array. ---
               }, [totalCount, overscan, stickToBottom, positions]);
 
               const scrollToBottom = useCallback(
@@ -1962,34 +1972,29 @@ function createProxyHandler<T>(
                 []
               );
 
-              // --- CHANGE 5: Update scrollToIndex to use the positions array. ---
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current) {
                     containerRef.current.scrollTo({
-                      top: positions[index] || 0, // Use the calculated position
+                      top: positions[index] || 0,
                       behavior,
                     });
                   }
                 },
-                [positions] // Dependency is now `positions`
+                [positions]
               );
 
-              // --- CHANGE 6: Update virtualizer props to use dynamic values. ---
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
                   style: { overflowY: "auto", height: "100%" },
                 },
                 inner: {
-                  style: {
-                    height: `${totalHeight}px`, // Use calculated dynamic height
-                    position: "relative",
-                  },
+                  style: { height: `${totalHeight}px`, position: "relative" },
                 },
                 list: {
                   style: {
-                    transform: `translateY(${positions[range.startIndex] || 0}px)`, // Use calculated position
+                    transform: `translateY(${positions[range.startIndex] || 0}px)`,
                   },
                 },
               };