@neeloong/form 0.20.0 → 0.21.1

package/index.full.js

@@ -1,6 +1,6 @@
 /*!
-* @neeloong/form v0.20.0
-* (c) 2024-2025 Fierflame
+* @neeloong/form v0.21.1
+* (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
 
@@ -729,7 +729,6 @@
    * @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;
@@ -860,13 +859,14 @@
    * 
    * @template {Store} T 
    * @param {T} store 
-   * @param {((store: T) => any) | any} def 
+   * @param {((store: T, value?: any) => any) | any} def 
+   * @returns {(value?: any) => unknown}
    */
   function makeDefault(store, def) {
   	if (typeof def !== 'function') {
   		return () => structuredClone(def);
   	}
-  	return () => structuredClone(def(store));
+  	return (value) => structuredClone(def(store, value));
   }
 
   /** @import { Ref } from './ref.mjs' */
@@ -879,7 +879,7 @@
    */
   class Store {
   	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
-  	#events = new Map()
+  	#events = new Map();
   	/**
   	 * 触发事件并通知监听器
   	 * @template {keyof Schema.Events} K
@@ -912,7 +912,7 @@
   			events.set(key, set);
   		}
   		set.add(fn);
-  		return () => { set?.delete(fn); }
+  		return () => { set?.delete(fn); };
 
   	}
   	/**
@@ -923,7 +923,7 @@
   	 * @param {boolean} [options.new] 是否为新建环境
   	 */
   	static create(schema, options = {}) {
-  		return create({type: schema}, { ...options, parent: null });
+  		return create({ type: schema }, { ...options, parent: null });
   	}
   	/**
   	 * 设置自定义类型的存储类
@@ -945,8 +945,7 @@
   	 * @param {Schema.Field<M>} schema 字段的 Schema 定义
   	 * @param {object} [options] 可选配置
   	 * @param {Store?} [options.parent] 
-  	 * @param {((store: Store) => any) | any} [options.default]
-  	 * @param {*} [options.state] 
+  	 * @param {((store: Store, value?: any) => any) | object | number | string | boolean | null | undefined} [options.default]
   	 * @param {number | string | null} [options.index] 
   	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size] 
   	 * @param {boolean} [options.null] 
@@ -974,22 +973,19 @@
   	 * @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: any) => any)?} [options.convert] 
   	 * 
   	 * @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, ref, default: defaultValue,
-  		setValue, setState, convert, onUpdate, onUpdateState,
+  		null: isNull, ref, default: defaultValue,
+  		setValue, convert, onUpdate,
   		validator, validators,
   		index, size, new: isNew, parent: parentNode,
   		hidden, clearable, required, disabled, readonly, removable,
   		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;
   		if (parent) {
   			this.#parent = parent;
@@ -1033,7 +1029,7 @@
   			const s = selfReadonly.get();
   			return s === null ? readonlyScript.get() : s;
   		};
-  		const readonlyParent =  parent ? parent.#readonly : null;
+  		const readonlyParent = parent ? parent.#readonly : null;
   		this.#selfReadonly = selfReadonly;
   		this.#readonly = readonlyParent
   			? new exports.Signal.Computed(() => readonlyParent.get() || getReadonly())
@@ -1062,15 +1058,15 @@
 
   		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.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 (size instanceof exports.Signal.State || size instanceof exports.Signal.Computed) {
   			this.#size = size;
   		} else {
@@ -1084,30 +1080,25 @@
   		}
   		this.#ref = ref || null;
   		this.#onUpdate = onUpdate || null;
-  		this.#onUpdateState = onUpdateState || null;
   		this.#setValue = typeof setValue === 'function' ? setValue : null;
-  		this.#setState = typeof setState === 'function' ? setState : null;
   		this.#convert = typeof convert === 'function' ? convert : null;
   		this.#index.set(index ?? '');
-  		
+
   		for (const [k, f] of Object.entries(schema.events || {})) {
   			if (typeof f !== 'function') { continue; }
   			// @ts-ignore
   			this.listen(k, f);
   		}
   	}
-  	#createDefault
-  	createDefault() { return this.#createDefault(); }
+  	#createDefault;
+  	/** @param {any} [value] @returns {any} */
+  	createDefault(value) { return this.#createDefault(value); }
   	/** @type {((value: any) => any)?} */
-  	#setValue = null
+  	#setValue = null;
   	/** @type {((value: any) => any)?} */
-  	#setState = null
-  	/** @type {((value: any, state: any) => [value: any, state: any])?} */
-  	#convert = null
+  	#convert = null;
   	/** @type {((value: any, index: any, store: Store) => void)?} */
-  	#onUpdate = null
-  	/** @type {((value: any, index: any, store: Store) => void)?} */
-  	#onUpdateState = null
+  	#onUpdate = null;
   	/** @readonly @type {Store?} */
   	#parent = null;
   	/** @readonly @type {Store} */
@@ -1119,7 +1110,7 @@
   	/** @readonly @type {any} */
   	#component;
   	/** @type {Signal.State<boolean>?} */
-  	#selfLoading = null
+  	#selfLoading = null;
   	/** @type {Signal.State<boolean>} */
   	#loading;
   	get loading() {
@@ -1127,7 +1118,7 @@
   	}
   	set loading(loading) {
   		const s = this.#selfLoading;
-  		if (!s) { return }
+  		if (!s) { return; }
   		s.set(Boolean(loading));
   	}
   	/** 存储对象自身 */
@@ -1166,9 +1157,9 @@
   	get immutable() { return this.#immutable; }
 
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#new
+  	#new;
   	/** @readonly @type {Signal.State<boolean>} */
-  	#selfNew
+  	#selfNew;
   	get selfNew() { return this.#selfNew.get(); }
   	set selfNew(v) { this.#selfNew.set(Boolean(v)); }
   	/** 是否新建项 */
@@ -1176,9 +1167,9 @@
   	set new(v) { this.#selfNew.set(Boolean(v)); }
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfHidden
+  	#selfHidden;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#hidden
+  	#hidden;
   	get selfHidden() { return this.#selfHidden.get(); }
   	set selfHidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
   	/** 是否可隐藏 */
@@ -1186,9 +1177,9 @@
   	set hidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfClearable
+  	#selfClearable;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#clearable
+  	#clearable;
   	get selfClearable() { return this.#selfClearable.get(); }
   	set selfClearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
   	/** 是否可清除 */
@@ -1196,9 +1187,9 @@
   	set clearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfRequired
+  	#selfRequired;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#required
+  	#required;
   	get selfRequired() { return this.#selfRequired.get(); }
   	set selfRequired(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
   	/** 是否必填 */
@@ -1206,9 +1197,9 @@
   	set required(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfDisabled
+  	#selfDisabled;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#disabled
+  	#disabled;
   	get selfDisabled() { return this.#selfDisabled.get(); }
   	set selfDisabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
   	/** 是否禁用字段 */
@@ -1216,9 +1207,9 @@
   	set disabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfReadonly
+  	#selfReadonly;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#readonly
+  	#readonly;
   	get selfReadonly() { return this.#selfReadonly.get(); }
   	set selfReadonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
   	/** 是否只读 */
@@ -1227,9 +1218,9 @@
 
 
   	/** @readonly @type {Signal.State<boolean?>} */
-  	#selfRemovable
+  	#selfRemovable;
   	/** @readonly @type {Signal.Computed<boolean>} */
-  	#removable
+  	#removable;
   	get selfRemovable() { return this.#selfRemovable.get(); }
   	set selfRemovable(v) { this.#selfRemovable.set(typeof v === 'boolean' ? v : null); }
   	/** 是否只读 */
@@ -1238,9 +1229,9 @@
 
 
   	/** @readonly @type {Signal.State<string?>} */
-  	#selfLabel
+  	#selfLabel;
   	/** @readonly @type {Signal.Computed<string?>} */
-  	#label
+  	#label;
   	get selfLabel() { return this.#selfLabel.get(); }
   	set selfLabel(v) { this.#selfLabel.set(string(v)); }
   	/** 字段的标签信息 */
@@ -1249,9 +1240,9 @@
 
 
   	/** @readonly @type {Signal.State<string?>} */
-  	#selfDescription
+  	#selfDescription;
   	/** @readonly @type {Signal.Computed<string?>} */
-  	#description
+  	#description;
   	get selfDescription() { return this.#selfDescription.get(); }
   	set selfDescription(v) { this.#selfDescription.set(string(v)); }
   	/** 字段的描述信息 */
@@ -1259,9 +1250,9 @@
   	set description(v) { this.#selfDescription.set(string(v)); }
 
   	/** @readonly @type {Signal.State<string?>} */
-  	#selfPlaceholder
+  	#selfPlaceholder;
   	/** @readonly @type {Signal.Computed<string?>} */
-  	#placeholder
+  	#placeholder;
   	get selfPlaceholder() { return this.#selfPlaceholder.get(); }
   	set selfPlaceholder(v) { this.#selfPlaceholder.set(string(v)); }
   	/** 字段的占位符信息 */
@@ -1270,9 +1261,9 @@
 
 
   	/** @readonly @type {Signal.State<number?>} */
-  	#selfMin
+  	#selfMin;
   	/** @readonly @type {Signal.Computed<number?>} */
-  	#min
+  	#min;
   	get selfMin() { return this.#selfMin.get(); }
   	set selfMin(v) { this.#selfMin.set(number(v)); }
   	/** 数值字段的最小值限制 */
@@ -1281,9 +1272,9 @@
 
 
   	/** @readonly @type {Signal.State<number?>} */
-  	#selfMax
+  	#selfMax;
   	/** @readonly @type {Signal.Computed<number?>} */
-  	#max
+  	#max;
   	get selfMax() { return this.#selfMax.get(); }
   	set selfMax(v) { this.#selfMax.set(number(v)); }
   	/** 数值字段的最大值限制 */
@@ -1292,9 +1283,9 @@
 
 
   	/** @readonly @type {Signal.State<number?>} */
-  	#selfStep
+  	#selfStep;
   	/** @readonly @type {Signal.Computed<number?>} */
-  	#step
+  	#step;
   	get selfStep() { return this.#selfStep.get(); }
   	set selfStep(v) { this.#selfStep.set(number(v)); }
   	/** 数值字段的步长 */
@@ -1302,9 +1293,9 @@
   	set step(v) { this.#selfStep.set(number(v)); }
 
   	/** @readonly @type {Signal.State<number?>} */
-  	#selfMinLength
+  	#selfMinLength;
   	/** @readonly @type {Signal.Computed<number?>} */
-  	#minLength
+  	#minLength;
   	get selfMinLength() { return this.#selfMinLength.get(); }
   	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
   	/** 最小长度 */
@@ -1312,9 +1303,9 @@
   	set minLength(v) { this.#selfMinLength.set(number(v)); }
 
   	/** @readonly @type {Signal.State<number?>} */
-  	#selfMaxLength
+  	#selfMaxLength;
   	/** @readonly @type {Signal.Computed<number?>} */
-  	#maxLength
+  	#maxLength;
   	get selfMaxLength() { return this.#selfMaxLength.get(); }
   	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
   	/** 最大长度 */
@@ -1322,9 +1313,9 @@
   	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
 
   	/** @readonly @type {Signal.State<RegExp?>} */
-  	#selfPattern
+  	#selfPattern;
   	/** @readonly @type {Signal.Computed<RegExp?>} */
-  	#pattern
+  	#pattern;
   	get selfPattern() { return this.#selfPattern.get(); }
   	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
   	/** 模式 */
@@ -1333,9 +1324,9 @@
 
 
   	/** @readonly @type {Signal.State<(Schema.Value.Group | Schema.Value)[] | null>} */
-  	#selfValues
+  	#selfValues;
   	/** @readonly @type {Signal.Computed<(Schema.Value.Group | Schema.Value)[] | null>} */
-  	#values
+  	#values;
   	get selfValues() { return this.#selfValues.get(); }
   	set selfValues(v) { this.#selfValues.set(values(v)); }
   	/** 可选值列表 */
@@ -1344,24 +1335,24 @@
 
 
   	/** @type {Signal.Computed<string[]>} */
-  	#errors
+  	#errors;
   	/** @type {Signal.Computed<string[]>} */
-  	#validatorResult
+  	#validatorResult;
   	/** @type {() => Promise<string[]>} */
-  	#changed
+  	#changed;
   	/** @type {() => Promise<string[]>} */
-  	#blurred
+  	#blurred;
   	/** @type {() => void} */
-  	#cancelChange
+  	#cancelChange;
   	/** @type {() => void} */
-  	#cancelBlur
+  	#cancelBlur;
   	/** 所有校验错误列表 */
   	get errors() { return this.#errors.get(); }
   	/** 字段校验错误信息 */
   	get error() { return this.#errors.get()[0]; }
 
   	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
-  	*[Symbol.iterator]() {}
+  	*[Symbol.iterator]() { }
   	/**
   	 * 获取子存储
   	 * @param {string | number} key 
@@ -1373,11 +1364,9 @@
   	#initValue = new exports.Signal.State(/** @type {T?} */(null));
   	#value = new exports.Signal.State(this.#initValue.get());
 
-  	
-  	#state = new exports.Signal.State(/** @type {any} */(null));
 
   	/** 内容是否已改变 */
-  	get changed() { return this.#value.get() === this.#initValue.get(); }
+  	get changed() { return !Object.is(this.#value.get(), this.#initValue.get()); }
 
   	/** 字段当前值 */
   	get value() { return this.#value.get(); }
@@ -1392,34 +1381,26 @@
   		this.#requestUpdate();
   	}
 
-  	/** 字段状态 */
-  	get state() { return this.#state.get(); }
-  	set state(v) {
-  		const newState = this.#setState?.(v);
-  		const sta = newState === undefined ? v : newState;
-  		this.#state.set(sta);
-  		this.#onUpdateState?.(sta, this.#index.get(), this);
-  		this.#requestUpdate();
-  	}
   	#requestUpdate() {
   		if (this.#needUpdate) { return; }
   		this.#needUpdate = true;
   		queueMicrotask(() => {
   			const oldValue = this.#value.get();
-  			const oldState = this.#state.get();
-  			this.#runUpdate(oldValue, oldState);
+  			this.#runUpdate(oldValue);
   		});
   	}
   	/** 重置数据 */
-  	reset(value = this.#initValue.get()) {
-  		this.#reset(value);
+  	reset(value = this.#set ? this.#initValue.get() : this.#createDefault(), isNew = this.#selfNew.get()) {
+  		this.#reset(value, Boolean(isNew));
   	}
   	/**
   	 * 
   	 * @param {*} v 
+  	 * @param {boolean} isNew 
   	 * @returns 
   	 */
-  	#reset(v) {
+  	#reset(v, isNew) {
+  		this.#selfNew.set(isNew);
   		const newValue = this.#setValue?.(v);
   		const value = newValue === undefined ? v : newValue;
   		this.#cancelChange();
@@ -1427,16 +1408,17 @@
   		this.#set = true;
   		if (!value || typeof value !== 'object') {
   			for (const [, field] of this) {
-  				field.#reset(null);
+  				field.#reset(null, false);
   			}
   			this.#value.set(value);
   			this.#initValue.set(value);
+  			this.#onUpdate?.(value, this.#index.get(), this);
   			return value;
   		}
   		/** @type {*} */
-  		const newValues = Array.isArray(value) ? [...value] : {...value};
+  		const newValues = Array.isArray(value) ? [...value] : { ...value };
   		for (const [key, field] of this) {
-  			newValues[key] = field.#reset(newValues[key]);
+  			newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
   		}
   		this.#value.set(newValues);
   		this.#initValue.set(newValues);
@@ -1449,59 +1431,48 @@
   	/**
   	 * 
   	 * @param {T} value 
-  	 * @param {*} state 
   	 * @returns 
   	 */
-  	#toUpdate(value, state) {
-  		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);
-  		return this.#runUpdate(val, sta);
+  	#toUpdate(value) {
+  		let val = this.#convert?.(value) ?? value;
+  		if (val === undefined) { val = value; }
+  		if (Object.is(this.#value.get(), val)) { return val; }
+  		return this.#runUpdate(val);
   	}
   	/**
   	 * 
   	 * @param {*} val 
-  	 * @param {*} sta 
   	 * @returns {[any, any]}
   	 */
-  	#runUpdate(val, sta) {
+  	#runUpdate(val) {
   		this.#needUpdate = false;
   		let initValue = val;
   		if (val && typeof val === 'object') {
   			/** @type {T} */
   			// @ts-ignore
-  			let newValues = Array.isArray(val) ? [...val] : {...val};
-  			let newStates = Array.isArray(val) ? Array.isArray(sta) ? [...sta] : [] : {...sta};
+  			let newValues = Array.isArray(val) ? [...val] : { ...val };
   			let updated = false;
   			for (const [key, field] of this) {
   				// @ts-ignore
-  				const data = val[key];
-  				const state = sta?.[key];
-  				const [newData, newState] = field.#toUpdate(data, state);
-  				if (data !== newData) {
-  					// @ts-ignore
-  					newValues[key] = newData;
-  					updated = true;
-  				}
-  				if (state !== newState) {
-  					newStates[key] = newState;
-  					updated = true;
-  				}
+  				const data = Object.hasOwn(val, key) ? val[key] : undefined;
+  				const newData = field.#toUpdate(data);
+  				if (Object.is(data, newData)) { continue; }
+  				// @ts-ignore
+  				newValues[key] = newData;
+  				updated = true;
   			}
   			if (updated) {
   				val = newValues;
-  				sta = newStates;
   				initValue = val;
   				this.#value.set(val);
-  				this.#state.set(newStates);
   			}
   		}
   		if (!this.#set) {
   			this.#set = true;
   			this.#initValue.set(initValue);
   		}
-  		return [val, sta];
+  		this.#value.set(val);
+  		return val;
   	}
   	/**
   	 * 异步校验
@@ -1525,18 +1496,18 @@
   			return Promise.all([this.#validatorResult.get(), this.#changed(), this.#blurred()])
   				.then(v => {
   					const errors = v.flat();
-  					return errors.length ? errors : null
+  					return errors.length ? errors : null;
   				});
   		}
   		const selfPath = Array.isArray(path) ? path : [];
-  		const list = [this.validate().then(errors => {
-  			if (!errors?.length) {return [];}
-  			return [{path: [...selfPath], store: /** @type {Store} */(this), errors}]
+  		const list = [this.validate(true).then(errors => {
+  			if (!errors?.length) { return []; }
+  			return [{ path: [...selfPath], store: /** @type {Store} */(this), errors }];
   		})];
   		for (const [key, field] of this) {
   			list.push(field.validate([...selfPath, key]));
   		}
-  		return Promise.all(list).then(v => v.flat())
+  		return Promise.all(list).then(v => v.flat());
   	}
   }
 
@@ -1550,8 +1521,8 @@
   class ObjectStore extends Store {
   	get kind() { return 'object'; }
   	/** @type {Record<string, Store>} */
-  	#children
-  	*[Symbol.iterator]() {yield* Object.entries(this.#children);}
+  	#children;
+  	*[Symbol.iterator]() { yield* Object.entries(this.#children); }
   	/**
   	 * 
   	 * @param {string | number} key 
@@ -1565,26 +1536,25 @@
   	 * @param {number | string | null} [options.index] 
   	 * @param {boolean} [options.new] 
   	 * @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 } = {}) {
+  	constructor(schema, { parent, index, new: isNew, onUpdate } = {}) {
   		const childrenTypes = Object.entries(schema.type);
   		/** @type {Record<string, Store>} */
   		const children = Object.create(null);
   		super(schema, {
-  			parent, index, new: isNew, onUpdate, onUpdateState,
+  			parent, index, new: isNew, onUpdate,
   			size: childrenTypes.length,
   			setValue(v) { return typeof v === 'object' ? v : null; },
-  			setState(v) { return typeof v === 'object' ? v : null; },
-  			convert(v, state) {
-  				return [
-  					typeof v === 'object' ? v : {},
-  					typeof state === 'object' ? state : {},
-  				]
+  			convert(v) {
+  				return typeof v === 'object' ? v : {};
   			},
-  			default: schema.default ?? (() => Object.fromEntries(
-  				Object.entries(children).map(([k,v]) => [k, v.createDefault()])
-  			)),
+  			default: schema.default ?? ((store, value) => {
+  				const list = Object.entries(children);
+  				let obj = value;
+  				if (!obj || typeof obj !== 'object') { obj = schema.default; }
+  				if (!obj || typeof obj !== 'object') { obj = {}; }
+  				return Object.fromEntries(list.map(([k, v]) => [k, v.createDefault(Object.hasOwn(obj, k) ? obj[k] : null)]));
+  			}),
   		});
   		const childCommonOptions = {
   			parent: this,
@@ -1592,17 +1562,12 @@
   			onUpdate: (value, index, store) => {
   				if (store !== this.#children[index]) { return; }
   				// @ts-ignore
-  				this.value = {...this.value, [index]: value};
+  				this.value = { ...this.value, [index]: value };
   			},
-  			/** @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) {
-  			children[index] = create(field, {...childCommonOptions, index});
+  			children[index] = create(field, { ...childCommonOptions, index });
   		}
   		this.#children = children;
   	}
@@ -1647,9 +1612,8 @@
   	 * @param {boolean} [options.new] 
   	 * @param {boolean} [options.addable] 
   	 * @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, addable } = {}) {
+  	constructor(schema, { parent, onUpdate, index, new: isNew, addable } = {}) {
   		const childrenState = new exports.Signal.State(/** @type {Store[]} */([]));
   		// @ts-ignore
   		const updateChildren = (list) => {
@@ -1668,22 +1632,16 @@
   		super(schema, {
   			index, new: isNew, parent,
   			size: new exports.Signal.Computed(() => childrenState.get().length),
-  			state: [],
   			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) {
+  			convert(v) {
   				const val = Array.isArray(v) ? v : v == null ? null : [v];
   				updateChildren(val);
-  				return [
-  					val,
-  					(Array.isArray(state) ? state : v == null ? [] : [state]),
-  				];
+  				return val;
   			},
-  			onUpdate: (value, index, state) => {
+  			onUpdate: (value, index, store) => {
   				updateChildren(value);
-  				onUpdate?.(value, index, state);
+  				onUpdate?.(value, index, store);
   			},
-  			onUpdateState,
   			default: schema.default ?? [],
   		});
 
@@ -1702,16 +1660,6 @@
   				val[index] = value;
   				this.value = val;
   			},
-  			/** @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;
-  				}
-  				sta[index] = state;
-  				this.state = sta;
-  			},
   		};
   		this.#create = (index, isNew) => {
   			const child = create(schema, { ...childCommonOptions, index, new: isNew });
@@ -1753,13 +1701,7 @@
   			children[i].index = i;
   		}
   		const val = [...data];
-  		val.splice(insertIndex, 0, value ?? item.createDefault());
-  		const state = this.state;
-  		if (Array.isArray(state)) {
-  			const sta = [...state];
-  			sta.splice(insertIndex, 0, {});
-  			this.state = sta;
-  		}
+  		val.splice(insertIndex, 0, item.createDefault(value));
   		this.#children.set(children);
   		this.value = val;
   		return true;
@@ -1789,12 +1731,6 @@
   		}
   		const val = [...data];
   		const [value] = val.splice(removeIndex, 1);
-  		const state = this.state;
-  		if (Array.isArray(state)) {
-  			const sta = [...this.state];
-  			sta.splice(removeIndex, 1);
-  			this.state = sta;
-  		}
   		this.#children.set(children);
   		this.value = val;
   		return value;
@@ -1834,16 +1770,6 @@
   		while (toIndex > val.length) { val.push(null); }
   		val.splice(toIndex, 0, ...values);
 
-  		const state = this.state;
-  		if (Array.isArray(state)) {
-  			const sta = [...state];
-  			const states = sta.splice(from, len);
-  			for (let i = states.length; i < len; i++) { states.push({}); }
-  			while (toIndex > sta.length) { sta.push({}); }
-  			sta.splice(toIndex, 0, ...states);
-
-  			this.state = sta;
-  		}
   		this.#children.set(children);
   		this.value = val;
   		return len;
@@ -1871,15 +1797,6 @@
   		const bValue = val[b];
   		val[b] = aValue;
   		val[a] = bValue;
-  		const state = this.state;
-  		if (Array.isArray(state)) {
-  			const sta = [...state];
-  			const aValue = sta[a];
-  			const bValue = sta[b];
-  			sta[b] = aValue;
-  			sta[a] = bValue;
-  			this.state = sta;
-  		}
   		this.#children.set(children);
   		this.value = val;
   		return true;
@@ -3028,7 +2945,6 @@
   	kind: true,
 
   	value: true,
-  	state: true,
 
   	store: true,
   	parent: true,
@@ -3086,7 +3002,8 @@
   		yield [`${key}${sign}${k}`, {get: () => val[k]}];
   	}
   	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
-  	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
+  	/** @deprecated */
+  	yield [`${key}${sign}state`, {get: () => null, set: v => {}}];
   	yield [`${key}${sign}reset`, {exec: () => val.reset()}];
   	// @ts-ignore
   	yield [`${key}${sign}validate`, {exec: v => val.validate(v ? [] : null)}];
@@ -3374,6 +3291,8 @@
   		const res = Object.fromEntries([...bindableSet].map(v => [
   			`$${v}`, cb => watch(() => store[v], cb, true)
   		]));
+  		/** @deprecated */
+  		res.$$state = cb => watch(() => null, cb, true);
   		return res;
   	}
   	/**
@@ -3390,13 +3309,15 @@
   		}
   		/** @type {Record<string, {get(): any; set?(v: any): void}> | void} */
   		const res = Object.fromEntries([...bindableSet].map(v => [
-  			`$${v}`, v === 'value' || v === 'state' ? {
+  			`$${v}`, v === 'value' ? {
   				get: () => store[v], 
   				set: (s)=>{store[v] = s;}
   			} : {
   				get: () => store[v], 
   			}
   		]));
+  		/** @deprecated */
+  		res.$$state = { get: () => null, set: () => {} };
   		return res;
   	}
   	/**
@@ -3411,7 +3332,8 @@
   		if (!store) { return; }
   		switch(type) {
   			case 'value': return v => {store.value = v; };
-  			case 'state': return v => {store.state = v; };
+  			/** @deprecated */
+  			case 'state': return v => { };
   		}
   	}
   	/**
@@ -3429,7 +3351,8 @@
   		}
   		return {
   			'$value': v => {store.value = v; },
-  			'$state': v => {store.state = v; },
+  			/** @deprecated */
+  			'$state': v => { },
   			'$input': v => {store.emit('input', v); },
   			'$change': v => {store.emit('change', v); },
   			'$click': v => {store.emit('click', v); },
@@ -5324,431 +5247,85 @@
   /** @import { Store } from '../Store/index.mjs' */
   /** @import { StoreLayout } from '../types.mjs' */
 
+
   /**
    * 
-   * @param {Store<any, any>} store 
-   * @param {StoreLayout.Renderer} fieldRenderer 
-   * @param {StoreLayout.Field?} layout
-   * @param {object} option 
-   * @param {(string | StoreLayout.Action[])[]} option.columns 
-   * @param {() => void} option.remove 
-   * @param {() => void} option.dragenter 
-   * @param {() => void} option.dragstart 
-   * @param {() => void} option.dragend 
-   * @param {{get(): boolean}} option.deletable 
-   * @param {StoreLayout.Options?} options
-
-   * @returns {[HTMLTableSectionElement, () => void]}
+   * @param {string} field 
    */
-  function Line(store, fieldRenderer, layout, {
-  	columns,
-  	remove, dragenter, dragstart, dragend, deletable
-  }, options) {
-  	const root = document.createElement('tbody');
-  	root.addEventListener('dragenter', () => {
-  		dragenter();
-  	});
-  	root.addEventListener('dragstart', (event) => {
-  		if (event.target !== event.currentTarget) { return; }
-  		dragstart();
-  	});
-  	root.addEventListener('dragend', dragend);
-  	const head = root.appendChild(document.createElement('tr'));
-
-  	/** @type {(() => void)[]} */
-  	const destroyList = [];
-
-
-  	let trigger = () => { };
-  	/** @type {HTMLButtonElement[]} */
-  	const triggerList = [];
-  	if (columns.find(v => Array.isArray(v) && v.includes('trigger'))) {
-  		const body = root.appendChild(document.createElement('tr'));
-  		const main = body.appendChild(document.createElement('td'));
-  		main.colSpan = columns.length;
-
-  		const [form, destroy] = Form(store, fieldRenderer, layout, options);
-  		main.appendChild(form);
-  		destroyList.push(destroy);
-  		body.hidden = true;
-  		trigger = function click() {
-  			if (body.hidden) {
-  				body.hidden = false;
-  				for (const ext of triggerList) {
-  					ext.classList.remove('NeeloongForm-table-line-open');
-  					ext.classList.add('NeeloongForm-table-line-close');
-  				}
-  			} else {
-  				body.hidden = true;
-  				for (const ext of triggerList) {
-  					ext.classList.remove('NeeloongForm-table-line-close');
-  					ext.classList.add('NeeloongForm-table-line-open');
-  				}
-  			}
-  		};
-
-  	}
+  function createFieldFilter(field) {
 
   	/**
   	 * 
-  	 * @param {PointerEvent} event 
+  	 * @param {StoreLayout.Item} v 
+  	 * @returns {v is StoreLayout.Field}
   	 */
-  	function pointerdown({ pointerId }) {
-  		root.draggable = true;
-  		/** @param {PointerEvent} event */
-  		function pointerup(event) {
-  			if (event.pointerId !== pointerId) { return; }
-  			if (!root) { return; }
-  			root.draggable = false;
-  			window.removeEventListener('pointerup', pointerup, { capture: true });
-  			window.removeEventListener('pointercancel', pointerup, { capture: true });
-  		}
-  		window.addEventListener('pointerup', pointerup, { capture: true });
-  		window.addEventListener('pointercancel', pointerup, { capture: true });
-
-  	}
 
-  	for (const name of columns) {
-  		if (!Array.isArray(name)) {
-  			const td = head.appendChild(document.createElement('td'));
-  			const child = store.child(name);
-  			if (!child) { continue; }
-  			const [el, destroy] = FormField(child, fieldRenderer, null, options, true);
-  			destroyList.push(destroy);
-  			td.appendChild(el);
-  			continue;
-  		}
-  		const handle = head.appendChild(document.createElement('th'));
-  		handle.classList.add('NeeloongForm-table-line-handle');
-  		for (const k of name) {
-  			switch (k) {
-  				case 'trigger': {
-  					const ext = handle.appendChild(document.createElement('button'));
-  					ext.classList.add('NeeloongForm-table-line-open');
-  					triggerList.push(ext);
-  					ext.addEventListener('click', trigger);
-  					continue;
-  				}
-  				case 'move': {
-  					if (!options?.editable) { continue; }
-  					const move = handle.appendChild(document.createElement('button'));
-  					move.classList.add('NeeloongForm-table-move');
-  					move.addEventListener('pointerdown', pointerdown);
-  					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
-  						move.disabled = disabled;
-  					}, true));
-  					continue;
-  				}
-  				case 'remove': {
-  					if (!options?.editable) { continue; }
-  					const del = handle.appendChild(document.createElement('button'));
-  					del.classList.add('NeeloongForm-table-remove');
-  					del.addEventListener('click', remove);
-  					destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
-  						del.disabled = disabled;
-  					}, true));
-  					continue;
-  				}
-  				case 'serial': {
-  					const serial = handle.appendChild(document.createElement('span'));
-  					serial.classList.add('NeeloongForm-table-serial');
-  					continue;
-  				}
-  			}
-  		}
-  	}
+  	return function (v) {
+  		if (v.type && v.type !== 'field') { return false; }
+  		return v.field === field;
 
-  	return [root, () => {
-  		for (const destroy of destroyList) {
-  			destroy();
-  		}
-  	}];
+  	};
   }
-
-  /** @import { Store, ArrayStore } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
-
   /**
    * 
-   * @param {HTMLElement} parent 
-   * @param {({ field: string; width: any; label: any; } | StoreLayout.Action[])[]} columns 
-   * @param {() => any} add 
-   * @param {{get(): boolean}} addable 
-   * @param {boolean?} [editable] 
+   * @param {StoreLayout.Renderer} fieldRenderer 
+   * @param {Store} store 
+   * @param {Node} node 
+   * @param {StoreLayout.Options?} options
+   * @param {StoreLayout?} [layout] 
+   * @param {Node} [anchor]
+   * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
    */
-  function renderHead(parent, columns, add, addable, editable) {
-  	const tr = parent.appendChild(document.createElement('tr'));
+  function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragenter) {
   	/** @type {(() => void)[]} */
   	const destroyList = [];
-  	for (const col of columns) {
-  		if (!Array.isArray(col)) {
-  			const { width, label } = col;
-  				const td = tr.appendChild(document.createElement('th'));
-  				if (width) {
-  					td.setAttribute('width', width);
+  	if (node instanceof Element) {
+  		const tagName = node.tagName.toLowerCase();
+  		if (!node.parentNode) { return () => { }; }
+  		if (tagName === 'nl-form-field') {
+  			const field = node.getAttribute('name') || '';
+  			const mode = node.getAttribute('mode') || '';
+  			const fieldStore = field ? store.child(field) : store;
+  			const fieldLayout = field ? layout?.fields?.find(createFieldFilter(field)) || null : null;
+  			if (!fieldStore) { return () => { }; }
+  			switch (mode) {
+  				case 'grid': {
+  					const [el, destroy] = Form(store, fieldRenderer, fieldLayout, options);
+  					node.replaceWith(el);
+  					return destroy;
+  				}
+  			}
+  			const component = fieldStore.component;
+  			if (component) {
+  				const res = fieldRenderer(fieldStore, component, options);
+  				if (res) {
+  					const [el, destroy] = res;
+  					node.replaceWith(el);
+  					return destroy;
   				}
-  				td.innerText = label;
-  			continue;
-  		}
-  		const th = tr.appendChild(document.createElement('th'));
-  		if (!editable) { continue; }
-  		for (const it of col) {
-  			switch (it) {
-  				case 'add':
-  					const button = th.appendChild(document.createElement('button'));
-  					button.addEventListener('click', add);
-  					button.classList.add('NeeloongForm-table-add');
-  					destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
-  					continue;
   			}
+  			const value = node.getAttribute('placeholder') || '';
+  			node.replaceWith(document.createTextNode(value));
+  			return () => { };
   		}
-  	}
-  	return () => {
-  		for (const destroy of destroyList) {
-  			destroy();
+  		if (tagName === 'nl-form-button') {
+  			const button = document.createElement('button');
+  			button.className = 'NeeloongForm-item-button';
+  			const click = node.getAttribute('click') || '';
+  			const call = options?.call;
+  			if (click && typeof call === 'function') {
+  				button.addEventListener('click', e => call(click, e, store, options));
+  			}
+  			for (const n of [...node.childNodes]) {
+  				button.appendChild(n);
+  			}
+  			node.replaceWith(button);
+  			return () => { };
   		}
-  	};
-  }
-  /**
-   *
-   * @param {ArrayStore} store
-   * @param {StoreLayout.Renderer} fieldRenderer 
-   * @param {StoreLayout.Field?} layout
-   * @param {StoreLayout.Options?} options
-   * @returns {[HTMLTableElement, () => void]}
-   */
-  function Table(store, fieldRenderer, layout, options) {
-  	const headerColumns = layout?.columns;
-  	const fieldList = Object.entries(store.type || {})
-  		.filter(([k, v]) => typeof v?.type !== 'object')
-  		.map(([field, {width, label}]) => ({field, width, label}));
-  	/** @type {({ field: string; width: any; label: any; } | StoreLayout.Action[])[]} */
-  	let columns = [];
-  	if (Array.isArray(headerColumns)) {
-  		const map = new Map(fieldList.map(v => [v.field, v]));
-  		columns = headerColumns.map(v => {
-  			if (typeof v === 'number') { return [] }
-  			if (typeof v === 'string') { return map.get(v) || [] }
-  			if (!Array.isArray(v)) { return []; }
-  			/** @type {Set<StoreLayout.Action>} */
-  			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial']);
-  			return v.filter(v => options.delete(v));
-  		}).filter(v => !Array.isArray(v) || v.length);
-  	}
-  	if (!columns.length) {
-  		columns = [['add', 'trigger', 'move', 'remove', 'serial']];
-  	}
-  	if (!columns.find(v => !Array.isArray(v))) {
-  		columns.push(...fieldList.slice(0, 3));
-  	}
-
-
-
-  	const table = document.createElement('table');
-  	table.className = 'NeeloongForm-table';
-  	const thead = table.appendChild(document.createElement('thead'));
-
-
-
-  	const addable = new exports.Signal.Computed(() => store.addable);
-  	const deletable = { get: () => Boolean(options?.editable) };
-  	function add() {
-  		const data = {};
-  		store.add(data);
-
-  	}
-  	/**
-  	 * 
-  	 * @param {Store} child 
-  	 */
-  	function remove(child) {
-  		store.remove(Number(child.index));
-  	}
-  	let dragRow = -1;
-  	/**
-  	 * 
-  	 * @param {Store} [child] 
-  	 */
-  	function dragenter(child) {
-  		if (dragRow < 0) { return; }
-  		const index = child ? Number(child.index) : store.children.length;
-  		if (index < 0 || dragRow < 0 || dragRow === index) { return; }
-  		if (store.move(dragRow, index)) {
-  			dragRow = index;
-  		}
-  	}
-  	/**
-  	 * 
-  	 * @param {Store} child 
-  	 */
-  	function dragstart(child) {
-  		dragRow = Number(child.index);
-
-  	}
-  	function dragend() {
-  		dragRow = -1;
-
-  	}
-  	/** @type {(() => void)[]} */
-  	const destroyList = [];
-  	destroyList.push(renderHead(thead, columns, add, addable, Boolean(options?.editable)));
-  	switch (layout?.tableFoot) {
-  		default:
-  		case 'header': {
-  			const tfoot = table.appendChild(document.createElement('tfoot'));
-  			tfoot.addEventListener('dragenter', () => { dragenter(); });
-  			destroyList.push(renderHead(tfoot, columns, add, addable, Boolean(options?.editable)));
-  			break;
-  		}
-  		case 'add': {
-  			const tfoot = table.appendChild(document.createElement('tfoot'));
-  			tfoot.addEventListener('dragenter', () => { dragenter(); });
-  			const tr = tfoot.appendChild(document.createElement('tr'));
-  			const th = tr.appendChild(document.createElement('th'));
-  			th.colSpan = columns.length;
-  			const button = th.appendChild(document.createElement('button'));
-  			button.addEventListener('click', add);
-  			button.classList.add('NeeloongForm-table-foot-add');
-  			destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
-  			break;
-  		}
-  		case 'none':
-  	}
-  	const start = thead;
-  	/** @type {Map<Store, [HTMLTableSectionElement, () => void]>} */
-  	let seMap = new Map();
-  	/** @param {Map<Store, [tbody: HTMLTableSectionElement, destroy: () => void]>} map */
-  	function destroyMap(map) {
-  		for (const [el, destroy] of map.values()) {
-  			destroy();
-  			el.remove();
-  		}
-
-  	}
-  	const columnNames = columns.map((v) => Array.isArray(v) ? v : v.field);
-  	const childrenResult = watch(() => store.children, function render(children) {
-  		let nextNode = thead.nextSibling;
-  		const oldSeMap = seMap;
-  		seMap = new Map();
-  		for (let child of children) {
-  			const old = oldSeMap.get(child);
-  			if (!old) {
-  				const [el, destroy] = Line(child, fieldRenderer, layout, {
-  					columns: columnNames,
-  					remove: remove.bind(null, child),
-  					dragenter: dragenter.bind(null, child),
-  					dragstart: dragstart.bind(null, child),
-  					dragend,
-  					deletable,
-  				}, options);
-  				table.insertBefore(el, nextNode);
-  				seMap.set(child, [el, destroy]);
-  				continue;
-  			}
-  			oldSeMap.delete(child);
-  			seMap.set(child, old);
-  			if (nextNode === old[0]) {
-  				nextNode = nextNode.nextSibling;
-  				continue;
-  			}
-  			table.insertBefore(old[0], nextNode);
-  		}
-  		destroyMap(oldSeMap);
-  	}, true);
-
-  	return [table, () => {
-  		start.remove();
-  		thead.remove();
-  		destroyMap(seMap);
-  		childrenResult();
-  		for (const destroy of destroyList) {
-  			destroy();
-  		}
-  	}];
-  }
-
-  /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
-
-
-  /**
-   * 
-   * @param {string} field 
-   */
-  function createFieldFilter(field) {
-
-  	/**
-  	 * 
-  	 * @param {StoreLayout.Item} v 
-  	 * @returns {v is StoreLayout.Field}
-  	 */
-
-  	return function (v) {
-  		if (v.type && v.type !== 'field') { return false; }
-  		return v.field === field;
-
-  	};
-  }
-  /**
-   * 
-   * @param {StoreLayout.Renderer} fieldRenderer 
-   * @param {Store} store 
-   * @param {Node} node 
-   * @param {StoreLayout.Options?} options
-   * @param {StoreLayout?} [layout] 
-   * @param {Node} [anchor]
-   * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
-   */
-  function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragenter) {
-  	/** @type {(() => void)[]} */
-  	const destroyList = [];
-  	if (node instanceof Element) {
-  		const tagName = node.tagName.toLowerCase();
-  		if (!node.parentNode) { return () => { }; }
-  		if (tagName === 'nl-form-field') {
-  			const field = node.getAttribute('name') || '';
-  			const mode = node.getAttribute('mode') || '';
-  			const fieldStore = field ? store.child(field) : store;
-  			const fieldLayout = field ? layout?.fields?.find(createFieldFilter(field)) || null : null;
-  			if (!fieldStore) { return () => { }; }
-  			switch (mode) {
-  				case 'grid': {
-  					const [el, destroy] = Form(store, fieldRenderer, fieldLayout, options);
-  					node.replaceWith(el);
-  					return destroy;
-  				}
-  			}
-  			const component = fieldStore.component;
-  			if (component) {
-  				const res = fieldRenderer(fieldStore, component, options);
-  				if (res) {
-  					const [el, destroy] = res;
-  					node.replaceWith(el);
-  					return destroy;
-  				}
-  			}
-  			const value = node.getAttribute('placeholder') || '';
-  			node.replaceWith(document.createTextNode(value));
-  			return () => { };
-  		}
-  		if (tagName === 'nl-form-button') {
-  			const button = document.createElement('button');
-  			button.className = 'NeeloongForm-item-button';
-  			const click = node.getAttribute('click') || '';
-  			const call = options?.call;
-  			if (click && typeof call === 'function') {
-  				button.addEventListener('click', e => call(click, e, store, options));
-  			}
-  			for (const n of [...node.childNodes]) {
-  				button.appendChild(n);
-  			}
-  			node.replaceWith(button);
-  			return () => { };
-  		}
-  		const name = node.getAttribute('nl-form-field');
-  		if (name) {
-  			const array = name.endsWith('[]');
-  			const field = array ? name.slice(0, name.length - 2) : name;
+  		const name = node.getAttribute('nl-form-field');
+  		if (name) {
+  			const array = name.endsWith('[]');
+  			const field = array ? name.slice(0, name.length - 2) : name;
 
   			const fieldStore = field ? store.child(field) : store;
   			if (!fieldStore) {
@@ -5884,34 +5461,406 @@
   			}
   		}
   	}
-  	if (node instanceof Element || node instanceof DocumentFragment) {
-  		for (const n of [...node.children]) {
-  			destroyList.push(renderHtml(store, fieldRenderer, n, options, layout, anchor));
+  	if (node instanceof Element || node instanceof DocumentFragment) {
+  		for (const n of [...node.children]) {
+  			destroyList.push(renderHtml(store, fieldRenderer, n, options, layout, anchor));
+  		}
+  	}
+  	return () => {
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
+  	};
+
+  }
+
+  /**
+   * 
+   * @param {string | ParentNode | null} [html] 
+   * @returns {ParentNode}
+   */
+  function getHtmlContent(html) {
+  	if (!html) {
+  		return document.createElement('template').content;
+  	}
+  	if (typeof html !== 'string') {
+  		return /** @type {ParentNode} */(html.cloneNode(true));
+  	}
+  	const template = document.createElement('template');
+  	template.innerHTML = html;
+  	return template.content;
+  }
+
+  /**
+   * 
+   * @param {Store<any, any>} store 
+   * @param {StoreLayout.Renderer} fieldRenderer 
+   * @param {StoreLayout.Field?} layout
+   * @param {StoreLayout.Options?} options
+   * @returns {[ParentNode, () => void]}
+   */
+  function FormFieldInline(store, fieldRenderer, layout, options) {
+  	const { component } = store;
+  	return component
+  		&& fieldRenderer(store, component, options)
+  		|| [document.createElement('div'), () => { }];
+  }
+
+  /** @import { Store } from '../Store/index.mjs' */
+  /** @import { StoreLayout } from '../types.mjs' */
+
+  /**
+   * 
+   * @param {Store<any, any>} store 
+   * @param {StoreLayout.Renderer} fieldRenderer 
+   * @param {StoreLayout.Field?} layout
+   * @param {object} option 
+   * @param {StoreLayout.Column[]} option.columns
+   * @param {() => void} option.remove 
+   * @param {() => void} option.dragenter 
+   * @param {() => void} option.dragstart 
+   * @param {() => void} option.dragend 
+   * @param {{get(): boolean}} option.deletable 
+   * @param {StoreLayout.Options?} options
+
+   * @returns {[HTMLTableSectionElement, () => void]}
+   */
+  function Line(store, fieldRenderer, layout, {
+  	columns,
+  	remove, dragenter, dragstart, dragend, deletable
+  }, options) {
+  	const root = document.createElement('tbody');
+  	root.addEventListener('dragenter', () => {
+  		dragenter();
+  	});
+  	root.addEventListener('dragstart', (event) => {
+  		if (event.target !== event.currentTarget) { return; }
+  		dragstart();
+  	});
+  	root.addEventListener('dragend', dragend);
+  	const head = root.appendChild(document.createElement('tr'));
+
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
+
+
+  	let trigger = () => { };
+  	/** @type {HTMLButtonElement[]} */
+  	const triggerList = [];
+  	if (columns.find(v => v.actions?.includes('trigger'))) {
+  		const body = root.appendChild(document.createElement('tr'));
+  		const main = body.appendChild(document.createElement('td'));
+  		main.colSpan = columns.length;
+
+  		const [form, destroy] = Form(store, fieldRenderer, layout, options);
+  		main.appendChild(form);
+  		destroyList.push(destroy);
+  		body.hidden = true;
+  		trigger = function click() {
+  			if (body.hidden) {
+  				body.hidden = false;
+  				for (const ext of triggerList) {
+  					ext.classList.remove('NeeloongForm-table-line-open');
+  					ext.classList.add('NeeloongForm-table-line-close');
+  				}
+  			} else {
+  				body.hidden = true;
+  				for (const ext of triggerList) {
+  					ext.classList.remove('NeeloongForm-table-line-close');
+  					ext.classList.add('NeeloongForm-table-line-open');
+  				}
+  			}
+  		};
+
+  	}
+
+  	/**
+  	 * 
+  	 * @param {PointerEvent} event 
+  	 */
+  	function pointerdown({ pointerId }) {
+  		root.draggable = true;
+  		/** @param {PointerEvent} event */
+  		function pointerup(event) {
+  			if (event.pointerId !== pointerId) { return; }
+  			if (!root) { return; }
+  			root.draggable = false;
+  			window.removeEventListener('pointerup', pointerup, { capture: true });
+  			window.removeEventListener('pointercancel', pointerup, { capture: true });
+  		}
+  		window.addEventListener('pointerup', pointerup, { capture: true });
+  		window.addEventListener('pointercancel', pointerup, { capture: true });
+
+  	}
+
+  	for (const name of columns) {
+  		const { actions, field, pattern } = name;
+  		if (!actions?.length) {
+  			const td = head.appendChild(document.createElement('td'));
+  			const child = field && store.child(field);
+  			if (child) {
+  				const [el, destroy] = FormFieldInline(child, fieldRenderer, null, options);
+  				destroyList.push(destroy);
+  				td.appendChild(el);
+  			}
+  			continue;
+  		}
+  		const handle = head.appendChild(document.createElement('th'));
+  		handle.classList.add('NeeloongForm-table-line-handle');
+  		for (const k of actions) {
+  			switch (k) {
+  				case 'trigger': {
+  					const ext = handle.appendChild(document.createElement('button'));
+  					ext.classList.add('NeeloongForm-table-line-open');
+  					triggerList.push(ext);
+  					ext.addEventListener('click', trigger);
+  					continue;
+  				}
+  				case 'move': {
+  					if (!options?.editable) { continue; }
+  					const move = handle.appendChild(document.createElement('button'));
+  					move.classList.add('NeeloongForm-table-move');
+  					move.addEventListener('pointerdown', pointerdown);
+  					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+  						move.disabled = disabled;
+  					}, true));
+  					continue;
+  				}
+  				case 'remove': {
+  					if (!options?.editable) { continue; }
+  					const del = handle.appendChild(document.createElement('button'));
+  					del.classList.add('NeeloongForm-table-remove');
+  					del.addEventListener('click', remove);
+  					destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+  						del.disabled = disabled;
+  					}, true));
+  					continue;
+  				}
+  				case 'serial': {
+  					const serial = handle.appendChild(document.createElement('span'));
+  					serial.classList.add('NeeloongForm-table-serial');
+  					continue;
+  				}
+  			}
+  		}
+  	}
+
+  	return [root, () => {
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
+  	}];
+  }
+
+  /** @import { Store, ArrayStore } from '../Store/index.mjs' */
+  /** @import { StoreLayout } from '../types.mjs' */
+
+  /**
+   * 
+   * @param {HTMLElement} parent 
+   * @param {StoreLayout.Column[]} columns 
+   * @param {() => any} add 
+   * @param {{get(): boolean}} addable 
+   * @param {boolean?} [editable] 
+   */
+  function renderHead(parent, columns, add, addable, editable) {
+  	const tr = parent.appendChild(document.createElement('tr'));
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
+  	for (const { action, actions, width, label } of columns) {
+  		const th = tr.appendChild(document.createElement('th'));
+  		if (width) { th.setAttribute('width', `${width}`); }
+  		if (![action, actions].flat().includes('add')) {
+  			th.innerText = label || '';
+  			continue;
   		}
+  		if (!editable) { continue; }
+  		const button = th.appendChild(document.createElement('button'));
+  		button.addEventListener('click', add);
+  		button.classList.add('NeeloongForm-table-add');
+  		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
   	}
   	return () => {
   		for (const destroy of destroyList) {
   			destroy();
   		}
   	};
-
   }
-
   /**
-   * 
-   * @param {string | ParentNode | null} [html] 
-   * @returns {ParentNode}
+   *
+   * @param {ArrayStore} store
+   * @param {StoreLayout.Renderer} fieldRenderer 
+   * @param {StoreLayout.Field?} layout
+   * @param {StoreLayout.Options?} options
+   * @returns {[HTMLTableElement, () => void]}
    */
-  function getHtmlContent(html) {
-  	if (!html) {
-  		return document.createElement('template').content;
+  function Table(store, fieldRenderer, layout, options) {
+  	const headerColumns = layout?.columns;
+  	const fieldList = Object.entries(store.type || {})
+  		.filter(([k, v]) => typeof v?.type !== 'object')
+  		.map(([field, { width, label }]) => ({ field, width, label }));
+  	/** @type {StoreLayout.Column[]} */
+  	let columns = [];
+  	if (Array.isArray(headerColumns)) {
+  		const map = new Map(fieldList.map(v => [v.field, v]));
+
+  		/** @type {(StoreLayout.Column | null)[]} */
+  		const allColumns = headerColumns.map(v => {
+  			if (!v) { return null; }
+  			if (typeof v === 'number') { return { placeholder: v }; }
+  			if (typeof v === 'string') { return map.get(v) || null; }
+  			if (typeof v !== 'object') { return null; }
+  			if (Array.isArray(v)) {
+  				/** @type {Set<StoreLayout.Action>} */
+  				const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
+  				const actions = v.filter(v => options.delete(v));
+  				if (!actions) { return null; }
+  				return { actions };
+  			}
+  			const { action, actions, field, placeholder, pattern, width, label } = v;
+  			if (field) {
+  				const define = map.get(field);
+  				if (define) {
+  					return { field, placeholder, width, label: label || define.label };
+  				}
+  			}
+  			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial']);
+  			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
+  			if (allActions.length) {
+  				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
+  			}
+  			// if (pattern) {
+  			// 	return { pattern, placeholder, width, label };
+  			// }
+  			return null;
+  		});
+  		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
+
   	}
-  	if (typeof html !== 'string') {
-  		return /** @type {ParentNode} */(html.cloneNode(true));
+  	if (!columns.length) {
+  		columns = [
+  			{ actions: ['add', 'trigger', 'move', 'remove', 'serial'] },
+  			...fieldList.slice(0, 3),
+  		];
   	}
-  	const template = document.createElement('template');
-  	template.innerHTML = html;
-  	return template.content;
+
+  	const table = document.createElement('table');
+  	table.className = 'NeeloongForm-table';
+  	const thead = table.appendChild(document.createElement('thead'));
+
+  	const addable = new exports.Signal.Computed(() => store.addable);
+  	const deletable = { get: () => Boolean(options?.editable) };
+  	function add() {
+  		const data = {};
+  		store.add(data);
+  	}
+  	/**
+  	 * 
+  	 * @param {Store} child 
+  	 */
+  	function remove(child) {
+  		store.remove(Number(child.index));
+  	}
+  	let dragRow = -1;
+  	/**
+  	 * 
+  	 * @param {Store} [child] 
+  	 */
+  	function dragenter(child) {
+  		if (dragRow < 0) { return; }
+  		const index = child ? Number(child.index) : store.children.length;
+  		if (index < 0 || dragRow < 0 || dragRow === index) { return; }
+  		if (store.move(dragRow, index)) {
+  			dragRow = index;
+  		}
+  	}
+  	/**
+  	 * 
+  	 * @param {Store} child 
+  	 */
+  	function dragstart(child) {
+  		dragRow = Number(child.index);
+
+  	}
+  	function dragend() {
+  		dragRow = -1;
+
+  	}
+  	/** @type {(() => void)[]} */
+  	const destroyList = [];
+  	destroyList.push(renderHead(thead, columns, add, addable, Boolean(options?.editable)));
+  	switch (layout?.tableFoot) {
+  		default:
+  		case 'header': {
+  			const tfoot = table.appendChild(document.createElement('tfoot'));
+  			tfoot.addEventListener('dragenter', () => { dragenter(); });
+  			destroyList.push(renderHead(tfoot, columns, add, addable, Boolean(options?.editable)));
+  			break;
+  		}
+  		case 'add': {
+  			const tfoot = table.appendChild(document.createElement('tfoot'));
+  			tfoot.addEventListener('dragenter', () => { dragenter(); });
+  			const tr = tfoot.appendChild(document.createElement('tr'));
+  			const th = tr.appendChild(document.createElement('th'));
+  			th.colSpan = columns.length;
+  			const button = th.appendChild(document.createElement('button'));
+  			button.addEventListener('click', add);
+  			button.classList.add('NeeloongForm-table-foot-add');
+  			destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+  			break;
+  		}
+  		case 'none':
+  	}
+  	const start = thead;
+  	/** @type {Map<Store, [HTMLTableSectionElement, () => void]>} */
+  	let seMap = new Map();
+  	/** @param {Map<Store, [tbody: HTMLTableSectionElement, destroy: () => void]>} map */
+  	function destroyMap(map) {
+  		for (const [el, destroy] of map.values()) {
+  			destroy();
+  			el.remove();
+  		}
+
+  	}
+  	const childrenResult = watch(() => store.children, function render(children) {
+  		let nextNode = thead.nextSibling;
+  		const oldSeMap = seMap;
+  		seMap = new Map();
+  		for (let child of children) {
+  			const old = oldSeMap.get(child);
+  			if (!old) {
+  				const [el, destroy] = Line(child, fieldRenderer, layout, {
+  					columns,
+  					remove: remove.bind(null, child),
+  					dragenter: dragenter.bind(null, child),
+  					dragstart: dragstart.bind(null, child),
+  					dragend,
+  					deletable,
+  				}, options);
+  				table.insertBefore(el, nextNode);
+  				seMap.set(child, [el, destroy]);
+  				continue;
+  			}
+  			oldSeMap.delete(child);
+  			seMap.set(child, old);
+  			if (nextNode === old[0]) {
+  				nextNode = nextNode.nextSibling;
+  				continue;
+  			}
+  			table.insertBefore(old[0], nextNode);
+  		}
+  		destroyMap(oldSeMap);
+  	}, true);
+
+  	return [table, () => {
+  		start.remove();
+  		thead.remove();
+  		destroyMap(seMap);
+  		childrenResult();
+  		for (const destroy of destroyList) {
+  			destroy();
+  		}
+  	}];
   }
 
   /** @import { StoreLayout } from '../types.mjs' */
@@ -6157,7 +6106,7 @@
    * @param {StoreLayout.Field?} layout
    * @param {State} initState
    * @param {object} option 
-   * @param {(string | number | StoreLayout.Action[])[]} option.columns 
+   * @param {StoreLayout.Column[]} option.columns 
    * @param {() => void} option.remove 
    * @param {(el: HTMLElement) => () => void} option.dragenter 
    * @param {() => void} option.dragstart 
@@ -6252,38 +6201,40 @@
   	dropChildren.addEventListener('dragover', (e) => e.preventDefault());
   	dropFront.addEventListener('drop', () => drop());
   	dropChildren.addEventListener('drop', () => drop(true));
-  	destroyList.push(effect(() => { 
+  	destroyList.push(effect(() => {
   		dropFront.hidden = dropChildren.hidden = !state.get().droppable;
-  	 }));
+  	}));
 
-  	let dragleave = () => {};
+  	let dragleave = () => { };
   	dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
   	dropChildren.addEventListener('dragenter', () => dragleave = dragenter(dropChildren));
   	dropFront.addEventListener('dragleave', () => dragleave());
   	dropChildren.addEventListener('dragleave', () => dragleave());
 
-  	for (const name of columns) {
-  		if (typeof name === 'number') {
-  			const td = line.appendChild(document.createElement('div'));
-  			td.classList.add('NeeloongForm-tree-placeholder');
-  			td.style.flex = `${name}`;
-  			if (click) { td.addEventListener('click', click); }
-  			if (moveStart) { td.addEventListener('pointerdown', moveStart); }
-  			continue;
-  		}
-  		if (!Array.isArray(name)) {
+  	for (const { actions, pattern, placeholder, width, field } of columns) {
+  		if (!actions?.length) {
   			const td = line.appendChild(document.createElement('div'));
   			td.classList.add('NeeloongForm-tree-cell');
-  			const child = store.child(name);
-  			if (!child) { continue; }
-  			const [el, destroy] = FormField(child, fieldRenderer, null, { ...options, editable: false }, true);
-  			destroyList.push(destroy);
-  			td.appendChild(el);
   			if (click) { td.addEventListener('click', click); }
   			if (moveStart) { td.addEventListener('pointerdown', moveStart); }
+  			if (field) {
+  				const child = store.child(field);
+  				if (!child) { continue; }
+  				const [el, destroy] = FormFieldInline(child, fieldRenderer, null, { ...options, editable: false });
+  				destroyList.push(destroy);
+  				td.appendChild(el);
+  				continue;
+  			}
+  			if (typeof placeholder === 'number') {
+  				td.style.flex = `${placeholder}`;
+  			}
+  			if (typeof width === 'number') {
+  				td.style.width = `${width}px`;
+  			}
   			continue;
+
   		}
-  		for (const k of name) {
+  		for (const k of actions) {
   			switch (k) {
   				case 'trigger': {
   					const btn = line.appendChild(document.createElement('button'));
@@ -6490,28 +6441,54 @@
   	const fieldList = Object.entries(store.type || {})
   		.filter(([k, v]) => typeof v?.type !== 'object')
   		.map(([field, { width, label }]) => ({ field, width, label }));
-  	/** @type {({ field: string; width: any; label: any; } | number | StoreLayout.Action[])[]} */
+  	/** @type {StoreLayout.Column[]} */
   	let columns = [];
   	if (Array.isArray(headerColumns)) {
   		const map = new Map(fieldList.map(v => [v.field, v]));
-  		columns = headerColumns.map(v => {
-  			if (typeof v === 'number') { return v; }
-  			if (typeof v === 'string') { return map.get(v) || []; }
-  			if (!Array.isArray(v)) { return []; }
-  			/** @type {Set<StoreLayout.Action>} */
+  		/** @type {(StoreLayout.Column | null)[]} */
+  		const allColumns = headerColumns.map(v => {
+  			if (!v) { return null; }
+  			if (typeof v === 'number') { return { placeholder: v }; }
+  			if (typeof v === 'string') { return map.get(v) || null; }
+  			if (typeof v !== 'object') { return null; }
+  			if (Array.isArray(v)) {
+  				/** @type {Set<StoreLayout.Action>} */
+  				const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
+  				const actions = v.filter(v => options.delete(v));
+  				if (!actions) { return null; }
+  				return { actions };
+  			}
+  			const { action, actions, field, placeholder, pattern, width, label } = v;
+  			if (field) {
+  				const define = map.get(field);
+  				if (define) {
+  					return { field, placeholder, width, label: label || define.label };
+  				}
+  			}
   			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-  			return v.filter(v => options.delete(v));
-  		}).filter(v => !Array.isArray(v) || v.length);
+  			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
+  			if (allActions.length) {
+  				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
+  			}
+  			if (pattern) {
+  				return { pattern, placeholder, width, label };
+  			}
+  			if (placeholder || width) {
+  				return { placeholder, width, label };
+  			}
+  			return null;
+  		});
+  		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
   	}
   	if (!columns.length) {
-  		columns = [['collapse', 'move'], fieldList[0], ['add', 'remove']];
-  	}
-  	if (!columns.find(v => !Array.isArray(v))) {
-  		columns.push(...fieldList.slice(0, 3));
+  		columns = [
+  			{ actions: ['collapse', 'move'] },
+  			fieldList[0],
+  			{ actions: ['add', 'remove'] },
+  		];
   	}
 
 
-
   	const root = document.createElement('div');
   	root.className = 'NeeloongForm-tree';
   	const main = root.appendChild(document.createElement('div'));
@@ -6781,7 +6758,6 @@
   	}
   	/** @type {State[]} */
   	const states = [];
-  	const columnNames = columns.map((v) => Array.isArray(v) || typeof v === 'number' ? v : v.field);
   	const childrenResult = watch(() => store.children, function render(children) {
   		let nextNode = start.nextSibling;
   		const oldSeMap = seMap;
@@ -6798,7 +6774,7 @@
   			const old = oldSeMap.get(child);
   			if (!old) {
   				const [el, destroy, setState] = TreeLine(child, detailsStore, fieldRenderer, layout, state, {
-  					columns: columnNames,
+  					columns,
   					remove: remove.bind(null, child),
   					dragenter,
   					dragstart: dragstart.bind(null, child),
@@ -6869,22 +6845,10 @@
    * @param {StoreLayout.Renderer} fieldRenderer 
    * @param {StoreLayout.Field?} layout
    * @param {StoreLayout.Options?} options
-   * @param {boolean} [inline]
    * @returns {[ParentNode, () => void]}
    */
-  function FormField(store, fieldRenderer, layout, options, inline = false) {
+  function FormField(store, fieldRenderer, layout, options) {
   	const { type, component } = store;
-  	if (inline) {
-  		const html = layout?.inlineHtml;
-  		if (html) {
-  			const content = getHtmlContent(html);
-  			const destroy = renderHtml(store, fieldRenderer, content, options, layout);
-  			return [content, destroy];
-  		}
-  		return component
-  			&& fieldRenderer(store, component, options)
-  			|| [document.createElement('div'), () => { }];
-  	}
   	const isObject = type && typeof type === 'object';
   	const html = layout?.html;
   	/** @type {StoreLayout.Grid['cell']} */