@neeloong/form 0.6.2 → 0.8.0

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.6.2
+* @neeloong/form v0.8.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -591,7 +591,7 @@
    *
    * @param {Store} self
    * @param {boolean?} [defState]
-   * @param {boolean | ((store: Store, root: Store) => boolean?) | null} [fn]
+   * @param {boolean | ((store: Store) => boolean?) | null} [fn]
    * @param {Signal.Computed<boolean>?} [parent]
    * @returns {[Signal.State<boolean?>, Signal.Computed<boolean>]}
    */
@@ -601,7 +601,7 @@
   	/** @type {Signal.Computed<boolean>} */
   	let scriptState;
   	if (typeof fn === 'function') {
-  		scriptState = new exports.Signal.Computed(() => Boolean(fn(self, self.root)));
+  		scriptState = new exports.Signal.Computed(() => Boolean(fn(self)));
   	} else {
   		const def = Boolean(fn);
   		scriptState = new exports.Signal.Computed(() => def);
@@ -624,6 +624,8 @@
   const string = v => typeof v === 'string' && v || null;
   /** @param {*} v  */
   const number = v => typeof v === 'number' && v || null;
+  /** @param {*} v  */
+  const regex = v =>v instanceof RegExp ? v : null;
 
   /** @type {(v: Schema.Value | Schema.Value.Group | null) => v is Schema.Value | Schema.Value.Group} */
   const valueFilter = /** @type {*} */(Boolean);
@@ -663,7 +665,7 @@
    * @param {Store} self
    * @param {(v: any) => any?} toValue
    * @param {T?} [defState]
-   * @param {T | ((store: Store, root: Store) => T?) | null} [fn]
+   * @param {T | ((store: Store) => T?) | null} [fn]
    * @returns {[Signal.State<T?>, Signal.Computed<T?>]}
    */
   function createState(self, toValue, defState, fn) {
@@ -672,8 +674,8 @@
   	/** @type {Signal.Computed<T>} */
   	let scriptState;
   	if (typeof fn === 'function') {
-  		const f = /** @type {(store: Store, root: Store) => T?} */(fn);
-  		scriptState = new exports.Signal.Computed(() => toValue(f(self, self.root)));
+  		const f = /** @type {(store: Store) => T?} */(fn);
+  		scriptState = new exports.Signal.Computed(() => toValue(f(self)));
   	} else {
   		const def = toValue(fn);
   		scriptState = new exports.Signal.Computed(() => def);
@@ -688,7 +690,176 @@
 
   }
 
+  const ref = Symbol();
+  /** @import Store from './index.mjs' */
+  /** @typedef {{ [ref]: Store; [k: string]: Ref | undefined;}} Ref */
+
+  /**
+   * @param {Store} store
+   */
+  function createRef(store) {
+
+  	/** @type{Ref} */
+  	const r = { [ref]: store };
+  	for (const [k, f] of store) {
+  		Object.defineProperty(r, k, {
+  			get() { return f.ref; },
+  			configurable: false,
+  			enumerable: true,
+  		});
+  	}
+  	Object.defineProperty(r, ref, {
+  		get() { return store; },
+  		configurable: false,
+  		enumerable: true,
+  	});
+  	return r;
+  }
+
   /** @import { Schema } from '../types.mjs' */
+
+
+  /** @type {{new(...p: ConstructorParameters<typeof Store>): Store}?} */
+  let ObjectStore$1 = null;
+  /** @type {{new(...p: ConstructorParameters<typeof Store>): Store}?} */
+  let ArrayStore$1 = null;
+  /** @type {Record<string, {new(...p: ConstructorParameters<typeof Store>): Store}?>} */
+  let TypeStores = Object.create(null);
+  /**
+   * @param {Schema.Field} schema
+   * @param {object} [options] 
+   * @param {Store?} [options.parent]
+   * @param {string | number | null} [options.index] 
+   * @param {boolean} [options.new] 
+   * @param {(value: any, index: any, store: Store) => void} [options.onUpdate] 
+   * @param {(value: any, index: any, store: Store) => void} [options.onUpdateState] 
+   */
+  function create(schema, options) {
+  	const type = schema.type;
+  	/** @type {{new(...p: ConstructorParameters<typeof Store>): Store}} */
+  	let Class = Store;
+  	if (schema.array && !(ArrayStore$1 && options?.parent instanceof ArrayStore$1)) {
+  		if (ArrayStore$1) { Class = ArrayStore$1; }
+  	} else if (typeof type === 'string') {
+  		const C = TypeStores[type];
+  		if (C) { Class = C; }
+  	} else if (type && typeof type === 'object') {
+  		if (ObjectStore$1) { Class = ObjectStore$1; }
+  	}
+  	return new Class(schema, options);
+  }
+
+  /** @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class */
+  function setObjectStore(Class) {
+  	ObjectStore$1 = Class;
+  }
+
+  /** @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class */
+  function setArrayStore(Class) {
+  	ArrayStore$1 = Class;
+  }
+  /**
+   * @param {string} type
+   * @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class
+   */
+  function setStore$1(type, Class) {
+  	TypeStores[type] = Class;
+  }
+
+  /** @import Store from './Store.mjs' */
+  /** @import { AsyncValidator, Validator } from '../types.mjs' */
+  /**
+   * 
+   * @param {*} v 
+   */
+  function toResult(v) {
+  	if (!v) { return ''; }
+  	if (v instanceof Error) { return v.message; }
+  	if (typeof v !== 'string') { return ''; }
+  	return v;
+
+  }
+  /**
+   * 
+   * @param {Store} store 
+   * @param  {...Validator | undefined | null | (Validator | undefined | null)[]} validators 
+   * @returns 
+   */
+  function createValidator(store, ...validators) {
+  	const allValidators = validators.flat().filter(v => typeof v === 'function');
+  	if (!allValidators.length) {
+  		return new exports.Signal.Computed(() => /** @type {string[]} */([]));
+  	}
+  	return new exports.Signal.Computed(() => {
+  		const results = [];
+  		for (const validator of allValidators) {
+  			try {
+  				results.push(validator(store));
+  			} catch (e){
+  				results.push(e);
+  			}
+  		}
+  		return results.flat().map(toResult).filter(Boolean);
+  	})
+  }
+  /**
+   * 
+   * @param {Store} store 
+   * @param  {...AsyncValidator | undefined | null | (AsyncValidator | undefined | null)[]} validators 
+   * @returns {[exec: () => Promise<string[]>, state: Signal.Computed<string[]>, stop: () => void]}
+   */
+  function createAsyncValidator(store, ...validators) {
+  	const allValidators = validators.flat().filter(v => typeof v === 'function');
+  	if (!allValidators.length) {
+  		return [
+  			()=>Promise.resolve([]),
+  			new exports.Signal.Computed(() => /** @type {string[]} */([])),
+  			() => {}
+  		];
+  	}
+  	const st = new exports.Signal.State(/** @type {string[]} */([]));
+  	/**
+  	 * 
+  	 * @param {AsyncValidator} validator 
+  	 * @param {AbortSignal} signal 
+  	 */
+  	async function run(validator, signal) {
+  		let results = [];
+  		try {
+  			results.push(await validator(store, signal));
+  		} catch (e){
+  			results.push(e);
+  		}
+  		const list = results.flat().map(toResult).filter(Boolean);
+  		if (!signal.aborted && list.length) { st.set([...st.get(), ...list]); }
+  		return list;
+  	}
+  	/** @type {AbortController?} */
+  	let ac = null;
+  	function exec() {
+  		ac?.abort();
+  		ac = new AbortController();
+  		const signal = ac.signal;
+  		st.set([]);
+  		
+  		return Promise.all(allValidators.map(f => run(f, signal))).then(v => v.flat());
+  	}
+  	return [exec, new exports.Signal.Computed(() => st.get()), () => {ac?.abort(); st.set([]);}]
+  }
+
+  /**
+   * 
+   * @param  {...Signal.Computed<string[]>} v 
+   * @returns 
+   */
+  function merge(...v) {
+  	const list = /** @type {Signal.Computed<string[]>[]} */(v.filter(Boolean));
+  	return new exports.Signal.Computed(() => list.flatMap(v => v.get()));
+  }
+
+  /** @import { Ref } from './ref.mjs' */
+  /** @import { AsyncValidator, Schema, Validator } from '../types.mjs' */
+
   /**
    * @template [T=any]
    */
@@ -736,14 +907,24 @@
   	 * @param {boolean} [options.new] 
   	 */
   	static create(schema, options = {}) {
-  		return new ObjectStore({type: schema}, { ...options, parent: null });
+  		return create({type: schema}, { ...options, parent: null });
+  	}
+  	/**
+  	 * @param {string} type
+  	 * @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class
+  	 */
+  	static setStore(type, Class) {
+  		return setStore$1(type, Class);
   	}
   	#null = false;
   	get null() { return this.#null; }
   	get kind() { return ''; }
+  	/** @type {Ref?} */
+  	#ref = null;
+  	get ref() { return this.#ref || createRef(this); }
   	/**
   	 * @param {Schema.Field} schema
-  	 * @param {object} options 
+  	 * @param {object} [options] 
   	 * @param {*} [options.parent] 
   	 * @param {*} [options.state] 
   	 * @param {number | string | null} [options.index] 
@@ -762,21 +943,30 @@
   	 * @param {number} [options.min] 日期、时间、数字的最小值
   	 * @param {number} [options.max] 日期、时间、数字的最大值
   	 * @param {number} [options.step] 日期、时间、数字的步长
+  	 * @param {number} [options.minLength] 
+  	 * @param {number} [options.maxLength] 
+  	 * @param {RegExp} [options.pattern] 
   	 * @param {(Schema.Value.Group | Schema.Value | string | number)[]} [options.values] 可选值
+  	 * @param {Validator | Validator[] | null} [options.validator]
+  	 * @param {{[k in keyof Schema.Events]?: AsyncValidator | AsyncValidator[] | null}} [options.validators]
+  	 * 
+  	 * @param {Ref?} [options.ref]
   	 * 
   	 * @param {((value: any) => any)?} [options.setValue] 
   	 * @param {((value: any) => any)?} [options.setState] 
   	 * @param {((value: any, state: any) => [value: any, state: any])?} [options.convert] 
-  	 * @param {((value: T?, index: any) => void)?} [options.onUpdate] 
-  	 * @param {((value: T?, index: any) => void)?} [options.onUpdateState] 
+  	 * 
+  	 * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdate] 
+  	 * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdateState] 
   	 */
   	constructor(schema, {
-  		null: isNull, state,
+  		null: isNull, state, ref,
   		setValue, setState, convert, onUpdate, onUpdateState,
+  		validator, validators,
   		index, length, new: isNew, parent: parentNode,
   		hidden, clearable, required, disabled, readonly,
-  		label, description, placeholder, min, max, step, values: values$1
-  	}) {
+  		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
+  	} = {}) {
   		this.schema = schema;
   		this.#state.set(typeof state === 'object' && state || {});
   		const parent = parentNode instanceof Store ? parentNode : null;
@@ -807,7 +997,7 @@
   		/** @type {Signal.Computed<boolean>} */
   		let readonlyScript;
   		if (typeof readonlyFn === 'function') {
-  			readonlyScript = new exports.Signal.Computed(() => Boolean(readonlyFn(this, this.root)));
+  			readonlyScript = new exports.Signal.Computed(() => Boolean(readonlyFn(this)));
   		} else {
   			const def = Boolean(readonlyFn);
   			readonlyScript = new exports.Signal.Computed(() => def);
@@ -834,9 +1024,25 @@
   		[this.#selfMin, this.#min] = createState(this, number, min, schema.min);
   		[this.#selfMax, this.#max] = createState(this, number, max, schema.max);
   		[this.#selfStep, this.#step] = createState(this, number, step, schema.step);
+  		[this.#selfMinLength, this.#minLength] = createState(this, number, minLength, schema.minLength);
+  		[this.#selfMaxLength, this.#maxLength] = createState(this, number, maxLength, schema.maxLength);
+  		[this.#selfPattern, this.#pattern] = createState(this, regex, pattern, schema.pattern);
   		// @ts-ignore
   		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
 
+  		const validatorResult = createValidator(this, schema.validator, validator);
+
+  		const [changed, changedResult, cancelChange] = createAsyncValidator(this, schema.validators?.change, validators?.change);
+  		const [blurred, blurredResult, cancelBlur] = createAsyncValidator(this, schema.validators?.blur, validators?.blur);
+  		this.listen('change', () => {changed();});
+  		this.listen('blur', () => {blurred();});
+  		this.#errors = merge(validatorResult, changedResult, blurredResult);
+  		this.#validatorResult = validatorResult;
+  		this.#changed = changed;
+  		this.#blurred = blurred;
+  		this.#cancelChange = cancelChange;
+  		this.#cancelBlur = cancelBlur;
+  		
   		if (length instanceof exports.Signal.State || length instanceof exports.Signal.Computed) {
   			this.#length = length;
   		} else {
@@ -845,8 +1051,10 @@
 
   		if (isNull) {
   			this.#null = true;
+  			this.#ref = createRef(this);
   			return;
   		}
+  		this.#ref = ref || null;
   		this.#onUpdate = onUpdate || null;
   		this.#onUpdateState = onUpdateState || null;
   		this.#setValue = typeof setValue === 'function' ? setValue : null;
@@ -859,19 +1067,16 @@
   			// @ts-ignore
   			this.listen(k, f);
   		}
-  		
-
   	}
-  	#destroyed = false;
   	/** @type {((value: any) => any)?} */
   	#setValue = null
   	/** @type {((value: any) => any)?} */
   	#setState = null
   	/** @type {((value: any, state: any) => [value: any, state: any])?} */
   	#convert = null
-  	/** @type {((value: any, index: any) => void)?} */
+  	/** @type {((value: any, index: any, store: Store) => void)?} */
   	#onUpdate = null
-  	/** @type {((value: any, index: any) => void)?} */
+  	/** @type {((value: any, index: any, store: Store) => void)?} */
   	#onUpdateState = null
   	/** @readonly @type {Store?} */
   	#parent = null;
@@ -1022,6 +1227,33 @@
   	get step() { return this.#step.get(); }
   	set step(v) { this.#selfStep.set(number(v)); }
 
+  	/** @readonly @type {Signal.State<number?>} */
+  	#selfMinLength
+  	/** @readonly @type {Signal.Computed<number?>} */
+  	#minLength
+  	get selfMinLength() { return this.#selfMinLength.get(); }
+  	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
+  	get minLength() { return this.#minLength.get(); }
+  	set minLength(v) { this.#selfMinLength.set(number(v)); }
+
+  	/** @readonly @type {Signal.State<number?>} */
+  	#selfMaxLength
+  	/** @readonly @type {Signal.Computed<number?>} */
+  	#maxLength
+  	get selfMaxLength() { return this.#selfMaxLength.get(); }
+  	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
+  	get maxLength() { return this.#maxLength.get(); }
+  	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
+
+  	/** @readonly @type {Signal.State<RegExp?>} */
+  	#selfPattern
+  	/** @readonly @type {Signal.Computed<RegExp?>} */
+  	#pattern
+  	get selfPattern() { return this.#selfPattern.get(); }
+  	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
+  	get pattern() { return this.#pattern.get(); }
+  	set pattern(v) { this.#selfPattern.set(regex(v)); }
+
 
   	/** @readonly @type {Signal.State<(Schema.Value.Group | Schema.Value)[] | null>} */
   	#selfValues
@@ -1033,8 +1265,20 @@
   	set values(v) { this.#selfValues.set(values(v)); }
 
 
-
-
+  	/** @type {Signal.Computed<string[]>} */
+  	#errors
+  	/** @type {Signal.Computed<string[]>} */
+  	#validatorResult
+  	/** @type {() => Promise<string[]>} */
+  	#changed
+  	/** @type {() => Promise<string[]>} */
+  	#blurred
+  	/** @type {() => void} */
+  	#cancelChange
+  	/** @type {() => void} */
+  	#cancelBlur
+  	get errors() { return this.#errors.get(); }
+  	get error() { return this.#errors.get()[0]; }
 
   	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
   	*[Symbol.iterator]() {}
@@ -1046,39 +1290,32 @@
   	child(key) { return null; }
 
   	#set = false;
-  	/** @type {T?} */
-  	#initValue = null;
-  	#lastValue = this.#initValue;
-  	#value = new exports.Signal.State(this.#initValue);
+  	#initValue = new exports.Signal.State(/** @type {T?} */(null));
+  	#value = new exports.Signal.State(this.#initValue.get());
 
   	
   	#state = new exports.Signal.State(/** @type {any} */(null));
-  	#lastState = this.#state.get();
-
 
-  	get changed() { return this.#value.get() === this.#lastValue; }
-  	get saved() { return this.#value.get() === this.#initValue; }
+  	get changed() { return this.#value.get() === this.#initValue.get(); }
 
   	get value() { return this.#value.get(); }
   	set value(v) {
-  		if (this.#destroyed) { return; }
-  		const val = this.#setValue?.(v) || v;
+  		const newValue = this.#setValue?.(v);
+  		const val = newValue === undefined ? v : newValue;
   		this.#value.set(val);
   		if (!this.#set) {
-  			this.#set = true;
-  			this.#initValue = v;
+  			this.#initValue.set(val);
   		}
-  		this.#onUpdate?.(this.#value.get(), this.#index.get());
+  		this.#onUpdate?.(val, this.#index.get(), this);
   		this.#requestUpdate();
   	}
 
   	get state() { return this.#state.get(); }
   	set state(v) {
-  		if (this.#destroyed) { return; }
-  		const sta = this.#setState?.(v) || v;
+  		const newState = this.#setState?.(v);
+  		const sta = newState === undefined ? v : newState;
   		this.#state.set(sta);
-  		this.#set = true;
-  		this.#onUpdateState?.(this.#state.get(), this.#index.get());
+  		this.#onUpdateState?.(sta, this.#index.get(), this);
   		this.#requestUpdate();
   	}
   	#requestUpdate() {
@@ -1087,9 +1324,40 @@
   		queueMicrotask(() => {
   			const oldValue = this.#value.get();
   			const oldState = this.#state.get();
-  			return this.#runUpdate(oldValue, oldState);
+  			this.#runUpdate(oldValue, oldState);
   		});
   	}
+  	reset(value = this.#initValue.get()) {
+  		this.#reset(value);
+  	}
+  	/**
+  	 * 
+  	 * @param {*} v 
+  	 * @returns 
+  	 */
+  	#reset(v) {
+  		const newValue = this.#setValue?.(v);
+  		const value = newValue === undefined ? v : newValue;
+  		this.#cancelChange();
+  		this.#cancelBlur();
+  		this.#set = true;
+  		if (!value || typeof value !== 'object') {
+  			for (const [, field] of this) {
+  				field.#reset(null);
+  			}
+  			this.#value.set(value);
+  			this.#initValue.set(value);
+  			return value;
+  		}
+  		/** @type {*} */
+  		const newValues = Array.isArray(value) ? [...value] : {...value};
+  		for (const [key, field] of this) {
+  			newValues[key] = field.#reset(newValues[key]);
+  		}
+  		this.#value.set(newValues);
+  		this.#initValue.set(newValues);
+  		return newValues;
+  	}
 
 
   	#needUpdate = false;
@@ -1100,26 +1368,21 @@
   	 * @returns 
   	 */
   	#toUpdate(value, state) {
-  		if (this.#destroyed) { return value; }
   		const [val,sta] = this.#convert?.(value, state) || [value, state];
   		if(this.#value.get() === val && this.#state.get() === sta) { return [val,sta] }
   		this.#value.set(val);
   		this.#state.set(sta);
-  		if (!this.#set) {
-  			this.#set = true;
-  			this.#initValue = val;
-  		}
   		return this.#runUpdate(val, sta);
   	}
   	/**
   	 * 
   	 * @param {*} val 
   	 * @param {*} sta 
-  	 * @returns 
+  	 * @returns {[any, any]}
   	 */
   	#runUpdate(val, sta) {
-  		if (this.#destroyed) { return [val, sta]; }
   		this.#needUpdate = false;
+  		let initValue = val;
   		if (val && typeof val === 'object') {
   			/** @type {T} */
   			// @ts-ignore
@@ -1144,34 +1407,58 @@
   			if (updated) {
   				val = newValues;
   				sta = newStates;
+  				initValue = val;
   				this.#value.set(val);
   				this.#state.set(newStates);
   			}
   		}
-  		if (this.#lastValue === val && this.#lastState === sta) {
-  			return [val, sta];
+  		if (!this.#set) {
+  			this.#set = true;
+  			this.#initValue.set(initValue);
   		}
-  		this.#lastValue = val;
-  		this.#lastState = sta;
   		return [val, sta];
-
   	}
-
-
-
-  	get destroyed() { return this.#destroyed; }
-  	destroy() {
-  		if (this.#destroyed) { return; }
-  		this.#destroyed = true;
-  		for (const [, field] of this) {
-  			field.destroy();
+  	/**
+  	 * 
+  	 * @overload
+  	 * @param {null} [path]
+  	 * @returns {Promise<string[] | null>}
+  	 */
+  	/**
+  	 * @overload
+  	 * @param {(string | number)[]} path 
+  	 * @returns {Promise<{ path: (string | number)[]; store: Store; errors: string[]}[]>}
+  	 */
+  	/**
+  	 * 
+  	 * @param {(string | number)[]?} [path] 
+  	 * @returns {Promise<string[] | { path: (string | number)[]; store: Store; errors: string[] | null;}[] | null>}
+  	 */
+  	validate(path) {
+  		if (!Array.isArray(path)) {
+  			return Promise.all([this.#validatorResult.get(), this.#changed(), this.#blurred()])
+  				.then(v => {
+  					const errors = v.flat();
+  					return errors.length ? errors : null
+  				});
   		}
+  		const list = [this.validate().then(errors => {
+  			if (!errors?.length) {return [];}
+  			return [{path: [...path], store: /** @type {Store} */(this), errors}]
+  		})];
+  		for (const [key, field] of this) {
+  			list.push(field.validate([...path, key]));
+  		}
+  		return Promise.all(list).then(v => v.flat())
   	}
-
   }
 
+  /** @import { Schema } from '../types.mjs' */
 
-
+  /**
+   * @template {Record<string, any>} [T=Record<string, any>]
+   * @extends {Store<T>}
+   */
   class ObjectStore extends Store {
   	get kind() { return 'object'; }
   	/** @type {Record<string, Store>} */
@@ -1187,24 +1474,18 @@
   	 * @param {Schema.Object & Schema.Attr} schema
   	 * @param {object} [options] 
   	 * @param {Store?} [options.parent] 
-  	 * @param {string | number} [options.index] 
+  	 * @param {number | string | null} [options.index] 
   	 * @param {boolean} [options.new] 
-  	 * @param {(value: any, index: any) => void} [options.onUpdate] 
-  	 * @param {(value: any, index: any) => void} [options.onUpdateState] 
+  	 * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdate] 
+  	 * @param {((value: T?, index: any, store: Store) => void)?} [options.onUpdateState] 
   	 */
   	constructor(schema,{ parent, index, new: isNew, onUpdate, onUpdateState } = {}) {
   		const childrenTypes = Object.entries(schema.type);
   		super(schema, {
   			parent, index, new: isNew, onUpdate, onUpdateState,
   			length: childrenTypes.length,
-  			setValue(v) {
-  				if (typeof v !== 'object') { return {}; }
-  				return v;
-  			},
-  			setState(v) {
-  				if (typeof v !== 'object') { return {}; }
-  				return v;
-  			},
+  			setValue(v) { return typeof v === 'object' ? v : null; },
+  			setState(v) { return typeof v === 'object' ? v : null; },
   			convert(v, state) {
   				return [
   					typeof v === 'object' ? v : {},
@@ -1215,34 +1496,31 @@
   		const children = Object.create(null);
   		const childCommonOptions = {
   			parent: this,
-  			/** @param {*} value @param {*} index */
-  			onUpdate: (value, index) => {
+  			/** @param {*} value @param {*} index @param {Store} store */
+  			onUpdate: (value, index, store) => {
+  				if (store !== this.#children[index]) { return; }
+  				// @ts-ignore
   				this.value = {...this.value, [index]: value};
   			},
-  			/** @param {*} state @param {*} index */
-  			onUpdateState: (state, index) => {
+  			/** @param {*} state @param {*} index @param {Store} store */
+  			onUpdateState: (state, index, store) => {
+  				if (store !== this.#children[index]) { return; }
   				this.state = {...this.state, [index]: state};
   			}
   		};
 
   		for (const [index, field] of childrenTypes) {
-  			let child;
-  			if (typeof field.type === 'string') {
-  				if (field.array) {
-  					child = new ArrayStore(field, {...childCommonOptions, index});
-  				} else {
-  					child = new Store(field, {...childCommonOptions, index});
-  				}
-  			} else if (field.array) {
-  				child = new ArrayStore(field, {...childCommonOptions, index});
-  			} else {
-  				child = new ObjectStore(/**@type {*}*/(field), { ...childCommonOptions, index});
-  			}
-  			children[index] = child;
+  			children[index] = create(field, {...childCommonOptions, index});
   		}
   		this.#children = children;
   	}
   }
+  // @ts-ignore
+  setObjectStore(ObjectStore);
+
+  /** @import { Schema } from '../types.mjs' */
+
+
 
   /**
    * @template [T=any]
@@ -1274,23 +1552,19 @@
   	 * @param {Store?} [options.parent]
   	 * @param {string | number | null} [options.index] 
   	 * @param {boolean} [options.new] 
-  	 * @param {(value: any, index: any) => void} [options.onUpdate] 
-  	 * @param {(value: any, index: any) => void} [options.onUpdateState] 
+  	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdate] 
+  	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdateState] 
   	 */
-  	constructor(schema,  { parent, onUpdate, onUpdateState, index, new: isNew} = {}) {
+  	constructor(schema, { parent, onUpdate, onUpdateState, index, new: isNew} = {}) {
   		const childrenState = new exports.Signal.State(/** @type {Store[]} */([]));
   		// @ts-ignore
   		const updateChildren = (list) => {
-  			if (this.destroyed) { return; }
   			const length = Array.isArray(list) && list.length || 0;
   			const children = [...childrenState.get()];
   			const oldLength = children.length;
   			for (let i = children.length; i < length; i++) {
   					children.push(this.#create(i));
   			}
-  			for (const schema of children.splice(length)) {
-  				schema.destroy();
-  			}
   			if (oldLength !== length) {
   				childrenState.set(children);
   			}
@@ -1300,27 +1574,28 @@
   			index, new: isNew, parent,
   			length: new exports.Signal.Computed(() => childrenState.get().length),
   			state: [],
-  			setValue(v) { return Array.isArray(v) ? v : v == null ? [] : [v] },
-  			setState(v) { return Array.isArray(v) ? v : v == null ? [] : [v] },
+  			setValue(v) { return Array.isArray(v) ? v : v == null ? null : [v] },
+  			setState(v) { return Array.isArray(v) ? v : v == null ? null : [v] },
   			convert(v, state) {
-  				const val = Array.isArray(v) ? v : v == null ? [] : [v];
+  				const val = Array.isArray(v) ? v : v == null ? null : [v];
   				updateChildren(val);
   				return [
   					val,
   					(Array.isArray(state) ? state : v == null ? [] : [state]),
   				];
   			},
-  			onUpdate:(value, index) => {
+  			onUpdate:(value, index, state) => {
   				updateChildren(value);
-  				onUpdate?.(value, index);
+  				onUpdate?.(value, index, state);
   			},
   			onUpdateState,
   		});
   		this.#children = childrenState;
   		const childCommonOptions = {
   			parent: this,
-  			/** @param {*} value @param {*} index */
-  			onUpdate: (value, index) => {
+  			/** @param {*} value @param {*} index @param {Store} store */
+  			onUpdate: (value, index, store) => {
+  				if (childrenState.get()[index] !== store) { return;}
   				const val = [...this.value || []];
   				if (val.length < index) {
   					val.length = index;
@@ -1328,8 +1603,9 @@
   				val[index] = value;
   				this.value = val;
   			},
-  			/** @param {*} state @param {*} index */
-  			onUpdateState: (state, index) => {
+  			/** @param {*} state @param {*} index @param {Store} store */
+  			onUpdateState: (state, index, store) => {
+  				if (childrenState.get()[index] !== store) { return;}
   				const sta = [...this.state || []];
   				if (sta.length < index) {
   					sta.length = index;
@@ -1338,33 +1614,21 @@
   				this.state = sta;
   			},
   		};
-  		if (typeof schema.type === 'string') {
-  			this.#create = (index, isNew) =>  {
-  				const child = new Store(schema, {...childCommonOptions, index, new: isNew });
-  				child.index = index;
-  				return child
-  			};
-  		} else if (schema.type && typeof schema.type === 'object' && !Array.isArray(schema.type)) {
-  			this.#create = (index, isNew) =>  {
-  				const child = new ObjectStore(/** @type {*} */(schema), { ...childCommonOptions, index, new: isNew});
-  				child.index = index;
-  				return child
-  			};
-  		} else {
-  			throw new Error();
-  		}
-  		
+  		this.#create = (index, isNew) =>  {
+  			const child = create(schema, {...childCommonOptions, index, new: isNew });
+  			child.index = index;
+  			return child
+  		};
   	}
   	/**
   	 * 
   	 * @param {number} index 
-  	 * @param {T} value 
+  	 * @param {T?} [value] 
   	 * @param {boolean} [isNew] 
   	 * @returns 
   	 */
-  	insert(index, value, isNew) {
-  		if (this.destroyed) { return false; }
-  		const data = this.value;
+  	insert(index, value = null, isNew) {
+  		const data = this.value || [];
   		if (!Array.isArray(data)) { return false; }
   		const children = [...this.#children.get()];
   		const insertIndex = Math.max(0, Math.min(Math.floor(index), children.length));
@@ -1382,16 +1646,16 @@
   			sta.splice(insertIndex, 0, {});
   			this.state = sta;
   		}
-  		this.value = val;
   		this.#children.set(children);
+  		this.value = val;
   		return true;
   	}
   	/**
   	 * 
-  	 * @param {T} value 
+  	 * @param {T?} [value] 
   	 * @returns 
   	 */
-  	add(value) {
+  	add(value = null) {
   		return this.insert(this.#children.get().length, value);
   	}
   	/**
@@ -1400,7 +1664,6 @@
   	 * @returns 
   	 */
   	remove(index) {
-  		if (this.destroyed) { return; }
   		const data = this.value;
   		if (!Array.isArray(data)) { return; }
   		const children = [...this.#children.get()];
@@ -1410,7 +1673,6 @@
   		for (let i = index; i < children.length; i++) {
   			children[i].index = i;
   		}
-  		item.destroy();
   		const val = [...data];
   		const [value] = val.splice(removeIndex, 1);
   		const state = this.state;
@@ -1419,8 +1681,8 @@
   			sta.splice(removeIndex, 1);
   			this.state = sta;
   		}
-  		this.value = val;
   		this.#children.set(children);
+  		this.value = val;
   		return value;
 
   	}
@@ -1431,7 +1693,6 @@
   	 * @returns 
   	 */
   	move(from, to) {
-  		if (this.destroyed) { return false; }
   		const data = this.value;
   		if (!Array.isArray(data)) { return false; }
   		const children = [...this.#children.get()];
@@ -1457,8 +1718,8 @@
   			}
   			this.state = sta;
   		}
-  		this.value = val;
   		this.#children.set(children);
+  		this.value = val;
   		return true;
 
   	}
@@ -1469,7 +1730,6 @@
   	 * @returns 
   	 */
   	exchange(a, b) {
-  		if (this.destroyed) { return false; }
   		const data = this.value;
   		if (!Array.isArray(data)) { return false; }
   		const children = [...this.#children.get()];
@@ -1494,11 +1754,13 @@
   			sta[a] = bValue;
   			this.state = sta;
   		}
-  		this.value = val;
   		this.#children.set(children);
+  		this.value = val;
   		return true;
   	}
   }
+  // @ts-ignore
+  setArrayStore(ArrayStore);
 
   const errors = {
   	CALC: 'no `createCalc` option, no expression parsing support',
@@ -2410,6 +2672,7 @@
   	store: true,
   	parent: true,
   	root: true,
+  	ref: true,
 
   	schema: true,
 
@@ -2417,6 +2680,7 @@
   	readonly: true,
   	creatable: true,
   	immutable: true,
+  	changed: true,
 
   	required: true,
   	clearable: true,
@@ -2429,12 +2693,18 @@
   	min: true,
   	max: true,
   	step: true,
+  	minLength: true,
+  	maxLength: true,
+  	pattern: true,
   	values: true,
 
   	null: true,
   	index: true,
   	no: true,
   	length: true,
+
+  	error: true,
+  	errors: true,
   };
   /** @type {Set<keyof typeof bindable>} */
   // @ts-ignore
@@ -2455,6 +2725,9 @@
   	}
   	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
   	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
+  	yield [`${key}${sign}reset`, {exec: () => val.reset()}];
+  	// @ts-ignore
+  	yield [`${key}${sign}validate`, {exec: v => val.validate(v ? [] : null)}];
   	if (!(val instanceof ArrayStore)) { return; }
   	yield [`${key}${sign}insert`, {exec: (index, value) => val.insert(index, value)}];
   	yield [`${key}${sign}add`, {exec: (v) => val.add(v)}];
@@ -2527,6 +2800,17 @@
   /** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
 
 
+  /** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+  const items = {
+  	value$: { calc(r) { return r?.[ref].value; } },
+  	state$: { calc(r) { return r?.[ref].state; } },
+  };
+
+  var globals = Object.getOwnPropertyDescriptors(items);
+
+  /** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
+
+
   /**
    * 
    * @param {string} key 
@@ -2544,7 +2828,7 @@
    */
   function toGlobal(global) {
   	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
-  	const items = Object.create(null);
+  	const items = Object.create(null, globals);
   	if (!global || typeof global !== 'object') { return items; }
   	for (const [key, value] of Object.entries(global)) {
   		if (!testKey(key)) { continue; }
@@ -2714,6 +2998,9 @@
   			'$click': v => {store.emit('click', v); },
   			'$focus': v => {store.emit('focus', v); },
   			'$blur': v => {store.emit('blur', v); },
+  			'$reset': v => {store.reset(); },
+  			// @ts-ignore
+  			'$validate': v => {store.validate(v ? [] : null); },
   		}
   	}
 
@@ -3324,6 +3611,7 @@
   }
 
   /** @import { Component } from '../types.mjs' */
+  /** @import Store from '../Store/index.mjs' */
   /** @import Environment from './Environment/index.mjs' */
 
 
@@ -3448,9 +3736,10 @@
    * 
    * @param {Component | string} component 
    * @param {Environment} env 
+   * @param {((store: Store, el: Element) => () => void)?} [relate]
    * @returns 
    */
-  function createContext(component, env) {
+  function createContext(component, env, relate) {
   	const tag = typeof component === 'string' ? component : component.tag;
   	const { attrs, events } = typeof component !== 'string' && component || { attrs: null, events: null };
 
@@ -3462,7 +3751,8 @@
   	const attrStates = Object.create(null);
   	const tagAttrs = Object.create(null);
 
-  	const attrWatchers = new Set();
+  	/** @type {Set<() => void>} */
+  	const cancelFns = new Set();
 
   	/** @type {[string, ($event: any) => void, AddEventListenerOptions][]} */
   	const allEvents = [];
@@ -3482,13 +3772,28 @@
   				old = v;
   				fn(v, o, name);
   			}, true);
-  			attrWatchers.add(w);
+  			cancelFns.add(w);
 
   			return () => {
-  				attrWatchers.delete(w);
+  				cancelFns.delete(w);
   				w();
   			};
   		},
+  		relate(el) {
+  			if (!relate || destroyed) { return () => { }; }
+  			try {
+  				const w = relate(env.store, el);
+  				if (typeof w !== 'function') { return () => { }; }
+  				cancelFns.add(w);
+  				return () => {
+  					cancelFns.delete(w);
+  					w();
+  				};
+  			} catch {
+  				return () => { };
+  			}
+
+  		},
   		get destroyed() { return destroyedState.get(); },
   		get init() { return mountedState.get(); },
   		listen(name, listener) { return stateEmitter.listen(name, listener); },
@@ -3557,7 +3862,7 @@
   			if (destroyed) { return; }
   			destroyed = true;
   			destroyedState.set(true);
-  			for (const w of attrWatchers) {
+  			for (const w of cancelFns) {
   				w();
   			}
   			stateEmitter.emit('destroy');
@@ -4207,9 +4512,10 @@
    * @param {Environment} env
    * @param {Record<string, [Layout.Node, Environment]>} templates
    * @param {string[]} componentPath
+   * @param {((store: Store, el: Element) => () => void)?} [relate]
    * @param {Component.Getter?} [getComponent]
    */
-  function renderItem(layout, parent, next, env, templates, componentPath, getComponent) {
+  function renderItem(layout, parent, next, env, templates, componentPath, relate, getComponent) {
   	env = env.set(layout.aliases, layout.vars);
   	const bind = layout.directives.bind;
   	const fragment = layout.directives.fragment;
@@ -4218,18 +4524,18 @@
   		if (!template) { return () => {}; }
   		const [templateLayout, templateEnv] = template;
   		const newEnv = templateEnv.params(templateLayout, layout, env, bind);
-  		return render(templateLayout, parent, next, newEnv, templates, componentPath, getComponent);
+  		return render(templateLayout, parent, next, newEnv, templates, componentPath, relate, getComponent);
   	}
   	if (!layout.name || layout.directives.fragment) {
   		return renderFillDirectives(parent, next, env, layout.directives) || 
   			renderList(layout.children || [], parent, next, env, templates, (layout, templates) => {
-  				return render(layout, parent, next, env, templates, componentPath, getComponent);
+  				return render(layout, parent, next, env, templates, componentPath, relate, getComponent);
   			});
   	}
   	const path = [...componentPath, layout.name];
   	const component = getComponent?.(path);
   	if (getComponent && !component) { return () => { }; }
-  	const { context, handler } = createContext(component ? component : layout.name, env);
+  	const { context, handler } = createContext(component ? component : layout.name, env, relate);
 
 
   	const componentAttrs = component?.attrs;
@@ -4256,7 +4562,7 @@
   	const children = slot ? 
   		renderFillDirectives(slot, null, env, layout.directives)
   		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
-  			return render(layout, slot, null, env, templates, componentPath, getComponent);
+  			return render(layout, slot, null, env, templates, componentPath, relate, getComponent);
   		}) : () => {};
 
 
@@ -4281,16 +4587,17 @@
    * @param {Environment} env
    * @param {Record<string, [Layout.Node, Environment]>} templates
    * @param {string[]} componentPath
+   * @param {((store: Store, el: Element) => () => void)?} [relate]
    * @param {Component.Getter?} [getComponent]
    * @returns {() => void}
    */
-  function render(layout, parent, next, env, templates, componentPath, getComponent) {
+  function render(layout, parent, next, env, templates, componentPath, relate, getComponent) {
   	const { directives } = layout;
   	const newEnv = env.child(directives.value);
   	if (!newEnv) { return () => {}; }
   	const list = newEnv.enum(directives.enum);
   	/** @type {(next: Node | null, env: any) => () => void} */
-  	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, getComponent);
+  	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, relate, getComponent);
   	if (list === true) {
   		return r(next, newEnv);
   	}
@@ -4307,37 +4614,21 @@
   }
 
   /**
-   * @overload
    * @param {Store} store
    * @param {(Layout.Node | string)[]} layouts 
    * @param {Element} parent 
-   * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [global] 
-   * @param {(path: string[]) => Component?} [components] 
+   * @param {object} [options] 
+   * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 
+   * @param {(path: string[]) => Component?} [options.component] 
+   * @param {(store: Store, el: Element) => () => void} [options.relate]
    * @returns {() => void}
    */
-  /**
-   * @overload
-   * @param {Store} store
-   * @param {(Layout.Node | string)[]} layouts 
-   * @param {Element} parent 
-   * @param {Component.Getter?} [components] 
-   * @returns {() => void}
-   */
-  /**
-   * @param {Store} store
-   * @param {(Layout.Node | string)[]} layouts 
-   * @param {Element} parent 
-   * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt1] 
-   * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt2] 
-   */
-  function index (store, layouts, parent, opt1, opt2) {
-  	const options = [opt1, opt2];
-  	const components = options.find(v => typeof v === 'function');
-  	const global = options.find(v => typeof v === 'object');
+  function index (store, layouts, parent, {component, global, relate} = {}) {
   	const env = new Environment(store, global);
   	const templates = Object.create(null);
+  	const relateFn = typeof relate  === 'function' ? relate : null;
   	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
-  		return render(layout, parent, null, env, templates, [], components);
+  		return render(layout, parent, null, env, templates, [], relateFn, component);
   	});
   }