cogsbox-state 0.5.427 → 0.5.428

package/src/Functions.tsx

@@ -7,11 +7,17 @@ import {
   type UpdateOpts,
 } from "./CogsState";
 
-import { getNestedValue, isFunction, updateNestedProperty } from "./utility";
+import {
+  getNestedValue,
+  isFunction,
+  updateNestedProperty,
+  updateNestedPropertyIds,
+} from "./utility";
 import { useEffect, useRef, useState } from "react";
 import React from "react";
 import { getGlobalStore, formRefStore } from "./store";
 import { validateZodPathFunc } from "./useValidateZodPath";
+import { ulid } from "ulid";
 
 export function updateFn<U>(
   setState: EffectiveSetState<U>,
@@ -23,7 +29,9 @@ export function updateFn<U>(
     (prevState) => {
       if (isFunction<U>(payload)) {
         const nestedValue = payload(getNestedValue(prevState, path));
-        let value = updateNestedProperty(path, prevState, nestedValue);
+        console.group("nestedValue", path, nestedValue);
+        let value = updateNestedPropertyIds(path, prevState, nestedValue);
+        console.group("updateFn", value);
         if (typeof value == "string") {
           value = value.trim();
         }
@@ -32,7 +40,7 @@ export function updateFn<U>(
         let value =
           !path || path.length == 0
             ? payload
-            : updateNestedProperty(path, prevState, payload);
+            : updateNestedPropertyIds(path, prevState, payload);
         if (typeof value == "string") {
           value = value.trim();
         }
@@ -44,7 +52,6 @@ export function updateFn<U>(
     validationKey
   );
 }
-
 export function pushFunc<U>(
   setState: EffectiveSetState<U>,
   payload: UpdateArg<U>,
@@ -52,68 +59,69 @@ export function pushFunc<U>(
   stateKey: string,
   index?: number
 ): void {
-  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];
+  // --- THE FIX ---
+  // 1. Determine the newItem and its ID BEFORE calling setState.
+  const arrayBeforeUpdate =
+    (getGlobalStore.getState().getNestedState(stateKey, path) as any[]) || [];
+
+  const newItem = isFunction<U>(payload)
+    ? payload(arrayBeforeUpdate as any)
+    : payload;
+
+  // 2. Ensure it has an ID.
+  if (typeof newItem === "object" && newItem !== null && !(newItem as any).id) {
+    (newItem as any).id = ulid();
+  }
+  const finalId = (newItem as any).id;
+  // --- END OF FIX ---
+
   setState(
     (prevState) => {
-      let arrayToUpdate =
-        !path || path.length == 0
-          ? prevState
-          : getNestedValue(prevState, [...path]);
-      let returnedArray = [...arrayToUpdate];
-
-      returnedArray.splice(
-        index || Number(index) == 0 ? index : arrayToUpdate.length,
-        0,
-        isFunction<U>(payload)
-          ? payload(index == -1 ? undefined : arrayToUpdate)
-          : payload
-      );
-      const value =
-        path.length == 0
-          ? returnedArray
-          : updateNestedProperty([...path], prevState, returnedArray);
-
-      return value as U;
+      // The logic inside here is now much simpler.
+      // We already have the final `newItem`.
+      const arrayToUpdate = getNestedValue(prevState, [...path]) || [];
+      const newArray = [...arrayToUpdate];
+      newArray.splice(index ?? newArray.length, 0, newItem);
+      return updateNestedPropertyIds([...path], prevState, newArray);
     },
-    [
-      ...path,
-      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),
-    ],
+    [...path, `id:${finalId}`], // Now we use the ID that is guaranteed to be correct.
     {
       updateType: "insert",
     }
   );
 }
-
 export function cutFunc<U>(
   setState: EffectiveSetState<U>,
   path: string[],
   stateKey: string,
   index: number
 ): void {
-  const array = getGlobalStore.getState().getNestedState(stateKey, path) as U[];
+  // Get the ordered IDs to find the ID for this index
+  const arrayKey = [stateKey, ...path].join(".");
+  const arrayMeta = getGlobalStore.getState().shadowStateStore.get(arrayKey);
+  const itemId = arrayMeta?.arrayKeys?.[index];
+
+  if (!itemId) {
+    throw new Error(`No ID found for index ${index} in array`);
+  }
+
   setState(
     (prevState) => {
       const arrayToUpdate = getNestedValue(prevState, [...path]);
       if (index < 0 || index >= arrayToUpdate?.length) {
         throw new Error(`Index ${index} does not exist in the array.`);
       }
-      const indexToCut =
-        index || Number(index) == 0 ? index : arrayToUpdate.length - 1;
 
       const updatedArray = [
-        ...arrayToUpdate.slice(0, indexToCut),
-        ...arrayToUpdate.slice(indexToCut + 1),
+        ...arrayToUpdate.slice(0, index),
+        ...arrayToUpdate.slice(index + 1),
       ] as U;
 
       return path.length == 0
         ? updatedArray
-        : updateNestedProperty([...path], prevState, updatedArray);
+        : updateNestedPropertyIds([...path], prevState, updatedArray);
     },
-    [
-      ...path,
-      index || index === 0 ? index?.toString() : (array!.length - 1).toString(),
-    ],
+    [...path, itemId], // Use the ID here!
     { updateType: "cut" }
   );
 }

package/src/store.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { ulid } from "ulid";
 import type {
   OptionsType,
   ReactivityType,
@@ -86,51 +87,42 @@ export const formRefStore = create<FormRefStoreState>((set, get) => ({
   },
 }));
 
-export type ItemMeta = {
-  _cogsId: string;
+export type ShadowMetadata = {
+  id: string;
+  arrayKeys?: string[];
   virtualizer?: {
     itemHeight?: number;
-    domRef?: HTMLDivElement | null;
+    domRef?: HTMLElement | null;
   };
-  syncStatus?: "new" | "syncing" | "synced" | "failed";
-  error?: string;
+  syncInfo?: { status: string };
+  lastUpdated?: number;
 };
-
-// THE NEW, CORRECT, RECURSIVE TYPE FOR THE SHADOW STATE
-// A ShadowNode is either:
-// 1. An array of ItemMeta (if it represents a user's array).
-// 2. An object that can be indexed by any string, whose values are other ShadowNodes.
-export type ShadowNode = ItemMeta[] | { [key: string]: ShadowNode };
-
-// This is the top-level type for the store, mapping state keys to our ShadowNode structure.
-export type ShadowStateStore = {
-  [key: string]: ShadowNode;
-};
-
 export type CogsGlobalState = {
   // --- Shadow State and Subscription System ---
-  shadowStateStore: ShadowStateStore;
-  shadowStateSubscribers: Map<string, Set<() => void>>;
-  subscribeToShadowState: (key: string, callback: () => void) => () => void;
-  initializeShadowState: <T>(key: string, initialState: T) => void;
-  updateShadowAtPath: <T>(key: string, path: string[], newValue: T) => void;
+  shadowStateStore: Map<string, ShadowMetadata>;
+
+  // 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[],
-    newItemMeta: ItemMeta
+    newItem: any
   ) => void;
-  removeShadowArrayElement: (
+  removeShadowArrayElement: (key: string, arrayPath: string[]) => void;
+  getShadowMetadata: (
     key: string,
-    arrayPath: string[],
-    index: number
-  ) => void;
-  getShadowMetadata: (key: string, path: string[]) => ShadowNode | null;
+    path: string[]
+  ) => ShadowMetadata | undefined;
   setShadowMetadata: (
     key: string,
     path: string[],
-    metadata: Partial<ItemMeta>
+    metadata: Omit<ShadowMetadata, "id">
   ) => void;
-  // --- Selected Item State ---
+
+  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,
@@ -253,192 +245,163 @@ export type CogsGlobalState = {
 };
 
 export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
-  shadowStateStore: {},
-  getShadowMetadata: (key: string, path: string[]) => {
-    const shadow = get().shadowStateStore[key];
-    if (!shadow) return null;
-
-    let current: any = shadow;
-    for (const segment of path) {
-      current = current?.[segment];
-      if (!current) return null;
-    }
+  shadowStateStore: new Map(),
+  shadowStateSubscribers: new Map(),
 
-    return current;
-  },
+  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 };
+    });
 
-  initializeShadowState: (key: string, initialState: any) => {
-    const createShadowStructure = (obj: any): any => {
-      if (Array.isArray(obj)) {
-        return new Array(obj.length)
-          .fill(null)
-          .map((_, i) => createShadowStructure(obj[i]));
-      }
-      if (typeof obj === "object" && obj !== null) {
-        const shadow: any = {};
-        for (const k in obj) {
-          shadow[k] = createShadowStructure(obj[k]);
+    // 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);
+          }
         }
-        return shadow;
-      }
-      return {}; // Leaf node - empty object for metadata
+        return { shadowStateSubscribers: newSubs };
+      });
     };
