@neeloong/form 0.22.0 → 0.23.0

package/index.full.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.22.0
+* @neeloong/form v0.23.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -2892,13 +2892,36 @@
 
   /**
    * 相应式执行
+   * @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 exports.Signal.subtle.Watcher(() => {
-  		if (!needsEnqueue) { return }
+  		if (!needsEnqueue) { return; }
   		needsEnqueue = false;
   		queueMicrotask(() => {
   			needsEnqueue = true;
@@ -2912,19 +2935,54 @@
 
   	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;
@@ -2939,7 +2997,7 @@
   		if (Object.is(val, value)) { return; }
   		value = val;
   		callback(val);
-  	});
+  	}, signal);
   }
 
   const bindable = {
@@ -5251,67 +5309,65 @@
   /** @import { Store } from '../Store/index.mjs' */
   /** @import { StoreLayout } from '../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; }
   			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') {
@@ -5321,7 +5377,7 @@
   				button.appendChild(n);
   			}
   			node.replaceWith(button);
-  			return () => { };
+  			return;
   		}
   		const name = node.getAttribute('nl-form-field');
   		if (name) {
@@ -5330,32 +5386,35 @@
 
   			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); }
+  			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;
@@ -5372,22 +5431,26 @@
   				}
   			};
 
-  			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);
@@ -5399,13 +5462,13 @@
   					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) {
@@ -5448,11 +5511,11 @@
   				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; }
@@ -5464,15 +5527,9 @@
   	}
   	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();
-  		}
-  	};
-
   }
 
   /**
@@ -5494,14 +5551,16 @@
 
   /**
    * 
+   * @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 FormFieldInline(store, fieldRenderer, layout, options) {
-  	return fieldRenderer(store, options) || [document.createElement('div'), () => { }];
+  	if (options?.signal?.aborted) { return null; }
+  	return fieldRenderer(store, layout?.renderer, options);
   }
 
   /** @import { Store } from '../Store/index.mjs' */
@@ -5509,9 +5568,10 @@
 
   /**
    * 
+   * @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 {() => void} option.remove 
@@ -5520,8 +5580,7 @@
    * @param {() => void} option.dragend 
    * @param {{get(): boolean}} option.deletable 
    * @param {StoreLayout.Options?} options
-
-   * @returns {[HTMLTableSectionElement, () => void]}
+   * @returns {HTMLTableSectionElement}
    */
   function Line(store, fieldRenderer, layout, {
   	columns,
@@ -5538,38 +5597,34 @@
   	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');
+  					}
   				}
-  			}
-  		};
-
+  			};
+  		}
   	}
 
   	/**
@@ -5597,9 +5652,8 @@
   			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, null, options);
+  				if (el) { td.appendChild(el); }
   			}
   			continue;
   		}
@@ -5619,9 +5673,9 @@
   					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': {
@@ -5629,9 +5683,9 @@
   					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() || store.readonly || store.disabled, disabled => {
   						del.disabled = disabled;
-  					}, true));
+  					}, true, options.signal);
   					continue;
   				}
   				case 'serial': {
@@ -5643,11 +5697,7 @@
   		}
   	}
 
-  	return [root, () => {
-  		for (const destroy of destroyList) {
-  			destroy();
-  		}
-  	}];
+  	return root;
   }
 
   /** @import { Store, ArrayStore } from '../Store/index.mjs' */
@@ -5655,16 +5705,16 @@
 
   /**
    * 
+   * @param {AbortSignal | null | undefined} signal 
    * @param {HTMLElement} parent 
    * @param {StoreLayout.Column[]} 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}`); }
@@ -5676,23 +5726,20 @@
   		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) {
+  	if (options?.signal?.aborted) { return null; }
   	const headerColumns = layout?.columns;
   	const fieldList = Object.entries(store.type || {})
   		.filter(([k, v]) => typeof v?.type !== 'object')
@@ -5743,7 +5790,7 @@
   	}
 
   	const table = document.createElement('table');
-  	table.className = 'NeeloongForm-table';
+  	table.classList.add('NeeloongForm-table');
   	const thead = table.appendChild(document.createElement('thead'));
 
   	const addable = new exports.Signal.Computed(() => store.addable);
@@ -5784,15 +5831,13 @@
   		dragRow = -1;
 
   	}
-  	/** @type {(() => void)[]} */
-  	const destroyList = [];
-  	destroyList.push(renderHead(thead, columns, add, addable, Boolean(options?.editable)));
+  	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': {
@@ -5804,39 +5849,34 @@
   			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,
   					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);
@@ -5847,18 +5887,13 @@
   			}
   			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' */
@@ -5867,6 +5902,7 @@
    *
    * @param {HTMLElement} root
    * @param {StoreLayout.Grid?} [layout]
+   * @returns {void}
    */
   function bindGrid(root, layout) {
   	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
@@ -5885,211 +5921,109 @@
   	} 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');
