cogsbox-state 0.5.434 → 0.5.436

package/src/Functions.tsx

@@ -1,260 +1,29 @@
 import { type FormOptsType } from './CogsState';
 
-import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 import { getGlobalStore } from './store';
 
-export const useStoreSubscription = <T,>(
-  fullPath: string,
-  selector: (
-    store: ReturnType<typeof getGlobalStore.getState>,
-    path: string
-  ) => T,
-  compare: (a: T, b: T) => boolean = (a, b) =>
-    JSON.stringify(a) === JSON.stringify(b)
-) => {
-  const [value, setValue] = useState<T>(() =>
-    selector(getGlobalStore.getState(), fullPath)
-  );
-  const previousValueRef = useRef<T>(value);
-  const fullPathRef = useRef(fullPath);
-  useEffect(() => {
-    fullPathRef.current = fullPath; // Ensure latest fullPath is always used
-
-    setValue(selector(getGlobalStore.getState(), fullPath));
-
-    const callback = (store: any) => {
-      const newValue = selector(store, fullPathRef.current);
-
-      if (!compare(previousValueRef.current, newValue)) {
-        previousValueRef.current = newValue;
-        setValue(newValue);
-      }
-    };
-    const unsubscribe = getGlobalStore.subscribe(callback);
-    return () => {
-      unsubscribe();
-    };
-  }, [fullPath]);
-  return value;
-};
-export const useGetValidationErrors = (
-  validationKey: string,
-  path: string[],
-  validIndices?: number[]
-) => {
-  const fullPath =
-    validationKey +
-    '.' +
-    (path.length > 0 ? [path.join('.')] : []) +
-    (validIndices && validIndices.length > 0 ? '.' + validIndices : '');
-
-  const returnresult = useStoreSubscription(
-    fullPath,
-    (store, path) => store.getValidationErrors(path) || []
-  );
-
-  return returnresult;
-};
-
-// Find FormControlComponent in your Functions.ts or equivalent file
-
-// export const FormControlComponent = <TStateObject,>({
-//   setState, // This is the real effectiveSetState from the hook
-//   path,
-//   child,
-//   formOpts,
-//   stateKey,
-//   rebuildStateShape,
-// }: FormControlComponentProps<TStateObject>) => {
-//   const { registerFormRef, getFormRef } = formRefStore.getState();
-//   const {
-//     getValidationErrors,
-//     addValidationError,
-//     getInitialOptions,
-//     removeValidationError,
-//   } = getGlobalStore.getState();
-//   const stateKeyPathKey = [stateKey, ...path].join('.');
-//   const [, forceUpdate] = useState<any>();
-//   getGlobalStore.getState().subscribeToPath(stateKeyPathKey, () => {
-//     forceUpdate({});
-//   });
-
-//   const refKey = stateKey + '.' + path.join('.');
-//   const localFormRef = useRef<HTMLInputElement>(null);
-//   const existingRef = getFormRef(refKey);
-//   if (!existingRef) {
-//     registerFormRef(refKey, localFormRef);
-//   }
-//   const formRef = existingRef || localFormRef;
-
-//   // --- START CHANGES ---
-
-//   const globalStateValue = getGlobalStore
-//     .getState()
-//     .getShadowValue(stateKeyPathKey);
-//   const [localValue, setLocalValue] = useState<any>(globalStateValue);
-//   const isCurrentlyDebouncing = useRef(false);
-//   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-//   // Effect to sync local state if global state changes externally
-//   useEffect(() => {
-//     // Only update local if not actively debouncing a local change
-//     if (!isCurrentlyDebouncing.current && globalStateValue !== localValue) {
-//       setLocalValue(globalStateValue);
-//     }
-//   }, [globalStateValue]); // Removed localValue dependency
-
-//   // Effect for cleanup
-//   useEffect(() => {
-//     return () => {
-//       if (debounceTimeoutRef.current) {
-//         clearTimeout(debounceTimeoutRef.current);
-//         debounceTimeoutRef.current = null; // Explicitly nullify
-//         isCurrentlyDebouncing.current = false;
-//       }
-//     };
-//   }, []);
-
-//   const debouncedUpdater = (payload: UpdateArg<TStateObject>) => {
-//     setLocalValue(payload); // Update local state immediately
-//     isCurrentlyDebouncing.current = true;
-
-//     if (payload === '') {
-//       if (debounceTimeoutRef.current) {
-//         clearTimeout(debounceTimeoutRef.current); // Clear pending timer
-//         debounceTimeoutRef.current = null;
-//       }
-
-//       setState(payload, path, { updateType: 'update' });
-//       isCurrentlyDebouncing.current = false; // No longer debouncing
-//       return; // Don't proceed to set another timeout
-//     }
-
-//     // If not empty, proceed with normal debouncing
-//     if (debounceTimeoutRef.current) {
-//       clearTimeout(debounceTimeoutRef.current);
-//     }
-
-//     debounceTimeoutRef.current = setTimeout(
-//       () => {
-//         isCurrentlyDebouncing.current = false;
-//         console.log('debouncedUpdater', payload);
-//         setState(payload, path, { updateType: 'update' });
-//       },
-//       formOpts?.debounceTime ??
-//         (typeof globalStateValue == 'boolean' ? 20 : 200)
-//     );
-//   };
-
-//   const initialOptions = getInitialOptions(stateKey);
-
-//   const validationKey = initialOptions?.validation?.key;
-//   const validateOnBlur = initialOptions?.validation?.onBlur === true;
-
-//   const handleBlur = async () => {
-//     // --- Ensure latest value is flushed if debouncing ---
-//     if (debounceTimeoutRef.current) {
-//       clearTimeout(debounceTimeoutRef.current); // Clear pending timer
-//       debounceTimeoutRef.current = null;
-//       isCurrentlyDebouncing.current = false;
-//       // Ensure the absolute latest local value is committed on blur
-//       setState(localValue, path, { updateType: 'update' });
-//     }
-//     // --- End modification ---
-
-//     if (!initialOptions?.validation?.zodSchema || !validateOnBlur) return;
-//     removeValidationError(validationKey + '.' + path.join('.'));
-//     try {
-//       // Use the potentially just flushed value
-//       if (!validationKey) return;
-//       const fieldValue = getGlobalStore
-//         .getState()
-//         .getShadowValue(stateKeyPathKey);
-//       await validateZodPathFunc(
-//         validationKey,
-//         initialOptions.validation.zodSchema,
-//         path,
-//         fieldValue
-//       );
-//       // forceUpdate might be needed if validation state update doesn't trigger render
-//       // Consider using useGetValidationErrors hook result directly for validation display
-//     } catch (error) {
-//       console.error('Validation error on blur:', error);
-//     }
-//   };
-
-//   const childElement = child({
-//     state: setter,
-//     // --- START CHANGES ---
-//     get: () => localValue, // Get should return the immediate local value
-//     set: debouncedUpdater, // Use the new debounced updater
-//     // --- END CHANGES ---
-
-//     path: path,
-//     validationErrors: () =>
-//       getValidationErrors(validationKey + '.' + path.join('.')),
-//     addValidationError: (message?: string) => {
-//       removeValidationError(validationKey + '.' + path.join('.'));
-//       addValidationError(validationKey + '.' + path.join('.'), message ?? '');
-//     },
-//     inputProps: {
-//       // --- START CHANGES ---
-//       value: localValue ?? '', // Input value is always the local state
-//       onChange: (e: any) => debouncedUpdater(e.target.value), // Use debounced updater
-//       // --- END CHANGES ---
-//       onBlur: handleBlur,
-//       ref: formRef,
-//     },
-//   });
-
-//   return (
-//     <>
-//       <ValidationWrapper {...{ formOpts, path, stateKey }}>
-//         {childElement}
-//       </ValidationWrapper>
-//     </>
-//   );
-// };
 export type ValidationWrapperProps = {
   formOpts?: FormOptsType;
   path: string[];
   stateKey: string;
   children: React.ReactNode;
-  validIndices?: number[];
 };
 export function ValidationWrapper({
   formOpts,
   path,
-
   stateKey,
   children,
-  validIndices,
 }: ValidationWrapperProps) {
-  const { getInitialOptions } = getGlobalStore.getState();
+  const { getInitialOptions, getShadowMetadata } = getGlobalStore.getState();
   const thisStateOpts = getInitialOptions(stateKey!);
-  const validationKey = thisStateOpts?.validation?.key ?? stateKey!;
-  const validationErrors = useGetValidationErrors(
-    validationKey,
-    path,
-    validIndices
-  );
-  // console.log(
-  //   "validationErrors ValidationWrapper",
-  //   stateKey,
-  //   validationKey,
-  //   path,
-  //   validationErrors
-  // );
-  const thesMessages: string[] = [];
 
-  if (validationErrors) {
-    const newMessage = validationErrors!.join(', ');
-    if (!thesMessages.includes(newMessage)) {
-      thesMessages.push(newMessage);
-    }
-  }
+  // GET VALIDATION FROM SHADOW METADATA
+  const shadowMeta = getShadowMetadata(stateKey!, path);
+  const validationState = shadowMeta?.validation;
+  const status = validationState?.status || 'PRISTINE';
 
+  const message = validationState?.message;
   return (
     <>
       {thisStateOpts?.formElements?.validation &&
@@ -263,12 +32,10 @@ export function ValidationWrapper({
           children: (
             <React.Fragment key={path.toString()}>{children}</React.Fragment>
           ),
-          active: validationErrors.length > 0 ? true : false,
+          status, // Pass status instead of active
           message: formOpts?.validation?.hideMessage
             ? ''
-            : formOpts?.validation?.message
-              ? formOpts?.validation?.message
-              : thesMessages.map((m) => m).join(', '),
+            : formOpts?.validation?.message || message || '',
           path: path,
         })
       ) : (

package/src/TRPCValidationLink.ts

@@ -1,10 +1,10 @@
-import { observable } from "@trpc/server/observable";
-import type { AnyRouter } from "@trpc/server";
-import type { TRPCLink } from "@trpc/client";
-import type { Operation } from "@trpc/client";
-import type { TRPCClientError } from "@trpc/client";
-import { getGlobalStore } from "./store";
-import type { Observer } from "@trpc/server/observable";
+import { observable } from '@trpc/server/observable';
+import type { AnyRouter } from '@trpc/server';
+import type { TRPCLink } from '@trpc/client';
+import type { Operation } from '@trpc/client';
+import type { TRPCClientError } from '@trpc/client';
+import { getGlobalStore } from './store';
+import type { Observer } from '@trpc/server/observable';
 export const useCogsTrpcValidationLink = <
   TRouter extends AnyRouter,
 >(passedOpts?: {
@@ -25,27 +25,27 @@ export const useCogsTrpcValidationLink = <
                 try {
                   const errorObject = JSON.parse(err.message);
                   if (passedOpts?.log) {
-                    console.log("errorObject", errorObject);
+                    console.log('errorObject', errorObject);
                   }
                   if (Array.isArray(errorObject)) {
                     errorObject.forEach(
                       (error: { path: string[]; message: string }) => {
-                        const fullpath = `${op.path}.${error.path.join(".")}`;
+                        const fullpath = `${op.path}.${error.path.join('.')}`;
                         // In your TRPC link
                         if (passedOpts?.log) {
-                          console.log("fullpath 1", fullpath);
+                          console.log('fullpath 1', fullpath);
                         }
                         addValidationError(fullpath, error.message);
                       }
                     );
                   } else if (
-                    typeof errorObject === "object" &&
+                    typeof errorObject === 'object' &&
                     errorObject !== null
                   ) {
                     Object.entries(errorObject).forEach(([key, value]) => {
                       const fullpath = `${op.path}.${key}`;
                       if (passedOpts?.log) {
-                        console.log("fullpath 2", fullpath);
+                        console.log('fullpath 2', fullpath);
                       }
                       addValidationError(fullpath, value as string);
                     });

package/src/store.ts

@@ -105,6 +105,7 @@ export type ShadowMetadata = {
     domRef?: HTMLElement | null;
   };
   syncInfo?: { status: string };
+  validation?: ValidationState;
   lastUpdated?: number;
   value?: any;
   classSignals?: Array<{
@@ -151,6 +152,24 @@ 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;
+};
 export type CogsEvent =
   | { type: 'INSERT'; path: string; itemKey: string; index: number }
   | { type: 'REMOVE'; path: string; itemKey: string }
@@ -159,6 +178,17 @@ export type CogsEvent =
   | { type: 'RELOAD'; path: string }; // For full re-initializations
 export type CogsGlobalState = {
   // --- Shadow State and Subscription System ---
+  registerComponent: (
+    stateKey: string,
+    componentId: string,
+    registration: any
+  ) => void;
+  unregisterComponent: (stateKey: string, componentId: string) => void;
+  addPathComponent: (
+    stateKey: string,
+    dependencyPath: string[],
+    fullComponentId: string
+  ) => void;
   shadowStateStore: Map<string, ShadowMetadata>;
   markAsDirty: (
     key: string,
@@ -275,20 +305,103 @@ const isSimpleObject = (value: any): boolean => {
   return Array.isArray(value) || value.constructor === Object;
 };
 export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
+  addPathComponent: (stateKey, dependencyPath, fullComponentId) => {
+    set((state) => {
+      const newShadowStore = new Map(state.shadowStateStore);
+      const dependencyKey = [stateKey, ...dependencyPath].join('.');
+
+      // --- 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 });
+
+      // --- Part 2: Update the component's own list of paths ---
+      const rootMeta = newShadowStore.get(stateKey) || {};
+      const component = rootMeta.components?.get(fullComponentId);
+
+      // If the component exists, update its `paths` set immutably
+      if (component) {
+        const newPaths = new Set(component.paths);
+        newPaths.add(dependencyKey);
+
+        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,
+        });
+      }
+
+      // Return the final, updated state
+      return { shadowStateStore: newShadowStore };
+    });
+  },
+  registerComponent: (stateKey, fullComponentId, registration) => {
+    set((state) => {
+      // Create a new Map to ensure Zustand detects the change
+      const newShadowStore = new Map(state.shadowStateStore);
+
+      // Get the metadata for the ROOT of the state (where the components map lives)
+      const rootMeta = newShadowStore.get(stateKey) || {};
+
+      // Also clone the components map to avoid direct mutation
+      const components = new Map(rootMeta.components);
+      components.set(fullComponentId, registration);
+
+      // Update the root metadata with the new components map
+      newShadowStore.set(stateKey, { ...rootMeta, components });
+
+      // Return the updated state
+      return { shadowStateStore: newShadowStore };
+    });
+  },
+
+  unregisterComponent: (stateKey, fullComponentId) => {
+    set((state) => {
+      const newShadowStore = new Map(state.shadowStateStore);
+      const rootMeta = newShadowStore.get(stateKey);
+
+      // If there's no metadata or no components map, do nothing
+      if (!rootMeta?.components) {
+        return state; // Return original state, no change needed
+      }
+
+      const components = new Map(rootMeta.components);
+      const wasDeleted = components.delete(fullComponentId);
+
+      // Only update state if something was actually deleted
+      if (wasDeleted) {
+        newShadowStore.set(stateKey, { ...rootMeta, components });
+        return { shadowStateStore: newShadowStore };
+      }
+
+      return state; // Nothing changed
+    });
+  },
   markAsDirty: (key: string, path: string[], options = { bubble: true }) => {
     const newShadowStore = new Map(get().shadowStateStore);
     let changed = false;
 
-    // This function marks a single path as dirty if it was previously synced.
     const setDirty = (currentPath: string[]) => {
       const fullKey = [key, ...currentPath].join('.');
       const meta = newShadowStore.get(fullKey);
 
-      // We only mark something as dirty if it was previously synced from the server.
-      // We also check `isDirty !== true` to avoid redundant updates.
-      if (meta && meta.stateSource === 'server' && meta.isDirty !== true) {
+      // 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;
       }
     };
 
@@ -304,7 +417,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       }
     }
 
-    // Only update the global state if something actually changed.
     if (changed) {
       set({ shadowStateStore: newShadowStore });
     }
@@ -344,54 +456,72 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   },
 
   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 existingShadowStore = new Map(get().shadowStateStore);
-
-    const processValue = (value: any, path: string[]) => {
-      const nodeKey = [key, ...path].join('.');
-
-      if (Array.isArray(value)) {
-        // Handle arrays as before
-        const childIds: string[] = [];
-
-        value.forEach((item) => {
-          const itemId = `id:${ulid()}`;
-          childIds.push(nodeKey + '.' + itemId);
-        });
 
-        existingShadowStore.set(nodeKey, { arrayKeys: childIds });
+  initializeShadowState: (key: string, initialState: any) => {
+    set((state) => {
+      // 1. Make a copy of the current store to modify it
+      const newShadowStore = new Map(state.shadowStateStore);
+
+      // 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);
+        }
+      }
 
-        value.forEach((item, index) => {
-          const itemId = childIds[index]!.split('.').pop();
-          processValue(item, [...path!, itemId!]);
-        });
-      } 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 });
+      // 4. Run your original logic to rebuild the state tree from scratch
+      const processValue = (value: any, path: string[]) => {
+        const nodeKey = [key, ...path].join('.');
 
-        Object.keys(value).forEach((k) => {
-          processValue(value[k], [...path, k]);
+        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 });
+        }
+      };
+      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,
         });
-      } else {
-        // Treat everything else (including Uint8Array) as primitive values
-        existingShadowStore.set(nodeKey, { value });
       }
-    };
 
