cogsbox-state 0.5.482 → 0.5.484

package/src/CogsState.tsx

@@ -721,33 +721,19 @@ function setOptions<StateKey, Opt>({
   if (needToAdd) {
     setInitialStateOptions(stateKey as string, mergedOptions);
 
-    // NEW: Update type info if validation schema was added
-    const hadSchema =
-      initialOptions?.validation?.zodSchemaV4 ||
-      initialOptions?.validation?.zodSchemaV3;
-    const hasNewSchemaV4 =
-      mergedOptions.validation?.zodSchemaV4 &&
-      !initialOptions?.validation?.zodSchemaV4;
-    const hasNewSchemaV3 =
-      mergedOptions.validation?.zodSchemaV3 &&
-      !initialOptions?.validation?.zodSchemaV3;
-
-    if (!hadSchema && (hasNewSchemaV4 || hasNewSchemaV3)) {
-      if (hasNewSchemaV4) {
-        updateShadowTypeInfo(
-          stateKey as string,
-          mergedOptions.validation.zodSchemaV4,
-          'zod4'
-        );
-      } else if (hasNewSchemaV3) {
-        updateShadowTypeInfo(
-          stateKey as string,
-          mergedOptions.validation.zodSchemaV3,
-          'zod3'
-        );
+    const schemaV4 = mergedOptions.validation?.zodSchemaV4;
+    const schemaV3 = mergedOptions.validation?.zodSchemaV3;
+    const schemaChanged =
+      schemaV4 !== initialOptions?.validation?.zodSchemaV4 ||
+      schemaV3 !== initialOptions?.validation?.zodSchemaV3;
+
+    if (schemaChanged && (schemaV4 || schemaV3)) {
+      if (schemaV4) {
+        updateShadowTypeInfo(stateKey as string, schemaV4, 'zod4');
+      } else if (schemaV3) {
+        updateShadowTypeInfo(stateKey as string, schemaV3, 'zod3');
       }
 
-      // Notify components to re-render with updated validation
       notifyComponents(stateKey as string);
     }
   }
@@ -828,31 +814,42 @@ type KeyedKeys<P> = {
     : never;
 }[keyof P];
 
+type PluginOptionEntry<
+  P,
+  StateKey extends PropertyKey,
+> = P extends undefined
+  ? never
+  : P extends Record<string, any>
+    ? Prettify<
+        Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
+          [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
+            P[K]
+          >['map']
+            ? NonNullable<P[K]>['map'][StateKey] extends undefined
+              ? never
+              : keyof NonNullable<P[K]>['map'][StateKey] extends never
+                ? never
+                : K
+            : never]: CleanIntersection<
+            StateKey extends keyof NonNullable<P[K]>['map']
+              ? NonNullable<P[K]>['map'][StateKey]
+              : never
+          >;
+        }
+      >
+    : P extends object
+      ? Partial<P> extends P
+        ? Partial<P>
+        : P
+      : P;
+
 type PluginOptionsForState<
   PluginOptions,
   StateKey extends PropertyKey,
 > = {
-  [PName in keyof PluginOptions]?: PluginOptions[PName] extends infer P
-    ? P extends Record<string, any>
-      ? Prettify<
-          Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
-            [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
-              P[K]
-            >['map']
-              ? NonNullable<P[K]>['map'][StateKey] extends undefined
-                ? never
-                : keyof NonNullable<P[K]>['map'][StateKey] extends never
-                  ? never
-                  : K
-              : never]: CleanIntersection<
-              StateKey extends keyof NonNullable<P[K]>['map']
-                ? NonNullable<P[K]>['map'][StateKey]
-                : never
-            >;
-          }
-        >
-      : P
-    : never;
+  [PName in keyof PluginOptions as PluginOptions[PName] extends undefined
+    ? never
+    : PName]?: PluginOptionEntry<PluginOptions[PName], StateKey>;
 };
 
 type UseCogsStateOptions<
@@ -987,29 +984,8 @@ export const createCogsState = <
   const useCogsState = <StateKey extends StateKeys>(
     stateKey: StateKey,
     options?: Prettify<
-      OptionsType<StateSlice<StateKey>, never> & {
-        [PName in keyof PluginOptions]?: PluginOptions[PName] extends infer P
-          ? P extends Record<string, any>
-            ? Prettify<
-                Partial<Pick<P, Exclude<keyof P, KeyedKeys<P>>>> & {
-                  [K in KeyedKeys<P> as StateKey extends keyof NonNullable<
-                    P[K]
-                  >['map']
-                    ? NonNullable<P[K]>['map'][StateKey] extends undefined
-                      ? never
-                      : keyof NonNullable<P[K]>['map'][StateKey] extends never
-                        ? never
-                        : K
-                    : never]: CleanIntersection<
-                    StateKey extends keyof NonNullable<P[K]>['map']
-                      ? NonNullable<P[K]>['map'][StateKey]
-                      : never
-                  >;
-                }
-              >
-            : P
-          : never;
-      }
+      OptionsType<StateSlice<StateKey>, never> &
+        PluginOptionsForState<PluginOptions, StateKey>
     >
   ): StateObject<StateSlice<StateKey>> => {
     const [componentId] = useState(options?.componentId ?? uuidv4());
@@ -1040,23 +1016,33 @@ export const createCogsState = <
       serverState: options?.serverState,
     });
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (options) {
         pluginStore
           .getState()
           .setPluginOptionsForState(stateKey as string, options);
       }
     }, [stateKey, options]);
