cogsbox-state 0.5.432 → 0.5.435

package/src/store.ts

@@ -1,13 +1,14 @@
-import { create } from "zustand";
-import { ulid } from "ulid";
+import { create } from 'zustand';
+import { ulid } from 'ulid';
 import type {
   OptionsType,
   ReactivityType,
   StateKeys,
-  SyncActionsType,
   SyncInfo,
   UpdateTypeDetail,
-} from "./CogsState.js";
+} from './CogsState.js';
+
+import type { ReactNode } from 'react';
 
 type StateUpdater<StateValue> =
   | StateValue
@@ -29,18 +30,7 @@ export type TrieNode = {
   subscribers: Set<string>;
   children: Map<string, TrieNode>;
 };
-export type ComponentsType = {
-  components: Map<
-    string,
-    {
-      forceUpdate: () => void;
-      paths: Set<string>;
-      deps?: any[];
-      depsFunction?: (state: any) => any[] | true;
-      reactiveType: ReactivityType[] | ReactivityType;
-    }
-  >;
-};
+
 export type FormRefStoreState = {
   formRefs: Map<string, React.RefObject<any>>;
   registerFormRef: (id: string, ref: React.RefObject<any>) => void;
@@ -74,7 +64,7 @@ export const formRefStore = create<FormRefStoreState>((set, get) => ({
   // Get all refs that start with the stateKey prefix
   getFormRefsByStateKey: (stateKey) => {
     const allRefs = get().formRefs;
-    const stateKeyPrefix = stateKey + ".";
+    const stateKeyPrefix = stateKey + '.';
     const filteredRefs = new Map();
 
     allRefs.forEach((ref, id) => {
@@ -86,21 +76,95 @@ export const formRefStore = create<FormRefStoreState>((set, get) => ({
     return filteredRefs;
   },
 }));
-
+export type ComponentsType = {
+  components?: Map<
+    string,
+    {
+      forceUpdate: () => void;
+      paths: Set<string>;
+      deps?: any[];
+      prevDeps?: any[];
+      depsFunction?: (state: any) => any[] | true;
+      reactiveType: ReactivityType[] | ReactivityType;
+    }
+  >;
+};
 export type ShadowMetadata = {
-  id: string;
+  id?: string;
+
+  stateSource?: 'default' | 'server' | 'localStorage';
+  lastServerSync?: number;
+  isDirty?: boolean;
+  baseServerState?: any;
+
   arrayKeys?: string[];
+
+  fields?: Record<string, any>;
   virtualizer?: {
     itemHeight?: number;
     domRef?: HTMLElement | null;
   };
   syncInfo?: { status: string };
   lastUpdated?: number;
-};
+  value?: any;
+  classSignals?: Array<{
+    // <-- ADD THIS BLOCK
+    id: string;
+    effect: string;
+    lastClasses: string;
+    deps: any[];
+  }>;
+  signals?: Array<{
+    instanceId: string;
+    parentId: string;
+    position: number;
+    effect?: string;
+  }>;
+  mapWrappers?: Array<{
+    instanceId: string;
+    path: string[];
+    componentId: string;
+    meta?: any;
+    mapFn: (
+      setter: any,
+      index: number,
+
+      arraySetter: any
+    ) => ReactNode;
+    containerRef: HTMLDivElement | null;
+    rebuildStateShape: any;
+  }>;
+  transformCaches?: Map<
+    string,
+    {
+      validIds: string[];
+      computedAt: number;
+      transforms: Array<{ type: 'filter' | 'sort'; fn: Function }>;
+    }
+  >;
+  pathComponents?: Set<string>;
+  streams?: Map<
+    string,
+    {
+      buffer: any[];
+      flushTimer: NodeJS.Timeout | null;
+    }
+  >;
+} & ComponentsType;
+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 } // For full re-initializations (e.g., when a component is removed)
+  | { type: 'RELOAD'; path: string }; // For full re-initializations
 export type CogsGlobalState = {
   // --- Shadow State and Subscription System ---
   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;
@@ -110,6 +174,12 @@ export type CogsGlobalState = {
     newItem: any
   ) => void;
   removeShadowArrayElement: (key: string, arrayPath: string[]) => void;
+  getShadowValue: (
+    key: string,
+
+    validArrayIds?: string[]
+  ) => any;
+
   getShadowMetadata: (
     key: string,
     path: string[]
@@ -117,60 +187,36 @@ export type CogsGlobalState = {
   setShadowMetadata: (
     key: string,
     path: string[],
-    metadata: Omit<ShadowMetadata, "id">
+    metadata: Omit<ShadowMetadata, 'id'>
   ) => void;
-
-  shadowStateSubscribers: Map<string, Set<() => void>>; // Stores subscribers for shadow state updates
-  subscribeToShadowState: (key: string, callback: () => void) => () => void;
-
-  selectedIndicesMap: Map<string, Map<string, number>>; // stateKey -> (parentPath -> selectedIndex)
-  getSelectedIndex: (
-    stateKey: string,
-    parentPath: string
-  ) => number | undefined;
-  setSelectedIndex: (
-    stateKey: string,
-    parentPath: string,
-    index: number | undefined
+  setTransformCache: (
+    key: string,
+    path: string[],
+    cacheKey: string,
+    cacheData: any
   ) => void;
-  clearSelectedIndex: ({
-    stateKey,
-    path,
-  }: {
-    stateKey: string;
-    path: string[];
-  }) => void;
+
+  pathSubscribers: Map<string, Set<(newValue: any) => void>>;
+  subscribeToPath: (
+    path: string,
+    callback: (newValue: any) => void
+  ) => () => void;
+  notifyPathSubscribers: (updatedPath: string, newValue: any) => void;
+
+  selectedIndicesMap: Map<string, string>; // stateKey -> (parentPath -> selectedIndex)
+  getSelectedIndex: (stateKey: string, validArrayIds?: string[]) => number;
+  setSelectedIndex: (key: string, itemKey: string) => void;
+  clearSelectedIndex: ({ arrayKey }: { arrayKey: string }) => void;
   clearSelectedIndexesForState: (stateKey: string) => void;
 
   // --- Core State and Updaters ---
-  updaterState: { [key: string]: any };
+
   initialStateOptions: { [key: string]: OptionsType };
-  cogsStateStore: { [key: string]: StateValue };
-  isLoadingGlobal: { [key: string]: boolean };
+
   initialStateGlobal: { [key: string]: StateValue };
-  iniitialCreatedState: { [key: string]: StateValue };
-  serverState: { [key: string]: StateValue };
-
-  getUpdaterState: (key: string) => StateUpdater<StateValue>;
-  setUpdaterState: (key: string, newUpdater: any) => void;
-  getKeyState: <StateKey extends StateKeys>(key: StateKey) => StateValue;
-  getNestedState: <StateKey extends StateKeys>(
-    key: StateKey,
-    path: string[]
-  ) => StateValue;
-  setState: <StateKey extends StateKeys>(
-    key: StateKey,
-    value: StateUpdater<StateValue>
-  ) => void;
-  setInitialStates: (initialState: StateValue) => void;
-  setCreatedState: (initialState: StateValue) => void;
+
   updateInitialStateGlobal: (key: string, newState: StateValue) => void;
-  updateInitialCreatedState: (key: string, newState: StateValue) => void;
-  setIsLoadingGlobal: (key: string, value: boolean) => void;
-  setServerState: <StateKey extends StateKeys>(
-    key: StateKey,
-    value: StateValue
-  ) => void;
+
   getInitialOptions: (key: string) => OptionsType | undefined;
   setInitialStateOptions: (key: string, value: OptionsType) => void;
 
@@ -181,275 +227,441 @@ export type CogsGlobalState = {
   removeValidationError: (path: string) => void;
 
   // --- Server Sync and Logging ---
-  serverSyncActions: { [key: string]: SyncActionsType<any> };
-  serverSyncLog: { [key: string]: SyncLogType[] };
+
+  serverStateUpdates: Map<
+    string,
+    {
+      data: any;
+      status: 'loading' | 'success' | 'error';
+      timestamp: number;
+    }
+  >;
+
+  setServerStateUpdate: (key: string, serverState: any) => void;
+
   stateLog: { [key: string]: UpdateTypeDetail[] };
   syncInfoStore: Map<string, SyncInfo>;
-  serverSideOrNot: { [key: string]: boolean };
-  setServerSyncLog: (key: string, newValue: SyncLogType) => void;
-  setServerSideOrNot: (key: string, value: boolean) => void;
-  getServerSideOrNot: (key: string) => boolean | undefined;
-  getThisLocalUpdate: (key: string) => UpdateTypeDetail[] | undefined;
-  setServerSyncActions: (key: string, value: SyncActionsType<any>) => void;
+
   setStateLog: (
     key: string,
     updater: (prevUpdates: UpdateTypeDetail[]) => UpdateTypeDetail[]
   ) => void;
   setSyncInfo: (key: string, syncInfo: SyncInfo) => void;
   getSyncInfo: (key: string) => SyncInfo | null;
+};
+const isSimpleObject = (value: any): boolean => {
+  if (value === null || typeof value !== 'object') return false;
+
+  // Handle special cases that should be treated as primitives
+  if (
+    value instanceof Uint8Array ||
+    value instanceof Int8Array ||
+    value instanceof Uint16Array ||
+    value instanceof Int16Array ||
+    value instanceof Uint32Array ||
+    value instanceof Int32Array ||
+    value instanceof Float32Array ||
+    value instanceof Float64Array ||
+    value instanceof ArrayBuffer ||
+    value instanceof Date ||
+    value instanceof RegExp ||
+    value instanceof Map ||
+    value instanceof Set
+  ) {
+    return false; // Treat as primitive
+  }
+
+  // Arrays and plain objects are complex
+  return Array.isArray(value) || value.constructor === Object;
+};
+export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
+  markAsDirty: (key: string, path: string[], options = { bubble: true }) => {
+    const newShadowStore = new Map(get().shadowStateStore);
+    let changed = false;
+
+    const setDirty = (currentPath: string[]) => {
+      const fullKey = [key, ...currentPath].join('.');
+      const meta = newShadowStore.get(fullKey);
+
+      // We mark something as dirty if it isn't already.
+      // The original data source doesn't matter.
+      if (meta && meta.isDirty !== true) {
+        newShadowStore.set(fullKey, { ...meta, isDirty: true });
+        changed = true;
+      } else if (!meta) {
+        // If there's no metadata, create it and mark it as dirty.
+        // This handles newly created fields within an object.
+        newShadowStore.set(fullKey, { isDirty: true });
+        changed = true;
+      }
+    };
 
-  // --- Component and DOM Integration ---
-  signalDomElements: Map<
-    string,
-    Set<{
-      instanceId: string;
-      parentId: string;
-      position: number;
-      effect?: string;
-      map?: string;
-    }>
-  >;
-  addSignalElement: (
-    signalId: string,
-    elementInfo: {
-      instanceId: string;
-      parentId: string;
-      position: number;
-      effect?: string;
-      map?: string;
-    }
-  ) => void;
-  removeSignalElement: (signalId: string, instanceId: string) => void;
-  stateComponents: Map<string, ComponentsType>;
+    // 1. Mark the target path itself as dirty.
+    setDirty(path);
 
-  // --- Deprecated/Legacy (Review for removal) ---
-  reRenderTriggerPrevValue: Record<string, any>;
-  reactiveDeps: Record<
-    string,
-    {
-      deps: any[];
-      updaters: Set<() => void>;
-      depsFunction: ((state: any) => any[] | true) | null;
+    // 2. If `bubble` is true, walk up the path and mark all parents as dirty.
+    if (options.bubble) {
+      let parentPath = [...path];
+      while (parentPath.length > 0) {
+        parentPath.pop();
+        setDirty(parentPath);
+      }
     }
-  >;
-  setReactiveDeps: (
-    key: string,
-    record: {
-      deps: any[];
-      updaters: Set<() => void>;
-      depsFunction: ((state: any) => any[] | true) | null;
+
+    if (changed) {
+      set({ shadowStateStore: newShadowStore });
     }
-  ) => void;
-  deleteReactiveDeps: (key: string) => void;
-  subscribe: (listener: () => void) => () => void;
-};
+  },
+  serverStateUpdates: new Map(),
+  setServerStateUpdate: (key, serverState) => {
+    set((state) => {
+      const newMap = new Map(state.serverStateUpdates);
+      newMap.set(key, serverState);
+      return { serverStateUpdates: newMap };
+    });
 
-export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
+    // Notify all subscribers for this key
+    get().notifyPathSubscribers(key, {
+      type: 'SERVER_STATE_UPDATE',
+      serverState,
+    });
+  },
   shadowStateStore: new Map(),
-  shadowStateSubscribers: new Map(),
+  pathSubscribers: new Map<string, Set<(newValue: any) => void>>(),
 
-  subscribeToShadowState: (key: string, callback: () => void) => {
-    set((state) => {
-      const newSubs = new Map(state.shadowStateSubscribers);
-      const subsForKey = newSubs.get(key) || new Set();
-      subsForKey.add(callback);
-      newSubs.set(key, subsForKey);
-      return { shadowStateSubscribers: newSubs };
-    });
+  subscribeToPath: (path, callback) => {
+    const subscribers = get().pathSubscribers;
+    const subsForPath = subscribers.get(path) || new Set();
+    subsForPath.add(callback);
+    subscribers.set(path, subsForPath);
 
-    // Return unsubscribe function
     return () => {
-      set((state) => {
-        const newSubs = new Map(state.shadowStateSubscribers);
-        const subsForKey = newSubs.get(key);
-        if (subsForKey) {
-          subsForKey.delete(callback);
-          if (subsForKey.size === 0) {
-            newSubs.delete(key);
-          }
+      const currentSubs = get().pathSubscribers.get(path);
+      if (currentSubs) {
+        currentSubs.delete(callback);
+        if (currentSubs.size === 0) {
+          get().pathSubscribers.delete(path);
         }
-        return { shadowStateSubscribers: newSubs };
-      });
+      }
     };
   },
+
+  notifyPathSubscribers: (updatedPath, newValue) => {
+    // <-- Now accepts newValue
+    const subscribers = get().pathSubscribers;
+    const subs = subscribers.get(updatedPath);
+
+    if (subs) {
+      // Pass the newValue to every callback
+      subs.forEach((callback) => callback(newValue));
+    }
+  },
   initializeShadowState: (key: string, initialState: any) => {
-    const newShadowStore = new Map<string, ShadowMetadata>();
+    const existingShadowStore = new Map(get().shadowStateStore);
 
     const processValue = (value: any, path: string[]) => {
-      const nodeKey = [key, ...path].join(".");
+      const nodeKey = [key, ...path].join('.');
 
       if (Array.isArray(value)) {
+        // Handle arrays as before
         const childIds: string[] = [];
 
         value.forEach((item) => {
-          if (typeof item === "object" && item !== null && !item.id) {
-            item.id = ulid();
-          }
+          const itemId = `id:${ulid()}`;
+          childIds.push(nodeKey + '.' + itemId);
+        });
 
-          const itemId = `id:${item.id}`;
-          childIds.push(itemId);
+        existingShadowStore.set(nodeKey, { arrayKeys: childIds });
 
-          const itemPath = [...path, itemId];
-          processValue(item, itemPath);
+        value.forEach((item, index) => {
+          const itemId = childIds[index]!.split('.').pop();
+          processValue(item, [...path!, itemId!]);
         });
-
-        const arrayContainerMetadata: ShadowMetadata = {
-          id: ulid(),
-          arrayKeys: childIds,
-        };
-        newShadowStore.set(nodeKey, arrayContainerMetadata);
-      } else if (typeof value === "object" && value !== null) {
-        newShadowStore.set(nodeKey, { id: ulid() });
+      } else if (isSimpleObject(value)) {
+        // Only create field mappings for simple objects
+        const fields = Object.fromEntries(
+          Object.keys(value).map((k) => [k, nodeKey + '.' + k])
+        );
+        existingShadowStore.set(nodeKey, { fields });
 
         Object.keys(value).forEach((k) => {
           processValue(value[k], [...path, k]);
         });
       } else {
-        newShadowStore.set(nodeKey, { id: ulid() });
+        // Treat everything else (including Uint8Array) as primitive values
+        existingShadowStore.set(nodeKey, { value });
       }
     };
 
     processValue(initialState, []);
+    set({ shadowStateStore: existingShadowStore });
+  },
 
-    set({ shadowStateStore: newShadowStore });
+  getShadowValue: (fullKey: string, validArrayIds?: string[]) => {
+    const shadowMeta = get().shadowStateStore.get(fullKey);
+
+    // If no metadata found, return undefined
+    if (!shadowMeta) {
+      return undefined;
+    }
+
+    // For primitive values, return the value
+    if (shadowMeta.value !== undefined) {
+      return shadowMeta.value;
+    }
+
+    // For arrays, reconstruct with possible validArrayIds
+    if (shadowMeta.arrayKeys) {
+      const arrayKeys = validArrayIds ?? shadowMeta.arrayKeys;
+      const items = arrayKeys.map((itemKey) => {
+        // RECURSIVELY call getShadowValue for each item
+        return get().getShadowValue(itemKey);
+      });
+      return items;
+    }
+
+    // For objects with fields, reconstruct object
+    if (shadowMeta.fields) {
+      const reconstructedObject: any = {};
+      Object.entries(shadowMeta.fields).forEach(([key, fieldPath]) => {
+        // RECURSIVELY call getShadowValue for each field
+        reconstructedObject[key] = get().getShadowValue(fieldPath as string);
+      });
+      return reconstructedObject;
+    }
+
+    return undefined;
   },
-  getShadowMetadata: (key: string, path: string[]) => {
-    const fullKey = [key, ...path].join(".");
+  getShadowMetadata: (
+    key: string,
+    path: string[],
+    validArrayIds?: string[]
+  ) => {
+    const fullKey = [key, ...path].join('.');
+    let data = get().shadowStateStore.get(fullKey);
+
     return get().shadowStateStore.get(fullKey);
   },
 
   setShadowMetadata: (key: string, path: string[], metadata: any) => {
-    const fullKey = [key, ...path].join(".");
+    const fullKey = [key, ...path].join('.');
     const newShadowStore = new Map(get().shadowStateStore);
     const existing = newShadowStore.get(fullKey) || { id: ulid() };
     newShadowStore.set(fullKey, { ...existing, ...metadata });
     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) || {};
 
-    if (metadata.virtualizer?.itemHeight) {
-      const subscribers = get().shadowStateSubscribers.get(key);
-      subscribers?.forEach((cb) => cb());
+    // Initialize transformCaches if it doesn't exist
+    if (!existing.transformCaches) {
+      existing.transformCaches = new Map();
     }
-  },
 
+    // Update just the specific cache entry
+    existing.transformCaches.set(cacheKey, cacheData);
+
+    // Update shadow store WITHOUT notifying path subscribers
+    newShadowStore.set(fullKey, existing);
+    set({ shadowStateStore: newShadowStore });
+
+    // 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 arrayKey = [key, ...arrayPath].join('.');
     const parentMeta = newShadowStore.get(arrayKey);
-    const newArrayState = get().getNestedState(key, arrayPath) as any[];
 
     if (!parentMeta || !parentMeta.arrayKeys) return;
 
-    const newItemId = `id:${newItem.id}`;
-    const newIndex = newArrayState.findIndex((item) => item.id === newItem.id);
-
-    if (newIndex === -1) 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.splice(newIndex, 0, newItemId);
+    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 (typeof value === "object" && value !== null) {
-        newShadowStore.set(nodeKey, { id: ulid() });
-        Object.keys(value).forEach((k) => {
-          processNewItem(value[k], [...path, k]);
+      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 {
-        newShadowStore.set(nodeKey, { id: ulid() });
+        // Primitive value
+        newShadowStore.set(nodeKey, { value });
       }
     };
 
     processNewItem(newItem, [...arrayPath, newItemId]);
-
     set({ shadowStateStore: newShadowStore });
-  },
 
+    get().notifyPathSubscribers(arrayKey, {
+      type: 'INSERT',
+      path: arrayKey,
+      itemKey: fullItemKey,
+    });
+  },
   removeShadowArrayElement: (key: string, itemPath: string[]) => {
     const newShadowStore = new Map(get().shadowStateStore);
-    const itemKey = [key, ...itemPath].join(".");
-    const itemIdToRemove = itemPath[itemPath.length - 1];
 
+    // Get the full item key (e.g., "stateKey.products.id:xxx")
+    const itemKey = [key, ...itemPath].join('.');
+
+    // Extract parent path and item ID
     const parentPath = itemPath.slice(0, -1);
-    const parentKey = [key, ...parentPath].join(".");
+    const parentKey = [key, ...parentPath].join('.');
+
+    // Get parent metadata
     const parentMeta = newShadowStore.get(parentKey);
 
     if (parentMeta && parentMeta.arrayKeys) {
-      const newArrayKeys = parentMeta.arrayKeys.filter(
-        (id) => id !== itemIdToRemove
+      // Find the index of the item to remove
+      const indexToRemove = parentMeta.arrayKeys.findIndex(
+        (arrayItemKey) => arrayItemKey === itemKey
       );
-      newShadowStore.set(parentKey, { ...parentMeta, arrayKeys: newArrayKeys });
-    }
 
-    const prefixToDelete = itemKey + ".";
-    for (const k of Array.from(newShadowStore.keys())) {
-      if (k === itemKey || k.startsWith(prefixToDelete)) {
-        newShadowStore.delete(k);
+      if (indexToRemove !== -1) {
+        // Create new array keys with the item removed
+        const newArrayKeys = parentMeta.arrayKeys.filter(
+          (arrayItemKey) => arrayItemKey !== itemKey
+        );
+
+        // Update parent with new array keys
+        newShadowStore.set(parentKey, {
+          ...parentMeta,
+          arrayKeys: newArrayKeys,
+        });
+
+        // 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);
+          }
+        }
       }
     }
 
     set({ shadowStateStore: newShadowStore });
+
+    get().notifyPathSubscribers(parentKey, {
+      type: 'REMOVE',
+      path: parentKey,
+      itemKey: itemKey, // The exact ID of the removed item
+    });
   },
-  updateShadowAtPath: (key: string, path: string[], newValue: any) => {
-    const fullKey = [key, ...path].join(".");
+  updateShadowAtPath: (key, path, newValue) => {
     const newShadowStore = new Map(get().shadowStateStore);
-    const existing = newShadowStore.get(fullKey) || { id: ulid() };
-    newShadowStore.set(fullKey, { ...existing, lastUpdated: Date.now() });
+    const fullKey = [key, ...path].join('.');
+
+    const updateValue = (currentKey: string, valueToSet: any) => {
+      const meta = newShadowStore.get(currentKey);
+
+      // If it's a simple object with fields, update recursively
+      if (isSimpleObject(valueToSet) && meta && meta.fields) {
+        for (const fieldKey in valueToSet) {
+          if (Object.prototype.hasOwnProperty.call(valueToSet, fieldKey)) {
+            const childPath = meta.fields[fieldKey];
+            const childValue = valueToSet[fieldKey];
+
+            if (childPath) {
+              updateValue(childPath as string, childValue);
+            }
+          }
+        }
+      } else {
+        // For primitives (including Uint8Array), just replace the value
+        // This gives you useState-like behavior
+        const existing = newShadowStore.get(currentKey) || {};
+        newShadowStore.set(currentKey, { ...existing, value: valueToSet });
+      }
+    };
+
+    updateValue(fullKey, newValue);
+    get().notifyPathSubscribers(fullKey, { type: 'UPDATE', newValue });
     set({ shadowStateStore: newShadowStore });
   },
+  selectedIndicesMap: new Map<string, string>(),
+  getSelectedIndex: (arrayKey: string, validIds?: string[]): number => {
+    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;
 
-  selectedIndicesMap: new Map<string, Map<string, number>>(),
+    if (!arrayKeys) return -1;
 
-  // Add the new methods
-  getSelectedIndex: (stateKey: string, parentPath: string) => {
-    const stateMap = get().selectedIndicesMap.get(stateKey);
-    if (!stateMap) return undefined;
-    return stateMap.get(parentPath);
+    return arrayKeys.indexOf(itemKey);
   },
 
-  setSelectedIndex: (
-    stateKey: string,
-    parentPath: string,
-    index: number | undefined
-  ) => {
+  setSelectedIndex: (arrayKey: string, itemKey: string | undefined) => {
     set((state) => {
-      const newMap = new Map(state.selectedIndicesMap);
-      let stateMap = newMap.get(stateKey);
-
-      if (!stateMap) {
-        stateMap = new Map<string, number>();
-        newMap.set(stateKey, stateMap);
-      }
+      const newMap = state.selectedIndicesMap;
 
-      if (index === undefined) {
-        stateMap.delete(parentPath);
+      if (itemKey === undefined) {
+        newMap.delete(arrayKey);
       } else {
-        stateMap.set(parentPath, index);
-      }
+        if (newMap.has(arrayKey)) {
+          get().notifyPathSubscribers(newMap.get(arrayKey)!, {
+            type: 'THIS_UNSELECTED',
+          });
+        }
+        newMap.set(arrayKey, itemKey);
 
+        get().notifyPathSubscribers(itemKey, {
+          type: 'THIS_SELECTED',
+        });
+      }
+      get().notifyPathSubscribers(arrayKey, {
+        type: 'GET_SELECTED',
+      });
       return {
         ...state,
         selectedIndicesMap: newMap,
       };
     });
   },
-  clearSelectedIndex: ({
-    stateKey,
-    path,
-  }: {
-    stateKey: string;
-    path: string[];
-  }) => {
+  clearSelectedIndex: ({ arrayKey }: { arrayKey: string }): void => {
     set((state) => {
-      const newMap = new Map(state.selectedIndicesMap);
-      const stateMap = newMap.get(stateKey);
-      if (!stateMap) return state;
-      const parentPath = path.join(".");
-      stateMap.delete(parentPath);
+      const newMap = state.selectedIndicesMap;
+      const acutalKey = newMap.get(arrayKey);
+      if (acutalKey) {
+        get().notifyPathSubscribers(acutalKey, {
+          type: 'CLEAR_SELECTION',
+        });
+      }
+
+      newMap.delete(arrayKey);
+      get().notifyPathSubscribers(arrayKey, {
+        type: 'CLEAR_SELECTION',
+      });
       return {
         ...state,
         selectedIndicesMap: newMap,
@@ -461,126 +673,23 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       const newOuterMap = new Map(state.selectedIndicesMap);
       const changed = newOuterMap.delete(stateKey);
       if (changed) {
-        console.log(
-          `Cleared selected indices map entry for stateKey: ${stateKey}`
-        );
         return { selectedIndicesMap: newOuterMap };
       } else {
         return {};
       }
     });
   },
-  stateComponents: new Map(),
-  subscribe: (listener: () => void) => {
-    // zustand's subscribe returns an unsubscribe function
-    return get().subscribe(listener);
-  },
-
-  reactiveDeps: {},
-  setReactiveDeps: (key, record) =>
-    set((state) => ({
-      ...state,
-      reactiveDeps: {
-        ...state.reactiveDeps,
-        [key]: record,
-      },
-    })),
-  deleteReactiveDeps: (key) =>
-    set((state) => {
-      const { [key]: _, ...rest } = state.reactiveDeps;
-      return {
-        ...state,
-        reactiveDeps: rest,
-      };
-    }),
-
-  reRenderTriggerPrevValue: {},
-  signalDomElements: new Map(),
-  addSignalElement: (
-    signalId: string,
-    elementInfo: { instanceId: string; parentId: string; position: number }
-  ) => {
-    const current = get().signalDomElements;
-    if (!current.has(signalId)) {
-      current.set(signalId, new Set());
-    }
-    current.get(signalId)!.add(elementInfo);
 
-    set({ signalDomElements: new Map(current) }); // Create new reference to trigger update
-  },
-  removeSignalElement: (signalId: string, instanceId: string) => {
-    const current = get().signalDomElements;
-    const elements = current.get(signalId);
-    if (elements) {
-      elements.forEach((el) => {
-        if (el.instanceId === instanceId) {
-          elements.delete(el);
-        }
-      });
-    }
-    set({ signalDomElements: new Map(current) });
-  },
   initialStateOptions: {},
-  updaterState: {},
+
   stateTimeline: {},
   cogsStateStore: {},
   stateLog: {},
-  isLoadingGlobal: {},
 
   initialStateGlobal: {},
-  iniitialCreatedState: {},
-  updateInitialCreatedState: (key, newState) => {
-    set((prev) => ({
-      iniitialCreatedState: {
-        ...prev.iniitialCreatedState,
-        [key]: newState,
-      },
-    }));
-  },
 
   validationErrors: new Map(),
 
-  serverState: {},
-
-  serverSyncActions: {},
-
-  serverSyncLog: {},
-  serverSideOrNot: {},
-  setServerSyncLog: (key, newValue) => {
-    set((state) => ({
-      serverSyncLog: {
-        ...state.serverSyncLog,
-        [key]: [...(state.serverSyncLog[key] ?? []), newValue],
-      },
-    }));
-  },
-  setServerSideOrNot: (key, value) => {
-    set((state) => ({
-      serverSideOrNot: {
-        ...state.serverSideOrNot,
-        [key]: value,
-      },
-    }));
-  },
-  getServerSideOrNot: (key) => {
-    return get().serverSideOrNot[key];
-  },
-
-  getThisLocalUpdate: (key: string) => {
-    return get().stateLog[key];
-  },
-  setServerState: <StateKey extends StateKeys>(
-    key: StateKey,
-    value: StateValue
-  ) => {
-    set((prev) => ({
-      serverState: {
-        ...prev.serverState,
-        [key]: value,
-      },
-    }));
-  },
-
   setStateLog: (
     key: string,
     updater: (prevUpdates: UpdateTypeDetail[]) => UpdateTypeDetail[]
@@ -596,28 +705,12 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       };
     });
   },
-  setIsLoadingGlobal: (key: string, value: boolean) => {
-    set((prev) => ({
-      isLoadingGlobal: {
-        ...prev.isLoadingGlobal,
-        [key]: value,
-      },
-    }));
-  },
-  setServerSyncActions: (key: string, value: SyncActionsType<any>) => {
-    set((prev) => ({
-      serverSyncActions: {
-        ...prev.serverSyncActions,
-        [key]: value,
-      },
-    }));
-  },
+
   addValidationError: (path, message) => {
-    console.log("addValidationError---");
     set((prev) => {
       const updatedErrors = new Map(prev.validationErrors);
       const existingMessages = updatedErrors.get(path) || [];
-      console.log("addValidationError", path, message, existingMessages);
+      console.log('addValidationError', path, message, existingMessages);
       // Append the new message instead of replacing
       updatedErrors.set(path, [...existingMessages, message]);
       return { validationErrors: updatedErrors };
@@ -628,9 +721,9 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       const updatedErrors = new Map(prev.validationErrors);
 
       let doSomething = false;
-      const pathArray = path.split(".");
+      const pathArray = path.split('.');
       Array.from(updatedErrors.keys()).forEach((key) => {
-        const keyArray = key.split(".");
+        const keyArray = key.split('.');
         if (keyArray.length >= pathArray.length) {
           let match = true;
           for (let i = 0; i < pathArray.length; i++) {
@@ -653,11 +746,11 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   getValidationErrors: (path: string) => {
     const errors: string[] = [];
     const valErrors = get().validationErrors;
-    const pathArray = path.split(".");
+    const pathArray = path.split('.');
 
     // Helper to check if an index matches either a wildcard or is in an array of indices
     const isIndexMatch = (pathSegment: string, keySegment: string) => {
-      if (pathSegment === "[*]") return true;
+      if (pathSegment === '[*]') return true;
       if (Array.isArray(pathSegment)) {
         return pathSegment.includes(parseInt(keySegment));
       }
@@ -665,7 +758,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     };
 
     Array.from(valErrors.keys()).forEach((key) => {
-      const keyArray = key.split(".");
+      const keyArray = key.split('.');
       if (keyArray.length >= pathArray.length) {
         let match = true;
         for (let i = 0; i < pathArray.length; i++) {
@@ -673,7 +766,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
           const keySegment = keyArray[i]!;
 
           // If current path segment is a number or [*], we need special handling
-          if (pathSegment === "[*]" || Array.isArray(pathSegment)) {
+          if (pathSegment === '[*]' || Array.isArray(pathSegment)) {
             // Key segment should be a number if we're using [*] or array indices
             const keyIndex = parseInt(keySegment);
             if (isNaN(keyIndex)) {
@@ -705,48 +798,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   getInitialOptions: (key) => {
     return get().initialStateOptions[key];
   },
-  getNestedState: (key: string, path: string[]) => {
-    const rootState = get().cogsStateStore[key];
-
-    const resolvePath = (obj: any, pathArray: string[]): any => {
-      if (pathArray.length === 0 || obj === undefined) {
-        return obj;
-      }
-
-      const currentSegment = pathArray[0];
-      const remainingPath = pathArray.slice(1);
-
-      // FIX: Handle ID-based array access like 'id:xyz'
-      if (
-        Array.isArray(obj) &&
-        typeof currentSegment === "string" &&
-        currentSegment.startsWith("id:")
-      ) {
-        const targetId = currentSegment.split(":")[1];
-        const foundItem = obj.find(
-          (item) => item && String(item.id) === targetId
-        );
-        return resolvePath(foundItem, remainingPath);
-      }
-
-      // Handle wildcard array access: '[*]'
-      if (currentSegment === "[*]") {
-        if (!Array.isArray(obj)) {
-          console.warn("Asterisk notation used on non-array value");
-          return undefined;
-        }
-        if (remainingPath.length === 0) return obj;
-        const results = obj.map((item) => resolvePath(item, remainingPath));
-        return Array.isArray(results[0]) ? results.flat() : results;
-      }
-
-      // Handle standard object property access and numeric array indices
-      const nextObj = obj[currentSegment as keyof typeof obj];
-      return resolvePath(nextObj, remainingPath);
-    };
 
-    return resolvePath(rootState, path);
-  },
   setInitialStateOptions: (key, value) => {
     set((prev) => ({
       initialStateOptions: {
@@ -763,49 +815,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       },
     }));
   },
-  getUpdaterState: (key) => {
-    return get().updaterState[key];
-  },
-  setUpdaterState: (key, newUpdater) => {
-    const current = get().updaterState;
-
-    if (!key || !newUpdater) return;
-
-    set({ updaterState: { ...(current ?? {}), [key]: newUpdater } });
-  },
-  getKeyState: <StateKey extends StateKeys>(key: StateKey) => {
-    return get().cogsStateStore[key];
-  },
-
-  setState: <StateKey extends StateKeys>(key: StateKey, value: StateValue) => {
-    set((prev) => {
-      return {
-        cogsStateStore: {
-          ...prev.cogsStateStore,
-          [key]:
-            typeof value === "function"
-              ? value(prev.cogsStateStore[key])
-              : value,
-        },
-      };
-    });
-  },
-  setInitialStates: <StateKey extends StateKeys>(initialState: StateValue) => {
-    set((prev) => ({
-      cogsStateStore: {
-        ...prev.cogsStateStore,
-        ...initialState,
-      },
-    }));
-  },
-  setCreatedState: (initialState: StateValue) => {
-    set((prev) => ({
-      iniitialCreatedState: {
-        ...prev.cogsStateStore,
-        ...initialState,
-      },
-    }));
-  },
 
   syncInfoStore: new Map<string, SyncInfo>(),
   setSyncInfo: (key: string, syncInfo: SyncInfo) =>