@neeloong/form 0.20.0 → 0.21.0

package/index.mjs

@@ -1,6 +1,6 @@
 /*!
-* @neeloong/form v0.20.0
-* (c) 2024-2025 Fierflame
+* @neeloong/form v0.21.0
+* (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
 
@@ -151,7 +151,6 @@ let TypeStores = Object.create(null);
  * @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;
@@ -282,13 +281,14 @@ function merge(...v) {
  * 
  * @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' */
@@ -301,7 +301,7 @@ function makeDefault(store, def) {
  */
 class Store {
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
-	#events = new Map()
+	#events = new Map();
 	/**
 	 * 触发事件并通知监听器
 	 * @template {keyof Schema.Events} K
@@ -334,7 +334,7 @@ class Store {
 			events.set(key, set);
 		}
 		set.add(fn);
-		return () => { set?.delete(fn); }
+		return () => { set?.delete(fn); };
 
 	}
 	/**
@@ -345,7 +345,7 @@ class Store {
 	 * @param {boolean} [options.new] 是否为新建环境
 	 */
 	static create(schema, options = {}) {
-		return create({type: schema}, { ...options, parent: null });
+		return create({ type: schema }, { ...options, parent: null });
 	}
 	/**
 	 * 设置自定义类型的存储类
@@ -367,8 +367,7 @@ class Store {
 	 * @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] 
@@ -396,22 +395,19 @@ class Store {
 	 * @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;
@@ -455,7 +451,7 @@ class Store {
 			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 Signal.Computed(() => readonlyParent.get() || getReadonly())
@@ -484,15 +480,15 @@ class Store {
 
 		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 Signal.State || size instanceof Signal.Computed) {
 			this.#size = size;
 		} else {
@@ -506,30 +502,25 @@ class Store {
 		}
 		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} */
@@ -541,7 +532,7 @@ class Store {
 	/** @readonly @type {any} */
 	#component;
 	/** @type {Signal.State<boolean>?} */
-	#selfLoading = null
+	#selfLoading = null;
 	/** @type {Signal.State<boolean>} */
 	#loading;
 	get loading() {
@@ -549,7 +540,7 @@ class Store {
 	}
 	set loading(loading) {
 		const s = this.#selfLoading;
-		if (!s) { return }
+		if (!s) { return; }
 		s.set(Boolean(loading));
 	}
 	/** 存储对象自身 */
@@ -588,9 +579,9 @@ class Store {
 	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)); }
 	/** 是否新建项 */
@@ -598,9 +589,9 @@ class Store {
 	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); }
 	/** 是否可隐藏 */
@@ -608,9 +599,9 @@ class Store {
 	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); }
 	/** 是否可清除 */
@@ -618,9 +609,9 @@ class Store {
 	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); }
 	/** 是否必填 */
@@ -628,9 +619,9 @@ class Store {
 	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); }
 	/** 是否禁用字段 */
@@ -638,9 +629,9 @@ class Store {
 	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); }
 	/** 是否只读 */
@@ -649,9 +640,9 @@ class Store {
 
 
 	/** @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); }
 	/** 是否只读 */
@@ -660,9 +651,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 字段的标签信息 */
@@ -671,9 +662,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 字段的描述信息 */
@@ -681,9 +672,9 @@ class Store {
 	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)); }
 	/** 字段的占位符信息 */
@@ -692,9 +683,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 数值字段的最小值限制 */
@@ -703,9 +694,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 数值字段的最大值限制 */
@@ -714,9 +705,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 数值字段的步长 */
@@ -724,9 +715,9 @@ class Store {
 	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)); }
 	/** 最小长度 */
@@ -734,9 +725,9 @@ class Store {
 	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)); }
 	/** 最大长度 */
@@ -744,9 +735,9 @@ class Store {
 	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)); }
 	/** 模式 */
@@ -755,9 +746,9 @@ class Store {
 
 
 	/** @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)); }
 	/** 可选值列表 */
@@ -766,24 +757,24 @@ class Store {
 
 
 	/** @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 
@@ -795,11 +786,9 @@ class Store {
 	#initValue = new Signal.State(/** @type {T?} */(null));
 	#value = new Signal.State(this.#initValue.get());
 
-	
-	#state = new 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(); }
@@ -814,34 +803,26 @@ class Store {
 		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();
@@ -849,16 +830,17 @@ class Store {
 		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);
@@ -871,59 +853,48 @@ class Store {
 	/**
 	 * 
 	 * @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;
 	}
 	/**
 	 * 异步校验
@@ -947,18 +918,18 @@ class Store {
 			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());
 	}
 }
 
@@ -972,8 +943,8 @@ class Store {
 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 
@@ -987,26 +958,25 @@ class ObjectStore extends Store {
 	 * @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,
@@ -1014,17 +984,12 @@ class ObjectStore extends Store {
 			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;
 	}
@@ -1069,9 +1034,8 @@ class ArrayStore extends Store {
 	 * @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 Signal.State(/** @type {Store[]} */([]));
 		// @ts-ignore
 		const updateChildren = (list) => {
@@ -1090,22 +1054,16 @@ class ArrayStore extends Store {
 		super(schema, {
 			index, new: isNew, parent,
 			size: new 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 ?? [],
 		});
 
@@ -1124,16 +1082,6 @@ class ArrayStore extends Store {
 				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 });
@@ -1175,13 +1123,7 @@ class ArrayStore extends Store {
 			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;
@@ -1211,12 +1153,6 @@ class ArrayStore extends Store {
 		}
 		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;
@@ -1256,16 +1192,6 @@ class ArrayStore extends Store {
 		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;
@@ -1293,15 +1219,6 @@ class ArrayStore extends Store {
 		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;
@@ -2450,7 +2367,6 @@ const bindable = {
 	kind: true,
 
 	value: true,
-	state: true,
 
 	store: true,
 	parent: true,
@@ -2508,7 +2424,8 @@ function *toItem(val, key = '', sign = '$') {
 		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)}];
@@ -2796,6 +2713,8 @@ class Environment {
 		const res = Object.fromEntries([...bindableSet].map(v => [
 			`$${v}`, cb => watch(() => store[v], cb, true)
 		]));
+		/** @deprecated */
+		res.$$state = cb => watch(() => null, cb, true);
 		return res;
 	}
 	/**
@@ -2812,13 +2731,15 @@ class Environment {
 		}
 		/** @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;
 	}
 	/**
@@ -2833,7 +2754,8 @@ class Environment {
 		if (!store) { return; }
 		switch(type) {
 			case 'value': return v => {store.value = v; };
-			case 'state': return v => {store.state = v; };
+			/** @deprecated */
+			case 'state': return v => { };
 		}
 	}
 	/**
@@ -2851,7 +2773,8 @@ class Environment {
 		}
 		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); },
@@ -4746,431 +4669,85 @@ function render(store, layouts, parent, { component, global, relate, enhancement
 /** @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 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) {
@@ -5306,34 +4883,406 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 			}
 		}
 	}
-	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 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' */
@@ -5579,7 +5528,7 @@ function createCell(layout, values, defCell, blockOnly) {
  * @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 
@@ -5674,38 +5623,40 @@ function TreeLine(
 	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'));
@@ -5912,28 +5863,54 @@ function Tree(store, fieldRenderer, layout, options) {
 	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'));
@@ -6203,7 +6180,6 @@ function Tree(store, fieldRenderer, layout, options) {
 	}
 	/** @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;
@@ -6220,7 +6196,7 @@ function Tree(store, fieldRenderer, layout, options) {
 			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),
@@ -6291,22 +6267,10 @@ function getArrayCell(arrayStyle) {
  * @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']} */