cogsbox-state 0.5.461 → 0.5.463

package/src/CogsState.tsx

@@ -284,7 +284,7 @@ export type EndType<T, IsArrayElement = false> = {
     hideMessage?: boolean;
   }) => JSX.Element;
   lastSynced?: SyncInfo;
-} & (IsArrayElement extends true ? { cut: () => void } : {});
+} & (IsArrayElement extends true ? { cutThis: () => void } : {});
 
 export type StateObject<T> = (T extends any[]
   ? ArrayEndType<T>
@@ -419,13 +419,7 @@ export type OptionsType<T extends unknown = unknown, TApiParams = never> = {
     onSuccess?: (data: any) => void;
     onError?: (error: any) => void;
   };
-  middleware?: ({
-    updateLog,
-    update,
-  }: {
-    updateLog: UpdateTypeDetail[] | undefined;
-    update: UpdateTypeDetail;
-  }) => void;
+  middleware?: ({ update }: { update: UpdateTypeDetail }) => void;
 
   modifyState?: (state: T) => T;
   localStorage?: {
@@ -578,26 +572,21 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
   }
 ) => {
   let newInitialState = initialState;
-  console.log('optsc', opt?.__useSync);
   const [statePart, initialOptionsPart] =
     transformStateFunc<State>(newInitialState);
 
-  // Store notifications if provided
   if (opt?.__fromSyncSchema && opt?.__syncNotifications) {
     getGlobalStore
       .getState()
       .setInitialStateOptions('__notifications', opt.__syncNotifications);
   }
 
-  // Store apiParams map if provided
   if (opt?.__fromSyncSchema && opt?.__apiParamsMap) {
     getGlobalStore
       .getState()
       .setInitialStateOptions('__apiParamsMap', opt.__apiParamsMap);
   }
 
-  // ... rest of your existing createCogsState code unchanged ...
-
   Object.keys(statePart).forEach((key) => {
     let existingOptions = initialOptionsPart[key] || {};
 
@@ -653,6 +642,7 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
     stateKey: StateKey,
     options?: Prettify<OptionsType<(typeof statePart)[StateKey]>>
   ) => {
+    console.time('useCogsState');
     const [componentId] = useState(options?.componentId ?? uuidv4());
 
     setOptions({
@@ -667,6 +657,8 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
       ? options.modifyState(thiState)
       : thiState;
 
+    console.timeEnd('useCogsState');
+
     const updater = useCogsStateFn<(typeof statePart)[StateKey]>(partialState, {
       stateKey: stateKey as string,
       syncUpdate: options?.syncUpdate,
@@ -788,7 +780,7 @@ export function createCogsStateFromSync<
 const {
   getInitialOptions,
 
-  setStateLog,
+  addStateLog,
   updateInitialStateGlobal,
 } = getGlobalStore.getState();
 const saveToLocalStorage = <T,>(
@@ -978,6 +970,8 @@ function markEntireStateAsServerSynced(
     });
   }
 }
+let updateBatchQueue = new Map<string, Array<UpdateArg<any>>>();
+let batchFlushScheduled = false;
 
 export function useCogsStateFn<TStateObject extends unknown>(
   stateObject: TStateObject,
@@ -994,7 +988,6 @@ export function useCogsStateFn<TStateObject extends unknown>(
     dependencies,
     serverState,
     __useSync,
-    syncOptions,
   }: {
     stateKey?: string;
     componentId?: string;
@@ -1003,13 +996,11 @@ export function useCogsStateFn<TStateObject extends unknown>(
     syncOptions?: SyncOptionsType<any>;
   } & OptionsType<TStateObject> = {}
 ) {
+  console.time('useCogsStateFn top');
   const [reactiveForce, forceUpdate] = useState({}); //this is the key to reactivity
   const { sessionId } = useCogsConfig();
-
   let noStateKey = stateKey ? false : true;
   const [thisKey] = useState(stateKey ?? uuidv4());
-  const stateLog = getGlobalStore.getState().stateLog[thisKey];
-  const componentUpdatesRef = useRef(new Set<string>());
   const componentIdRef = useRef(componentId ?? uuidv4());
   const latestInitialOptionsRef = useRef<OptionsType<TStateObject> | null>(
     null
@@ -1019,9 +1010,6 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
   useEffect(() => {
     if (syncUpdate && syncUpdate.stateKey === thisKey && syncUpdate.path?.[0]) {
-      // Update the actual state value
-
-      // Create combined key and update sync info
       const syncKey = `${syncUpdate.stateKey}:${syncUpdate.path.join('.')}`;
       getGlobalStore.getState().setSyncInfo(syncKey, {
         timeStamp: syncUpdate.timeStamp!,
@@ -1254,6 +1242,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
       notifyComponents(thisKey);
     }
   }, [thisKey, ...(dependencies || [])]);
+
   useLayoutEffect(() => {
     if (noStateKey) {
       setAndMergeOptions(thisKey as string, {
@@ -1323,22 +1312,22 @@ export function useCogsStateFn<TStateObject extends unknown>(
   }, []);
 
   const syncApiRef = useRef<SyncApi | null>(null);
+  console.timeEnd('useCogsStateFn top');
+
   const effectiveSetState = (
     newStateOrFunction: UpdateArg<TStateObject> | InsertParams<TStateObject>,
     path: string[],
     updateObj: UpdateOptions
   ) => {
+    console.time('top of effectiveSetState');
     const fullPath = [thisKey, ...path].join('.');
-    if (Array.isArray(path)) {
-      const pathKey = `${thisKey}-${path.join('.')}`;
-      componentUpdatesRef.current.add(pathKey);
-    }
     const store = getGlobalStore.getState();
 
-    // FETCH ONCE at the beginning
     const shadowMeta = store.getShadowMetadata(thisKey, path);
     const nestedShadowValue = store.getShadowValue(fullPath) as TStateObject;
+    console.timeEnd('top of effectiveSetState');
 
+    console.time('top of payload');
     const payload = (
       updateObj.updateType === 'insert' && isFunction(newStateOrFunction)
         ? newStateOrFunction({ state: nestedShadowValue, uuid: uuidv4() })
@@ -1358,17 +1347,15 @@ export function useCogsStateFn<TStateObject extends unknown>(
       oldValue: nestedShadowValue,
       newValue: payload,
     } satisfies UpdateTypeDetail;
+    console.timeEnd('top of payload');
 
+    console.time('switch in effectiveSetState');
     // Perform the update
     switch (updateObj.updateType) {
       case 'insert': {
         store.insertShadowArrayElement(thisKey, path, newUpdate.newValue);
-        // The array at `path` has been modified. Mark it AND all its parents as dirty.
         store.markAsDirty(thisKey, path, { bubble: true });
-
-        // ALSO mark the newly inserted item itself as dirty
-        // Get the new item's path and mark it as dirty
-        const arrayMeta = store.getShadowMetadata(thisKey, path);
+        const arrayMeta = shadowMeta;
         if (arrayMeta?.arrayKeys) {
           const newItemKey =
             arrayMeta.arrayKeys[arrayMeta.arrayKeys.length - 1];
@@ -1392,7 +1379,9 @@ export function useCogsStateFn<TStateObject extends unknown>(
         break;
       }
     }
+    console.timeEnd('switch in effectiveSetState');
     const shouldSync = updateObj.sync !== false;
+    console.time('signals');
 
     if (shouldSync && syncApiRef.current && syncApiRef.current.connected) {
       syncApiRef.current.updateState({ operation: newUpdate });
@@ -1545,6 +1534,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
         });
       }
     }
+
     if (updateObj.updateType === 'cut') {
       const arrayPath = path.slice(0, -1);
       const arrayMeta = store.getShadowMetadata(thisKey, arrayPath);
@@ -1562,16 +1552,14 @@ export function useCogsStateFn<TStateObject extends unknown>(
         });
       }
     }
+    console.timeEnd('signals');
 
-    // Assumes `isDeepEqual` is available in this scope.
-    // Assumes `isDeepEqual` is available in this scope.
-
-    const newState = getGlobalStore.getState().getShadowValue(thisKey);
-    const rootMeta = getGlobalStore.getState().getShadowMetadata(thisKey, []);
+    console.time('notify');
+    const rootMeta = store.getShadowMetadata(thisKey, []);
     const notifiedComponents = new Set<string>();
 
     if (!rootMeta?.components) {
-      return newState;
+      return;
     }
 
     // --- PASS 1: Notify specific subscribers based on update type ---
@@ -1753,26 +1741,9 @@ export function useCogsStateFn<TStateObject extends unknown>(
       }
     });
     notifiedComponents.clear();
-    setStateLog(thisKey, (prevLogs) => {
-      const logs = [...(prevLogs ?? []), newUpdate];
-      const aggregatedLogs = new Map<string, typeof newUpdate>();
-
-      logs.forEach((log) => {
-        const uniqueKey = `${log.stateKey}:${JSON.stringify(log.path)}`;
-        const existing = aggregatedLogs.get(uniqueKey);
-
-        if (existing) {
-          existing.timeStamp = Math.max(existing.timeStamp, log.timeStamp);
-          existing.newValue = log.newValue;
-          existing.oldValue = existing.oldValue ?? log.oldValue;
-          existing.updateType = log.updateType;
-        } else {
-          aggregatedLogs.set(uniqueKey, { ...(log as any) });
-        }
-      });
-
-      return Array.from(aggregatedLogs.values());
-    });
+    console.timeEnd('notify');
+    console.time('end stuff');
+    addStateLog(thisKey, newUpdate);
 
     saveToLocalStorage(
       payload,
@@ -1783,12 +1754,10 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
     if (latestInitialOptionsRef.current?.middleware) {
       latestInitialOptionsRef.current!.middleware({
-        updateLog: stateLog,
         update: newUpdate,
       });
     }
-
-    return newState;
+    console.timeEnd('end stuff');
   };
 
   if (!getGlobalStore.getState().initialStateGlobal[thisKey]) {
@@ -1796,12 +1765,15 @@ export function useCogsStateFn<TStateObject extends unknown>(
   }
 
   const updaterFinal = useMemo(() => {
-    return createProxyHandler<TStateObject>(
+    console.time('createProxyHandler');
+    const handler = createProxyHandler<TStateObject>(
       thisKey,
       effectiveSetState,
       componentIdRef.current,
       sessionId
     );
+    console.timeEnd('createProxyHandler'); // <--- AND THIS
+    return handler;
   }, [thisKey, sessionId]);
 
   const cogsSyncFn = __useSync;
@@ -1848,12 +1820,9 @@ function hashTransforms(transforms: any[]) {
   if (!transforms || transforms.length === 0) {
     return '';
   }
-  // This creates a string representation of the transforms AND their dependencies.
-  // Example: "filter['red']sort['score','asc']"
   return transforms
     .map(
       (transform) =>
-        // Safely stringify dependencies. An empty array becomes '[]'.
         `${transform.type}${JSON.stringify(transform.dependencies || [])}`
     )
     .join('');
@@ -1896,8 +1865,6 @@ const registerComponentDependency = (
   const fullComponentId = `${stateKey}////${componentId}`;
   const { addPathComponent, getShadowMetadata } = getGlobalStore.getState();
 
-  // First, check if the component should even be registered.
-  // This check is safe to do outside the setter.
   const rootMeta = getShadowMetadata(stateKey, []);
   const component = rootMeta?.components?.get(fullComponentId);
 
@@ -1913,7 +1880,6 @@ const registerComponentDependency = (
     return;
   }
 
-  // Now, call the single, safe, atomic function to perform the update.
   addPathComponent(stateKey, dependencyPath, fullComponentId);
 };
 const notifySelectionComponents = (
@@ -1961,48 +1927,40 @@ const notifySelectionComponents = (
     }
   }
 };
+
 function createProxyHandler<T>(
   stateKey: string,
   effectiveSetState: EffectiveSetState<T>,
   componentId: string,
   sessionId?: string
 ): StateObject<T> {
-  type CacheEntry = {
-    proxy: any;
-    stateVersion: number;
-  };
-
-  const shapeCache = new Map<string, CacheEntry>();
+  const proxyCache = new Map<string, any>();
   let stateVersion = 0;
+  console.time('rebuildStateShape Outer');
 
-  const invalidateCachePath = (path: string[]) => {
-    const pathKey = path.join('.');
-    for (const [key] of shapeCache) {
-      if (key === pathKey || key.startsWith(pathKey + '.')) {
-        shapeCache.delete(key);
-      }
-    }
-    stateVersion++;
-  };
+  let recursionTimerName: string | null = null;
 
   function rebuildStateShape({
-    currentState,
     path = [],
     meta,
     componentId,
   }: {
-    currentState: T;
     path: string[];
     componentId: string;
     meta?: MetaData;
   }): any {
-    const cacheKey = path.map(String).join('.');
+    console.time('rebuildStateShape Inner');
+    const derivationSignature = meta
+      ? JSON.stringify(meta.validIds || meta.transforms)
+      : '';
+    const cacheKey = path.join('.') + ':' + derivationSignature;
+    console.log('PROXY CACHE KEY ', cacheKey);
+    if (proxyCache.has(cacheKey)) {
+      console.log('PROXY CACHE HIT');
+      return proxyCache.get(cacheKey);
+    }
     const stateKeyPathKey = [stateKey, ...path].join('.');
 
-    currentState = getGlobalStore
-      .getState()
-      .getShadowValue(stateKeyPathKey, meta?.validIds);
-
     type CallableStateObject<T> = {
       (): T;
     } & {
@@ -2022,9 +1980,11 @@ function createProxyHandler<T>(
       },
 
       get(target: any, prop: string) {
-        // V--------- THE CRUCIAL FIX IS HERE ---------V
-        // This handles requests for internal functions on the proxy,
-        // returning the function itself instead of treating it as state.
+        if (path.length === 0) {
+          // Create a unique name for this specific timer instance
+          recursionTimerName = `Recursion-${Math.random()}`;
+          console.time(recursionTimerName);
+        }
         if (prop === '_rebuildStateShape') {
           return rebuildStateShape;
         }
@@ -2200,1167 +2160,1154 @@ function createProxyHandler<T>(
             return [];
           };
         }
-        if (Array.isArray(currentState)) {
-          if (prop === 'getSelected') {
-            return () => {
-              const fullKey = stateKey + '.' + path.join('.');
-              registerComponentDependency(stateKey, componentId, [
-                ...path,
-                'getSelected',
-              ]);
-
-              const selectedIndicesMap =
-                getGlobalStore.getState().selectedIndicesMap;
-              if (!selectedIndicesMap || !selectedIndicesMap.has(fullKey)) {
-                return undefined;
-              }
-
-              const selectedItemKey = selectedIndicesMap.get(fullKey)!;
-              if (meta?.validIds) {
-                if (!meta.validIds.includes(selectedItemKey)) {
-                  return undefined;
-                }
-              }
 
-              const value = getGlobalStore
-                .getState()
-                .getShadowValue(selectedItemKey);
+        if (prop === 'getSelected') {
+          return () => {
+            const fullKey = stateKey + '.' + path.join('.');
+            registerComponentDependency(stateKey, componentId, [
+              ...path,
+              'getSelected',
+            ]);
+
+            const selectedIndicesMap =
+              getGlobalStore.getState().selectedIndicesMap;
+            if (!selectedIndicesMap || !selectedIndicesMap.has(fullKey)) {
+              return undefined;
+            }
 
-              if (!value) {
+            const selectedItemKey = selectedIndicesMap.get(fullKey)!;
+            if (meta?.validIds) {
+              if (!meta.validIds.includes(selectedItemKey)) {
                 return undefined;
               }
+            }
 
-              return rebuildStateShape({
-                currentState: value,
-                path: selectedItemKey.split('.').slice(1) as string[],
-                componentId: componentId!,
-              });
-            };
-          }
-          if (prop === 'getSelectedIndex') {
-            return () => {
-              const selectedIndex = getGlobalStore
-                .getState()
-                .getSelectedIndex(
-                  stateKey + '.' + path.join('.'),
-                  meta?.validIds
-                );
-
-              return selectedIndex;
-            };
-          }
-          if (prop === 'clearSelected') {
-            notifySelectionComponents(stateKey, path);
-            return () => {
-              getGlobalStore.getState().clearSelectedIndex({
-                arrayKey: stateKey + '.' + path.join('.'),
-              });
-            };
-          }
+            const value = getGlobalStore
+              .getState()
+              .getShadowValue(selectedItemKey);
 
-          if (prop === 'useVirtualView') {
-            return (
-              options: VirtualViewOptions
-            ): VirtualStateObjectResult<any[]> => {
-              const {
-                itemHeight = 50,
-                overscan = 6,
-                stickToBottom = false,
-                scrollStickTolerance = 75,
-              } = options;
-
-              const containerRef = useRef<HTMLDivElement | null>(null);
-              const [range, setRange] = useState({
-                startIndex: 0,
-                endIndex: 10,
-              });
-              const [rerender, forceUpdate] = useState({});
-              const initialScrollRef = useRef(true);
-
-              // Scroll state management
-              const scrollStateRef = useRef({
-                isUserScrolling: false,
-                lastScrollTop: 0,
-                scrollUpCount: 0,
-                isNearBottom: true,
-              });
+            if (!value) {
+              return undefined;
+            }
 
-              // Measurement cache
-              const measurementCache = useRef(
-                new Map<string, { height: number; offset: number }>()
+            return rebuildStateShape({
+              path: selectedItemKey.split('.').slice(1) as string[],
+              componentId: componentId!,
+            });
+          };
+        }
+        if (prop === 'getSelectedIndex') {
+          return () => {
+            const selectedIndex = getGlobalStore
+              .getState()
+              .getSelectedIndex(
+                stateKey + '.' + path.join('.'),
+                meta?.validIds
               );
 
-              // Separate effect for handling rerender updates
-              useLayoutEffect(() => {
-                if (
-                  !stickToBottom ||
-                  !containerRef.current ||
-                  scrollStateRef.current.isUserScrolling
-                )
-                  return;
+            return selectedIndex;
+          };
+        }
+        if (prop === 'clearSelected') {
+          notifySelectionComponents(stateKey, path);
+          return () => {
+            getGlobalStore.getState().clearSelectedIndex({
+              arrayKey: stateKey + '.' + path.join('.'),
+            });
+          };
+        }
 
-                const container = containerRef.current;
-                container.scrollTo({
-                  top: container.scrollHeight,
-                  behavior: initialScrollRef.current ? 'instant' : 'smooth',
-                });
-              }, [rerender, stickToBottom]);
+        if (prop === 'useVirtualView') {
+          return (
+            options: VirtualViewOptions
+          ): VirtualStateObjectResult<any[]> => {
+            const {
+              itemHeight = 50,
+              overscan = 6,
+              stickToBottom = false,
+              scrollStickTolerance = 75,
+            } = options;
+
+            const containerRef = useRef<HTMLDivElement | null>(null);
+            const [range, setRange] = useState({
+              startIndex: 0,
+              endIndex: 10,
+            });
+            const [rerender, forceUpdate] = useState({});
+            const initialScrollRef = useRef(true);
+
+            // Scroll state management
+            const scrollStateRef = useRef({
+              isUserScrolling: false,
+              lastScrollTop: 0,
+              scrollUpCount: 0,
+              isNearBottom: true,
+            });
+
+            // Measurement cache
+            const measurementCache = useRef(
+              new Map<string, { height: number; offset: number }>()
+            );
+
+            // Separate effect for handling rerender updates
+            useLayoutEffect(() => {
+              if (
+                !stickToBottom ||
+                !containerRef.current ||
+                scrollStateRef.current.isUserScrolling
+              )
+                return;
 
-              const arrayKeys =
+              const container = containerRef.current;
+              container.scrollTo({
+                top: container.scrollHeight,
+                behavior: initialScrollRef.current ? 'instant' : 'smooth',
+              });
+            }, [rerender, stickToBottom]);
+
+            const arrayKeys =
+              getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                ?.arrayKeys || [];
+
+            // Calculate total height and offsets
+            const { totalHeight, itemOffsets } = useMemo(() => {
+              let runningOffset = 0;
+              const offsets = new Map<
+                string,
+                { height: number; offset: number }
+              >();
+              const allItemKeys =
                 getGlobalStore.getState().getShadowMetadata(stateKey, path)
                   ?.arrayKeys || [];
 
-              // Calculate total height and offsets
-              const { totalHeight, itemOffsets } = useMemo(() => {
-                let runningOffset = 0;
-                const offsets = new Map<
-                  string,
-                  { height: number; offset: number }
-                >();
-                const allItemKeys =
-                  getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                    ?.arrayKeys || [];
-
-                allItemKeys.forEach((itemKey) => {
-                  const itemPath = itemKey.split('.').slice(1);
-                  const measuredHeight =
-                    getGlobalStore
-                      .getState()
-                      .getShadowMetadata(stateKey, itemPath)?.virtualizer
-                      ?.itemHeight || itemHeight;
-
-                  offsets.set(itemKey, {
-                    height: measuredHeight,
-                    offset: runningOffset,
-                  });
+              allItemKeys.forEach((itemKey) => {
+                const itemPath = itemKey.split('.').slice(1);
+                const measuredHeight =
+                  getGlobalStore
+                    .getState()
+                    .getShadowMetadata(stateKey, itemPath)?.virtualizer
+                    ?.itemHeight || itemHeight;
 
-                  runningOffset += measuredHeight;
+                offsets.set(itemKey, {
+                  height: measuredHeight,
+                  offset: runningOffset,
                 });
 
-                measurementCache.current = offsets;
-                return { totalHeight: runningOffset, itemOffsets: offsets };
-              }, [arrayKeys.length, itemHeight]);
-
-              // Improved initial positioning effect
-              useLayoutEffect(() => {
-                if (
-                  stickToBottom &&
-                  arrayKeys.length > 0 &&
-                  containerRef.current &&
-                  !scrollStateRef.current.isUserScrolling &&
-                  initialScrollRef.current
-                ) {
-                  const container = containerRef.current;
-
-                  // Wait for container to have dimensions
-                  const waitForContainer = () => {
-                    if (container.clientHeight > 0) {
-                      const visibleCount = Math.ceil(
-                        container.clientHeight / itemHeight
-                      );
-                      const endIndex = arrayKeys.length - 1;
-                      const startIndex = Math.max(
-                        0,
-                        endIndex - visibleCount - overscan
-                      );
-
-                      setRange({ startIndex, endIndex });
-
-                      // Ensure scroll after range is set
-                      requestAnimationFrame(() => {
-                        scrollToBottom('instant');
-                        initialScrollRef.current = false; // Mark initial scroll as done
-                      });
-                    } else {
-                      // Container not ready, try again
-                      requestAnimationFrame(waitForContainer);
-                    }
-                  };
+                runningOffset += measuredHeight;
+              });
 
-                  waitForContainer();
-                }
-              }, [arrayKeys.length, stickToBottom, itemHeight, overscan]);
+              measurementCache.current = offsets;
+              return { totalHeight: runningOffset, itemOffsets: offsets };
+            }, [arrayKeys.length, itemHeight]);
 
-              // Combined scroll handler
-              const handleScroll = useCallback(() => {
+            // Improved initial positioning effect
+            useLayoutEffect(() => {
+              if (
+                stickToBottom &&
+                arrayKeys.length > 0 &&
+                containerRef.current &&
+                !scrollStateRef.current.isUserScrolling &&
+                initialScrollRef.current
+              ) {
                 const container = containerRef.current;
-                if (!container) return;
 
-                const currentScrollTop = container.scrollTop;
-                const { scrollHeight, clientHeight } = container;
-                const scrollState = scrollStateRef.current;
-
-                // Check if user is near bottom
-                const distanceFromBottom =
-                  scrollHeight - (currentScrollTop + clientHeight);
-                const wasNearBottom = scrollState.isNearBottom;
-                scrollState.isNearBottom =
-                  distanceFromBottom <= scrollStickTolerance;
-
-                // Detect scroll direction
-                if (currentScrollTop < scrollState.lastScrollTop) {
-                  // User scrolled up
-                  scrollState.scrollUpCount++;
-
-                  if (scrollState.scrollUpCount > 3 && wasNearBottom) {
-                    // User has deliberately scrolled away from bottom
-                    scrollState.isUserScrolling = true;
-                    console.log('User scrolled away from bottom');
-                  }
-                } else if (scrollState.isNearBottom) {
-                  // Reset if we're back near the bottom
-                  scrollState.isUserScrolling = false;
-                  scrollState.scrollUpCount = 0;
-                }
+                // Wait for container to have dimensions
+                const waitForContainer = () => {
+                  if (container.clientHeight > 0) {
+                    const visibleCount = Math.ceil(
+                      container.clientHeight / itemHeight
+                    );
+                    const endIndex = arrayKeys.length - 1;
+                    const startIndex = Math.max(
+                      0,
+                      endIndex - visibleCount - overscan
+                    );
 
-                scrollState.lastScrollTop = currentScrollTop;
+                    setRange({ startIndex, endIndex });
 
-                // Update visible range
-                let newStartIndex = 0;
-                for (let i = 0; i < arrayKeys.length; i++) {
-                  const itemKey = arrayKeys[i];
-                  const item = measurementCache.current.get(itemKey!);
-                  if (item && item.offset + item.height > currentScrollTop) {
-                    newStartIndex = i;
-                    break;
+                    // Ensure scroll after range is set
+                    requestAnimationFrame(() => {
+                      scrollToBottom('instant');
+                      initialScrollRef.current = false; // Mark initial scroll as done
+                    });
+                  } else {
+                    // Container not ready, try again
+                    requestAnimationFrame(waitForContainer);
                   }
-                }
+                };
 
-                // Only update if range actually changed
-                if (newStartIndex !== range.startIndex) {
-                  const visibleCount = Math.ceil(clientHeight / itemHeight);
-                  setRange({
-                    startIndex: Math.max(0, newStartIndex - overscan),
-                    endIndex: Math.min(
-                      arrayKeys.length - 1,
-                      newStartIndex + visibleCount + overscan
-                    ),
-                  });
+                waitForContainer();
+              }
+            }, [arrayKeys.length, stickToBottom, itemHeight, overscan]);
+
+            // Combined scroll handler
+            const handleScroll = useCallback(() => {
+              const container = containerRef.current;
+              if (!container) return;
+
+              const currentScrollTop = container.scrollTop;
+              const { scrollHeight, clientHeight } = container;
+              const scrollState = scrollStateRef.current;
+
+              // Check if user is near bottom
+              const distanceFromBottom =
+                scrollHeight - (currentScrollTop + clientHeight);
+              const wasNearBottom = scrollState.isNearBottom;
+              scrollState.isNearBottom =
+                distanceFromBottom <= scrollStickTolerance;
+
+              // Detect scroll direction
+              if (currentScrollTop < scrollState.lastScrollTop) {
+                // User scrolled up
+                scrollState.scrollUpCount++;
+
+                if (scrollState.scrollUpCount > 3 && wasNearBottom) {
+                  // User has deliberately scrolled away from bottom
+                  scrollState.isUserScrolling = true;
+                  console.log('User scrolled away from bottom');
                 }
-              }, [
-                arrayKeys.length,
-                range.startIndex,
-                itemHeight,
-                overscan,
-                scrollStickTolerance,
-              ]);
+              } else if (scrollState.isNearBottom) {
+                // Reset if we're back near the bottom
+                scrollState.isUserScrolling = false;
+                scrollState.scrollUpCount = 0;
+              }
 
-              // Set up scroll listener
-              useEffect(() => {
-                const container = containerRef.current;
-                if (!container || !stickToBottom) return;
+              scrollState.lastScrollTop = currentScrollTop;
+
+              // Update visible range
+              let newStartIndex = 0;
+              for (let i = 0; i < arrayKeys.length; i++) {
+                const itemKey = arrayKeys[i];
+                const item = measurementCache.current.get(itemKey!);
+                if (item && item.offset + item.height > currentScrollTop) {
+                  newStartIndex = i;
+                  break;
+                }
+              }
 
-                container.addEventListener('scroll', handleScroll, {
-                  passive: true,
+              // Only update if range actually changed
+              if (newStartIndex !== range.startIndex) {
+                const visibleCount = Math.ceil(clientHeight / itemHeight);
+                setRange({
+                  startIndex: Math.max(0, newStartIndex - overscan),
+                  endIndex: Math.min(
+                    arrayKeys.length - 1,
+                    newStartIndex + visibleCount + overscan
+                  ),
                 });
+              }
+            }, [
+              arrayKeys.length,
+              range.startIndex,
+              itemHeight,
+              overscan,
+              scrollStickTolerance,
+            ]);
+
+            // Set up scroll listener
+            useEffect(() => {
+              const container = containerRef.current;
+              if (!container || !stickToBottom) return;
+
+              container.addEventListener('scroll', handleScroll, {
+                passive: true,
+              });
 
-                return () => {
-                  container.removeEventListener('scroll', handleScroll);
-                };
-              }, [handleScroll, stickToBottom]);
-              const scrollToBottom = useCallback(
-                (behavior: ScrollBehavior = 'smooth') => {
-                  const container = containerRef.current;
-                  if (!container) return;
-
-                  // Reset scroll state
-                  scrollStateRef.current.isUserScrolling = false;
-                  scrollStateRef.current.isNearBottom = true;
-                  scrollStateRef.current.scrollUpCount = 0;
-
-                  const performScroll = () => {
-                    // Multiple attempts to ensure we hit the bottom
-                    const attemptScroll = (attempts = 0) => {
-                      if (attempts > 5) return; // Prevent infinite loops
-
-                      const currentHeight = container.scrollHeight;
-                      const currentScroll = container.scrollTop;
-                      const clientHeight = container.clientHeight;
-
-                      // Check if we're already at the bottom
-                      if (currentScroll + clientHeight >= currentHeight - 1) {
-                        return;
-                      }
+              return () => {
+                container.removeEventListener('scroll', handleScroll);
+              };
+            }, [handleScroll, stickToBottom]);
+            const scrollToBottom = useCallback(
+              (behavior: ScrollBehavior = 'smooth') => {
+                const container = containerRef.current;
+                if (!container) return;
 
-                      container.scrollTo({
-                        top: currentHeight,
-                        behavior: behavior,
-                      });
+                // Reset scroll state
+                scrollStateRef.current.isUserScrolling = false;
+                scrollStateRef.current.isNearBottom = true;
+                scrollStateRef.current.scrollUpCount = 0;
 
-                      // In slow environments, check again after a short delay
-                      setTimeout(() => {
-                        const newHeight = container.scrollHeight;
-                        const newScroll = container.scrollTop;
+                const performScroll = () => {
+                  // Multiple attempts to ensure we hit the bottom
+                  const attemptScroll = (attempts = 0) => {
+                    if (attempts > 5) return; // Prevent infinite loops
 
-                        // If height changed or we're not at bottom, try again
-                        if (
-                          newHeight !== currentHeight ||
-                          newScroll + clientHeight < newHeight - 1
-                        ) {
-                          attemptScroll(attempts + 1);
-                        }
-                      }, 50);
-                    };
+                    const currentHeight = container.scrollHeight;
+                    const currentScroll = container.scrollTop;
+                    const clientHeight = container.clientHeight;
 
-                    attemptScroll();
-                  };
+                    // Check if we're already at the bottom
+                    if (currentScroll + clientHeight >= currentHeight - 1) {
+                      return;
+                    }
 
-                  // Use requestIdleCallback for better performance in slow environments
-                  if ('requestIdleCallback' in window) {
-                    requestIdleCallback(performScroll, { timeout: 100 });
-                  } else {
-                    // Fallback to rAF chain
-                    requestAnimationFrame(() => {
-                      requestAnimationFrame(performScroll);
+                    container.scrollTo({
+                      top: currentHeight,
+                      behavior: behavior,
                     });
-                  }
-                },
-                []
-              );
-              // Auto-scroll to bottom when new content arrives
-              // Consolidated auto-scroll effect with debouncing
-              useEffect(() => {
-                if (!stickToBottom || !containerRef.current) return;
-
-                const container = containerRef.current;
-                const scrollState = scrollStateRef.current;
 
-                // Debounced scroll function
-                let scrollTimeout: NodeJS.Timeout;
-                const debouncedScrollToBottom = () => {
-                  clearTimeout(scrollTimeout);
-                  scrollTimeout = setTimeout(() => {
-                    if (
-                      !scrollState.isUserScrolling &&
-                      scrollState.isNearBottom
-                    ) {
-                      scrollToBottom(
-                        initialScrollRef.current ? 'instant' : 'smooth'
-                      );
-                    }
-                  }, 100);
-                };
+                    // In slow environments, check again after a short delay
+                    setTimeout(() => {
+                      const newHeight = container.scrollHeight;
+                      const newScroll = container.scrollTop;
 
-                // Single MutationObserver for all DOM changes
-                const observer = new MutationObserver(() => {
-                  if (!scrollState.isUserScrolling) {
-                    debouncedScrollToBottom();
-                  }
-                });
+                      // If height changed or we're not at bottom, try again
+                      if (
+                        newHeight !== currentHeight ||
+                        newScroll + clientHeight < newHeight - 1
+                      ) {
+                        attemptScroll(attempts + 1);
+                      }
+                    }, 50);
+                  };
 
-                observer.observe(container, {
-                  childList: true,
-                  subtree: true,
-                  attributes: true,
-                  attributeFilter: ['style', 'class'], // More specific than just 'height'
-                });
+                  attemptScroll();
+                };
 
-                // Handle image loads with event delegation
-                const handleImageLoad = (e: Event) => {
+                // Use requestIdleCallback for better performance in slow environments
+                if ('requestIdleCallback' in window) {
+                  requestIdleCallback(performScroll, { timeout: 100 });
+                } else {
+                  // Fallback to rAF chain
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(performScroll);
+                  });
+                }
+              },
+              []
+            );
+            // Auto-scroll to bottom when new content arrives
+            // Consolidated auto-scroll effect with debouncing
+            useEffect(() => {
+              if (!stickToBottom || !containerRef.current) return;
+
+              const container = containerRef.current;
+              const scrollState = scrollStateRef.current;
+
+              // Debounced scroll function
+              let scrollTimeout: NodeJS.Timeout;
+              const debouncedScrollToBottom = () => {
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
                   if (
-                    e.target instanceof HTMLImageElement &&
-                    !scrollState.isUserScrolling
+                    !scrollState.isUserScrolling &&
+                    scrollState.isNearBottom
                   ) {
-                    debouncedScrollToBottom();
+                    scrollToBottom(
+                      initialScrollRef.current ? 'instant' : 'smooth'
+                    );
                   }
-                };
+                }, 100);
+              };
+
+              // Single MutationObserver for all DOM changes
+              const observer = new MutationObserver(() => {
+                if (!scrollState.isUserScrolling) {
+                  debouncedScrollToBottom();
+                }
+              });
 
-                container.addEventListener('load', handleImageLoad, true);
+              observer.observe(container, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class'], // More specific than just 'height'
+              });
 
-                // Initial scroll with proper timing
-                if (initialScrollRef.current) {
-                  // For initial load, wait for next tick to ensure DOM is ready
-                  setTimeout(() => {
-                    scrollToBottom('instant');
-                  }, 0);
-                } else {
+              // Handle image loads with event delegation
+              const handleImageLoad = (e: Event) => {
+                if (
+                  e.target instanceof HTMLImageElement &&
+                  !scrollState.isUserScrolling
+                ) {
                   debouncedScrollToBottom();
                 }
+              };
 
-                return () => {
-                  clearTimeout(scrollTimeout);
-                  observer.disconnect();
-                  container.removeEventListener('load', handleImageLoad, true);
-                };
-              }, [stickToBottom, arrayKeys.length, scrollToBottom]);
-              // Create virtual state
-              const virtualState = useMemo(() => {
-                const store = getGlobalStore.getState();
-                const sourceArray = store.getShadowValue(
-                  [stateKey, ...path].join('.')
-                ) as any[];
-                const currentKeys =
-                  store.getShadowMetadata(stateKey, path)?.arrayKeys || [];
-
-                const slicedArray = sourceArray.slice(
-                  range.startIndex,
-                  range.endIndex + 1
-                );
-                const slicedIds = currentKeys.slice(
-                  range.startIndex,
-                  range.endIndex + 1
-                );
+              container.addEventListener('load', handleImageLoad, true);
 
-                return rebuildStateShape({
-                  currentState: slicedArray as any,
-                  path,
-                  componentId: componentId!,
-                  meta: { ...meta, validIds: slicedIds },
-                });
-              }, [range.startIndex, range.endIndex, arrayKeys.length]);
-
-              return {
-                virtualState,
-                virtualizerProps: {
-                  outer: {
-                    ref: containerRef,
-                    style: {
-                      overflowY: 'auto',
-                      height: '100%',
-                      position: 'relative',
-                    },
-                  },
-                  inner: {
-                    style: {
-                      height: `${totalHeight}px`,
-                      position: 'relative',
-                    },
+              // Initial scroll with proper timing
+              if (initialScrollRef.current) {
+                // For initial load, wait for next tick to ensure DOM is ready
+                setTimeout(() => {
+                  scrollToBottom('instant');
+                }, 0);
+              } else {
+                debouncedScrollToBottom();
+              }
+
+              return () => {
+                clearTimeout(scrollTimeout);
+                observer.disconnect();
+                container.removeEventListener('load', handleImageLoad, true);
+              };
+            }, [stickToBottom, arrayKeys.length, scrollToBottom]);
+            // Create virtual state
+            const virtualState = useMemo(() => {
+              const store = getGlobalStore.getState();
+              const sourceArray = store.getShadowValue(
+                [stateKey, ...path].join('.')
+              ) as any[];
+              const currentKeys =
+                store.getShadowMetadata(stateKey, path)?.arrayKeys || [];
+
+              const slicedArray = sourceArray.slice(
+                range.startIndex,
+                range.endIndex + 1
+              );
+              const slicedIds = currentKeys.slice(
+                range.startIndex,
+                range.endIndex + 1
+              );
+
+              return rebuildStateShape({
+                path,
+                componentId: componentId!,
+                meta: { ...meta, validIds: slicedIds },
+              });
+            }, [range.startIndex, range.endIndex, arrayKeys.length]);
+
+            return {
+              virtualState,
+              virtualizerProps: {
+                outer: {
+                  ref: containerRef,
+                  style: {
+                    overflowY: 'auto',
+                    height: '100%',
+                    position: 'relative',
                   },
-                  list: {
-                    style: {
-                      transform: `translateY(${
-                        measurementCache.current.get(
-                          arrayKeys[range.startIndex]!
-                        )?.offset || 0
-                      }px)`,
-                    },
+                },
+                inner: {
+                  style: {
+                    height: `${totalHeight}px`,
+                    position: 'relative',
                   },
                 },
-                scrollToBottom,
-                scrollToIndex: (
-                  index: number,
-                  behavior: ScrollBehavior = 'smooth'
-                ) => {
-                  if (containerRef.current && arrayKeys[index]) {
-                    const offset =
-                      measurementCache.current.get(arrayKeys[index]!)?.offset ||
-                      0;
-                    containerRef.current.scrollTo({ top: offset, behavior });
-                  }
+                list: {
+                  style: {
+                    transform: `translateY(${
+                      measurementCache.current.get(arrayKeys[range.startIndex]!)
+                        ?.offset || 0
+                    }px)`,
+                  },
                 },
-              };
-            };
-          }
-          if (prop === 'stateMap') {
-            return (
-              callbackfn: (
-                setter: any,
+              },
+              scrollToBottom,
+              scrollToIndex: (
                 index: number,
+                behavior: ScrollBehavior = 'smooth'
+              ) => {
+                if (containerRef.current && arrayKeys[index]) {
+                  const offset =
+                    measurementCache.current.get(arrayKeys[index]!)?.offset ||
+                    0;
+                  containerRef.current.scrollTo({ top: offset, behavior });
+                }
+              },
+            };
+          };
+        }
+        if (prop === 'stateMap') {
+          return (
+            callbackfn: (
+              setter: any,
+              index: number,
+
+              arraySetter: any
+            ) => void
+          ) => {
+            const [arrayKeys, setArrayKeys] = useState<any>(
+              meta?.validIds ??
+                getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                  ?.arrayKeys
+            );
+            // getGlobalStore.getState().subscribeToPath(stateKeyPathKey, () => {
+            //   console.log(
+            //     "stateKeyPathKeyccccccccccccccccc",
+            //     stateKeyPathKey
+            //   );
+            //   setArrayKeys(
+            //     getGlobalStore.getState().getShadowMetadata(stateKey, path)
+            //   );
+            // });
+
+            const shadowValue = getGlobalStore
+              .getState()
+              .getShadowValue(stateKeyPathKey, meta?.validIds) as any[];
+            if (!arrayKeys) {
+              throw new Error('No array keys found for mapping');
+            }
+            const arraySetter = rebuildStateShape({
+              path,
+              componentId: componentId!,
+              meta,
+            });
 
-                arraySetter: any
-              ) => void
-            ) => {
-              const [arrayKeys, setArrayKeys] = useState<any>(
-                meta?.validIds ??
-                  getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                    ?.arrayKeys
-              );
-              // getGlobalStore.getState().subscribeToPath(stateKeyPathKey, () => {
-              //   console.log(
-              //     "stateKeyPathKeyccccccccccccccccc",
-              //     stateKeyPathKey
-              //   );
-              //   setArrayKeys(
-              //     getGlobalStore.getState().getShadowMetadata(stateKey, path)
-              //   );
-              // });
-
-              const shadowValue = getGlobalStore
-                .getState()
-                .getShadowValue(stateKeyPathKey, meta?.validIds) as any[];
-              if (!arrayKeys) {
-                throw new Error('No array keys found for mapping');
-              }
-              const arraySetter = rebuildStateShape({
-                currentState: shadowValue as any,
-                path,
+            return shadowValue.map((item, index) => {
+              const itemPath = arrayKeys[index]?.split('.').slice(1);
+              const itemSetter = rebuildStateShape({
+                path: itemPath as any,
                 componentId: componentId!,
                 meta,
               });
 
-              return shadowValue.map((item, index) => {
-                const itemPath = arrayKeys[index]?.split('.').slice(1);
-                const itemSetter = rebuildStateShape({
-                  currentState: item,
-                  path: itemPath as any,
-                  componentId: componentId!,
-                  meta,
-                });
-
-                return callbackfn(
-                  itemSetter,
-                  index,
+              return callbackfn(
+                itemSetter,
+                index,
 
-                  arraySetter
-                );
-              });
-            };
-          }
+                arraySetter
+              );
+            });
+          };
+        }
 
-          if (prop === '$stateMap') {
-            return (callbackfn: any) =>
-              createElement(SignalMapRenderer, {
-                proxy: {
-                  _stateKey: stateKey,
-                  _path: path,
-                  _mapFn: callbackfn,
-                  _meta: meta,
-                },
-                rebuildStateShape,
-              });
-          } // In createProxyHandler -> handler -> get -> if (Array.isArray(currentState))
+        if (prop === '$stateMap') {
+          return (callbackfn: any) =>
+            createElement(SignalMapRenderer, {
+              proxy: {
+                _stateKey: stateKey,
+                _path: path,
+                _mapFn: callbackfn,
+                _meta: meta,
+              },
+              rebuildStateShape,
+            });
+        } // In createProxyHandler -> handler -> get -> if (Array.isArray(currentState))
+
+        if (prop === 'stateFind') {
+          return (
+            callbackfn: (value: any, index: number) => boolean
+          ): StateObject<any> | undefined => {
+            // 1. Use the correct set of keys: filtered/sorted from meta, or all keys from the store.
+            const arrayKeys =
+              meta?.validIds ??
+              getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                ?.arrayKeys;
+
+            if (!arrayKeys) {
+              return undefined;
+            }
 
-          if (prop === 'stateFind') {
-            return (
-              callbackfn: (value: any, index: number) => boolean
-            ): StateObject<any> | undefined => {
-              // 1. Use the correct set of keys: filtered/sorted from meta, or all keys from the store.
-              const arrayKeys =
-                meta?.validIds ??
-                getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                  ?.arrayKeys;
+            // 2. Iterate through the keys, get the value for each, and run the callback.
+            for (let i = 0; i < arrayKeys.length; i++) {
+              const itemKey = arrayKeys[i];
+              if (!itemKey) continue; // Safety check
 
-              if (!arrayKeys) {
-                return undefined;
-              }
+              const itemValue = getGlobalStore
+                .getState()
+                .getShadowValue(itemKey);
 
-              // 2. Iterate through the keys, get the value for each, and run the callback.
-              for (let i = 0; i < arrayKeys.length; i++) {
-                const itemKey = arrayKeys[i];
-                if (!itemKey) continue; // Safety check
+              // 3. If the callback returns true, we've found our item.
+              if (callbackfn(itemValue, i)) {
+                // Get the item's path relative to the stateKey (e.g., ['messages', '42'] -> ['42'])
+                const itemPath = itemKey.split('.').slice(1);
 
-                const itemValue = getGlobalStore
-                  .getState()
-                  .getShadowValue(itemKey);
-
-                // 3. If the callback returns true, we've found our item.
-                if (callbackfn(itemValue, i)) {
-                  // Get the item's path relative to the stateKey (e.g., ['messages', '42'] -> ['42'])
-                  const itemPath = itemKey.split('.').slice(1);
-
-                  // 4. Rebuild a new, fully functional StateObject for just that item and return it.
-                  return rebuildStateShape({
-                    currentState: itemValue,
-                    path: itemPath,
-                    componentId: componentId,
-                    meta, // Pass along meta for potential further chaining
-                  });
-                }
+                // 4. Rebuild a new, fully functional StateObject for just that item and return it.
+                return rebuildStateShape({
+                  path: itemPath,
+                  componentId: componentId,
+                  meta, // Pass along meta for potential further chaining
+                });
               }
+            }
 
-              // 5. If the loop finishes without finding anything, return undefined.
-              return undefined;
-            };
-          }
-          if (prop === 'stateFilter') {
-            return (callbackfn: (value: any, index: number) => boolean) => {
-              const arrayKeys =
-                meta?.validIds ??
-                getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                  ?.arrayKeys;
-
-              if (!arrayKeys) {
-                throw new Error('No array keys found for filtering.');
-              }
+            // 5. If the loop finishes without finding anything, return undefined.
+            return undefined;
+          };
+        }
+        if (prop === 'stateFilter') {
+          return (callbackfn: (value: any, index: number) => boolean) => {
+            const currentState = getGlobalStore
+              .getState()
+              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+            if (!Array.isArray(currentState)) return [];
+            const arrayKeys =
+              meta?.validIds ??
+              getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                ?.arrayKeys;
+
+            if (!arrayKeys) {
+              throw new Error('No array keys found for filtering.');
+            }
 
-              const newValidIds: string[] = [];
-              const filteredArray = currentState.filter(
-                (val: any, index: number) => {
-                  const didPass = callbackfn(val, index);
-                  if (didPass) {
-                    newValidIds.push(arrayKeys[index]!);
-                    return true;
-                  }
-                  return false;
+            const newValidIds: string[] = [];
+            const filteredArray = currentState.filter(
+              (val: any, index: number) => {
+                const didPass = callbackfn(val, index);
+                if (didPass) {
+                  newValidIds.push(arrayKeys[index]!);
+                  return true;
                 }
-              );
+                return false;
+              }
+            );
 
-              return rebuildStateShape({
-                currentState: filteredArray as any,
-                path,
-                componentId: componentId!,
-                meta: {
-                  validIds: newValidIds,
-                  transforms: [
-                    ...(meta?.transforms || []),
-                    {
-                      type: 'filter',
-                      fn: callbackfn,
-                    },
-                  ],
-                },
-              });
-            };
-          }
-          if (prop === 'stateSort') {
-            return (compareFn: (a: any, b: any) => number) => {
-              const arrayKeys =
-                meta?.validIds ??
-                getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                  ?.arrayKeys;
-              if (!arrayKeys) {
-                throw new Error('No array keys found for sorting');
+            return rebuildStateShape({
+              path,
+              componentId: componentId!,
+              meta: {
+                validIds: newValidIds,
+                transforms: [
+                  ...(meta?.transforms || []),
+                  {
+                    type: 'filter',
+                    fn: callbackfn,
+                  },
+                ],
+              },
+            });
+          };
+        }
+        if (prop === 'stateSort') {
+          return (compareFn: (a: any, b: any) => number) => {
+            const currentState = getGlobalStore
+              .getState()
+              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+            if (!Array.isArray(currentState)) return []; // Guard clause
+            const arrayKeys =
+              meta?.validIds ??
+              getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                ?.arrayKeys;
+            if (!arrayKeys) {
+              throw new Error('No array keys found for sorting');
+            }
+            const itemsWithIds = currentState.map((item, index) => ({
+              item,
+              key: arrayKeys[index],
+            }));
+
+            itemsWithIds
+              .sort((a, b) => compareFn(a.item, b.item))
+              .filter(Boolean);
+
+            return rebuildStateShape({
+              path,
+              componentId: componentId!,
+              meta: {
+                validIds: itemsWithIds.map((i) => i.key) as string[],
+                transforms: [
+                  ...(meta?.transforms || []),
+                  { type: 'sort', fn: compareFn },
+                ],
+              },
+            });
+          };
+        }
+        // In createProxyHandler, inside the get trap where you have other array methods:
+        if (prop === 'stream') {
+          return function <U = InferArrayElement<T>, R = U>(
+            options: StreamOptions<U, R> = {}
+          ): StreamHandle<U> {
+            const {
+              bufferSize = 100,
+              flushInterval = 100,
+              bufferStrategy = 'accumulate',
+              store,
+              onFlush,
+            } = options;
+
+            let buffer: U[] = [];
+            let isPaused = false;
+            let flushTimer: NodeJS.Timeout | null = null;
+
+            const addToBuffer = (item: U) => {
+              if (isPaused) return;
+
+              if (bufferStrategy === 'sliding' && buffer.length >= bufferSize) {
+                buffer.shift();
+              } else if (
+                bufferStrategy === 'dropping' &&
+                buffer.length >= bufferSize
+              ) {
+                return;
               }
-              const itemsWithIds = currentState.map((item, index) => ({
-                item,
-                key: arrayKeys[index],
-              }));
 
-              itemsWithIds
-                .sort((a, b) => compareFn(a.item, b.item))
-                .filter(Boolean);
+              buffer.push(item);
 
-              return rebuildStateShape({
-                currentState: itemsWithIds.map((i) => i.item) as any,
-                path,
-                componentId: componentId!,
-                meta: {
-                  validIds: itemsWithIds.map((i) => i.key) as string[],
-                  transforms: [
-                    ...(meta?.transforms || []),
-                    { type: 'sort', fn: compareFn },
-                  ],
-                },
-              });
+              if (buffer.length >= bufferSize) {
+                flushBuffer();
+              }
             };
-          }
-          // In createProxyHandler, inside the get trap where you have other array methods:
-          if (prop === 'stream') {
-            return function <U = InferArrayElement<T>, R = U>(
-              options: StreamOptions<U, R> = {}
-            ): StreamHandle<U> {
-              const {
-                bufferSize = 100,
-                flushInterval = 100,
-                bufferStrategy = 'accumulate',
-                store,
-                onFlush,
-              } = options;
-
-              let buffer: U[] = [];
-              let isPaused = false;
-              let flushTimer: NodeJS.Timeout | null = null;
-
-              const addToBuffer = (item: U) => {
-                if (isPaused) return;
-
-                if (
-                  bufferStrategy === 'sliding' &&
-                  buffer.length >= bufferSize
-                ) {
-                  buffer.shift();
-                } else if (
-                  bufferStrategy === 'dropping' &&
-                  buffer.length >= bufferSize
-                ) {
-                  return;
-                }
 
-                buffer.push(item);
+            const flushBuffer = () => {
+              if (buffer.length === 0) return;
 
-                if (buffer.length >= bufferSize) {
-                  flushBuffer();
-                }
-              };
-
-              const flushBuffer = () => {
-                if (buffer.length === 0) return;
+              const toFlush = [...buffer];
+              buffer = [];
 
-                const toFlush = [...buffer];
-                buffer = [];
-
-                if (store) {
-                  const result = store(toFlush);
-                  if (result !== undefined) {
-                    const items = Array.isArray(result) ? result : [result];
-                    items.forEach((item) => {
-                      effectiveSetState(item as any, path, {
-                        updateType: 'insert',
-                      });
-                    });
-                  }
-                } else {
-                  toFlush.forEach((item) => {
+              if (store) {
+                const result = store(toFlush);
+                if (result !== undefined) {
+                  const items = Array.isArray(result) ? result : [result];
+                  items.forEach((item) => {
                     effectiveSetState(item as any, path, {
                       updateType: 'insert',
                     });
                   });
                 }
+              } else {
+                toFlush.forEach((item) => {
+                  effectiveSetState(item as any, path, {
+                    updateType: 'insert',
+                  });
+                });
+              }
 
-                onFlush?.(toFlush);
-              };
+              onFlush?.(toFlush);
+            };
 
-              if (flushInterval > 0) {
-                flushTimer = setInterval(flushBuffer, flushInterval);
-              }
+            if (flushInterval > 0) {
+              flushTimer = setInterval(flushBuffer, flushInterval);
+            }
 
-              const streamId = uuidv4();
-              const currentMeta =
-                getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
-                {};
-              const streams = currentMeta.streams || new Map();
-              streams.set(streamId, { buffer, flushTimer });
+            const streamId = uuidv4();
+            const currentMeta =
+              getGlobalStore.getState().getShadowMetadata(stateKey, path) || {};
+            const streams = currentMeta.streams || new Map();
+            streams.set(streamId, { buffer, flushTimer });
 
-              getGlobalStore.getState().setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                streams,
-              });
+            getGlobalStore.getState().setShadowMetadata(stateKey, path, {
+              ...currentMeta,
+              streams,
+            });
 
-              return {
-                write: (data: U) => addToBuffer(data),
-                writeMany: (data: U[]) => data.forEach(addToBuffer),
-                flush: () => flushBuffer(),
-                pause: () => {
-                  isPaused = true;
-                },
-                resume: () => {
-                  isPaused = false;
-                  if (buffer.length > 0) flushBuffer();
-                },
-                close: () => {
-                  flushBuffer();
-                  if (flushTimer) clearInterval(flushTimer);
+            return {
+              write: (data: U) => addToBuffer(data),
+              writeMany: (data: U[]) => data.forEach(addToBuffer),
+              flush: () => flushBuffer(),
+              pause: () => {
+                isPaused = true;
+              },
+              resume: () => {
+                isPaused = false;
+                if (buffer.length > 0) flushBuffer();
+              },
+              close: () => {
+                flushBuffer();
+                if (flushTimer) clearInterval(flushTimer);
 
-                  const meta = getGlobalStore
-                    .getState()
-                    .getShadowMetadata(stateKey, path);
-                  if (meta?.streams) {
-                    meta.streams.delete(streamId);
-                  }
-                },
-              };
+                const meta = getGlobalStore
+                  .getState()
+                  .getShadowMetadata(stateKey, path);
+                if (meta?.streams) {
+                  meta.streams.delete(streamId);
+                }
+              },
             };
-          }
+          };
+        }
 
-          if (prop === 'stateList') {
-            return (
-              callbackfn: (
-                setter: any,
-                index: number,
-                arraySetter: any
-              ) => ReactNode
-            ) => {
-              const StateListWrapper = () => {
-                const componentIdsRef = useRef<Map<string, string>>(new Map());
+        if (prop === 'stateList') {
+          return (
+            callbackfn: (
+              setter: any,
+              index: number,
+              arraySetter: any
+            ) => ReactNode
+          ) => {
+            const StateListWrapper = () => {
+              const componentIdsRef = useRef<Map<string, string>>(new Map());
+
+              const cacheKey =
+                meta?.transforms && meta.transforms.length > 0
+                  ? `${componentId}-${hashTransforms(meta.transforms)}`
+                  : `${componentId}-base`;
+
+              const [updateTrigger, forceUpdate] = useState({});
+
+              const { validIds, arrayValues } = useMemo(() => {
+                const cached = getGlobalStore
+                  .getState()
+                  .getShadowMetadata(stateKey, path)
+                  ?.transformCaches?.get(cacheKey);
 
-                const cacheKey =
-                  meta?.transforms && meta.transforms.length > 0
-                    ? `${componentId}-${hashTransforms(meta.transforms)}`
-                    : `${componentId}-base`;
+                let freshValidIds: string[];
 
-                const [updateTrigger, forceUpdate] = useState({});
+                if (cached && cached.validIds) {
+                  freshValidIds = cached.validIds;
+                } else {
+                  freshValidIds = applyTransforms(
+                    stateKey,
+                    path,
+                    meta?.transforms
+                  );
 
-                const { validIds, arrayValues } = useMemo(() => {
-                  const cached = getGlobalStore
+                  getGlobalStore
                     .getState()
-                    .getShadowMetadata(stateKey, path)
-                    ?.transformCaches?.get(cacheKey);
-
-                  let freshValidIds: string[];
-
-                  if (cached && cached.validIds) {
-                    freshValidIds = cached.validIds;
-                  } else {
-                    freshValidIds = applyTransforms(
-                      stateKey,
-                      path,
-                      meta?.transforms
-                    );
-
-                    getGlobalStore
-                      .getState()
-                      .setTransformCache(stateKey, path, cacheKey, {
-                        validIds: freshValidIds,
-                        computedAt: Date.now(),
-                        transforms: meta?.transforms || [],
-                      });
-                  }
+                    .setTransformCache(stateKey, path, cacheKey, {
+                      validIds: freshValidIds,
+                      computedAt: Date.now(),
+                      transforms: meta?.transforms || [],
+                    });
+                }
 
-                  const freshValues = getGlobalStore
-                    .getState()
-                    .getShadowValue(stateKeyPathKey, freshValidIds);
+                const freshValues = getGlobalStore
+                  .getState()
+                  .getShadowValue(stateKeyPathKey, freshValidIds);
 
-                  return {
-                    validIds: freshValidIds,
-                    arrayValues: freshValues || [],
-                  };
-                }, [cacheKey, updateTrigger]);
+                return {
+                  validIds: freshValidIds,
+                  arrayValues: freshValues || [],
+                };
+              }, [cacheKey, updateTrigger]);
 
-                useEffect(() => {
-                  const unsubscribe = getGlobalStore
-                    .getState()
-                    .subscribeToPath(stateKeyPathKey, (e) => {
-                      // A data change has occurred for the source array.
+              useEffect(() => {
+                const unsubscribe = getGlobalStore
+                  .getState()
+                  .subscribeToPath(stateKeyPathKey, (e) => {
+                    // A data change has occurred for the source array.
 
-                      if (e.type === 'GET_SELECTED') {
-                        return;
-                      }
-                      const shadowMeta = getGlobalStore
-                        .getState()
-                        .getShadowMetadata(stateKey, path);
-
-                      const caches = shadowMeta?.transformCaches;
-                      if (caches) {
-                        // Iterate over ALL keys in the cache map.
-                        for (const key of caches.keys()) {
-                          // If the key belongs to this component instance, delete it.
-                          // This purges caches for 'sort by name', 'sort by score', etc.
-                          if (key.startsWith(componentId)) {
-                            caches.delete(key);
-                          }
+                    if (e.type === 'GET_SELECTED') {
+                      return;
+                    }
+                    const shadowMeta = getGlobalStore
+                      .getState()
+                      .getShadowMetadata(stateKey, path);
+
+                    const caches = shadowMeta?.transformCaches;
+                    if (caches) {
+                      // Iterate over ALL keys in the cache map.
+                      for (const key of caches.keys()) {
+                        // If the key belongs to this component instance, delete it.
+                        // This purges caches for 'sort by name', 'sort by score', etc.
+                        if (key.startsWith(componentId)) {
+                          caches.delete(key);
                         }
                       }
+                    }
 
-                      if (
-                        e.type === 'INSERT' ||
-                        e.type === 'REMOVE' ||
-                        e.type === 'CLEAR_SELECTION'
-                      ) {
-                        forceUpdate({});
-                      }
-                    });
-
-                  return () => {
-                    unsubscribe();
-                  };
+                    if (
+                      e.type === 'INSERT' ||
+                      e.type === 'REMOVE' ||
+                      e.type === 'CLEAR_SELECTION'
+                    ) {
+                      forceUpdate({});
+                    }
+                  });
 
-                  // This effect's logic now depends on the componentId to perform the purge.
-                }, [componentId, stateKeyPathKey]);
+                return () => {
+                  unsubscribe();
+                };
 
-                if (!Array.isArray(arrayValues)) {
-                  return null;
-                }
+                // This effect's logic now depends on the componentId to perform the purge.
+              }, [componentId, stateKeyPathKey]);
 
-                const arraySetter = rebuildStateShape({
-                  currentState: arrayValues as any,
-                  path,
-                  componentId: componentId!,
-                  meta: {
-                    ...meta,
-                    validIds: validIds,
-                  },
-                });
+              if (!Array.isArray(arrayValues)) {
+                return null;
+              }
 
-                return (
-                  <>
-                    {arrayValues.map((item, localIndex) => {
-                      const itemKey = validIds[localIndex];
+              const arraySetter = rebuildStateShape({
+                path,
+                componentId: componentId!,
+                meta: {
+                  ...meta,
+                  validIds: validIds,
+                },
+              });
 
-                      if (!itemKey) {
-                        return null;
-                      }
+              return (
+                <>
+                  {arrayValues.map((item, localIndex) => {
+                    const itemKey = validIds[localIndex];
 
-                      let itemComponentId =
-                        componentIdsRef.current.get(itemKey);
-                      if (!itemComponentId) {
-                        itemComponentId = uuidv4();
-                        componentIdsRef.current.set(itemKey, itemComponentId);
-                      }
+                    if (!itemKey) {
+                      return null;
+                    }
 
-                      const itemPath = itemKey.split('.').slice(1);
+                    let itemComponentId = componentIdsRef.current.get(itemKey);
+                    if (!itemComponentId) {
+                      itemComponentId = uuidv4();
+                      componentIdsRef.current.set(itemKey, itemComponentId);
+                    }
 
-                      return createElement(MemoizedCogsItemWrapper, {
-                        key: itemKey,
-                        stateKey,
-                        itemComponentId,
-                        itemPath,
-                        localIndex,
-                        arraySetter,
-                        rebuildStateShape,
-                        renderFn: callbackfn,
-                      });
-                    })}
-                  </>
-                );
-              };
+                    const itemPath = itemKey.split('.').slice(1);
 
-              return <StateListWrapper />;
-            };
-          }
-          if (prop === 'stateFlattenOn') {
-            return (fieldName: string) => {
-              const arrayToMap = currentState as any[];
-              shapeCache.clear();
-              stateVersion++;
-              const flattenedResults = arrayToMap.flatMap(
-                (val: any) => val[fieldName] ?? []
+                    return createElement(MemoizedCogsItemWrapper, {
+                      key: itemKey,
+                      stateKey,
+                      itemComponentId,
+                      itemPath,
+                      localIndex,
+                      arraySetter,
+                      rebuildStateShape,
+                      renderFn: callbackfn,
+                    });
+                  })}
+                </>
               );
-              return rebuildStateShape({
-                currentState: flattenedResults as any,
-                path: [...path, '[*]', fieldName],
-                componentId: componentId!,
-                meta,
-              });
             };
-          }
-          if (prop === 'index') {
-            return (index: number) => {
-              const arrayKeys = getGlobalStore
-                .getState()
-                .getShadowMetadata(stateKey, path)
-                ?.arrayKeys?.filter(
-                  (key) =>
-                    !meta?.validIds ||
-                    (meta?.validIds && meta?.validIds?.includes(key))
-                );
-              const itemId = arrayKeys?.[index];
-              if (!itemId) return undefined;
-              const value = getGlobalStore
-                .getState()
-                .getShadowValue(itemId, meta?.validIds);
-              const state = rebuildStateShape({
-                currentState: value,
-                path: itemId.split('.').slice(1) as string[],
-                componentId: componentId!,
-                meta,
-              });
-              return state;
-            };
-          }
-          if (prop === 'last') {
-            return () => {
-              const currentArray = getGlobalStore
-                .getState()
-                .getShadowValue(stateKey, path) as any[];
-              if (currentArray.length === 0) return undefined;
-              const lastIndex = currentArray.length - 1;
-              const lastValue = currentArray[lastIndex];
-              const newPath = [...path, lastIndex.toString()];
-              return rebuildStateShape({
-                currentState: lastValue,
-                path: newPath,
-                componentId: componentId!,
-                meta,
-              });
-            };
-          }
-          if (prop === 'insert') {
-            return (
-              payload: InsertParams<InferArrayElement<T>>,
-              index?: number
-            ) => {
-              effectiveSetState(payload as any, path, { updateType: 'insert' });
-              return rebuildStateShape({
-                currentState: getGlobalStore
-                  .getState()
-                  .getShadowValue(stateKey, path),
-                path,
-                componentId: componentId!,
-                meta,
-              });
-            };
-          }
-          if (prop === 'uniqueInsert') {
-            return (
-              payload: UpdateArg<T>,
-              fields?: (keyof InferArrayElement<T>)[],
-              onMatch?: (existingItem: any) => any
-            ) => {
-              const currentArray = getGlobalStore
-                .getState()
-                .getShadowValue(stateKey, path) as any[];
-              const newValue = isFunction<T>(payload)
-                ? payload(currentArray as any)
-                : (payload as any);
-
-              let matchedItem: any = null;
-              const isUnique = !currentArray.some((item) => {
-                const isMatch = fields
-                  ? fields.every((field) =>
-                      isDeepEqual(item[field], newValue[field])
-                    )
-                  : isDeepEqual(item, newValue);
-                if (isMatch) matchedItem = item;
-                return isMatch;
-              });
-
-              if (isUnique) {
-                invalidateCachePath(path);
-                effectiveSetState(newValue, path, { updateType: 'insert' });
-              } else if (onMatch && matchedItem) {
-                const updatedItem = onMatch(matchedItem);
-                const updatedArray = currentArray.map((item) =>
-                  isDeepEqual(item, matchedItem) ? updatedItem : item
-                );
-                invalidateCachePath(path);
-                effectiveSetState(updatedArray as any, path, {
-                  updateType: 'update',
-                });
-              }
-            };
-          }
 
-          if (prop === 'cut') {
-            return (index?: number, options?: { waitForSync?: boolean }) => {
-              const validKeys =
-                meta?.validIds ??
-                getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                  ?.arrayKeys;
-
-              if (!validKeys || validKeys.length === 0) return;
+            return <StateListWrapper />;
+          };
+        }
+        if (prop === 'stateFlattenOn') {
+          return (fieldName: string) => {
+            const currentState = getGlobalStore
+              .getState()
+              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+            if (!Array.isArray(currentState)) return []; // Guard clause
+            const arrayToMap = currentState as any[];
 
-              const indexToCut =
-                index == -1
-                  ? validKeys.length - 1
-                  : index !== undefined
-                    ? index
-                    : validKeys.length - 1;
+            stateVersion++;
+            const flattenedResults = arrayToMap.flatMap(
+              (val: any) => val[fieldName] ?? []
+            );
+            return rebuildStateShape({
+              path: [...path, '[*]', fieldName],
+              componentId: componentId!,
+              meta,
+            });
+          };
+        }
+        if (prop === 'index') {
+          return (index: number) => {
+            const arrayKeys = getGlobalStore
+              .getState()
+              .getShadowMetadata(stateKey, path)
+              ?.arrayKeys?.filter(
+                (key) =>
+                  !meta?.validIds ||
+                  (meta?.validIds && meta?.validIds?.includes(key))
+              );
+            const itemId = arrayKeys?.[index];
+            if (!itemId) return undefined;
+            const value = getGlobalStore
+              .getState()
+              .getShadowValue(itemId, meta?.validIds);
+            const state = rebuildStateShape({
+              path: itemId.split('.').slice(1) as string[],
+              componentId: componentId!,
+              meta,
+            });
+            return state;
+          };
+        }
+        if (prop === 'last') {
+          return () => {
+            const currentArray = getGlobalStore
+              .getState()
+              .getShadowValue(stateKey, path) as any[];
+            if (currentArray.length === 0) return undefined;
+            const lastIndex = currentArray.length - 1;
+            const lastValue = currentArray[lastIndex];
+            const newPath = [...path, lastIndex.toString()];
+            return rebuildStateShape({
+              path: newPath,
+              componentId: componentId!,
+              meta,
+            });
+          };
+        }
+        if (prop === 'insert') {
+          return (
+            payload: InsertParams<InferArrayElement<T>>,
+            index?: number
+          ) => {
+            effectiveSetState(payload as any, path, { updateType: 'insert' });
+            return rebuildStateShape({
+              path,
+              componentId: componentId!,
+              meta,
+            });
+          };
+        }
+        if (prop === 'uniqueInsert') {
+          return (
+            payload: UpdateArg<T>,
+            fields?: (keyof InferArrayElement<T>)[],
+            onMatch?: (existingItem: any) => any
+          ) => {
+            const currentArray = getGlobalStore
+              .getState()
+              .getShadowValue(stateKey, path) as any[];
+            const newValue = isFunction<T>(payload)
+              ? payload(currentArray as any)
+              : (payload as any);
+
+            let matchedItem: any = null;
+            const isUnique = !currentArray.some((item) => {
+              const isMatch = fields
+                ? fields.every((field) =>
+                    isDeepEqual(item[field], newValue[field])
+                  )
+                : isDeepEqual(item, newValue);
+              if (isMatch) matchedItem = item;
+              return isMatch;
+            });
 
-              const fullIdToCut = validKeys[indexToCut];
-              if (!fullIdToCut) return; // Index out of bounds
+            if (isUnique) {
+              effectiveSetState(newValue, path, { updateType: 'insert' });
+            } else if (onMatch && matchedItem) {
+              const updatedItem = onMatch(matchedItem);
+              const updatedArray = currentArray.map((item) =>
+                isDeepEqual(item, matchedItem) ? updatedItem : item
+              );
 
-              const pathForCut = fullIdToCut.split('.').slice(1);
-              effectiveSetState(currentState, pathForCut, {
-                updateType: 'cut',
+              effectiveSetState(updatedArray as any, path, {
+                updateType: 'update',
               });
-            };
-          }
-          if (prop === 'cutSelected') {
-            return () => {
-              const validKeys = applyTransforms(
-                stateKey,
-                path,
-                meta?.transforms
-              );
+            }
+          };
+        }
 
-              if (!validKeys || validKeys.length === 0) return;
+        if (prop === 'cut') {
+          return (index?: number, options?: { waitForSync?: boolean }) => {
+            const currentState = getGlobalStore
+              .getState()
+              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+            const validKeys =
+              meta?.validIds ??
+              getGlobalStore.getState().getShadowMetadata(stateKey, path)
+                ?.arrayKeys;
+
+            if (!validKeys || validKeys.length === 0) return;
+
+            const indexToCut =
+              index == -1
+                ? validKeys.length - 1
+                : index !== undefined
+                  ? index
+                  : validKeys.length - 1;
+
+            const fullIdToCut = validKeys[indexToCut];
+            if (!fullIdToCut) return; // Index out of bounds
+
+            const pathForCut = fullIdToCut.split('.').slice(1);
+            effectiveSetState(currentState, pathForCut, {
+              updateType: 'cut',
+            });
+          };
+        }
+        if (prop === 'cutSelected') {
+          return () => {
+            const validKeys = applyTransforms(stateKey, path, meta?.transforms);
+            const currentState = getGlobalStore
+              .getState()
+              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+            if (!validKeys || validKeys.length === 0) return;
 
-              const indexKeyToCut = getGlobalStore
-                .getState()
-                .selectedIndicesMap.get(stateKeyPathKey);
+            const indexKeyToCut = getGlobalStore
+              .getState()
+              .selectedIndicesMap.get(stateKeyPathKey);
 
-              let indexToCut = validKeys.findIndex(
-                (key) => key === indexKeyToCut
-              );
+            let indexToCut = validKeys.findIndex(
+              (key) => key === indexKeyToCut
+            );
 
-              const pathForCut = validKeys[
-                indexToCut == -1 ? validKeys.length - 1 : indexToCut
-              ]
-                ?.split('.')
-                .slice(1);
-              getGlobalStore
-                .getState()
-                .clearSelectedIndex({ arrayKey: stateKeyPathKey });
-              const parentPath = pathForCut?.slice(0, -1)!;
-              notifySelectionComponents(stateKey, parentPath);
-              effectiveSetState(currentState, pathForCut!, {
-                updateType: 'cut',
-              });
-            };
-          }
-          if (prop === 'cutByValue') {
-            return (value: string | number | boolean) => {
-              // Step 1: Get the list of all unique keys for the current view.
-              const arrayMeta = getGlobalStore
-                .getState()
-                .getShadowMetadata(stateKey, path);
-              const relevantKeys = meta?.validIds ?? arrayMeta?.arrayKeys;
+            const pathForCut = validKeys[
+              indexToCut == -1 ? validKeys.length - 1 : indexToCut
+            ]
+              ?.split('.')
+              .slice(1);
+            getGlobalStore
+              .getState()
+              .clearSelectedIndex({ arrayKey: stateKeyPathKey });
+            const parentPath = pathForCut?.slice(0, -1)!;
+            notifySelectionComponents(stateKey, parentPath);
+            effectiveSetState(currentState, pathForCut!, {
+              updateType: 'cut',
+            });
+          };
+        }
+        if (prop === 'cutByValue') {
+          return (value: string | number | boolean) => {
+            // Step 1: Get the list of all unique keys for the current view.
+            const arrayMeta = getGlobalStore
+              .getState()
+              .getShadowMetadata(stateKey, path);
+            const relevantKeys = meta?.validIds ?? arrayMeta?.arrayKeys;
 
-              if (!relevantKeys) return;
+            if (!relevantKeys) return;
 
-              let keyToCut: string | null = null;
+            let keyToCut: string | null = null;
 
-              // Step 2: Iterate through the KEYS, get the value for each, and find the match.
-              for (const key of relevantKeys) {
-                const itemValue = getGlobalStore.getState().getShadowValue(key);
-                if (itemValue === value) {
-                  keyToCut = key;
-                  break; // We found the key, no need to search further.
-                }
+            // Step 2: Iterate through the KEYS, get the value for each, and find the match.
+            for (const key of relevantKeys) {
+              const itemValue = getGlobalStore.getState().getShadowValue(key);
+              if (itemValue === value) {
+                keyToCut = key;
+                break; // We found the key, no need to search further.
               }
+            }
 
-              // Step 3: If we found a matching key, use it to perform the cut.
-              if (keyToCut) {
-                const itemPath = keyToCut.split('.').slice(1);
-                effectiveSetState(null as any, itemPath, { updateType: 'cut' });
-              }
-            };
-          }
+            // Step 3: If we found a matching key, use it to perform the cut.
+            if (keyToCut) {
+              const itemPath = keyToCut.split('.').slice(1);
+              effectiveSetState(null as any, itemPath, { updateType: 'cut' });
+            }
+          };
+        }
 
-          if (prop === 'toggleByValue') {
-            return (value: string | number | boolean) => {
-              // Step 1: Get the list of all unique keys for the current view.
-              const arrayMeta = getGlobalStore
-                .getState()
-                .getShadowMetadata(stateKey, path);
-              const relevantKeys = meta?.validIds ?? arrayMeta?.arrayKeys;
+        if (prop === 'toggleByValue') {
+          return (value: string | number | boolean) => {
+            // Step 1: Get the list of all unique keys for the current view.
+            const arrayMeta = getGlobalStore
+              .getState()
+              .getShadowMetadata(stateKey, path);
+            const relevantKeys = meta?.validIds ?? arrayMeta?.arrayKeys;
 
-              if (!relevantKeys) return;
+            if (!relevantKeys) return;
 
-              let keyToCut: string | null = null;
+            let keyToCut: string | null = null;
 
-              // Step 2: Iterate through the KEYS to find the one matching the value. This is the robust way.
-              for (const key of relevantKeys) {
-                const itemValue = getGlobalStore.getState().getShadowValue(key);
-                console.log('itemValue sdasdasdasd', itemValue);
-                if (itemValue === value) {
-                  keyToCut = key;
-                  break; // Found it!
-                }
+            // Step 2: Iterate through the KEYS to find the one matching the value. This is the robust way.
+            for (const key of relevantKeys) {
+              const itemValue = getGlobalStore.getState().getShadowValue(key);
+              console.log('itemValue sdasdasdasd', itemValue);
+              if (itemValue === value) {
+                keyToCut = key;
+                break; // Found it!
               }
+            }
+            console.log('itemValue keyToCut', keyToCut);
+            // Step 3: Act based on whether the key was found.
+            if (keyToCut) {
+              // Item exists, so we CUT it using its *actual* key.
+              const itemPath = keyToCut.split('.').slice(1);
               console.log('itemValue keyToCut', keyToCut);
-              // Step 3: Act based on whether the key was found.
-              if (keyToCut) {
-                // Item exists, so we CUT it using its *actual* key.
-                const itemPath = keyToCut.split('.').slice(1);
-                console.log('itemValue keyToCut', keyToCut);
-                effectiveSetState(value as any, itemPath, {
-                  updateType: 'cut',
-                });
-              } else {
-                // Item does not exist, so we INSERT it.
-                effectiveSetState(value as any, path, { updateType: 'insert' });
-              }
-            };
-          }
-          if (prop === 'findWith') {
-            return (
-              searchKey: keyof InferArrayElement<T>,
-              searchValue: any
-            ) => {
-              const arrayKeys = getGlobalStore
-                .getState()
-                .getShadowMetadata(stateKey, path)?.arrayKeys;
+              effectiveSetState(value as any, itemPath, {
+                updateType: 'cut',
+              });
+            } else {
+              // Item does not exist, so we INSERT it.
+              effectiveSetState(value as any, path, { updateType: 'insert' });
+            }
+          };
+        }
+        if (prop === 'findWith') {
+          return (searchKey: keyof InferArrayElement<T>, searchValue: any) => {
+            const arrayKeys = getGlobalStore
+              .getState()
+              .getShadowMetadata(stateKey, path)?.arrayKeys;
 
-              if (!arrayKeys) {
-                throw new Error('No array keys found for sorting');
-              }
+            if (!arrayKeys) {
+              throw new Error('No array keys found for sorting');
+            }
 
-              let value = null;
-              let foundPath: string[] = [];
+            let value = null;
+            let foundPath: string[] = [];
 
-              for (const fullPath of arrayKeys) {
-                let shadowValue = getGlobalStore
-                  .getState()
-                  .getShadowValue(fullPath, meta?.validIds);
-                if (shadowValue && shadowValue[searchKey] === searchValue) {
-                  value = shadowValue;
-                  foundPath = fullPath.split('.').slice(1);
-                  break;
-                }
+            for (const fullPath of arrayKeys) {
+              let shadowValue = getGlobalStore
+                .getState()
+                .getShadowValue(fullPath, meta?.validIds);
+              if (shadowValue && shadowValue[searchKey] === searchValue) {
+                value = shadowValue;
+                foundPath = fullPath.split('.').slice(1);
+                break;
               }
+            }
 
-              return rebuildStateShape({
-                currentState: value as any,
-                path: foundPath,
-                componentId: componentId!,
-                meta,
-              });
-            };
-          }
+            return rebuildStateShape({
+              path: foundPath,
+              componentId: componentId!,
+              meta,
+            });
+          };
         }
 
-        if (prop === 'cut') {
+        if (prop === 'cutThis') {
           let shadowValue = getGlobalStore
             .getState()
             .getShadowValue(path.join('.'));
@@ -3661,29 +3608,86 @@ function createProxyHandler<T>(
         if (prop === '_stateKey') return stateKey;
         if (prop === '_path') return path;
         if (prop === 'update') {
+          if (recursionTimerName) {
+            console.timeEnd(recursionTimerName);
+            recursionTimerName = null;
+          }
+
           return (payload: UpdateArg<T>) => {
-            // Step 1: This is the same. It performs the data update.
-            effectiveSetState(payload as any, path, { updateType: 'update' });
+            // Check if we're in a React event handler
+            const error = new Error();
+            const stack = error.stack || '';
+            const inReactEvent =
+              stack.includes('onClick') ||
+              stack.includes('dispatchEvent') ||
+              stack.includes('batchedUpdates');
+
+            // Only batch if we're in a React event
+            if (inReactEvent) {
+              const batchKey = `${stateKey}.${path.join('.')}`;
+
+              // Schedule flush if not already scheduled
+              if (!batchFlushScheduled) {
+                updateBatchQueue.clear();
+                batchFlushScheduled = true;
+
+                queueMicrotask(() => {
+                  // Process all batched updates
+                  for (const [key, updates] of updateBatchQueue) {
+                    const parts = key.split('.');
+                    const batchStateKey = parts[0];
+                    const batchPath = parts.slice(1);
+
+                    // Compose all updates for this path
+                    const composedUpdate = updates.reduce(
+                      (composed, update) => {
+                        if (
+                          typeof update === 'function' &&
+                          typeof composed === 'function'
+                        ) {
+                          // Compose functions
+                          return (state: any) => update(composed(state));
+                        }
+                        // If not functions, last one wins
+                        return update;
+                      }
+                    );
+
+                    // Call effectiveSetState ONCE with composed update
+                    effectiveSetState(composedUpdate as any, batchPath, {
+                      updateType: 'update',
+                    });
+                  }
+
+                  updateBatchQueue.clear();
+                  batchFlushScheduled = false;
+                });
+              }
+
+              // Add to batch
+              const existing = updateBatchQueue.get(batchKey) || [];
+              existing.push(payload);
+              updateBatchQueue.set(batchKey, existing);
+            } else {
+              // NOT in React event - execute immediately
+              console.time('update inner');
+              effectiveSetState(payload as any, path, { updateType: 'update' });
+              console.timeEnd('update inner');
+            }
 
             return {
-              /**
-               * Marks this specific item, which was just updated, as 'synced' (not dirty).
-               */
               synced: () => {
-                // This function "remembers" the path of the item that was just updated.
                 const shadowMeta = getGlobalStore
                   .getState()
                   .getShadowMetadata(stateKey, path);
 
-                // It updates ONLY the metadata for that specific item.
                 getGlobalStore.getState().setShadowMetadata(stateKey, path, {
                   ...shadowMeta,
-                  isDirty: false, // EXPLICITLY set to false, not just undefined
-                  stateSource: 'server', // Mark as coming from server
-                  lastServerSync: Date.now(), // Add timestamp
+                  isDirty: false,
+                  stateSource: 'server',
+                  lastServerSync: Date.now(),
                 });
 
-                // Force a re-render for components watching this path
                 const fullPath = [stateKey, ...path].join('.');
                 getGlobalStore.getState().notifyPathSubscribers(fullPath, {
                   type: 'SYNC_STATUS_CHANGE',
@@ -3697,10 +3701,9 @@ function createProxyHandler<T>(
         if (prop === 'toggle') {
           const currentValueAtPath = getGlobalStore
             .getState()
-            .getShadowValue([stateKey, ...path].join('.'));
+            .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
 
-          console.log('currentValueAtPath', currentValueAtPath);
-          if (typeof currentState != 'boolean') {
+          if (typeof currentValueAtPath != 'boolean') {
             throw new Error('toggle() can only be used on boolean values');
           }
           return () => {
@@ -3728,7 +3731,6 @@ function createProxyHandler<T>(
           .getState()
           .getShadowValue(stateKey, nextPath);
         return rebuildStateShape({
-          currentState: nextValue,
           path: nextPath,
           componentId: componentId!,
           meta,
@@ -3737,12 +3739,11 @@ function createProxyHandler<T>(
     };
 
     const proxyInstance = new Proxy(baseFunction, handler);
-    shapeCache.set(cacheKey, {
-      proxy: proxyInstance,
-      stateVersion: stateVersion,
-    });
+    proxyCache.set(cacheKey, proxyInstance);
+    console.timeEnd('rebuildStateShape Inner');
     return proxyInstance;
   }
+  console.timeEnd('rebuildStateShape Outer');
 
   const baseObj = {
     revertToInitialState: (obj?: { validationKey?: string }) => {
@@ -3766,11 +3767,10 @@ function createProxyHandler<T>(
         getGlobalStore.getState().initialStateGlobal[stateKey];
 
       getGlobalStore.getState().clearSelectedIndexesForState(stateKey);
-      shapeCache.clear();
+
       stateVersion++;
       getGlobalStore.getState().initializeShadowState(stateKey, initialState);
-      const newProxy = rebuildStateShape({
-        currentState: initialState,
+      rebuildStateShape({
         path: [],
         componentId: componentId!,
       });
@@ -3797,7 +3797,6 @@ function createProxyHandler<T>(
       return initialState;
     },
     updateInitialState: (newState: T) => {
-      shapeCache.clear();
       stateVersion++;
 
       const newUpdaterState = createProxyHandler(
@@ -3839,7 +3838,6 @@ function createProxyHandler<T>(
     },
   };
   const returnShape = rebuildStateShape({
-    currentState: getGlobalStore.getState().getShadowValue(stateKey, []),
     componentId,
     path: [],
   });