npm - cogsbox-state - Versions diffs - 0.5.475-canary.1 → 0.5.475-canary.10 - Mend

cogsbox-state 0.5.475-canary.1 → 0.5.475-canary.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/Components.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Components.jsx","sources":["../src/Components.tsx"],"sourcesContent":["import {\r\n FormElementParams,\r\n StateObject,\r\n UpdateTypeDetail,\r\n type FormOptsType,\r\n} from './CogsState';\r\nimport { pluginStore } from './pluginStore';\r\nimport {\r\n createMetadataContext,\r\n createScopedMetadataContext,\r\n toDeconstructedMethods,\r\n} from './plugins';\r\nimport React, {\r\n memo,\r\n RefObject,\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n useRef,\r\n useState,\r\n useMemo,\r\n} from 'react';\r\nimport { getGlobalStore, ValidationError, ValidationSeverity } from './store';\r\nimport { useInView } from 'react-intersection-observer';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { isDeepEqual } from './utility';\r\nimport { runValidation } from './validation';\r\n\r\nconst {\r\n getInitialOptions,\r\n\r\n getShadowMetadata,\r\n setShadowMetadata,\r\n getShadowValue,\r\n\r\n registerComponent,\r\n unregisterComponent,\r\n\r\n notifyPathSubscribers,\r\n subscribeToPath,\r\n} = getGlobalStore.getState();\r\nconst { stateHandlers, notifyFormUpdate } = pluginStore.getState();\r\n\r\nexport type ValidationWrapperProps = {\r\n formOpts?: FormOptsType;\r\n path: string[];\r\n stateKey: string;\r\n children: React.ReactNode;\r\n};\r\n\r\nexport function ValidationWrapper({\r\n formOpts,\r\n path,\r\n stateKey,\r\n children,\r\n}: ValidationWrapperProps) {\r\n const { getInitialOptions, getShadowMetadata, getShadowValue } =\r\n getGlobalStore.getState();\r\n const thisStateOpts = getInitialOptions(stateKey!);\r\n\r\n const shadowMeta = getShadowMetadata(stateKey!, path);\r\n const validationState = shadowMeta?.validation;\r\n\r\n const status = validationState?.status \|\| 'NOT_VALIDATED';\r\n\r\n const errors = (validationState?.errors \|\| []).map((err) => ({\r\n ...err,\r\n path: path,\r\n })) as ValidationError[];\r\n const errorMessages = errors\r\n .filter((err) => err.severity === 'error')\r\n .map((err) => err.message);\r\n const warningMessages = errors\r\n .filter((err) => err.severity === 'warning')\r\n .map((err) => err.message);\r\n\r\n // Use first error, or first warning if no errors\r\n const message = errorMessages[0] \|\| warningMessages[0];\r\n const primarySeverity: ValidationSeverity =\r\n errorMessages.length > 0\r\n ? 'error'\r\n : warningMessages.length > 0\r\n ? 'warning'\r\n : undefined;\r\n const { registeredPlugins } = pluginStore.getState();\r\n const pluginsApi: any = {};\r\n\r\n // We iterate over ALL registered plugins in the app.\r\n registeredPlugins.forEach((plugin) => {\r\n // A plugin is considered \"active\" for this state key if its name\r\n // exists as a key in the options (e.g., options.syncPlugin exists).\r\n if (thisStateOpts && thisStateOpts.hasOwnProperty(plugin.name)) {\r\n const pluginName = plugin.name;\r\n\r\n // Now we can safely build the API for this active plugin.\r\n const hookData = pluginStore\r\n .getState()\r\n .getHookResult(stateKey, pluginName);\r\n\r\n const scopedMetadata = createScopedMetadataContext(\r\n stateKey,\r\n pluginName,\r\n path\r\n );\r\n\r\n pluginsApi[pluginName] = {\r\n hookData,\r\n getFieldMetaData: scopedMetadata.getFieldMetaData,\r\n setFieldMetaData: scopedMetadata.setFieldMetaData,\r\n };\r\n }\r\n });\r\n return (\r\n <>\r\n {thisStateOpts?.formElements?.validation &&\r\n !formOpts?.validation?.disable ? (\r\n thisStateOpts.formElements!.validation!({\r\n children: (\r\n <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n ),\r\n status, // Now passes the new ValidationStatus type\r\n message: formOpts?.validation?.hideMessage\r\n ? ''\r\n : formOpts?.validation?.message \|\| message \|\| '',\r\n severity: primarySeverity,\r\n hasErrors: errorMessages.length > 0,\r\n hasWarnings: warningMessages.length > 0,\r\n allErrors: errors,\r\n path: path,\r\n getData: () => getShadowValue(stateKey!, path),\r\n plugins: pluginsApi,\r\n })\r\n ) : (\r\n <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n )}\r\n </>\r\n );\r\n}\r\nexport const MemoizedCogsItemWrapper = memo(\r\n ListItemWrapper,\r\n (prevProps, nextProps) => {\r\n // Re-render if any of these change:\r\n return (\r\n prevProps.itemPath.join('.') === nextProps.itemPath.join('.') &&\r\n prevProps.stateKey === nextProps.stateKey &&\r\n prevProps.itemComponentId === nextProps.itemComponentId &&\r\n prevProps.localIndex === nextProps.localIndex\r\n );\r\n }\r\n);\r\nexport function ListItemWrapper({\r\n stateKey,\r\n itemComponentId,\r\n itemPath,\r\n localIndex,\r\n arraySetter,\r\n rebuildStateShape,\r\n renderFn,\r\n}: {\r\n stateKey: string;\r\n itemComponentId: string;\r\n itemPath: string[];\r\n localIndex: number;\r\n arraySetter: any;\r\n\r\n rebuildStateShape: (options: {\r\n currentState: any;\r\n path: string[];\r\n componentId: string;\r\n meta?: any;\r\n }) => any;\r\n renderFn: (\r\n setter: any,\r\n index: number,\r\n\r\n arraySetter: any\r\n ) => React.ReactNode;\r\n}) {\r\n const [, forceUpdate] = useState({});\r\n const { ref: inViewRef, inView } = useInView();\r\n const elementRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n const imagesLoaded = useImageLoaded(elementRef);\r\n const hasReportedInitialHeight = useRef(false);\r\n const fullKey = [stateKey, ...itemPath].join('.');\r\n useRegisterComponent(stateKey, itemComponentId, forceUpdate);\r\n\r\n const setRefs = useCallback(\r\n (element: HTMLDivElement \| null) => {\r\n elementRef.current = element;\r\n inViewRef(element); // This is the ref from useInView\r\n },\r\n [inViewRef]\r\n );\r\n\r\n useEffect(() => {\r\n const unsubscribe = subscribeToPath(fullKey, (e) => {\r\n forceUpdate({});\r\n });\r\n return () => unsubscribe();\r\n }, [fullKey]);\r\n useEffect(() => {\r\n if (!inView \|\| !imagesLoaded \|\| hasReportedInitialHeight.current) {\r\n return;\r\n }\r\n\r\n const element = elementRef.current;\r\n if (element && element.offsetHeight > 0) {\r\n hasReportedInitialHeight.current = true;\r\n const newHeight = element.offsetHeight;\r\n\r\n setShadowMetadata(stateKey, itemPath, {\r\n virtualizer: {\r\n itemHeight: newHeight,\r\n domRef: element,\r\n },\r\n });\r\n\r\n const arrayPath = itemPath.slice(0, -1);\r\n const arrayPathKey = [stateKey, ...arrayPath].join('.');\r\n notifyPathSubscribers(arrayPathKey, {\r\n type: 'ITEMHEIGHT',\r\n itemKey: itemPath.join('.'),\r\n\r\n ref: elementRef.current,\r\n });\r\n }\r\n }, [inView, imagesLoaded, stateKey, itemPath]);\r\n\r\n const itemValue = getShadowValue(stateKey, itemPath);\r\n\r\n if (itemValue === undefined) {\r\n return null;\r\n }\r\n\r\n const itemSetter = rebuildStateShape({\r\n currentState: itemValue,\r\n path: itemPath,\r\n componentId: itemComponentId,\r\n });\r\n const children = renderFn(itemSetter, localIndex, arraySetter);\r\n\r\n return <div ref={setRefs}>{children}</div>;\r\n}\r\n\r\nexport function FormElementWrapper({\r\n stateKey,\r\n path,\r\n rebuildStateShape,\r\n renderFn,\r\n formOpts,\r\n setState,\r\n}: {\r\n stateKey: string;\r\n path: string[];\r\n rebuildStateShape: (options: {\r\n path: string[];\r\n componentId: string;\r\n meta?: any;\r\n }) => any;\r\n renderFn: (params: FormElementParams<any>) => React.ReactNode;\r\n formOpts?: FormOptsType;\r\n setState: any;\r\n}) {\r\n const componentId = useRef(uuidv4()).current;\r\n\r\n const [, forceUpdate] = useState({});\r\n const formElementRef = useRef<any>(null);\r\n const stateKeyPathKey = [stateKey, ...path].join('.');\r\n useRegisterComponent(stateKey, componentId, forceUpdate);\r\n // Get the shadow node to access typeInfo and schema\r\n const shadowNode = getGlobalStore.getState().getShadowNode(stateKey, path);\r\n const typeInfo = shadowNode?._meta?.typeInfo;\r\n\r\n const globalStateValue = getShadowValue(stateKey, path);\r\n const [localValue, setLocalValue] = useState<any>(globalStateValue);\r\n const isCurrentlyDebouncing = useRef(false);\r\n const debounceTimeoutRef = useRef<NodeJS.Timeout \| null>(null);\r\n\r\n useEffect(() => {\r\n if (\r\n !isCurrentlyDebouncing.current &&\r\n !isDeepEqual(globalStateValue, localValue)\r\n ) {\r\n setLocalValue(globalStateValue);\r\n }\r\n }, [globalStateValue]);\r\n\r\n useEffect(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Initialize clientActivityState if needed\r\n const currentMeta = getShadowMetadata(stateKey, path) \|\| {};\r\n if (!currentMeta.clientActivityState) {\r\n currentMeta.clientActivityState = { elements: new Map() };\r\n }\r\n\r\n // Detect element type from the ref\r\n const detectElementType = () => {\r\n const el = formElementRef.current;\r\n if (!el) return 'input';\r\n const tagName = el.tagName.toLowerCase();\r\n if (tagName === 'textarea') return 'textarea';\r\n if (tagName === 'select') return 'select';\r\n if (tagName === 'input') {\r\n const type = (el as HTMLInputElement).type;\r\n if (type === 'checkbox') return 'checkbox';\r\n if (type === 'radio') return 'radio';\r\n if (type === 'range') return 'range';\r\n if (type === 'file') return 'file';\r\n }\r\n return 'input';\r\n };\r\n\r\n // Add this element to the Map\r\n currentMeta.clientActivityState.elements.set(componentId, {\r\n domRef: formElementRef,\r\n elementType: detectElementType(),\r\n inputType: formElementRef.current?.type,\r\n mountedAt: Date.now(),\r\n });\r\n\r\n setShadowMetadata(stateKey, path, currentMeta);\r\n\r\n // Subscribe to path updates\r\n const unsubscribe = getGlobalStore\r\n .getState()\r\n .subscribeToPath(stateKeyPathKey, (newValue) => {\r\n if (!isCurrentlyDebouncing.current && localValue !== newValue) {\r\n forceUpdate({});\r\n }\r\n });\r\n\r\n // Cleanup\r\n return () => {\r\n unsubscribe();\r\n\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n isCurrentlyDebouncing.current = false;\r\n }\r\n\r\n // Remove element from Map\r\n const meta = getGlobalStore.getState().getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements) {\r\n meta.clientActivityState.elements.delete(componentId);\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n };\r\n }, []);\r\n\r\n const debouncedUpdate = useCallback(\r\n (newValue: any) => {\r\n // Type conversion logic (keep existing)\r\n if (typeInfo) {\r\n if (typeInfo.type === 'number' && typeof newValue === 'string') {\r\n newValue =\r\n newValue === ''\r\n ? typeInfo.nullable\r\n ? null\r\n : (typeInfo.default ?? 0)\r\n : Number(newValue);\r\n } else if (\r\n typeInfo.type === 'boolean' &&\r\n typeof newValue === 'string'\r\n ) {\r\n newValue = newValue === 'true' \|\| newValue === '1';\r\n } else if (typeInfo.type === 'date' && typeof newValue === 'string') {\r\n newValue = new Date(newValue);\r\n }\r\n } else {\r\n const currentType = typeof globalStateValue;\r\n if (currentType === 'number' && typeof newValue === 'string') {\r\n newValue = newValue === '' ? 0 : Number(newValue);\r\n }\r\n }\r\n\r\n setLocalValue(newValue);\r\n\r\n // Update input activity details\r\n const { getShadowMetadata, setShadowMetadata } =\r\n getGlobalStore.getState();\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId);\r\n if (element && element.currentActivity?.type === 'focus') {\r\n element!.currentActivity.details = {\r\n ...element!.currentActivity.details,\r\n value: newValue,\r\n previousValue:\r\n element!.currentActivity.details?.value \|\| globalStateValue,\r\n inputLength:\r\n typeof newValue === 'string' ? newValue.length : undefined,\r\n keystrokeCount:\r\n (element!.currentActivity.details?.keystrokeCount \|\| 0) + 1,\r\n };\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n }\r\n const element = meta?.clientActivityState?.elements?.get(componentId);\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'input', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n details: {\r\n value: newValue,\r\n inputLength:\r\n typeof newValue === 'string' ? newValue.length : undefined,\r\n isComposing: false, // You'd need to track this from the actual input event\r\n isPasting: false, // You'd need to track this from paste events\r\n keystrokeCount:\r\n (element?.currentActivity?.details?.keystrokeCount \|\| 0) + 1,\r\n },\r\n });\r\n // Validation (keep existing)\r\n const virtualOperation: UpdateTypeDetail = {\r\n stateKey,\r\n path,\r\n newValue: newValue,\r\n updateType: 'update',\r\n timeStamp: Date.now(),\r\n status: 'new',\r\n oldValue: globalStateValue,\r\n };\r\n runValidation(virtualOperation, 'onChange');\r\n\r\n // Debounce state update (keep existing)\r\n isCurrentlyDebouncing.current = true;\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n }\r\n\r\n const debounceTime = formOpts?.debounceTime ?? 200;\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n isCurrentlyDebouncing.current = false;\r\n setState(newValue, path, {\r\n updateType: 'update',\r\n validationTrigger: 'onChange',\r\n });\r\n }, debounceTime);\r\n },\r\n [\r\n setState,\r\n path,\r\n formOpts?.debounceTime,\r\n typeInfo,\r\n globalStateValue,\r\n stateKey,\r\n componentId,\r\n ]\r\n );\r\n\r\n const handleFocus = useCallback(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Update element's current activity\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId)!;\r\n element.currentActivity = {\r\n type: 'focus',\r\n startTime: Date.now(),\r\n details: {\r\n value: localValue,\r\n inputLength:\r\n typeof localValue === 'string' ? localValue.length : undefined,\r\n },\r\n };\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'focus', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n details: {\r\n cursorPosition: formElementRef.current?.selectionStart,\r\n },\r\n });\r\n }, [stateKey, path, componentId, localValue]);\r\n const handleBlur = useCallback(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Clear debounce if active\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n debounceTimeoutRef.current = null;\r\n isCurrentlyDebouncing.current = false;\r\n setState(localValue, path, {\r\n updateType: 'update',\r\n validationTrigger: 'onBlur',\r\n });\r\n }\r\n\r\n // Clear element's current activity\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId)!;\r\n element.currentActivity = undefined;\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n const focusStartTime =\r\n meta?.clientActivityState?.elements?.get(componentId)?.currentActivity\r\n ?.startTime;\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'blur', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n duration: focusStartTime ? Date.now() - focusStartTime : undefined,\r\n details: {\r\n duration: focusStartTime ? Date.now() - focusStartTime : 0,\r\n },\r\n });\r\n\r\n // Run validation if configured\r\n const validationOptions = getInitialOptions(stateKey)?.validation;\r\n if (validationOptions?.onBlur) {\r\n const virtualOperation: UpdateTypeDetail = {\r\n stateKey,\r\n path,\r\n newValue: localValue,\r\n updateType: 'update',\r\n timeStamp: Date.now(),\r\n status: 'new',\r\n oldValue: globalStateValue,\r\n };\r\n runValidation(virtualOperation, 'onBlur');\r\n }\r\n }, [localValue, setState, path, stateKey, componentId, globalStateValue]);\r\n\r\n const baseState = rebuildStateShape({\r\n path: path,\r\n componentId: componentId,\r\n meta: undefined,\r\n });\r\n\r\n const stateWithInputProps = new Proxy(baseState, {\r\n get(target, prop) {\r\n if (prop === '$inputProps') {\r\n return {\r\n value: localValue ?? '',\r\n onChange: (e: any) => {\r\n debouncedUpdate(e.target.value);\r\n },\r\n onFocus: handleFocus,\r\n onBlur: handleBlur,\r\n ref: formElementRef,\r\n };\r\n }\r\n\r\n return target[prop];\r\n },\r\n });\r\n\r\n const initialElement = renderFn(stateWithInputProps);\r\n\r\n return (\r\n <ValidationWrapper formOpts={formOpts} path={path} stateKey={stateKey}>\r\n {initialElement}\r\n </ValidationWrapper>\r\n );\r\n}\r\nexport function useRegisterComponent(\r\n stateKey: string,\r\n componentId: string,\r\n forceUpdate: (o: object) => void\r\n) {\r\n const fullComponentId = `${stateKey}////${componentId}`;\r\n\r\n useLayoutEffect(() => {\r\n // Call the safe, centralized function to register\r\n registerComponent(stateKey, fullComponentId, {\r\n forceUpdate: () => forceUpdate({}),\r\n paths: new Set(),\r\n reactiveType: ['component'],\r\n });\r\n\r\n // The cleanup now calls the safe, centralized unregister function\r\n return () => {\r\n unregisterComponent(stateKey, fullComponentId);\r\n };\r\n }, [stateKey, fullComponentId]); // Dependencies are stable and correct\r\n}\r\n\r\nconst useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {\r\n const [loaded, setLoaded] = useState(false);\r\n\r\n useLayoutEffect(() => {\r\n if (!ref.current) {\r\n setLoaded(true);\r\n return;\r\n }\r\n\r\n const images = Array.from(ref.current.querySelectorAll('img'));\r\n\r\n // If there are no images, we are \"loaded\" immediately.\r\n if (images.length === 0) {\r\n setLoaded(true);\r\n return;\r\n }\r\n\r\n let loadedCount = 0;\r\n const handleImageLoad = () => {\r\n loadedCount++;\r\n if (loadedCount === images.length) {\r\n setLoaded(true);\r\n }\r\n };\r\n\r\n images.forEach((image) => {\r\n if (image.complete) {\r\n handleImageLoad();\r\n } else {\r\n image.addEventListener('load', handleImageLoad);\r\n image.addEventListener('error', handleImageLoad);\r\n }\r\n });\r\n\r\n return () => {\r\n images.forEach((image) => {\r\n image.removeEventListener('load', handleImageLoad);\r\n image.removeEventListener('error', handleImageLoad);\r\n });\r\n };\r\n }, [ref.current]);\r\n\r\n return loaded;\r\n};\r\n// Components.tsx\r\n\r\n// Generic isolated component wrapper\r\nexport function IsolatedComponentWrapper({\r\n stateKey,\r\n path,\r\n rebuildStateShape,\r\n renderFn,\r\n}: {\r\n stateKey: string;\r\n path: string[];\r\n rebuildStateShape: (options: {\r\n path: string[];\r\n componentId: string;\r\n meta?: any;\r\n }) => any;\r\n renderFn: (state: any) => React.ReactNode;\r\n}) {\r\n const [componentId] = useState(() => uuidv4());\r\n const [, forceUpdate] = useState({});\r\n\r\n const stateKeyPathKey = [stateKey, ...path].join('.');\r\n useRegisterComponent(stateKey, componentId, forceUpdate);\r\n\r\n useEffect(() => {\r\n const unsubscribe = getGlobalStore\r\n .getState()\r\n .subscribeToPath(stateKeyPathKey, () => {\r\n forceUpdate({});\r\n });\r\n return () => unsubscribe();\r\n }, [stateKeyPathKey]);\r\n\r\n const baseState = rebuildStateShape({\r\n path: path,\r\n componentId: componentId,\r\n meta: undefined,\r\n });\r\n\r\n return <>{renderFn(baseState)}</>;\r\n}\r\n\r\n// 1. Define the MINIMAL props needed.\r\ntype PluginWrapperProps = {\r\n children: React.ReactNode;\r\n stateKey: string;\r\n path: string[];\r\n pluginName: string;\r\n wrapperDepth: number;\r\n};\r\n\r\nconst PluginWrapper = memo(function PluginWrapper({\r\n children,\r\n stateKey,\r\n path,\r\n pluginName,\r\n wrapperDepth,\r\n}: PluginWrapperProps) {\r\n const [, forceUpdate] = useState({});\r\n\r\n useEffect(() => {\r\n const fullPathKey = [stateKey, ...path].join('.');\r\n const unsubscribe = getGlobalStore\r\n .getState()\r\n .subscribeToPath(fullPathKey, () => {\r\n forceUpdate({});\r\n });\r\n return unsubscribe;\r\n }, [stateKey, path]);\r\n\r\n const plugin = pluginStore\r\n .getState()\r\n .registeredPlugins.find((p) => p.name === pluginName);\r\n\r\n const stateHandler: StateObject<any> \| undefined = pluginStore\r\n .getState()\r\n .stateHandlers.get(stateKey);\r\n\r\n const typeInfo = getGlobalStore.getState().getShadowNode(stateKey, path)\r\n ?._meta?.typeInfo;\r\n\r\n const options = pluginStore\r\n .getState()\r\n .pluginOptions.get(stateKey)\r\n ?.get(pluginName);\r\n\r\n const hookData = pluginStore.getState().getHookResult(stateKey, pluginName);\r\n\r\n if (!plugin?.formWrapper \|\| !stateHandler) {\r\n return <>{children}</>;\r\n }\r\n\r\n const deconstructed = toDeconstructedMethods(stateHandler);\r\n const scopedMetadataContext = createScopedMetadataContext(\r\n stateKey,\r\n plugin.name,\r\n path\r\n );\r\n return plugin.formWrapper({\r\n element: children,\r\n path,\r\n stateKey,\r\n pluginName: plugin.name,\r\n ...deconstructed,\r\n\r\n ...scopedMetadataContext,\r\n options,\r\n hookData,\r\n fieldType: typeInfo?.type,\r\n wrapperDepth,\r\n });\r\n});\r\n"],"names":["getInitialOptions","getShadowMetadata","setShadowMetadata","getShadowValue","registerComponent","unregisterComponent","notifyPathSubscribers","subscribeToPath","getGlobalStore","stateHandlers","notifyFormUpdate","pluginStore","ValidationWrapper","formOpts","path","stateKey","children","thisStateOpts","validationState","status","errors","err","errorMessages","warningMessages","message","primarySeverity","registeredPlugins","pluginsApi","plugin","pluginName","hookData","scopedMetadata","createScopedMetadataContext","jsx","Fragment","React","MemoizedCogsItemWrapper","memo","ListItemWrapper","prevProps","nextProps","itemComponentId","itemPath","localIndex","arraySetter","rebuildStateShape","renderFn","forceUpdate","useState","inViewRef","inView","useInView","elementRef","useRef","imagesLoaded","useImageLoaded","hasReportedInitialHeight","fullKey","useRegisterComponent","setRefs","useCallback","element","useEffect","unsubscribe","e","newHeight","arrayPath","arrayPathKey","itemValue","itemSetter","FormElementWrapper","setState","componentId","uuidv4","formElementRef","stateKeyPathKey","typeInfo","globalStateValue","localValue","setLocalValue","isCurrentlyDebouncing","debounceTimeoutRef","isDeepEqual","currentMeta","detectElementType","el","tagName","type","newValue","meta","debouncedUpdate","runValidation","debounceTime","handleFocus","handleBlur","focusStartTime","baseState","stateWithInputProps","target","prop","initialElement","fullComponentId","useLayoutEffect","ref","loaded","setLoaded","images","loadedCount","handleImageLoad","image","IsolatedComponentWrapper","wrapperDepth","fullPathKey","p","stateHandler","options","deconstructed","toDeconstructedMethods","scopedMetadataContext"],"mappings":"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"}
1	+ {"version":3,"file":"Components.jsx","sources":["../src/Components.tsx"],"sourcesContent":["import {\r\n FormElementParams,\r\n StateObject,\r\n UpdateTypeDetail,\r\n type FormOptsType,\r\n} from './CogsState';\r\nimport { pluginStore } from './pluginStore';\r\nimport {\r\n createMetadataContext,\r\n createScopedMetadataContext,\r\n toDeconstructedMethods,\r\n} from './plugins';\r\nimport React, {\r\n memo,\r\n RefObject,\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n useRef,\r\n useState,\r\n useMemo,\r\n} from 'react';\r\nimport { getGlobalStore, ValidationError, ValidationSeverity } from './store';\r\nimport { useInView } from 'react-intersection-observer';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { isDeepEqual } from './utility';\r\nimport { runValidation } from './validation';\r\n\r\nconst {\r\n getInitialOptions,\r\n\r\n getShadowMetadata,\r\n setShadowMetadata,\r\n getShadowValue,\r\n\r\n registerComponent,\r\n unregisterComponent,\r\n\r\n notifyPathSubscribers,\r\n subscribeToPath,\r\n} = getGlobalStore.getState();\r\nconst { stateHandlers, notifyFormUpdate } = pluginStore.getState();\r\n\r\nexport type ValidationWrapperProps = {\r\n formOpts?: FormOptsType;\r\n path: string[];\r\n stateKey: string;\r\n children: React.ReactNode;\r\n};\r\n\r\nexport function ValidationWrapper({\r\n formOpts,\r\n path,\r\n stateKey,\r\n children,\r\n}: ValidationWrapperProps) {\r\n const { getInitialOptions, getShadowMetadata, getShadowValue } =\r\n getGlobalStore.getState();\r\n const thisStateOpts = getInitialOptions(stateKey!);\r\n\r\n const shadowMeta = getShadowMetadata(stateKey!, path);\r\n const validationState = shadowMeta?.validation;\r\n\r\n const status = validationState?.status \|\| 'NOT_VALIDATED';\r\n\r\n const errors = (validationState?.errors \|\| []).map((err) => ({\r\n ...err,\r\n path: path,\r\n })) as ValidationError[];\r\n const errorMessages = errors\r\n .filter((err) => err.severity === 'error')\r\n .map((err) => err.message);\r\n const warningMessages = errors\r\n .filter((err) => err.severity === 'warning')\r\n .map((err) => err.message);\r\n\r\n // Use first error, or first warning if no errors\r\n const message = errorMessages[0] \|\| warningMessages[0];\r\n const primarySeverity: ValidationSeverity =\r\n errorMessages.length > 0\r\n ? 'error'\r\n : warningMessages.length > 0\r\n ? 'warning'\r\n : undefined;\r\n const { registeredPlugins } = pluginStore.getState();\r\n const pluginsApi: any = {};\r\n\r\n // We iterate over ALL registered plugins in the app.\r\n registeredPlugins.forEach((plugin) => {\r\n // A plugin is considered \"active\" for this state key if its name\r\n // exists as a key in the options (e.g., options.syncPlugin exists).\r\n if (thisStateOpts && thisStateOpts.hasOwnProperty(plugin.name)) {\r\n const pluginName = plugin.name;\r\n\r\n // Now we can safely build the API for this active plugin.\r\n const hookData = pluginStore\r\n .getState()\r\n .getHookResult(stateKey, pluginName);\r\n\r\n const scopedMetadata = createScopedMetadataContext(\r\n stateKey,\r\n pluginName,\r\n path\r\n );\r\n\r\n pluginsApi[pluginName] = {\r\n hookData,\r\n getFieldMetaData: scopedMetadata.getFieldMetaData,\r\n setFieldMetaData: scopedMetadata.setFieldMetaData,\r\n };\r\n }\r\n });\r\n return (\r\n <>\r\n {thisStateOpts?.formElements?.validation &&\r\n !formOpts?.validation?.disable ? (\r\n thisStateOpts.formElements!.validation!({\r\n children: (\r\n <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n ),\r\n status, // Now passes the new ValidationStatus type\r\n message: formOpts?.validation?.hideMessage\r\n ? ''\r\n : formOpts?.validation?.message \|\| message \|\| '',\r\n severity: primarySeverity,\r\n hasErrors: errorMessages.length > 0,\r\n hasWarnings: warningMessages.length > 0,\r\n allErrors: errors,\r\n path: path,\r\n getData: () => getShadowValue(stateKey!, path),\r\n plugins: pluginsApi,\r\n })\r\n ) : (\r\n <React.Fragment key={path.toString()}>{children}</React.Fragment>\r\n )}\r\n </>\r\n );\r\n}\r\nexport const MemoizedCogsItemWrapper = memo(\r\n ListItemWrapper,\r\n (prevProps, nextProps) => {\r\n // Re-render if any of these change:\r\n return (\r\n prevProps.itemPath.join('.') === nextProps.itemPath.join('.') &&\r\n prevProps.stateKey === nextProps.stateKey &&\r\n prevProps.itemComponentId === nextProps.itemComponentId &&\r\n prevProps.localIndex === nextProps.localIndex\r\n );\r\n }\r\n);\r\nexport function ListItemWrapper({\r\n stateKey,\r\n itemComponentId,\r\n itemPath,\r\n localIndex,\r\n arraySetter,\r\n rebuildStateShape,\r\n renderFn,\r\n}: {\r\n stateKey: string;\r\n itemComponentId: string;\r\n itemPath: string[];\r\n localIndex: number;\r\n arraySetter: any;\r\n\r\n rebuildStateShape: (options: {\r\n currentState: any;\r\n path: string[];\r\n componentId: string;\r\n meta?: any;\r\n }) => any;\r\n renderFn: (\r\n setter: any,\r\n index: number,\r\n\r\n arraySetter: any\r\n ) => React.ReactNode;\r\n}) {\r\n const [, forceUpdate] = useState({});\r\n const { ref: inViewRef, inView } = useInView();\r\n const elementRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n const imagesLoaded = useImageLoaded(elementRef);\r\n const hasReportedInitialHeight = useRef(false);\r\n const fullKey = [stateKey, ...itemPath].join('.');\r\n useRegisterComponent(stateKey, itemComponentId, forceUpdate);\r\n\r\n const setRefs = useCallback(\r\n (element: HTMLDivElement \| null) => {\r\n elementRef.current = element;\r\n inViewRef(element); // This is the ref from useInView\r\n },\r\n [inViewRef]\r\n );\r\n\r\n useEffect(() => {\r\n const unsubscribe = subscribeToPath(fullKey, (e) => {\r\n forceUpdate({});\r\n });\r\n return () => unsubscribe();\r\n }, [fullKey]);\r\n useEffect(() => {\r\n if (!inView \|\| !imagesLoaded \|\| hasReportedInitialHeight.current) {\r\n return;\r\n }\r\n\r\n const element = elementRef.current;\r\n if (element && element.offsetHeight > 0) {\r\n hasReportedInitialHeight.current = true;\r\n const newHeight = element.offsetHeight;\r\n\r\n setShadowMetadata(stateKey, itemPath, {\r\n virtualizer: {\r\n itemHeight: newHeight,\r\n domRef: element,\r\n },\r\n });\r\n\r\n const arrayPath = itemPath.slice(0, -1);\r\n const arrayPathKey = [stateKey, ...arrayPath].join('.');\r\n notifyPathSubscribers(arrayPathKey, {\r\n type: 'ITEMHEIGHT',\r\n itemKey: itemPath.join('.'),\r\n\r\n ref: elementRef.current,\r\n });\r\n }\r\n }, [inView, imagesLoaded, stateKey, itemPath]);\r\n\r\n const itemValue = getShadowValue(stateKey, itemPath);\r\n\r\n if (itemValue === undefined) {\r\n return null;\r\n }\r\n\r\n const itemSetter = rebuildStateShape({\r\n currentState: itemValue,\r\n path: itemPath,\r\n componentId: itemComponentId,\r\n });\r\n const children = renderFn(itemSetter, localIndex, arraySetter);\r\n\r\n return <div ref={setRefs}>{children}</div>;\r\n}\r\n\r\nexport function FormElementWrapper({\r\n stateKey,\r\n path,\r\n rebuildStateShape,\r\n renderFn,\r\n formOpts,\r\n setState,\r\n}: {\r\n stateKey: string;\r\n path: string[];\r\n rebuildStateShape: (options: {\r\n path: string[];\r\n componentId: string;\r\n meta?: any;\r\n }) => any;\r\n renderFn: (params: FormElementParams<any>) => React.ReactNode;\r\n formOpts?: FormOptsType;\r\n setState: any;\r\n}) {\r\n const componentId = useRef(uuidv4()).current;\r\n\r\n const [, forceUpdate] = useState({});\r\n const formElementRef = useRef<any>(null);\r\n const stateKeyPathKey = [stateKey, ...path].join('.');\r\n useRegisterComponent(stateKey, componentId, forceUpdate);\r\n // Get the shadow node to access typeInfo and schema\r\n const shadowNode = getGlobalStore.getState().getShadowNode(stateKey, path);\r\n const typeInfo = shadowNode?._meta?.typeInfo;\r\n\r\n const globalStateValue = getShadowValue(stateKey, path);\r\n const [localValue, setLocalValue] = useState<any>(globalStateValue);\r\n const isCurrentlyDebouncing = useRef(false);\r\n const debounceTimeoutRef = useRef<NodeJS.Timeout \| null>(null);\r\n\r\n useEffect(() => {\r\n if (\r\n !isCurrentlyDebouncing.current &&\r\n !isDeepEqual(globalStateValue, localValue)\r\n ) {\r\n setLocalValue(globalStateValue);\r\n }\r\n }, [globalStateValue]);\r\n\r\n useEffect(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Initialize clientActivityState if needed\r\n const currentMeta = getShadowMetadata(stateKey, path) \|\| {};\r\n if (!currentMeta.clientActivityState) {\r\n currentMeta.clientActivityState = { elements: new Map() };\r\n }\r\n\r\n // Detect element type from the ref\r\n const detectElementType = () => {\r\n const el = formElementRef.current;\r\n if (!el) return 'input';\r\n const tagName = el.tagName.toLowerCase();\r\n if (tagName === 'textarea') return 'textarea';\r\n if (tagName === 'select') return 'select';\r\n if (tagName === 'input') {\r\n const type = (el as HTMLInputElement).type;\r\n if (type === 'checkbox') return 'checkbox';\r\n if (type === 'radio') return 'radio';\r\n if (type === 'range') return 'range';\r\n if (type === 'file') return 'file';\r\n }\r\n return 'input';\r\n };\r\n\r\n // Add this element to the Map\r\n currentMeta.clientActivityState.elements.set(componentId, {\r\n domRef: formElementRef,\r\n elementType: detectElementType(),\r\n inputType: formElementRef.current?.type,\r\n mountedAt: Date.now(),\r\n });\r\n\r\n setShadowMetadata(stateKey, path, currentMeta);\r\n\r\n // Subscribe to path updates\r\n const unsubscribe = getGlobalStore\r\n .getState()\r\n .subscribeToPath(stateKeyPathKey, (newValue) => {\r\n if (!isCurrentlyDebouncing.current && localValue !== newValue) {\r\n forceUpdate({});\r\n }\r\n });\r\n\r\n // Cleanup\r\n return () => {\r\n unsubscribe();\r\n\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n isCurrentlyDebouncing.current = false;\r\n }\r\n\r\n // Remove element from Map\r\n const meta = getGlobalStore.getState().getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements) {\r\n meta.clientActivityState.elements.delete(componentId);\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n };\r\n }, []);\r\n\r\n const debouncedUpdate = useCallback(\r\n (newValue: any) => {\r\n // Type conversion logic (keep existing)\r\n if (typeInfo) {\r\n if (typeInfo.type === 'number' && typeof newValue === 'string') {\r\n newValue =\r\n newValue === ''\r\n ? typeInfo.nullable\r\n ? null\r\n : (typeInfo.default ?? 0)\r\n : Number(newValue);\r\n } else if (\r\n typeInfo.type === 'boolean' &&\r\n typeof newValue === 'string'\r\n ) {\r\n newValue = newValue === 'true' \|\| newValue === '1';\r\n } else if (typeInfo.type === 'date' && typeof newValue === 'string') {\r\n newValue = new Date(newValue);\r\n }\r\n } else {\r\n const currentType = typeof globalStateValue;\r\n if (currentType === 'number' && typeof newValue === 'string') {\r\n newValue = newValue === '' ? 0 : Number(newValue);\r\n }\r\n }\r\n\r\n setLocalValue(newValue);\r\n\r\n // Update input activity details\r\n const { getShadowMetadata, setShadowMetadata } =\r\n getGlobalStore.getState();\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId);\r\n if (element && element.currentActivity?.type === 'focus') {\r\n element!.currentActivity.details = {\r\n ...element!.currentActivity.details,\r\n value: newValue,\r\n previousValue:\r\n element!.currentActivity.details?.value \|\| globalStateValue,\r\n inputLength:\r\n typeof newValue === 'string' ? newValue.length : undefined,\r\n keystrokeCount:\r\n (element!.currentActivity.details?.keystrokeCount \|\| 0) + 1,\r\n };\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n }\r\n const element = meta?.clientActivityState?.elements?.get(componentId);\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'input', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n details: {\r\n value: newValue,\r\n inputLength:\r\n typeof newValue === 'string' ? newValue.length : undefined,\r\n isComposing: false, // You'd need to track this from the actual input event\r\n isPasting: false, // You'd need to track this from paste events\r\n keystrokeCount:\r\n (element?.currentActivity?.details?.keystrokeCount \|\| 0) + 1,\r\n },\r\n });\r\n // Validation (keep existing)\r\n const virtualOperation: UpdateTypeDetail = {\r\n stateKey,\r\n path,\r\n newValue: newValue,\r\n updateType: 'update',\r\n timeStamp: Date.now(),\r\n status: 'new',\r\n oldValue: globalStateValue,\r\n };\r\n runValidation(virtualOperation, 'onChange');\r\n\r\n // Debounce state update (keep existing)\r\n isCurrentlyDebouncing.current = true;\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n }\r\n\r\n const debounceTime = formOpts?.debounceTime ?? 200;\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n isCurrentlyDebouncing.current = false;\r\n setState(newValue, path, {\r\n updateType: 'update',\r\n validationTrigger: 'onChange',\r\n });\r\n }, debounceTime);\r\n },\r\n [\r\n setState,\r\n path,\r\n formOpts?.debounceTime,\r\n typeInfo,\r\n globalStateValue,\r\n stateKey,\r\n componentId,\r\n ]\r\n );\r\n\r\n const handleFocus = useCallback(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Update element's current activity\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId)!;\r\n element.currentActivity = {\r\n type: 'focus',\r\n startTime: Date.now(),\r\n details: {\r\n value: localValue,\r\n inputLength:\r\n typeof localValue === 'string' ? localValue.length : undefined,\r\n },\r\n };\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'focus', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n details: {\r\n cursorPosition: formElementRef.current?.selectionStart,\r\n },\r\n });\r\n }, [stateKey, path, componentId, localValue]);\r\n const handleBlur = useCallback(() => {\r\n const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();\r\n\r\n // Clear debounce if active\r\n if (debounceTimeoutRef.current) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n debounceTimeoutRef.current = null;\r\n isCurrentlyDebouncing.current = false;\r\n setState(localValue, path, {\r\n updateType: 'update',\r\n validationTrigger: 'onBlur',\r\n });\r\n }\r\n\r\n // Clear element's current activity\r\n const meta = getShadowMetadata(stateKey, path);\r\n if (meta?.clientActivityState?.elements?.has(componentId)) {\r\n const element = meta.clientActivityState.elements.get(componentId)!;\r\n element.currentActivity = undefined;\r\n setShadowMetadata(stateKey, path, meta);\r\n }\r\n const focusStartTime =\r\n meta?.clientActivityState?.elements?.get(componentId)?.currentActivity\r\n ?.startTime;\r\n\r\n // Notify plugins\r\n notifyFormUpdate({\r\n stateKey,\r\n activityType: 'blur', // Changed from 'type'\r\n path,\r\n timestamp: Date.now(),\r\n duration: focusStartTime ? Date.now() - focusStartTime : undefined,\r\n details: {\r\n duration: focusStartTime ? Date.now() - focusStartTime : 0,\r\n },\r\n });\r\n\r\n // Run validation if configured\r\n const validationOptions = getInitialOptions(stateKey)?.validation;\r\n if (validationOptions?.onBlur) {\r\n const virtualOperation: UpdateTypeDetail = {\r\n stateKey,\r\n path,\r\n newValue: localValue,\r\n updateType: 'update',\r\n timeStamp: Date.now(),\r\n status: 'new',\r\n oldValue: globalStateValue,\r\n };\r\n runValidation(virtualOperation, 'onBlur');\r\n }\r\n }, [localValue, setState, path, stateKey, componentId, globalStateValue]);\r\n\r\n const baseState = rebuildStateShape({\r\n path: path,\r\n componentId: componentId,\r\n meta: undefined,\r\n });\r\n\r\n const stateWithInputProps = new Proxy(baseState, {\r\n get(target, prop) {\r\n if (prop === '$inputProps') {\r\n return {\r\n value: localValue ?? '',\r\n onChange: (e: any) => {\r\n debouncedUpdate(e.target.value);\r\n },\r\n onFocus: handleFocus,\r\n onBlur: handleBlur,\r\n ref: formElementRef,\r\n };\r\n }\r\n\r\n return target[prop];\r\n },\r\n });\r\n\r\n const initialElement = renderFn(stateWithInputProps);\r\n\r\n return (\r\n <ValidationWrapper formOpts={formOpts} path={path} stateKey={stateKey}>\r\n {initialElement}\r\n </ValidationWrapper>\r\n );\r\n}\r\nexport function useRegisterComponent(\r\n stateKey: string,\r\n componentId: string,\r\n forceUpdate: (o: object) => void\r\n) {\r\n const fullComponentId = `${stateKey}////${componentId}`;\r\n\r\n useLayoutEffect(() => {\r\n registerComponent(stateKey, fullComponentId, {\r\n forceUpdate: () => forceUpdate({}),\r\n paths: new Set(),\r\n reactiveType: ['component'],\r\n });\r\n return () => {\r\n unregisterComponent(stateKey, fullComponentId);\r\n };\r\n }, [stateKey, fullComponentId]);\r\n}\r\n\r\nconst useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {\r\n const [loaded, setLoaded] = useState(false);\r\n\r\n useLayoutEffect(() => {\r\n if (!ref.current) {\r\n setLoaded(true);\r\n return;\r\n }\r\n\r\n const images = Array.from(ref.current.querySelectorAll('img'));\r\n\r\n // If there are no images, we are \"loaded\" immediately.\r\n if (images.length === 0) {\r\n setLoaded(true);\r\n return;\r\n }\r\n\r\n let loadedCount = 0;\r\n const handleImageLoad = () => {\r\n loadedCount++;\r\n if (loadedCount === images.length) {\r\n setLoaded(true);\r\n }\r\n };\r\n\r\n images.forEach((image) => {\r\n if (image.complete) {\r\n handleImageLoad();\r\n } else {\r\n image.addEventListener('load', handleImageLoad);\r\n image.addEventListener('error', handleImageLoad);\r\n }\r\n });\r\n\r\n return () => {\r\n images.forEach((image) => {\r\n image.removeEventListener('load', handleImageLoad);\r\n image.removeEventListener('error', handleImageLoad);\r\n });\r\n };\r\n }, [ref.current]);\r\n\r\n return loaded;\r\n};\r\n// Components.tsx\r\n\r\nexport function IsolatedComponentWrapper({\r\n stateKey,\r\n path, // The path of the parent node (e.g. ['form'])\r\n dependencies, // NEW: Optional array of Proxy objects or path arrays\r\n rebuildStateShape,\r\n renderFn,\r\n}: {\r\n stateKey: string;\r\n path: string[];\r\n dependencies?: any[]; // The explicit list of dependencies\r\n rebuildStateShape: (options: any) => any;\r\n renderFn: (state: any) => React.ReactNode;\r\n}) {\r\n const [componentId] = useState(() => uuidv4());\r\n const [, forceUpdate] = useState({});\r\n\r\n useRegisterComponent(stateKey, componentId, forceUpdate);\r\n\r\n const pathsToSubscribe = useMemo(() => {\r\n if (dependencies && dependencies.length > 0) {\r\n return dependencies.map((dep) => {\r\n console.log(dep, dep.$_path);\r\n return [stateKey, ...dep.$_path].join('.');\r\n });\r\n }\r\n\r\n return [[stateKey, ...path].join('.')];\r\n }, [stateKey, path, dependencies]);\r\n\r\n // 2. Subscribe to ALL calculated paths\r\n useEffect(() => {\r\n const store = getGlobalStore.getState();\r\n\r\n // Create an array of unsubscribe functions\r\n const unsubs = pathsToSubscribe.map((fullPathKey) => {\r\n return store.subscribeToPath(fullPathKey, () => {\r\n forceUpdate({});\r\n });\r\n });\r\n\r\n return () => {\r\n unsubs.forEach((unsub) => unsub());\r\n };\r\n }, [pathsToSubscribe]);\r\n\r\n const baseState = rebuildStateShape({\r\n path: path,\r\n componentId: componentId,\r\n meta: undefined,\r\n });\r\n\r\n return <>{renderFn(baseState)}</>;\r\n}\r\n// 1. Define the MINIMAL props needed.\r\ntype PluginWrapperProps = {\r\n children: React.ReactNode;\r\n stateKey: string;\r\n path: string[];\r\n pluginName: string;\r\n wrapperDepth: number;\r\n};\r\n\r\nconst PluginWrapper = memo(function PluginWrapper({\r\n children,\r\n stateKey,\r\n path,\r\n pluginName,\r\n wrapperDepth,\r\n}: PluginWrapperProps) {\r\n const [, forceUpdate] = useState({});\r\n\r\n useEffect(() => {\r\n const fullPathKey = [stateKey, ...path].join('.');\r\n const unsubscribe = getGlobalStore\r\n .getState()\r\n .subscribeToPath(fullPathKey, () => {\r\n forceUpdate({});\r\n });\r\n return unsubscribe;\r\n }, [stateKey, path]);\r\n\r\n const plugin = pluginStore\r\n .getState()\r\n .registeredPlugins.find((p) => p.name === pluginName);\r\n\r\n const stateHandler: StateObject<any> \| undefined = pluginStore\r\n .getState()\r\n .stateHandlers.get(stateKey);\r\n\r\n const typeInfo = getGlobalStore.getState().getShadowNode(stateKey, path)\r\n ?._meta?.typeInfo;\r\n\r\n const options = pluginStore\r\n .getState()\r\n .pluginOptions.get(stateKey)\r\n ?.get(pluginName);\r\n\r\n const hookData = pluginStore.getState().getHookResult(stateKey, pluginName);\r\n\r\n if (!plugin?.formWrapper \|\| !stateHandler) {\r\n return <>{children}</>;\r\n }\r\n\r\n const deconstructed = toDeconstructedMethods(stateHandler);\r\n const scopedMetadataContext = createScopedMetadataContext(\r\n stateKey,\r\n plugin.name,\r\n path\r\n );\r\n return plugin.formWrapper({\r\n element: children,\r\n path,\r\n stateKey,\r\n pluginName: plugin.name,\r\n ...deconstructed,\r\n\r\n ...scopedMetadataContext,\r\n options,\r\n hookData,\r\n fieldType: typeInfo?.type,\r\n wrapperDepth,\r\n });\r\n});\r\n"],"names":["getInitialOptions","getShadowMetadata","setShadowMetadata","getShadowValue","registerComponent","unregisterComponent","notifyPathSubscribers","subscribeToPath","getGlobalStore","stateHandlers","notifyFormUpdate","pluginStore","ValidationWrapper","formOpts","path","stateKey","children","thisStateOpts","validationState","status","errors","err","errorMessages","warningMessages","message","primarySeverity","registeredPlugins","pluginsApi","plugin","pluginName","hookData","scopedMetadata","createScopedMetadataContext","jsx","Fragment","React","MemoizedCogsItemWrapper","memo","ListItemWrapper","prevProps","nextProps","itemComponentId","itemPath","localIndex","arraySetter","rebuildStateShape","renderFn","forceUpdate","useState","inViewRef","inView","useInView","elementRef","useRef","imagesLoaded","useImageLoaded","hasReportedInitialHeight","fullKey","useRegisterComponent","setRefs","useCallback","element","useEffect","unsubscribe","e","newHeight","arrayPath","arrayPathKey","itemValue","itemSetter","FormElementWrapper","setState","componentId","uuidv4","formElementRef","stateKeyPathKey","typeInfo","globalStateValue","localValue","setLocalValue","isCurrentlyDebouncing","debounceTimeoutRef","isDeepEqual","currentMeta","detectElementType","el","tagName","type","newValue","meta","debouncedUpdate","runValidation","debounceTime","handleFocus","handleBlur","focusStartTime","baseState","stateWithInputProps","target","prop","initialElement","fullComponentId","useLayoutEffect","ref","loaded","setLoaded","images","loadedCount","handleImageLoad","image","IsolatedComponentWrapper","dependencies","pathsToSubscribe","useMemo","dep","store","unsubs","fullPathKey","unsub","wrapperDepth","p","stateHandler","options","deconstructed","toDeconstructedMethods","scopedMetadataContext"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.475-canary.1",
+  "version": "0.5.475-canary.10",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@trpc/next": "^10.0.0 || ^11.0.0",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
     "zod": "^3.25.0 || ^4.0.0"
   },
   "devDependencies": {

package/src/CogsState.tsx CHANGED Viewed

@@ -221,7 +221,7 @@ export type EndType<
     errors: ValidationError[],
     source?: 'client' | 'sync_engine' | 'api'
   ) => void;
-  $clearZodValidation: (paths?: string[]) => void;
+  $clearValidation: (paths?: string[]) => void;
   $applyOperation: (
     operation: UpdateTypeDetail,
     metaData?: Record<string, any>
@@ -230,9 +230,18 @@ export type EndType<
   $update: UpdateType<T>;
   $_path: string[];
   $_stateKey: string;
-  $isolate: (
-    renderFn: (state: StateObject<T, TPlugins>) => React.ReactNode
-  ) => JSX.Element;
+  $isolate: {
+    // Overload 1: Just the render function (Default behavior)
+    (
+      renderFn: (state: StateObject<T, TPlugins>) => React.ReactNode
+    ): JSX.Element;
+    // Overload 2: Dependencies array + render function (Optimized behavior)
+    (
+      dependencies: any[],
+      renderFn: (state: StateObject<T, TPlugins>) => React.ReactNode
+    ): JSX.Element;
+  };
   $formElement: (
     control: FormControl<T>,
     opts?: PerPathFormOptsType<T, TPlugins>
@@ -314,6 +323,7 @@ export type StateObject<
   };
 export type CogsUpdate<T extends unknown> = UpdateType<T>;
 type EffectiveSetStateArg<
   T,
   UpdateType extends 'update' | 'insert' | 'cut',
@@ -349,7 +359,6 @@ export type UpdateTypeDetail = {
   oldValue: any;
   newValue: any;
   userId?: number;
   itemId?: string;
   insertAfterId?: string;
   metaData?: Record<string, any>;
@@ -511,14 +520,12 @@ const {
   addPathComponent,
   clearSelectedIndexesForState,
   addStateLog,
-  setSyncInfo,
   clearSelectedIndex,
   getSyncInfo,
   notifyPathSubscribers,
   getPluginMetaDataMap,
   setPluginMetaData,
   removePluginMetaData,
-  // Note: The old functions are no longer imported under their original names
 } = getGlobalStore.getState();
 const { notifyUpdate } = pluginStore.getState();
@@ -1069,9 +1076,7 @@ let isFlushScheduled = false;
 function scheduleFlush() {
   if (!isFlushScheduled) {
     isFlushScheduled = true;
-    console.log('Scheduling flush');
     queueMicrotask(() => {
-      console.log('Actually flushing');
       flushQueue();
     });
   }
@@ -1983,6 +1988,7 @@ function createProxyHandler<
           const viewIds = meta?.arrayViews?.[arrayPathKey];
           // Pass viewIds to getShadowValue to get the filtered/sorted data
+          registerComponentDependency(stateKey, componentId, path);
           return getShadowValue(stateKey, path, viewIds);
         }
@@ -2129,43 +2135,39 @@ function createProxyHandler<
         if (prop === '$validate') {
           return () => {
             const store = getGlobalStore.getState();
-            // 1. Get current data and schema
+            // 1. Get Data & Schema
             const { value } = getScopedData(stateKey, path, meta);
             const opts = store.getInitialOptions(stateKey);
             const schema =
               opts?.validation?.zodSchemaV4 || opts?.validation?.zodSchemaV3;
+            // If no schema, assume valid
             if (!schema) {
               return { success: true, data: value };
             }
-            // 2. Run Zod
+            // 2. Run Zod Validation
             const result = (schema as any).safeParse(value);
-            // 3. Clear ANY existing errors for this path first (reset state)
-            // You might want to be smarter about this for nested objects,
-            // but effectively we need to wipe previous red borders before applying new ones.
-            // (Using the logic from $clearZodValidation)
-            const clearPath = (currentPath: string[]) => {
-              const currentMeta =
-                store.getShadowMetadata(stateKey, currentPath) || {};
-              store.setShadowMetadata(stateKey, currentPath, {
+            // 3. Update State Logic
+            if (result.success) {
+              const currentMeta = store.getShadowMetadata(stateKey, path) || {};
+              store.setShadowMetadata(stateKey, path, {
                 ...currentMeta,
                 validation: {
-                  status: 'NOT_VALIDATED',
+                  status: 'VALID',
                   errors: [],
                   lastValidated: Date.now(),
                 },
               });
-            };
-            // Note: Ideally you recursively clear errors here, but for now we proceed to add new ones.
+            } else {
+              // Zod v4 uses 'issues', Zod v3 uses 'errors'
+              const zodErrors =
+                result.error?.issues || result.error?.errors || [];
-            // 4. If Invalid, apply errors to State (This turns the UI red)
-            if (!result.success) {
-              result.error.errors.forEach((error: any) => {
-                // Calculate the exact path to the field with the error
+              zodErrors.forEach((error: any) => {
                 const errorPath = [...path, ...error.path.map(String)];
                 const currentMeta =
                   store.getShadowMetadata(stateKey, errorPath) || {};
@@ -2182,15 +2184,14 @@ function createProxyHandler<
                       },
                     ],
                     lastValidated: Date.now(),
-                    validatedValue: getShadowValue(stateKey, errorPath),
+                    validatedValue: store.getShadowValue(stateKey, errorPath),
                   },
                 });
               });
-              // Notify components to re-render and show the errors
-              notifyComponents(stateKey);
             }
+            notifyComponents(stateKey);
             return result;
           };
         }
@@ -2769,7 +2770,7 @@ function createProxyHandler<
         if (prop === '$cut') {
           return (index?: number, options?: { waitForSync?: boolean }) => {
             const shadowMeta = getShadowMetadata(stateKey, path);
-            console.log('shadowMeta ->>>>>>>>>>>>>>>>', shadowMeta);
             if (!shadowMeta?.arrayKeys || shadowMeta.arrayKeys.length === 0)
               return;
@@ -2780,12 +2781,8 @@ function createProxyHandler<
                   ? index
                   : shadowMeta.arrayKeys.length - 1;
-            console.log('indexToCut ->>>>>>>>>>>>>>>>', indexToCut);
             const idToCut = shadowMeta.arrayKeys[indexToCut];
             if (!idToCut) return;
-            console.log('idToCut ->>>>>>>>>>>>>>>>', idToCut);
             effectiveSetState(null, [...path, idToCut], {
               updateType: 'cut',
             });
@@ -2988,10 +2985,60 @@ function createProxyHandler<
             notifySelectionComponents(stateKey, parentPath);
           };
         }
-        if (prop === '$_componentId') {
-          return componentId;
+        if (prop === '$clearValidation') {
+          return (subPath?: string[]) => {
+            const targetPath = subPath ? [...path, ...subPath] : path;
+            const store = getGlobalStore.getState();
+            // 1. Get the node where we want to start clearing
+            const startNode = store.getShadowNode(stateKey, targetPath);
+            console.log('startNode ', startNode);
+            if (!startNode) return;
+            // 2. Define a stack for iterative traversal (avoids recursion depth issues)
+            // Stack items: [currentNode, currentPathArray]
+            const stack: [any, string[]][] = [[startNode, targetPath]];
+            console.log('stack ', stack);
+            while (stack.length > 0) {
+              const [node, currPath] = stack.pop()!;
+              console.log('while (stack.length ', node, currPath);
+              if (!node || typeof node !== 'object') continue;
+              // 3. Clear validation on the current node if it exists
+              if (node._meta?.validation) {
+                // Reset the validation object
+                node._meta.validation = {
+                  status: 'NOT_VALIDATED',
+                  errors: [],
+                  lastValidated: Date.now(),
+                  validatedValue: undefined,
+                };
+                // 4. Notify specific path subscribers so isolated fields update
+                const fullPathKey = [stateKey, ...currPath].join('.');
+                store.notifyPathSubscribers(fullPathKey, {
+                  type: 'VALIDATION_CLEAR',
+                });
+              }
+              // 5. Add children to stack to continue traversal
+              const keys = Object.keys(node);
+              for (const key of keys) {
+                if (key !== '_meta') {
+                  stack.push([node[key], [...currPath, key]]);
+                }
+              }
+            }
+            // 6. Notify root components
+            notifyComponents(stateKey);
+          };
         }
         if (path.length == 0) {
+          if (prop === '$_componentId') {
+            return componentId;
+          }
           if (prop === '$setOptions') {
             return (options: OptionsType<T>) => {
               setOptions({ stateKey, options, initialOptionsPart: {} });
@@ -3016,7 +3063,6 @@ function createProxyHandler<
               getPluginMetaDataMap(stateKey, path)?.get(pluginName);
           }
           if (prop === '$addPluginMetaData') {
-            console.log('$addPluginMetaDat');
             return (pluginName: string, data: Record<string, any>) =>
               setPluginMetaData(stateKey, path, pluginName, data);
           }
@@ -3056,24 +3102,6 @@ function createProxyHandler<
               });
             };
           }
-          if (prop === '$clearZodValidation') {
-            return (path?: string[]) => {
-              if (!path) {
-                throw new Error('clearZodValidation requires a path');
-              }
-              const currentMeta = getShadowMetadata(stateKey, path) || {};
-              setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                validation: {
-                  status: 'NOT_VALIDATED',
-                  errors: [],
-                  lastValidated: Date.now(),
-                },
-              });
-            };
-          }
           if (prop === '$applyOperation') {
             return (
@@ -3083,12 +3111,6 @@ function createProxyHandler<
               },
               metaData?: Record<string, any>
             ) => {
-              console.log(
-                'getGlobalStore',
-                getGlobalStore
-                  .getState()
-                  .getShadowMetadata(stateKey, operation.path)
-              );
               let index: number | undefined;
               if (
                 operation.insertAfterId &&
@@ -3274,11 +3296,29 @@ function createProxyHandler<
           };
         }
         if (prop === '$isolate') {
-          return (renderFn: (state: any) => React.ReactNode) => {
+          // We accept (renderFn) OR (deps, renderFn)
+          return (
+            arg1: any[] | ((state: any) => React.ReactNode),
+            arg2?: (state: any) => React.ReactNode
+          ) => {
+            // Check if the first argument is the dependency array
+            const hasDependencies = Array.isArray(arg1);
+            // Normalize arguments
+            const dependencies = hasDependencies ? arg1 : undefined;
+            const renderFn = hasDependencies ? arg2 : arg1;
+            if (!renderFn || typeof renderFn !== 'function') {
+              throw new Error(
+                'CogsState: $isolate requires a render function.'
+              );
+            }
             return (
               <IsolatedComponentWrapper
                 stateKey={stateKey}
-                path={path}
+                path={path} // The path of the node calling $isolate (e.g. "form")
+                dependencies={dependencies} // Pass the specific parts to watch
                 rebuildStateShape={rebuildStateShape}
                 renderFn={renderFn}
               />

package/src/Components.tsx CHANGED Viewed

@@ -633,36 +633,50 @@ const useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {
 };
 // Components.tsx
-// Generic isolated component wrapper
 export function IsolatedComponentWrapper({
   stateKey,
-  path,
+  path, // The path of the parent node (e.g. ['form'])
+  dependencies, // NEW: Optional array of Proxy objects or path arrays
   rebuildStateShape,
   renderFn,
 }: {
   stateKey: string;
   path: string[];
-  rebuildStateShape: (options: {
-    path: string[];
-    componentId: string;
-    meta?: any;
-  }) => any;
+  dependencies?: any[]; // The explicit list of dependencies
+  rebuildStateShape: (options: any) => any;
   renderFn: (state: any) => React.ReactNode;
 }) {
   const [componentId] = useState(() => uuidv4());
   const [, forceUpdate] = useState({});
-  const stateKeyPathKey = [stateKey, ...path].join('.');
   useRegisterComponent(stateKey, componentId, forceUpdate);
+  const pathsToSubscribe = useMemo(() => {
+    if (dependencies && dependencies.length > 0) {
+      return dependencies.map((dep) => {
+        console.log(dep, dep.$_path);
+        return [stateKey, ...dep.$_path].join('.');
+      });
+    }
+    return [[stateKey, ...path].join('.')];
+  }, [stateKey, path, dependencies]);
+  // 2. Subscribe to ALL calculated paths
   useEffect(() => {
-    const unsubscribe = getGlobalStore
-      .getState()
-      .subscribeToPath(stateKeyPathKey, () => {
+    const store = getGlobalStore.getState();
+    // Create an array of unsubscribe functions
+    const unsubs = pathsToSubscribe.map((fullPathKey) => {
+      return store.subscribeToPath(fullPathKey, () => {
         forceUpdate({});
       });
-    return () => unsubscribe();
-  }, [stateKeyPathKey]);
+    });
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [pathsToSubscribe]);
   const baseState = rebuildStateShape({
     path: path,
@@ -672,7 +686,6 @@ export function IsolatedComponentWrapper({
   return <>{renderFn(baseState)}</>;
 }
 // 1. Define the MINIMAL props needed.
 type PluginWrapperProps = {
   children: React.ReactNode;