cogsbox-state 0.5.366 → 0.5.368

package/package.json

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

package/src/CogsState.tsx

@@ -1810,18 +1810,15 @@ function createProxyHandler<T>(
               } = options;
 
               type Status =
-                | "WAITING_FOR_ARRAY"
-                | "GETTING_ARRAY_HEIGHTS"
-                | "MOVING_TO_BOTTOM"
-                | "LOCKED_AT_BOTTOM"
-                | "IDLE_NOT_AT_BOTTOM";
+                | "IDLE" // User is in control, or we are resting at the bottom.
+                | "SCROLLING_TO_BOTTOM"; // Performing a scroll animation.
 
               const containerRef = useRef<HTMLDivElement | null>(null);
               const [range, setRange] = useState({
                 startIndex: 0,
                 endIndex: 10,
               });
-              const [status, setStatus] = useState<Status>("WAITING_FOR_ARRAY");
+              const [status, setStatus] = useState<Status>("IDLE");
               const prevTotalCountRef = useRef(0);
               const prevDepsRef = useRef(dependencies);
 
@@ -1877,141 +1874,82 @@ function createProxyHandler<T>(
                 });
               }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
-              // --- STATE MACHINE CONTROLLER ---
-              // This effect decides which state to transition to based on external changes.
+              // --- Main Controller Effect ---
               useLayoutEffect(() => {
+                const container = containerRef.current;
+                if (!container) return;
+
                 const depsChanged = !isDeepEqual(
                   dependencies,
                   prevDepsRef.current
                 );
                 const hasNewItems = totalCount > prevTotalCountRef.current;
 
+                // 1. On Chat Change: Reset to a clean state and trigger an instant scroll.
                 if (depsChanged) {
                   console.log(
-                    "STATE_TRANSITION: Deps changed. -> WAITING_FOR_ARRAY"
+                    "EVENT: Chat changed. Resetting state and scrolling."
                   );
-                  setStatus("WAITING_FOR_ARRAY");
+                  setStatus("SCROLLING_TO_BOTTOM");
+                  // This return is important. It lets the effect re-run with the new status.
                   return;
                 }
 
-                if (
-                  hasNewItems &&
-                  status === "LOCKED_AT_BOTTOM" &&
-                  stickToBottom
-                ) {
-                  console.log(
-                    "STATE_TRANSITION: New items arrived while locked. -> GETTING_ARRAY_HEIGHTS"
-                  );
-                  setStatus("GETTING_ARRAY_HEIGHTS");
+                // 2. On New Message: Check if we SHOULD scroll.
+                // This will only happen if we are IDLE (meaning we are already at the bottom).
+                if (hasNewItems && status === "IDLE") {
+                  const isAtBottom =
+                    container.scrollHeight -
+                      container.scrollTop -
+                      container.clientHeight <
+                    itemHeight;
+                  if (isAtBottom && stickToBottom) {
+                    console.log(
+                      "EVENT: New message arrived while at bottom. -> SCROLLING_TO_BOTTOM"
+                    );
+                    setStatus("SCROLLING_TO_BOTTOM");
+                    return; // Let the effect re-run with the new status.
+                  }
                 }
 
-                prevTotalCountRef.current = totalCount;
-                prevDepsRef.current = dependencies;
-              }, [totalCount, ...dependencies]);
-
-              // --- STATE MACHINE ACTIONS ---
-              // This effect handles the actions for each state.
-              useLayoutEffect(() => {
-                const container = containerRef.current;
-                if (!container) return;
-
-                let intervalId: NodeJS.Timeout | undefined;
                 let scrollTimeoutId: NodeJS.Timeout | undefined;
 
-                if (
-                  status === "WAITING_FOR_ARRAY" &&
-                  totalCount > 0 &&
-                  stickToBottom
-                ) {
+                // 3. If we are in the SCROLLING state, perform the scroll action.
+                if (status === "SCROLLING_TO_BOTTOM") {
+                  // A chat change or initial load should be instant. New messages should be smooth.
+                  const isInitial =
+                    prevTotalCountRef.current === 0 || depsChanged;
+                  const scrollBehavior = isInitial ? "auto" : "smooth";
                   console.log(
-                    "ACTION: WAITING_FOR_ARRAY -> GETTING_ARRAY_HEIGHTS"
+                    `ACTION: Scrolling to bottom. Behavior: ${scrollBehavior}`
                   );
-                  setStatus("GETTING_ARRAY_HEIGHTS");
-                } else if (status === "GETTING_ARRAY_HEIGHTS") {
-                  console.log(
-                    "ACTION: GETTING_ARRAY_HEIGHTS. Setting range and starting loop."
-                  );
-                  setRange({
-                    startIndex: Math.max(0, totalCount - 10 - overscan),
-                    endIndex: totalCount,
-                  });
-
-                  intervalId = setInterval(() => {
-                    const lastItemIndex = totalCount - 1;
-                    const shadowArray =
-                      getGlobalStore
-                        .getState()
-                        .getShadowMetadata(stateKey, path) || [];
-                    const lastItemHeight =
-                      shadowArray[lastItemIndex]?.virtualizer?.itemHeight || 0;
-
-                    if (lastItemHeight > 0) {
-                      clearInterval(intervalId);
-                      console.log(
-                        "ACTION: Measurement success. -> MOVING_TO_BOTTOM"
-                      );
-                      setStatus("MOVING_TO_BOTTOM");
-                    }
-                  }, 100);
-                } else if (status === "MOVING_TO_BOTTOM") {
-                  console.log("ACTION: MOVING_TO_BOTTOM. Executing scroll.");
-                  const scrollBehavior =
-                    prevTotalCountRef.current === 0 ? "auto" : "smooth";
 
                   container.scrollTo({
                     top: container.scrollHeight,
                     behavior: scrollBehavior,
                   });
 
+                  // After the scroll, transition back to IDLE.
+                  // The timeout lets the animation finish so this doesn't happen too early.
                   scrollTimeoutId = setTimeout(
                     () => {
-                      console.log(
-                        "ACTION: Scroll finished. -> LOCKED_AT_BOTTOM"
-                      );
-                      setStatus("LOCKED_AT_BOTTOM");
+                      console.log("ACTION: Scroll finished. -> IDLE");
+                      setStatus("IDLE");
                     },
-                    scrollBehavior === "smooth" ? 500 : 50
+                    isInitial ? 50 : 500
                   );
                 }
 
-                // THE FIX: This cleanup runs whenever the state changes, killing any active timers.
-                return () => {
-                  if (intervalId) {
-                    console.log("CLEANUP: Clearing measurement loop timer.");
-                    clearInterval(intervalId);
-                  }
-                  if (scrollTimeoutId) {
-                    console.log("CLEANUP: Clearing scroll-end timer.");
-                    clearTimeout(scrollTimeoutId);
-                  }
-                };
-              }, [status, totalCount, positions]);
-
-              // --- USER INTERACTION ---
-              // This effect only handles user scrolls.
-              useEffect(() => {
-                const container = containerRef.current;
-                if (!container) return;
-
+                // --- User Scroll Handling & Range Update ---
                 const handleUserScroll = () => {
-                  const isAtBottom =
-                    container.scrollHeight -
-                      container.scrollTop -
-                      container.clientHeight <
-                    1;
-                  // If the user scrolls up from a locked or scrolling state, move to idle.
-                  if (
-                    !isAtBottom &&
-                    (status === "LOCKED_AT_BOTTOM" ||
-                      status === "MOVING_TO_BOTTOM")
-                  ) {
-                    console.log(
-                      "USER_ACTION: Scrolled up. -> IDLE_NOT_AT_BOTTOM"
-                    );
-                    setStatus("IDLE_NOT_AT_BOTTOM");
+                  // If the user scrolls, they are in control. Immediately go to IDLE.
+                  // This will also cancel any pending scroll-end timeouts.
+                  if (status === "SCROLLING_TO_BOTTOM") {
+                    console.log("USER ACTION: Interrupted scroll. -> IDLE");
+                    setStatus("IDLE");
                   }
 
-                  // Update the rendered range based on scroll position.
+                  // This is the full range update function.
                   const { scrollTop, clientHeight } = container;
                   let low = 0,
                     high = totalCount - 1;
@@ -2038,29 +1976,38 @@ function createProxyHandler<T>(
                 container.addEventListener("scroll", handleUserScroll, {
                   passive: true,
                 });
-                return () =>
+
+                // Always update range on render if we are IDLE.
+                if (status === "IDLE") {
+                  handleUserScroll();
+                }
+
+                // Update refs for the next render cycle.
+                prevTotalCountRef.current = totalCount;
+                prevDepsRef.current = dependencies;
+
+                return () => {
                   container.removeEventListener("scroll", handleUserScroll);
-              }, [totalCount, positions, status]);
+                  if (scrollTimeoutId) clearTimeout(scrollTimeoutId);
+                };
+              }, [totalCount, positions, status, ...dependencies]);
 
-              const scrollToBottom = useCallback(
-                (behavior: ScrollBehavior = "smooth") => {
-                  console.log(
-                    "USER_ACTION: Clicked scroll to bottom button. -> MOVING_TO_BOTTOM"
-                  );
-                  setStatus("MOVING_TO_BOTTOM");
-                },
-                []
-              );
+              const scrollToBottom = useCallback(() => {
+                console.log(
+                  "USER ACTION: Clicked scroll button -> SCROLLING_TO_BOTTOM"
+                );
+                setStatus("SCROLLING_TO_BOTTOM");
+              }, []);
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  // if (containerRef.current && positions[index] !== undefined) {
-                  //   isLockedToBottomRef.current = false;
-                  //   containerRef.current.scrollTo({
-                  //     top: positions[index],
-                  //     behavior,
-                  //   });
-                  // }
+                  if (containerRef.current && positions[index] !== undefined) {
+                    setStatus("IDLE");
+                    containerRef.current.scrollTo({
+                      top: positions[index],
+                      behavior,
+                    });
+                  }
                 },
                 [positions]
               );