-    processValue(initialState, []);
-    set({ shadowStateStore: existingShadowStore });
+      // 6. Return the completely updated state
+      return { shadowStateStore: newShadowStore };
+    });
   },
 
   getShadowValue: (fullKey: string, validArrayIds?: string[]) => {
@@ -440,11 +570,41 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return get().shadowStateStore.get(fullKey);
   },
 
-  setShadowMetadata: (key: string, path: string[], metadata: any) => {
+  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;'
+      );
+      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
+      );
+      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();
+    }
+    // --- END OF TRAP ---
+
     const newShadowStore = new Map(get().shadowStateStore);
-    const existing = newShadowStore.get(fullKey) || { id: ulid() };
-    newShadowStore.set(fullKey, { ...existing, ...metadata });
+    const finalMeta = { ...(existingMeta || {}), ...metadata };
+    newShadowStore.set(fullKey, finalMeta);
     set({ shadowStateStore: newShadowStore });
   },
   setTransformCache: (
@@ -648,6 +808,12 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   clearSelectedIndex: ({ arrayKey }: { arrayKey: string }): void => {
     set((state) => {
       const newMap = state.selectedIndicesMap;
+      const acutalKey = newMap.get(arrayKey);
+      if (acutalKey) {
+        get().notifyPathSubscribers(acutalKey, {
+          type: 'CLEAR_SELECTION',
+        });
+      }
 
       newMap.delete(arrayKey);
       get().notifyPathSubscribers(arrayKey, {