-
-    set((state) => ({
-      shadowStateStore: {
-        ...state.shadowStateStore,
-        [key]: createShadowStructure(initialState),
-      },
-    }));
   },
+  initializeShadowState: (key: string, initialState: any) => {
+    const newShadowStore = new Map<string, ShadowMetadata>();
 
-  updateShadowAtPath: (key: string, path: string[], newValue: any) => {
-    set((state) => {
-      const newShadow = { ...state.shadowStateStore };
-      if (!newShadow[key]) return state;
-
-      let current: any = newShadow[key];
-      const pathCopy = [...path];
-      const lastSegment = pathCopy.pop();
-
-      // Navigate to parent
-      for (const segment of pathCopy) {
-        if (!current[segment]) current[segment] = {};
-        current = current[segment];
-      }
+    const processValue = (value: any, path: string[]) => {
+      const nodeKey = [key, ...path].join(".");
 
-      // Update shadow structure to match new value structure
-      if (lastSegment !== undefined) {
-        if (Array.isArray(newValue)) {
-          current[lastSegment] = new Array(newValue.length);
-        } else if (typeof newValue === "object" && newValue !== null) {
-          current[lastSegment] = {};
-        } else {
-          current[lastSegment] = current[lastSegment] || {};
-        }
-      }
+      if (Array.isArray(value)) {
+        const childIds: string[] = [];
 
-      return { shadowStateStore: newShadow };
-    });
-  },
+        value.forEach((item) => {
+          if (typeof item === "object" && item !== null && !item.id) {
+            item.id = ulid();
+          }
 
-  insertShadowArrayElement: (
-    key: string,
-    arrayPath: string[],
-    newItem: any
-  ) => {
-    set((state) => {
-      const newShadow = { ...state.shadowStateStore };
-      if (!newShadow[key]) return state;
+          const itemId = `id:${item.id}`;
+          childIds.push(itemId);
 
-      newShadow[key] = JSON.parse(JSON.stringify(newShadow[key]));
+          const itemPath = [...path, itemId];
+          processValue(item, itemPath);
+        });
 
-      let current: any = newShadow[key];
+        const arrayContainerMetadata: ShadowMetadata = {
+          id: ulid(),
+          arrayKeys: childIds,
+        };
+        newShadowStore.set(nodeKey, arrayContainerMetadata);
+      } else if (typeof value === "object" && value !== null) {
+        newShadowStore.set(nodeKey, { id: ulid() });
 
-      for (const segment of arrayPath) {
-        current = current[segment];
-        if (!current) return state;
+        Object.keys(value).forEach((k) => {
+          processValue(value[k], [...path, k]);
+        });
+      } else {
+        newShadowStore.set(nodeKey, { id: ulid() });
       }
+    };
 
-      if (Array.isArray(current)) {
-        // Create shadow structure based on the actual new item
-        const createShadowStructure = (obj: any): any => {
-          if (Array.isArray(obj)) {
-            return obj.map((item) => createShadowStructure(item));
-          }
-          if (typeof obj === "object" && obj !== null) {
-            const shadow: any = {};
-            for (const k in obj) {
-              shadow[k] = createShadowStructure(obj[k]);
-            }
-            return shadow;
-          }
-          return {}; // Leaf nodes get empty object for metadata
-        };
+    processValue(initialState, []);
 
-        current.push(createShadowStructure(newItem));
-      }
+    set({ shadowStateStore: newShadowStore });
+  },
+  getShadowMetadata: (key: string, path: string[]) => {
+    const fullKey = [key, ...path].join(".");
+    return get().shadowStateStore.get(fullKey);
+  },
 
-      return { shadowStateStore: newShadow };
-    });
+  setShadowMetadata: (key: string, path: string[], metadata: any) => {
+    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 });
+
+    if (metadata.virtualizer?.itemHeight) {
+      const subscribers = get().shadowStateSubscribers.get(key);
+      subscribers?.forEach((cb) => cb());
+    }
   },
