cogsbox-state 0.5.287 → 0.5.289

package/package.json

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

package/src/CogsState.tsx

@@ -42,7 +42,7 @@ import useMeasure from "react-use-measure";
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
 export type VirtualViewOptions = {
-  itemHeight?: number;
+  itemHeight: number;
   overscan?: number;
   stickToBottom?: boolean;
 };
@@ -1466,8 +1466,6 @@ function createProxyHandler<T>(
       if (localStorage.getItem(storageKey)) {
         localStorage.removeItem(storageKey);
       }
-
-      console.log("udpating intial State", stateKey, newState);
       startTransition(() => {
         updateInitialStateGlobal(stateKey, newState);
         getGlobalStore.getState().initializeShadowState(stateKey, newState);
@@ -1560,7 +1558,10 @@ function createProxyHandler<T>(
           "_stateKey",
           "getComponents",
         ]);
+
+        console.log("prop", target, path, prop);
         if (
+          prop &&
           prop !== "then" &&
           !prop.startsWith("$") &&
           prop !== "stateMapNoRender" &&
@@ -1804,7 +1805,7 @@ function createProxyHandler<T>(
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
               const {
-                itemHeight = 50, // Default height for unmeasured items
+                itemHeight,
                 overscan = 5,
                 stickToBottom = false,
               } = options;
@@ -1814,10 +1815,16 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
-
-              // --- State Tracking Refs for stickToBottom ---
+              // const getItemHeight = useCallback((index: number) => {
+              //   const metadata = getGlobalStore
+              //     .getState()
+              //     .getShadowMetadata(stateKey, [...path, index.toString()]);
+              //   return metadata?.virtualizer?.itemHeight || options.itemHeight;
+              // }, []);
+              // --- State Tracking Refs ---
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
+              // NEW: Ref to explicitly track if this is the component's first render cycle.
               const isInitialMountRef = useRef(true);
 
               const sourceArray = getGlobalStore().getNestedState(
@@ -1826,28 +1833,6 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
-              // Helper to get an item's measured height or the default
-              const getItemHeight = useCallback(
-                (index: number): number => {
-                  const metadata = getGlobalStore
-                    .getState()
-                    .getShadowMetadata(stateKey, [...path, index.toString()]);
-                  return metadata?.virtualizer?.itemHeight || itemHeight;
-                },
-                [itemHeight, stateKey, path]
-              );
-
-              // Pre-calculate total height and the top offset of each item
-              const { totalHeight, positions } = useMemo(() => {
-                let currentHeight = 0;
-                const pos: number[] = [];
-                for (let i = 0; i < totalCount; i++) {
-                  pos[i] = currentHeight;
-                  currentHeight += getItemHeight(i);
-                }
-                return { totalHeight: currentHeight, positions: pos };
-              }, [totalCount, getItemHeight]);
-
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1869,39 +1854,26 @@ function createProxyHandler<T>(
                 const wasAtBottom = isAtBottomRef.current;
                 const listGrew = totalCount > previousTotalCountRef.current;
                 previousTotalCountRef.current = totalCount;
+
                 const handleScroll = () => {
                   const { scrollTop, clientHeight, scrollHeight } = container;
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
-
-                  // Find the start index by searching for the first item in the viewport
-                  let startIndex = 0;
-                  for (let i = 0; i < positions.length; i++) {
-                    if (positions[i]! >= scrollTop) {
-                      startIndex = i;
-                      break;
-                    }
-                  }
-
-                  // Find the end index by seeing how many items fit in the viewport
-                  let endIndex = startIndex;
-                  while (
-                    endIndex < totalCount &&
-                    positions[endIndex]! < scrollTop + clientHeight
-                  ) {
-                    endIndex++;
-                  }
-
-                  // Apply overscan
-                  startIndex = Math.max(0, startIndex - overscan);
-                  endIndex = Math.min(totalCount, endIndex + overscan);
-
+                  const start = Math.max(
+                    0,
+                    Math.floor(scrollTop / itemHeight) - overscan
+                  );
+                  const end = Math.min(
+                    totalCount,
+                    Math.ceil((scrollTop + clientHeight) / itemHeight) +
+                      overscan
+                  );
                   setRange((prevRange) => {
                     if (
-                      prevRange.startIndex !== startIndex ||
-                      prevRange.endIndex !== endIndex
+                      prevRange.startIndex !== start ||
+                      prevRange.endIndex !== end
                     ) {
-                      return { startIndex, endIndex };
+                      return { startIndex: start, endIndex: end };
                     }
                     return prevRange;
                   });
@@ -1911,14 +1883,19 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // Logic to keep the view scrolled to the bottom
+                // --- THE CORRECTED DECISION LOGIC ---
                 if (stickToBottom) {
                   if (isInitialMountRef.current) {
+                    // SCENARIO 1: First render of the component.
+                    // Go to the bottom unconditionally. Use `auto` scroll for an instant jump.
                     container.scrollTo({
                       top: container.scrollHeight,
                       behavior: "auto",
                     });
                   } else if (wasAtBottom && listGrew) {
+                    // SCENARIO 2: Subsequent renders (new messages arrive).
+                    // Only scroll if the user was already at the bottom.
+                    // Use `smooth` for a nice animated scroll for new messages.
                     requestAnimationFrame(() => {
                       container.scrollTo({
                         top: container.scrollHeight,
@@ -1928,12 +1905,15 @@ function createProxyHandler<T>(
                   }
                 }
 
+                // After the logic runs, it's no longer the initial mount.
                 isInitialMountRef.current = false;
-                handleScroll(); // Initial calculation
+
+                // Always run handleScroll once to set the initial visible window.
+                handleScroll();
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, overscan, stickToBottom, positions]);
+              }, [totalCount, itemHeight, overscan, stickToBottom]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
@@ -1949,16 +1929,17 @@ function createProxyHandler<T>(
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current && positions[index] !== undefined) {
+                  if (containerRef.current) {
                     containerRef.current.scrollTo({
-                      top: positions[index],
+                      top: index * itemHeight,
                       behavior,
                     });
                   }
                 },
-                [positions] // Depends on the calculated positions
+                [itemHeight]
               );
 
+              // Same virtualizer props as before
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
@@ -1966,13 +1947,13 @@ function createProxyHandler<T>(
                 },
                 inner: {
                   style: {
-                    height: `${totalHeight}px`,
+                    height: `${totalCount * itemHeight}px`,
                     position: "relative",
                   },
                 },
                 list: {
                   style: {
-                    transform: `translateY(${positions[range.startIndex] || 0}px)`,
+                    transform: `translateY(${range.startIndex * itemHeight}px)`,
                   },
                 },
               };