-  		}
-  	});
-  }
+  /** @import { StoreLayout } from '../types.mjs' */
 
   /**
-   *
-   * @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 {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' */
@@ -6098,11 +6032,12 @@
 
   /**
    * 
+   * @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 {() => void} option.remove 
@@ -6114,15 +6049,13 @@
    * @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, {
+  	store, currentStore, fieldRenderer, layout, state, {
   		columns,
   		remove, dragenter, dragstart, dragend, deletable, addNode, drop, createDetails,
   	}, options) {
-  	const state = new exports.Signal.State(initState);
   	const root = document.createElement('div');
   	root.addEventListener('dragstart', (event) => {
   		if (event.target !== event.currentTarget) { return; }
@@ -6130,23 +6063,21 @@
   	});
   	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[]} */
@@ -6199,9 +6130,9 @@
   	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));
@@ -6218,9 +6149,8 @@
   			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, null, { ...options, editable: false });
+  				if (el) { td.appendChild(el); }
   				continue;
   			}
   			if (typeof placeholder === 'number') {
@@ -6258,9 +6188,9 @@
   					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': {
@@ -6268,9 +6198,9 @@
   					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(() => store.readonly || store.disabled, disabled => {
   						move.disabled = disabled;
-  					}, true));
+  					}, true, options.signal);
   					continue;
   				}
   				case 'remove': {
@@ -6278,9 +6208,9 @@
   					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() || store.readonly || store.disabled, disabled => {
   						del.disabled = disabled;
-  					}, true));
+  					}, true, options.signal);
   					continue;
   				}
   				case 'serial': {
@@ -6291,7 +6221,7 @@
   			}
   		}
   	}
-  	destroyList.push(effect(() => {
+  	effect(() => {
   		const s = state.get();
   		if (!s.hasChildren) {
   			for (const btn of collapseList) {
@@ -6312,13 +6242,9 @@
   				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' */
@@ -6428,13 +6354,15 @@
   }
   /**
    *
+   * @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) {
+  	if (options?.signal?.aborted) { return null; }
   	const headerColumns = layout?.columns;
   	const fieldList = Object.entries(store.type || {})
   		.filter(([k, v]) => typeof v?.type !== 'object')
@@ -6488,13 +6416,13 @@
 
 
   	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?} */
@@ -6558,9 +6486,8 @@
   	});
 
 
-  	/** @type {(() => void)[]} */
-  	const destroyList = [];
-  	let destroyDetails = () => { };
+  	/** @type {AbortController?} */
+  	let detailAbortController = null;
   	const detailsStore = new exports.Signal.State(/** @type{Store<any, any>?}*/(null));
   	/**
   	 * 
@@ -6568,25 +6495,36 @@
   	 * @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(); };
 
   	}
 
@@ -6722,7 +6660,7 @@
   		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) {
@@ -6742,21 +6680,13 @@
   		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();
@@ -6771,7 +6701,9 @@
   			const state = states[i];
   			const old = oldSeMap.get(child);
   			if (!old) {
-  				const [el, destroy, setState] = TreeLine(child, detailsStore, fieldRenderer, layout, state, {
+  				const elState = new exports.Signal.State(state);
+  				const ac = new AbortController();
+  				const el = TreeLine(child, detailsStore, fieldRenderer, layout, elState, {
   					columns,
   					remove: remove.bind(null, child),
   					dragenter,
@@ -6781,9 +6713,12 @@
   					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);
@@ -6796,77 +6731,78 @@
   			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 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' */
@@ -6877,22 +6813,22 @@
    * @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') {
@@ -6903,7 +6839,7 @@
   			button.addEventListener('click', e => call(click, e, store, options));
   		}
   	}
-  	return [root, destroy];
+  	return root;
   }
 
   /** @import { Store } from '../Store/index.mjs' */
@@ -6911,20 +6847,21 @@
 
   /**
    *
+   * @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' */
@@ -6932,11 +6869,12 @@
 
   /**
    * 
+   * @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') {
@@ -6954,40 +6892,32 @@
 
   /**
    * 
+   * @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 = [];
+  	root.classList.add('NeeloongForm');
   	const fieldLayouts = layout?.fields;
   	if (fieldLayouts) {
   		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, null, options);
+  			if (el) { root.appendChild(el); }
   		}
   	}
-  	return [root, () => {
-  		for (const destroy of destroyList) {
-  			destroy();
-  		}
-  	}];
+  	return root;
 
   }
 
@@ -6996,22 +6926,27 @@
 
   /**
    * 
+   * @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) {
+  	if (options?.signal?.aborted) { return; }
   	const html = layout?.html;
-  	if (html) {
-  		const content = getHtmlContent(html);
-  		const destroy = renderHtml(store, fieldRenderer, content, options || null, layout);
-  		root.appendChild(content);
-  		return destroy;
-  	}
-  	const s = Form(store, fieldRenderer, layout || null, options || null, root);
-  	return s[1];
+  	if (!html) {
+  		Form(store, fieldRenderer, layout || null, options || null, root);
+  		return;
+  	}
+  	const content = getHtmlContent(html);
+  	renderHtml(store, fieldRenderer, content, options || null, layout);
+  	root.appendChild(content);
+  	options?.signal?.addEventListener('abort', () => {
+  		root.removeChild(content);
+  	}, { once: true });
   }
 
   exports.ArrayStore = ArrayStore;