cogsbox-state 0.5.329 → 0.5.331

package/package.json

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

package/src/CogsState.tsx

@@ -1813,15 +1813,9 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
-
-              // This ref tracks if the user is locked to the bottom.
-              const isLockedToBottomRef = useRef(stickToBottom);
-
-              // This state triggers a re-render when item heights change.
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
-              const hasInitiallyLoadedRef = useRef(false);
-              const prevTotalCountRef = useRef(0);
 
+              // Subscribe to shadow updates
               useEffect(() => {
                 const unsubscribe = getGlobalStore
                   .getState()
@@ -1837,20 +1831,18 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
-              // Calculate heights from shadow state. This runs when data or measurements change.
-              const { totalHeight, positions } = useMemo(() => {
+              // Calculate total height
+              const totalHeight = 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 };
+                return height;
               }, [
                 totalCount,
                 stateKey,
@@ -1859,7 +1851,7 @@ function createProxyHandler<T>(
                 shadowUpdateTrigger,
               ]);
 
-              // Memoize the virtualized slice of data.
+              // Create virtual slice
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1873,135 +1865,47 @@ function createProxyHandler<T>(
                   validIndices,
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
-              useEffect(() => {
-                if (stickToBottom && totalCount > 0 && containerRef.current) {
-                  // When count increases, immediately adjust range to show bottom
-                  const container = containerRef.current;
-                  const visibleCount = Math.ceil(
-                    container.clientHeight / itemHeight
-                  );
-
-                  // Set range to show the last items including the new one
-                  setRange({
-                    startIndex: Math.max(
-                      0,
-                      totalCount - visibleCount - overscan
-                    ),
-                    endIndex: totalCount,
-                  });
 
-                  // Then scroll to bottom after a short delay
-                  setTimeout(() => {
-                    container.scrollTop = container.scrollHeight;
-                  }, 100);
-                }
-              }, [totalCount]);
-              // This is the main effect that handles all scrolling and updates.
-              useLayoutEffect(() => {
+              // Handle scroll
+              useEffect(() => {
                 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;
-                  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;
-                  }
-                  const startIndex = Math.max(0, high - overscan);
-                  let endIndex = startIndex;
-                  const visibleEnd = scrollTop + container.clientHeight;
-                  while (
-                    endIndex < totalCount &&
-                    positions[endIndex]! < visibleEnd
-                  ) {
-                    endIndex++;
-                  }
-                  endIndex = Math.min(totalCount, endIndex + overscan);
-                  setRange({ startIndex, endIndex });
-                };
+                const handleScroll = () => {
+                  const { scrollTop, clientHeight } = container;
+                  const startIndex = Math.floor(scrollTop / itemHeight);
+                  const visibleCount = Math.ceil(clientHeight / itemHeight);
 
-                // This function handles ONLY user-initiated scrolls.
-                const handleUserScroll = () => {
-                  isLockedToBottomRef.current =
-                    container.scrollHeight -
-                      container.scrollTop -
-                      container.clientHeight <
-                    1;
-                  updateVirtualRange();
+                  setRange({
+                    startIndex: Math.max(0, startIndex - overscan),
+                    endIndex: Math.min(
+                      totalCount,
+                      startIndex + visibleCount + overscan
+                    ),
+                  });
                 };
 
-                container.addEventListener("scroll", handleUserScroll, {
-                  passive: true,
-                });
+                container.addEventListener("scroll", handleScroll);
+                handleScroll(); // Initial calculation
 
-                // In your useLayoutEffect:
-                if (stickToBottom) {
-                  // Check if this is initial load or new item
-                  const isInitialLoad =
-                    !hasInitiallyLoadedRef.current && totalCount > 0;
-                  const isNewItem =
-                    hasInitiallyLoadedRef.current &&
-                    totalCount > prevTotalCountRef.current;
-
-                  scrollTimeoutId = setTimeout(() => {
-                    console.log("totalHeight", totalHeight);
-                    if (isLockedToBottomRef.current) {
-                      container.scrollTo({
-                        top: 999999999,
-                        behavior: isNewItem ? "smooth" : "auto", // Only smooth for NEW items after initial load
-                      });
-                    }
-                  }, 200);
+                return () =>
+                  container.removeEventListener("scroll", handleScroll);
+              }, [totalCount, itemHeight, overscan]);
 
-                  // Mark as initially loaded after first run
-                  if (isInitialLoad) {
-                    hasInitiallyLoadedRef.current = true;
-                  }
+              const scrollToBottom = useCallback(() => {
+                if (containerRef.current) {
+                  containerRef.current.scrollTop =
+                    containerRef.current.scrollHeight;
                 }
-
-                // Update ref at the end
-                prevTotalCountRef.current = totalCount;
-                updateVirtualRange();
-
-                // Cleanup function is vital to prevent memory leaks.
-                return () => {
-                  clearTimeout(scrollTimeoutId);
-                  container.removeEventListener("scroll", handleUserScroll);
-                };
-                // This effect re-runs whenever the list size or item heights change.
-              }, [totalCount, positions, totalHeight, stickToBottom]);
-
-              const scrollToBottom = useCallback(
-                (behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current) {
-                    isLockedToBottomRef.current = true;
-                    containerRef.current.scrollTo({
-                      top: containerRef.current.scrollHeight,
-                      behavior,
-                    });
-                  }
-                },
-                []
-              );
+              }, []);
 
               const scrollToIndex = useCallback(
-                (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (containerRef.current && positions[index] !== undefined) {
-                    isLockedToBottomRef.current = false;
-                    containerRef.current.scrollTo({
-                      top: positions[index],
-                      behavior,
-                    });
+                (index: number) => {
+                  if (containerRef.current) {
+                    containerRef.current.scrollTop = index * itemHeight;
                   }
                 },
-                [positions]
+                [itemHeight]
               );
 
               const virtualizerProps = {
@@ -2017,7 +1921,10 @@ function createProxyHandler<T>(
                 },
                 list: {
                   style: {
-                    transform: `translateY(${positions[range.startIndex] || 0}px)`,
+                    position: "absolute" as const,
+                    top: `${range.startIndex * itemHeight}px`,
+                    left: 0,
+                    right: 0,
                   },
                 },
               };
@@ -2229,21 +2136,24 @@ function createProxyHandler<T>(
                 return null;
               }
 
+              const arrayLength = arrayToMap.length;
               const indicesToMap =
                 meta?.validIndices ||
-                Array.from({ length: arrayToMap.length }, (_, i) => i);
+                Array.from({ length: arrayLength }, (_, i) => i);
 
               return indicesToMap.map((originalIndex, localIndex) => {
                 const item = arrayToMap[originalIndex];
                 const finalPath = [...path, originalIndex.toString()];
                 const setter = rebuildStateShape(item, finalPath, meta);
                 const itemComponentId = `${componentId}-${path.join(".")}-${originalIndex}`;
+                const isLastItem = originalIndex === arrayLength - 1;
 
                 return createElement(CogsItemWrapper, {
                   key: originalIndex,
                   stateKey,
                   itemComponentId,
                   itemPath: finalPath,
+                  isLastItem, // Pass it here!
                   children: callbackfn(
                     item,
                     setter,
@@ -2973,21 +2883,25 @@ export function $cogsSignalStore(proxy: {
   );
   return createElement("text", {}, String(value));
 }
+
 function CogsItemWrapper({
   stateKey,
   itemComponentId,
   itemPath,
+  isLastItem,
   children,
 }: {
   stateKey: string;
   itemComponentId: string;
   itemPath: string[];
+  isLastItem: boolean;
   children: React.ReactNode;
 }) {
   // This hook handles the re-rendering when the item's own data changes.
   const [, forceUpdate] = useState({});
   // This hook measures the element.
-  const [ref, bounds] = useMeasure();
+  const [measureRef, bounds] = useMeasure();
+  const scrollRef = useRef<HTMLDivElement | null>(null);
   // This ref prevents sending the same height update repeatedly.
   const lastReportedHeight = useRef<number | null>(null);
 
@@ -3033,7 +2947,25 @@ function CogsItemWrapper({
       }
     };
   }, [stateKey, itemComponentId, itemPath.join(".")]);
-
+  useEffect(() => {
+    if (isLastItem && scrollRef.current) {
+      setTimeout(() => {
+        scrollRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
+      }, 50);
+    }
+  }, [isLastItem]);
   // The rendered output is a simple div that gets measured.
-  return <div ref={ref}>{children}</div>;
+  return (
+    <div
+      ref={(el) => {
+        measureRef(el);
+        scrollRef.current = el;
+      }}
+    >
+      {children}
+    </div>
+  );
 }