cogsbox-state 0.5.275 → 0.5.277

package/package.json

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

package/src/CogsState.tsx

@@ -37,7 +37,6 @@ import { z } from "zod";
 import { formRefStore, getGlobalStore, type ComponentsType } from "./store.js";
 import { useCogsConfig } from "./CogsStateClient.js";
 import { applyPatch } from "fast-json-patch";
-import useMeasure from "react-use-measure";
 
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
@@ -1471,13 +1470,7 @@ function createProxyHandler<T>(
   function rebuildStateShape(
     currentState: T,
     path: string[] = [],
-    meta?: {
-      filtered?: string[][];
-      validIndices?: number[];
-      // --- NEW, OPTIONAL PROPERTIES ---
-      isVirtual?: boolean;
-      setVirtualItemHeight?: (index: number, height: number) => void;
-    }
+    meta?: { filtered?: string[][]; validIndices?: number[] }
   ): any {
     const cacheKey = path.map(String).join(".");
 
@@ -1774,16 +1767,12 @@ function createProxyHandler<T>(
             };
           }
 
-          // This replaces the old `useVirtualView` implementation completely.
-
           if (prop === "useVirtualView") {
             return (
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
-              // We rename `itemHeight` to `estimatedItemHeight` for clarity.
-              // It's now just a fallback for items that haven't been measured yet.
               const {
-                itemHeight: estimatedItemHeight = 50, // A sensible default
+                itemHeight,
                 overscan = 5,
                 stickToBottom = false,
               } = options;
@@ -1794,48 +1783,31 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              // --- 1. LOCAL HEIGHT MANAGEMENT ---
-              // The heights are stored in state LOCAL to this hook.
-              const [measuredHeights, setMeasuredHeights] = useState(
-                () => new Map<number, number>()
-              );
-
-              // The "height setter" function that will be passed down.
-              const setVirtualItemHeight = useCallback(
-                (index: number, height: number) => {
-                  setMeasuredHeights((prev) => {
-                    if (prev.get(index) === height) return prev; // Avoids infinite loops
-                    const newMap = new Map(prev);
-                    newMap.set(index, height);
-                    return newMap;
-                  });
-                },
-                []
-              );
+              // --- 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);
 
-              // --- 2. DATA AND META SETUP ---
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
                 path
               ) as any[];
               const totalCount = sourceArray.length;
 
-              // --- 3. DYNAMIC LAYOUT CALCULATION ---
-              const { totalHeight, itemPositions } = useMemo(() => {
-                let total = 0;
-                const positions = Array(totalCount);
-                for (let i = 0; i < totalCount; i++) {
-                  positions[i] = total;
-                  total += measuredHeights.get(i) ?? estimatedItemHeight;
-                }
-                return { totalHeight: total, itemPositions: positions };
-              }, [totalCount, measuredHeights, estimatedItemHeight]);
-
-              // --- 4. SCROLL HANDLING & RANGE CALCULATION ---
-              // Refs for the "stick to bottom" logic
-              const isAtBottomRef = useRef(stickToBottom);
-              const previousTotalCountRef = useRef(totalCount);
-              const isInitialMountRef = useRef(true);
+              const virtualState = useMemo(() => {
+                const start = Math.max(0, range.startIndex);
+                const end = Math.min(totalCount, range.endIndex);
+                const validIndices = Array.from(
+                  { length: end - start },
+                  (_, i) => start + i
+                );
+                const slicedArray = validIndices.map((idx) => sourceArray[idx]);
+                return rebuildStateShape(slicedArray as any, path, {
+                  ...meta,
+                  validIndices,
+                });
+              }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
 
               useLayoutEffect(() => {
                 const container = containerRef.current;
@@ -1849,41 +1821,43 @@ function createProxyHandler<T>(
                   const { scrollTop, clientHeight, scrollHeight } = container;
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
-
-                  // Find the start index by searching through our dynamic positions array.
-                  let startIndex = 0;
-                  while (
-                    startIndex < totalCount - 1 &&
-                    itemPositions[startIndex + 1] <= scrollTop
-                  ) {
-                    startIndex++;
-                  }
-
-                  // Find the end index.
-                  let endIndex = startIndex;
-                  while (
-                    endIndex < totalCount - 1 &&
-                    itemPositions[endIndex] < scrollTop + clientHeight
-                  ) {
-                    endIndex++;
-                  }
-
-                  setRange({
-                    startIndex: Math.max(0, startIndex - overscan),
-                    endIndex: Math.min(totalCount - 1, 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 !== start ||
+                      prevRange.endIndex !== end
+                    ) {
+                      return { startIndex: start, endIndex: end };
+                    }
+                    return prevRange;
                   });
                 };
 
-                handleScroll(); // Initial calculation
+                container.addEventListener("scroll", handleScroll, {
+                  passive: true,
+                });
 
-                // Stick to bottom logic
+                // --- 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,
@@ -1892,16 +1866,17 @@ function createProxyHandler<T>(
                     });
                   }
                 }
+
+                // After the logic runs, it's no longer the initial mount.
                 isInitialMountRef.current = false;
 
-                container.addEventListener("scroll", handleScroll, {
-                  passive: true,
-                });
+                // Always run handleScroll once to set the initial visible window.
+                handleScroll();
+
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [totalCount, overscan, stickToBottom, itemPositions]); // Reruns when positions change
+              }, [totalCount, itemHeight, overscan, stickToBottom]);
 
