cogsbox-state 0.5.464 → 0.5.466

package/src/CogsState.tsx

@@ -14,15 +14,18 @@ import {
   type ReactNode,
   type RefObject,
 } from 'react';
-import { createRoot } from 'react-dom/client';
+
 import {
-  debounce,
   getDifferences,
   isArray,
   isFunction,
   type GenericObject,
 } from './utility.js';
-import { ValidationWrapper } from './Functions.js';
+import {
+  FormElementWrapper,
+  MemoizedCogsItemWrapper,
+  ValidationWrapper,
+} from './Components.js';
 import { isDeepEqual, transformStateFunc } from './utility.js';
 import superjson from 'superjson';
 import { v4 as uuidv4 } from 'uuid';
@@ -30,15 +33,15 @@ import { v4 as uuidv4 } from 'uuid';
 import {
   formRefStore,
   getGlobalStore,
+  ValidationError,
   ValidationStatus,
   type ComponentsType,
 } from './store.js';
 import { useCogsConfig } from './CogsStateClient.js';
 import { Operation } from 'fast-json-patch';
-import { useInView } from 'react-intersection-observer';
+
 import * as z3 from 'zod/v3';
 import * as z4 from 'zod/v4';
-import z from 'zod';
 
 type Prettify<T> = T extends any ? { [K in keyof T]: T[K] } : never;
 
@@ -245,10 +248,7 @@ export type UpdateType<T> = (payload: UpdateArg<T>) => { synced: () => void };
 
 export type InsertType<T> = (payload: InsertParams<T>, index?: number) => void;
 export type InsertTypeObj<T> = (payload: InsertParams<T>) => void;
