@idem.agency/form-builder 0.0.14 → 0.0.16

package/dist/index.cjs

@@ -33,72 +33,6 @@ let clsx = require("clsx");
 clsx = __toESM(clsx);
 let zod = require("zod");
 
-//#region src/shared/model/store/store.ts
-function createStore(reducer, initialState) {
-	let state = initialState;
-	const listeners = /* @__PURE__ */ new Set();
-	return {
-		getState() {
-			return state;
-		},
-		dispatch(action) {
-			state = reducer(state, action);
-			listeners.forEach((l) => l());
-		},
-		subscribe(listener) {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-		subscribeSelector(selector, listener) {
-			let prev = selector(state);
-			return this.subscribe(() => {
-				const next = selector(state);
-				if (next !== prev) {
-					prev = next;
-					listener(next);
-				}
-			});
-		}
-	};
-}
-
-//#endregion
-//#region src/shared/model/store/createStoreContext.tsx
-function createStoreContext(reducer, defaultState) {
-	const StoreContext = (0, react.createContext)(null);
-	const Provider = ({ children, initialState }) => {
-		const storeRef = (0, react.useRef)(createStore(reducer, initialState ?? defaultState));
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StoreContext.Provider, {
-			value: storeRef.current,
-			children
-		});
-	};
-	function useStore(selector) {
-		const store = (0, react.useContext)(StoreContext);
-		if (!store) throw new Error("StoreProvider missing");
-		return (0, react.useSyncExternalStore)(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
-	}
-	function useDispatch() {
-		const store = (0, react.useContext)(StoreContext);
-		if (!store) throw new Error("StoreProvider missing");
-		return store.dispatch;
-	}
-	function useStoreInstance() {
-		const store = (0, react.useContext)(StoreContext);
-		if (!store) throw new Error("StoreProvider missing");
-		return store;
-	}
-	return {
-		Provider,
-		useStore,
-		useDispatch,
-		useStoreInstance
-	};
-}
-
-//#endregion
 //#region src/shared/utils.ts
 function updateNestedValue(obj, path, value) {
 	if (!path) return value;
@@ -123,43 +57,6 @@ function getNestedValue(obj, path) {
 	return path.split(".").reduce((acc, key) => acc && acc[key] !== void 0 ? acc[key] : void 0, obj);
 }
 
-//#endregion
-//#region src/shared/model/store/index.tsx
-function reducer(state, action) {
-	const newData = { ...state };
-	switch (action.type) {
-		case "setValue":
-			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
-			break;
-		case "setFieldValue":
-			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
-			newData.errors = updateNestedValue(newData.errors, action.path, action?.errors?.length ? action.errors : null);
-			break;
-		case "setError":
-			newData.errors = updateNestedValue(newData.errors, action.path, action.value);
-			break;
-		case "reset":
-			newData.formData = {};
-			newData.errors = {};
-			break;
-		case "setErrors":
-			newData.errors = { ...action.errors };
-			break;
-	}
-	return newData;
-}
-const { Provider, useStore: useFormStore, useDispatch: useFormDispatch, useStoreInstance: useFormStoreInstance } = createStoreContext(reducer, {
-	formData: {},
-	errors: {}
-});
-const FormStoreProvider = ({ children, formData }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Provider, {
-	initialState: {
-		formData: formData ?? {},
-		errors: {}
-	},
-	children
-});
-
 //#endregion
 //#region src/plugins/validation/rules/confirm.ts
 const confirm = {
@@ -245,47 +142,276 @@ var Validation = class {
 };
 
 //#endregion
-//#region src/plugins/validation/provider.tsx
-function createValidationProvider() {
-	const Context = (0, react.createContext)(null);
-	const Provider = ({ validator = {
-		onSubmit: false,
-		rules: []
-	}, children }) => {
-		const core = (0, react.useMemo)(() => new Validation(validator.onSubmit ?? false, validator.rules ?? []), [validator]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Context.Provider, {
-			value: core,
-			children
-		});
+//#region src/plugins/validation/index.ts
+function createValidationPlugin(config) {
+	const engine = new Validation(config?.onSubmit ?? false, config?.rules ?? []);
+	return {
+		name: "validation",
+		install(ctx) {
+			ctx.events.tap("field:register", ({ path, field }) => {
+				engine.registerField(path, field.validation ?? []);
+			});
+			ctx.pipeline.use("field:change", (data, next) => {
+				const errors = engine.validate(data.field.validation ?? [], data.value, data.formData);
+				return next({
+					...data,
+					errors
+				});
+			});
+			ctx.pipeline.use("form:validate", (data, next) => {
+				const errors = engine.validateAll(data.formData);
+				return next({
+					...data,
+					errors
+				});
+			});
+		}
 	};
-	const useValidate = (rules) => {
-		const core = (0, react.useContext)(Context);
-		if (!core) throw new Error("ValidationProvider missing");
-		return (data, formData) => {
-			return core.validate(rules ?? [], data, formData);
-		};
+}
+
+//#endregion
+//#region src/plugins/visibility/core.ts
+var VisibilityCore = class VisibilityCore {
+	registerFields = {};
+	registerField(path, rule) {
+		this.registerFields[path] = rule;
+	}
+	static isGroupRule(i) {
+		return "rules" in i;
+	}
+	static isInOperator(i) {
+		return i.operator == "in";
+	}
+	static isEqualOperand(i) {
+		return i.operator == "=";
+	}
+	static checkGroup(groupRule, formData) {
+		const logic = groupRule.logic;
+		const items = [];
+		groupRule.rules.forEach((rule) => {
+			if (this.isGroupRule(rule)) items.push(this.checkGroup(rule, formData));
+			else {
+				const value = getNestedValue(formData, rule.field);
+				if (this.isInOperator(rule)) items.push(rule.value.indexOf(value) !== -1);
+				else if (this.isEqualOperand(rule)) items.push(rule.value == value);
+			}
+		});
+		if (logic == "or") return items.indexOf(true) != -1;
+		else return items.indexOf(false) == -1;
+	}
+	isView(path, data) {
+		const rule = this.checkInRule(path);
+		if (!this.checkInRule(path)) return true;
+		return VisibilityCore.checkGroup(rule, data);
+	}
+	checkInRule(path) {
+		return this.registerFields[path];
+	}
+};
+
+//#endregion
+//#region src/plugins/visibility/index.ts
+function createVisibilityPlugin() {
+	const engine = new VisibilityCore();
+	return {
+		name: "visibility",
+		install(ctx) {
+			ctx.events.tap("field:register", ({ path, field }) => {
+				if (field.visibility) engine.registerField(path, field.visibility);
+			});
+			ctx.pipeline.useSync("field:visible", (data, next) => {
+				const visible = engine.isView(data.path, data.formData);
+				return next({
+					...data,
+					visible
+				});
+			});
+		}
 	};
-	const useRegister = (currentFieldPath, field) => {
-		const core = (0, react.useContext)(Context);
-		if (!core) throw new Error("ValidationProvider missing");
-		core.registerField(currentFieldPath, field.validation ?? []);
-		return useValidate(field.validation);
+}
+
+//#endregion
+//#region src/entity/inputs/ui/input/index.tsx
+function isTextFieldConfig(field) {
+	return field.type === "text" || field.type === "email" || field.type === "password";
+}
+const TextField = ({ field, value, errors, onChange }) => {
+	if (!isTextFieldConfig(field)) {
+		console.warn(`TextField received an invalid field config for type: ${field.type}`);
+		return null;
+	}
+	const id = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { marginBottom: "15px" },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: id,
+				children: [field.label, ":"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: field.type,
+				id,
+				name: field.name,
+				placeholder: field.placeholder,
+				value: value || "",
+				onChange: (e) => onChange(e.target.value),
+				style: { borderColor: errors ? "red" : "#ccc" }
+			}),
+			errors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					color: "red",
+					fontSize: "0.8em"
+				},
+				children: Object.values(errors).join(", ")
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/shared/model/store/store.ts
+function createStore(reducer, initialState) {
+	let state = initialState;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getState() {
+			return state;
+		},
+		dispatch(action) {
+			state = reducer(state, action);
+			listeners.forEach((l) => l());
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		subscribeSelector(selector, listener) {
+			let prev = selector(state);
+			return this.subscribe(() => {
+				const next = selector(state);
+				if (next !== prev) {
+					prev = next;
+					listener(next);
+				}
+			});
+		}
 	};
-	const useSubmitValidation = () => {
-		const core = (0, react.useContext)(Context);
-		if (!core) throw new Error("ValidationProvider missing");
-		return (formData) => core.validateAll(formData);
+}
+
+//#endregion
+//#region src/shared/model/store/createStoreContext.tsx
+function createStoreContext(reducer, defaultState) {
+	const StoreContext = (0, react.createContext)(null);
+	const Provider = ({ children, initialState }) => {
+		const storeRef = (0, react.useRef)(createStore(reducer, initialState ?? defaultState));
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StoreContext.Provider, {
+			value: storeRef.current,
+			children
+		});
 	};
+	function useStore(selector) {
+		const store = (0, react.useContext)(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return (0, react.useSyncExternalStore)(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+	}
+	function useDispatch() {
+		const store = (0, react.useContext)(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store.dispatch;
+	}
+	function useStoreInstance() {
+		const store = (0, react.useContext)(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store;
+	}
 	return {
 		Provider,
-		useRegister,
-		useSubmitValidation
+		useStore,
+		useDispatch,
+		useStoreInstance
 	};
 }
 
 //#endregion
-//#region src/plugins/validation/index.ts
-const { Provider: ValidationProvider, useRegister, useSubmitValidation } = createValidationProvider();
+//#region src/shared/model/plugins/context.tsx
+const PluginSystemContext = (0, react.createContext)(null);
+function usePluginManager() {
+	const ctx = (0, react.useContext)(PluginSystemContext);
+	if (!ctx) throw new Error("PluginSystemContext not found");
+	return ctx;
+}
+
+//#endregion
+//#region src/shared/model/store/index.tsx
+function reducer(state, action) {
+	const newData = { ...state };
+	switch (action.type) {
+		case "setValue":
+			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
+			break;
+		case "setFieldValue":
+			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
+			newData.errors = updateNestedValue(newData.errors, action.path, action?.errors?.length ? action.errors : null);
+			break;
+		case "setError":
+			newData.errors = updateNestedValue(newData.errors, action.path, action.value);
+			break;
+		case "reset":
+			newData.formData = {};
+			newData.errors = {};
+			break;
+		case "setErrors":
+			newData.errors = { ...action.errors };
+			break;
+	}
+	return newData;
+}
+function composeMiddleware(middlewares, baseDispatch, getState) {
+	if (middlewares.length === 0) return baseDispatch;
+	return middlewares.reduceRight((next, m) => (action) => m(action, next, getState), baseDispatch);
+}
+const { Provider, useStore: useFormStore, useDispatch: _useRawDispatch, useStoreInstance: useFormStoreInstance } = createStoreContext(reducer, {
+	formData: {},
+	errors: {}
+});
+const DispatchContext = (0, react.createContext)(null);
+const DispatchEnhancer = ({ children }) => {
+	const pluginManager = (0, react.useContext)(PluginSystemContext);
+	const store = useFormStoreInstance();
+	const rawDispatch = _useRawDispatch();
+	const middlewares = pluginManager ? pluginManager.getMiddleware() : [];
+	const dispatch = (0, react.useMemo)(() => composeMiddleware(middlewares, rawDispatch, store.getState), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DispatchContext.Provider, {
+		value: dispatch,
+		children
+	});
+};
+const FormStoreProvider = ({ children, formData }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Provider, {
+	initialState: {
+		formData: formData ?? {},
+		errors: {}
+	},
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DispatchEnhancer, { children })
+});
+function useFormDispatch() {
+	const ctx = (0, react.useContext)(DispatchContext);
+	if (!ctx) throw new Error("FormStoreProvider missing");
+	return ctx;
+}
+
+//#endregion
+//#region src/shared/model/plugins/hooks.ts
+function useCallEvents() {
+	return usePluginManager().callEvents;
+}
+function useRunPipeline() {
+	return usePluginManager().runPipeline;
+}
+function useRunPipelineSync() {
+	return usePluginManager().runPipelineSync;
+}
 
 //#endregion
 //#region src/entity/dynamicBuilder/element.tsx
@@ -293,23 +419,51 @@ const DynamicBuilderElement = (props) => {
 	const Element = props.element;
 	const field = props.field;
 	const currentFieldPath = props.path ? `${props.path}.${field.name}` : field.name;
-	const value = useFormStore(((s) => getNestedValue(s.formData, currentFieldPath)));
-	const errors = useFormStore(((s) => s.errors[currentFieldPath]));
+	const value = useFormStore((s) => getNestedValue(s.formData, currentFieldPath));
+	const errors = useFormStore((s) => s.errors[currentFieldPath]);
 	const dispatch = useFormDispatch();
 	const store = useFormStoreInstance();
-	const validator = useRegister(currentFieldPath, field);
+	const callEvents = useCallEvents();
+	const runPipeline = useRunPipeline();
+	const runPipelineSync = useRunPipelineSync();
+	(0, react.useEffect)(() => {
+		callEvents("field:register", {
+			path: currentFieldPath,
+			field
+		});
+	}, [currentFieldPath]);
+	if (!useFormStore((s) => runPipelineSync("field:visible", {
+		visible: true,
+		field,
+		path: currentFieldPath,
+		formData: s.formData
+	}).visible)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, {
 		field: { ...field },
 		path: currentFieldPath,
 		value,
 		errors,
-		onChange: (value) => {
+		onChange: async (value) => {
 			const data = store.getState().formData;
+			const { value: finalValue, errors } = await runPipeline("field:change", {
+				value,
+				field,
+				path: currentFieldPath,
+				formData: data,
+				errors: []
+			});
 			dispatch({
 				type: "setFieldValue",
 				path: currentFieldPath,
-				value,
-				errors: validator(value, data)
+				value: finalValue,
+				errors
+			});
+			await callEvents("field:change", {
+				value: finalValue,
+				prevValue: value,
+				field,
+				path: currentFieldPath,
+				formData: store.getState().formData
 			});
 		}
 	});
@@ -375,26 +529,57 @@ const DynamicBuilder = (props) => {
 	});
 };
 
+//#endregion
+//#region src/entity/inputs/ui/group/index.tsx
+function isGroupConfig(field) {
+	return Array.isArray(field.fields);
+}
+const FormGroup = ({ field, path }) => {
+	if (!isGroupConfig(field)) return null;
+	const Builder = useBuilder()(field.fields, path);
+	const className = (field.variant ?? "col") == "col" ? "flex-col" : "flex-row";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: field.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)(className, "flex"),
+		children: Builder
+	})] });
+};
+
 //#endregion
 //#region src/widgets/form/form.tsx
 const Form = (0, react.forwardRef)((props, ref) => {
 	const dispatch = useFormDispatch();
 	const store = useFormStoreInstance();
-	const changeRef = (0, react.useRef)(props.onChange);
+	const callEvents = useCallEvents();
+	const runPipeline = useRunPipeline();
 	(0, react.useEffect)(() => {
-		return store.subscribeSelector((s) => s.formData, (formData) => changeRef.current?.(formData));
-	}, [store]);
-	const validation = useSubmitValidation();
-	const submitHdl = (0, react.useCallback)(() => {
+		return store.subscribeSelector((s) => s.formData, (formData) => props.onChange ? props.onChange?.(formData) : null);
+	}, [props.onChange]);
+	const submitHdl = (0, react.useCallback)(async () => {
 		if (props.onSubmit) {
-			const errors = validation(store.getState().formData);
-			if (Object.keys(errors).length == 0) props.onSubmit(store.getState().formData);
+			const currentFormData = store.getState().formData;
+			await callEvents("form:submit:before", { formData: currentFormData });
+			const { formData: transformed } = await runPipeline("form:submit", { formData: currentFormData });
+			const { errors } = await runPipeline("form:validate", {
+				formData: transformed,
+				errors: {}
+			});
+			if (Object.keys(errors).length === 0) props.onSubmit(transformed);
 			else dispatch({
 				type: "setErrors",
 				errors
 			});
+			await callEvents("form:submit:after", {
+				formData: transformed,
+				errors
+			});
 		}
-	}, [props.onSubmit, validation]);
+	}, [
+		props.onSubmit,
+		callEvents,
+		runPipeline,
+		store,
+		dispatch
+	]);
 	(0, react.useImperativeHandle)(ref, () => ({
 		reset: () => dispatch({ type: "reset" }),
 		submit: () => submitHdl(),
@@ -405,9 +590,9 @@ const Form = (0, react.forwardRef)((props, ref) => {
 		store
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-		onSubmit: (e) => {
+		onSubmit: async (e) => {
 			e.preventDefault();
-			submitHdl();
+			await submitHdl();
 		},
 		className: props?.className,
 		children: [
@@ -424,14 +609,204 @@ const Form = (0, react.forwardRef)((props, ref) => {
 	});
 });
 
+//#endregion
+//#region src/shared/model/plugins/HookRegistry.ts
+var HookRegistry = class {
+	handlers = /* @__PURE__ */ new Map();
+	tap(hook, handler) {
+		if (!this.handlers.has(hook)) this.handlers.set(hook, /* @__PURE__ */ new Set());
+		this.handlers.get(hook).add(handler);
+		return () => {
+			this.handlers.get(hook)?.delete(handler);
+		};
+	}
+	async call(hook, data) {
+		const set = this.handlers.get(hook);
+		if (!set) return;
+		await Promise.all([...set].map((h) => h(data)));
+	}
+};
+
+//#endregion
+//#region src/shared/model/plugins/PipelineRegistry.ts
+var PipelineRegistry = class {
+	stages = /* @__PURE__ */ new Map();
+	syncStages = /* @__PURE__ */ new Map();
+	use(pipeline, stage, priority = 10) {
+		if (!this.stages.has(pipeline)) this.stages.set(pipeline, []);
+		const arr = this.stages.get(pipeline);
+		const entry = {
+			stage,
+			priority
+		};
+		arr.push(entry);
+		arr.sort((a, b) => b.priority - a.priority);
+		return () => {
+			const i = arr.indexOf(entry);
+			if (i >= 0) arr.splice(i, 1);
+		};
+	}
+	useSync(pipeline, stage, priority = 10) {
+		if (!this.syncStages.has(pipeline)) this.syncStages.set(pipeline, []);
+		const arr = this.syncStages.get(pipeline);
+		const entry = {
+			stage,
+			priority
+		};
+		arr.push(entry);
+		arr.sort((a, b) => b.priority - a.priority);
+		return () => {
+			const i = arr.indexOf(entry);
+			if (i >= 0) arr.splice(i, 1);
+		};
+	}
+	async run(name, initialData) {
+		const arr = this.stages.get(name) ?? [];
+		const compose = (index) => (data) => {
+			if (index >= arr.length) return Promise.resolve(data);
+			return arr[index].stage(data, compose(index + 1));
+		};
+		return compose(0)(initialData);
+	}
+	runSync(name, initialData) {
+		const arr = this.syncStages.get(name) ?? [];
+		const compose = (index) => (data) => {
+			if (index >= arr.length) return data;
+			return arr[index].stage(data, compose(index + 1));
+		};
+		return compose(0)(initialData);
+	}
+};
+
+//#endregion
+//#region src/shared/model/plugins/EventBus.ts
+var EventBus = class {
+	listeners = /* @__PURE__ */ new Map();
+	on(event, handler) {
+		if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+		this.listeners.get(event).add(handler);
+		return () => this.listeners.get(event)?.delete(handler);
+	}
+	emit(event, data) {
+		this.listeners.get(event)?.forEach((h) => h(data));
+	}
+};
+
+//#endregion
+//#region src/shared/model/plugins/MiddlewareRegistry.ts
+var MiddlewareRegistry = class {
+	middlewares = [];
+	use(middleware) {
+		this.middlewares.push(middleware);
+		return () => {
+			const i = this.middlewares.indexOf(middleware);
+			if (i >= 0) this.middlewares.splice(i, 1);
+		};
+	}
+	getAll() {
+		return [...this.middlewares];
+	}
+};
+
+//#endregion
+//#region src/shared/model/plugins/FieldRegistry.ts
+var FieldRegistry = class {
+	components = /* @__PURE__ */ new Map();
+	register(type, component) {
+		this.components.set(type, component);
+		return () => this.components.delete(type);
+	}
+	getAll() {
+		return Object.fromEntries(this.components);
+	}
+};
+
+//#endregion
+//#region src/shared/model/plugins/PluginManager.ts
+var PluginManager = class {
+	eventRegistry = new HookRegistry();
+	pipelineRegistry = new PipelineRegistry();
+	eventBus = new EventBus();
+	middlewareRegistry = new MiddlewareRegistry();
+	fieldRegistry = new FieldRegistry();
+	unsubscribers = [];
+	installed = false;
+	constructor(plugins) {
+		this.plugins = plugins;
+	}
+	install() {
+		if (this.installed) return;
+		const context = {
+			events: { tap: (hook, handler) => {
+				const unsub = this.eventRegistry.tap(hook, handler);
+				this.unsubscribers.push(unsub);
+				return unsub;
+			} },
+			pipeline: {
+				use: (pipeline, stage, priority) => {
+					const unsub = this.pipelineRegistry.use(pipeline, stage, priority);
+					this.unsubscribers.push(unsub);
+					return unsub;
+				},
+				useSync: (pipeline, stage, priority) => {
+					const unsub = this.pipelineRegistry.useSync(pipeline, stage, priority);
+					this.unsubscribers.push(unsub);
+					return unsub;
+				}
+			},
+			eventBus: {
+				on: (event, handler) => {
+					const unsub = this.eventBus.on(event, handler);
+					this.unsubscribers.push(unsub);
+					return unsub;
+				},
+				emit: (event, data) => this.eventBus.emit(event, data)
+			},
+			fields: { register: (type, component) => {
+				const unsub = this.fieldRegistry.register(type, component);
+				this.unsubscribers.push(unsub);
+				return unsub;
+			} },
+			middleware: { use: (middleware) => {
+				const unsub = this.middlewareRegistry.use(middleware);
+				this.unsubscribers.push(unsub);
+				return unsub;
+			} }
+		};
+		this.installed = true;
+		for (const plugin of this.plugins) plugin.install(context);
+	}
+	uninstall() {
+		if (!this.installed) return;
+		this.installed = false;
+		[...this.unsubscribers].reverse().forEach((fn) => fn());
+		this.unsubscribers = [];
+		[...this.plugins].reverse().forEach((plugin) => plugin.uninstall?.());
+	}
+	callEvents = this.eventRegistry.call.bind(this.eventRegistry);
+	runPipeline = this.pipelineRegistry.run.bind(this.pipelineRegistry);
+	runPipelineSync = this.pipelineRegistry.runSync.bind(this.pipelineRegistry);
+	getMiddleware = this.middlewareRegistry.getAll.bind(this.middlewareRegistry);
+	getFields = this.fieldRegistry.getAll.bind(this.fieldRegistry);
+};
+
 //#endregion
 //#region src/app/index.tsx
 const FormBuilder = (0, react.forwardRef)((props, ref) => {
 	const { formData, ...innerProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormStoreProvider, {
-		formData,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValidationProvider, {
-			validator: props.validator,
+	const pluginManager = (0, react.useMemo)(() => {
+		const pm = new PluginManager([createValidationPlugin(props.validator), ...props.plugins ?? []]);
+		pm.install();
+		return pm;
+	}, []);
+	(0, react.useEffect)(() => {
+		pluginManager.install();
+		return () => pluginManager.uninstall();
+	}, [pluginManager]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginSystemContext.Provider, {
+		value: pluginManager,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormStoreProvider, {
+			formData,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Form, {
 				...innerProps,
 				ref
@@ -440,59 +815,6 @@ const FormBuilder = (0, react.forwardRef)((props, ref) => {
 	});
 });
 
-//#endregion
-//#region src/entity/inputs/ui/input/index.tsx
-function isTextFieldConfig(field) {
-	return field.type === "text" || field.type === "email" || field.type === "password";
-}
-const TextField = ({ field, value, errors, onChange }) => {
-	if (!isTextFieldConfig(field)) {
-		console.warn(`TextField received an invalid field config for type: ${field.type}`);
-		return null;
-	}
-	const id = (0, react.useId)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: { marginBottom: "15px" },
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				htmlFor: id,
-				children: [field.label, ":"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: field.type,
-				id,
-				name: field.name,
-				placeholder: field.placeholder,
-				value: value || "",
-				onChange: (e) => onChange(e.target.value),
-				style: { borderColor: errors ? "red" : "#ccc" }
-			}),
-			errors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: {
-					color: "red",
-					fontSize: "0.8em"
-				},
-				children: Object.values(errors).join(", ")
-			})
-		]
-	});
-};
-
-//#endregion
-//#region src/entity/inputs/ui/group/index.tsx
-function isGroupConfig(field) {
-	return Array.isArray(field.fields);
-}
-const FormGroup = ({ field, path }) => {
-	if (!isGroupConfig(field)) return null;
-	const Builder = useBuilder()(field.fields, path);
-	const className = (field.variant ?? "col") == "col" ? "flex-col" : "flex-row";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: field.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)(className, "flex"),
-		children: Builder
-	})] });
-};
-
 //#endregion
 //#region src/shared/model/index.ts
 const fieldShema = zod.z.object({
@@ -501,9 +823,20 @@ const fieldShema = zod.z.object({
 	type: zod.z.string()
 });
 
+//#endregion
+//#region src/index.ts
+const plugins = {
+	createValidationPlugin,
+	createVisibilityPlugin
+};
+const inputs = {
+	FormGroup,
+	TextField
+};
+
 //#endregion
 exports.FormBuilder = FormBuilder;
-exports.FormGroup = FormGroup;
-exports.TextField = TextField;
 exports.fieldShema = fieldShema;
+exports.inputs = inputs;
+exports.plugins = plugins;
 //# sourceMappingURL=index.cjs.map