cogsbox-state 0.5.359 → 0.5.361

package/package.json

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

package/src/CogsState.tsx

@@ -1808,16 +1808,15 @@ function createProxyHandler<T>(
                 stickToBottom = false,
                 dependencies = [],
               } = options;
-              const [instanceKey, setInstanceKey] = useState(0);
+
               const containerRef = useRef<HTMLDivElement | null>(null);
               const [range, setRange] = useState({
                 startIndex: 0,
                 endIndex: 10,
               });
               const isLockedToBottomRef = useRef(stickToBottom);
-
-              // This ref will hold the ID of our loop so we can stop it.
-              const scrollLoopId = useRef<NodeJS.Timeout | null>(null);
+              const isAutoScrolling = useRef(false);
+              const prevTotalCountRef = useRef(0);
 
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
@@ -1858,7 +1857,6 @@ function createProxyHandler<T>(
               ]);
 
               const virtualState = useMemo(() => {
-                // ... same as before ...
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
                 const validIndices = Array.from(
@@ -1872,46 +1870,44 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // --- EFFECT #1: THE SCROLL ALGORITHM ---
-              // This runs when the data or dependencies change.
+              // --- PHASE 1: Detect auto-scroll need and SET THE RANGE ---
+              useLayoutEffect(() => {
+                const hasNewItems = totalCount > prevTotalCountRef.current;
+                if (isLockedToBottomRef.current && hasNewItems) {
+                  console.log(
+                    "PHASE 1: Auto-scroll needed. Setting range to render the last item."
+                  );
+                  setRange({
+                    startIndex: Math.max(0, totalCount - 10 - overscan),
+                    endIndex: totalCount,
+                  });
+                }
+                prevTotalCountRef.current = totalCount;
+              }, [totalCount]);
+
+              // --- PHASE 2: Wait for measurement and SCROLL ---
               useLayoutEffect(() => {
                 const container = containerRef.current;
+                const isRangeAtEnd =
+                  range.endIndex === totalCount && totalCount > 0;
+
                 if (
                   !container ||
-                  !stickToBottom ||
-                  !isLockedToBottomRef.current
+                  !isLockedToBottomRef.current ||
+                  !isRangeAtEnd
                 ) {
                   return;
                 }
 
-                // If a loop is already running, stop it before starting a new one.
-                if (scrollLoopId.current) {
-                  clearInterval(scrollLoopId.current);
-                }
-
-                console.log("ALGORITHM: Starting...");
-
-                // STEP 1: Set range to render the last item.
-                setRange({
-                  startIndex: Math.max(0, totalCount - 10 - overscan),
-                  endIndex: totalCount,
-                });
-
-                // STEP 2: Start the LOOP.
                 console.log(
-                  "ALGORITHM: Starting LOOP to wait for measurement."
+                  "PHASE 2: Range is at the end. Starting the measurement loop."
                 );
                 let loopCount = 0;
-                scrollLoopId.current = setInterval(() => {
+                const intervalId = setInterval(() => {
                   loopCount++;
                   console.log(`LOOP ${loopCount}: Checking last item...`);
 
                   const lastItemIndex = totalCount - 1;
-                  if (lastItemIndex < 0) {
-                    clearInterval(scrollLoopId.current!);
-                    return;
-                  }
-
                   const shadowArray =
                     getGlobalStore
                       .getState()
@@ -1921,67 +1917,75 @@ function createProxyHandler<T>(
 
                   if (lastItemHeight > 0) {
                     console.log(
-                      `%cSUCCESS: Last item is measured. Scrolling.`,
+                      `%cSUCCESS: Last item height is ${lastItemHeight}. Scrolling now.`,
                       "color: green; font-weight: bold;"
                     );
-                    clearInterval(scrollLoopId.current!);
-                    scrollLoopId.current = null;
+                    clearInterval(intervalId);
 
+                    isAutoScrolling.current = true;
                     container.scrollTo({
                       top: container.scrollHeight,
                       behavior: "smooth",
                     });
+                    setTimeout(() => {
+                      isAutoScrolling.current = false;
+                    }, 1000);
+                  } else if (loopCount > 20) {
+                    console.error(
+                      "LOOP TIMEOUT: Last item was never measured. Stopping loop."
+                    );
+                    clearInterval(intervalId);
                   } else {
                     console.log("...WAITING. Height is not ready.");
-                    if (loopCount > 30) {
-                      console.error("LOOP TIMEOUT. Stopping.");
-                      clearInterval(scrollLoopId.current!);
-                      scrollLoopId.current = null;
-                    }
                   }
                 }, 100);
 
-                return () => {
-                  if (scrollLoopId.current) {
-                    clearInterval(scrollLoopId.current);
-                  }
-                };
-              }, [totalCount, ...dependencies]);
+                return () => clearInterval(intervalId);
+              }, [range.endIndex, totalCount, positions]);
 
-              // --- EFFECT #2: USER INTERACTION & RESET ---
-              // This handles manual scrolling and resetting when the chat changes.
+              // --- PHASE 3: Handle User Interaction and Resets ---
               useEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                // When the chat changes (dependencies change), reset the lock.
                 console.log(
-                  "DEPENDENCY CHANGE: Resetting scroll lock to:",
-                  stickToBottom
+                  "DEPENDENCY CHANGE: Resetting scroll lock and initial view."
                 );
                 isLockedToBottomRef.current = stickToBottom;
 
                 const updateVirtualRange = () => {
-                  /* ... same as before ... */
+                  const { scrollTop, clientHeight } = 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 + clientHeight;
+                  while (
+                    endIndex < totalCount &&
+                    positions[endIndex]! < visibleEnd
+                  ) {
+                    endIndex++;
+                  }
+                  setRange({
+                    startIndex,
+                    endIndex: Math.min(totalCount, endIndex + overscan),
+                  });
                 };
 
                 const handleUserScroll = () => {
+                  if (isAutoScrolling.current) return;
                   const isAtBottom =
                     container.scrollHeight -
                       container.scrollTop -
                       container.clientHeight <
                     1;
                   if (!isAtBottom) {
-                    if (isLockedToBottomRef.current) {
-                      console.log("USER SCROLL: Lock broken.");
-                      isLockedToBottomRef.current = false;
-                      // If a scroll loop was running, kill it.
-                      if (scrollLoopId.current) {
-                        clearInterval(scrollLoopId.current);
-                        scrollLoopId.current = null;
-                        console.log("...Auto-scroll loop terminated by user.");
-                      }
-                    }
+                    isLockedToBottomRef.current = false;
                   }
                   updateVirtualRange();
                 };
@@ -1993,26 +1997,12 @@ function createProxyHandler<T>(
 
                 return () =>
                   container.removeEventListener("scroll", handleUserScroll);
-              }, [totalCount, positions]);
-              useEffect(() => {
-                console.log(
-                  "DEPENDENCY CHANGE: Resetting scroll lock and scrolling to bottom."
-                );
-                if (containerRef.current) {
-                  // Reset the lock so the main effect can take over on the next data load.
-                  isLockedToBottomRef.current = stickToBottom;
-                  // Scroll to the top to show the loading state for the new chat.
-                  containerRef.current.scrollTop = 0;
-                  // Reset the range
-                  setRange({ startIndex: 0, endIndex: 10 });
-                }
-              }, dependencies);
+              }, [...dependencies]);
+
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current) {
                     isLockedToBottomRef.current = true;
-                    console.log("USER ACTION: Scroll lock ENABLED.");
-                    // This is a manual trigger, so we don't need the loop. Just scroll.
                     containerRef.current.scrollTo({
                       top: containerRef.current.scrollHeight,
                       behavior,
@@ -2026,7 +2016,6 @@ function createProxyHandler<T>(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current && positions[index] !== undefined) {
                     isLockedToBottomRef.current = false;
-                    console.log("USER ACTION: Scroll lock DISABLED.");
                     containerRef.current.scrollTo({
                       top: positions[index],
                       behavior,