-export type ValidationError = {
-  path: (string | number)[];
-  message: string;
-};
+
 type EffectFunction<T, R> = (state: T, deps: any[]) => R;
 export type EndType<T, IsArrayElement = false> = {
   addZodValidation: (errors: ValidationError[]) => void;
@@ -259,7 +259,7 @@ export type EndType<T, IsArrayElement = false> = {
   _stateKey: string;
   formElement: (control: FormControl<T>, opts?: FormOptsType) => JSX.Element;
   get: () => T;
-  getState: () => T;
+
   $get: () => T;
   $derive: <R>(fn: EffectFunction<T, R>) => R;
 
@@ -306,7 +306,7 @@ export type StateObject<T> = (T extends any[]
     _isLoading: boolean;
     _serverState: T;
     revertToInitialState: (obj?: { validationKey?: string }) => T;
-    getDifferences: () => string[];
+
     middleware: (
       middles: ({
         updateLog,
@@ -337,7 +337,8 @@ type UpdateOptions = {
 type EffectiveSetState<TStateObject> = (
   newStateOrFunction:
     | EffectiveSetStateArg<TStateObject, 'update'>
-    | EffectiveSetStateArg<TStateObject, 'insert'>,
+    | EffectiveSetStateArg<TStateObject, 'insert'>
+    | null,
   path: string[],
   updateObj: UpdateOptions,
   validationKey?: string
@@ -449,10 +450,13 @@ type FormsElementsType<T> = {
     children: React.ReactNode;
     status: ValidationStatus; // Instead of 'active' boolean
 
+    hasErrors: boolean;
+    hasWarnings: boolean;
+    allErrors: ValidationError[];
+
     path: string[];
     message?: string;
-    data?: T;
-    key?: string;
+    getData?: () => T;
   }) => React.ReactNode;
   syncRender?: (options: SyncRenderOptions<T>) => React.ReactNode;
 };
@@ -476,11 +480,74 @@ export type TransformedStateType<T> = {
   [P in keyof T]: T[P] extends CogsInitialState<infer U> ? U : T[P];
 };
 
-function setAndMergeOptions(stateKey: string, newOptions: OptionsType<any>) {
-  const getInitialOptions = getGlobalStore.getState().getInitialOptions;
-  const setInitialStateOptions =
-    getGlobalStore.getState().setInitialStateOptions;
+const {
+  getInitialOptions,
+  updateInitialStateGlobal,
+  // ALIAS THE NEW FUNCTIONS TO THE OLD NAMES
+  getShadowMetadata,
+  setShadowMetadata,
+  getShadowValue,
+  initializeShadowState,
+  updateShadowAtPath,
+  insertShadowArrayElement,
+  insertManyShadowArrayElements,
+  removeShadowArrayElement,
+  getSelectedIndex,
+  setInitialStateOptions,
+  setServerStateUpdate,
+  markAsDirty,
+  registerComponent,
+  unregisterComponent,
+  addPathComponent,
+  clearSelectedIndexesForState,
+  addStateLog,
+  setSyncInfo,
+  clearSelectedIndex,
+  getSyncInfo,
+  notifyPathSubscribers,
+  subscribeToPath,
+  // Note: The old functions are no longer imported under their original names
+} = getGlobalStore.getState();
+function getArrayData(stateKey: string, path: string[], meta?: MetaData) {
+  const shadowMeta = getShadowMetadata(stateKey, path);
+  const isArray = !!shadowMeta?.arrayKeys;
+
+  if (!isArray) {
+    const value = getGlobalStore.getState().getShadowValue(stateKey, path);
+    return { isArray: false, value, keys: [] };
+  }
+  const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
+  const viewIds = meta?.arrayViews?.[arrayPathKey] ?? shadowMeta.arrayKeys;
+
+  // FIX: If the derived view is empty, return an empty array and keys.
+  if (Array.isArray(viewIds) && viewIds.length === 0) {
+    return { isArray: true, value: [], keys: [] };
+  }
+
+  const value = getGlobalStore
+    .getState()
+    .getShadowValue(stateKey, path, viewIds);
+
+  return { isArray: true, value, keys: viewIds ?? [] };
+}
 
+function findArrayItem(
+  array: any[],
+  keys: string[],
+  predicate: (item: any, index: number) => boolean
+): { key: string; index: number; value: any } | null {
+  for (let i = 0; i < array.length; i++) {
+    if (predicate(array[i], i)) {
+      const key = keys[i];
+      if (key) {
+        return { key, index: i, value: array[i] };
+      }
+    }
+  }
+  return null;
+}
+
+function setAndMergeOptions(stateKey: string, newOptions: OptionsType<any>) {
   const initialOptions = getInitialOptions(stateKey as string) || {};
 
   setInitialStateOptions(stateKey as string, {
@@ -499,8 +566,7 @@ function setOptions<StateKey, Opt>({
 }) {
   const initialOptions = getInitialOptions(stateKey as string) || {};
   const initialOptionsPartState = initialOptionsPart[stateKey as string] || {};
-  const setInitialStateOptions =
-    getGlobalStore.getState().setInitialStateOptions;
+
   const mergedOptions = { ...initialOptionsPartState, ...initialOptions };
 
   let needToAdd = false;
@@ -621,10 +687,10 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
       const existingGlobalOptions = getInitialOptions(key);
 
       if (!existingGlobalOptions) {
-        getGlobalStore.getState().setInitialStateOptions(key, mergedOptions);
+        setInitialStateOptions(key, mergedOptions);
       } else {
         // Merge with existing global options
-        getGlobalStore.getState().setInitialStateOptions(key, {
+        setInitialStateOptions(key, {
           ...existingGlobalOptions,
           ...mergedOptions,
         });
@@ -633,9 +699,9 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
   });
 
   Object.keys(statePart).forEach((key) => {
-    getGlobalStore.getState().initializeShadowState(key, statePart[key]);
+    initializeShadowState(key, statePart[key]);
   });
-
+  console.log('new stateObject ', getGlobalStore.getState().shadowStateStore);
   type StateKeys = keyof typeof statePart;
 
   const useCogsState = <StateKey extends StateKeys>(
@@ -650,8 +716,7 @@ export const createCogsState = <State extends Record<StateKeys, unknown>>(
       initialOptionsPart,
     });
     const thiState =
-      getGlobalStore.getState().getShadowValue(stateKey as string) ||
-      statePart[stateKey as string];
+      getShadowValue(stateKey as string, []) || statePart[stateKey as string];
     const partialState = options?.modifyState
       ? options.modifyState(thiState)
       : thiState;
@@ -774,12 +839,7 @@ export function createCogsStateFromSync<
     __syncSchemas: schemas,
   }) as any;
 }
-const {
-  getInitialOptions,
 
-  addStateLog,
-  updateInitialStateGlobal,
-} = getGlobalStore.getState();
 const saveToLocalStorage = <T,>(
   state: T,
   thisKey: string,
@@ -811,7 +871,7 @@ const saveToLocalStorage = <T,>(
     } catch {
       // Ignore errors, will use undefined
     }
-    const shadowMeta = getGlobalStore.getState().getShadowMetadata(thisKey, []);
+    const shadowMeta = getShadowMetadata(thisKey, []);
 
     const data: LocalStorageData<T> = {
       state,
@@ -847,7 +907,7 @@ const loadFromLocalStorage = (localStorageKey: string) => {
   }
 };
 const loadAndApplyLocalStorage = (stateKey: string, options: any) => {
-  const currentState = getGlobalStore.getState().getShadowValue(stateKey);
+  const currentState = getShadowValue(stateKey, []);
   const { sessionId } = useCogsConfig();
   const localkey = isFunction(options?.localStorage?.key)
     ? options.localStorage.key(currentState)
@@ -878,7 +938,7 @@ type LocalStorageData<T> = {
 };
 
 const notifyComponents = (thisKey: string) => {
-  const stateEntry = getGlobalStore.getState().getShadowMetadata(thisKey, []);
+  const stateEntry = getShadowMetadata(thisKey, []);
   if (!stateEntry) return;
 
   // Batch component updates
@@ -900,40 +960,15 @@ const notifyComponents = (thisKey: string) => {
   });
 };
 
-export const notifyComponent = (stateKey: string, componentId: string) => {
-  const stateEntry = getGlobalStore.getState().getShadowMetadata(stateKey, []);
-  if (stateEntry) {
-    const fullComponentId = `${stateKey}////${componentId}`;
-    const component = stateEntry?.components?.get(fullComponentId);
-    const reactiveTypes = component
-      ? Array.isArray(component.reactiveType)
-        ? component.reactiveType
-        : [component.reactiveType || 'component']
-      : null;
-
-    // Skip if reactivity is disabled
-    if (reactiveTypes?.includes('none')) {
-      return;
-    }
-
-    if (component) {
-      // Force an update to ensure the current value is saved
-
-      component.forceUpdate();
-    }
-  }
-};
 function markEntireStateAsServerSynced(
   stateKey: string,
   path: string[],
   data: any,
   timestamp: number
 ) {
-  const store = getGlobalStore.getState();
-
   // Mark current path as synced
-  const currentMeta = store.getShadowMetadata(stateKey, path);
-  store.setShadowMetadata(stateKey, path, {
+  const currentMeta = getShadowMetadata(stateKey, path);
+  setShadowMetadata(stateKey, path, {
     ...currentMeta,
     isDirty: false,
     stateSource: 'server',
@@ -942,10 +977,11 @@ function markEntireStateAsServerSynced(
 
   // If it's an array, mark each item as synced
   if (Array.isArray(data)) {
-    const arrayMeta = store.getShadowMetadata(stateKey, path);
+    const arrayMeta = getShadowMetadata(stateKey, path);
     if (arrayMeta?.arrayKeys) {
       arrayMeta.arrayKeys.forEach((itemKey, index) => {
-        const itemPath = itemKey.split('.').slice(1);
+        // Fix: Don't split the itemKey, just use it directly
+        const itemPath = [...path, itemKey];
         const itemData = data[index];
         if (itemData !== undefined) {
           markEntireStateAsServerSynced(
@@ -967,8 +1003,346 @@ function markEntireStateAsServerSynced(
     });
   }
 }
-let updateBatchQueue = new Map<string, Array<UpdateArg<any>>>();
-let batchFlushScheduled = false;
+// 5. Batch queue
+let updateBatchQueue: any[] = [];
+let isFlushScheduled = false;
+
+function scheduleFlush() {
+  if (!isFlushScheduled) {
+    isFlushScheduled = true;
+    queueMicrotask(flushQueue);
+  }
+}
+function handleUpdate(
+  stateKey: string,
+  path: string[],
+  payload: any
+): { type: 'update'; oldValue: any; newValue: any; shadowMeta: any } {
+  // ✅ FIX: Get the old value before the update.
+  const oldValue = getGlobalStore.getState().getShadowValue(stateKey, path);
+
+  const newValue = isFunction(payload) ? payload(oldValue) : payload;
+
+  // ✅ FIX: The new `updateShadowAtPath` handles metadata preservation automatically.
+  // The manual loop has been removed.
+  updateShadowAtPath(stateKey, path, newValue);
+
+  markAsDirty(stateKey, path, { bubble: true });
+
+  // Return the metadata of the node *after* the update.
+  const newShadowMeta = getShadowMetadata(stateKey, path);
+
+  return {
+    type: 'update',
+    oldValue: oldValue,
+    newValue,
+    shadowMeta: newShadowMeta,
+  };
+}
+// 2. Update signals
+function updateSignals(shadowMeta: any, displayValue: any) {
+  if (!shadowMeta?.signals?.length) return;
+
+  shadowMeta.signals.forEach(({ parentId, position, effect }: any) => {
+    const parent = document.querySelector(`[data-parent-id="${parentId}"]`);
+    if (!parent) return;
+
+    const childNodes = Array.from(parent.childNodes);
+    if (!childNodes[position]) return;
+
+    let finalDisplayValue = displayValue;
+    if (effect && displayValue !== null) {
+      try {
+        finalDisplayValue = new Function('state', `return (${effect})(state)`)(
+          displayValue
+        );
+      } catch (err) {
+        console.error('Error evaluating effect function:', err);
+      }
+    }
+
+    if (finalDisplayValue !== null && typeof finalDisplayValue === 'object') {
+      finalDisplayValue = JSON.stringify(finalDisplayValue);
+    }
+
+    childNodes[position].textContent = String(finalDisplayValue ?? '');
+  });
+}
+
+function getComponentNotifications(
+  stateKey: string,
+  path: string[],
+  result: any
+): Set<any> {
+  const rootMeta = getShadowMetadata(stateKey, []);
+
+  if (!rootMeta?.components) {
+    return new Set();
+  }
+
+  const componentsToNotify = new Set<any>();
+
+  // --- PASS 1: Notify specific subscribers based on update type ---
+
+  if (result.type === 'update') {
+    // --- Bubble-up Notification ---
+    // An update to `user.address.street` notifies listeners of `street`, `address`, and `user`.
+    let currentPath = [...path];
+    while (true) {
+      const pathMeta = getShadowMetadata(stateKey, currentPath);
+
+      if (pathMeta?.pathComponents) {
+        pathMeta.pathComponents.forEach((componentId: string) => {
+          const component = rootMeta.components?.get(componentId);
+          // NEW: Add component to the set instead of calling forceUpdate()
+          if (component) {
+            const reactiveTypes = Array.isArray(component.reactiveType)
+              ? component.reactiveType
+              : [component.reactiveType || 'component'];
+            if (!reactiveTypes.includes('none')) {
+              componentsToNotify.add(component);
+            }
+          }
+        });
+      }
+
+      if (currentPath.length === 0) break;
+      currentPath.pop(); // Go up one level
+    }
+
+    // --- Deep Object Change Notification ---
+    // If the new value is an object, notify components subscribed to sub-paths that changed.
+    if (
+      result.newValue &&
+      typeof result.newValue === 'object' &&
+      !isArray(result.newValue)
+    ) {
+      const changedSubPaths = getDifferences(result.newValue, result.oldValue);
+
+      changedSubPaths.forEach((subPathString: string) => {
+        const subPath = subPathString.split('.');
+        const fullSubPath = [...path, ...subPath];
+        const subPathMeta = getShadowMetadata(stateKey, fullSubPath);
+
+        if (subPathMeta?.pathComponents) {
+          subPathMeta.pathComponents.forEach((componentId: string) => {
+            const component = rootMeta.components?.get(componentId);
+            // NEW: Add component to the set
+            if (component) {
+              const reactiveTypes = Array.isArray(component.reactiveType)
+                ? component.reactiveType
+                : [component.reactiveType || 'component'];
+              if (!reactiveTypes.includes('none')) {
+                componentsToNotify.add(component);
+              }
+            }
+          });
+        }
+      });
+    }
+  } else if (result.type === 'insert' || result.type === 'cut') {
+    // For array structural changes (add/remove), notify components listening to the parent array.
+    const parentArrayPath = result.type === 'insert' ? path : path.slice(0, -1);
+    const parentMeta = getShadowMetadata(stateKey, parentArrayPath);
+
+    if (parentMeta?.pathComponents) {
+      parentMeta.pathComponents.forEach((componentId: string) => {
+        const component = rootMeta.components?.get(componentId);
+        // NEW: Add component to the set
+        if (component) {
+          componentsToNotify.add(component);
+        }
+      });
+    }
+  }
+
+  // --- PASS 2: Handle 'all' and 'deps' reactivity types ---
+  // Iterate over all components for this stateKey that haven't been notified yet.
+  rootMeta.components.forEach((component, componentId) => {
+    // If we've already added this component, skip it.
+    if (componentsToNotify.has(component)) {
+      return;
+    }
+
+    const reactiveTypes = Array.isArray(component.reactiveType)
+      ? component.reactiveType
+      : [component.reactiveType || 'component'];
+
+    if (reactiveTypes.includes('all')) {
+      componentsToNotify.add(component);
+    } else if (reactiveTypes.includes('deps') && component.depsFunction) {
+      const currentState = getShadowValue(stateKey, []);
+      const newDeps = component.depsFunction(currentState);
+
+      if (
+        newDeps === true ||
+        (Array.isArray(newDeps) && !isDeepEqual(component.prevDeps, newDeps))
+      ) {
+        component.prevDeps = newDeps as any; // Update the dependencies for the next check
+        componentsToNotify.add(component);
+      }
+    }
+  });
+
+  return componentsToNotify;
+}
+
+function handleInsert(
+  stateKey: string,
+  path: string[],
+  payload: any
+): { type: 'insert'; newValue: any; shadowMeta: any } {
+  let newValue;
+  if (isFunction(payload)) {
+    const { value: currentValue } = getScopedData(stateKey, path);
+    newValue = payload({ state: currentValue, uuid: uuidv4() });
+  } else {
+    newValue = payload;
+  }
+
+  insertShadowArrayElement(stateKey, path, newValue);
+  markAsDirty(stateKey, path, { bubble: true });
+
+  const updatedMeta = getShadowMetadata(stateKey, path);
+  if (updatedMeta?.arrayKeys) {
+    const newItemKey = updatedMeta.arrayKeys[updatedMeta.arrayKeys.length - 1];
+    if (newItemKey) {
+      const newItemPath = newItemKey.split('.').slice(1);
+      markAsDirty(stateKey, newItemPath, { bubble: false });
+    }
+  }
+
+  return { type: 'insert', newValue, shadowMeta: updatedMeta };
+}
+
+function handleCut(
+  stateKey: string,
+  path: string[]
+): { type: 'cut'; oldValue: any; parentPath: string[] } {
+  const parentArrayPath = path.slice(0, -1);
+  const oldValue = getShadowValue(stateKey, path);
+  removeShadowArrayElement(stateKey, path);
+  markAsDirty(stateKey, parentArrayPath, { bubble: true });
+  return { type: 'cut', oldValue: oldValue, parentPath: parentArrayPath };
+}
+
+function flushQueue() {
+  const allComponentsToNotify = new Set<any>();
+  const signalUpdates: { shadowMeta: any; displayValue: any }[] = [];
+
+  const logsToAdd: UpdateTypeDetail[] = [];
+
+  for (const item of updateBatchQueue) {
+    if (item.status && item.updateType) {
+      logsToAdd.push(item as UpdateTypeDetail);
+      continue;
+    }
+
+    const result = item;
+
+    const displayValue = result.type === 'cut' ? null : result.newValue;
+    if (result.shadowMeta?.signals?.length > 0) {
+      signalUpdates.push({ shadowMeta: result.shadowMeta, displayValue });
+    }
+
+    const componentNotifications = getComponentNotifications(
+      result.stateKey,
+      result.path,
+      result
+    );
+
+    componentNotifications.forEach((component) => {
+      allComponentsToNotify.add(component);
+    });
+  }
+
+  if (logsToAdd.length > 0) {
+    addStateLog(logsToAdd);
+  }
+
+  signalUpdates.forEach(({ shadowMeta, displayValue }) => {
+    updateSignals(shadowMeta, displayValue);
+  });
+
+  allComponentsToNotify.forEach((component) => {
+    component.forceUpdate();
+  });
+
+  // --- Step 3: CLEANUP ---
+  // Clear the queue for the next batch of updates.
+  updateBatchQueue = [];
+  isFlushScheduled = false;
+}
+
+function createEffectiveSetState<T>(
+  thisKey: string,
+  syncApiRef: React.MutableRefObject<any>,
+  sessionId: string | undefined,
+  latestInitialOptionsRef: React.MutableRefObject<OptionsType<T> | null>
+): EffectiveSetState<T> {
+  // The returned function is the core setter that gets called by all state operations.
+  // It is now much simpler, delegating all work to the executeUpdate function.
+  return (newStateOrFunction, path, updateObj, validationKey?) => {
+    executeUpdate(thisKey, path, newStateOrFunction, updateObj);
+  };
+
+  // This inner function handles the logic for a single state update.
+  function executeUpdate(
+    stateKey: string,
+    path: string[],
+    payload: any,
+    options: UpdateOptions
+  ) {
+    // --- Step 1: Execute the core state change (Synchronous & Fast) ---
+    // This part modifies the in-memory state representation immediately.
+    let result: any;
+    switch (options.updateType) {
+      case 'update':
+        result = handleUpdate(stateKey, path, payload);
+        break;
+      case 'insert':
+        result = handleInsert(stateKey, path, payload);
+        break;
+      case 'cut':
+        result = handleCut(stateKey, path);
+        break;
+    }
+
+    result.stateKey = stateKey;
+    result.path = path;
+    updateBatchQueue.push(result);
+    scheduleFlush();
+
+    const newUpdate: UpdateTypeDetail = {
+      timeStamp: Date.now(),
+      stateKey,
+      path,
+      updateType: options.updateType,
+      status: 'new',
+      oldValue: result.oldValue,
+      newValue: result.newValue ?? null,
+    };
+
+    updateBatchQueue.push(newUpdate);
+
+    if (result.newValue !== undefined) {
+      saveToLocalStorage(
+        result.newValue,
+        stateKey,
+        latestInitialOptionsRef.current,
+        sessionId
+      );
+    }
+
+    if (latestInitialOptionsRef.current?.middleware) {
+      latestInitialOptionsRef.current.middleware({ update: newUpdate });
+    }
+
+    if (options.sync !== false && syncApiRef.current?.connected) {
+      syncApiRef.current.updateState({ operation: newUpdate });
+    }
+  }
+}
 
 export function useCogsStateFn<TStateObject extends unknown>(
   stateObject: TStateObject,
@@ -1007,7 +1381,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
   useEffect(() => {
     if (syncUpdate && syncUpdate.stateKey === thisKey && syncUpdate.path?.[0]) {
       const syncKey = `${syncUpdate.stateKey}:${syncUpdate.path.join('.')}`;
-      getGlobalStore.getState().setSyncInfo(syncKey, {
+      setSyncInfo(syncKey, {
         timeStamp: syncUpdate.timeStamp!,
         userId: syncUpdate.userId!,
       });
@@ -1077,7 +1451,7 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
   // Effect 1: When this component's serverState prop changes, broadcast it
   useEffect(() => {
-    getGlobalStore.getState().setServerStateUpdate(thisKey, serverState);
+    setServerStateUpdate(thisKey, serverState);
   }, [serverState, thisKey]);
 
   // Effect 2: Listen for server state updates from ANY component
@@ -1087,115 +1461,71 @@ export function useCogsStateFn<TStateObject extends unknown>(
       .subscribeToPath(thisKey, (event) => {
         if (event?.type === 'SERVER_STATE_UPDATE') {
           const serverStateData = event.serverState;
-          console.log('SERVER_STATE_UPDATE', event);
+
           if (
-            serverStateData?.status === 'success' &&
-            serverStateData.data !== undefined
+            serverStateData?.status !== 'success' ||
+            serverStateData.data === undefined
           ) {
-            const newOptions = { serverState: serverStateData };
-            setAndMergeOptions(thisKey, newOptions);
+            return; // Ignore if no valid data
+          }
 
-            const mergeConfig =
-              typeof serverStateData.merge === 'object'
-                ? serverStateData.merge
-                : serverStateData.merge === true
-                  ? { strategy: 'append' }
-                  : null;
+          setAndMergeOptions(thisKey, { serverState: serverStateData });
 
-            const currentState = getGlobalStore
-              .getState()
-              .getShadowValue(thisKey);
-            const incomingData = serverStateData.data;
-            if (
-              mergeConfig &&
-              Array.isArray(currentState) &&
-              Array.isArray(incomingData)
-            ) {
-              const keyField = mergeConfig.key;
-              const existingIds = new Set(
-                currentState.map((item: any) => item[keyField])
-              );
+          const mergeConfig =
+            typeof serverStateData.merge === 'object'
+              ? serverStateData.merge
+              : serverStateData.merge === true
+                ? { strategy: 'append' }
+                : null;
 
-              const newUniqueItems = incomingData.filter((item: any) => {
-                return !existingIds.has(item[keyField]);
-              });
+          const currentState = getShadowValue(thisKey, []);
+          const incomingData = serverStateData.data;
 
-              if (newUniqueItems.length > 0) {
-                newUniqueItems.forEach((item) => {
-                  getGlobalStore
-                    .getState()
-                    .insertShadowArrayElement(thisKey, [], item);
+          if (
+            mergeConfig &&
+            mergeConfig.strategy === 'append' &&
+            'key' in mergeConfig && // Type guard for key
+            Array.isArray(currentState) &&
+            Array.isArray(incomingData)
+          ) {
+            const keyField = mergeConfig.key;
+            if (!keyField) {
+              console.error(
+                "CogsState: Merge strategy 'append' requires a 'key' field."
+              );
+              return;
+            }
 
-                  // MARK NEW SERVER ITEMS AS SYNCED
-                  const arrayMeta = getGlobalStore
-                    .getState()
-                    .getShadowMetadata(thisKey, []);
-
-                  if (arrayMeta?.arrayKeys) {
-                    const newItemKey =
-                      arrayMeta.arrayKeys[arrayMeta.arrayKeys.length - 1];
-                    if (newItemKey) {
-                      const newItemPath = newItemKey.split('.').slice(1);
-
-                      // Mark the new server item as synced, not dirty
-                      getGlobalStore
-                        .getState()
-                        .setShadowMetadata(thisKey, newItemPath, {
-                          isDirty: false,
-                          stateSource: 'server',
-                          lastServerSync:
-                            serverStateData.timestamp || Date.now(),
-                        });
+            const existingIds = new Set(
+              currentState.map((item: any) => item[keyField])
+            );
 
-                      // Also mark all its child fields as synced if it's an object
-                      const itemValue = getGlobalStore
-                        .getState()
-                        .getShadowValue(newItemKey);
-                      if (
-                        itemValue &&
-                        typeof itemValue === 'object' &&
-                        !Array.isArray(itemValue)
-                      ) {
-                        Object.keys(itemValue).forEach((fieldKey) => {
-                          const fieldPath = [...newItemPath, fieldKey];
-                          getGlobalStore
-                            .getState()
-                            .setShadowMetadata(thisKey, fieldPath, {
-                              isDirty: false,
-                              stateSource: 'server',
-                              lastServerSync:
-                                serverStateData.timestamp || Date.now(),
-                            });
-                        });
-                      }
-                    }
-                  }
-                });
-              }
-            } else {
-              // For replace strategy or initial load
-              getGlobalStore
-                .getState()
-                .initializeShadowState(thisKey, incomingData);
-
-              // Mark the entire state tree as synced from server
-              markEntireStateAsServerSynced(
-                thisKey,
-                [],
-                incomingData,
-                serverStateData.timestamp
-              );
+            const newUniqueItems = incomingData.filter(
+              (item: any) => !existingIds.has(item[keyField])
+            );
+
+            if (newUniqueItems.length > 0) {
+              insertManyShadowArrayElements(thisKey, [], newUniqueItems);
             }
 
-            const meta = getGlobalStore
-              .getState()
-              .getShadowMetadata(thisKey, []);
-            getGlobalStore.getState().setShadowMetadata(thisKey, [], {
-              ...meta,
-              stateSource: 'server',
-              lastServerSync: serverStateData.timestamp || Date.now(),
-              isDirty: false,
-            });
+            // Mark the entire final state as synced
+            const finalState = getShadowValue(thisKey, []);
+            markEntireStateAsServerSynced(
+              thisKey,
+              [],
+              finalState,
+              serverStateData.timestamp
+            );
+          } else {
+            // This handles the "replace" strategy (initial load)
+            initializeShadowState(thisKey, incomingData);
+
+            markEntireStateAsServerSynced(
+              thisKey,
+              [],
+              incomingData,
+              serverStateData.timestamp
+            );
           }
         }
       });
@@ -1213,6 +1543,17 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
     const options = getInitialOptions(thisKey as string);
 
+    const features = {
+      syncEnabled: !!cogsSyncFn && !!syncOpt,
+      validationEnabled: !!(
+        options?.validation?.zodSchemaV4 || options?.validation?.zodSchemaV3
+      ),
+      localStorageEnabled: !!options?.localStorage?.key,
+    };
+    setShadowMetadata(thisKey, [], {
+      ...existingMeta,
+      features,
+    });
     if (options?.defaultState !== undefined || defaultState !== undefined) {
       const finalDefaultState = options?.defaultState || defaultState;
 
@@ -1225,10 +1566,10 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
       const { value: resolvedState, source, timestamp } = resolveInitialState();
 
-      getGlobalStore.getState().initializeShadowState(thisKey, resolvedState);
+      initializeShadowState(thisKey, resolvedState);
 
       // Set shadow metadata with the correct source info
-      getGlobalStore.getState().setShadowMetadata(thisKey, [], {
+      setShadowMetadata(thisKey, [], {
         stateSource: source,
         lastServerSync: source === 'server' ? timestamp : undefined,
         isDirty: false,
@@ -1252,29 +1593,27 @@ export function useCogsStateFn<TStateObject extends unknown>(
     const componentKey = `${thisKey}////${componentIdRef.current}`;
 
     // Register component in shadow metadata at root level
-    const rootMeta = getGlobalStore.getState().getShadowMetadata(thisKey, []);
+    const rootMeta = getShadowMetadata(thisKey, []);
     const components = rootMeta?.components || new Map();
 
     components.set(componentKey, {
       forceUpdate: () => forceUpdate({}),
-      reactiveType: reactiveType ?? ['component', 'deps'],
+      reactiveType: reactiveType ?? ['component'],
       paths: new Set(),
       depsFunction: reactiveDeps || undefined,
-      deps: reactiveDeps
-        ? reactiveDeps(getGlobalStore.getState().getShadowValue(thisKey))
-        : [],
+      deps: reactiveDeps ? reactiveDeps(getShadowValue(thisKey, [])) : [],
       prevDeps: reactiveDeps // Initialize prevDeps with the same initial value
-        ? reactiveDeps(getGlobalStore.getState().getShadowValue(thisKey))
+        ? reactiveDeps(getShadowValue(thisKey, []))
         : [],
     });
 
-    getGlobalStore.getState().setShadowMetadata(thisKey, [], {
+    setShadowMetadata(thisKey, [], {
       ...rootMeta,
       components,
     });
     forceUpdate({});
     return () => {
-      const meta = getGlobalStore.getState().getShadowMetadata(thisKey, []);
+      const meta = getShadowMetadata(thisKey, []);
       const component = meta?.components?.get(componentKey);
 
       // Remove from each path we registered to
@@ -1302,544 +1641,93 @@ export function useCogsStateFn<TStateObject extends unknown>(
 
       // Remove from root components
       if (meta?.components) {
-        getGlobalStore.getState().setShadowMetadata(thisKey, [], meta);
+        setShadowMetadata(thisKey, [], meta);
       }
     };
   }, []);
 
   const syncApiRef = useRef<SyncApi | null>(null);
+  const effectiveSetState = createEffectiveSetState(
+    thisKey,
+    syncApiRef,
+    sessionId,
+    latestInitialOptionsRef
+  );
 
-  const effectiveSetState = (
-    newStateOrFunction: UpdateArg<TStateObject> | InsertParams<TStateObject>,
-    path: string[],
-    updateObj: UpdateOptions
-  ) => {
-    const fullPath = [thisKey, ...path].join('.');
-    const store = getGlobalStore.getState();
-
-    const shadowMeta = store.getShadowMetadata(thisKey, path);
-    const nestedShadowValue = store.getShadowValue(fullPath) as TStateObject;
+  if (!getGlobalStore.getState().initialStateGlobal[thisKey]) {
+    updateInitialStateGlobal(thisKey, stateObject);
+  }
 
-    const payload = (
-      updateObj.updateType === 'insert' && isFunction(newStateOrFunction)
-        ? newStateOrFunction({ state: nestedShadowValue, uuid: uuidv4() })
-        : isFunction(newStateOrFunction)
-          ? newStateOrFunction(nestedShadowValue)
-          : newStateOrFunction
-    ) as TStateObject;
+  const updaterFinal = useMemo(() => {
+    const handler = createProxyHandler<TStateObject>(
+      thisKey,
+      effectiveSetState,
+      componentIdRef.current,
+      sessionId
+    );
 
-    const timeStamp = Date.now();
+    return handler;
+  }, [thisKey, sessionId]);
 
-    const newUpdate = {
-      timeStamp,
-      stateKey: thisKey,
-      path,
-      updateType: updateObj.updateType,
-      status: 'new' as const,
-      oldValue: nestedShadowValue,
-      newValue: payload,
-    } satisfies UpdateTypeDetail;
-
-    // Perform the update
-    switch (updateObj.updateType) {
-      case 'insert': {
-        store.insertShadowArrayElement(thisKey, path, newUpdate.newValue);
-        store.markAsDirty(thisKey, path, { bubble: true });
-        const arrayMeta = shadowMeta;
-        if (arrayMeta?.arrayKeys) {
-          const newItemKey =
-            arrayMeta.arrayKeys[arrayMeta.arrayKeys.length - 1];
-          if (newItemKey) {
-            const newItemPath = newItemKey.split('.').slice(1); // Remove stateKey
-            store.markAsDirty(thisKey, newItemPath, { bubble: false });
-          }
-        }
-        break;
-      }
-      case 'cut': {
-        const parentArrayPath = path.slice(0, -1);
+  const cogsSyncFn = __useSync;
+  const syncOpt = latestInitialOptionsRef.current?.syncOptions;
 
-        store.removeShadowArrayElement(thisKey, path);
-        store.markAsDirty(thisKey, parentArrayPath, { bubble: true });
-        break;
-      }
-      case 'update': {
-        store.updateShadowAtPath(thisKey, path, newUpdate.newValue);
-        store.markAsDirty(thisKey, path, { bubble: true });
-        break;
-      }
-    }
+  if (cogsSyncFn) {
+    syncApiRef.current = cogsSyncFn(
+      updaterFinal as any,
+      syncOpt ?? ({} as any)
+    );
+  }
 
-    const shouldSync = updateObj.sync !== false;
+  return updaterFinal;
+}
 
-    if (shouldSync && syncApiRef.current && syncApiRef.current.connected) {
-      syncApiRef.current.updateState({ operation: newUpdate });
-    }
-    // Handle signals - reuse shadowMeta from the beginning
-    if (shadowMeta?.signals && shadowMeta.signals.length > 0) {
-      // Use updatedShadowValue if we need the new value, otherwise use payload
-      const displayValue = updateObj.updateType === 'cut' ? null : payload;
-
-      shadowMeta.signals.forEach(({ parentId, position, effect }) => {
-        const parent = document.querySelector(`[data-parent-id="${parentId}"]`);
-        if (parent) {
-          const childNodes = Array.from(parent.childNodes);
-          if (childNodes[position]) {
-            let finalDisplayValue = displayValue;
-            if (effect && displayValue !== null) {
-              try {
-                finalDisplayValue = new Function(
-                  'state',
-                  `return (${effect})(state)`
-                )(displayValue);
-              } catch (err) {
-                console.error('Error evaluating effect function:', err);
-              }
-            }
-
-            if (
-              finalDisplayValue !== null &&
-              finalDisplayValue !== undefined &&
-              typeof finalDisplayValue === 'object'
-            ) {
-              finalDisplayValue = JSON.stringify(finalDisplayValue) as any;
-            }
-
-            childNodes[position].textContent = String(finalDisplayValue ?? '');
-          }
-        }
-      });
-    }
-
-    // Update in effectiveSetState for insert handling:
-    if (updateObj.updateType === 'insert') {
-      // Use shadowMeta from beginning if it's an array
-      if (shadowMeta?.mapWrappers && shadowMeta.mapWrappers.length > 0) {
-        // Get fresh array keys after insert
-        const sourceArrayKeys =
-          store.getShadowMetadata(thisKey, path)?.arrayKeys || [];
-        const newItemKey = sourceArrayKeys[sourceArrayKeys.length - 1]!;
-        const newItemValue = store.getShadowValue(newItemKey);
-        const fullSourceArray = store.getShadowValue(
-          [thisKey, ...path].join('.')
-        );
-
-        if (!newItemKey || newItemValue === undefined) return;
-
-        shadowMeta.mapWrappers.forEach((wrapper) => {
-          let shouldRender = true;
-          let insertPosition = -1;
-
-          // Check if wrapper has transforms
-          if (wrapper.meta?.transforms && wrapper.meta.transforms.length > 0) {
-            // Check if new item passes all filters
-            for (const transform of wrapper.meta.transforms) {
-              if (transform.type === 'filter') {
-                if (!transform.fn(newItemValue, -1)) {
-                  shouldRender = false;
-                  break;
-                }
-              }
-            }
-
-            if (shouldRender) {
-              // Get current valid keys by applying transforms
-              const currentValidKeys = applyTransforms(
-                thisKey,
-                path,
-                wrapper.meta.transforms
-              );
-
-              // Find where to insert based on sort
-              const sortTransform = wrapper.meta.transforms.find(
-                (t: any) => t.type === 'sort'
-              );
-              if (sortTransform) {
-                // Add new item to the list and sort to find position
-                const allItems = currentValidKeys.map((key) => ({
-                  key,
-                  value: store.getShadowValue(key),
-                }));
-
-                allItems.push({ key: newItemKey, value: newItemValue });
-                allItems.sort((a, b) => sortTransform.fn(a.value, b.value));
-
-                insertPosition = allItems.findIndex(
-                  (item) => item.key === newItemKey
-                );
-              } else {
-                // No sort, insert at end
-                insertPosition = currentValidKeys.length;
-              }
-            }
-          } else {
-            // No transforms, always render at end
-            shouldRender = true;
-            insertPosition = sourceArrayKeys.length - 1;
-          }
-
-          if (!shouldRender) {
-            return; // Skip this wrapper, item doesn't pass filters
-          }
-
-          if (wrapper.containerRef && wrapper.containerRef.isConnected) {
-            const itemElement = document.createElement('div');
-            itemElement.setAttribute('data-item-path', newItemKey);
-
-            // Insert at correct position
-            const children = Array.from(wrapper.containerRef.children);
-            if (insertPosition >= 0 && insertPosition < children.length) {
-              wrapper.containerRef.insertBefore(
-                itemElement,
-                children[insertPosition]!
-              );
-            } else {
-              wrapper.containerRef.appendChild(itemElement);
-            }
-
-            const root = createRoot(itemElement);
-            const componentId = uuidv4();
-            const itemPath = newItemKey.split('.').slice(1);
-
-            const arraySetter = wrapper.rebuildStateShape({
-              path: wrapper.path,
-              currentState: fullSourceArray,
-              componentId: wrapper.componentId,
-              meta: wrapper.meta,
-            });
-
-            root.render(
-              createElement(MemoizedCogsItemWrapper, {
-                stateKey: thisKey,
-                itemComponentId: componentId,
-                itemPath: itemPath,
-                localIndex: insertPosition,
-                arraySetter: arraySetter,
-                rebuildStateShape: wrapper.rebuildStateShape,
-                renderFn: wrapper.mapFn,
-              })
-            );
-          }
-        });
-      }
-    }
-
-    if (updateObj.updateType === 'cut') {
-      const arrayPath = path.slice(0, -1);
-      const arrayMeta = store.getShadowMetadata(thisKey, arrayPath);
-
-      if (arrayMeta?.mapWrappers && arrayMeta.mapWrappers.length > 0) {
-        arrayMeta.mapWrappers.forEach((wrapper) => {
-          if (wrapper.containerRef && wrapper.containerRef.isConnected) {
-            const elementToRemove = wrapper.containerRef.querySelector(
-              `[data-item-path="${fullPath}"]`
-            );
-            if (elementToRemove) {
-              elementToRemove.remove();
-            }
-          }
-        });
-      }
-    }
-
-    const rootMeta = store.getShadowMetadata(thisKey, []);
-    const notifiedComponents = new Set<string>();
-
-    if (!rootMeta?.components) {
-      return;
-    }
-
-    // --- PASS 1: Notify specific subscribers based on update type ---
-
-    if (updateObj.updateType === 'update') {
-      // --- Bubble-up Notification ---
-      // When a nested property changes, notify components listening at that exact path,
-      // and also "bubble up" to notify components listening on parent paths.
-      // e.g., an update to `user.address.street` notifies listeners of `street`, `address`, and `user`.
-      let currentPath = [...path]; // Create a mutable copy of the path
-
-      while (true) {
-        const currentPathMeta = store.getShadowMetadata(thisKey, currentPath);
-
-        if (currentPathMeta?.pathComponents) {
-          currentPathMeta.pathComponents.forEach((componentId) => {
-            if (notifiedComponents.has(componentId)) {
-              return; // Avoid sending redundant notifications
-            }
-            const component = rootMeta.components?.get(componentId);
-            if (component) {
-              const reactiveTypes = Array.isArray(component.reactiveType)
-                ? component.reactiveType
-                : [component.reactiveType || 'component'];
-
-              // This notification logic applies to components that depend on object structures.
-              if (!reactiveTypes.includes('none')) {
-                component.forceUpdate();
-                notifiedComponents.add(componentId);
-              }
-            }
-          });
-        }
-
-        if (currentPath.length === 0) {
-          break; // We've reached the root, stop bubbling.
-        }
-        currentPath.pop(); // Go up one level for the next iteration.
-      }
-
-      // ADDITIONALLY, if the payload is an object, perform a deep-check and
-      // notify any components that are subscribed to specific sub-paths that changed.
-      if (
-        payload &&
-        typeof payload === 'object' &&
-        !isArray(payload) &&
-        nestedShadowValue &&
-        typeof nestedShadowValue === 'object' &&
-        !isArray(nestedShadowValue)
-      ) {
-        // Get a list of dot-separated paths that have changed (e.g., ['name', 'address.city'])
-        const changedSubPaths = getDifferences(payload, nestedShadowValue);
-
-        changedSubPaths.forEach((subPathString) => {
-          const subPath = subPathString.split('.');
-          const fullSubPath = [...path, ...subPath];
-
-          // Get the metadata (and subscribers) for this specific nested path
-          const subPathMeta = store.getShadowMetadata(thisKey, fullSubPath);
-          if (subPathMeta?.pathComponents) {
-            subPathMeta.pathComponents.forEach((componentId) => {
-              // Avoid sending a redundant update
-              if (notifiedComponents.has(componentId)) {
-                return;
-              }
-              const component = rootMeta.components?.get(componentId);
-              if (component) {
-                const reactiveTypes = Array.isArray(component.reactiveType)
-                  ? component.reactiveType
-                  : [component.reactiveType || 'component'];
-
-                if (!reactiveTypes.includes('none')) {
-                  component.forceUpdate();
-                  notifiedComponents.add(componentId);
-                }
-              }
-            });
-          }
-        });
-      }
-    } else if (
-      updateObj.updateType === 'insert' ||
-      updateObj.updateType === 'cut'
-    ) {
-      // For array structural changes, notify components listening to the parent array.
-      const parentArrayPath =
-        updateObj.updateType === 'insert' ? path : path.slice(0, -1);
-
-      const parentMeta = store.getShadowMetadata(thisKey, parentArrayPath);
-
-      // Handle signal updates for array length, etc.
-      if (parentMeta?.signals && parentMeta.signals.length > 0) {
-        const parentFullPath = [thisKey, ...parentArrayPath].join('.');
-        const parentValue = store.getShadowValue(parentFullPath);
-
-        parentMeta.signals.forEach(({ parentId, position, effect }) => {
-          const parent = document.querySelector(
-            `[data-parent-id="${parentId}"]`
-          );
-          if (parent) {
-            const childNodes = Array.from(parent.childNodes);
-            if (childNodes[position]) {
-              let displayValue = parentValue;
-              if (effect) {
-                try {
-                  displayValue = new Function(
-                    'state',
-                    `return (${effect})(state)`
-                  )(parentValue);
-                } catch (err) {
-                  console.error('Error evaluating effect function:', err);
-                  displayValue = parentValue;
-                }
-              }
-
-              if (
-                displayValue !== null &&
-                displayValue !== undefined &&
-                typeof displayValue === 'object'
-              ) {
-                displayValue = JSON.stringify(displayValue);
-              }
-
-              childNodes[position].textContent = String(displayValue ?? '');
-            }
-          }
-        });
-      }
-
-      // Notify components subscribed to the array itself.
-      if (parentMeta?.pathComponents) {
-        parentMeta.pathComponents.forEach((componentId) => {
-          if (!notifiedComponents.has(componentId)) {
-            const component = rootMeta.components?.get(componentId);
-            if (component) {
-              component.forceUpdate();
-              notifiedComponents.add(componentId);
-            }
-          }
-        });
-      }
-    }
-
-    rootMeta.components.forEach((component, componentId) => {
-      if (notifiedComponents.has(componentId)) {
-        return;
-      }
-
-      const reactiveTypes = Array.isArray(component.reactiveType)
-        ? component.reactiveType
-        : [component.reactiveType || 'component'];
-
-      if (reactiveTypes.includes('all')) {
-        component.forceUpdate();
-        notifiedComponents.add(componentId);
-        return;
-      }
-
-      if (reactiveTypes.includes('deps')) {
-        if (component.depsFunction) {
-          const currentState = store.getShadowValue(thisKey);
-          const newDeps = component.depsFunction(currentState);
-          let shouldUpdate = false;
-
-          if (newDeps === true) {
-            shouldUpdate = true;
-          } else if (Array.isArray(newDeps)) {
-            if (!isDeepEqual(component.prevDeps, newDeps)) {
-              component.prevDeps = newDeps;
-              shouldUpdate = true;
-            }
-          }
-
-          if (shouldUpdate) {
-            component.forceUpdate();
-            notifiedComponents.add(componentId);
-          }
-        }
-      }
-    });
-    notifiedComponents.clear();
-
-    addStateLog(thisKey, newUpdate);
-
-    saveToLocalStorage(
-      payload,
-      thisKey,
-      latestInitialOptionsRef.current,
-      sessionId
-    );
-
-    if (latestInitialOptionsRef.current?.middleware) {
-      latestInitialOptionsRef.current!.middleware({
-        update: newUpdate,
-      });
-    }
+type MetaData = {
+  // Map array paths to their filtered/sorted ID order
+  arrayViews?: {
+    [arrayPath: string]: string[]; // e.g. { "todos": ["id:xxx", "id:yyy"], "todos.id:xxx.subtasks": ["id:aaa"] }
   };
-
-  if (!getGlobalStore.getState().initialStateGlobal[thisKey]) {
-    updateInitialStateGlobal(thisKey, stateObject);
-  }
-
-  const updaterFinal = useMemo(() => {
-    const handler = createProxyHandler<TStateObject>(
-      thisKey,
-      effectiveSetState,
-      componentIdRef.current,
-      sessionId
-    );
-
-    return handler;
-  }, [thisKey, sessionId]);
-
-  const cogsSyncFn = __useSync;
-  const syncOpt = latestInitialOptionsRef.current?.syncOptions;
-
-  if (cogsSyncFn) {
-    syncApiRef.current = cogsSyncFn(
-      updaterFinal as any,
-      syncOpt ?? ({} as any)
-    );
-  }
-
-  return updaterFinal;
-}
-
-export type MetaData = {
-  /**
-   * An array of the full, unique string IDs (e.g., `"stateKey.arrayName.id:123"`)
-   * of the items that belong to the current derived "view" of an array.
-   * This is the primary mechanism for tracking the state of filtered or sorted lists.
-   *
-   * - `stateFilter` populates this with only the IDs of items that passed the filter.
-   * - `stateSort` reorders this list to match the new sort order.
-   * - All subsequent chained operations (like `.get()`, `.index()`, or `.cut()`)
-   *   MUST consult this list first to know which items they apply to and in what order.
-   */
-  validIds?: string[];
-
-  /**
-   * An array of the actual filter functions that have been applied in a chain.
-   * This is primarily used by reactive renderers like `$stateMap` to make predictions.
-   *
-   * For example, when a new item is inserted into the original source array, a
-   * `$stateMap` renderer on a filtered view can use these functions to test if the
-   * newly inserted item should be dynamically rendered in its view.
-   */
   transforms?: Array<{
     type: 'filter' | 'sort';
     fn: Function;
+    path: string[]; // Which array this transform applies to
   }>;
+  serverStateIsUpStream?: boolean;
 };
 
-function hashTransforms(transforms: any[]) {
-  if (!transforms || transforms.length === 0) {
-    return '';
-  }
-  return transforms
-    .map(
-      (transform) =>
-        `${transform.type}${JSON.stringify(transform.dependencies || [])}`
-    )
-    .join('');
-}
 const applyTransforms = (
   stateKey: string,
   path: string[],
-  transforms?: Array<{ type: 'filter' | 'sort'; fn: Function }>
+  meta?: MetaData
 ): string[] => {
-  let arrayKeys =
-    getGlobalStore.getState().getShadowMetadata(stateKey, path)?.arrayKeys ||
-    [];
-
+  let ids = getShadowMetadata(stateKey, path)?.arrayKeys || [];
+  const transforms = meta?.transforms;
   if (!transforms || transforms.length === 0) {
-    return arrayKeys;
+    return ids;
   }
 
-  let itemsWithKeys = arrayKeys.map((key) => ({
-    key,
-    value: getGlobalStore.getState().getShadowValue(key),
-  }));
-
+  // Apply each transform using just IDs
   for (const transform of transforms) {
     if (transform.type === 'filter') {
-      itemsWithKeys = itemsWithKeys.filter(({ value }, index) =>
-        transform.fn(value, index)
-      );
+      const filtered: any[] = [];
+      ids.forEach((id, index) => {
+        const value = getShadowValue(stateKey, [...path, id]);
+
+        if (transform.fn(value, index)) {
+          filtered.push(id);
+        }
+      });
+      ids = filtered;
     } else if (transform.type === 'sort') {
-      itemsWithKeys.sort((a, b) => transform.fn(a.value, b.value));
+      ids.sort((a, b) => {
+        const aValue = getShadowValue(stateKey, [...path, a]);
+        const bValue = getShadowValue(stateKey, [...path, b]);
+        return transform.fn(aValue, bValue);
+      });
     }
   }
 
-  return itemsWithKeys.map(({ key }) => key);
+  return ids;
 };
 const registerComponentDependency = (
   stateKey: string,
@@ -1847,7 +1735,6 @@ const registerComponentDependency = (
   dependencyPath: string[]
 ) => {
   const fullComponentId = `${stateKey}////${componentId}`;
-  const { addPathComponent, getShadowMetadata } = getGlobalStore.getState();
 
   const rootMeta = getShadowMetadata(stateKey, []);
   const component = rootMeta?.components?.get(fullComponentId);
@@ -1871,8 +1758,7 @@ const notifySelectionComponents = (
   parentPath: string[],
   currentSelected?: string | undefined
 ) => {
-  const store = getGlobalStore.getState();
-  const rootMeta = store.getShadowMetadata(stateKey, []);
+  const rootMeta = getShadowMetadata(stateKey, []);
   const notifiedComponents = new Set<string>();
 
   // Handle "all" reactive components first
@@ -1889,20 +1775,18 @@ const notifySelectionComponents = (
     });
   }
 
-  store
-    .getShadowMetadata(stateKey, [...parentPath, 'getSelected'])
-    ?.pathComponents?.forEach((componentId) => {
-      const thisComp = rootMeta?.components?.get(componentId);
-      thisComp?.forceUpdate();
-    });
+  getShadowMetadata(stateKey, [
+    ...parentPath,
+    'getSelected',
+  ])?.pathComponents?.forEach((componentId) => {
+    const thisComp = rootMeta?.components?.get(componentId);
+    thisComp?.forceUpdate();
+  });
 
-  const parentMeta = store.getShadowMetadata(stateKey, parentPath);
+  const parentMeta = getShadowMetadata(stateKey, parentPath);
   for (let arrayKey of parentMeta?.arrayKeys || []) {
     const key = arrayKey + '.selected';
-    const selectedItem = store.getShadowMetadata(
-      stateKey,
-      key.split('.').slice(1)
-    );
+    const selectedItem = getShadowMetadata(stateKey, key.split('.').slice(1));
     if (arrayKey == currentSelected) {
       selectedItem?.pathComponents?.forEach((componentId) => {
         const thisComp = rootMeta?.components?.get(componentId);
@@ -1911,6 +1795,28 @@ const notifySelectionComponents = (
     }
   }
 };
+function getScopedData(stateKey: string, path: string[], meta?: MetaData) {
+  const shadowMeta = getShadowMetadata(stateKey, path);
+  const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
+  const arrayKeys = meta?.arrayViews?.[arrayPathKey];
+
+  // FIX: If the derived view is empty, return an empty array directly.
+  if (Array.isArray(arrayKeys) && arrayKeys.length === 0) {
+    return {
+      shadowMeta,
+      value: [],
+      arrayKeys: shadowMeta?.arrayKeys,
+    };
+  }
+
+  const value = getShadowValue(stateKey, path, arrayKeys);
+
+  return {
+    shadowMeta,
+    value,
+    arrayKeys: shadowMeta?.arrayKeys,
+  };
+}
 
 function createProxyHandler<T>(
   stateKey: string,
@@ -1921,7 +1827,57 @@ function createProxyHandler<T>(
   const proxyCache = new Map<string, any>();
   let stateVersion = 0;
 
-  let recursionTimerName: string | null = null;
+  const methodNames = new Set([
+    'sync',
+    'getStatus',
+    'removeStorage',
+    'showValidationErrors',
+    'getSelected',
+    'getSelectedIndex',
+    'clearSelected',
+    'useVirtualView',
+    'stateMap',
+    '$stateMap',
+    'stateFind',
+    'stateFilter',
+    'stateSort',
+    'stream',
+    'stateList',
+    'stateFlattenOn',
+    'index',
+    'last',
+    'insert',
+    'uniqueInsert',
+    'cut',
+    'cutSelected',
+    'cutByValue',
+    'toggleByValue',
+    'findWith',
+    'cutThis',
+    'get',
+    'getState',
+    '$derive',
+    '$get',
+    'lastSynced',
+    'getLocalStorage',
+    'isSelected',
+    'setSelected',
+    'toggleSelected',
+    '_componentId',
+    'addZodValidation',
+    'clearZodValidation',
+    'applyJsonPatch',
+    'getComponents',
+    'getAllFormRefs',
+    'getFormRef',
+    'validationWrapper',
+    '_stateKey',
+    '_path',
+    'update',
+    'toggle',
+    'formElement',
+    // Add ANY other method names here
+  ]);
 
   function rebuildStateShape({
     path = [],
@@ -1933,64 +1889,34 @@ function createProxyHandler<T>(
     meta?: MetaData;
   }): any {
     const derivationSignature = meta
-      ? JSON.stringify(meta.validIds || meta.transforms)
+      ? JSON.stringify(meta.arrayViews || 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('.');
 
-    type CallableStateObject<T> = {
-      (): T;
-    } & {
-      [key: string]: any;
-    };
-
-    const baseFunction = function () {
-      return getGlobalStore().getShadowValue(stateKey, path);
-    } as unknown as CallableStateObject<T>;
-
     // We attach baseObj properties *inside* the get trap now to avoid recursion
     // This is a placeholder for the proxy.
 
     const handler = {
       get(target: any, prop: string) {
+        if (path.length === 0 && prop in rootLevelMethods) {
+          return rootLevelMethods[prop as keyof typeof rootLevelMethods];
+        }
+        if (!methodNames.has(prop)) {
+          const nextPath = [...path, prop];
+          return rebuildStateShape({
+            path: nextPath,
+            componentId: componentId!,
+            meta,
+          });
+        }
         if (prop === '_rebuildStateShape') {
           return rebuildStateShape;
         }
-        const baseObjProps = Object.getOwnPropertyNames(baseObj);
-        if (baseObjProps.includes(prop) && path.length === 0) {
-          return (baseObj as any)[prop];
-        }
-        // ^--------- END OF FIX ---------^
-
-        if (prop === 'getDifferences') {
-          return () => {
-            const shadowMeta = getGlobalStore
-              .getState()
-              .getShadowMetadata(stateKey, []);
-            const currentState = getGlobalStore
-              .getState()
-              .getShadowValue(stateKey);
-
-            // Use the appropriate base state for comparison
-            let baseState;
-            if (
-              shadowMeta?.stateSource === 'server' &&
-              shadowMeta.baseServerState
-            ) {
-              baseState = shadowMeta.baseServerState;
-            } else {
-              baseState =
-                getGlobalStore.getState().initialStateGlobal[stateKey];
-            }
 
-            return getDifferences(currentState, baseState);
-          };
-        }
         if (prop === 'sync' && path.length === 0) {
           return async function () {
             const options = getGlobalStore
@@ -2031,7 +1957,7 @@ function createProxyHandler<T>(
                 const shadowMeta = getGlobalStore
                   .getState()
                   .getShadowMetadata(stateKey, []);
-                getGlobalStore.getState().setShadowMetadata(stateKey, [], {
+                setShadowMetadata(stateKey, [], {
                   ...shadowMeta,
                   isDirty: false,
                   lastServerSync: Date.now(),
@@ -2055,56 +1981,46 @@ function createProxyHandler<T>(
         // Fixed getStatus function in createProxyHandler
         if (prop === '_status' || prop === 'getStatus') {
           const getStatusFunc = () => {
-            const shadowMeta = getGlobalStore
-              .getState()
-              .getShadowMetadata(stateKey, path);
-            const value = getGlobalStore
-              .getState()
-              .getShadowValue(stateKeyPathKey);
+            // ✅ Use the optimized helper to get all data in one efficient call
+            const { shadowMeta, value } = getScopedData(stateKey, path, meta);
 
-            // Priority 1: Explicitly dirty items
+            // Priority 1: Explicitly dirty items. This is the most important status.
             if (shadowMeta?.isDirty === true) {
               return 'dirty';
             }
 
-            // Priority 2: Explicitly synced items (isDirty: false)
-            if (shadowMeta?.isDirty === false) {
-              return 'synced';
-            }
-
-            // Priority 3: Items from server source (should be synced even without explicit isDirty flag)
-            if (shadowMeta?.stateSource === 'server') {
+            // ✅ Priority 2: Synced items. This condition is now cleaner.
+            // An item is considered synced if it came from the server OR was explicitly
+            // marked as not dirty (isDirty: false), covering all sync-related cases.
+            if (
+              shadowMeta?.stateSource === 'server' ||
+              shadowMeta?.isDirty === false
+            ) {
               return 'synced';
             }
 
-            // Priority 4: Items restored from localStorage
+            // Priority 3: Items restored from localStorage.
             if (shadowMeta?.stateSource === 'localStorage') {
               return 'restored';
             }
 
-            // Priority 5: Items from default/initial state
+            // Priority 4: Items from default/initial state.
             if (shadowMeta?.stateSource === 'default') {
               return 'fresh';
             }
 
-            // Priority 6: Check if this is part of initial server load
-            // Look up the tree to see if parent has server source
-            const rootMeta = getGlobalStore
-              .getState()
-              .getShadowMetadata(stateKey, []);
-            if (rootMeta?.stateSource === 'server' && !shadowMeta?.isDirty) {
-              return 'synced';
-            }
+            // ✅ REMOVED the redundant "root" check. The item's own `stateSource` is sufficient.
 
-            // Priority 7: If no metadata exists but value exists, it's probably fresh
+            // Priority 5: A value exists but has no metadata. This is a fallback.
             if (value !== undefined && !shadowMeta) {
               return 'fresh';
             }
 
-            // Fallback
+            // Fallback if no other condition is met.
             return 'unknown';
           };
 
+          // This part remains the same
           return prop === '_status' ? getStatusFunc() : getStatusFunc;
         }
         if (prop === 'removeStorage') {
@@ -2121,14 +2037,15 @@ function createProxyHandler<T>(
         }
         if (prop === 'showValidationErrors') {
           return () => {
-            const meta = getGlobalStore
-              .getState()
-              .getShadowMetadata(stateKey, path);
+            const { shadowMeta } = getScopedData(stateKey, path, meta);
             if (
-              meta?.validation?.status === 'VALIDATION_FAILED' &&
-              meta.validation.message
+              shadowMeta?.validation?.status === 'INVALID' &&
+              shadowMeta.validation.errors.length > 0
             ) {
-              return [meta.validation.message];
+              // Return only error-severity messages (not warnings)
+              return shadowMeta.validation.errors
+                .filter((err) => err.severity === 'error')
+                .map((err) => err.message);
             }
             return [];
           };
@@ -2136,55 +2053,77 @@ function createProxyHandler<T>(
 
         if (prop === 'getSelected') {
           return () => {
-            const fullKey = stateKey + '.' + path.join('.');
+            const arrayKey = [stateKey, ...path].join('.');
             registerComponentDependency(stateKey, componentId, [
               ...path,
               'getSelected',
             ]);
 
-            const selectedIndicesMap =
-              getGlobalStore.getState().selectedIndicesMap;
-            if (!selectedIndicesMap || !selectedIndicesMap.has(fullKey)) {
+            const selectedItemKey = getGlobalStore
+              .getState()
+              .selectedIndicesMap.get(arrayKey);
+            if (!selectedItemKey) {
               return undefined;
             }
 
-            const selectedItemKey = selectedIndicesMap.get(fullKey)!;
-            if (meta?.validIds) {
-              if (!meta.validIds.includes(selectedItemKey)) {
-                return undefined;
-              }
-            }
+            const viewKey = path.join('.');
+            const currentViewIds = meta?.arrayViews?.[viewKey];
+            const selectedItemId = selectedItemKey.split('.').pop();
 
-            const value = getGlobalStore
-              .getState()
-              .getShadowValue(selectedItemKey);
+            // FIX: Only return the selected item if it exists in the current filtered/sorted view.
+            if (currentViewIds && !currentViewIds.includes(selectedItemId!)) {
+              return undefined;
+            }
 
-            if (!value) {
+            const value = getShadowValue(
+              stateKey,
+              selectedItemKey.split('.').slice(1)
+            );
+            if (value === undefined) {
               return undefined;
             }
 
             return rebuildStateShape({
               path: selectedItemKey.split('.').slice(1) as string[],
               componentId: componentId!,
+              meta,
             });
           };
         }
         if (prop === 'getSelectedIndex') {
           return () => {
-            const selectedIndex = getGlobalStore
+            // Key for the array in the global selection map (e.g., "myState.products")
+            const arrayKey = stateKey + '.' + path.join('.');
+            // Key for this specific view in the meta object (e.g., "products")
+            const viewKey = path.join('.');
+
+            // Get the full path of the selected item (e.g., "myState.products.id:abc")
+            const selectedItemKey = getGlobalStore
               .getState()
-              .getSelectedIndex(
-                stateKey + '.' + path.join('.'),
-                meta?.validIds
-              );
+              .selectedIndicesMap.get(arrayKey);
+
+            if (!selectedItemKey) {
+              return -1; // Nothing is selected for this array.
+            }
+
+            // Get the list of item IDs for the current filtered/sorted view.
+            const { keys: viewIds } = getArrayData(stateKey, path, meta);
+
+            if (!viewIds) {
+              return -1; // Should not happen if it's an array, but a safe guard.
+            }
+
+            // FIX: Extract just the ID from the full selected item path.
+            const selectedId = selectedItemKey.split('.').pop();
 
-            return selectedIndex;
+            // Return the index of that ID within the current view's list of IDs.
+            return (viewIds as string[]).indexOf(selectedId as string);
           };
         }
         if (prop === 'clearSelected') {
           notifySelectionComponents(stateKey, path);
           return () => {
-            getGlobalStore.getState().clearSelectedIndex({
+            clearSelectedIndex({
               arrayKey: stateKey + '.' + path.join('.'),
             });
           };
@@ -2209,6 +2148,13 @@ function createProxyHandler<T>(
             const [rerender, forceUpdate] = useState({});
             const initialScrollRef = useRef(true);
 
+            useEffect(() => {
+              const interval = setInterval(() => {
+                forceUpdate({});
+              }, 1000);
+              return () => clearInterval(interval);
+            }, []);
+
             // Scroll state management
             const scrollStateRef = useRef({
               isUserScrolling: false,
@@ -2221,59 +2167,28 @@ function createProxyHandler<T>(
             const measurementCache = useRef(
               new Map<string, { height: number; offset: number }>()
             );
+            const { keys: arrayKeys } = getArrayData(stateKey, path, meta);
 
-            // Separate effect for handling rerender updates
-            useLayoutEffect(() => {
-              if (
-                !stickToBottom ||
-                !containerRef.current ||
-                scrollStateRef.current.isUserScrolling
-              )
-                return;
-
-              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 || [];
-
-              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,
+            // Subscribe to state changes like stateList does
+            useEffect(() => {
+              const stateKeyPathKey = [stateKey, ...path].join('.');
+              const unsubscribe = getGlobalStore
+                .getState()
+                .subscribeToPath(stateKeyPathKey, (e) => {
+                  if (e.type === 'GET_SELECTED') {
+                    return;
+                  }
+                  if (e.type === 'SERVER_STATE_UPDATE') {
+                    //  forceUpdate({});
+                  }
                 });
 
-                runningOffset += measuredHeight;
-              });
-
-              measurementCache.current = offsets;
-              return { totalHeight: runningOffset, itemOffsets: offsets };
-            }, [arrayKeys.length, itemHeight]);
+              return () => {
+                unsubscribe();
+              };
+            }, [componentId, stateKey, path.join('.')]);
 
-            // Improved initial positioning effect
+            // YOUR ORIGINAL INITIAL POSITIONING - KEEPING EXACTLY AS IS
             useLayoutEffect(() => {
               if (
                 stickToBottom &&
@@ -2284,7 +2199,6 @@ function createProxyHandler<T>(
               ) {
                 const container = containerRef.current;
 
-                // Wait for container to have dimensions
                 const waitForContainer = () => {
                   if (container.clientHeight > 0) {
                     const visibleCount = Math.ceil(
@@ -2298,13 +2212,11 @@ function createProxyHandler<T>(
 
                     setRange({ startIndex, endIndex });
 
-                    // Ensure scroll after range is set
                     requestAnimationFrame(() => {
                       scrollToBottom('instant');
-                      initialScrollRef.current = false; // Mark initial scroll as done
+                      initialScrollRef.current = false;
                     });
                   } else {
-                    // Container not ready, try again
                     requestAnimationFrame(waitForContainer);
                   }
                 };
@@ -2313,7 +2225,16 @@ function createProxyHandler<T>(
               }
             }, [arrayKeys.length, stickToBottom, itemHeight, overscan]);
 
-            // Combined scroll handler
+            const rangeRef = useRef(range);
+            useLayoutEffect(() => {
+              rangeRef.current = range;
+            }, [range]);
+
+            const arrayKeysRef = useRef(arrayKeys);
+            useLayoutEffect(() => {
+              arrayKeysRef.current = arrayKeys;
+            }, [arrayKeys]);
+
             const handleScroll = useCallback(() => {
               const container = containerRef.current;
               if (!container) return;
@@ -2357,9 +2278,14 @@ function createProxyHandler<T>(
                   break;
                 }
               }
-
+              console.log(
+                'hadnlescroll ',
+                measurementCache.current,
+                newStartIndex,
+                range
+              );
               // Only update if range actually changed
-              if (newStartIndex !== range.startIndex) {
+              if (newStartIndex !== range.startIndex && range.startIndex != 0) {
                 const visibleCount = Math.ceil(clientHeight / itemHeight);
                 setRange({
                   startIndex: Math.max(0, newStartIndex - overscan),
@@ -2380,36 +2306,34 @@ function createProxyHandler<T>(
             // Set up scroll listener
             useEffect(() => {
               const container = containerRef.current;
-              if (!container || !stickToBottom) return;
+              if (!container) return;
 
               container.addEventListener('scroll', handleScroll, {
                 passive: true,
               });
-
               return () => {
                 container.removeEventListener('scroll', handleScroll);
               };
             }, [handleScroll, stickToBottom]);
+
+            // YOUR ORIGINAL SCROLL TO BOTTOM FUNCTION - KEEPING EXACTLY AS IS
             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
+                    if (attempts > 5) return;
 
                     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;
                     }
@@ -2419,12 +2343,10 @@ function createProxyHandler<T>(
                       behavior: behavior,
                     });
 
-                    // In slow environments, check again after a short delay
                     setTimeout(() => {
                       const newHeight = container.scrollHeight;
                       const newScroll = container.scrollTop;
 
-                      // If height changed or we're not at bottom, try again
                       if (
                         newHeight !== currentHeight ||
                         newScroll + clientHeight < newHeight - 1
@@ -2437,11 +2359,9 @@ function createProxyHandler<T>(
                   attemptScroll();
                 };
 
-                // Use requestIdleCallback for better performance in slow environments
                 if ('requestIdleCallback' in window) {
                   requestIdleCallback(performScroll, { timeout: 100 });
                 } else {
-                  // Fallback to rAF chain
                   requestAnimationFrame(() => {
                     requestAnimationFrame(performScroll);
                   });
@@ -2449,15 +2369,14 @@ function createProxyHandler<T>(
               },
               []
             );
-            // Auto-scroll to bottom when new content arrives
-            // Consolidated auto-scroll effect with debouncing
+
+            // YOUR ORIGINAL AUTO-SCROLL EFFECTS - KEEPING ALL OF THEM
             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);
@@ -2473,7 +2392,6 @@ function createProxyHandler<T>(
                 }, 100);
               };
 
-              // Single MutationObserver for all DOM changes
               const observer = new MutationObserver(() => {
                 if (!scrollState.isUserScrolling) {
                   debouncedScrollToBottom();
@@ -2484,24 +2402,10 @@ function createProxyHandler<T>(
                 childList: true,
                 subtree: true,
                 attributes: true,
-                attributeFilter: ['style', 'class'], // More specific than just 'height'
+                attributeFilter: ['style', 'class'],
               });
 
-              // Handle image loads with event delegation
-              const handleImageLoad = (e: Event) => {
-                if (
-                  e.target instanceof HTMLImageElement &&
-                  !scrollState.isUserScrolling
-                ) {
-                  debouncedScrollToBottom();
-                }
-              };
-
-              container.addEventListener('load', handleImageLoad, true);
-
-              // Initial scroll with proper timing
               if (initialScrollRef.current) {
-                // For initial load, wait for next tick to ensure DOM is ready
                 setTimeout(() => {
                   scrollToBottom('instant');
                 }, 0);
@@ -2512,33 +2416,28 @@ function createProxyHandler<T>(
               return () => {
                 clearTimeout(scrollTimeout);
                 observer.disconnect();
-                container.removeEventListener('load', handleImageLoad, true);
               };
             }, [stickToBottom, arrayKeys.length, scrollToBottom]);
-            // Create virtual state
+
+            // Create virtual state - NO NEED to get values, only IDs!
             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
-              );
+              // 2. Physically slice the corresponding keys.
+              const slicedKeys = Array.isArray(arrayKeys)
+                ? arrayKeys.slice(range.startIndex, range.endIndex + 1)
+                : [];
 
+              // Use the same keying as getArrayData (empty string for root)
+              const arrayPath = path.length > 0 ? path.join('.') : 'root';
               return rebuildStateShape({
                 path,
                 componentId: componentId!,
-                meta: { ...meta, validIds: slicedIds },
+                meta: {
+                  ...meta,
+                  arrayViews: { [arrayPath]: slicedKeys },
+                  serverStateIsUpStream: true,
+                },
               });
-            }, [range.startIndex, range.endIndex, arrayKeys.length]);
+            }, [range.startIndex, range.endIndex, arrayKeys, meta]);
 
             return {
               virtualState,
@@ -2546,15 +2445,14 @@ function createProxyHandler<T>(
                 outer: {
                   ref: containerRef,
                   style: {
-                    overflowY: 'auto',
+                    overflowY: 'auto' as const,
                     height: '100%',
-                    position: 'relative',
+                    position: 'relative' as const,
                   },
                 },
                 inner: {
                   style: {
-                    height: `${totalHeight}px`,
-                    position: 'relative',
+                    position: 'relative' as const,
                   },
                 },
                 list: {
@@ -2583,150 +2481,84 @@ function createProxyHandler<T>(
         }
         if (prop === 'stateMap') {
           return (
-            callbackfn: (
-              setter: any,
-              index: number,
-
-              arraySetter: any
-            ) => void
+            callbackfn: (setter: any, index: number, arraySetter: any) => void
           ) => {
-            const [arrayKeys, setArrayKeys] = useState<any>(
-              meta?.validIds ??
-                getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                  ?.arrayKeys
+            // FIX: Use getArrayData to reliably get both the value and the keys of the current view.
+            const { value: shadowValue, keys: arrayKeys } = getArrayData(
+              stateKey,
+              path,
+              meta
             );
-            // 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');
+
+            if (!arrayKeys || !Array.isArray(shadowValue)) {
+              return []; // It's valid to map over an empty array.
             }
+
             const arraySetter = rebuildStateShape({
               path,
               componentId: componentId!,
               meta,
             });
 
-            return shadowValue.map((item, index) => {
-              const itemPath = arrayKeys[index]?.split('.').slice(1);
+            return shadowValue.map((_item, index) => {
+              const itemKey = arrayKeys[index];
+              if (!itemKey) return undefined;
+
+              // FIX: Construct the correct path to the item in the original store.
+              // The path is the array's path plus the specific item's unique key.
+              const itemPath = [...path, itemKey];
+
               const itemSetter = rebuildStateShape({
-                path: itemPath as any,
+                path: itemPath, // This now correctly points to the item in the shadow store.
                 componentId: componentId!,
                 meta,
               });
 
-              return callbackfn(
-                itemSetter,
-                index,
-
-                arraySetter
-              );
+              return callbackfn(itemSetter, index, 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 === '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;
-            }
-
-            // 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
-
-              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({
-                  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 currentState = getGlobalStore
-              .getState()
-              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
-            if (!Array.isArray(currentState)) return [];
-            const arrayKeys =
-              meta?.validIds ??
-              getGlobalStore.getState().getShadowMetadata(stateKey, path)
-                ?.arrayKeys;
+            const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
 
-            if (!arrayKeys) {
-              throw new Error('No array keys found for filtering.');
+            // ✅ FIX: Get keys from `getArrayData` which correctly resolves them from meta or the full list.
+            const { keys: currentViewIds, value: array } = getArrayData(
+              stateKey,
+              path,
+              meta
+            );
+
+            if (!Array.isArray(array)) {
+              throw new Error('stateFilter can only be used on arrays');
             }
 
-            const newValidIds: string[] = [];
-            const filteredArray = currentState.filter(
-              (val: any, index: number) => {
-                const didPass = callbackfn(val, index);
-                if (didPass) {
-                  newValidIds.push(arrayKeys[index]!);
-                  return true;
+            // Filter the array and collect the IDs of the items that pass
+            const filteredIds: string[] = [];
+            array.forEach((item, index) => {
+              if (callbackfn(item, index)) {
+                // currentViewIds[index] is the original ID before filtering
+                const id = currentViewIds[index];
+                if (id) {
+                  filteredIds.push(id);
                 }
-                return false;
               }
-            );
+            });
 
+            // The rest is the same...
             return rebuildStateShape({
               path,
               componentId: componentId!,
               meta: {
-                validIds: newValidIds,
+                ...meta,
+                arrayViews: {
+                  ...(meta?.arrayViews || {}),
+                  [arrayPathKey]: filteredIds,
+                },
                 transforms: [
                   ...(meta?.transforms || []),
-                  {
-                    type: 'filter',
-                    fn: callbackfn,
-                  },
+                  { type: 'filter', fn: callbackfn, path },
                 ],
               },
             });
@@ -2734,34 +2566,39 @@ function createProxyHandler<T>(
         }
         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) {
+            const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
+
+            // FIX: Use the more robust `getArrayData` which always correctly resolves the keys for a view.
+            const { value: currentArray, keys: currentViewIds } = getArrayData(
+              stateKey,
+              path,
+              meta
+            );
+
+            if (!Array.isArray(currentArray) || !currentViewIds) {
               throw new Error('No array keys found for sorting');
             }
-            const itemsWithIds = currentState.map((item, index) => ({
+
+            // ... (rest of the function is the same and now works)
+            const itemsWithIds = currentArray.map((item, index) => ({
               item,
-              key: arrayKeys[index],
+              key: currentViewIds[index],
             }));
-
-            itemsWithIds
-              .sort((a, b) => compareFn(a.item, b.item))
-              .filter(Boolean);
+            itemsWithIds.sort((a, b) => compareFn(a.item, b.item));
+            const sortedIds = itemsWithIds.map((i) => i.key as string);
 
             return rebuildStateShape({
               path,
               componentId: componentId!,
               meta: {
-                validIds: itemsWithIds.map((i) => i.key) as string[],
+                ...meta,
+                arrayViews: {
+                  ...(meta?.arrayViews || {}),
+                  [arrayPathKey]: sortedIds,
+                },
                 transforms: [
                   ...(meta?.transforms || []),
-                  { type: 'sort', fn: compareFn },
+                  { type: 'sort', fn: compareFn, path },
                 ],
               },
             });
@@ -2835,12 +2672,11 @@ function createProxyHandler<T>(
             }
 
             const streamId = uuidv4();
-            const currentMeta =
-              getGlobalStore.getState().getShadowMetadata(stateKey, path) || {};
+            const currentMeta = getShadowMetadata(stateKey, path) || {};
             const streams = currentMeta.streams || new Map();
             streams.set(streamId, { buffer, flushTimer });
 
-            getGlobalStore.getState().setShadowMetadata(stateKey, path, {
+            setShadowMetadata(stateKey, path, {
               ...currentMeta,
               streams,
             });
@@ -2882,55 +2718,42 @@ function createProxyHandler<T>(
             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 arrayPathKey = path.length > 0 ? path.join('.') : 'root';
 
-                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 || [],
-                    });
-                }
-
-                const freshValues = getGlobalStore
-                  .getState()
-                  .getShadowValue(stateKeyPathKey, freshValidIds);
+              const validIds = useMemo(() => {
+                return applyTransforms(stateKey, path, meta);
+              }, [
+                stateKey,
+                path.join('.'),
+                // Only recalculate if the underlying array keys or transforms change
+                getShadowMetadata(stateKey, path)?.arrayKeys,
+                meta?.transforms,
+              ]);
 
+              // Memoize the updated meta to prevent creating new objects on every render
+              const updatedMeta = useMemo(() => {
                 return {
-                  validIds: freshValidIds,
-                  arrayValues: freshValues || [],
+                  ...meta,
+                  arrayViews: {
+                    ...(meta?.arrayViews || {}),
+                    [arrayPathKey]: validIds,
+                  },
                 };
-              }, [cacheKey, updateTrigger]);
+              }, [meta, arrayPathKey, validIds]);
+
+              // Now use the updated meta when getting array data
+              const { value: arrayValues } = getArrayData(
+                stateKey,
+                path,
+                updatedMeta
+              );
 
               useEffect(() => {
                 const unsubscribe = getGlobalStore
                   .getState()
                   .subscribeToPath(stateKeyPathKey, (e) => {
-                    // A data change has occurred for the source array.
-
                     if (e.type === 'GET_SELECTED') {
                       return;
                     }
@@ -2952,8 +2775,11 @@ function createProxyHandler<T>(
 
                     if (
                       e.type === 'INSERT' ||
+                      e.type === 'INSERT_MANY' ||
                       e.type === 'REMOVE' ||
-                      e.type === 'CLEAR_SELECTION'
+                      e.type === 'CLEAR_SELECTION' ||
+                      (e.type === 'SERVER_STATE_UPDATE' &&
+                        !meta?.serverStateIsUpStream)
                     ) {
                       forceUpdate({});
                     }
@@ -2970,45 +2796,41 @@ function createProxyHandler<T>(
                 return null;
               }
 
+              // Continue using updatedMeta for the rest of your logic instead of meta
               const arraySetter = rebuildStateShape({
                 path,
                 componentId: componentId!,
-                meta: {
-                  ...meta,
-                  validIds: validIds,
-                },
+                meta: updatedMeta, // Use updated meta here
               });
 
-              return (
-                <>
-                  {arrayValues.map((item, localIndex) => {
-                    const itemKey = validIds[localIndex];
+              const returnValue = arrayValues.map((item, localIndex) => {
+                const itemKey = validIds[localIndex];
 
-                    if (!itemKey) {
-                      return null;
-                    }
+                if (!itemKey) {
+                  return null;
+                }
 
-                    let itemComponentId = componentIdsRef.current.get(itemKey);
-                    if (!itemComponentId) {
-                      itemComponentId = uuidv4();
-                      componentIdsRef.current.set(itemKey, itemComponentId);
-                    }
+                let itemComponentId = componentIdsRef.current.get(itemKey);
+                if (!itemComponentId) {
+                  itemComponentId = uuidv4();
+                  componentIdsRef.current.set(itemKey, itemComponentId);
+                }
 
-                    const itemPath = itemKey.split('.').slice(1);
-
-                    return createElement(MemoizedCogsItemWrapper, {
-                      key: itemKey,
-                      stateKey,
-                      itemComponentId,
-                      itemPath,
-                      localIndex,
-                      arraySetter,
-                      rebuildStateShape,
-                      renderFn: callbackfn,
-                    });
-                  })}
-                </>
-              );
+                const itemPath = [...path, itemKey];
+
+                return createElement(MemoizedCogsItemWrapper, {
+                  key: itemKey,
+                  stateKey,
+                  itemComponentId,
+                  itemPath,
+                  localIndex,
+                  arraySetter,
+                  rebuildStateShape,
+                  renderFn: callbackfn,
+                });
+              });
+
+              return <>{returnValue}</>;
             };
 
             return <StateListWrapper />;
@@ -3016,16 +2838,18 @@ function createProxyHandler<T>(
         }
         if (prop === 'stateFlattenOn') {
           return (fieldName: string) => {
+            // FIX: Get the definitive list of IDs for the current view from meta.arrayViews.
+            const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
+            const viewIds = meta?.arrayViews?.[arrayPathKey];
+
             const currentState = getGlobalStore
               .getState()
-              .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
-            if (!Array.isArray(currentState)) return []; // Guard clause
-            const arrayToMap = currentState as any[];
+              .getShadowValue(stateKey, path, viewIds);
+
+            if (!Array.isArray(currentState)) return [];
 
             stateVersion++;
-            const flattenedResults = arrayToMap.flatMap(
-              (val: any) => val[fieldName] ?? []
-            );
+
             return rebuildStateShape({
               path: [...path, '[*]', fieldName],
               componentId: componentId!,
@@ -3035,36 +2859,46 @@ function createProxyHandler<T>(
         }
         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];
+            const arrayPathKey = path.length > 0 ? path.join('.') : 'root';
+            const viewIds = meta?.arrayViews?.[arrayPathKey];
+
+            if (viewIds) {
+              const itemId = viewIds[index];
+              if (!itemId) return undefined;
+              return rebuildStateShape({
+                path: [...path, itemId],
+                componentId: componentId!,
+                meta,
+              });
+            }
+
+            // ✅ FIX: Get the metadata and use the `arrayKeys` property.
+            const shadowMeta = getShadowMetadata(stateKey, path);
+            if (!shadowMeta?.arrayKeys) return undefined;
+
+            const itemId = shadowMeta.arrayKeys[index];
             if (!itemId) return undefined;
-            const value = getGlobalStore
-              .getState()
-              .getShadowValue(itemId, meta?.validIds);
-            const state = rebuildStateShape({
-              path: itemId.split('.').slice(1) as string[],
+
+            return rebuildStateShape({
+              path: [...path, itemId],
               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()];
+            const { keys: currentViewIds } = getArrayData(stateKey, path, meta);
+            if (!currentViewIds || currentViewIds.length === 0) {
+              return undefined;
+            }
+            const lastItemKey = currentViewIds[currentViewIds.length - 1];
+
+            if (!lastItemKey) {
+              return undefined;
+            }
+            const newPath = [...path, lastItemKey];
+
             return rebuildStateShape({
               path: newPath,
               componentId: componentId!,
@@ -3078,11 +2912,6 @@ function createProxyHandler<T>(
             index?: number
           ) => {
             effectiveSetState(payload as any, path, { updateType: 'insert' });
-            return rebuildStateShape({
-              path,
-              componentId: componentId!,
-              meta,
-            });
           };
         }
         if (prop === 'uniqueInsert') {
@@ -3091,9 +2920,13 @@ function createProxyHandler<T>(
             fields?: (keyof InferArrayElement<T>)[],
             onMatch?: (existingItem: any) => any
           ) => {
-            const currentArray = getGlobalStore
-              .getState()
-              .getShadowValue(stateKey, path) as any[];
+            const { value: currentArray } = getScopedData(
+              stateKey,
+              path,
+              meta
+            ) as {
+              value: any[];
+            };
             const newValue = isFunction<T>(payload)
               ? payload(currentArray as any)
               : (payload as any);
@@ -3123,168 +2956,133 @@ function createProxyHandler<T>(
             }
           };
         }
-
         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 shadowMeta = getShadowMetadata(stateKey, path);
+            if (!shadowMeta?.arrayKeys || shadowMeta.arrayKeys.length === 0)
+              return;
 
             const indexToCut =
-              index == -1
-                ? validKeys.length - 1
+              index === -1
+                ? shadowMeta.arrayKeys.length - 1
                 : index !== undefined
                   ? index
-                  : validKeys.length - 1;
+                  : shadowMeta.arrayKeys.length - 1;
 
-            const fullIdToCut = validKeys[indexToCut];
-            if (!fullIdToCut) return; // Index out of bounds
+            const idToCut = shadowMeta.arrayKeys[indexToCut];
+            if (!idToCut) return;
 
-            const pathForCut = fullIdToCut.split('.').slice(1);
-            effectiveSetState(currentState, pathForCut, {
+            effectiveSetState(null, [...path, idToCut], {
               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 arrayKey = [stateKey, ...path].join('.');
 
-            const indexKeyToCut = getGlobalStore
+            const { keys: currentViewIds } = getArrayData(stateKey, path, meta);
+            if (!currentViewIds || currentViewIds.length === 0) {
+              return;
+            }
+            const selectedItemKey = getGlobalStore
               .getState()
-              .selectedIndicesMap.get(stateKeyPathKey);
+              .selectedIndicesMap.get(arrayKey);
 
-            let indexToCut = validKeys.findIndex(
-              (key) => key === indexKeyToCut
-            );
+            if (!selectedItemKey) {
+              return;
+            }
+            const selectedId = selectedItemKey.split('.').pop() as string;
 
-            const pathForCut = validKeys[
-              indexToCut == -1 ? validKeys.length - 1 : indexToCut
-            ]
-              ?.split('.')
-              .slice(1);
-            getGlobalStore
-              .getState()
-              .clearSelectedIndex({ arrayKey: stateKeyPathKey });
-            const parentPath = pathForCut?.slice(0, -1)!;
+            if (!(currentViewIds as any[]).includes(selectedId!)) {
+              return;
+            }
+            const pathForCut = selectedItemKey.split('.').slice(1);
+            getGlobalStore.getState().clearSelectedIndex({ arrayKey });
+
+            const parentPath = pathForCut.slice(0, -1);
             notifySelectionComponents(stateKey, parentPath);
-            effectiveSetState(currentState, pathForCut!, {
+
+            effectiveSetState(null, 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;
+            const {
+              isArray,
+              value: array,
+              keys,
+            } = getArrayData(stateKey, path, meta);
 
-            let keyToCut: string | null = null;
+            if (!isArray) return;
 
-            // 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' });
+            const found = findArrayItem(array, keys, (item) => item === value);
+            if (found) {
+              effectiveSetState(null, [...path, found.key], {
+                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;
+            const {
+              isArray,
+              value: array,
+              keys,
+            } = getArrayData(stateKey, path, meta);
 
-            if (!relevantKeys) return;
+            if (!isArray) return;
 
-            let keyToCut: string | null = null;
+            const found = findArrayItem(array, keys, (item) => item === value);
 
-            // 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);
-              effectiveSetState(value as any, itemPath, {
+            if (found) {
+              const pathForItem = [...path, found.key];
+
+              effectiveSetState(null, pathForItem, {
                 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;
+          return (searchKey: string, searchValue: any) => {
+            const { isArray, value, keys } = getArrayData(stateKey, path, meta);
 
-            if (!arrayKeys) {
-              throw new Error('No array keys found for sorting');
+            if (!isArray) {
+              throw new Error('findWith can only be used on arrays');
             }
 
-            let value = null;
-            let foundPath: string[] = [];
+            const found = findArrayItem(
+              value,
+              keys,
+              (item) => item?.[searchKey] === searchValue
+            );
 
-            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;
-              }
+            if (found) {
+              return rebuildStateShape({
+                path: [...path, found.key],
+                componentId: componentId!,
+                meta,
+              });
             }
 
             return rebuildStateShape({
-              path: foundPath,
+              path: [...path, `not_found_${uuidv4()}`],
               componentId: componentId!,
               meta,
             });
           };
         }
-
         if (prop === 'cutThis') {
-          let shadowValue = getGlobalStore
-            .getState()
-            .getShadowValue(path.join('.'));
-
+          const { value: shadowValue } = getScopedData(stateKey, path, meta);
+          const parentPath = path.slice(0, -1);
+          notifySelectionComponents(stateKey, parentPath);
           return () => {
             effectiveSetState(shadowValue, path, { updateType: 'cut' });
           };
@@ -3293,16 +3091,8 @@ function createProxyHandler<T>(
         if (prop === 'get') {
           return () => {
             registerComponentDependency(stateKey, componentId, path);
-            return getGlobalStore
-              .getState()
-              .getShadowValue(stateKeyPathKey, meta?.validIds);
-          };
-        }
-        if (prop === 'getState') {
-          return () => {
-            return getGlobalStore
-              .getState()
-              .getShadowValue(stateKeyPathKey, meta?.validIds);
+            const { value } = getScopedData(stateKey, path, meta);
+            return value;
           };
         }
 
@@ -3315,7 +3105,6 @@ function createProxyHandler<T>(
               _meta: meta,
             });
         }
-        // in CogsState.ts -> createProxyHandler -> handler -> get
 
         if (prop === '$get') {
           return () =>
@@ -3323,26 +3112,18 @@ function createProxyHandler<T>(
         }
         if (prop === 'lastSynced') {
           const syncKey = `${stateKey}:${path.join('.')}`;
-          return getGlobalStore.getState().getSyncInfo(syncKey);
+          return getSyncInfo(syncKey);
         }
         if (prop == 'getLocalStorage') {
           return (key: string) =>
             loadFromLocalStorage(sessionId + '-' + stateKey + '-' + key);
         }
-
         if (prop === 'isSelected') {
-          const parentPath = [stateKey, ...path].slice(0, -1);
-          notifySelectionComponents(stateKey, path, undefined);
-          if (
-            Array.isArray(
-              getGlobalStore
-                .getState()
-                .getShadowValue(parentPath.join('.'), meta?.validIds)
-            )
-          ) {
-            const itemId = path[path.length - 1];
-            const fullParentKey = parentPath.join('.');
+          const parentPathArray = path.slice(0, -1);
+          const parentMeta = getShadowMetadata(stateKey, parentPathArray);
 
+          if (parentMeta?.arrayKeys) {
+            const fullParentKey = stateKey + '.' + parentPathArray.join('.');
             const selectedItemKey = getGlobalStore
               .getState()
               .selectedIndicesMap.get(fullParentKey);
@@ -3354,7 +3135,6 @@ function createProxyHandler<T>(
           return undefined;
         }
 
-        // Then use it in both:
         if (prop === 'setSelected') {
           return (value: boolean) => {
             const parentPath = path.slice(0, -1);
@@ -3394,6 +3174,7 @@ function createProxyHandler<T>(
                 .getState()
                 .setSelectedIndex(fullParentKey, fullItemKey);
             }
+            notifySelectionComponents(stateKey, parentPath);
           };
         }
         if (prop === '_componentId') {
@@ -3402,11 +3183,6 @@ function createProxyHandler<T>(
         if (path.length == 0) {
           if (prop === 'addZodValidation') {
             return (zodErrors: any[]) => {
-              const init = getGlobalStore
-                .getState()
-                .getInitialOptions(stateKey)?.validation;
-
-              // For each error, set shadow metadata
               zodErrors.forEach((error) => {
                 const currentMeta =
                   getGlobalStore
@@ -3418,42 +3194,38 @@ function createProxyHandler<T>(
                   .setShadowMetadata(stateKey, error.path, {
                     ...currentMeta,
                     validation: {
-                      status: 'VALIDATION_FAILED',
-                      message: error.message,
+                      status: 'INVALID',
+                      errors: [
+                        {
+                          source: 'client',
+                          message: error.message,
+                          severity: 'error',
+                          code: error.code,
+                        },
+                      ],
+                      lastValidated: Date.now(),
                       validatedValue: undefined,
                     },
                   });
-                getGlobalStore.getState().notifyPathSubscribers(error.path, {
-                  type: 'VALIDATION_FAILED',
-                  message: error.message,
-                  validatedValue: undefined,
-                });
               });
             };
           }
           if (prop === 'clearZodValidation') {
             return (path?: string[]) => {
-              // Clear specific paths
               if (!path) {
                 throw new Error('clearZodValidation requires a path');
-                return;
               }
-              const currentMeta =
-                getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
-                {};
-
-              if (currentMeta.validation) {
-                getGlobalStore.getState().setShadowMetadata(stateKey, path, {
-                  ...currentMeta,
-                  validation: undefined,
-                });
 
-                getGlobalStore
-                  .getState()
-                  .notifyPathSubscribers([stateKey, ...path].join('.'), {
-                    type: 'VALIDATION_CLEARED',
-                  });
-              }
+              const currentMeta = getShadowMetadata(stateKey, path) || {};
+
+              setShadowMetadata(stateKey, path, {
+                ...currentMeta,
+                validation: {
+                  status: 'NOT_VALIDATED',
+                  errors: [],
+                  lastValidated: Date.now(),
+                },
+              });
             };
           }
           if (prop === 'applyJsonPatch') {
@@ -3484,6 +3256,7 @@ function createProxyHandler<T>(
                       value: any;
                     };
                     store.updateShadowAtPath(stateKey, relativePath, value);
+
                     store.markAsDirty(stateKey, relativePath, { bubble: true });
 
                     // Bubble up - notify components at this path and all parent paths
@@ -3548,9 +3321,7 @@ function createProxyHandler<T>(
           }
 
           if (prop === 'getComponents')
-            return () =>
-              getGlobalStore.getState().getShadowMetadata(stateKey, [])
-                ?.components;
+            return () => getShadowMetadata(stateKey, [])?.components;
           if (prop === 'getAllFormRefs')
             return () =>
               formRefStore.getState().getFormRefsByStateKey(stateKey);
@@ -3582,63 +3353,8 @@ function createProxyHandler<T>(
         if (prop === '_path') return path;
         if (prop === 'update') {
           return (payload: UpdateArg<T>) => {
-            // 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 {
-              effectiveSetState(payload as any, path, { updateType: 'update' });
-            }
+            console.log('udpating', payload, path);
+            effectiveSetState(payload as any, path, { updateType: 'update' });
 
             return {
               synced: () => {
@@ -3646,15 +3362,17 @@ function createProxyHandler<T>(
                   .getState()
                   .getShadowMetadata(stateKey, path);
 
-                getGlobalStore.getState().setShadowMetadata(stateKey, path, {
+                // Update the metadata for this specific path
+                setShadowMetadata(stateKey, path, {
                   ...shadowMeta,
                   isDirty: false,
                   stateSource: 'server',
                   lastServerSync: Date.now(),
                 });
 
+                // Notify any components that might be subscribed to the sync status
                 const fullPath = [stateKey, ...path].join('.');
-                getGlobalStore.getState().notifyPathSubscribers(fullPath, {
+                notifyPathSubscribers(fullPath, {
                   type: 'SYNC_STATUS_CHANGE',
                   isDirty: false,
                 });
@@ -3662,11 +3380,12 @@ function createProxyHandler<T>(
             };
           };
         }
-
         if (prop === 'toggle') {
-          const currentValueAtPath = getGlobalStore
-            .getState()
-            .getShadowValue([stateKey, ...path].join('.'), meta?.validIds);
+          const { value: currentValueAtPath } = getScopedData(
+            stateKey,
+            path,
+            meta
+          );
 
           if (typeof currentValueAtPath != 'boolean') {
             throw new Error('toggle() can only be used on boolean values');
@@ -3703,18 +3422,14 @@ function createProxyHandler<T>(
       },
     };
 
-    const proxyInstance = new Proxy(baseFunction, handler);
+    const proxyInstance = new Proxy({}, handler);
     proxyCache.set(cacheKey, proxyInstance);
 
     return proxyInstance;
   }
 
-  const baseObj = {
+  const rootLevelMethods = {
     revertToInitialState: (obj?: { validationKey?: string }) => {
-      const init = getGlobalStore
-        .getState()
-        .getInitialOptions(stateKey)?.validation;
-
       const shadowMeta = getGlobalStore
         .getState()
         .getShadowMetadata(stateKey, []);
@@ -3730,10 +3445,10 @@ function createProxyHandler<T>(
       const initialState =
         getGlobalStore.getState().initialStateGlobal[stateKey];
 
-      getGlobalStore.getState().clearSelectedIndexesForState(stateKey);
+      clearSelectedIndexesForState(stateKey);
 
       stateVersion++;
-      getGlobalStore.getState().initializeShadowState(stateKey, initialState);
+      initializeShadowState(stateKey, initialState);
       rebuildStateShape({
         path: [],
         componentId: componentId!,
@@ -3783,7 +3498,8 @@ function createProxyHandler<T>(
       }
       startTransition(() => {
         updateInitialStateGlobal(stateKey, newState);
-        getGlobalStore.getState().initializeShadowState(stateKey, newState);
+        initializeShadowState(stateKey, newState);
+        // initializeShadowStateNEW(stateKey, newState);
 
         const stateEntry = getGlobalStore
           .getState()
@@ -3801,6 +3517,7 @@ function createProxyHandler<T>(
       };
     },
   };
+
   const returnShape = rebuildStateShape({
     componentId,
     path: [],
@@ -3819,153 +3536,6 @@ export function $cogsSignal(proxy: {
   return createElement(SignalRenderer, { proxy });
 }
 
-function SignalMapRenderer({
-  proxy,
-  rebuildStateShape,
-}: {
-  proxy: {
-    _stateKey: string;
-    _path: string[];
-    _meta?: MetaData;
-    _mapFn: (
-      setter: any,
-      index: number,
-
-      arraySetter: any
-    ) => ReactNode;
-  };
-  rebuildStateShape: (stuff: {
-    currentState: any;
-    path: string[];
-    componentId: string;
-    meta?: MetaData;
-  }) => any;
-}): JSX.Element | null {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const instanceIdRef = useRef<string>(`map-${crypto.randomUUID()}`);
-  const isSetupRef = useRef(false);
-  const rootsMapRef = useRef<Map<string, any>>(new Map());
-
-  // Setup effect - store the map function in shadow metadata
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || isSetupRef.current) return;
-
-    const timeoutId = setTimeout(() => {
-      // Store map wrapper in metadata
-      const currentMeta =
-        getGlobalStore
-          .getState()
-          .getShadowMetadata(proxy._stateKey, proxy._path) || {};
-
-      const mapWrappers = currentMeta.mapWrappers || [];
-      mapWrappers.push({
-        instanceId: instanceIdRef.current,
-        mapFn: proxy._mapFn,
-        containerRef: container,
-        rebuildStateShape: rebuildStateShape,
-        path: proxy._path,
-        componentId: instanceIdRef.current,
-        meta: proxy._meta,
-      });
-
-      getGlobalStore
-        .getState()
-        .setShadowMetadata(proxy._stateKey, proxy._path, {
-          ...currentMeta,
-          mapWrappers,
-        });
-
-      isSetupRef.current = true;
-
-      // Initial render
-      renderInitialItems();
-    }, 0);
-
-    // Cleanup
-    return () => {
-      clearTimeout(timeoutId);
-      if (instanceIdRef.current) {
-        const currentMeta =
-          getGlobalStore
-            .getState()
-            .getShadowMetadata(proxy._stateKey, proxy._path) || {};
-        if (currentMeta.mapWrappers) {
-          currentMeta.mapWrappers = currentMeta.mapWrappers.filter(
-            (w) => w.instanceId !== instanceIdRef.current
-          );
-          getGlobalStore
-            .getState()
-            .setShadowMetadata(proxy._stateKey, proxy._path, currentMeta);
-        }
-      }
-      rootsMapRef.current.forEach((root) => root.unmount());
-    };
-  }, []);
-
-  const renderInitialItems = () => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const value = getGlobalStore
-      .getState()
-      .getShadowValue(
-        [proxy._stateKey, ...proxy._path].join('.'),
-        proxy._meta?.validIds
-      ) as any[];
-
-    if (!Array.isArray(value)) return;
-
-    // --- BUG FIX IS HERE ---
-    // Prioritize the filtered IDs from the meta object, just like the regular `stateMap`.
-    // This ensures the keys match the filtered data.
-    const arrayKeys =
-      proxy._meta?.validIds ??
-      getGlobalStore.getState().getShadowMetadata(proxy._stateKey, proxy._path)
-        ?.arrayKeys ??
-      [];
-    // --- END OF FIX ---
-
-    const arraySetter = rebuildStateShape({
-      currentState: value,
-      path: proxy._path,
-      componentId: instanceIdRef.current,
-      meta: proxy._meta,
-    });
-
-    value.forEach((item, index) => {
-      const itemKey = arrayKeys[index]!; // Now this will be the correct key for the filtered item
-      if (!itemKey) return; // Safeguard if there's a mismatch
-
-      const itemComponentId = uuidv4();
-      const itemElement = document.createElement('div');
-
-      itemElement.setAttribute('data-item-path', itemKey);
-      container.appendChild(itemElement);
-
-      const root = createRoot(itemElement);
-      rootsMapRef.current.set(itemKey, root);
-
-      const itemPath = itemKey.split('.').slice(1) as string[];
-
-      // Render CogsItemWrapper instead of direct render
-      root.render(
-        createElement(MemoizedCogsItemWrapper, {
-          stateKey: proxy._stateKey,
-          itemComponentId: itemComponentId,
-          itemPath: itemPath,
-          localIndex: index,
-          arraySetter: arraySetter,
-          rebuildStateShape: rebuildStateShape,
-          renderFn: proxy._mapFn,
-        })
-      );
-    });
-  };
-
-  return <div ref={containerRef} data-map-container={instanceIdRef.current} />;
-}
-
 function SignalRenderer({
   proxy,
 }: {
@@ -3980,12 +3550,11 @@ function SignalRenderer({
   const instanceIdRef = useRef<string | null>(null);
   const isSetupRef = useRef(false);
   const signalId = `${proxy._stateKey}-${proxy._path.join('.')}`;
-  const value = getGlobalStore
-    .getState()
-    .getShadowValue(
-      [proxy._stateKey, ...proxy._path].join('.'),
-      proxy._meta?.validIds
-    );
+
+  const arrayPathKey = proxy._path.length > 0 ? proxy._path.join('.') : 'root';
+  const viewIds = proxy._meta?.arrayViews?.[arrayPathKey];
+
+  const value = getShadowValue(proxy._stateKey, proxy._path, viewIds);
 
   // Setup effect - runs only once
   useEffect(() => {
@@ -4075,473 +3644,3 @@ function SignalRenderer({
     'data-signal-id': signalId,
   });
 }
-
-const MemoizedCogsItemWrapper = memo(
-  ListItemWrapper,
-  (prevProps, nextProps) => {
-    // Re-render if any of these change:
-    return (
-      prevProps.itemPath.join('.') === nextProps.itemPath.join('.') &&
-      prevProps.stateKey === nextProps.stateKey &&
-      prevProps.itemComponentId === nextProps.itemComponentId &&
-      prevProps.localIndex === nextProps.localIndex
-    );
-  }
-);
-
-const useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {
-  const [loaded, setLoaded] = useState(false);
-
-  useLayoutEffect(() => {
-    if (!ref.current) {
-      setLoaded(true);
-      return;
-    }
-
-    const images = Array.from(ref.current.querySelectorAll('img'));
-
-    // If there are no images, we are "loaded" immediately.
-    if (images.length === 0) {
-      setLoaded(true);
-      return;
-    }
-
-    let loadedCount = 0;
-    const handleImageLoad = () => {
-      loadedCount++;
-      if (loadedCount === images.length) {
-        setLoaded(true);
-      }
-    };
-
-    images.forEach((image) => {
-      if (image.complete) {
-        handleImageLoad();
-      } else {
-        image.addEventListener('load', handleImageLoad);
-        image.addEventListener('error', handleImageLoad);
-      }
-    });
-
-    return () => {
-      images.forEach((image) => {
-        image.removeEventListener('load', handleImageLoad);
-        image.removeEventListener('error', handleImageLoad);
-      });
-    };
-  }, [ref.current]);
-
-  return loaded;
-};
-
-function ListItemWrapper({
-  stateKey,
-  itemComponentId,
-  itemPath,
-  localIndex,
-  arraySetter,
-  rebuildStateShape,
-  renderFn,
-}: {
-  stateKey: string;
-  itemComponentId: string;
-  itemPath: string[];
-  localIndex: number;
-  arraySetter: any;
-
-  rebuildStateShape: (options: {
-    currentState: any;
-    path: string[];
-    componentId: string;
-    meta?: any;
-  }) => any;
-  renderFn: (
-    setter: any,
-    index: number,
-
-    arraySetter: any
-  ) => React.ReactNode;
-}) {
-  const [, forceUpdate] = useState({});
-  const { ref: inViewRef, inView } = useInView();
-  const elementRef = useRef<HTMLDivElement | null>(null);
-
-  const imagesLoaded = useImageLoaded(elementRef);
-  const hasReportedInitialHeight = useRef(false);
-  const fullKey = [stateKey, ...itemPath].join('.');
-  useRegisterComponent(stateKey, itemComponentId, forceUpdate);
-
-  const setRefs = useCallback(
-    (element: HTMLDivElement | null) => {
-      elementRef.current = element;
-      inViewRef(element); // This is the ref from useInView
-    },
-    [inViewRef]
-  );
-
-  useEffect(() => {
-    getGlobalStore.getState().subscribeToPath(fullKey, (e) => {
-      forceUpdate({});
-    });
-  }, []);
-  useEffect(() => {
-    if (!inView || !imagesLoaded || hasReportedInitialHeight.current) {
-      return;
-    }
-
-    const element = elementRef.current;
-    if (element && element.offsetHeight > 0) {
-      hasReportedInitialHeight.current = true;
-      const newHeight = element.offsetHeight;
-
-      getGlobalStore.getState().setShadowMetadata(stateKey, itemPath, {
-        virtualizer: {
-          itemHeight: newHeight,
-          domRef: element,
-        },
-      });
-
-      const arrayPath = itemPath.slice(0, -1);
-      const arrayPathKey = [stateKey, ...arrayPath].join('.');
-      getGlobalStore.getState().notifyPathSubscribers(arrayPathKey, {
-        type: 'ITEMHEIGHT',
-        itemKey: itemPath.join('.'),
-
-        ref: elementRef.current,
-      });
-    }
-  }, [inView, imagesLoaded, stateKey, itemPath]);
-
-  const fullItemPath = [stateKey, ...itemPath].join('.');
-  const itemValue = getGlobalStore.getState().getShadowValue(fullItemPath);
-
-  if (itemValue === undefined) {
-    return null;
-  }
-
-  const itemSetter = rebuildStateShape({
-    currentState: itemValue,
-    path: itemPath,
-    componentId: itemComponentId,
-  });
-  const children = renderFn(itemSetter, localIndex, arraySetter);
-
-  return <div ref={setRefs}>{children}</div>;
-}
-
-function FormElementWrapper({
-  stateKey,
-  path,
-  rebuildStateShape,
-  renderFn,
-  formOpts,
-  setState,
-}: {
-  stateKey: string;
-  path: string[];
-  rebuildStateShape: (options: {
-    currentState: any;
-    path: string[];
-    componentId: string;
-    meta?: any;
-  }) => any;
-  renderFn: (params: FormElementParams<any>) => React.ReactNode;
-  formOpts?: FormOptsType;
-  setState: any;
-}) {
-  const [componentId] = useState(() => uuidv4());
-  const [, forceUpdate] = useState({});
-
-  const stateKeyPathKey = [stateKey, ...path].join('.');
-  useRegisterComponent(stateKey, componentId, forceUpdate);
-  const globalStateValue = getGlobalStore
-    .getState()
-    .getShadowValue(stateKeyPathKey);
-  const [localValue, setLocalValue] = useState<any>(globalStateValue);
-  const isCurrentlyDebouncing = useRef(false);
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (
-      !isCurrentlyDebouncing.current &&
-      !isDeepEqual(globalStateValue, localValue)
-    ) {
-      setLocalValue(globalStateValue);
-    }
-  }, [globalStateValue]);
-
-  useEffect(() => {
-    const unsubscribe = getGlobalStore
-      .getState()
-      .subscribeToPath(stateKeyPathKey, (newValue) => {
-        if (!isCurrentlyDebouncing.current && localValue !== newValue) {
-          forceUpdate({});
-        }
-      });
-    return () => {
-      unsubscribe();
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-        isCurrentlyDebouncing.current = false;
-      }
-    };
-  }, []);
-
-  const debouncedUpdate = useCallback(
-    (newValue: any) => {
-      const currentType = typeof globalStateValue;
-      if (currentType === 'number' && typeof newValue === 'string') {
-        newValue = newValue === '' ? 0 : Number(newValue);
-      }
-      setLocalValue(newValue);
-      isCurrentlyDebouncing.current = true;
-
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-
-      const debounceTime = formOpts?.debounceTime ?? 200;
-
-      debounceTimeoutRef.current = setTimeout(() => {
-        isCurrentlyDebouncing.current = false;
-
-        // Update state
-        setState(newValue, path, { updateType: 'update' });
-
-        // Perform LIVE validation (gentle)
-        const { getInitialOptions, setShadowMetadata, getShadowMetadata } =
-          getGlobalStore.getState();
-        const validationOptions = getInitialOptions(stateKey)?.validation;
-        const zodSchema =
-          validationOptions?.zodSchemaV4 || validationOptions?.zodSchemaV3;
-
-        if (zodSchema) {
-          const fullState = getGlobalStore.getState().getShadowValue(stateKey);
-          const result = zodSchema.safeParse(fullState);
-
-          const currentMeta = getShadowMetadata(stateKey, path) || {};
-
-          if (!result.success) {
-            const errors =
-              'issues' in result.error
-                ? result.error.issues
-                : (result.error as any).errors;
-            const pathErrors = errors.filter(
-              (error: any) =>
-                JSON.stringify(error.path) === JSON.stringify(path)
-            );
-
-            if (pathErrors.length > 0) {
-              setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                validation: {
-                  status: 'INVALID_LIVE',
-                  message: pathErrors[0]?.message,
-                  validatedValue: newValue,
-                },
-              });
-            } else {
-              // This field has no errors - clear validation
-              setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                validation: {
-                  status: 'VALID_LIVE',
-                  validatedValue: newValue,
-                  message: undefined,
-                },
-              });
-            }
-          } else {
-            // Validation passed - clear any existing errors
-            setShadowMetadata(stateKey, path, {
-              ...currentMeta,
-              validation: {
-                status: 'VALID_LIVE',
-                validatedValue: newValue,
-                message: undefined,
-              },
-            });
-          }
-        }
-      }, debounceTime);
-      forceUpdate({});
-    },
-    [setState, path, formOpts?.debounceTime, stateKey]
-  );
-
-  // --- NEW onBlur HANDLER ---
-  // This replaces the old commented-out method with a modern approach.
-  const handleBlur = useCallback(async () => {
-    console.log('handleBlur triggered');
-
-    // Commit any pending changes
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-      debounceTimeoutRef.current = null;
-      isCurrentlyDebouncing.current = false;
-      setState(localValue, path, { updateType: 'update' });
-    }
-
-    const { getInitialOptions } = getGlobalStore.getState();
-    const validationOptions = getInitialOptions(stateKey)?.validation;
-    const zodSchema =
-      validationOptions?.zodSchemaV4 || validationOptions?.zodSchemaV3;
-
-    if (!zodSchema) return;
-
-    // Get the full path including stateKey
-
-    // Update validation state to "validating"
-    const currentMeta = getGlobalStore
-      .getState()
-      .getShadowMetadata(stateKey, path);
-    getGlobalStore.getState().setShadowMetadata(stateKey, path, {
-      ...currentMeta,
-      validation: {
-        status: 'DIRTY',
-        validatedValue: localValue,
-      },
-    });
-
-    // Validate full state
-    const fullState = getGlobalStore.getState().getShadowValue(stateKey);
-    const result = zodSchema.safeParse(fullState);
-    console.log('result ', result);
-    if (!result.success) {
-      const errors =
-        'issues' in result.error
-          ? result.error.issues
-          : (result.error as any).errors;
-
-      console.log('All validation errors:', errors);
-      console.log('Current blur path:', path);
-
-      // Find errors for this specific path
-      const pathErrors = errors.filter((error: any) => {
-        console.log('Processing error:', error);
-
-        // For array paths, we need to translate indices to ULIDs
-        if (path.some((p) => p.startsWith('id:'))) {
-          console.log('Detected array path with ULID');
-
-          // This is an array item path like ["id:xyz", "name"]
-          const parentPath = path[0]!.startsWith('id:')
-            ? []
-            : path.slice(0, -1);
-
-          console.log('Parent path:', parentPath);
-
-          const arrayMeta = getGlobalStore
-            .getState()
-            .getShadowMetadata(stateKey, parentPath);
-
-          console.log('Array metadata:', arrayMeta);
-
-          if (arrayMeta?.arrayKeys) {
-            const itemKey = [stateKey, ...path.slice(0, -1)].join('.');
-            const itemIndex = arrayMeta.arrayKeys.indexOf(itemKey);
-
-            console.log('Item key:', itemKey, 'Index:', itemIndex);
-
-            // Compare with Zod path
-            const zodPath = [...parentPath, itemIndex, ...path.slice(-1)];
-            const match =
-              JSON.stringify(error.path) === JSON.stringify(zodPath);
-
-            console.log('Zod path comparison:', {
-              zodPath,
-              errorPath: error.path,
-              match,
-            });
-            return match;
-          }
-        }
-
-        const directMatch = JSON.stringify(error.path) === JSON.stringify(path);
-        console.log('Direct path comparison:', {
-          errorPath: error.path,
-          currentPath: path,
-          match: directMatch,
-        });
-        return directMatch;
-      });
-
-      console.log('Filtered path errors:', pathErrors);
-      // Update shadow metadata with validation result
-      getGlobalStore.getState().setShadowMetadata(stateKey, path, {
-        ...currentMeta,
-        validation: {
-          status: 'VALIDATION_FAILED',
-          message: pathErrors[0]?.message,
-          validatedValue: localValue,
-        },
-      });
-    } else {
-      // Validation passed
-      getGlobalStore.getState().setShadowMetadata(stateKey, path, {
-        ...currentMeta,
-        validation: {
-          status: 'VALID_PENDING_SYNC',
-          validatedValue: localValue,
-        },
-      });
-    }
-    forceUpdate({});
-  }, [stateKey, path, localValue, setState]);
-
-  const baseState = rebuildStateShape({
-    currentState: globalStateValue,
-    path: path,
-    componentId: componentId,
-  });
-
-  const stateWithInputProps = new Proxy(baseState, {
-    get(target, prop) {
-      if (prop === 'inputProps') {
-        return {
-          value: localValue ?? '',
-          onChange: (e: any) => {
-            debouncedUpdate(e.target.value);
-          },
-          // 5. Wire the new onBlur handler to the input props.
-          onBlur: handleBlur,
-          ref: formRefStore
-            .getState()
-            .getFormRef(stateKey + '.' + path.join('.')),
-        };
-      }
-
-      return target[prop];
-    },
-  });
-
-  return (
-    <ValidationWrapper formOpts={formOpts} path={path} stateKey={stateKey}>
-      {renderFn(stateWithInputProps)}
-    </ValidationWrapper>
-  );
-}
-function useRegisterComponent(
-  stateKey: string,
-  componentId: string,
-  forceUpdate: (o: object) => void
-) {
-  const fullComponentId = `${stateKey}////${componentId}`;
-
-  useLayoutEffect(() => {
-    const { registerComponent, unregisterComponent } =
-      getGlobalStore.getState();
-
-    // Call the safe, centralized function to register
-    registerComponent(stateKey, fullComponentId, {
-      forceUpdate: () => forceUpdate({}),
-      paths: new Set(),
-      reactiveType: ['component'],
-    });
-
-    // The cleanup now calls the safe, centralized unregister function
-    return () => {
-      unregisterComponent(stateKey, fullComponentId);
-    };
-  }, [stateKey, fullComponentId]); // Dependencies are stable and correct
-}