@neeloong/form 0.19.0 → 0.21.0

package/index.mjs

@@ -1,6 +1,6 @@
 /*!
-* @neeloong/form v0.19.0
-* (c) 2024-2025 Fierflame
+* @neeloong/form v0.21.0
+* (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
 
@@ -85,7 +85,7 @@ const values = v => {
  * @param {T | ((store: Store) => T?) | null} [fn]
  * @returns {[Signal.State<T?>, Signal.Computed<T?>]}
  */
-function createState(self, toValue, defState, fn) {
+function createState$1(self, toValue, defState, fn) {
 
 	const selfState = new Signal.State(toValue(defState));
 	/** @type {Signal.Computed<T>} */
@@ -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())
@@ -466,17 +462,17 @@ class Store {
 		[this.#selfRequired, this.#required] = createBooleanStates(this, required, schema.required, parent ? parent.#required : null);
 		[this.#selfDisabled, this.#disabled] = createBooleanStates(this, disabled, schema.disabled, parent ? parent.#disabled : null);
 
-		[this.#selfLabel, this.#label] = createState(this, string, label, schema.label);
-		[this.#selfDescription, this.#description] = createState(this, string, description, schema.description);
-		[this.#selfPlaceholder, this.#placeholder] = createState(this, string, placeholder, schema.placeholder);
-		[this.#selfMin, this.#min] = createState(this, number, min, schema.min);
-		[this.#selfMax, this.#max] = createState(this, number, max, schema.max);
-		[this.#selfStep, this.#step] = createState(this, number, step, schema.step);
-		[this.#selfMinLength, this.#minLength] = createState(this, number, minLength, schema.minLength);
-		[this.#selfMaxLength, this.#maxLength] = createState(this, number, maxLength, schema.maxLength);
-		[this.#selfPattern, this.#pattern] = createState(this, regex, pattern, schema.pattern);
+		[this.#selfLabel, this.#label] = createState$1(this, string, label, schema.label);
+		[this.#selfDescription, this.#description] = createState$1(this, string, description, schema.description);
+		[this.#selfPlaceholder, this.#placeholder] = createState$1(this, string, placeholder, schema.placeholder);
+		[this.#selfMin, this.#min] = createState$1(this, number, min, schema.min);
+		[this.#selfMax, this.#max] = createState$1(this, number, max, schema.max);
+		[this.#selfStep, this.#step] = createState$1(this, number, step, schema.step);
+		[this.#selfMinLength, this.#minLength] = createState$1(this, number, minLength, schema.minLength);
+		[this.#selfMaxLength, this.#maxLength] = createState$1(this, number, maxLength, schema.maxLength);
+		[this.#selfPattern, this.#pattern] = createState$1(this, regex, pattern, schema.pattern);
 		// @ts-ignore
-		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
+		[this.#selfValues, this.#values] = createState$1(this, values, values$1, schema.values);
 
 		[this.#selfRemovable, this.#removable] = createBooleanStates(this, removable, schema.removable ?? true);
 
@@ -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;
 	}
@@ -1043,11 +1008,11 @@ setObjectStore(ObjectStore);
  */
 class ArrayStore extends Store {
 	/** @type {(index: number, isNew?: boolean) => Store} */
-	#create = () => {throw new Error}
+	#create = () => { throw new Error; };
 	/** @type {Signal.State<Store[]>} */
-	#children
+	#children;
 	get children() { return [...this.#children.get()]; }
-	*[Symbol.iterator]() { return yield*[...this.#children.get().entries()]; }
+	*[Symbol.iterator]() { return yield* [...this.#children.get().entries()]; }
 	/**
 	 * 
 	 * @param {string | number} key 
@@ -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) => {
@@ -1079,7 +1043,7 @@ class ArrayStore extends Store {
 			const children = [...childrenState.get()];
 			const oldLength = children.length;
 			for (let i = children.length; i < length; i++) {
-					children.push(this.#create(i));
+				children.push(this.#create(i));
 			}
 			children.length = length;
 			if (oldLength !== length) {
@@ -1090,33 +1054,27 @@ 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) {
+			setValue(v) { return Array.isArray(v) ? v : v == null ? null : [v]; },
+			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 ?? [],
 		});
 
 		[this.#selfAddable, this.#addable] = createBooleanStates(this, addable, schema.addable ?? true);
-		
+
 		this.#children = childrenState;
 		const childCommonOptions = {
 			parent: this,
 			/** @param {*} value @param {*} index @param {Store} store */
 			onUpdate: (value, index, store) => {
-				if (childrenState.get()[index] !== store) { return;}
+				if (childrenState.get()[index] !== store) { return; }
 				const val = [...this.value || []];
 				if (val.length < index) {
 					val.length = index;
@@ -1124,29 +1082,19 @@ 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 });
+		this.#create = (index, isNew) => {
+			const child = create(schema, { ...childCommonOptions, index, new: isNew });
 			child.index = index;
-			return child
+			return child;
 		};
 	}
 
 
 	/** @readonly @type {Signal.State<boolean?>} */
-	#selfAddable
+	#selfAddable;
 	/** @readonly @type {Signal.Computed<boolean>} */
-	#addable
+	#addable;
 	get selfAddable() { return this.#selfAddable.get(); }
 	set selfAddable(v) { this.#selfAddable.set(typeof v === 'boolean' ? v : null); }
 	/** 是否禁用字段 */
@@ -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;
@@ -1226,37 +1162,39 @@ class ArrayStore extends Store {
 	 * 
 	 * @param {number} from 
 	 * @param {number} to 
+	 * @param {number} quantity 
 	 * @returns 
 	 */
-	move(from, to) {
+	move(from, to, quantity = 1) {
+		const q = Math.floor(quantity);
+		if (q < 1) { return 0; }
+		if (from <= to && from + q > to) { return 0; }
+
 		const data = this.value;
-		if (!Array.isArray(data)) { return false; }
+		if (!Array.isArray(data)) { return 0; }
+
 		const children = [...this.#children.get()];
-		const [item] = children.splice(from, 1);
-		if (!item) { return false; }
-		children.splice(to, 0, item);
-		let lft = Math.min(from, to);
-		let rgt = Math.max(from, to);
+		const list = children.splice(from, q);
+		const len = list.length;
+		if (!len) { return 0; }
+		const toIndex = q > 1 && to > from ? to - q + 1 : to;
+		children.splice(toIndex, 0, ...list);
+
+		let lft = Math.min(from, toIndex);
+		let rgt = Math.max(from + q - 1, to);
 		for (let i = lft; i <= rgt; i++) {
 			children[i].index = i;
 		}
+
 		const val = [...data];
-		const [value] = val.splice(from, 1);
-		val.splice(to, 0, value);
-		const state = this.state;
-		if (Array.isArray(state)) {
-			const sta = [...state];
-			const [value = {}] = sta.splice(from, 1);
-			if (to <= sta.length) {
-				sta.splice(to, 0, value);
-			} else {
-				sta[to] = value;
-			}
-			this.state = sta;
-		}
+		const values = val.splice(from, len);
+		for (let i = values.length; i < len; i++) { values.push(null); }
+		while (toIndex > val.length) { val.push(null); }
+		val.splice(toIndex, 0, ...values);
+
 		this.#children.set(children);
 		this.value = val;
-		return true;
+		return len;
 
 	}
 	/**
@@ -1281,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;
@@ -2438,7 +2367,6 @@ const bindable = {
 	kind: true,
 
 	value: true,
-	state: true,
 
 	store: true,
 	parent: true,
@@ -2496,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)}];
@@ -2784,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;
 	}
 	/**
@@ -2800,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;
 	}
 	/**
@@ -2821,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 => { };
 		}
 	}
 	/**
@@ -2839,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); },
@@ -4734,425 +4669,80 @@ 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();
-		}
-	};
-}
-/**
- *
- * @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 === '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 () => { };
+		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) {
@@ -5323,46 +4913,486 @@ function getHtmlContent(html) {
 	return template.content;
 }
 
-/** @import { CellValues } from './createCell.mjs' */
-
-/**
- *
- * @param {HTMLElement} root
- * @param {CellValues} [values]
- * @returns {() => void}
- */
-function bindErrored(root, values) {
-	return effect(() => {
-		if (values?.error) {
-			root.classList.add('NeeloongForm-item-errored');
-		} else {
-			root.classList.remove('NeeloongForm-item-errored');
-		}
-	});
-}
-
 /**
- *
- * @param {HTMLElement} root
- * @param {{ required?: boolean | null }} [values]
- * @returns {() => void}
+ * 
+ * @param {Store<any, any>} store 
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Options?} options
+ * @returns {[ParentNode, () => void]}
  */
-function bindRequired(root, values) {
-	return effect(() => {
-		if (values?.required) {
-			root.classList.add('NeeloongForm-item-required');
-		} else {
-			root.classList.remove('NeeloongForm-item-required');
-		}
-	});
+function FormFieldInline(store, fieldRenderer, layout, options) {
+	const { component } = store;
+	return component
+		&& fieldRenderer(store, component, options)
+		|| [document.createElement('div'), () => { }];
 }
 
-/** @import { CellValues } from './createCell.mjs' */
+/** @import { Store } from '../Store/index.mjs' */
+/** @import { StoreLayout } from '../types.mjs' */
 
 /**
- *
- * @param {CellValues} [values]
- * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ * 
+ * @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 {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 {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 (!columns.length) {
+		columns = [
+			{ actions: ['add', 'trigger', 'move', 'remove', 'serial'] },
+			...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 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' */
+
+/**
+ *
+ * @param {HTMLElement} root
+ * @param {StoreLayout.Grid?} [layout]
+ */
+function bindGrid(root, layout) {
+	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
+	root.classList.add(`NeeloongForm-item-grid`);
+	if (colStart && colEnd) {
+		root.style.gridColumn = `${colStart} / ${colEnd}`;
+	} else if (colStart && colSpan) {
+		root.style.gridColumn = `${colStart} / span ${colSpan}`;
+	} else if (colSpan) {
+		root.style.gridColumn = `span ${colSpan}`;
+	}
+	if (rowStart && rowEnd) {
+		root.style.gridRow = `${rowStart} / ${rowEnd}`;
+	} else if (rowStart && rowSpan) {
+		root.style.gridRow = `${rowStart} / span ${rowSpan}`;
+	} else if (rowSpan) {
+		root.style.gridRow = `span ${rowSpan}`;
+	}
+
+
+
+
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {HTMLElement} root
+ * @param {CellValues} [values]
+ * @returns {() => void}
+ */
+function bindErrored(root, values) {
+	return effect(() => {
+		if (values?.error) {
+			root.classList.add('NeeloongForm-item-errored');
+		} else {
+			root.classList.remove('NeeloongForm-item-errored');
+		}
+	});
+}
+
+/**
+ *
+ * @param {HTMLElement} root
+ * @param {{ required?: boolean | null }} [values]
+ * @returns {() => void}
+ */
+function bindRequired(root, values) {
+	return effect(() => {
+		if (values?.required) {
+			root.classList.add('NeeloongForm-item-required');
+		} else {
+			root.classList.remove('NeeloongForm-item-required');
+		}
+	});
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {CellValues} [values]
+ * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ */
+function createStdCell(values) {
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	const root = document.createElement('div');
+	root.className = 'NeeloongForm-item';
+	destroyList.push(bindRequired(root, values));
+
+	const label = root.appendChild(document.createElement('div'));
+	label.className = 'NeeloongForm-item-label';
+	destroyList.push(effect(() => label.innerText = values?.label || ''));
+
+	const content = root.appendChild(document.createElement('div'));
+	content.className = 'NeeloongForm-item-content';
+
+	const description = root.appendChild(document.createElement('div'));
+	description.className = 'NeeloongForm-item-description';
+	destroyList.push(effect(() => description.innerText = values?.description || ''));
+	const error = root.appendChild(document.createElement('div'));
+	error.className = 'NeeloongForm-item-error';
+	destroyList.push(effect(() => error.innerText = values?.error || ''));
+	destroyList.push(bindErrored(root, values));
+
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, content, destroyList];
+
+
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {CellValues} [values]
+ * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
  */
 function createCollapseCell(values) {
 	/** @type {(() => void)[]} */
@@ -5385,130 +5415,848 @@ function createCollapseCell(values) {
 
 }
 
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {CellValues} [values]
+ * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ */
+function createNullCell(values) {
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	const root = document.createElement('div');
+	root.className = 'NeeloongForm-item';
+	destroyList.push(bindRequired(root, values));
+	destroyList.push(bindErrored(root, values));
+
+
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, root, destroyList];
+
+
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {CellValues} [values]
+ * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ */
+function createFieldsetCell(values) {
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	const root = document.createElement('fieldset');
+	root.className = 'NeeloongForm-item';
+	destroyList.push(bindRequired(root, values));
+
+	const legend = root.appendChild(document.createElement('legend'));
+	destroyList.push(effect(() => legend.innerText = values?.label || ''));
+	destroyList.push(bindErrored(root, values));
+
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, root, destroyList];
+
+
+}
+
+/** @import { StoreLayout } from '../types.mjs' */
+
+/**
+ * @typedef {object} CellValues
+ * @property {string?} [label]
+ * @property {string?} [description]
+ * @property {string?} [error]
+ * @property {boolean?} [required]
+ */
+/**
+ *
+ * @param {StoreLayout.Grid?} [layout]
+ * @param {CellValues} [values]
+ * @param {StoreLayout.Grid['cell']?} [defCell]
+ * @param {boolean?} [blockOnly]
+ * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ */
+function createCell(layout, values, defCell, blockOnly) {
+	/**
+	 *
+	 * @param {string?} [cellType]
+	 * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]?}
+	 */
+	function create(cellType) {
+		if (!cellType) { return null; }
+		if (!blockOnly) {
+			switch (cellType) {
+				case 'inline': {
+					const result = createStdCell(values);
+					bindGrid(result[0], layout);
+					return result;
+				}
+				case 'base': {
+					const result = createNullCell(values);
+					bindGrid(result[0], layout);
+					return result;
+				}
+			}
+		}
+		switch (cellType) {
+			case 'block': return createStdCell(values);
+			case 'fieldset': return createFieldsetCell(values);
+			case 'collapse': return createCollapseCell(values);
+		}
+		return null;
+	}
+	return create(layout?.cell) || create(defCell) || createStdCell(values);
+}
+
+/** @import { Store } from '../Store/index.mjs' */
+/** @import { State } from './Tree.mjs' */
+/** @import { StoreLayout } from '../types.mjs' */
+
+/**
+ * 
+ * @param {Store<any, any>} store 
+ * @param {Signal.State<Store<any, any>?>} currentStore 
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Field?} layout
+ * @param {State} initState
+ * @param {object} option 
+ * @param {StoreLayout.Column[]} option.columns 
+ * @param {() => void} option.remove 
+ * @param {(el: HTMLElement) => () => void} option.dragenter 
+ * @param {() => void} option.dragstart 
+ * @param {(inChildren?: boolean) => void} option.drop 
+ * @param {() => void} option.dragend 
+ * @param {{get(): boolean}} option.deletable 
+ * @param {() => void} option.addNode 
+ * @param {(store: Store<any, any>) => () => void} option.createDetails 
+ * @param {StoreLayout.Options?} options
+
+ * @returns {[HTMLElement, () => void, (s: State) => void]}
+ */
+function TreeLine(
+	store, currentStore, fieldRenderer, layout, initState, {
+		columns,
+		remove, dragenter, dragstart, dragend, deletable, addNode, drop, createDetails,
+	}, options) {
+	const state = new Signal.State(initState);
+	const root = document.createElement('div');
+	root.addEventListener('dragstart', (event) => {
+		if (event.target !== event.currentTarget) { return; }
+		dragstart();
+	});
+	root.addEventListener('dragend', dragend);
+
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	root.classList.add('NeeloongForm-tree-item');
+
+	destroyList.push(effect(() => {
+		if (currentStore.get() === store) {
+			root.classList.add('NeeloongForm-tree-current');
+		} else {
+			root.classList.remove('NeeloongForm-tree-current');
+		}
+	}));
+	destroyList.push(effect(() => {
+		const level = state.get().level;
+		root.style.setProperty(`--NeeloongForm-tree-level`, `${level}`);
+	}));
+
+	destroyList.push(effect(() => { root.hidden = state.get().hidden; }));
+
+
+	/** @type {HTMLButtonElement[]} */
+	const collapseList = [];
+
+	/**
+	 * 
+	 * @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 });
+
+	}
+	function switchCollapsed() {
+		const s = state.get();
+		s.collapsed = !s.collapsed;
+	}
+	let close = () => { };
+	function open() {
+		close = createDetails(store);
+	}
+	function trigger() {
+		if (currentStore.get() === store) {
+			close(); return;
+		}
+		close = createDetails(store);
+	}
+	const moveStart = layout?.mainMethod === 'move' ? pointerdown : null;
+	const click = moveStart ? null : layout?.mainMethod === 'collapse' ? switchCollapsed
+		: layout?.mainMethod === 'trigger' ? trigger : open;
+
+	const line = root.appendChild(document.createElement('div'));
+	line.classList.add('NeeloongForm-tree-line');
+
+	const dropFront = root.appendChild(document.createElement('div'));
+	dropFront.classList.add('NeeloongForm-tree-drop');
+	const dropChildren = root.appendChild(document.createElement('div'));
+	dropChildren.classList.add('NeeloongForm-tree-drop-children');
+	dropFront.addEventListener('dragover', (e) => e.preventDefault());
+	dropChildren.addEventListener('dragover', (e) => e.preventDefault());
+	dropFront.addEventListener('drop', () => drop());
+	dropChildren.addEventListener('drop', () => drop(true));
+	destroyList.push(effect(() => {
+		dropFront.hidden = dropChildren.hidden = !state.get().droppable;
+	}));
+
+	let dragleave = () => { };
+	dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
+	dropChildren.addEventListener('dragenter', () => dragleave = dragenter(dropChildren));
+	dropFront.addEventListener('dragleave', () => dragleave());
+	dropChildren.addEventListener('dragleave', () => dragleave());
+
+	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');
+			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 actions) {
+			switch (k) {
+				case 'trigger': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-trigger');
+					btn.addEventListener('click', trigger);
+					continue;
+				}
+				case 'open': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-open');
+					btn.addEventListener('click', open);
+					continue;
+				}
+				case 'collapse': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-collapse');
+					btn.addEventListener('click', switchCollapsed);
+					collapseList.push(btn);
+					continue;
+				}
+				case 'move': {
+					if (!options?.editable) { continue; }
+					const move = line.appendChild(document.createElement('button'));
+					move.classList.add('NeeloongForm-tree-move');
+					move.addEventListener('pointerdown', pointerdown);
+					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+						move.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'add': {
+					if (!options?.editable) { continue; }
+					const move = line.appendChild(document.createElement('button'));
+					move.classList.add('NeeloongForm-tree-add');
+					move.addEventListener('click', addNode);
+					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+						move.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'remove': {
+					if (!options?.editable) { continue; }
+					const del = line.appendChild(document.createElement('button'));
+					del.classList.add('NeeloongForm-tree-remove');
+					del.addEventListener('click', remove);
+					destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+						del.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'serial': {
+					const serial = line.appendChild(document.createElement('span'));
+					serial.classList.add('NeeloongForm-tree-serial');
+					continue;
+				}
+			}
+		}
+	}
+	destroyList.push(effect(() => {
+		const s = state.get();
+		if (!s.hasChildren) {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-close');
+				btn.classList.remove('NeeloongForm-tree-collapse-open');
+				btn.disabled = true;
+			}
+		} else if (s.collapsed) {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-close');
+				btn.classList.add('NeeloongForm-tree-collapse-open');
+				btn.disabled = false;
+			}
+		} else {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-open');
+				btn.classList.add('NeeloongForm-tree-collapse-close');
+				btn.disabled = false;
+			}
+		}
+	}));
+
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, s => state.set(s)];
+}
+
+/** @import { Store, ArrayStore } from '../Store/index.mjs' */
+/** @import { StoreLayout } from '../types.mjs' */
+
+const verticalWritingMode = new Set([
+	'vertical-lr', 'vertical-rl', 'sideways-lr', 'sideways-rl',
+]);
+/**
+ *
+ * @param {Element} root
+ * @returns {[boolean, boolean]}
+ */
+function getLayout(root) {
+	const style = getComputedStyle(root);
+	const writingMode = style.writingMode?.toLowerCase();
+	const vertical = verticalWritingMode.has(writingMode);
+	const reverse = style.direction.toLowerCase() === 'rtl' !== (writingMode === 'sideways-lr');
+	return [vertical, reverse];
+}
+
+/**
+ * @typedef {object} State
+ * @property {number} level
+ * @property {number} levelValue
+ * @property {boolean} collapsed
+ * @property {boolean} hidden
+ * @property {boolean} droppable
+ * @property {Set<number>} parents
+ * @property {boolean} hasChildren
+ */
 
+/**
+ * 
+ * @param {ArrayStore} store
+ * @param {State[]} states
+ * @param {Signal.State<number>} drag
+ * @param {string} levelKey
+ * @param {*} index 
+ * @returns {State}
+ */
+function createState(store, states, drag, levelKey, index) {
+	const levelValue = new Signal.Computed(() => {
+		const child = store.child(index);
+		if (!child) { return 0; }
+		return Math.max(0, Math.floor(child.value?.[levelKey]) || 0);
+	});
+	const parentIndex = new Signal.Computed(() => {
+		const child = store.child(index);
+		if (!child) { return -1; }
+		const level = levelValue.get();
+		if (!level) { return -1; }
+		for (let k = index - 1; k >= 0; k--) {
+			if (level > states[k]?.levelValue) { return k; }
+		}
+		return -1;
+	});
+	const hasChildren = new Signal.Computed(() => {
+		const children = store.children;
+		const next = children[index + 1];
+		if (!next) { return false; }
+		const child = children[index];
+		if (!child) { return false; }
+		const level = levelValue.get();
+		return Math.floor(next.child(levelKey)?.value) > level;
+	});
+	const droppable = new Signal.Computed(() => {
+		const dragRow = drag.get();
+		if (dragRow === index) { return false; }
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return true; }
+		return parent.droppable;
+	});
+	const level = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return 0; }
+		return parent.level + 1;
+	});
+	const collapsed = new Signal.State(false);
+	const hidden = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return false; }
+		return parent.collapsed || parent.hidden;
+	});
+	/** @type {Signal.Computed<Set<number>>} */
+	const parents = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return new Set(); }
+		const set = new Set(parent.parents);
+		set.add(pIndex);
+		return set;
+	});
+	return {
+		get level() { return level.get(); },
+		get levelValue() { return levelValue.get(); },
+		get collapsed() { return collapsed.get(); },
+		set collapsed(v) { collapsed.set(v); },
+		get hidden() { return hidden.get(); },
+		get hasChildren() { return hasChildren.get(); },
+		get droppable() { return droppable.get(); },
+		get parents() { return parents.get(); },
+	};
+}
 /**
  *
- * @param {HTMLElement} root
- * @param {StoreLayout.Item?} layout
+ * @param {ArrayStore} store
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Options?} options
+ * @returns {[HTMLElement, () => void]}
  */
-function bindGrid(root, layout) {
-	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
-	root.classList.add(`NeeloongForm-item-grid`);
-	if (colStart && colEnd) {
-		root.style.gridColumn = `${colStart} / ${colEnd}`;
-	} else if (colStart && colSpan) {
-		root.style.gridColumn = `${colStart} / span ${colSpan}`;
-	} else if (colSpan) {
-		root.style.gridColumn = `span ${colSpan}`;
+function Tree(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', 'open', 'collapse']);
+			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 (rowStart && rowEnd) {
-		root.style.gridRow = `${rowStart} / ${rowEnd}`;
-	} else if (rowStart && rowSpan) {
-		root.style.gridRow = `${rowStart} / span ${rowSpan}`;
-	} else if (rowSpan) {
-		root.style.gridRow = `span ${rowSpan}`;
+	if (!columns.length) {
+		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'));
+	main.className = 'NeeloongForm-tree-main';
+	const splitter = root.appendChild(document.createElement('div'));
+	splitter.className = 'NeeloongForm-tree-splitter';
+	const details = root.appendChild(document.createElement('div'));
+	details.className = 'NeeloongForm-tree-details';
+	splitter.hidden = true;
+	details.hidden = true;
+	/** @type {number?} */
+	let splitterPointerId = null;
+	let splitterOffset = 0;
+	function stopMove() {
+		const pointerId = splitterPointerId;
+		if (pointerId === null) { return; }
+		splitterPointerId = null;
+		splitter.releasePointerCapture(pointerId);
+	}
+
+	splitter.addEventListener('pointerdown', e => {
+		const { pointerId } = e;
+		if (![null, pointerId].includes(splitterPointerId)) { return; }
+		splitterPointerId = pointerId;
+		splitter.setPointerCapture(pointerId);
+		switch (getLayout(splitter).map((v, i) => v ? 2 ** i : 0).reduce((a, b) => a + b)) {
+			case 0: splitterOffset = -e.offsetX; break;
+			case 1: splitterOffset = -e.offsetY; break;
+			case 2: splitterOffset = e.offsetX - splitter.offsetWidth; break;
+			case 3: splitterOffset = e.offsetY - splitter.offsetHeight; break;
+		}
+	});
+	/**
+	 * @param {boolean} vertical
+	 * @returns {number}
+	 */
+	const getSize = vertical => vertical
+		? root.clientHeight - splitter.offsetHeight
+		: root.clientWidth - splitter.offsetWidth;
+	/** @param {PointerEvent} e */
+	const updateMove = e => {
+		const [vertical, reverse] = getLayout(splitter);
+		let os = 0;
+		switch ([vertical, reverse].map((v, i) => v ? 2 ** i : 0).reduce((a, b) => a + b)) {
+			case 0: os = e.clientX - root.getBoundingClientRect().left; break;
+			case 1: os = e.clientY - root.getBoundingClientRect().top; break;
+			case 2: os = root.getBoundingClientRect().right - e.clientX; break;
+			case 3: os = root.getBoundingClientRect().bottom - e.clientY; break;
+		}
+		const value = 1 - Math.max(0, Math.min((os + splitterOffset) / getSize(vertical), 1));
+		details.style.inlineSize = `${value * 100}%`;
+	};
+	splitter.addEventListener('pointermove', e => {
+		const { pointerId } = e;
+		if (!splitter.hasPointerCapture(pointerId)) { return; }
+		updateMove(e);
+	});
+	splitter.addEventListener('pointerup', e => {
+		const { pointerId } = e;
+		if (pointerId !== splitterPointerId) { return; }
+		updateMove(e);
+		stopMove();
+	});
+	splitter.addEventListener('pointercancel', e => {
+		const { pointerId } = e;
+		if (pointerId !== splitterPointerId) { return; }
+		updateMove(e);
+		stopMove();
+	});
 
 
-}
-
-/** @import { CellValues } from './createCell.mjs' */
-
-/**
- *
- * @param {CellValues} [values]
- * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
- */
-function createNullCell(values) {
 	/** @type {(() => void)[]} */
 	const destroyList = [];
-	const root = document.createElement('div');
-	root.className = 'NeeloongForm-item';
-	destroyList.push(bindRequired(root, values));
-	destroyList.push(bindErrored(root, values));
+	let destroyDetails = () => { };
+	const detailsStore = new Signal.State(/** @type{Store<any, any>?}*/(null));
+	/**
+	 * 
+	 * @param {Store<any, any>} store 
+	 * @returns 
+	 */
+	function createDetails(store) {
+		if (detailsStore.get() === store) { return destroyDetails; }
+		destroyDetails();
+		detailsStore.set(store);
+		const [form, destroy] = Form(store, fieldRenderer, layout, options);
+		details.appendChild(form);
+		details.hidden = false;
+		splitter.hidden = false;
+		let done = false;
+		destroyDetails = () => {
+			if (done) { return; }
+			done = true;
+			detailsStore.set(null);
+			form.remove();
+			destroy();
+			stopMove();
+			splitter.hidden = true;
+			details.hidden = true;
+		};
+		return destroyDetails;
 
+	}
 
-	return [root, () => {
-		for (const destroy of destroyList) {
-			destroy();
+
+	const levelKey = layout?.levelKey || 'level';
+	const addable = new Signal.Computed(() => store.addable);
+	const deletable = { get: () => Boolean(options?.editable) };
+	/**
+	 * 
+	 * @param {number} parent 
+	 */
+	function addNode(parent) {
+		/** @type {Record<string, any>} */
+		const data = {};
+		if (parent === -2) {
+			data[levelKey] = 0;
+			store.add(data);
+			return;
 		}
-	}, root, destroyList];
+		data[levelKey] = (states[parent]?.levelValue ?? -1) + 1;
+		store.insert(parent + 1, data);
+
+	}
+	/**
+	 * 
+	 * @param {Store} child 
+	 */
+	function remove(child) {
+		store.remove(Number(child.index));
+	}
+	let dragRow = -1;
+	let drag = new Signal.State(dragRow);
+	/**
+	 * 
+	 * @param {Store} [child] 
+	 * @param {boolean} [inChildren] 
+	 */
+	function getLevel(child, inChildren) {
+		if (!child) { return 0; }
+		const newLevel = Number(states[Number(child.index)]?.levelValue) || 0;
+		if (!inChildren) { return newLevel; }
+		return newLevel + 1;
+	}
+	/**
+	 * 
+	 * @param {number} start 
+	 */
+	function getQuantity(start) {
+		let last = start + 1;
+		const level = states[dragRow]?.level ?? 0;
+		for (; (states[last]?.level ?? -1) > level; last++) { }
+		return last - dragRow;
+	}
+	/**
+	 * 
+	 * @param {Store} [child] 
+	 * @param {boolean} [inChildren] 
+	 */
+	function drop(child, inChildren) {
+		if (dragRow < 0) { return; }
+		const newLevel = Number(getLevel(child, inChildren)) || 0;
+		let quantity = getQuantity(dragRow);
+		let index = -1;
+		if (child) {
+			index = Number(child.index);
+			if (dragRow === index || states[index]?.parents?.has(dragRow)) { return; }
+			if (inChildren || index !== dragRow + quantity) {
+				if (inChildren) {
+					for (const currentLevel = states[index]?.level || 0; states[index + 1]?.level > currentLevel; index++);
+					if (index < dragRow) { index += 1; }
+				} else {
+					if (index > dragRow) { index -= 1; }
+				}
+				if (index < 0) { return; }
+			} else {
+				index = -1;
+			}
 
+		} else {
+			index = states.length - 1;
+			if (index < 0) { return; }
+		}
+		if (index >= 0 && dragRow !== index) {
+			quantity = store.move(dragRow, index, quantity);
+			if (!quantity) { return; }
+			dragRow = quantity > 1 && index > dragRow ? index - quantity + 1 : index;
+			drag.set(dragRow);
+		}
+		const levelSub = Array(quantity).fill(states[dragRow]?.level ?? 0).map((l, i) => Math.max((states[i + dragRow]?.level ?? 0) - l, 0));
+		for (let i = 0; i < quantity; i++) {
+			const c = store.children[dragRow + i]?.child(levelKey);
+			if (c) {
+				c.value = newLevel + levelSub[i];
+			}
+		}
 
-}
 
-/** @import { CellValues } from './createCell.mjs' */
+	}
+	/**
+	 * 
+	 * @param {Store} child 
+	 */
+	function dragstart(child) {
+		dragRow = Number(child.index);
+		drag.set(dragRow);
+		main.classList.add('NeeloongForm-tree-moving');
+
+	}
+	/** @type {HTMLElement?} */
+	let dragenterEl = null;
+	/** @param {HTMLElement} el */
+	function dragenter(el) {
+		if (dragRow === -1) { return () => { }; }
+		dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+		dragenterEl = el;
+		dragenterEl?.classList.add('NeeloongForm-tree-drag-over');
+		return () => {
+			if (dragenterEl !== el) { return; }
+			dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+			dragenterEl = null;
+		};
 
-/**
- *
- * @param {CellValues} [values]
- * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
- */
-function createStdCell(values) {
-	/** @type {(() => void)[]} */
-	const destroyList = [];
-	const root = document.createElement('div');
-	root.className = 'NeeloongForm-item';
-	destroyList.push(bindRequired(root, values));
+	}
+	function dragend() {
+		dragRow = -1;
+		drag.set(dragRow);
+		main.classList.remove('NeeloongForm-tree-moving');
+		dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+		dragenterEl = null;
 
-	const label = root.appendChild(document.createElement('div'));
-	label.className = 'NeeloongForm-item-label';
-	destroyList.push(effect(() => label.innerText = values?.label || ''));
+	}
+	if (options?.editable) {
+		const button = main.appendChild(document.createElement('button'));
+		button.addEventListener('click', () => addNode(-1));
+		button.classList.add('NeeloongForm-tree-head-add');
+		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+	}
+	const start = main.appendChild(document.createComment(''));
+	if (options?.editable) {
+		const foot = main.appendChild(document.createElement('div'));
+		foot.classList.add('NeeloongForm-tree-foot');
+		const button = foot.appendChild(document.createElement('button'));
+		button.addEventListener('click', () => addNode(-2));
+		button.classList.add('NeeloongForm-tree-foot-add');
+		const dropFront = foot.appendChild(document.createElement('div'));
+		dropFront.classList.add('NeeloongForm-tree-drop');
 
-	const content = root.appendChild(document.createElement('div'));
-	content.className = 'NeeloongForm-item-content';
 
-	const description = root.appendChild(document.createElement('div'));
-	description.className = 'NeeloongForm-item-description';
-	destroyList.push(effect(() => description.innerText = values?.description || ''));
-	const error = root.appendChild(document.createElement('div'));
-	error.className = 'NeeloongForm-item-error';
-	destroyList.push(effect(() => error.innerText = values?.error || ''));
-	destroyList.push(bindErrored(root, values));
+		let dragleave = () => { };
+		dropFront.addEventListener('dragover', (e) => e.preventDefault());
+		dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
+		dropFront.addEventListener('dragleave', () => dragleave());
+		dropFront.addEventListener('drop', () => drop());
 
-	return [root, () => {
-		for (const destroy of destroyList) {
+
+		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+	}
+	/** @type {Map<Store, [HTMLElement, () => void, (s: State) => void]>} */
+	let seMap = new Map();
+	/** @param {Map<Store, [tbody: HTMLElement, destroy: () => void, (s: State) => void]>} map */
+	function destroyMap(map) {
+		for (const [el, destroy] of map.values()) {
 			destroy();
+			el.remove();
 		}
-	}, content, destroyList];
 
+	}
+	/** @type {State[]} */
+	const states = [];
+	const childrenResult = watch(() => store.children, function render(children) {
+		let nextNode = start.nextSibling;
+		const oldSeMap = seMap;
+		seMap = new Map();
+		const childrenLength = children.length;
+		for (let i = states.length; i < childrenLength; i++) {
+			states[i] = createState(store, states, drag, 'level', i);
+		}
 
-}
+		let i = -1;
+		for (let child of children) {
+			i++;
+			const state = states[i];
+			const old = oldSeMap.get(child);
+			if (!old) {
+				const [el, destroy, setState] = TreeLine(child, detailsStore, fieldRenderer, layout, state, {
+					columns,
+					remove: remove.bind(null, child),
+					dragenter,
+					dragstart: dragstart.bind(null, child),
+					dragend,
+					deletable,
+					addNode: () => addNode(Number(child.index)),
+					createDetails,
+					drop: drop.bind(null, child),
+				}, options);
+				main.insertBefore(el, nextNode);
+				seMap.set(child, [el, destroy, setState]);
+				continue;
+			}
+			oldSeMap.delete(child);
+			seMap.set(child, old);
+			old[2](state);
+			if (nextNode === old[0]) {
+				nextNode = nextNode.nextSibling;
+				continue;
+			}
+			main.insertBefore(old[0], nextNode);
+		}
+		states.splice(childrenLength);
+		destroyMap(oldSeMap);
+	}, true);
 
-/** @import { StoreLayout } from '../types.mjs' */
+	return [root, () => {
+		start.remove();
+		destroyMap(seMap);
+		childrenResult();
+		destroyDetails?.();
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}];
+}
 
 /**
- * @typedef {object} CellValues
- * @property {string?} [label]
- * @property {string?} [description]
- * @property {string?} [error]
- * @property {boolean?} [required]
+ * 
+ * @param {string | ParentNode} html 
+ * @param {Store<any, any>} store 
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Options?} options
+ * @param {StoreLayout.Field?} layout
+ * @returns 
  */
+function Html(html, store, fieldRenderer, options, layout) {
+	const htmlContent = getHtmlContent(html);
+	const destroy = renderHtml(store, fieldRenderer, htmlContent, options, layout);
+	return [htmlContent, destroy];
+}
+
 /**
- *
- * @param {StoreLayout.Item} layout
- * @param {CellValues} [values]
- * @param {string?} [defCell]
- * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ * 
+ * @param {StoreLayout.Field['arrayStyle']?} arrayStyle 
  */
-function createCell(layout, values, defCell) {
-	switch (layout.cell || defCell) {
-		default: 
-		case 'block': return createStdCell(values);
-		case 'collapse': return createCollapseCell(values);
-		case 'inline': {
-			const result = createStdCell(values);
-			bindGrid(result[0], layout);
-			return result;
-		}
-		case 'base': {
-			const result = createNullCell(values);
-			bindGrid(result[0], layout);
-			return result;
-		}
+function getArrayCell(arrayStyle) {
+	switch(arrayStyle) {
+		case 'tree': return Tree;
+		default: return Table;
 	}
 
 }
@@ -5519,66 +6267,28 @@ function createCell(layout, values, defCell) {
  * @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;
-	if (html) {
-		const [root, destroy, content, destroyList] = createCell(layout, store, isObject ? 'collapse' : 'base');
-		const htmlContent = getHtmlContent(html);
-		destroyList.push(renderHtml(store, fieldRenderer, htmlContent, options, layout));
-		content.appendChild(htmlContent);
-		return [root, destroy];
-	}
-	if (isObject) {
-		const [root, destroy, content, destroyList] = createCollapseCell(store);
-		destroyList.push(effect(() => root.hidden = store.hidden));
-		if (typeof component === 'function') {
-			const r = fieldRenderer(store, component, options);
-			if (r) {
-				const [el, destroy] = r;
-				content.appendChild(el);
-				destroyList.push(destroy);
-			}
-		} else if (store instanceof ArrayStore) {
-			const [table, destroy] = Table(store, fieldRenderer, layout, options);
-			content.appendChild(table);
-			destroyList.push(destroy);
-		} else {
-			const [form, destroy] = Form(store, fieldRenderer, layout, options);
-			content.appendChild(form);
-			destroyList.push(destroy);
-		}
-		return [root, destroy];
-	}
-
-
-	const [root, destroy, content, destroyList] = layout?.cell === 'base'
-		? createNullCell(store)
-		: createStdCell(store);
-	bindGrid(root, layout);
+	/** @type {StoreLayout.Grid['cell']} */
+	const cellType = isObject
+		? store instanceof ArrayStore ? 'collapse' : 'fieldset'
+		: html ? 'base' : 'inline';
+	const [root, destroy, content, destroyList] = createCell(layout, store, cellType, isObject);
 	destroyList.push(effect(() => root.hidden = store.hidden));
-	if (typeof component === 'function') {
-		const r = fieldRenderer(store, component, options);
-		if (r) {
-			const [el, destroy] = r;
-			content.appendChild(el);
-			destroyList.push(destroy);
-		}
+
+	const r =
+		html && Html(html, store, fieldRenderer, options, layout)
+		|| typeof component === 'function' && fieldRenderer(store, component, options)
+		|| store instanceof ArrayStore && getArrayCell(layout?.arrayStyle)(store, fieldRenderer, layout, options)
+		|| isObject && Form(store, fieldRenderer, layout, options);
+	if (r) {
+		const [el, destroy] = r;
+		content.appendChild(el);
+		destroyList.push(destroy);
 	}
 	return [root, destroy];
 }