-              // --- 5. API AND PROPS ---
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current) {
@@ -1916,57 +1891,38 @@ function createProxyHandler<T>(
 
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
-                  if (
-                    containerRef.current &&
-                    itemPositions[index] !== undefined
-                  ) {
+                  if (containerRef.current) {
                     containerRef.current.scrollTo({
-                      top: itemPositions[index],
+                      top: index * itemHeight,
                       behavior,
                     });
                   }
                 },
-                [itemPositions]
+                [itemHeight]
               );
 
+              // Same virtualizer props as before
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
-                  style: { overflowY: "auto" as const, height: "100%" },
+                  style: { overflowY: "auto", height: "100%" },
                 },
                 inner: {
                   style: {
-                    height: `${totalHeight}px`, // Use the dynamic total height
-                    position: "relative" as const,
+                    height: `${totalCount * itemHeight}px`,
+                    position: "relative",
                   },
                 },
-                // This is now just a slice of the full array to map over.
                 list: {
-                  // We no longer need to apply a transform here because CogsItemWrapper
-                  // will eventually be positioned absolutely by its index.
-                  // For now, let's keep it simple. The user's code will map over virtualState.
-                  style: {},
+                  style: {
+                    transform: `translateY(${range.startIndex * itemHeight}px)`,
+                  },
                 },
               };
 
-              // We only want to render the items in the current virtual range.
-              // We achieve this by setting the `validIndices` in the meta object for the final render pass.
-              const finalVirtualState = useMemo(() => {
-                const visibleIndices = [];
-                for (let i = range.startIndex; i <= range.endIndex; i++) {
-                  if (i < totalCount) visibleIndices.push(i);
-                }
-                return rebuildStateShape(sourceArray as any, path, {
-                  ...meta,
-                  isVirtual: true,
-                  setVirtualItemHeight,
-                  validIndices: visibleIndices,
-                });
-              }, [range, sourceArray, setVirtualItemHeight]);
-
               return {
-                virtualState: finalVirtualState,
-                virtualizerProps,
+                virtualState,
+                virtualizerProps: virtualizerProps as any,
                 scrollToBottom,
                 scrollToIndex,
               };
@@ -2018,16 +1974,12 @@ function createProxyHandler<T>(
             };
           }
 