-  removeShadowArrayElement: (
+
+  insertShadowArrayElement: (
     key: string,
     arrayPath: string[],
-    index: number
+    newItem: any
   ) => {
-    set((state) => {
-      const newShadow = { ...state.shadowStateStore };
-      let current: any = newShadow[key];
+    const newShadowStore = new Map(get().shadowStateStore);
+    const arrayKey = [key, ...arrayPath].join(".");
+    const parentMeta = newShadowStore.get(arrayKey);
+    const newArrayState = get().getNestedState(key, arrayPath) as any[];
 
-      for (const segment of arrayPath) {
-        current = current?.[segment];
-      }
+    if (!parentMeta || !parentMeta.arrayKeys) return;
 
-      if (Array.isArray(current)) {
-        current.splice(index, 1);
-      }
+    const newItemId = `id:${newItem.id}`;
+    const newIndex = newArrayState.findIndex((item) => item.id === newItem.id);
 
-      return { shadowStateStore: newShadow };
-    });
-  },
-  shadowStateSubscribers: new Map<string, Set<() => void>>(), // key -> Set of callbacks
+    if (newIndex === -1) return;
 
-  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 };
-    });
-    // Return an unsubscribe function
-    return () => {
-      set((state) => {
-        const newSubs = new Map(state.shadowStateSubscribers);
-        const subsForKey = newSubs.get(key);
-        if (subsForKey) {
-          subsForKey.delete(callback);
-        }
-        return { shadowStateSubscribers: newSubs };
-      });
-    };
-  },
+    const newArrayKeys = [...parentMeta.arrayKeys];
+    newArrayKeys.splice(newIndex, 0, newItemId);
+    newShadowStore.set(arrayKey, { ...parentMeta, arrayKeys: newArrayKeys });
 
