@neeloong/form 0.22.0 → 0.24.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.22.0
+* @neeloong/form v0.24.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -36,7 +36,7 @@ function createBooleanStates(self, defState, fn, parent) {
 
 }
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 /** @param {*} v  */
 const string = v => typeof v === 'string' && v || null;
 /** @param {*} v  */
@@ -133,7 +133,7 @@ function createRef(store) {
 	return r;
 }
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 /** @import ArrayStore from './ArrayStore.mjs' */
 
 
@@ -185,7 +185,7 @@ function setStore$1(type, Class) {
 }
 
 /** @import Store from './Store.mjs' */
-/** @import { AsyncValidator, Validator } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 /**
  * 
  * @param {*} v 
@@ -200,7 +200,7 @@ function toResult(v) {
 /**
  * 
  * @param {Store} store 
- * @param  {...Validator | undefined | null | (Validator | undefined | null)[]} validators 
+ * @param  {...Schema.Validator | undefined | null | (Schema.Validator | undefined | null)[]} validators 
  * @returns 
  */
 function createValidator(store, ...validators) {
@@ -223,7 +223,7 @@ function createValidator(store, ...validators) {
 /**
  * 
  * @param {Store} store 
- * @param  {...AsyncValidator | undefined | null | (AsyncValidator | undefined | null)[]} validators 
+ * @param  {...Schema.AsyncValidator | undefined | null | (Schema.AsyncValidator | undefined | null)[]} validators 
  * @returns {[exec: () => Promise<string[]>, state: Signal.Computed<string[]>, stop: () => void]}
  */
 function createAsyncValidator(store, ...validators) {
@@ -238,7 +238,7 @@ function createAsyncValidator(store, ...validators) {
 	const st = new Signal.State(/** @type {string[]} */([]));
 	/**
 	 * 
-	 * @param {AsyncValidator} validator 
+	 * @param {Schema.AsyncValidator} validator 
 	 * @param {AbortSignal} signal 
 	 */
 	async function run(validator, signal) {
@@ -292,7 +292,8 @@ function makeDefault(store, def) {
 }
 
 /** @import { Ref } from './ref.mjs' */
-/** @import { AsyncValidator, Schema, Validator } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 管理单个表单字段的状态和行为
@@ -389,8 +390,8 @@ class Store {
 	 * @param {number} [options.maxLength] 
 	 * @param {RegExp} [options.pattern] 
 	 * @param {(Schema.Value.Group | Schema.Value | string | number)[]} [options.values] 可选值
-	 * @param {Validator | Validator[] | null} [options.validator]
-	 * @param {{[k in keyof Schema.Events]?: AsyncValidator | AsyncValidator[] | null}} [options.validators]
+	 * @param {Schema.Validator | Schema.Validator[] | null} [options.validator]
+	 * @param {{[k in keyof Schema.Events]?: Schema.AsyncValidator | Schema.AsyncValidator[] | null}} [options.validators]
 	 * 
 	 * @param {Ref?} [options.ref]
 	 * 
@@ -422,6 +423,7 @@ class Store {
 		this.#type = schema.type;
 		this.#meta = schema.meta;
 		this.#component = schema.component;
+		this.#layout = schema.layout || {};
 
 		const selfNewState = new Signal.State(Boolean(isNew));
 		this.#selfNew = selfNewState;
@@ -512,6 +514,9 @@ class Store {
 			this.listen(k, f);
 		}
 	}
+	/** @type {StoreLayout.Field<any>} */
+	#layout
+	get layout() { return this.#layout; }
 	#createDefault;
 	/** @param {any} [value] @returns {any} */
 	createDefault(value) { return this.#createDefault(value); }
@@ -933,7 +938,7 @@ class Store {
 	}
 }
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 
 /**
  * @template {Record<string, any>} [T=Record<string, any>]
@@ -997,7 +1002,7 @@ class ObjectStore extends Store {
 // @ts-ignore
 setObjectStore(ObjectStore);
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 
 
 
@@ -1051,7 +1056,7 @@ class ArrayStore extends Store {
 			}
 
 		};
-		super(schema, {
+		super({ ...schema, immutable: false }, {
 			index, new: isNew, parent,
 			size: new Signal.Computed(() => childrenState.get().length),
 			setValue(v) {
@@ -1088,7 +1093,10 @@ class ArrayStore extends Store {
 			},
 		};
 		this.#create = (index, isNew) => {
-			const child = create(schema, { ...childCommonOptions, index, new: isNew });
+			const child = create(
+				{ ...schema, creatable: true },
+				{ ...childCommonOptions, index, new: isNew },
+			);
 			child.index = index;
 			return child;
 		};
@@ -2314,13 +2322,36 @@ var index = /*#__PURE__*/Object.freeze({
 
 /**
  * 相应式执行
+ * @overload
  * @param {() => void} fn 执行函数
+ * @param {null} [signal]
  * @returns {() => void} 取消函数
  */
-function effect(fn) {
+/**
+ * 相应式执行
+ * @overload
+ * @param {() => void} fn 执行函数
+ * @param {AbortSignal} signal
+ * @returns {void} 取消函数
+ */
+/**
+ * 相应式执行
+ * @overload
+ * @param {() => void} fn 执行函数
+ * @param {AbortSignal?} [signal]
+ * @returns {(() => void) | void} 取消函数
+ */
+/**
+ * 相应式执行
+ * @param {() => void} fn 执行函数
+ * @param {AbortSignal?} [signal]
+ * @returns {(() => void) | void} 取消函数
+ */
+function effect(fn, signal) {
+	if (signal?.aborted) { return; }
 	let needsEnqueue = true;
 	const w = new Signal.subtle.Watcher(() => {
-		if (!needsEnqueue) { return }
+		if (!needsEnqueue) { return; }
 		needsEnqueue = false;
 		queueMicrotask(() => {
 			needsEnqueue = true;
@@ -2334,19 +2365,54 @@ function effect(fn) {
 
 	w.watch(computed);
 	computed.get();
+	if (!signal) { return () => { w.unwatch(computed); }; }
+	signal.addEventListener('abort', () => {
+		w.unwatch(computed);
+	}, { once: true });
 
-	return () => { w.unwatch(computed); };
 }
 
 /**
  * 创建可赋值计算值
  * @template T
+ * @overload
  * @param {() => T} getter 取值方法
  * @param {(value: T) => void} callback 取值方法
  * @param {boolean} immediate 是否立即执行一次
+ * @param {null} [signal]
  * @returns {() => void}
  */
-function watch(getter, callback, immediate) {
+
+/**
+ * 创建可赋值计算值
+ * @template T
+ * @overload
+ * @param {() => T} getter 取值方法
+ * @param {(value: T) => void} callback 取值方法
+ * @param {boolean} immediate 是否立即执行一次
+ * @param {AbortSignal?} [signal]
+ * @returns {(() => void) | void}
+ */
+/**
+ * 创建可赋值计算值
+ * @template T
+ * @overload
+ * @param {() => T} getter 取值方法
+ * @param {(value: T) => void} callback 取值方法
+ * @param {boolean} immediate 是否立即执行一次
+ * @param {AbortSignal} signal
+ * @returns {void}
+ */
+/**
+ * 创建可赋值计算值
+ * @template T
+ * @param {() => T} getter 取值方法
+ * @param {(value: T) => void} callback 取值方法
+ * @param {boolean} immediate 是否立即执行一次
+ * @param {AbortSignal?} [signal]
+ * @returns {(() => void) | void}
+ */
+function watch(getter, callback, immediate, signal) {
 	let run = false;
 	/** @type {any} */
 	let value;
@@ -2361,7 +2427,7 @@ function watch(getter, callback, immediate) {
 		if (Object.is(val, value)) { return; }
 		value = val;
 		callback(val);
-	});
+	}, signal);
 }
 
 const bindable = {
@@ -3428,8 +3494,7 @@ class EventEmitter {
 	}
 }
 
-/** @import { Component, Relatedness } from '../types.mjs' */
-/** @import Store from '../Store/index.mjs' */
+/** @import { Component } from '../types.mjs' */
 /** @import Environment from './Environment/index.mjs' */
 /** @import * as Layout from '../Layout/index.mjs' */
 
@@ -3599,7 +3664,8 @@ function bindFilters(env, fn, filterFns) {
 	}
 }
 
-/** @import { Component, Relatedness } from '../types.mjs' */
+/** @import { Component } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 /** @import { ComponentHandler } from './types.mjs' */
 /** @import Store from '../Store/index.mjs' */
 /** @import Environment from './Environment/index.mjs' */
@@ -3610,7 +3676,7 @@ function bindFilters(env, fn, filterFns) {
  * @param {Component | string} component 
  * @param {Environment} env 
  * @param {Store?} store 
- * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
+ * @param {((store: Store, el: Element | StoreLayout.Relatedness) => () => void)?} [relate]
  * @returns 
  */
 function createContext(component, env, store, relate) {
@@ -4488,7 +4554,7 @@ function divergent(layout, parent, next, env, renderItem) {
  * @param {Record<string, [Layout.Template, Environment]>} templates
  * @param {string[]} componentPath
  * @param {Record<string, Enhancement>} enhancements
- * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
+ * @param {((store: Store, el: Element | StoreLayout.Relatedness) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  */
 function renderNode(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
@@ -4570,7 +4636,7 @@ function createTemplates(env, parentTemplates, newTemplates) {
  * @param {Record<string, [Layout.Template, Environment]>} parentTemplates
  * @param {string[]} componentPath
  * @param {Record<string, Enhancement>} enhancements
- * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
+ * @param {((store: Store, el: Element | StoreLayout.Relatedness) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  * @returns {() => void}
  */
@@ -4635,7 +4701,7 @@ function renderChild(layout, parent, next, parentEnv, parentTemplates, component
  * @param {Record<string, [Layout.Template, Environment]>} templates
  * @param {string[]} componentPath
  * @param {Record<string, Enhancement>} enhancements
- * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
+ * @param {((store: Store, el: Element | StoreLayout.Relatedness) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  * @returns {() => void}
  */
@@ -4658,7 +4724,7 @@ function renderChildren(layouts, parent, next, env, templates, componentPath, en
  * @param {object} [options] 选项
  * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 全局数据
  * @param {Component.Getter?} [options.component]  自定义组件
- * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate] 关联函数
+ * @param {(store: Store, el: Element | StoreLayout.Relatedness) => () => void} [options.relate] 关联函数
  * @param {Record<string, Enhancement>} [options.enhancements] 增强信息
  * @returns {() => void}
  */
@@ -4671,69 +4737,69 @@ function render(store, layouts, parent, { component, global, relate, enhancement
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
-
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
  * @param {string} field 
+ * @returns {(v: StoreLayout.Item<T>) => v is StoreLayout.Field<T>}
  */
 function createFieldFilter(field) {
-
 	/**
 	 * 
-	 * @param {StoreLayout.Item} v 
-	 * @returns {v is StoreLayout.Field}
+	 * @param {StoreLayout.Item<T>} v 
+	 * @returns {v is StoreLayout.Field<T>}
 	 */
-
-	return function (v) {
+	return v => {
 		if (v.type && v.type !== 'field') { return false; }
 		return v.field === field;
 
 	};
 }
 /**
- * 
- * @param {StoreLayout.Renderer} fieldRenderer 
+ * @template T
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {Store} store 
  * @param {Node} node 
  * @param {StoreLayout.Options?} options
- * @param {StoreLayout?} [layout] 
+ * @param {StoreLayout<T>} layout 
  * @param {Node} [anchor]
  * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
+ * @returns {void}
  */
 function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragenter) {
-	/** @type {(() => void)[]} */
-	const destroyList = [];
+	if (options?.signal?.aborted) { return; }
 	if (node instanceof Element) {
 		const tagName = node.tagName.toLowerCase();
-		if (!node.parentNode) { return () => { }; }
+		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 () => { }; }
+			if (!fieldStore) { return; }
+			const fieldLayout = field
+				? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
+				: { ...layout, html: '' };
 			switch (mode) {
 				case 'grid': {
-					const [el, destroy] = Form(store, fieldRenderer, fieldLayout, options);
-					node.replaceWith(el);
-					return destroy;
+					const el = Form(store, fieldRenderer, fieldLayout, options);
+					if (el) { node.replaceWith(el); }
+					return;
 				}
 			}
-			const res = fieldRenderer(fieldStore, options);
+			const res = fieldRenderer(fieldStore, layout.renderer, options);
 			if (res) {
-				const [el, destroy] = res;
-				node.replaceWith(el);
-				return destroy;
+				node.replaceWith(res);
+				return;
 			}
 			const value = node.getAttribute('placeholder') || '';
 			node.replaceWith(document.createTextNode(value));
-			return () => { };
+			return;
 		}
 		if (tagName === 'nl-form-button') {
 			const button = document.createElement('button');
-			button.className = 'NeeloongForm-item-button';
+			button.classList.add('NeeloongForm-item-button');
 			const click = node.getAttribute('click') || '';
 			const call = options?.call;
 			if (click && typeof call === 'function') {
@@ -4743,7 +4809,7 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 				button.appendChild(n);
 			}
 			node.replaceWith(button);
-			return () => { };
+			return;
 		}
 		const name = node.getAttribute('nl-form-field');
 		if (name) {
@@ -4752,32 +4818,37 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 
 			const fieldStore = field ? store.child(field) : store;
 			if (!fieldStore) {
-				return () => { };
+				return;
 			}
 			node.removeAttribute('nl-form-field');
-			const fieldLayout = field ? layout?.fields?.find(createFieldFilter(field)) : layout;
-			if (!array) { return renderHtml(fieldStore, fieldRenderer, node, options, fieldLayout, anchor); }
+			const fieldLayout = field
+				? layout.fields?.find(createFieldFilter(field)) || fieldStore.layout
+				: { ...layout, html: '' };
+			if (!array) {
+				renderHtml(fieldStore, fieldRenderer, node, options, fieldLayout, anchor);
+				return;
+			}
 			if (!(fieldStore instanceof ArrayStore)) {
 				node.remove();
-				return () => { };
+				return;
 			}
 			const parentElement = node.parentElement;
 			if (!parentElement) {
 				node.remove();
-				return () => { };
+				return;
 			}
 			const comment = parentElement.insertBefore(document.createComment(''), node) || null;
 			node.remove();
 
-			/** @type {Map<Store, [Node, () => void]>} */
+			/** @type {Map<Store, [Node, AbortController]>} */
 			let seMap = new Map();
-			/** @param {Map<Store, [tbody: Node, destroy: () => void]>} map */
+			/** @param {Map<Store, [Node, AbortController]>} map */
 			function destroyMap(map) {
-				for (const [el, destroy] of map.values()) {
-					destroy();
+				for (const [el, ac] of map.values()) {
 					if (el instanceof Element) {
 						el.remove();
 					}
+					ac.abort();
 				}
 			}
 			let dragRow = -1;
@@ -4794,22 +4865,26 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 				}
 			};
 
-			const childrenResult = watch(() => fieldStore.children, children => {
+			watch(() => fieldStore.children, children => {
 				let nextNode = comment.nextSibling;
 				const oldSeMap = seMap;
 				seMap = new Map();
 				for (const child of children) {
 					const old = oldSeMap.get(child);
 					if (!old) {
+						const ac = new AbortController();
 						const el = parentElement.insertBefore(node.cloneNode(true), nextNode);
-						const d = renderHtml(child, fieldRenderer, el, options, fieldLayout, el);
+						renderHtml(child, fieldRenderer, el, {
+							...options,
+							signal: options?.signal ? AbortSignal.any([options?.signal, ac.signal]) : ac.signal,
+						}, fieldLayout, el);
 						el.addEventListener('dragenter', () => { newDragenter(child); });
 						el.addEventListener('dragstart', (event) => {
 							if (event.target !== event.currentTarget) { return; }
 							dragRow = Number(child.index);
 						});
 						el.addEventListener('dragend', () => { dragRow = -1; });
-						seMap.set(child, [el, d]);
+						seMap.set(child, [el, ac]);
 						continue;
 					}
 					oldSeMap.delete(child);
@@ -4821,13 +4896,13 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 					parentElement.insertBefore(old[0], nextNode);
 				}
 				destroyMap(oldSeMap);
-			}, true);
+			}, true, options?.signal);
 
-			return () => {
+			options?.signal?.addEventListener('abort', () => {
 				comment.remove();
 				destroyMap(seMap);
-				childrenResult();
-			};
+			}, { once: true });
+			return;
 
 		}
 		if (node.getAttribute('nl-form-remove') !== null) {
@@ -4870,11 +4945,11 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 				const field = node.getAttribute(attr);
 				const fieldStore = field ? store.child(field) : store;
 				if (!fieldStore) { continue; }
-				destroyList.push(effect(() => {
+				effect(() => {
 					try {
 						node.setAttribute(name, fieldStore.value);
 					} catch { }
-				}));
+				}, options?.signal);
 			} else if (prefix === 'nl-form-event' && typeof call === 'function') {
 				const event = node.getAttribute(attr);
 				if (!event) { continue; }
@@ -4886,15 +4961,9 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 	}
 	if (node instanceof Element || node instanceof DocumentFragment) {
 		for (const n of [...node.children]) {
-			destroyList.push(renderHtml(store, fieldRenderer, n, options, layout, anchor));
+			renderHtml(store, fieldRenderer, n, options, layout, anchor);
 		}
 	}
-	return () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	};
-
 }
 
 /**
@@ -4916,38 +4985,46 @@ function getHtmlContent(html) {
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
- * @returns {[ParentNode, () => void]}
+ * @returns {ParentNode?}
  */
 function FormFieldInline(store, fieldRenderer, layout, options) {
-	return fieldRenderer(store, options) || [document.createElement('div'), () => { }];
+	if (options?.signal?.aborted) { return null; }
+	const html = layout.html;
+	if (html) {
+		const content = getHtmlContent(html);
+		renderHtml(store, fieldRenderer, content, options, layout);
+		return content;
+	}
+	return fieldRenderer(store, layout.renderer, options);
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
  * @param {object} option 
- * @param {StoreLayout.Column[]} option.columns
+ * @param {StoreLayout.Column<T>[]} 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]}
+ * @returns {HTMLTableSectionElement}
  */
 function Line(store, fieldRenderer, layout, {
-	columns,
-	remove, dragenter, dragstart, dragend, deletable
+	columns, deletable,
+	remove, dragenter, dragstart, dragend,
 }, options) {
 	const root = document.createElement('tbody');
 	root.addEventListener('dragenter', () => {
@@ -4960,38 +5037,34 @@ function Line(store, fieldRenderer, layout, {
 	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');
+		const form = Form(store, fieldRenderer, layout, options);
+		if (form) {
+			const body = root.appendChild(document.createElement('tr'));
+			const main = body.appendChild(document.createElement('td'));
+			main.colSpan = columns.length;
+			body.hidden = true;
+			trigger = () => {
+				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');
+					}
 				}
-			}
-		};
-
+			};
+		}
 	}
 
 	/**
@@ -5013,15 +5086,14 @@ function Line(store, fieldRenderer, layout, {
 
 	}
 
-	for (const name of columns) {
-		const { actions, field, pattern } = name;
+	for (const column of columns) {
+		const { actions, field, pattern } = column;
 		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);
+				const el = FormFieldInline(child, fieldRenderer, column, options);
+				if (el) { td.appendChild(el); }
 			}
 			continue;
 		}
@@ -5041,9 +5113,9 @@ function Line(store, fieldRenderer, layout, {
 					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 => {
+					watch(() => store.readonly || store.disabled, disabled => {
 						move.disabled = disabled;
-					}, true));
+					}, true, options.signal);
 					continue;
 				}
 				case 'remove': {
@@ -5051,9 +5123,9 @@ function Line(store, fieldRenderer, layout, {
 					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 => {
+					watch(() => !deletable.get(), disabled => {
 						del.disabled = disabled;
-					}, true));
+					}, true, options.signal);
 					continue;
 				}
 				case 'serial': {
@@ -5065,28 +5137,25 @@ function Line(store, fieldRenderer, layout, {
 		}
 	}
 
-	return [root, () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	}];
+	return root;
 }
 
 /** @import { Store, ArrayStore } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
+ * @param {AbortSignal | null | undefined} signal 
  * @param {HTMLElement} parent 
- * @param {StoreLayout.Column[]} columns 
+ * @param {StoreLayout.Column<T>[]} columns 
  * @param {() => any} add 
  * @param {{get(): boolean}} addable 
  * @param {boolean?} [editable] 
+ * @returns {void}
  */
-function renderHead(parent, columns, add, addable, editable) {
+function renderHead(signal, 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}`); }
@@ -5098,33 +5167,30 @@ function renderHead(parent, columns, add, addable, editable) {
 		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));
+		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, signal);
 	}
-	return () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	};
 }
 /**
  *
+ * @template T
  * @param {ArrayStore} store
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
- * @returns {[HTMLTableElement, () => void]}
+ * @returns {HTMLTableElement?}
  */
 function Table(store, fieldRenderer, layout, options) {
-	const headerColumns = layout?.columns;
+	if (options?.signal?.aborted) { return null; }
+	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[]} */
+	/** @type {StoreLayout.Column<T>[]} */
 	let columns = [];
 	if (Array.isArray(headerColumns)) {
 		const map = new Map(fieldList.map(v => [v.field, v]));
 
-		/** @type {(StoreLayout.Column | null)[]} */
+		/** @type {(StoreLayout.Column<T> | null)[]} */
 		const allColumns = headerColumns.map(v => {
 			if (!v) { return null; }
 			if (typeof v === 'number') { return { placeholder: v }; }
@@ -5154,7 +5220,7 @@ function Table(store, fieldRenderer, layout, options) {
 			// }
 			return null;
 		});
-		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
+		columns = /** @type {StoreLayout.Column<T>[]} */(allColumns.filter(Boolean));
 
 	}
 	if (!columns.length) {
@@ -5165,11 +5231,10 @@ function Table(store, fieldRenderer, layout, options) {
 	}
 
 	const table = document.createElement('table');
-	table.className = 'NeeloongForm-table';
+	table.classList.add('NeeloongForm-table');
 	const thead = table.appendChild(document.createElement('thead'));
 
-	const addable = new Signal.Computed(() => store.addable);
-	const deletable = { get: () => Boolean(options?.editable) };
+	const addable = new Signal.Computed(() => !store.readonly && !store.disabled && store.addable);
 	function add() {
 		const data = {};
 		store.add(data);
@@ -5206,15 +5271,13 @@ function Table(store, fieldRenderer, layout, options) {
 		dragRow = -1;
 
 	}
-	/** @type {(() => void)[]} */
-	const destroyList = [];
-	destroyList.push(renderHead(thead, columns, add, addable, Boolean(options?.editable)));
-	switch (layout?.tableFoot) {
+	renderHead(options?.signal, 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)));
+			renderHead(options?.signal, tfoot, columns, add, addable, Boolean(options?.editable));
 			break;
 		}
 		case 'add': {
@@ -5226,39 +5289,34 @@ function Table(store, fieldRenderer, layout, options) {
 			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));
+			watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, options?.signal);
 			break;
 		}
 		case 'none':
 	}
-	const start = thead;
-	/** @type {Map<Store, [HTMLTableSectionElement, () => void]>} */
+	/** @type {Map<Store, [HTMLTableSectionElement, AbortController]>} */
 	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) {
+	watch(() => store.children, 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, {
+				const ac = new AbortController();
+				const el = Line(child, fieldRenderer, layout, {
 					columns,
+					deletable: new Signal.Computed(() => !store.readonly && !store.disabled && child.removable),
 					remove: remove.bind(null, child),
 					dragenter: dragenter.bind(null, child),
 					dragstart: dragstart.bind(null, child),
 					dragend,
-					deletable,
-				}, options);
+				}, {
+					...options,
+					signal: options?.signal ? AbortSignal.any([options?.signal, ac.signal]) : ac.signal,
+				});
 				table.insertBefore(el, nextNode);
-				seMap.set(child, [el, destroy]);
+				seMap.set(child, [el, ac]);
 				continue;
 			}
 			oldSeMap.delete(child);
@@ -5269,29 +5327,25 @@ function Table(store, fieldRenderer, layout, options) {
 			}
 			table.insertBefore(old[0], nextNode);
 		}
-		destroyMap(oldSeMap);
-	}, true);
-
-	return [table, () => {
-		start.remove();
-		thead.remove();
-		destroyMap(seMap);
-		childrenResult();
-		for (const destroy of destroyList) {
-			destroy();
+		for (const [el, ac] of oldSeMap.values()) {
+			el.remove();
+			ac.abort();
 		}
-	}];
+	}, true, options?.signal);
+
+	return table;
 }
 
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  *
  * @param {HTMLElement} root
- * @param {StoreLayout.Grid?} [layout]
+ * @param {StoreLayout.Grid} layout
+ * @returns {void}
  */
 function bindGrid(root, layout) {
-	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
+	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout;
 	root.classList.add(`NeeloongForm-item-grid`);
 	if (colStart && colEnd) {
 		root.style.gridColumn = `${colStart} / ${colEnd}`;
@@ -5307,226 +5361,126 @@ function bindGrid(root, layout) {
 	} else if (rowSpan) {
 		root.style.gridRow = `span ${rowSpan}`;
 	}
-
-
-
-
 }
 
-/** @import { CellValues } from './createCell.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.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}
+ * @typedef {object} CellValues
+ * @property {string?} [label]
+ * @property {string?} [description]
+ * @property {string?} [error]
+ * @property {boolean?} [required]
  */
-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 {AbortSignal | null | undefined} signal
  * @param {CellValues} [values]
- * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ * @returns {[HTMLDivElement, HTMLDivElement]}
  */
-function createStdCell(values) {
-	/** @type {(() => void)[]} */
-	const destroyList = [];
+function createStdCell(signal, values) {
 	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 || ''));
+	label.classList.add('NeeloongForm-item-label');
+	effect(() => label.innerText = values?.label || '', signal);
 
 	const content = root.appendChild(document.createElement('div'));
-	content.className = 'NeeloongForm-item-content';
+	content.classList.add('NeeloongForm-item-content');
 
 	const description = root.appendChild(document.createElement('div'));
-	description.className = 'NeeloongForm-item-description';
-	destroyList.push(effect(() => description.innerText = values?.description || ''));
+	description.classList.add('NeeloongForm-item-description');
+	effect(() => description.innerText = values?.description || '', signal);
 	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];
+	error.classList.add('NeeloongForm-item-error');
+	effect(() => error.innerText = values?.error || '', signal);
+	return [root, content];
 
 
 }
 
-/** @import { CellValues } from './createCell.mjs' */
-
-/**
- *
- * @param {CellValues} [values]
- * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
- */
-function createCollapseCell(values) {
-	/** @type {(() => void)[]} */
-	const destroyList = [];
-	const root = document.createElement('details');
-	root.className = 'NeeloongForm-item';
-	destroyList.push(bindRequired(root, values));
-
-	root.open = true;
-	const summary = root.appendChild(document.createElement('summary'));
-	destroyList.push(effect(() => summary.innerText = values?.label || ''));
-	destroyList.push(bindErrored(root, values));
-
-	return [root, () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	}, root, destroyList];
-
-
-}
-
-/** @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 {AbortSignal | null | undefined} signal
+ * @param {StoreLayout.Grid} layout
  * @param {CellValues} [values]
  * @param {StoreLayout.Grid['cell']?} [defCell]
  * @param {boolean?} [blockOnly]
- * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ * @returns {[HTMLElement, HTMLElement]}
  */
-function createCell(layout, values, defCell, blockOnly) {
+function createCell(signal, layout, values, defCell, blockOnly) {
 	/**
 	 *
 	 * @param {string?} [cellType]
-	 * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]?}
+	 * @returns {[HTMLElement, HTMLElement]?}
 	 */
 	function create(cellType) {
 		if (!cellType) { return null; }
 		if (!blockOnly) {
 			switch (cellType) {
 				case 'inline': {
-					const result = createStdCell(values);
-					bindGrid(result[0], layout);
-					return result;
+					const [root, content] = createStdCell(signal, values);
+					bindGrid(root, layout);
+					return [root, content];
 				}
 				case 'base': {
-					const result = createNullCell(values);
-					bindGrid(result[0], layout);
-					return result;
+					const root = document.createElement('div');
+					bindGrid(root, layout);
+					return [root, root];
 				}
 			}
 		}
 		switch (cellType) {
-			case 'block': return createStdCell(values);
-			case 'fieldset': return createFieldsetCell(values);
-			case 'collapse': return createCollapseCell(values);
+			case 'block': return createStdCell(signal, values);
+			case 'fieldset': {
+				const root = document.createElement('fieldset');
+				const legend = root.appendChild(document.createElement('legend'));
+				effect(() => legend.innerText = values?.label || '', signal);
+				return [root, root];
+			}
+			case 'collapse': {
+				const root = document.createElement('details');
+				root.open = true;
+				const summary = root.appendChild(document.createElement('summary'));
+				effect(() => summary.innerText = values?.label || '', signal);
+				return [root, root];
+			}
 		}
 		return null;
 	}
-	return create(layout?.cell) || create(defCell) || createStdCell(values);
+	const [root, content] = create(layout.cell) || create(defCell) || createStdCell(signal, values);
+	root.classList.add('NeeloongForm-item');
+	effect(() => {
+		if (values?.error) {
+			root.classList.add('NeeloongForm-item-errored');
+		} else {
+			root.classList.remove('NeeloongForm-item-errored');
+		}
+	}, signal);
+	effect(() => {
+		if (values?.required) {
+			root.classList.add('NeeloongForm-item-required');
+		} else {
+			root.classList.remove('NeeloongForm-item-required');
+		}
+	}, signal);
+	return [root, content];
 }
 
 /** @import { Store } from '../Store/index.mjs' */
 /** @import { State } from './Tree.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
  * @param {Signal.State<Store<any, any>?>} currentStore 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
- * @param {State} initState
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
+ * @param {Signal.State<State>} state
  * @param {object} option 
- * @param {StoreLayout.Column[]} option.columns 
+ * @param {{get(): boolean}} option.addable 
+ * @param {StoreLayout.Column<T>[]} option.columns 
  * @param {() => void} option.remove 
  * @param {(el: HTMLElement) => () => void} option.dragenter 
  * @param {() => void} option.dragstart 
@@ -5536,15 +5490,13 @@ function createCell(layout, values, defCell, blockOnly) {
  * @param {() => void} option.addNode 
  * @param {(store: Store<any, any>) => () => void} option.createDetails 
  * @param {StoreLayout.Options?} options
-
- * @returns {[HTMLElement, () => void, (s: State) => void]}
+ * @returns {HTMLElement}
  */
 function TreeLine(
-	store, currentStore, fieldRenderer, layout, initState, {
-		columns,
-		remove, dragenter, dragstart, dragend, deletable, addNode, drop, createDetails,
+	store, currentStore, fieldRenderer, layout, state, {
+		columns, addable, deletable,
+		remove, dragenter, dragstart, dragend, 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; }
@@ -5552,23 +5504,21 @@ function TreeLine(
 	});
 	root.addEventListener('dragend', dragend);
 
-	/** @type {(() => void)[]} */
-	const destroyList = [];
 	root.classList.add('NeeloongForm-tree-item');
 
-	destroyList.push(effect(() => {
+	effect(() => {
 		if (currentStore.get() === store) {
 			root.classList.add('NeeloongForm-tree-current');
 		} else {
 			root.classList.remove('NeeloongForm-tree-current');
 		}
-	}));
-	destroyList.push(effect(() => {
+	}, options?.signal);
+	effect(() => {
 		const level = state.get().level;
 		root.style.setProperty(`--NeeloongForm-tree-level`, `${level}`);
-	}));
+	}, options?.signal);
 
-	destroyList.push(effect(() => { root.hidden = state.get().hidden; }));
+	effect(() => { root.hidden = state.get().hidden; }, options?.signal);
 
 
 	/** @type {HTMLButtonElement[]} */
@@ -5606,9 +5556,9 @@ function TreeLine(
 		}
 		close = createDetails(store);
 	}
-	const moveStart = layout?.mainMethod === 'move' ? pointerdown : null;
-	const click = moveStart ? null : layout?.mainMethod === 'collapse' ? switchCollapsed
-		: layout?.mainMethod === 'trigger' ? trigger : open;
+	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');
@@ -5621,9 +5571,9 @@ function TreeLine(
 	dropChildren.addEventListener('dragover', (e) => e.preventDefault());
 	dropFront.addEventListener('drop', () => drop());
 	dropChildren.addEventListener('drop', () => drop(true));
-	destroyList.push(effect(() => {
+	effect(() => {
 		dropFront.hidden = dropChildren.hidden = !state.get().droppable;
-	}));
+	}, options?.signal);
 
 	let dragleave = () => { };
 	dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
@@ -5631,7 +5581,8 @@ function TreeLine(
 	dropFront.addEventListener('dragleave', () => dragleave());
 	dropChildren.addEventListener('dragleave', () => dragleave());
 
-	for (const { actions, pattern, placeholder, width, field } of columns) {
+	for (const column of columns) {
+		const { actions, pattern, placeholder, width, field } = column;
 		if (!actions?.length) {
 			const td = line.appendChild(document.createElement('div'));
 			td.classList.add('NeeloongForm-tree-cell');
@@ -5640,9 +5591,8 @@ function TreeLine(
 			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);
+				const el = FormFieldInline(child, fieldRenderer, column, { ...options, editable: false });
+				if (el) { td.appendChild(el); }
 				continue;
 			}
 			if (typeof placeholder === 'number') {
@@ -5680,9 +5630,9 @@ function TreeLine(
 					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 => {
+					watch(() => store.readonly || store.disabled, disabled => {
 						move.disabled = disabled;
-					}, true));
+					}, true, options.signal);
 					continue;
 				}
 				case 'add': {
@@ -5690,9 +5640,9 @@ function TreeLine(
 					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 => {
+					watch(() => !addable.get(), disabled => {
 						move.disabled = disabled;
-					}, true));
+					}, true, options.signal);
 					continue;
 				}
 				case 'remove': {
@@ -5700,9 +5650,9 @@ function TreeLine(
 					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 => {
+					watch(() => !deletable.get(), disabled => {
 						del.disabled = disabled;
-					}, true));
+					}, true, options.signal);
 					continue;
 				}
 				case 'serial': {
@@ -5713,7 +5663,7 @@ function TreeLine(
 			}
 		}
 	}
-	destroyList.push(effect(() => {
+	effect(() => {
 		const s = state.get();
 		if (!s.hasChildren) {
 			for (const btn of collapseList) {
@@ -5734,17 +5684,13 @@ function TreeLine(
 				btn.disabled = false;
 			}
 		}
-	}));
+	}, options?.signal);
 
-	return [root, () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	}, s => state.set(s)];
+	return root;
 }
 
 /** @import { Store, ArrayStore } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 const verticalWritingMode = new Set([
 	'vertical-lr', 'vertical-rl', 'sideways-lr', 'sideways-rl',
@@ -5850,22 +5796,24 @@ function createState(store, states, drag, levelKey, index) {
 }
 /**
  *
+ * @template T
  * @param {ArrayStore} store
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
- * @returns {[HTMLElement, () => void]}
+ * @returns {HTMLElement?}
  */
 function Tree(store, fieldRenderer, layout, options) {
-	const headerColumns = layout?.columns;
+	if (options?.signal?.aborted) { return null; }
+	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[]} */
+	/** @type {StoreLayout.Column<T>[]} */
 	let columns = [];
 	if (Array.isArray(headerColumns)) {
 		const map = new Map(fieldList.map(v => [v.field, v]));
-		/** @type {(StoreLayout.Column | null)[]} */
+		/** @type {(StoreLayout.Column<T> | null)[]} */
 		const allColumns = headerColumns.map(v => {
 			if (!v) { return null; }
 			if (typeof v === 'number') { return { placeholder: v }; }
@@ -5898,7 +5846,7 @@ function Tree(store, fieldRenderer, layout, options) {
 			}
 			return null;
 		});
-		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
+		columns = /** @type {StoreLayout.Column<T>[]} */(allColumns.filter(Boolean));
 	}
 	if (!columns.length) {
 		columns = [
@@ -5910,13 +5858,13 @@ function Tree(store, fieldRenderer, layout, options) {
 
 
 	const root = document.createElement('div');
-	root.className = 'NeeloongForm-tree';
+	root.classList.add('NeeloongForm-tree');
 	const main = root.appendChild(document.createElement('div'));
-	main.className = 'NeeloongForm-tree-main';
+	main.classList.add('NeeloongForm-tree-main');
 	const splitter = root.appendChild(document.createElement('div'));
-	splitter.className = 'NeeloongForm-tree-splitter';
+	splitter.classList.add('NeeloongForm-tree-splitter');
 	const details = root.appendChild(document.createElement('div'));
-	details.className = 'NeeloongForm-tree-details';
+	details.classList.add('NeeloongForm-tree-details');
 	splitter.hidden = true;
 	details.hidden = true;
 	/** @type {number?} */
@@ -5980,9 +5928,8 @@ function Tree(store, fieldRenderer, layout, options) {
 	});
 
 
-	/** @type {(() => void)[]} */
-	const destroyList = [];
-	let destroyDetails = () => { };
+	/** @type {AbortController?} */
+	let detailAbortController = null;
 	const detailsStore = new Signal.State(/** @type{Store<any, any>?}*/(null));
 	/**
 	 * 
@@ -5990,32 +5937,42 @@ function Tree(store, fieldRenderer, layout, options) {
 	 * @returns 
 	 */
 	function createDetails(store) {
-		if (detailsStore.get() === store) { return destroyDetails; }
-		destroyDetails();
+		if (options?.signal?.aborted) { return () => { }; }
+		if (detailsStore.get() === store && detailAbortController) {
+			const ac = detailAbortController;
+			return () => { ac.abort(); };
+		}
+		detailAbortController?.abort();
 		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;
+		const ac = new AbortController();
+		detailAbortController = ac;
+		const signal = options?.signal ? AbortSignal.any([options?.signal, ac.signal]) : ac.signal;
+		const form = Form(store, fieldRenderer, layout, {
+			...options,
+			signal: options?.signal ? AbortSignal.any([options?.signal, signal]) : signal,
+		});
+		signal.addEventListener('abort', () => {
 			detailsStore.set(null);
-			form.remove();
-			destroy();
 			stopMove();
-			splitter.hidden = true;
-			details.hidden = true;
-		};
-		return destroyDetails;
+		}, { once: true });
+		if (form) {
+			details.appendChild(form);
+			details.hidden = false;
+			splitter.hidden = false;
+			signal.addEventListener('abort', () => {
+				form.remove();
+				splitter.hidden = true;
+				details.hidden = true;
+			}, { once: true });
+
+		}
+		return () => { ac.abort(); };
 
 	}
 
 
-	const levelKey = layout?.levelKey || 'level';
-	const addable = new Signal.Computed(() => store.addable);
-	const deletable = { get: () => Boolean(options?.editable) };
+	const levelKey = layout.levelKey || 'level';
+	const addable = new Signal.Computed(() => !store.readonly && !store.disabled && store.addable);
 	/**
 	 * 
 	 * @param {number} parent 
@@ -6144,7 +6101,7 @@ function Tree(store, fieldRenderer, layout, options) {
 		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));
+		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, options.signal);
 	}
 	const start = main.appendChild(document.createComment(''));
 	if (options?.editable) {
@@ -6164,21 +6121,13 @@ function Tree(store, fieldRenderer, layout, options) {
 		dropFront.addEventListener('drop', () => drop());
 
 
-		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, options.signal);
 	}
-	/** @type {Map<Store, [HTMLElement, () => void, (s: State) => void]>} */
+	/** @type {Map<Store, [tbody: HTMLElement, AbortController, (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();
-		}
-
-	}
 	/** @type {State[]} */
 	const states = [];
-	const childrenResult = watch(() => store.children, function render(children) {
+	watch(() => store.children, children => {
 		let nextNode = start.nextSibling;
 		const oldSeMap = seMap;
 		seMap = new Map();
@@ -6193,19 +6142,24 @@ function Tree(store, fieldRenderer, layout, options) {
 			const state = states[i];
 			const old = oldSeMap.get(child);
 			if (!old) {
-				const [el, destroy, setState] = TreeLine(child, detailsStore, fieldRenderer, layout, state, {
-					columns,
+				const elState = new Signal.State(state);
+				const ac = new AbortController();
+				const el = TreeLine(child, detailsStore, fieldRenderer, layout, elState, {
+					columns, addable,
+					deletable: new Signal.Computed(() => !store.readonly && !store.disabled && child.removable),
 					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);
+				}, {
+					...options,
+					signal: options?.signal ? AbortSignal.any([options?.signal, ac.signal]) : ac.signal,
+				});
 				main.insertBefore(el, nextNode);
-				seMap.set(child, [el, destroy, setState]);
+				seMap.set(child, [el, ac, s => elState.set(s)]);
 				continue;
 			}
 			oldSeMap.delete(child);
@@ -6218,103 +6172,104 @@ function Tree(store, fieldRenderer, layout, options) {
 			main.insertBefore(old[0], nextNode);
 		}
 		states.splice(childrenLength);
-		destroyMap(oldSeMap);
-	}, true);
+			for (const [el, ac] of oldSeMap.values()) {
+				el.remove();
+				ac.abort();
+			}
+	}, true, options?.signal);
 
-	return [root, () => {
-		start.remove();
-		destroyMap(seMap);
-		childrenResult();
-		destroyDetails?.();
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	}];
+	return root;
 }
 
 /**
  * 
+ * @template T
  * @param {string | ParentNode} html 
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Options?} options
- * @param {StoreLayout.Field?} layout
- * @returns 
+ * @param {StoreLayout.Field<T>} layout
+ * @returns {ParentNode}
  */
 function Html(html, store, fieldRenderer, options, layout) {
 	const htmlContent = getHtmlContent(html);
-	const destroy = renderHtml(store, fieldRenderer, htmlContent, options, layout);
-	return [htmlContent, destroy];
+	renderHtml(store, fieldRenderer, htmlContent, options, layout);
+	return htmlContent;
 }
-
 /**
  * 
- * @param {StoreLayout.Field['arrayStyle']?} arrayStyle 
+ * @template T
+ * @param {StoreLayout.Field<T>['arrayStyle']?} arrayStyle 
+ * @param {ArrayStore} store
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
+ * @param {StoreLayout.Options?} options
+ * @returns {HTMLElement?}
  */
-function getArrayCell(arrayStyle) {
-	switch(arrayStyle) {
-		case 'tree': return Tree;
-		default: return Table;
+function renderArrayCell(arrayStyle, store, fieldRenderer, layout, options) {
+	switch (arrayStyle) {
+		case 'tree': return Tree(store, fieldRenderer, layout, options);
+		default: return Table(store, fieldRenderer, layout, options);
 	}
 
 }
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
- * @returns {[ParentNode, () => void]}
+ * @returns {ParentNode}
  */
 function FormField(store, fieldRenderer, layout, options) {
 	const { type } = store;
-	const isObject = type && typeof type === 'object';
-	const html = layout?.html;
+	const isObject = Boolean(type && typeof type === 'object');
+	const html = layout.html;
 	/** @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));
+	const [root, content] = createCell(options?.signal, layout, store, cellType, isObject);
+	effect(() => root.hidden = store.hidden, options?.signal);
 
+	/** @type {false | ParentNode | null} */
 	const r =
 		html && Html(html, store, fieldRenderer, options, layout)
-		|| fieldRenderer(store, options)
-		|| store instanceof ArrayStore && getArrayCell(layout?.arrayStyle)(store, fieldRenderer, layout, options)
+		|| fieldRenderer(store, layout.renderer, options)
+		|| store instanceof ArrayStore && renderArrayCell(layout.arrayStyle, store, fieldRenderer, layout, options)
 		|| isObject && Form(store, fieldRenderer, layout, options);
 	if (r) {
-		const [el, destroy] = r;
-		content.appendChild(el);
-		destroyList.push(destroy);
+		content.appendChild(r);
 	}
-	return [root, destroy];
+	return root;
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  *
  * @param {Store<any, any>} store
  * @param {StoreLayout.Button} layout
  * @param {StoreLayout.Options?} options
- * @returns {[ParentNode, () => void]}
+ * @returns {ParentNode}
  */
 function FormButton(store, layout, options) {
-	const [root, destroy, content, destroyList] = createCell(layout, store);
+	const [root, content] = createCell(options?.signal, layout, store);
 	const button = document.createElement('button');
-	destroyList.push(() => {
+	effect(() => {
 		const t = layout.text;
 		const text = typeof t === 'function' ? t(store, options) : t;
 		button.innerText = text ?? '';
-	});
-	destroyList.push(() => {
+	}, options?.signal);
+	effect(() => {
 		const d = layout.disabled;
 		const disabled = typeof d === 'function' ? d(store, options) : d;
 		button.disabled = Boolean(disabled);
-	});
-	button.className = 'NeeloongForm-item-button';
+	}, options?.signal);
+	button.classList.add('NeeloongForm-item-button');
 	content.appendChild(button);
 	const click = layout.click;
 	if (typeof click === 'function') {
@@ -6325,40 +6280,42 @@ function FormButton(store, layout, options) {
 			button.addEventListener('click', e => call(click, e, store, options));
 		}
 	}
-	return [root, destroy];
+	return root;
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  *
+ * @template T
  * @param {Store<any, any>} store
- * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Html} layout
  * @param {StoreLayout.Options?} options
- * @returns {[ParentNode, () => void]}
+ * @returns {ParentNode?}
  */
 function FormHtml(store, fieldRenderer, layout, options) {
-	const [root, destroy, content, destroyList] = createCell(layout, store);
 	const html = layout.html;
-	if (!html) { return [root, destroy]; }
+	if (!html) { return null; }
+	const [root, content] = createCell(options?.signal, layout, store);
 	const htmlContent = getHtmlContent(html);
-	destroyList.push(renderHtml(store, fieldRenderer, htmlContent, options, layout));
+	renderHtml(store, fieldRenderer, htmlContent, options, layout);
 	content.appendChild(htmlContent);
-	return [root, destroy];
+	return root;
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout.Item} item
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Item<T>} item
  * @param {StoreLayout.Options?} options
- * @returns {[ParentNode, () => void]?}
+ * @returns {ParentNode?}
  */
 function FormItem(store, fieldRenderer, item, options) {
 	if (item.type === 'button') {
@@ -6367,7 +6324,9 @@ function FormItem(store, fieldRenderer, item, options) {
 	if (item.type === 'html') {
 		return FormHtml(store, fieldRenderer, item, options);
 	}
-	const fieldStore = store.child(item.field);
+	const field = item.field;
+	if (!field) { return null; }
+	const fieldStore = store.child(field);
 	if (fieldStore) {
 		return FormField(fieldStore, fieldRenderer, item, options);
 	}
@@ -6376,64 +6335,62 @@ function FormItem(store, fieldRenderer, item, options) {
 
 /**
  * 
+ * @template T
  * @param {Store<any, any>} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
- * @param {StoreLayout?} layout
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
  * @param {HTMLElement} [parent]
- * @returns {[HTMLElement, () => void]}
+ * @returns {HTMLElement?}
  */
 function Form(store, fieldRenderer, layout, options, parent) {
+	if (options?.signal?.aborted) { return null; }
 	const root = parent instanceof HTMLElement ? parent : document.createElement('div');
-	root.className = 'NeeloongForm';
-	/** @type {(() => void)[]} */
-	const destroyList = [];
-	const fieldLayouts = layout?.fields;
-	if (fieldLayouts) {
+	root.classList.add('NeeloongForm');
+	const fieldLayouts = layout.fields || store.layout.fields;
+	if (fieldLayouts?.length) {
 		for (const fieldTemplate of fieldLayouts) {
-			const result = FormItem(store, fieldRenderer, fieldTemplate, options);
-			if (!result) { continue; }
-			const [el, destroy] = result;
-			root.appendChild(el);
-			destroyList.push(destroy);
+			const el = FormItem(store, fieldRenderer, fieldTemplate, options);
+			if (el) { root.appendChild(el); }
 		}
 	} else {
 		const fields = [...store].map(([, v]) => v);
 		for (const field of fields) {
-			const [el, destroy] = FormField(field, fieldRenderer, null, options);
-			root.appendChild(el);
-			destroyList.push(destroy);
+			const el = FormField(field, fieldRenderer, field.layout, options);
+			if (el) { root.appendChild(el); }
 		}
 	}
-	return [root, () => {
-		for (const destroy of destroyList) {
-			destroy();
-		}
-	}];
+	return root;
 
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
+ * @template T
  * @param {Store} store 
- * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {HTMLElement} root 
- * @param {StoreLayout?} [layout] 
+ * @param {StoreLayout<T>} layout 
  * @param {StoreLayout.Options & {clone?: boolean} | null} [options]
+ * @returns {void}
  */
 function renderStore(store, fieldRenderer, root, layout, options) {
-	const html = layout?.html;
-	if (html) {
-		const content = getHtmlContent(html);
-		const destroy = renderHtml(store, fieldRenderer, content, options || null, layout);
-		root.appendChild(content);
-		return destroy;
+	if (options?.signal?.aborted) { return; }
+	const storeLayout = layout || store.layout;
+	const html = storeLayout.html;
+	if (!html) {
+		Form(store, fieldRenderer, storeLayout, options || null, root);
+		return;
 	}
-	const s = Form(store, fieldRenderer, layout || null, options || null, root);
-	return s[1];
+	const content = getHtmlContent(html);
+	renderHtml(store, fieldRenderer, content, options || null, storeLayout);
+	root.appendChild(content);
+	options?.signal?.addEventListener('abort', () => {
+		root.removeChild(content);
+	}, { once: true });
 }
 
 export { ArrayStore, index as Layout, ObjectStore, Store, effect, render, renderStore, watch };