cogsbox-state 0.5.331 → 0.5.333

package/package.json

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

package/src/CogsState.tsx

@@ -1813,9 +1813,11 @@ function createProxyHandler<T>(
                 startIndex: 0,
                 endIndex: 10,
               });
+
+              const isLockedToBottomRef = useRef(false); // Always start false
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
+              const lastTotalCountRef = useRef(0); // Track previous count
 
-              // Subscribe to shadow updates
               useEffect(() => {
                 const unsubscribe = getGlobalStore
                   .getState()
@@ -1831,18 +1833,19 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
-              // Calculate total height
-              const totalHeight = useMemo(() => {
+              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 height;
+                return { totalHeight: height, positions: pos };
               }, [
                 totalCount,
                 stateKey,
@@ -1851,7 +1854,6 @@ function createProxyHandler<T>(
                 shadowUpdateTrigger,
               ]);
 
-              // Create virtual slice
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1866,46 +1868,102 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // Handle scroll
-              useEffect(() => {
+              useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                const handleScroll = () => {
-                  const { scrollTop, clientHeight } = container;
-                  const startIndex = Math.floor(scrollTop / itemHeight);
-                  const visibleCount = Math.ceil(clientHeight / itemHeight);
-
-                  setRange({
-                    startIndex: Math.max(0, startIndex - overscan),
-                    endIndex: Math.min(
-                      totalCount,
-                      startIndex + visibleCount + overscan
-                    ),
-                  });
+                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 });
                 };
 
-                container.addEventListener("scroll", handleScroll);
-                handleScroll(); // Initial calculation
+                const handleUserScroll = () => {
+                  isLockedToBottomRef.current =
+                    container.scrollHeight -
+                      container.scrollTop -
+                      container.clientHeight <
+                    1;
+                  updateVirtualRange();
+                };
 
-                return () =>
-                  container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, itemHeight, overscan]);
+                container.addEventListener("scroll", handleUserScroll, {
+                  passive: true,
+                });
 
-              const scrollToBottom = useCallback(() => {
-                if (containerRef.current) {
-                  containerRef.current.scrollTop =
-                    containerRef.current.scrollHeight;
+                // Handle scrolling
+                if (stickToBottom && totalCount > 0) {
+                  const isInitialLoad =
+                    lastTotalCountRef.current === 0 && totalCount > 0;
+                  const hasNewItems = totalCount > lastTotalCountRef.current;
+
+                  if (isInitialLoad) {
+                    // First load - always scroll to bottom
+                    setTimeout(() => {
+                      container.scrollTop = container.scrollHeight;
+                      isLockedToBottomRef.current = true;
+                    }, 1000); // Longer delay for initial load
+                  } else if (hasNewItems && isLockedToBottomRef.current) {
+                    // New items added and user is at bottom - smooth scroll
+                    setTimeout(() => {
+                      container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: "smooth",
+                      });
+                    }, 100);
+                  }
+                  // If user has scrolled up, don't auto-scroll
                 }
-              }, []);
 
-              const scrollToIndex = useCallback(
-                (index: number) => {
+                updateVirtualRange();
+                lastTotalCountRef.current = totalCount;
+
+                return () => {
+                  container.removeEventListener("scroll", handleUserScroll);
+                };
+              }, [totalCount, positions, stickToBottom]);
+
+              const scrollToBottom = useCallback(
+                (behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current) {
-                    containerRef.current.scrollTop = index * itemHeight;
+                    isLockedToBottomRef.current = true;
+                    containerRef.current.scrollTo({
+                      top: containerRef.current.scrollHeight,
+                      behavior,
+                    });
                   }
                 },
-                [itemHeight]
+                []
+              );
+
+              const scrollToIndex = useCallback(
+                (index: number, behavior: ScrollBehavior = "smooth") => {
+                  if (containerRef.current && positions[index] !== undefined) {
+                    isLockedToBottomRef.current = false;
+                    containerRef.current.scrollTo({
+                      top: positions[index],
+                      behavior,
+                    });
+                  }
+                },
+                [positions]
               );
 
               const virtualizerProps = {
@@ -1921,10 +1979,7 @@ function createProxyHandler<T>(
                 },
                 list: {
                   style: {
-                    position: "absolute" as const,
-                    top: `${range.startIndex * itemHeight}px`,
-                    left: 0,
-                    right: 0,
+                    transform: `translateY(${positions[range.startIndex] || 0}px)`,
                   },
                 },
               };
@@ -2136,24 +2191,21 @@ function createProxyHandler<T>(
                 return null;
               }
 
-              const arrayLength = arrayToMap.length;
               const indicesToMap =
                 meta?.validIndices ||
-                Array.from({ length: arrayLength }, (_, i) => i);
+                Array.from({ length: arrayToMap.length }, (_, 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,
@@ -2883,25 +2935,21 @@ 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 [measureRef, bounds] = useMeasure();
-  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [ref, bounds] = useMeasure();
   // This ref prevents sending the same height update repeatedly.
   const lastReportedHeight = useRef<number | null>(null);
 
@@ -2947,25 +2995,7 @@ 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={(el) => {
-        measureRef(el);
-        scrollRef.current = el;
-      }}
-    >
-      {children}
-    </div>
-  );
+  return <div ref={ref}>{children}</div>;
 }