-  setShadowMetadata: (key: string, path: string[], metadata: any) => {
-    let hasChanged = false;
-    set((state) => {
-      const newShadow = { ...state.shadowStateStore };
-      if (!newShadow[key]) return state;
+    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]);
+        });
+      } else {
+        newShadowStore.set(nodeKey, { id: ulid() });
+      }
+    };
 
-      newShadow[key] = JSON.parse(JSON.stringify(newShadow[key]));
+    processNewItem(newItem, [...arrayPath, newItemId]);
 
-      let current: any = newShadow[key];
-      for (const segment of path) {
-        if (!current[segment]) current[segment] = {};
-        current = current[segment];
-      }
+    set({ shadowStateStore: newShadowStore });
+  },
 
-      const oldHeight = current.virtualizer?.itemHeight;
-      const newHeight = metadata.virtualizer?.itemHeight;
+  removeShadowArrayElement: (key: string, itemPath: string[]) => {
+    const newShadowStore = new Map(get().shadowStateStore);
+    const itemKey = [key, ...itemPath].join(".");
+    const itemIdToRemove = itemPath[itemPath.length - 1];
 
-      if (newHeight && oldHeight !== newHeight) {
-        hasChanged = true;
-        if (!current.virtualizer) current.virtualizer = {};
-        current.virtualizer.itemHeight = newHeight;
-      }
+    const parentPath = itemPath.slice(0, -1);
+    const parentKey = [key, ...parentPath].join(".");
+    const parentMeta = newShadowStore.get(parentKey);
 
-      return { shadowStateStore: newShadow };
-    });
+    if (parentMeta && parentMeta.arrayKeys) {
+      const newArrayKeys = parentMeta.arrayKeys.filter(
+        (id) => id !== itemIdToRemove
+      );
+      newShadowStore.set(parentKey, { ...parentMeta, arrayKeys: newArrayKeys });
+    }
 
