cogsbox-state 0.5.465 → 0.5.467

package/src/store.ts

@@ -7,7 +7,7 @@ import type {
   UpdateTypeDetail,
 } from './CogsState.js';
 
-import { startTransition, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 export type FreshValuesObject = {
   pathsToValues?: string[];
@@ -28,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>>;
@@ -53,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 + '.';
@@ -83,26 +81,25 @@ export type ComponentsType = {
 };
 
 export type ValidationStatus =
-  | 'NOT_VALIDATED' // Never run
-  | 'VALIDATING' // Currently running
-  | 'VALID' // Passed
-  | 'INVALID'; // Failed
+  | 'NOT_VALIDATED'
+  | 'VALIDATING'
+  | 'VALID'
+  | 'INVALID';
 
 export type ValidationError = {
   source: 'client' | 'sync_engine' | 'api';
   message: string;
-  severity: 'warning' | 'error'; // warning = gentle, error = blocking
-  code?: string; // Optional error code
+  severity: 'warning' | 'error';
+  code?: string;
 };
 
 export type ValidationState = {
   status: ValidationStatus;
   errors: ValidationError[];
   lastValidated?: number;
-  validatedValue?: any; // Value when last validated
+  validatedValue?: any;
 };
 
-// This is the new definition for the metadata object
 export type ShadowMetadata = {
   id?: string;
   stateSource?: 'default' | 'server' | 'localStorage';
@@ -156,28 +153,21 @@ export type ShadowMetadata = {
   >;
 } & ComponentsType;
 
-// The shadow node itself can have a value and the metadata object.
 type ShadowNode = {
   value?: any;
   _meta?: ShadowMetadata;
-  [key: string]: any; // For nested data properties
+  [key: string]: any;
 };
 
 export type CogsGlobalState = {
-  // NEW shadow store
-  shadowStateStore: Map<string, ShadowNode>; // Changed ShadowMetadata to ShadowNode
   setTransformCache: (
     key: string,
     path: string[],
     cacheKey: string,
     cacheData: any
   ) => void;
-  // NEW functions
   initializeShadowState: (key: string, initialState: any) => void;
-
-  // REFACTORED: getShadowNode gets the whole object (data + _meta)
   getShadowNode: (key: string, path: string[]) => ShadowNode | undefined;
-  // REFACTORED: getShadowMetadata now returns just the _meta field
   getShadowMetadata: (
     key: string,
     path: string[]
@@ -191,6 +181,18 @@ export type CogsGlobalState = {
     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[],
@@ -209,13 +211,11 @@ export type CogsGlobalState = {
     dependencyPath: string[],
     fullComponentId: string
   ) => void;
-
   markAsDirty: (
     key: string,
     path: string[],
     options: { bubble: boolean }
   ) => void;
-  // These method signatures stay the same
 
   pathSubscribers: Map<string, Set<(newValue: any) => void>>;
   subscribeToPath: (
@@ -230,12 +230,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;
@@ -260,51 +256,45 @@ export type CogsGlobalState = {
   getSyncInfo: (key: string) => SyncInfo | null;
 };
 
-// ✅ CHANGE 1: `METADATA_KEYS` now only contains `_meta` and `value`.
-// The other keys are now properties of the `ShadowMetadata` type.
-export const METADATA_KEYS = new Set(['_meta', 'value']);
-
-/**
- * The single source of truth for converting a regular JS value/object
- * into the shadow state tree format with the new `_meta` structure.
- */
-// ✅ CHANGE 2: `buildShadowNode` now creates the `_meta` field.
 export function buildShadowNode(value: any): ShadowNode {
-  // Primitives and null are wrapped.
   if (value === null || typeof value !== 'object') {
     return { value };
   }
 
-  // Arrays are converted to an object with id-keyed children and metadata in `_meta`.
   if (Array.isArray(value)) {
-    const arrayNode: ShadowNode = { _meta: { arrayKeys: [] } }; // Initialize with _meta and arrayKeys
+    const arrayNode: ShadowNode = { _meta: { arrayKeys: [] } };
     const idKeys: string[] = [];
+
     value.forEach((item) => {
       const itemId = `id:${ulid()}`;
-      arrayNode[itemId] = buildShadowNode(item); // Recurse for each item
+      arrayNode[itemId] = buildShadowNode(item);
       idKeys.push(itemId);
     });
-    arrayNode._meta!.arrayKeys = idKeys; // Set the final ordered keys
+
+    arrayNode._meta!.arrayKeys = idKeys;
     return arrayNode;
   }
 
-  // Plain objects are recursively processed.
   if (value.constructor === Object) {
-    const objectNode: ShadowNode = { _meta: {} }; // Initialize with an empty meta object
+    const objectNode: ShadowNode = { _meta: {} };
     for (const key in value) {
       if (Object.prototype.hasOwnProperty.call(value, key)) {
-        objectNode[key] = buildShadowNode(value[key]); // Recurse for each property
+        objectNode[key] = buildShadowNode(value[key]);
       }
     }
     return objectNode;
   }
 
-  // Fallback for other object types (Date, etc.) - treat them as primitives.
   return { value };
 }
+// store.ts - Replace the shadow store methods with mutable versions
+// store.ts - Replace the shadow store methods with mutable versions
+
+// Module-level mutable store
+const shadowStateStore = new Map<string, ShadowNode>();
 
 export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
-  shadowStateStore: new Map<string, ShadowNode>(),
+  // Remove shadowStateStore from Zustand state
 
   setTransformCache: (
     key: string,
@@ -312,7 +302,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     cacheKey: string,
     cacheData: any
   ) => {
-    // This function now uses setShadowMetadata which correctly places the data.
     const metadata = get().getShadowMetadata(key, path) || {};
     if (!metadata.transformCaches) {
       metadata.transformCaches = new Map();
@@ -324,48 +313,39 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   },
 
   initializeShadowState: (key: string, initialState: any) => {
-    set((state) => {
-      const newShadowStore = new Map(state.shadowStateStore);
-      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;
-      }
-
-      newShadowStore.delete(key);
-      newShadowStore.delete(`[${key}`);
+    const existingRoot =
+      shadowStateStore.get(key) || shadowStateStore.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;
+    }
 
-      const newRoot = buildShadowNode(initialState);
-      // Ensure _meta exists before assigning to it
-      if (!newRoot._meta) newRoot._meta = {};
-      Object.assign(newRoot._meta, preservedMetadata);
+    shadowStateStore.delete(key);
+    shadowStateStore.delete(`[${key}`);
 
-      const storageKey = Array.isArray(initialState) ? `[${key}` : key;
-      newShadowStore.set(storageKey, newRoot);
+    const newRoot = buildShadowNode(initialState);
+    if (!newRoot._meta) newRoot._meta = {};
+    Object.assign(newRoot._meta, preservedMetadata);
 
-      return { shadowStateStore: newShadowStore };
-    });
+    const storageKey = Array.isArray(initialState) ? `[${key}` : key;
+    shadowStateStore.set(storageKey, newRoot);
   },
 
-  // ✅ NEW HELPER: Gets the entire node (data and metadata).
   getShadowNode: (key: string, path: string[]): ShadowNode | undefined => {
-    const store = get().shadowStateStore;
-    let current: any = store.get(key) || store.get(`[${key}`);
-
+    let current: any =
+      shadowStateStore.get(key) || shadowStateStore.get(`[${key}`);
     if (!current) return undefined;
     if (path.length === 0) return current;
 
@@ -377,7 +357,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return current;
   },
 
-  // ✅ REFACTORED: Returns only the `_meta` part of a node.
   getShadowMetadata: (
     key: string,
     path: string[]
@@ -386,38 +365,37 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return node?._meta;
   },
 
-  // ✅ REFACTORED: Sets data within the `_meta` object.
   setShadowMetadata: (
     key: string,
     path: string[],
     newMetadata: Partial<ShadowMetadata>
   ) => {
-    set((state) => {
-      const newStore = new Map(state.shadowStateStore);
-      const rootKey = newStore.has(`[${key}`) ? `[${key}` : key;
-      let root = newStore.get(rootKey);
+    // Direct mutation - no cloning!
+    const rootKey = shadowStateStore.has(`[${key}`) ? `[${key}` : key;
+    let root = shadowStateStore.get(rootKey);
 
-      if (!root) {
-        root = {};
-        newStore.set(rootKey, root);
-      }
-
-      const clonedRoot: any = { ...root };
-      newStore.set(rootKey, clonedRoot);
+    if (!root) {
+      root = { _meta: newMetadata };
+      shadowStateStore.set(rootKey, root);
+      return;
+    }
 
-      let current = clonedRoot;
-      for (const segment of path) {
-        const nextNode = current[segment] || {};
-        current[segment] = { ...nextNode }; // Clone for immutability
-        current = current[segment];
+    // Navigate to target without cloning
+    let current = root;
+    for (const segment of path) {
+      if (!current[segment]) {
+        current[segment] = {};
       }
+      current = current[segment];
+    }
 
-      // Ensure _meta object exists and merge the new metadata into it
-      current._meta = { ...(current._meta || {}), ...newMetadata };
-
-      return { shadowStateStore: newStore };
-    });
+    // Mutate metadata directly
+    if (!current._meta) {
+      current._meta = {};
+    }
+    Object.assign(current._meta, newMetadata);
   },
+
   getShadowValue: (
     key: string,
     path: string[],
@@ -430,9 +408,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
 
     const nodeKeys = Object.keys(node);
 
-    // ✅ FIX: A node is a primitive wrapper ONLY if its keys are 'value' and/or '_meta'.
-    // This prevents objects in your data that happen to have a "value" property from being
-    // incorrectly treated as wrappers.
     const isPrimitiveWrapper =
       Object.prototype.hasOwnProperty.call(node, 'value') &&
       nodeKeys.every((k) => k === 'value' || k === '_meta');
@@ -441,7 +416,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       return node.value;
     }
 
-    // Array Check (This part is correct)
     const isArrayNode =
       node._meta &&
       Object.prototype.hasOwnProperty.call(node._meta, 'arrayKeys');
@@ -456,10 +430,8 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       );
     }
 
-    // Object Reconstruction (This part is also correct)
     const result: any = {};
     for (const propKey of nodeKeys) {
-      // We correctly ignore metadata and array item keys here.
       if (propKey !== '_meta' && !propKey.startsWith('id:')) {
         result[propKey] = get().getShadowValue(key, [...path, propKey]);
       }
@@ -467,59 +439,108 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return result;
   },
 
-  // ✅ REFACTORED: Correctly preserves `_meta` on updates.
   updateShadowAtPath: (key, path, newValue) => {
-    set((state) => {
-      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);
-
-      if (path.length === 0) {
-        const newRootStructure = buildShadowNode(newValue);
-        // Preserve the top-level metadata
-        if (clonedRoot._meta) {
-          newRootStructure._meta = {
-            ...(newRootStructure._meta || {}),
-            ...clonedRoot._meta,
-          };
+    // NO MORE set() wrapper - direct mutation!
+    const rootKey = shadowStateStore.has(`[${key}`) ? `[${key}` : key;
+    let root = shadowStateStore.get(rootKey);
+    if (!root) return;
+
+    // Navigate to parent without cloning
+    let parentNode = root;
+    for (let i = 0; i < path.length - 1; i++) {
+      if (!parentNode[path[i]!]) {
+        parentNode[path[i]!] = {};
+      }
+      parentNode = parentNode[path[i]!];
+    }
+
+    const targetNode =
+      path.length === 0 ? parentNode : parentNode[path[path.length - 1]!];
+
+    if (!targetNode) {
+      parentNode[path[path.length - 1]!] = buildShadowNode(newValue);
+      get().notifyPathSubscribers([key, ...path].join('.'), {
+        type: 'UPDATE',
+        newValue,
+      });
+      return;
+    }
+
+    function intelligentMerge(nodeToUpdate: any, plainValue: any) {
+      if (
+        typeof plainValue !== 'object' ||
+        plainValue === null ||
+        Array.isArray(plainValue)
+      ) {
+        const oldMeta = nodeToUpdate._meta;
+        // Clear existing properties
+        for (const key in nodeToUpdate) {
+          if (key !== '_meta') delete nodeToUpdate[key];
         }
-        newStore.set(rootKey, newRootStructure);
-      } else {
-        let current = clonedRoot;
-        const parentPath = path.slice(0, -1);
-        for (const segment of parentPath) {
-          current[segment] = { ...current[segment] };
-          current = current[segment];
+        const newNode = buildShadowNode(plainValue);
+        Object.assign(nodeToUpdate, newNode);
+        if (oldMeta) {
+          nodeToUpdate._meta = { ...oldMeta, ...(nodeToUpdate._meta || {}) };
         }
+        return;
+      }
 
-        const lastSegment = path[path.length - 1]!;
-        const existingNode = current[lastSegment] || {};
-        const newNodeStructure = buildShadowNode(newValue);
+      const plainValueKeys = new Set(Object.keys(plainValue));
 
-        // This merge is critical: it preserves existing metadata during an update.
-        if (existingNode._meta) {
-          newNodeStructure._meta = {
-            ...(newNodeStructure._meta || {}),
-            ...existingNode._meta,
-          };
+      for (const propKey of plainValueKeys) {
+        const childValue = plainValue[propKey];
+        if (nodeToUpdate[propKey]) {
+          intelligentMerge(nodeToUpdate[propKey], childValue);
+        } else {
+          nodeToUpdate[propKey] = buildShadowNode(childValue);
         }
-        current[lastSegment] = newNodeStructure;
       }
 
-      get().notifyPathSubscribers([key, ...path].join('.'), {
-        type: 'UPDATE',
-        newValue,
-      });
-      return { shadowStateStore: newStore };
+      for (const nodeKey in nodeToUpdate) {
+        if (
+          nodeKey === '_meta' ||
+          !Object.prototype.hasOwnProperty.call(nodeToUpdate, nodeKey)
+        )
+          continue;
+
+        if (!plainValueKeys.has(nodeKey)) {
+          delete nodeToUpdate[nodeKey];
+        }
+      }
+    }
+
+    intelligentMerge(targetNode, newValue);
+
+    get().notifyPathSubscribers([key, ...path].join('.'), {
+      type: 'UPDATE',
+      newValue,
     });
   },
 
-  // ✅ REFACTORED: Works with `_meta.arrayKeys`.
+  addItemsToArrayNode: (key, arrayPath, newItems, newKeys) => {
+    // Direct mutation - no cloning!
+    const rootKey = shadowStateStore.has(`[${key}`) ? `[${key}` : key;
+    let root = shadowStateStore.get(rootKey);
+    if (!root) {
+      console.error('Root not found for state key:', key);
+      return;
+    }
+
+    // Navigate without cloning
+    let current = root;
+    for (const segment of arrayPath) {
+      if (!current[segment]) {
+        current[segment] = {};
+      }
+      current = current[segment];
+    }
+
+    // Mutate directly
+    Object.assign(current, newItems);
+    if (!current._meta) current._meta = {};
+    current._meta.arrayKeys = newKeys; // Direct assignment!
+  },
+
   insertShadowArrayElement: (key, arrayPath, newItem, index) => {
     const arrayNode = get().getShadowNode(key, arrayPath);
     if (!arrayNode?._meta?.arrayKeys) {
@@ -530,53 +551,79 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     }
 
     const newItemId = `id:${ulid()}`;
-    const newItemNode = buildShadowNode(newItem);
+    const itemsToAdd = { [newItemId]: buildShadowNode(newItem) };
 
-    // Update the `arrayKeys` in the metadata
+    // Mutate the array directly
     const currentKeys = arrayNode._meta.arrayKeys;
-    const newKeys = [...currentKeys];
-    if (index !== undefined && index >= 0 && index <= newKeys.length) {
-      newKeys.splice(index, 0, newItemId);
+    const insertionPoint =
+      index !== undefined && index >= 0 && index <= currentKeys.length
+        ? index
+        : currentKeys.length;
+
+    if (insertionPoint >= currentKeys.length) {
+      currentKeys.push(newItemId); // O(1)
     } else {
-      newKeys.push(newItemId);
+      currentKeys.splice(insertionPoint, 0, newItemId); // O(n) only for middle
     }
 
-    // Update transform caches if they exist
-    if (arrayNode._meta.transformCaches) {
-      arrayNode._meta.transformCaches.forEach((cache) => {
-        if (cache.validIds && Array.isArray(cache.validIds)) {
-          const matchesFilters = cache.transforms.every((transform) =>
-            transform.type === 'filter' ? transform.fn(newItem) : true
-          );
-          if (matchesFilters) {
-            cache.validIds = [...cache.validIds];
-            if (index !== undefined) {
-              cache.validIds.splice(index, 0, newItemId);
-            } else {
-              cache.validIds.push(newItemId);
-            }
-          }
-        }
-      });
+    // Pass the mutated array
+    get().addItemsToArrayNode(key, arrayPath, itemsToAdd, currentKeys);
+
+    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;
     }
 
-    // Directly set the new item and updated metadata on the node before setting state
-    arrayNode[newItemId] = newItemNode;
-    arrayNode._meta.arrayKeys = newKeys;
+    const arrayNode = get().getShadowNode(key, arrayPath);
+    if (!arrayNode?._meta?.arrayKeys) {
+      console.error(
+        `Array not found at path: ${[key, ...arrayPath].join('.')}`
+      );
+      return;
+    }
 
-    get().setShadowMetadata(key, arrayPath, { arrayKeys: newKeys });
+    const itemsToAdd: Record<string, any> = {};
+    const newIds: string[] = [];
+
+    newItems.forEach((item) => {
+      const newItemId = `id:${ulid()}`;
+      newIds.push(newItemId);
+      itemsToAdd[newItemId] = buildShadowNode(item);
+    });
+
+    // Mutate directly
+    const currentKeys = arrayNode._meta.arrayKeys;
+    const insertionPoint =
+      index !== undefined && index >= 0 && index <= currentKeys.length
+        ? index
+        : currentKeys.length;
+
+    if (insertionPoint >= currentKeys.length) {
+      currentKeys.push(...newIds); // O(k) where k is items being added
+    } else {
+      currentKeys.splice(insertionPoint, 0, ...newIds); // O(n + k)
+    }
+
+    get().addItemsToArrayNode(key, arrayPath, itemsToAdd, currentKeys);
 
-    // Trigger notifications
     const arrayKey = [key, ...arrayPath].join('.');
     get().notifyPathSubscribers(arrayKey, {
-      type: 'INSERT',
+      type: 'INSERT_MANY',
       path: arrayKey,
-      itemKey: `${arrayKey}.${newItemId}`,
-      index: index ?? newKeys.length - 1,
+      count: newItems.length,
+      index: insertionPoint,
     });
   },
 
-  // ✅ REFACTORED: Works with `_meta.arrayKeys`.
   removeShadowArrayElement: (key, itemPath) => {
     if (itemPath.length === 0) return;
 
@@ -587,14 +634,27 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     const arrayNode = get().getShadowNode(key, arrayPath);
     if (!arrayNode?._meta?.arrayKeys) return;
 
-    // Filter the item's ID from the `arrayKeys` metadata
-    const newKeys = arrayNode._meta.arrayKeys.filter((k) => k !== itemId);
+    // Mutate directly
+    const currentKeys = arrayNode._meta.arrayKeys;
+    const indexToRemove = currentKeys.indexOf(itemId);
 
-    // Delete the item's data from the node
+    if (indexToRemove === -1) return;
+
+    // O(1) for removing from end
+    if (indexToRemove === currentKeys.length - 1) {
+      currentKeys.pop();
+    }
+    // O(n) for removing from beginning or middle
+    else if (indexToRemove === 0) {
+      currentKeys.shift();
+    } else {
+      currentKeys.splice(indexToRemove, 1);
+    }
+
+    // Delete the actual item
     delete arrayNode[itemId];
 
-    // Persist the modified array node back to the store
-    get().setShadowMetadata(key, arrayPath, { arrayKeys: newKeys });
+    // No need to update metadata - already mutated!
 
     const arrayKey = [key, ...arrayPath].join('.');
     get().notifyPathSubscribers(arrayKey, {
@@ -604,8 +664,21 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     });
   },
 
-  // The rest of the functions are updated to use the new helpers (`getShadowMetadata`, `setShadowMetadata`)
-  // which abstracts away the `_meta` implementation detail.
+  registerComponent: (stateKey, fullComponentId, registration) => {
+    const rootMeta = get().getShadowMetadata(stateKey, []) || {};
+    const components = new Map(rootMeta.components);
+    components.set(fullComponentId, registration);
+    get().setShadowMetadata(stateKey, [], { components });
+  },
+
+  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 });
+    }
+  },
 
   addPathComponent: (stateKey, dependencyPath, fullComponentId) => {
     const metadata = get().getShadowMetadata(stateKey, dependencyPath) || {};
@@ -630,31 +703,14 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     }
   },
 
-  registerComponent: (stateKey, fullComponentId, registration) => {
-    const rootMeta = get().getShadowMetadata(stateKey, []) || {};
-    const components = new Map(rootMeta.components);
-    components.set(fullComponentId, registration);
-    get().setShadowMetadata(stateKey, [], { components });
-  },
-
-  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 });
-    }
-  },
-
-  // ✅ REFACTORED: `markAsDirty` now correctly writes to `_meta.isDirty`.
   markAsDirty: (key, path, options = { bubble: true }) => {
     const setDirtyOnPath = (pathToMark: string[]) => {
       const node = get().getShadowNode(key, pathToMark);
       if (node?._meta?.isDirty) {
-        return true; // Already dirty, stop bubbling
+        return true;
       }
       get().setShadowMetadata(key, pathToMark, { isDirty: true });
-      return false; // Was not dirty before
+      return false;
     };
 
     setDirtyOnPath(path);
@@ -664,12 +720,13 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       while (parentPath.length > 0) {
         parentPath.pop();
         if (setDirtyOnPath(parentPath)) {
-          break; // Stop if parent was already dirty
+          break;
         }
       }
     }
   },
 
+  // Keep these in Zustand as they need React reactivity
   serverStateUpdates: new Map(),
   setServerStateUpdate: (key, serverState) => {
     set((state) => ({
@@ -701,6 +758,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       }
     };
   },
+
   notifyPathSubscribers: (updatedPath, newValue) => {
     const subscribers = get().pathSubscribers;
     const subs = subscribers.get(updatedPath);
@@ -723,36 +781,49 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return arrayKeys ? arrayKeys.indexOf(itemKey) : -1;
   },
 
-  setSelectedIndex: (arrayKey, itemKey) => {
+  setSelectedIndex: (arrayKey: string, itemKey: string | undefined) => {
     set((state) => {
       const newMap = new Map(state.selectedIndicesMap);
-      const oldSelection = newMap.get(arrayKey);
-      if (oldSelection) {
-        get().notifyPathSubscribers(oldSelection, { type: 'THIS_UNSELECTED' });
-      }
 
       if (itemKey === undefined) {
         newMap.delete(arrayKey);
       } else {
+        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 { selectedIndicesMap: newMap };
+
+      return {
+        ...state,
+        selectedIndicesMap: newMap,
+      };
     });
   },
 
-  clearSelectedIndex: ({ arrayKey }) => {
+  clearSelectedIndex: ({ arrayKey }: { arrayKey: string }): void => {
     set((state) => {
       const newMap = new Map(state.selectedIndicesMap);
       const actualKey = newMap.get(arrayKey);
       if (actualKey) {
-        get().notifyPathSubscribers(actualKey, { type: 'CLEAR_SELECTION' });
+        get().notifyPathSubscribers(actualKey, {
+          type: 'CLEAR_SELECTION',
+        });
       }
+
       newMap.delete(arrayKey);
-      get().notifyPathSubscribers(arrayKey, { type: 'CLEAR_SELECTION' });
-      return { selectedIndicesMap: newMap };
+      get().notifyPathSubscribers(arrayKey, {
+        type: 'CLEAR_SELECTION',
+      });
+      return {
+        ...state,
+        selectedIndicesMap: newMap,
+      };
     });
   },
 
@@ -801,6 +872,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       initialStateOptions: { ...prev.initialStateOptions, [key]: value },
     }));
   },
+
   updateInitialStateGlobal: (key, newState) => {
     set((prev) => ({
       initialStateGlobal: { ...prev.initialStateGlobal, [key]: newState },