cogsbox-state 0.5.464 → 0.5.466

package/src/store.ts

@@ -3,16 +3,11 @@ import { ulid } from 'ulid';
 import type {
   OptionsType,
   ReactivityType,
-  StateKeys,
   SyncInfo,
   UpdateTypeDetail,
 } from './CogsState.js';
 
-import { startTransition, type ReactNode } from 'react';
-
-type StateUpdater<StateValue> =
-  | StateValue
-  | ((prevValue: StateValue) => StateValue);
+import { type ReactNode } from 'react';
 
 export type FreshValuesObject = {
   pathsToValues?: string[];
@@ -21,9 +16,6 @@ export type FreshValuesObject = {
   timeStamp: number;
 };
 
-type SyncLogType = {
-  timeStamp: number;
-};
 type StateValue = any;
 
 export type TrieNode = {
@@ -36,7 +28,6 @@ export type FormRefStoreState = {
   registerFormRef: (id: string, ref: React.RefObject<any>) => void;
   getFormRef: (id: string) => React.RefObject<any> | undefined;
   removeFormRef: (id: string) => void;
-  // New method to get all refs for a stateKey
   getFormRefsByStateKey: (
     stateKey: string
   ) => Map<string, React.RefObject<any>>;
@@ -61,7 +52,6 @@ export const formRefStore = create<FormRefStoreState>((set, get) => ({
       return { formRefs: newRefs };
     }),
 
-  // Get all refs that start with the stateKey prefix
   getFormRefsByStateKey: (stateKey) => {
     const allRefs = get().formRefs;
     const stateKeyPrefix = stateKey + '.';
@@ -89,16 +79,34 @@ export type ComponentsType = {
     }
   >;
 };
+
+export type ValidationStatus =
+  | 'NOT_VALIDATED'
+  | 'VALIDATING'
+  | 'VALID'
+  | 'INVALID';
+
+export type ValidationError = {
+  source: 'client' | 'sync_engine' | 'api';
+  message: string;
+  severity: 'warning' | 'error';
+  code?: string;
+};
+
+export type ValidationState = {
+  status: ValidationStatus;
+  errors: ValidationError[];
+  lastValidated?: number;
+  validatedValue?: any;
+};
+
 export type ShadowMetadata = {
   id?: string;
-
   stateSource?: 'default' | 'server' | 'localStorage';
   lastServerSync?: number;
   isDirty?: boolean;
   baseServerState?: any;
-
   arrayKeys?: string[];
-
   fields?: Record<string, any>;
   virtualizer?: {
     itemHeight?: number;
@@ -106,14 +114,12 @@ export type ShadowMetadata = {
   };
   syncInfo?: { status: string };
   validation?: ValidationState;
+  features?: {
+    syncEnabled: boolean;
+    validationEnabled: boolean;
+    localStorageEnabled: boolean;
+  };
   lastUpdated?: number;
-  value?: any;
-  classSignals?: Array<{
-    id: string;
-    effect: string;
-    lastClasses: string;
-    deps: any[];
-  }>;
   signals?: Array<{
     instanceId: string;
     parentId: string;
@@ -125,12 +131,7 @@ export type ShadowMetadata = {
     path: string[];
     componentId: string;
     meta?: any;
-    mapFn: (
-      setter: any,
-      index: number,
-
-      arraySetter: any
-    ) => ReactNode;
+    mapFn: (setter: any, index: number, arraySetter: any) => ReactNode;
     containerRef: HTMLDivElement | null;
     rebuildStateShape: any;
   }>;
@@ -152,36 +153,55 @@ export type ShadowMetadata = {
   >;
 } & ComponentsType;
 
-export type ValidationStatus =
-  | 'PRISTINE' // Untouched, matches initial state.
-  | 'DIRTY' // Changed, but no validation run yet.
-  | 'VALID_LIVE' // Valid while typing.
-  | 'INVALID_LIVE' // Gentle error during typing.
-  | 'VALIDATION_FAILED' // Hard error on blur/submit.
-  | 'VALID_PENDING_SYNC' // Passed validation, ready for sync.
-  | 'SYNCING' // Actively being sent to the server.
-  | 'SYNCED' // Server confirmed success.
-  | 'SYNC_FAILED'; // Server rejected the data.
-
-export type ValidationState = {
-  status: ValidationStatus;
-  message?: string;
-  lastValidated?: number;
-  validatedValue?: any;
+type ShadowNode = {
+  value?: any;
+  _meta?: ShadowMetadata;
+  [key: string]: any;
 };
-export type CogsEvent =
-  | { type: 'INSERT'; path: string; itemKey: string; index: number }
-  | { type: 'REMOVE'; path: string; itemKey: string }
-  | { type: 'UPDATE'; path: string; newValue: any }
-  | { type: 'ITEMHEIGHT'; itemKey: string; height: number }
-  | { type: 'RELOAD'; path: string };
-export type CogsGlobalState = {
-  updateQueue: Set<() => void>;
-  isFlushScheduled: boolean;
 
-  flushUpdates: () => void;
+export type CogsGlobalState = {
+  // NEW shadow store
+  shadowStateStore: Map<string, ShadowNode>;
+  setTransformCache: (
+    key: string,
+    path: string[],
+    cacheKey: string,
+    cacheData: any
+  ) => void;
+  initializeShadowState: (key: string, initialState: any) => void;
+  getShadowNode: (key: string, path: string[]) => ShadowNode | undefined;
+  getShadowMetadata: (
+    key: string,
+    path: string[]
+  ) => ShadowMetadata | undefined;
 
-  // --- Shadow State and Subscription System ---
+  setShadowMetadata: (key: string, path: string[], metadata: any) => void;
+  getShadowValue: (
+    key: string,
+    path: string[],
+    validArrayIds?: string[],
+    log?: boolean
+  ) => any;
+  updateShadowAtPath: (key: string, path: string[], newValue: any) => void;
+  insertManyShadowArrayElements: (
+    key: string,
+    arrayPath: string[],
+    newItems: any[],
+    index?: number
+  ) => void;
+  addItemsToArrayNode: (
+    key: string,
+    arrayPath: string[],
+    newItems: any,
+    newKeys: string[]
+  ) => void;
+  insertShadowArrayElement: (
+    key: string,
+    arrayPath: string[],
+    newItem: any,
+    index?: number
+  ) => void;
+  removeShadowArrayElement: (key: string, itemPath: string[]) => void;
   registerComponent: (
     stateKey: string,
     componentId: string,
@@ -193,43 +213,11 @@ export type CogsGlobalState = {
     dependencyPath: string[],
     fullComponentId: string
   ) => void;
-  shadowStateStore: Map<string, ShadowMetadata>;
-
   markAsDirty: (
     key: string,
     path: string[],
     options: { bubble: boolean }
   ) => void;
-  // These method signatures stay the same
-  initializeShadowState: (key: string, initialState: any) => void;
-  updateShadowAtPath: (key: string, path: string[], newValue: any) => void;
-  insertShadowArrayElement: (
-    key: string,
-    arrayPath: string[],
-    newItem: any
-  ) => void;
-  removeShadowArrayElement: (key: string, arrayPath: string[]) => void;
-  getShadowValue: (
-    key: string,
-
-    validArrayIds?: string[]
-  ) => any;
-
-  getShadowMetadata: (
-    key: string,
-    path: string[]
-  ) => ShadowMetadata | undefined;
-  setShadowMetadata: (
-    key: string,
-    path: string[],
-    metadata: Omit<ShadowMetadata, 'id'>
-  ) => void;
-  setTransformCache: (
-    key: string,
-    path: string[],
-    cacheKey: string,
-    cacheData: any
-  ) => void;
 
   pathSubscribers: Map<string, Set<(newValue: any) => void>>;
   subscribeToPath: (
@@ -244,12 +232,8 @@ export type CogsGlobalState = {
   clearSelectedIndex: ({ arrayKey }: { arrayKey: string }) => void;
   clearSelectedIndexesForState: (stateKey: string) => void;
 
-  // --- Core State and Updaters ---
-
   initialStateOptions: { [key: string]: OptionsType };
-
   initialStateGlobal: { [key: string]: StateValue };
-
   updateInitialStateGlobal: (key: string, newState: StateValue) => void;
 
   getInitialOptions: (key: string) => OptionsType | undefined;
@@ -268,542 +252,505 @@ export type CogsGlobalState = {
 
   stateLog: Map<string, Map<string, UpdateTypeDetail>>;
   syncInfoStore: Map<string, SyncInfo>;
-  addStateLog: (key: string, update: UpdateTypeDetail) => void;
+  addStateLog: (updates: UpdateTypeDetail[]) => void;
 
   setSyncInfo: (key: string, syncInfo: SyncInfo) => void;
   getSyncInfo: (key: string) => SyncInfo | null;
 };
-const isSimpleObject = (value: any): boolean => {
-  // Most common cases first
-  if (value === null || typeof value !== 'object') return false;
 
-  // Arrays are simple objects
-  if (Array.isArray(value)) return true;
+export function buildShadowNode(value: any): ShadowNode {
+  if (value === null || typeof value !== 'object') {
+    return { value };
+  }
 
-  // Plain objects second most common
-  if (value.constructor === Object) return true;
+  if (Array.isArray(value)) {
+    const arrayNode: ShadowNode = { _meta: { arrayKeys: [] } };
+    const idKeys: string[] = [];
 
-  // Everything else is not simple
-  return false;
-};
-export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
-  updateQueue: new Set<() => void>(),
-  // A flag to ensure we only schedule the flush once per event-loop tick.
-  isFlushScheduled: false,
+    value.forEach((item) => {
+      const itemId = `id:${ulid()}`;
+      arrayNode[itemId] = buildShadowNode(item);
+      idKeys.push(itemId);
+    });
 
-  // This function is called by queueMicrotask to execute all queued updates.
-  flushUpdates: () => {
-    const { updateQueue } = get();
+    arrayNode._meta!.arrayKeys = idKeys;
+    return arrayNode;
+  }
 
-    if (updateQueue.size > 0) {
-      startTransition(() => {
-        updateQueue.forEach((updateFn) => updateFn());
-      });
+  if (value.constructor === Object) {
+    const objectNode: ShadowNode = { _meta: {} };
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key)) {
+        objectNode[key] = buildShadowNode(value[key]);
+      }
     }
+    return objectNode;
+  }
+
+  return { value };
+}
+
+export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
+  shadowStateStore: new Map<string, ShadowNode>(),
 
-    // Clear the queue and reset the flag for the next event loop tick.
-    set({ updateQueue: new Set(), isFlushScheduled: false });
+  setTransformCache: (
+    key: string,
+    path: string[],
+    cacheKey: string,
+    cacheData: any
+  ) => {
+    const metadata = get().getShadowMetadata(key, path) || {};
+    if (!metadata.transformCaches) {
+      metadata.transformCaches = new Map();
+    }
+    metadata.transformCaches.set(cacheKey, cacheData);
+    get().setShadowMetadata(key, path, {
+      transformCaches: metadata.transformCaches,
+    });
   },
-  addPathComponent: (stateKey, dependencyPath, fullComponentId) => {
+
+  initializeShadowState: (key: string, initialState: any) => {
     set((state) => {
       const newShadowStore = new Map(state.shadowStateStore);
-      const dependencyKey = [stateKey, ...dependencyPath].join('.');
+      const existingRoot =
+        newShadowStore.get(key) || newShadowStore.get(`[${key}`);
+      let preservedMetadata: Partial<ShadowMetadata> = {};
+
+      if (existingRoot?._meta) {
+        const {
+          components,
+          features,
+          lastServerSync,
+          stateSource,
+          baseServerState,
+        } = existingRoot._meta;
+        if (components) preservedMetadata.components = components;
+        if (features) preservedMetadata.features = features;
+        if (lastServerSync) preservedMetadata.lastServerSync = lastServerSync;
+        if (stateSource) preservedMetadata.stateSource = stateSource;
+        if (baseServerState)
+          preservedMetadata.baseServerState = baseServerState;
+      }
 
-      // --- Part 1: Update the path's own metadata ---
-      const pathMeta = newShadowStore.get(dependencyKey) || {};
-      // Create a *new* Set to ensure immutability
-      const pathComponents = new Set(pathMeta.pathComponents);
-      pathComponents.add(fullComponentId);
-      // Update the metadata for the specific path
-      newShadowStore.set(dependencyKey, { ...pathMeta, pathComponents });
+      newShadowStore.delete(key);
+      newShadowStore.delete(`[${key}`);
 
-      // --- Part 2: Update the component's own list of paths ---
-      const rootMeta = newShadowStore.get(stateKey) || {};
-      const component = rootMeta.components?.get(fullComponentId);
+      const newRoot = buildShadowNode(initialState);
 
-      // If the component exists, update its `paths` set immutably
-      if (component) {
-        const newPaths = new Set(component.paths);
-        newPaths.add(dependencyKey);
+      if (!newRoot._meta) newRoot._meta = {};
+      Object.assign(newRoot._meta, preservedMetadata);
 
-        const newComponentRegistration = { ...component, paths: newPaths };
-        const newComponentsMap = new Map(rootMeta.components);
-        newComponentsMap.set(fullComponentId, newComponentRegistration);
-
-        // Update the root metadata with the new components map
-        newShadowStore.set(stateKey, {
-          ...rootMeta,
-          components: newComponentsMap,
-        });
-      }
+      const storageKey = Array.isArray(initialState) ? `[${key}` : key;
+      newShadowStore.set(storageKey, newRoot);
 
-      // Return the final, updated state
       return { shadowStateStore: newShadowStore };
     });
   },
-  registerComponent: (stateKey, fullComponentId, registration) => {
-    set((state) => {
-      const newShadowStore = new Map(state.shadowStateStore);
-      const rootMeta = newShadowStore.get(stateKey) || {};
-      const components = new Map(rootMeta.components);
-      components.set(fullComponentId, registration);
-      newShadowStore.set(stateKey, { ...rootMeta, components });
-      return { shadowStateStore: newShadowStore };
-    });
+
+  getShadowNode: (key: string, path: string[]): ShadowNode | undefined => {
+    const store = get().shadowStateStore;
+    let current: any = store.get(key) || store.get(`[${key}`);
+
+    if (!current) return undefined;
+    if (path.length === 0) return current;
+
+    for (const segment of path) {
+      if (typeof current !== 'object' || current === null) return undefined;
+      current = current[segment];
+      if (current === undefined) return undefined;
+    }
+    return current;
   },
 
-  unregisterComponent: (stateKey, fullComponentId) => {
+  getShadowMetadata: (
+    key: string,
+    path: string[]
+  ): ShadowMetadata | undefined => {
+    const node = get().getShadowNode(key, path);
+    return node?._meta;
+  },
+
+  setShadowMetadata: (
+    key: string,
+    path: string[],
+    newMetadata: Partial<ShadowMetadata>
+  ) => {
     set((state) => {
-      const newShadowStore = new Map(state.shadowStateStore);
-      const rootMeta = newShadowStore.get(stateKey);
-      if (!rootMeta?.components) {
-        return state; // Return original state, no change needed
+      const newStore = new Map(state.shadowStateStore);
+      const rootKey = newStore.has(`[${key}`) ? `[${key}` : key;
+      let root = newStore.get(rootKey);
+
+      if (!root) {
+        root = {};
+        newStore.set(rootKey, root);
       }
 
-      const components = new Map(rootMeta.components);
-      const wasDeleted = components.delete(fullComponentId);
+      const clonedRoot: any = { ...root };
+      newStore.set(rootKey, clonedRoot);
 
-      // Only update state if something was actually deleted
-      if (wasDeleted) {
-        newShadowStore.set(stateKey, { ...rootMeta, components });
-        return { shadowStateStore: newShadowStore };
+      let current = clonedRoot;
+      for (const segment of path) {
+        const nextNode = current[segment] || {};
+        current[segment] = { ...nextNode };
+        current = current[segment];
       }
 
-      return state; // Nothing changed
+      current._meta = { ...(current._meta || {}), ...newMetadata };
+
+      return { shadowStateStore: newStore };
     });
   },
-  markAsDirty: (key: string, path: string[], options = { bubble: true }) => {
-    const { shadowStateStore } = get();
-    const updates = new Map<string, ShadowMetadata>();
+  getShadowValue: (
+    key: string,
+    path: string[],
+    validArrayIds?: string[],
+    log?: boolean
+  ) => {
+    const node = get().getShadowNode(key, path);
 
-    const setDirty = (currentPath: string[]) => {
-      const fullKey = [key, ...currentPath].join('.');
-      const meta = shadowStateStore.get(fullKey) || {};
+    if (node === null || node === undefined) return undefined;
 
-      // If already dirty, no need to update
-      if (meta.isDirty === true) {
-        return true; // Return true to indicate parent is dirty
-      }
+    const nodeKeys = Object.keys(node);
 
-      updates.set(fullKey, { ...meta, isDirty: true });
-      return false; // Not previously dirty
-    };
+    const isPrimitiveWrapper =
+      Object.prototype.hasOwnProperty.call(node, 'value') &&
+      nodeKeys.every((k) => k === 'value' || k === '_meta');
 
-    // Mark the target path
-    setDirty(path);
+    if (isPrimitiveWrapper) {
+      return node.value;
+    }
 
-    // Bubble up if requested
-    if (options.bubble) {
-      let parentPath = [...path];
-      while (parentPath.length > 0) {
-        parentPath.pop();
-        const wasDirty = setDirty(parentPath);
-        if (wasDirty) {
-          break; // Stop bubbling if parent was already dirty
-        }
-      }
+    // Array Check (This part is correct)
+    const isArrayNode =
+      node._meta &&
+      Object.prototype.hasOwnProperty.call(node._meta, 'arrayKeys');
+    if (isArrayNode) {
+      const keysToIterate =
+        validArrayIds !== undefined && validArrayIds.length > 0
+          ? validArrayIds
+          : node._meta!.arrayKeys!;
+
+      return keysToIterate.map((itemKey: string) =>
+        get().getShadowValue(key, [...path, itemKey])
+      );
     }
 
-    // Apply all updates at once
-    if (updates.size > 0) {
-      set((state) => {
-        updates.forEach((meta, key) => {
-          state.shadowStateStore.set(key, meta);
-        });
-        return state;
-      });
+    const result: any = {};
+    for (const propKey of nodeKeys) {
+      if (propKey !== '_meta' && !propKey.startsWith('id:')) {
+        result[propKey] = get().getShadowValue(key, [...path, propKey]);
+      }
     }
+    return result;
   },
-  serverStateUpdates: new Map(),
-  setServerStateUpdate: (key, serverState) => {
+  updateShadowAtPath: (key, path, newValue) => {
     set((state) => {
-      const newMap = new Map(state.serverStateUpdates);
-      newMap.set(key, serverState);
-      return { serverStateUpdates: newMap };
-    });
-
-    // Notify all subscribers for this key
-    get().notifyPathSubscribers(key, {
-      type: 'SERVER_STATE_UPDATE',
-      serverState,
-    });
-  },
-  shadowStateStore: new Map(),
-  getShadowNode: (key: string) => get().shadowStateStore.get(key),
-  pathSubscribers: new Map<string, Set<(newValue: any) => void>>(),
-
-  subscribeToPath: (path, callback) => {
-    const subscribers = get().pathSubscribers;
-    const subsForPath = subscribers.get(path) || new Set();
-    subsForPath.add(callback);
-    subscribers.set(path, subsForPath);
+      const newStore = new Map(state.shadowStateStore);
+      const rootKey = newStore.has(`[${key}`) ? `[${key}` : key;
+      let root = newStore.get(rootKey);
+      if (!root) return state;
+      const clonedRoot: any = { ...root };
+      newStore.set(rootKey, clonedRoot);
+      let parentNode = clonedRoot;
+      for (let i = 0; i < path.length - 1; i++) {
+        parentNode[path[i]!] = { ...(parentNode[path[i]!] || {}) };
+        parentNode = parentNode[path[i]!];
+      }
+      const targetNode =
+        path.length === 0 ? parentNode : parentNode[path[path.length - 1]!];
 
-    return () => {
-      const currentSubs = get().pathSubscribers.get(path);
-      if (currentSubs) {
-        currentSubs.delete(callback);
-        if (currentSubs.size === 0) {
-          get().pathSubscribers.delete(path);
-        }
+      if (!targetNode) {
+        parentNode[path[path.length - 1]!] = buildShadowNode(newValue);
+        return { shadowStateStore: newStore };
       }
-    };
-  },
 
-  notifyPathSubscribers: (updatedPath, newValue) => {
-    const subscribers = get().pathSubscribers;
-    const subs = subscribers.get(updatedPath);
+      function intelligentMerge(nodeToUpdate: any, plainValue: any) {
+        if (
+          typeof plainValue !== 'object' ||
+          plainValue === null ||
+          Array.isArray(plainValue)
+        ) {
+          const oldMeta = nodeToUpdate._meta;
+          const newNode = buildShadowNode(plainValue);
+          if (oldMeta) {
+            newNode._meta = { ...oldMeta, ...(newNode._meta || {}) };
+          }
+          Object.keys(nodeToUpdate).forEach((key) => delete nodeToUpdate[key]);
+          Object.assign(nodeToUpdate, newNode);
+          return;
+        }
 
-    if (subs) {
-      subs.forEach((callback) => callback(newValue));
-    }
-  },
+        const plainValueKeys = new Set(Object.keys(plainValue));
 
-  initializeShadowState: (key: string, initialState: any) => {
-    set((state) => {
-      // 1. Make a copy of the current store to modify it
-      const newShadowStore = new Map(state.shadowStateStore);
-      console.log('initializeShadowState');
-      // 2. PRESERVE the existing components map before doing anything else
-      const existingRootMeta = newShadowStore.get(key);
-      const preservedComponents = existingRootMeta?.components;
-
-      // 3. Wipe all old shadow entries for this state key
-      const prefixToDelete = key + '.';
-      for (const k of Array.from(newShadowStore.keys())) {
-        if (k === key || k.startsWith(prefixToDelete)) {
-          newShadowStore.delete(k);
+        for (const propKey of plainValueKeys) {
+          const childValue = plainValue[propKey];
+          if (nodeToUpdate[propKey]) {
+            intelligentMerge(nodeToUpdate[propKey], childValue);
+          } else {
+            nodeToUpdate[propKey] = buildShadowNode(childValue);
+          }
         }
-      }
 
-      // 4. Run your original logic to rebuild the state tree from scratch
-      const processValue = (value: any, path: string[]) => {
-        const nodeKey = [key, ...path].join('.');
+        for (const nodeKey in nodeToUpdate) {
+          if (
+            nodeKey === '_meta' ||
+            !Object.prototype.hasOwnProperty.call(nodeToUpdate, nodeKey)
+          )
+            continue;
 
-        if (Array.isArray(value)) {
-          const childIds: string[] = [];
-          value.forEach(() => {
-            const itemId = `id:${ulid()}`;
-            childIds.push(nodeKey + '.' + itemId);
-          });
-          newShadowStore.set(nodeKey, { arrayKeys: childIds });
-          value.forEach((item, index) => {
-            const itemId = childIds[index]!.split('.').pop();
-            processValue(item, [...path!, itemId!]);
-          });
-        } else if (isSimpleObject(value)) {
-          const fields = Object.fromEntries(
-            Object.keys(value).map((k) => [k, nodeKey + '.' + k])
-          );
-          newShadowStore.set(nodeKey, { fields });
-          Object.keys(value).forEach((k) => {
-            processValue(value[k], [...path, k]);
-          });
-        } else {
-          newShadowStore.set(nodeKey, { value });
+          if (!plainValueKeys.has(nodeKey)) {
+            delete nodeToUpdate[nodeKey];
+          }
         }
-      };
-      processValue(initialState, []);
-
-      // 5. RESTORE the preserved components map onto the new root metadata
-      if (preservedComponents) {
-        const newRootMeta = newShadowStore.get(key) || {};
-        newShadowStore.set(key, {
-          ...newRootMeta,
-          components: preservedComponents,
-        });
       }
 
-      // 6. Return the completely updated state
-      return { shadowStateStore: newShadowStore };
+      intelligentMerge(targetNode, newValue);
+
+      get().notifyPathSubscribers([key, ...path].join('.'), {
+        type: 'UPDATE',
+        newValue,
+      });
+      return { shadowStateStore: newStore };
     });
   },
-
-  getShadowValue: (fullKey: string, validArrayIds?: string[]) => {
-    const memo = new Map<string, any>();
-    const reconstruct = (keyToBuild: string, ids?: string[]): any => {
-      if (memo.has(keyToBuild)) {
-        return memo.get(keyToBuild);
+  addItemsToArrayNode: (key, arrayPath, newItems, newKeys) => {
+    set((state) => {
+      const newStore = new Map(state.shadowStateStore);
+      const rootKey = newStore.has(`[${key}`) ? `[${key}` : key;
+      let root = newStore.get(rootKey);
+      if (!root) {
+        console.error('Root not found for state key:', key);
+        return state;
       }
 
-      const shadowMeta = get().shadowStateStore.get(keyToBuild);
-      if (!shadowMeta) {
-        return undefined;
-      }
+      const clonedRoot = { ...root };
+      newStore.set(rootKey, clonedRoot);
 
-      if (shadowMeta.value !== undefined) {
-        return shadowMeta.value;
+      let current = clonedRoot;
+      for (const segment of arrayPath) {
+        const nextNode = current[segment] || {};
+        current[segment] = { ...nextNode };
+        current = current[segment];
       }
 
-      let result: any; // The value we are about to build.
+      Object.assign(current, newItems);
+      current._meta = { ...(current._meta || {}), arrayKeys: newKeys };
 
-      if (shadowMeta.arrayKeys) {
-        const keys = ids ?? shadowMeta.arrayKeys;
-        result = [];
-        memo.set(keyToBuild, result);
-        keys.forEach((itemKey) => {
-          result.push(reconstruct(itemKey));
-        });
-      } else if (shadowMeta.fields) {
-        result = {};
-        memo.set(keyToBuild, result);
-        Object.entries(shadowMeta.fields).forEach(([key, fieldPath]) => {
-          result[key] = reconstruct(fieldPath as string);
-        });
-      } else {
-        result = undefined;
-      }
+      return { shadowStateStore: newStore };
+    });
+  },
 
-      // Return the final, fully populated result.
-      return result;
-    };
+  insertShadowArrayElement: (key, arrayPath, newItem, index) => {
+    const arrayNode = get().getShadowNode(key, arrayPath);
+    if (!arrayNode?._meta?.arrayKeys) {
+      console.error(
+        `Array not found at path: ${[key, ...arrayPath].join('.')}`
+      );
+      return;
+    }
 
-    // Start the process by calling the inner function on the root key.
-    return reconstruct(fullKey, validArrayIds);
-  },
-  getShadowMetadata: (key: string, path: string[]) => {
-    const fullKey = [key, ...path].join('.');
+    const newItemId = `id:${ulid()}`;
+    const itemsToAdd = { [newItemId]: buildShadowNode(newItem) };
+
+    const currentKeys = arrayNode._meta.arrayKeys;
+    const newKeys = [...currentKeys];
+    const insertionPoint =
+      index !== undefined && index >= 0 && index <= newKeys.length
+        ? index
+        : newKeys.length;
+    newKeys.splice(insertionPoint, 0, newItemId);
+
+    get().addItemsToArrayNode(key, arrayPath, itemsToAdd, newKeys);
 
-    return get().shadowStateStore.get(fullKey);
+    const arrayKey = [key, ...arrayPath].join('.');
+    get().notifyPathSubscribers(arrayKey, {
+      type: 'INSERT',
+      path: arrayKey,
+      itemKey: `${arrayKey}.${newItemId}`,
+      index: insertionPoint,
+    });
   },
+  insertManyShadowArrayElements: (key, arrayPath, newItems, index) => {
+    if (!newItems || newItems.length === 0) {
+      return;
+    }
 
-  setShadowMetadata: (key, path, metadata) => {
-    const fullKey = [key, ...path].join('.');
-    const existingMeta = get().shadowStateStore.get(fullKey);
-
-    // --- THIS IS THE TRAP ---
-    // If the existing metadata HAS a components map, but the NEW metadata DOES NOT,
-    // it means we are about to wipe it out. This is the bug.
-    if (existingMeta?.components && !metadata.components) {
-      console.group(
-        '%c🚨 RACE CONDITION DETECTED! 🚨',
-        'color: red; font-size: 18px; font-weight: bold;'
-      );
+    const arrayNode = get().getShadowNode(key, arrayPath);
+    if (!arrayNode?._meta?.arrayKeys) {
       console.error(
-        `An overwrite is about to happen on stateKey: "${key}" at path: [${path.join(', ')}]`
-      );
-      console.log(
-        'The EXISTING metadata had a components map:',
-        existingMeta.components
+        `Array not found at path: ${[key, ...arrayPath].join('.')}`
       );
-      console.log(
-        'The NEW metadata is trying to save WITHOUT a components map:',
-        metadata
-      );
-      console.log(
-        '%cStack trace to the function that caused this overwrite:',
-        'font-weight: bold;'
-      );
-      console.trace(); // This prints the call stack, leading you to the bad code.
-      console.groupEnd();
+      return;
     }
-    // --- END OF TRAP ---
 
-    const newShadowStore = new Map(get().shadowStateStore);
-    const finalMeta = { ...(existingMeta || {}), ...metadata };
-    newShadowStore.set(fullKey, finalMeta);
-    set({ shadowStateStore: newShadowStore });
-  },
-  setTransformCache: (
-    key: string,
-    path: string[],
-    cacheKey: string,
-    cacheData: any
-  ) => {
-    const fullKey = [key, ...path].join('.');
-    const newShadowStore = new Map(get().shadowStateStore);
-    const existing = newShadowStore.get(fullKey) || {};
+    const itemsToAdd: Record<string, any> = {};
+    const newIds: string[] = [];
 
-    // Initialize transformCaches if it doesn't exist
-    if (!existing.transformCaches) {
-      existing.transformCaches = new Map();
-    }
+    newItems.forEach((item) => {
+      const newItemId = `id:${ulid()}`;
+      newIds.push(newItemId);
+      itemsToAdd[newItemId] = buildShadowNode(item);
+    });
 
-    // Update just the specific cache entry
-    existing.transformCaches.set(cacheKey, cacheData);
+    const currentKeys = arrayNode._meta.arrayKeys;
+    const finalKeys = [...currentKeys];
+    const insertionPoint =
+      index !== undefined && index >= 0 && index <= finalKeys.length
+        ? index
+        : finalKeys.length;
+    finalKeys.splice(insertionPoint, 0, ...newIds);
 
-    // Update shadow store WITHOUT notifying path subscribers
-    newShadowStore.set(fullKey, existing);
-    set({ shadowStateStore: newShadowStore });
+    get().addItemsToArrayNode(key, arrayPath, itemsToAdd, finalKeys);
 
-    // Don't call notifyPathSubscribers here - cache updates shouldn't trigger renders
-  },
-  insertShadowArrayElement: (
-    key: string,
-    arrayPath: string[],
-    newItem: any
-  ) => {
-    const newShadowStore = new Map(get().shadowStateStore);
     const arrayKey = [key, ...arrayPath].join('.');
-    const parentMeta = newShadowStore.get(arrayKey);
+    get().notifyPathSubscribers(arrayKey, {
+      type: 'INSERT_MANY',
+      path: arrayKey,
+      count: newItems.length,
+      index: insertionPoint,
+    });
+  },
 
-    if (!parentMeta || !parentMeta.arrayKeys) return;
+  removeShadowArrayElement: (key, itemPath) => {
+    if (itemPath.length === 0) return;
 
-    const newItemId = `id:${ulid()}`;
-    const fullItemKey = arrayKey + '.' + newItemId;
-
-    // Just add to the end (or at a specific index if provided)
-    const newArrayKeys = [...parentMeta.arrayKeys];
-    newArrayKeys.push(fullItemKey); // Or use splice if you have an index
-    newShadowStore.set(arrayKey, { ...parentMeta, arrayKeys: newArrayKeys });
-
-    // Process the new item - but use the correct logic
-    const processNewItem = (value: any, path: string[]) => {
-      const nodeKey = [key, ...path].join('.');
-
-      if (Array.isArray(value)) {
-        // Handle arrays...
-      } else if (typeof value === 'object' && value !== null) {
-        // Create fields mapping
-        const fields = Object.fromEntries(
-          Object.keys(value).map((k) => [k, nodeKey + '.' + k])
-        );
-        newShadowStore.set(nodeKey, { fields });
-
-        // Process each field
-        Object.entries(value).forEach(([k, v]) => {
-          processNewItem(v, [...path, k]);
-        });
-      } else {
-        // Primitive value
-        newShadowStore.set(nodeKey, { value });
-      }
-    };
+    const arrayPath = itemPath.slice(0, -1);
+    const itemId = itemPath[itemPath.length - 1];
+    if (!itemId?.startsWith('id:')) return;
+
+    const arrayNode = get().getShadowNode(key, arrayPath);
+    if (!arrayNode?._meta?.arrayKeys) return;
+
+    const newKeys = arrayNode._meta.arrayKeys.filter((k) => k !== itemId);
+    delete arrayNode[itemId];
 
-    processNewItem(newItem, [...arrayPath, newItemId]);
-    set({ shadowStateStore: newShadowStore });
+    get().setShadowMetadata(key, arrayPath, { arrayKeys: newKeys });
 
+    const arrayKey = [key, ...arrayPath].join('.');
     get().notifyPathSubscribers(arrayKey, {
-      type: 'INSERT',
+      type: 'REMOVE',
       path: arrayKey,
-      itemKey: fullItemKey,
+      itemKey: `${arrayKey}.${itemId}`,
     });
   },
-  removeShadowArrayElement: (key: string, itemPath: string[]) => {
-    const newShadowStore = new Map(get().shadowStateStore);
 
-    // Get the full item key (e.g., "stateKey.products.id:xxx")
-    const itemKey = [key, ...itemPath].join('.');
+  addPathComponent: (stateKey, dependencyPath, fullComponentId) => {
+    const metadata = get().getShadowMetadata(stateKey, dependencyPath) || {};
+    const newPathComponents = new Set(metadata.pathComponents);
+    newPathComponents.add(fullComponentId);
+    get().setShadowMetadata(stateKey, dependencyPath, {
+      pathComponents: newPathComponents,
+    });
 
-    // Extract parent path and item ID
-    const parentPath = itemPath.slice(0, -1);
-    const parentKey = [key, ...parentPath].join('.');
+    const rootMeta = get().getShadowMetadata(stateKey, []);
+    if (rootMeta?.components) {
+      const component = rootMeta.components.get(fullComponentId);
+      if (component) {
+        const fullPathKey = [stateKey, ...dependencyPath].join('.');
+        const newPaths = new Set(component.paths);
+        newPaths.add(fullPathKey);
+        const newComponentRegistration = { ...component, paths: newPaths };
+        const newComponentsMap = new Map(rootMeta.components);
+        newComponentsMap.set(fullComponentId, newComponentRegistration);
+        get().setShadowMetadata(stateKey, [], { components: newComponentsMap });
+      }
+    }
+  },
 
-    // Get parent metadata
-    const parentMeta = newShadowStore.get(parentKey);
+  registerComponent: (stateKey, fullComponentId, registration) => {
+    const rootMeta = get().getShadowMetadata(stateKey, []) || {};
+    const components = new Map(rootMeta.components);
+    components.set(fullComponentId, registration);
+    get().setShadowMetadata(stateKey, [], { components });
+  },
 
-    if (parentMeta && parentMeta.arrayKeys) {
-      // Find the index of the item to remove
-      const indexToRemove = parentMeta.arrayKeys.findIndex(
-        (arrayItemKey) => arrayItemKey === itemKey
-      );
+  unregisterComponent: (stateKey, fullComponentId) => {
+    const rootMeta = get().getShadowMetadata(stateKey, []);
+    if (!rootMeta?.components) return;
+    const components = new Map(rootMeta.components);
+    if (components.delete(fullComponentId)) {
+      get().setShadowMetadata(stateKey, [], { components });
+    }
+  },
 
-      if (indexToRemove !== -1) {
-        // Create new array keys with the item removed
-        const newArrayKeys = parentMeta.arrayKeys.filter(
-          (arrayItemKey) => arrayItemKey !== itemKey
-        );
+  markAsDirty: (key, path, options = { bubble: true }) => {
+    const setDirtyOnPath = (pathToMark: string[]) => {
+      const node = get().getShadowNode(key, pathToMark);
+      if (node?._meta?.isDirty) {
+        return true;
+      }
+      get().setShadowMetadata(key, pathToMark, { isDirty: true });
+      return false;
+    };
 
-        // Update parent with new array keys
-        newShadowStore.set(parentKey, {
-          ...parentMeta,
-          arrayKeys: newArrayKeys,
-        });
+    setDirtyOnPath(path);
 
-        // Delete all data associated with the removed item
-        const prefixToDelete = itemKey + '.';
-        for (const k of Array.from(newShadowStore.keys())) {
-          if (k === itemKey || k.startsWith(prefixToDelete)) {
-            newShadowStore.delete(k);
-          }
+    if (options.bubble) {
+      let parentPath = [...path];
+      while (parentPath.length > 0) {
+        parentPath.pop();
+        if (setDirtyOnPath(parentPath)) {
+          break;
         }
       }
     }
+  },
 
-    set({ shadowStateStore: newShadowStore });
-
-    get().notifyPathSubscribers(parentKey, {
-      type: 'REMOVE',
-      path: parentKey,
-      itemKey: itemKey, // The exact ID of the removed item
+  serverStateUpdates: new Map(),
+  setServerStateUpdate: (key, serverState) => {
+    set((state) => ({
+      serverStateUpdates: new Map(state.serverStateUpdates).set(
+        key,
+        serverState
+      ),
+    }));
+    get().notifyPathSubscribers(key, {
+      type: 'SERVER_STATE_UPDATE',
+      serverState,
     });
   },
 
-  updateShadowAtPath: (key, path, newValue) => {
-    const fullKey = [key, ...path].join('.');
-
-    // Optimization: Only update if value actually changed
-    const existingMeta = get().shadowStateStore.get(fullKey);
-    if (existingMeta?.value === newValue && !isSimpleObject(newValue)) {
-      return; // Skip update for unchanged primitives
-    }
-
-    // CHANGE: Don't clone the entire Map, just update in place
-    set((state) => {
-      const store = state.shadowStateStore;
-
-      if (!isSimpleObject(newValue)) {
-        const meta = store.get(fullKey) || {};
-        store.set(fullKey, { ...meta, value: newValue });
-      } else {
-        // Handle objects by iterating
-        const processObject = (currentPath: string[], objectToSet: any) => {
-          const currentFullKey = [key, ...currentPath].join('.');
-          const meta = store.get(currentFullKey);
-
-          if (meta && meta.fields) {
-            for (const fieldKey in objectToSet) {
-              if (Object.prototype.hasOwnProperty.call(objectToSet, fieldKey)) {
-                const childValue = objectToSet[fieldKey];
-                const childFullPath = meta.fields[fieldKey];
-
-                if (childFullPath) {
-                  if (isSimpleObject(childValue)) {
-                    processObject(
-                      childFullPath.split('.').slice(1),
-                      childValue
-                    );
-                  } else {
-                    const existingChildMeta = store.get(childFullPath) || {};
-                    store.set(childFullPath, {
-                      ...existingChildMeta,
-                      value: childValue,
-                    });
-                  }
-                }
-              }
-            }
-          }
-        };
+  pathSubscribers: new Map<string, Set<(newValue: any) => void>>(),
+  subscribeToPath: (path, callback) => {
+    const subscribers = get().pathSubscribers;
+    const subsForPath = subscribers.get(path) || new Set();
+    subsForPath.add(callback);
+    subscribers.set(path, subsForPath);
 
-        processObject(path, newValue);
+    return () => {
+      const currentSubs = get().pathSubscribers.get(path);
+      if (currentSubs) {
+        currentSubs.delete(callback);
+        if (currentSubs.size === 0) {
+          get().pathSubscribers.delete(path);
+        }
       }
-
-      // Only notify after all changes are made
-      get().notifyPathSubscribers(fullKey, { type: 'UPDATE', newValue });
-
-      // Return same reference if using Zustand's immer middleware
-      return state;
-    });
+    };
+  },
+  notifyPathSubscribers: (updatedPath, newValue) => {
+    const subscribers = get().pathSubscribers;
+    const subs = subscribers.get(updatedPath);
+    if (subs) {
+      subs.forEach((callback) => callback(newValue));
+    }
   },
   selectedIndicesMap: new Map<string, string>(),
-  getSelectedIndex: (arrayKey: string, validIds?: string[]): number => {
+  getSelectedIndex: (arrayKey, validIds) => {
     const itemKey = get().selectedIndicesMap.get(arrayKey);
-
     if (!itemKey) return -1;
 
-    // Use validIds if provided (for filtered views), otherwise use all arrayKeys
-    const arrayKeys =
-      validIds ||
-      getGlobalStore.getState().getShadowMetadata(arrayKey, [])?.arrayKeys;
+    const arrayMeta = get().getShadowMetadata(
+      arrayKey.split('.')[0]!,
+      arrayKey.split('.').slice(1)
+    );
+    const arrayKeys = validIds || arrayMeta?.arrayKeys;
 
-    if (!arrayKeys) return -1;
-
-    return arrayKeys.indexOf(itemKey);
+    return arrayKeys ? arrayKeys.indexOf(itemKey) : -1;
   },
 
   setSelectedIndex: (arrayKey: string, itemKey: string | undefined) => {
     set((state) => {
-      const newMap = state.selectedIndicesMap;
+      const newMap = new Map(state.selectedIndicesMap); // CREATE A NEW MAP!
 
       if (itemKey === undefined) {
         newMap.delete(arrayKey);
@@ -814,26 +761,24 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
           });
         }
         newMap.set(arrayKey, itemKey);
-
-        get().notifyPathSubscribers(itemKey, {
-          type: 'THIS_SELECTED',
-        });
+        get().notifyPathSubscribers(itemKey, { type: 'THIS_SELECTED' });
       }
-      get().notifyPathSubscribers(arrayKey, {
-        type: 'GET_SELECTED',
-      });
+
+      get().notifyPathSubscribers(arrayKey, { type: 'GET_SELECTED' });
+
       return {
         ...state,
         selectedIndicesMap: newMap,
       };
     });
   },
+
   clearSelectedIndex: ({ arrayKey }: { arrayKey: string }): void => {
     set((state) => {
-      const newMap = state.selectedIndicesMap;
-      const acutalKey = newMap.get(arrayKey);
-      if (acutalKey) {
-        get().notifyPathSubscribers(acutalKey, {
+      const newMap = new Map(state.selectedIndicesMap); // CREATE A NEW MAP!
+      const actualKey = newMap.get(arrayKey);
+      if (actualKey) {
+        get().notifyPathSubscribers(actualKey, {
           type: 'CLEAR_SELECTION',
         });
       }
@@ -848,75 +793,63 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       };
     });
   },
-  clearSelectedIndexesForState: (stateKey: string) => {
+  clearSelectedIndexesForState: (stateKey) => {
     set((state) => {
-      const newOuterMap = new Map(state.selectedIndicesMap);
-      const changed = newOuterMap.delete(stateKey);
-      if (changed) {
-        return { selectedIndicesMap: newOuterMap };
-      } else {
-        return {};
+      const newMap = new Map(state.selectedIndicesMap);
+      let changed = false;
+      for (const key of newMap.keys()) {
+        if (key === stateKey || key.startsWith(stateKey + '.')) {
+          newMap.delete(key);
+          changed = true;
+        }
       }
+      return changed ? { selectedIndicesMap: newMap } : {};
     });
   },
 
   initialStateOptions: {},
-
-  stateTimeline: {},
-  cogsStateStore: {},
   stateLog: new Map(),
-
   initialStateGlobal: {},
 
-  validationErrors: new Map(),
-  addStateLog: (key, update) => {
+  addStateLog: (updates) => {
+    if (!updates || updates.length === 0) return;
     set((state) => {
       const newLog = new Map(state.stateLog);
-      const stateLogForKey = new Map(newLog.get(key));
-      const uniquePathKey = JSON.stringify(update.path);
-
-      const existing = stateLogForKey.get(uniquePathKey);
-      if (existing) {
-        // If an update for this path already exists, just modify it. (Fast)
-        existing.newValue = update.newValue;
-        existing.timeStamp = update.timeStamp;
-      } else {
-        // Otherwise, add the new update. (Fast)
-        stateLogForKey.set(uniquePathKey, { ...update });
+      const logsGroupedByKey = new Map<string, UpdateTypeDetail[]>();
+      for (const update of updates) {
+        const group = logsGroupedByKey.get(update.stateKey) || [];
+        group.push(update);
+        logsGroupedByKey.set(update.stateKey, group);
+      }
+      for (const [key, batchOfUpdates] of logsGroupedByKey.entries()) {
+        const newStateLogForKey = new Map(newLog.get(key));
+        for (const update of batchOfUpdates) {
+          newStateLogForKey.set(JSON.stringify(update.path), { ...update });
+        }
+        newLog.set(key, newStateLogForKey);
       }
-
-      newLog.set(key, stateLogForKey);
       return { stateLog: newLog };
     });
   },
 
-  getInitialOptions: (key) => {
-    return get().initialStateOptions[key];
-  },
-
+  getInitialOptions: (key) => get().initialStateOptions[key],
   setInitialStateOptions: (key, value) => {
     set((prev) => ({
-      initialStateOptions: {
-        ...prev.initialStateOptions,
-        [key]: value,
-      },
+      initialStateOptions: { ...prev.initialStateOptions, [key]: value },
     }));
   },
   updateInitialStateGlobal: (key, newState) => {
     set((prev) => ({
-      initialStateGlobal: {
-        ...prev.initialStateGlobal,
-        [key]: newState,
-      },
+      initialStateGlobal: { ...prev.initialStateGlobal, [key]: newState },
     }));
   },
 
   syncInfoStore: new Map<string, SyncInfo>(),
-  setSyncInfo: (key: string, syncInfo: SyncInfo) =>
+  setSyncInfo: (key, syncInfo) =>
     set((state) => {
       const newMap = new Map(state.syncInfoStore);
       newMap.set(key, syncInfo);
-      return { ...state, syncInfoStore: newMap };
+      return { syncInfoStore: newMap };
     }),
-  getSyncInfo: (key: string) => get().syncInfoStore.get(key) || null,
+  getSyncInfo: (key) => get().syncInfoStore.get(key) || null,
 }));