-          // This is the complete code for the `stateMap` property inside your proxy's `get` trap.
-
           if (prop === "stateMap") {
             return (
               callbackfn: (
                 value: InferArrayElement<T>,
                 setter: StateObject<InferArrayElement<T>>,
                 info: {
-                  // The `register` function is no longer needed for reactivity because
-                  // CogsItemWrapper handles it, but we keep it for API compatibility.
                   register: () => void;
                   index: number;
                   originalIndex: number;
@@ -2038,6 +1990,7 @@ function createProxyHandler<T>(
                 .getState()
                 .getNestedState(stateKey, path) as any[];
 
+              // Defensive check to make sure we are mapping over an array
               if (!Array.isArray(arrayToMap)) {
                 console.warn(
                   `stateMap called on a non-array value at path: ${path.join(".")}. The current value is:`,
@@ -2046,55 +1999,54 @@ function createProxyHandler<T>(
                 return null;
               }
 
+              // If we have validIndices, only map those items
               const indicesToMap =
                 meta?.validIndices ||
                 Array.from({ length: arrayToMap.length }, (_, i) => i);
 
               return indicesToMap.map((originalIndex, localIndex) => {
                 const item = arrayToMap[originalIndex];
-                const itemPath = [...path, originalIndex.toString()];
-                const itemPathKey = itemPath.join(".");
+                const finalPath = [...path, originalIndex.toString()];
+                const setter = rebuildStateShape(item, finalPath, meta);
+
+                // Create the register function right here. It closes over the necessary variables.
+                const register = () => {
+                  const [, forceUpdate] = useState({});
+                  const itemComponentId = `${componentId}-${path.join(".")}-${originalIndex}`;
+
+                  useLayoutEffect(() => {
+                    const fullComponentId = `${stateKey}////${itemComponentId}`;
+                    const stateEntry = getGlobalStore
+                      .getState()
+                      .stateComponents.get(stateKey) || {
+                      components: new Map(),
+                    };
+
+                    stateEntry.components.set(fullComponentId, {
+                      forceUpdate: () => forceUpdate({}),
+                      paths: new Set([finalPath.join(".")]),
+                    });
 
-                // This is the unique ID for your existing reactivity system.
-                const itemComponentId = `${componentId}-${itemPathKey}`;
+                    getGlobalStore
+                      .getState()
+                      .stateComponents.set(stateKey, stateEntry);
 
-                const setter = rebuildStateShape(item, itemPath, meta);
+                    return () => {
+                      const currentEntry = getGlobalStore
+                        .getState()
+                        .stateComponents.get(stateKey);
+                      if (currentEntry) {
+                        currentEntry.components.delete(fullComponentId);
+                      }
+                    };
+                  }, [stateKey, itemComponentId]);
+                };
 
-                // Get the user's rendered component (e.g., <Message />)
-                const userRenderedItem = callbackfn(item, setter, {
-                  // This function is now a no-op because CogsItemWrapper handles registration.
-                  register: () => {
-                    console.warn(
-                      "The `register` function in stateMap is deprecated. Item reactivity is now automatic."
-                    );
-                  },
+                return callbackfn(item, setter, {
+                  register,
                   index: localIndex,
                   originalIndex,
                 });
-
-                // --- This is the bridge between the virtualizer and the wrapper ---
-
-                // Check if we are in a virtual context by looking for the setter in the meta object.
-                // `meta.setVirtualItemHeight` is passed down from `useVirtualView`.
-                const onMeasure =
-                  meta?.isVirtual && meta!.setVirtualItemHeight
-                    ? (height: number) =>
-                        meta!.setVirtualItemHeight!(originalIndex, height)
-                    : undefined; // If not in a virtual context, this will be undefined.
-
-                // --- Wrap the user's output in your enhanced CogsItemWrapper ---
-                // This wrapper handles BOTH reactivity AND optional measurement.
-                return (
-                  <CogsItemWrapper
-                    key={itemPathKey} // Use the unique path for React's key.
-                    stateKey={stateKey}
-                    itemComponentId={itemComponentId}
-                    itemPath={itemPath}
-                    onMeasure={onMeasure} // Pass the onMeasure function (or undefined)
-                  >
-                    {userRenderedItem}
-                  </CogsItemWrapper>
-                );
               });
             };
           }
@@ -2762,13 +2714,7 @@ function SignalMapRenderer({
   rebuildStateShape: (
     currentState: any,
     path: string[],
-    meta?: {
-      filtered?: string[][];
-      validIndices?: number[];
-      // --- NEW, OPTIONAL PROPERTIES ---
-      isVirtual?: boolean;
-      setVirtualItemHeight?: (index: number, height: number) => void;
-    }
+    meta?: { filtered?: string[][]; validIndices?: number[] }
   ) => any;
 }) {
   const value = getGlobalStore().getNestedState(proxy._stateKey, proxy._path);
@@ -2885,13 +2831,11 @@ function CogsItemWrapper({
   itemComponentId,
   itemPath,
   children,
-  onMeasure, // OPTIONAL PROP
 }: {
   stateKey: string;
   itemComponentId: string;
   itemPath: string[];
   children: React.ReactNode;
-  onMeasure?: (height: number) => void; // The type definition
 }) {
   // This is a real component, so we can safely call hooks.
   const [, forceUpdate] = useState({});
@@ -2923,14 +2867,7 @@ function CogsItemWrapper({
       }
     };
   }, [stateKey, itemComponentId, itemPath.join(".")]); // Effect dependency array is stable.
-  const [measureRef, bounds] = useMeasure();
-
-  useLayoutEffect(() => {
-    if (!onMeasure || bounds.height === 0) return;
-
-    onMeasure(bounds.height);
-  }, [bounds.height, onMeasure]);
 
-  return <div ref={measureRef}>{children}</div>;
   // Render the actual component the user provided.
+  return <>{children}</>;
 }