-    useEffect(() => {
+
+    useLayoutEffect(() => {
       pluginStore
         .getState()
-        .stateHandlers.set(stateKey as string, updater as any);
+        .registerStateHandler(stateKey as string, updater as any);
 
       return () => {
-        pluginStore.getState().stateHandlers.delete(stateKey as string);
+        pluginStore.getState().unregisterStateHandler(stateKey as string);
       };
     }, [stateKey, updater]);
 
+    useLayoutEffect(() => {
+      const validation = getInitialOptions(stateKey as string)?.validation;
+      if (validation?.zodSchemaV4) {
+        updateShadowTypeInfo(stateKey as string, validation.zodSchemaV4, 'zod4');
+      } else if (validation?.zodSchemaV3) {
+        updateShadowTypeInfo(stateKey as string, validation.zodSchemaV3, 'zod3');
+      }
+    });
+
     return updater as StateObject<StateSlice<StateKey>>;
   };
 
@@ -1737,7 +1723,7 @@ export function useCogsStateFn<
     defaultState?: TStateObject;
     syncOptions?: SyncOptionsType<any>;
   } & OptionsType<TStateObject> = {}
-) {
+): StateObject<TStateObject, TPlugins> {
   const [reactiveForce, forceUpdate] = useState({}); //this is the key to reactivity
   const { sessionId } = useCogsConfig();
   let noStateKey = stateKey ? false : true;
@@ -1937,6 +1923,14 @@ export function useCogsStateFn<
 
     const { value: resolvedState, source, timestamp } = resolveInitialState();
     initializeShadowState(thisKey, resolvedState);
+
+    const validation = getInitialOptions(thisKey as string)?.validation;
+    if (validation?.zodSchemaV4) {
+      updateShadowTypeInfo(thisKey as string, validation.zodSchemaV4, 'zod4');
+    } else if (validation?.zodSchemaV3) {
+      updateShadowTypeInfo(thisKey as string, validation.zodSchemaV3, 'zod3');
+    }
+
     setShadowMetadata(thisKey, [], {
       stateSource: source,
       lastServerSync: source === 'server' ? timestamp : undefined,

package/src/CogsStateClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, type ReactNode } from "react";
 type ConfigType = { sessionId?: string };
 export const config: ConfigType = {
   sessionId: undefined,
@@ -14,7 +14,7 @@ export function CogsStateClient({
   children,
   sessionId,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   sessionId?: string;
 }) {
   return (

package/src/Components.tsx

@@ -20,6 +20,7 @@ import React, {
   useRef,
   useState,
   useMemo,
+  type ReactNode,
 } from 'react';
 import { getGlobalStore, ValidationError, ValidationSeverity } from './store';
 import { useInView } from 'react-intersection-observer';
@@ -46,7 +47,7 @@ export type ValidationWrapperProps = {
   formOpts?: FormOptsType;
   path: string[];
   stateKey: string;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function ValidationWrapper({
@@ -241,7 +242,7 @@ export function FormElementWrapper({
     componentId: string;
     meta?: any;
   }) => any;
-  renderFn: (params: FormElementParams<any>) => React.ReactNode;
+  renderFn: (params: FormElementParams<any>) => ReactNode;
   formOpts?: FormOptsType;
   setState: any;
 }) {
@@ -335,21 +336,28 @@ export function FormElementWrapper({
 
   const debouncedUpdate = useCallback(
     (newValue: any) => {
+      const liveTypeInfo =
+        getGlobalStore.getState().getShadowNode(stateKey, path)?._meta
+          ?.typeInfo ?? typeInfo;
+
       // Type conversion logic (keep existing)
-      if (typeInfo) {
-        if (typeInfo.type === 'number' && typeof newValue === 'string') {
+      if (liveTypeInfo) {
+        if (liveTypeInfo.type === 'number' && typeof newValue === 'string') {
           newValue =
             newValue === ''
-              ? typeInfo.nullable
+              ? liveTypeInfo.nullable
                 ? null
-                : (typeInfo.default ?? 0)
+                : (liveTypeInfo.default ?? 0)
               : Number(newValue);
         } else if (
-          typeInfo.type === 'boolean' &&
+          liveTypeInfo.type === 'boolean' &&
           typeof newValue === 'string'
         ) {
           newValue = newValue === 'true' || newValue === '1';
-        } else if (typeInfo.type === 'date' && typeof newValue === 'string') {
+        } else if (
+          liveTypeInfo.type === 'date' &&
+          typeof newValue === 'string'
+        ) {
           newValue = new Date(newValue);
         }
       } else {
@@ -626,7 +634,7 @@ export function IsolatedComponentWrapper({
 }
 // 1. Define the MINIMAL props needed.
 type PluginWrapperProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   stateKey: string;
   path: string[];
   pluginName: string;

package/src/PluginRunner.tsx

@@ -1,4 +1,12 @@
-import React, { useEffect, useMemo, useState, useRef, useReducer } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
 import { ClientActivityEvent, pluginStore } from './pluginStore';
 import { isDeepEqual } from './utility';
 import {
@@ -68,7 +76,7 @@ const PluginInstance = React.memo(
     const lastProcessedOptionsRef = useRef<any>();
     const [isInitialTransform, setIsInitialTransform] = useState(true);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (plugin.transformState) {
         if (!isDeepEqual(options, lastProcessedOptionsRef.current)) {
           plugin.transformState({
@@ -168,52 +176,42 @@ const PluginInstance = React.memo(
  * The main orchestrator component. It reads from the central pluginStore
  * and renders a `PluginInstance` controller for each active plugin.
  */
-export function PluginRunner({ children }: { children: React.ReactNode }) {
-  // A simple way to force a re-render when the store changes.
-  const [, forceUpdate] = useReducer((c) => c + 1, 0);
-
-  // Subscribe to the store. When plugins or their options are added/removed,
-  // this component will re-render to update the list of PluginInstances.
-  useEffect(() => {
-    const unsubscribe = pluginStore.subscribe(forceUpdate);
-
-    return unsubscribe;
-  }, []);
-
+export function PluginRunner({ children }: { children: ReactNode }) {
   const { pluginOptions, stateHandlers, registeredPlugins } =
-    pluginStore.getState();
+    useSyncExternalStore(
+      pluginStore.subscribe,
+      () => pluginStore.getState(),
+      () => pluginStore.getState()
+    );
+
+  const pluginNeedsRunner = (
+    plugin: CogsPlugin<any, any, any, any, any, any, any>
+  ) =>
+    !!(
+      plugin.useHook ||
+      plugin.transformState ||
+      plugin.onUpdate ||
+      plugin.onFormUpdate
+    );
 
   return (
     <>
-      {/*
-        This declarative mapping is the core of the solution.
-        React will now manage adding and removing `PluginInstance` components
-        as the application state changes, ensuring hooks are handled safely.
-      */}
-      {Array.from(pluginOptions.entries()).map(([stateKey, pluginMap]) => {
-        const stateHandler = stateHandlers.get(stateKey);
-        if (!stateHandler) {
-          return null; // Don't render a runner if the state handler isn't ready.
-        }
-
-        return Array.from(pluginMap.entries()).map(([pluginName, options]) => {
-          const plugin = registeredPlugins.find((p) => p.name === pluginName);
-          if (!plugin) {
-            return null; // Don't render if the plugin is not in the registered list.
-          }
+      {Array.from(stateHandlers.entries()).flatMap(([stateKey, stateHandler]) =>
+        registeredPlugins.filter(pluginNeedsRunner).map((plugin) => {
+          const options =
+            pluginOptions.get(stateKey)?.get(plugin.name) ?? {};
 
-          // Render a dedicated, memoized controller for this specific plugin configuration.
           return (
             <PluginInstance
-              key={`${stateKey}:${pluginName}`}
+              key={`${stateKey}:${plugin.name}`}
               stateKey={stateKey}
               plugin={plugin}
               options={options}
               stateHandler={stateHandler}
             />
           );
-        });
-      })}
+        })
+      )}
 
       {children}
     </>

package/src/pluginStore.ts

@@ -39,6 +39,7 @@ export type ClientActivityEvent = {
 type PluginRegistryStore = {
   stateHandlers: Map<string, StateObject<any>>; // stateKey -> handler
   registerStateHandler: (stateKey: string, handler: StateObject<any>) => void;
+  unregisterStateHandler: (stateKey: string) => void;
   registeredPlugins: readonly CogsPlugin<any, any, any, any, any>[];
   setRegisteredPlugins: (
     plugins: readonly CogsPlugin<any, any, any, any, any>[]
@@ -78,7 +79,12 @@ export const pluginStore = create<PluginRegistryStore>((set, get) => ({
     set((state) => {
       const newMap = new Map(state.stateHandlers);
       newMap.set(stateKey, handler);
-      console.log('addign handler', stateKey, handler);
+      return { stateHandlers: newMap };
+    }),
+  unregisterStateHandler: (stateKey) =>
+    set((state) => {
+      const newMap = new Map(state.stateHandlers);
+      newMap.delete(stateKey);
       return { stateHandlers: newMap };
     }),
   registeredPlugins: [],

package/src/plugins.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import type React from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { StateObject, UpdateTypeDetail } from './CogsState';
 import {
   getGlobalStore,
@@ -7,7 +7,6 @@ import {
   setAllFieldsDisabled,
 } from './store';
 import { ClientActivityEvent } from './pluginStore';
-import { RefObject } from 'react';
 
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
@@ -228,7 +227,7 @@ export type FormWrapperParams<
   TFieldMetaData,
   TStateSlice = any,
 > = ScopedMetadataMethods<TFieldMetaData> & {
-  element: React.ReactNode;
+  element: ReactNode;
   path: string[];
   stateKey: string;
   options: TOptions;
@@ -307,7 +306,7 @@ export type CogsPlugin<
       TFieldMetaData,
       any
     >
-  ) => React.ReactNode;
+  ) => ReactNode;
 
   chainMethods?: TChainMethods;
 };
@@ -602,7 +601,7 @@ export type PluginFormWrapperFn<
     TFieldMetaData,
     any
   >
-) => React.ReactNode;
+) => ReactNode;
 
 export type CogsPluginBuilder<
   TName extends string,
@@ -774,7 +773,7 @@ export type CogsPluginBuilder<
           true,
           TNewState
         >;
-      });
+      });
 
 export type CreatePluginStart<
   TName extends string,

package/src/store.ts

@@ -316,16 +316,25 @@ function getTypeFromZodSchema(
 
     const typeIdentifier = def.typeName || def.type || current._type;
 
-    // --- START: THE CRITICAL FIX FOR ZodUnion ---
     if (typeIdentifier === 'ZodUnion' || typeIdentifier === 'union') {
       if (def.options && def.options.length > 0) {
-        current = def.options[0]; // Proceed by analyzing the FIRST option of the union
-        continue; // Restart the loop with the new schema
+        const preferredOption = def.options.find((option: any) => {
+          const optionDef = option?.def || option?._def;
+          const optionType =
+            optionDef?.typeName || optionDef?.type || option?._type;
+          return (
+            optionType !== 'ZodNull' &&
+            optionType !== 'null' &&
+            optionType !== 'ZodUndefined' &&
+            optionType !== 'undefined'
+          );
+        });
+        current = preferredOption ?? def.options[0];
+        continue;
       } else {
-        break; // Union with no options, cannot determine type
+        break;
       }
     }
-    // --- END: THE CRITICAL FIX ---
 
     if (typeIdentifier === 'ZodOptional' || typeIdentifier === 'optional') {
       isOptional = true;
@@ -684,9 +693,10 @@ function getSchemaAtPath(schema: any, path: string[]): any {
     const typeIdentifier = def?.typeName || def?.type || containerSchema._type;
 
     if (typeIdentifier === 'ZodObject' || typeIdentifier === 'object') {
-      // VITAL FIX: Check for `shape` inside `def` first, then on the schema itself.
+      const rawShape =
+        def?.shape ?? containerSchema.shape ?? containerSchema._shape;
       const shape =
-        def?.shape || containerSchema.shape || containerSchema._shape;
+        typeof rawShape === 'function' ? rawShape() : rawShape;
       currentSchema = shape?.[segment];
     } else if (typeIdentifier === 'ZodArray' || typeIdentifier === 'array') {
       // For arrays, the next schema is always the element's schema.
@@ -1006,6 +1016,13 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
 
     const storageKey = Array.isArray(initialState) ? `[${key}` : key;
     shadowStateStore.set(storageKey, newRoot);
+
+    const latestOptions = get().getInitialOptions(key);
+    if (latestOptions?.validation?.zodSchemaV4) {
+      updateShadowTypeInfo(key, latestOptions.validation.zodSchemaV4, 'zod4');
+    } else if (latestOptions?.validation?.zodSchemaV3) {
+      updateShadowTypeInfo(key, latestOptions.validation.zodSchemaV3, 'zod3');
+    }
   },
   getShadowNode: (key: string, path: string[]): ShadowNode | undefined => {
     let current: any =