-    // If a height value was actually changed, notify the specific subscribers.
-    if (hasChanged) {
-      const subscribers = get().shadowStateSubscribers.get(key);
-      if (subscribers) {
-        subscribers.forEach((callback) => callback());
+    const prefixToDelete = itemKey + ".";
+    for (const k of Array.from(newShadowStore.keys())) {
+      if (k === itemKey || k.startsWith(prefixToDelete)) {
+        newShadowStore.delete(k);
       }
     }
+
+    set({ shadowStateStore: newShadowStore });
+  },
+  updateShadowAtPath: (key: string, path: string[], newValue: any) => {
+    const fullKey = [key, ...path].join(".");
+    const newShadowStore = new Map(get().shadowStateStore);
+    const existing = newShadowStore.get(fullKey) || { id: ulid() };
+    newShadowStore.set(fullKey, { ...existing, lastUpdated: Date.now() });
+    set({ shadowStateStore: newShadowStore });
   },
+
   selectedIndicesMap: new Map<string, Map<string, number>>(),
 
   // Add the new methods
@@ -745,41 +708,44 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   getNestedState: (key: string, path: string[]) => {
     const rootState = get().cogsStateStore[key];
 
-    const getValueWithAsterisk = (obj: any, pathArray: string[]): any => {
-      if (pathArray.length === 0) return obj;
+    const resolvePath = (obj: any, pathArray: string[]): any => {
+      if (pathArray.length === 0 || obj === undefined) {
+        return obj;
+      }
 
-      const currentPath = pathArray[0];
+      const currentSegment = pathArray[0];
       const remainingPath = pathArray.slice(1);
 
-      if (currentPath === "[*]") {
+      // 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;
-
-        // Get result for each array item
-        const results = obj.map((item) =>
-          getValueWithAsterisk(item, remainingPath)
-        );
-
-        // If the next path segment exists and returns arrays, flatten them
-        if (Array.isArray(results[0])) {
-          return results.flat();
-        }
-
-        return results;
+        const results = obj.map((item) => resolvePath(item, remainingPath));
+        return Array.isArray(results[0]) ? results.flat() : results;
       }
 
-      const value = obj[currentPath as keyof typeof obj];
-      if (value === undefined) return undefined;
-
-      return getValueWithAsterisk(value, remainingPath);
+      // Handle standard object property access and numeric array indices
+      const nextObj = obj[currentSegment as keyof typeof obj];
+      return resolvePath(nextObj, remainingPath);
     };
 
-    // This will still get the value but we need to make it reactive only to specific paths
-    return getValueWithAsterisk(rootState, path);
+    return resolvePath(rootState, path);
   },
   setInitialStateOptions: (key, value) => {
     set((prev) => ({