@neeloong/form 0.24.0 → 0.26.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.24.0
+* @neeloong/form v0.26.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -145,7 +145,8 @@ let ArrayStoreClass = null;
 let TypeStores = Object.create(null);
 /**
  * @template [M=any]
- * @param {Schema.Field<M>} schema
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @param {Schema.Field<M, S>} schema
  * @param {object} [options] 
  * @param {Store?} [options.parent]
  * @param {string | number | null} [options.index] 
@@ -299,6 +300,7 @@ function makeDefault(store, def) {
  * 管理单个表单字段的状态和行为
  * @template [T=any]
  * @template [M=any]
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
  */
 class Store {
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
@@ -341,7 +343,8 @@ class Store {
 	/**
 	 * 从数据结构模式创建存储
 	 * @template [M=any]
-	 * @param {Schema<M>} schema 数据结构模式
+	 * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+	 * @param {Schema<M, S>} schema 数据结构模式
 	 * @param {object} [options] 选项
 	 * @param {boolean} [options.new] 是否为新建环境
 	 */
@@ -365,9 +368,10 @@ class Store {
 	#ref = null;
 	get ref() { return this.#ref || createRef(this); }
 	/**
-	 * @param {Schema.Field<M>} schema 字段的 Schema 定义
+	 * @param {Schema.Field<M, S>} schema 字段的 Schema 定义
 	 * @param {object} [options] 可选配置
 	 * @param {Store?} [options.parent] 
+	 * @param {Partial<S>?} [options.states] 
 	 * @param {((store: Store, value?: any) => any) | object | number | string | boolean | null | undefined} [options.default]
 	 * @param {number | string | null} [options.index] 
 	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size] 
@@ -402,7 +406,7 @@ class Store {
 	 */
 	constructor(schema, {
 		null: isNull, ref, default: defaultValue,
-		setValue, convert, onUpdate,
+		setValue, convert, onUpdate, states,
 		validator, validators,
 		index, size, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly, removable,
@@ -480,6 +484,22 @@ class Store {
 
 		const validatorResult = createValidator(this, schema.validator, validator);
 
+
+		const schemaStates = schema.states;
+		this.#states = schemaStates ? Object.defineProperties(Object.create(null),
+			Object.fromEntries(
+				Object.entries(schemaStates).map(([k, { get, set, toState }]) => {
+					const state = new Signal.State(toState?.(states?.[k]));
+					const computed = new Signal.Computed(() => get(this, state));
+					return [k, {
+						configurable: true,
+						enumerable: true,
+						get() { return computed.get(); },
+						set(v) { return set?.(this, state, v); },
+					}];
+				})
+			)) : null;
+
 		const [changed, changedResult, cancelChange] = createAsyncValidator(this, schema.validators?.change, validators?.change);
 		const [blurred, blurredResult, cancelBlur] = createAsyncValidator(this, schema.validators?.blur, validators?.blur);
 		this.listen('change', () => { changed(); });
@@ -514,8 +534,11 @@ class Store {
 			this.listen(k, f);
 		}
 	}
+	/** @type {S?} */
+	#states;
+	get states() { return this.#states; }
 	/** @type {StoreLayout.Field<any>} */
-	#layout
+	#layout;
 	get layout() { return this.#layout; }
 	#createDefault;
 	/** @param {any} [value] @returns {any} */
@@ -691,9 +714,10 @@ class Store {
 	#selfMin;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#min;
+	/** @deprecated */
 	get selfMin() { return this.#selfMin.get(); }
 	set selfMin(v) { this.#selfMin.set(number(v)); }
-	/** 数值字段的最小值限制 */
+	/** @deprecated 数值字段的最小值限制 */
 	get min() { return this.#min.get(); }
 	set min(v) { this.#selfMin.set(number(v)); }
 
@@ -702,9 +726,10 @@ class Store {
 	#selfMax;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#max;
+	/** @deprecated */
 	get selfMax() { return this.#selfMax.get(); }
 	set selfMax(v) { this.#selfMax.set(number(v)); }
-	/** 数值字段的最大值限制 */
+	/** @deprecated 数值字段的最大值限制 */
 	get max() { return this.#max.get(); }
 	set max(v) { this.#selfMax.set(number(v)); }
 
@@ -713,9 +738,10 @@ class Store {
 	#selfStep;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#step;
+	/** @deprecated */
 	get selfStep() { return this.#selfStep.get(); }
 	set selfStep(v) { this.#selfStep.set(number(v)); }
-	/** 数值字段的步长 */
+	/** @deprecated 数值字段的步长 */
 	get step() { return this.#step.get(); }
 	set step(v) { this.#selfStep.set(number(v)); }
 
@@ -723,9 +749,10 @@ class Store {
 	#selfMinLength;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#minLength;
+	/** @deprecated */
 	get selfMinLength() { return this.#selfMinLength.get(); }
 	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
-	/** 最小长度 */
+	/** @deprecated 最小长度 */
 	get minLength() { return this.#minLength.get(); }
 	set minLength(v) { this.#selfMinLength.set(number(v)); }
 
@@ -733,9 +760,10 @@ class Store {
 	#selfMaxLength;
 	/** @readonly @type {Signal.Computed<number?>} */
 	#maxLength;
+	/** @deprecated */
 	get selfMaxLength() { return this.#selfMaxLength.get(); }
 	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
-	/** 最大长度 */
+	/** @deprecated 最大长度 */
 	get maxLength() { return this.#maxLength.get(); }
 	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
 
@@ -743,9 +771,10 @@ class Store {
 	#selfPattern;
 	/** @readonly @type {Signal.Computed<RegExp?>} */
 	#pattern;
+	/** @deprecated */
 	get selfPattern() { return this.#selfPattern.get(); }
 	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
-	/** 模式 */
+	/** @deprecated 模式 */
 	get pattern() { return this.#pattern.get(); }
 	set pattern(v) { this.#selfPattern.set(regex(v)); }
 
@@ -754,9 +783,10 @@ class Store {
 	#selfValues;
 	/** @readonly @type {Signal.Computed<(Schema.Value.Group | Schema.Value)[] | null>} */
 	#values;
+	/** @deprecated */
 	get selfValues() { return this.#selfValues.get(); }
 	set selfValues(v) { this.#selfValues.set(values(v)); }
-	/** 可选值列表 */
+	/** @deprecated 可选值列表 */
 	get values() { return this.#values.get(); }
 	set values(v) { this.#selfValues.set(values(v)); }
 
@@ -791,6 +821,40 @@ class Store {
 	#initValue = new Signal.State(/** @type {T?} */(null));
 	#value = new Signal.State(this.#initValue.get());
 
+	/**
+	 * @template [M=any]
+	 * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+	 * @param {Schema<M, S>} schema 数据结构模式
+	 */
+	bindObject(schema) {
+		const bindStores = this.#bindStores;
+		/** @type {Store[]} */
+		const list = [];
+		for (const [index, field] of Object.entries(schema)) {
+			const bindStore = create(field, {
+				index, parent: this,
+				/** @param {*} value @param {*} currentIndex @param {Store} store */
+				onUpdate: (value, currentIndex, store) => {
+					if (index !== currentIndex) { return; }
+					if (bindStores.has(store)) { return; }
+					const val = this.#value ?? null;
+					if (typeof val !== 'object' || Array.isArray(val)) { return }
+					// @ts-ignore
+					this.value = { ...val, [currentIndex]: value };
+				},
+			});
+			list.push(bindStore);
+			bindStores.set(bindStore, index);
+		}
+		this.#requestUpdate();
+		return () => {
+			for (const bindStore of list) {
+				bindStores.delete(bindStore);
+			}
+		};
+	}
+	/** @type {Map<Store, string>} */
+	#bindStores = new Map();
 
 	/** 内容是否已改变 */
 	get changed() { return !Object.is(this.#value.get(), this.#initValue.get()); }
@@ -837,6 +901,9 @@ class Store {
 			for (const [, field] of this) {
 				field.#reset(null, false);
 			}
+			for (const [field] of this.#bindStores) {
+				field.#reset(null, false);
+			}
 			this.#value.set(value);
 			this.#initValue.set(value);
 			this.#onUpdate?.(value, this.#index.get(), this);
@@ -847,6 +914,9 @@ class Store {
 		for (const [key, field] of this) {
 			newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
 		}
+		for (const [field, key] of this.#bindStores) {
+			newValues[key] = field.#reset(Object.hasOwn(newValues, key) ? newValues[key] : undefined, false);
+		}
 		this.#value.set(newValues);
 		this.#initValue.set(newValues);
 		this.#onUpdate?.(newValues, this.#index.get(), this);
@@ -888,6 +958,15 @@ class Store {
 				newValues[key] = newData;
 				updated = true;
 			}
+			for (const [field, key] of this.#bindStores) {
+				// @ts-ignore
+				const data = Object.hasOwn(val, key) ? val[key] : undefined;
+				const newData = field.#toUpdate(data);
+				if (Object.is(data, newData)) { continue; }
+				// @ts-ignore
+				newValues[key] = newData;
+				updated = true;
+			}
 			if (updated) {
 				val = newValues;
 				initValue = val;
@@ -904,7 +983,7 @@ class Store {
 	/**
 	 * 异步校验
 	 * @overload
-	 * @param {true} [path]
+	 * @param {true} [self]
 	 * @returns {Promise<string[] | null>}
 	 */
 	/**
@@ -927,6 +1006,7 @@ class Store {
 				});
 		}
 		const selfPath = Array.isArray(path) ? path : [];
+		if (this.#hidden.get()) { return Promise.resolve([]); }
 		const list = [this.validate(true).then(errors => {
 			if (!errors?.length) { return []; }
 			return [{ path: [...selfPath], store: /** @type {Store} */(this), errors }];
@@ -934,6 +1014,9 @@ class Store {
 		for (const [key, field] of this) {
 			list.push(field.validate([...selfPath, key]));
 		}
+		for (const [field, key] of this.#bindStores) {
+			list.push(field.validate([...selfPath, key]));
+		}
 		return Promise.all(list).then(v => v.flat());
 	}
 }
@@ -943,7 +1026,8 @@ class Store {
 /**
  * @template {Record<string, any>} [T=Record<string, any>]
  * @template [M=any]
- * @extends {Store<T, M>}
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @extends {Store<T, M, S>}
  */
 class ObjectStore extends Store {
 	get kind() { return 'object'; }
@@ -957,7 +1041,7 @@ class ObjectStore extends Store {
 	 */
 	child(key) { return this.#children[key] || null; }
 	/**
-	 * @param {Schema.Object<M> & Schema.Attr<M>} schema
+	 * @param {Schema.Object<M, S> & Schema.Attr<M, S>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent] 
 	 * @param {number | string | null} [options.index] 
@@ -1009,7 +1093,8 @@ setObjectStore(ObjectStore);
 /**
  * @template [T=any]
  * @template [M=any]
- * @extends {Store<(T | null)[], M>}
+ * @template {Object.<string, Schema.State>} [S=Object.<string, Schema.State>]
+ * @extends {Store<(T | null)[], M, S>}
  */
 class ArrayStore extends Store {
 	/** @type {(index: number, isNew?: boolean) => Store} */
@@ -1032,7 +1117,7 @@ class ArrayStore extends Store {
 	}
 	get kind() { return 'array'; }
 	/**
-	 * @param {Schema.Field<M>} schema
+	 * @param {Schema.Field<M, S>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent]
 	 * @param {string | number | null} [options.index] 
@@ -1101,6 +1186,8 @@ class ArrayStore extends Store {
 			return child;
 		};
 	}
+	/** @returns {never} */
+	bindObject() { throw new Error(`ArrayStore 不支持 bindObject()方法`); }
 
 
 	/** @readonly @type {Signal.State<boolean?>} */
@@ -4218,7 +4305,7 @@ function renderObject(parent, next, store, env, renderItem, sort) {
 	const children = [];
 	const childStores = [...store];
 	const count = childStores.length;
-	/** @type {[string, Store<any, any>, number][]} */
+	/** @type {[string, Store<any, any, any>, number][]} */
 	const stores = sort
 	? childStores
 		.map(([k,v]) => [k,v,env.setStore(v, store).exec(sort)])
@@ -4765,7 +4852,7 @@ function createFieldFilter(field) {
  * @param {StoreLayout.Options?} options
  * @param {StoreLayout<T>} layout 
  * @param {Node} [anchor]
- * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
+ * @param {(child?: Store<any, any, any> | undefined) => void} [dragenter]
  * @returns {void}
  */
 function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragenter) {
@@ -4778,27 +4865,49 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 			const mode = node.getAttribute('mode') || '';
 			const fieldStore = field ? store.child(field) : store;
 			if (!fieldStore) { return; }
-			const fieldLayout = field
-				? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
-				: { ...layout, html: '' };
+			/** @type {HTMLElement?} */
+			let el = null;
 			switch (mode) {
 				case 'grid': {
-					const el = Form(store, fieldRenderer, fieldLayout, options);
-					if (el) { node.replaceWith(el); }
-					return;
+					const fieldLayout = field
+						? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
+						: { ...layout, html: '' };
+					el = Form(fieldStore, fieldRenderer, fieldLayout, options);
+					break;
+				}
+				default: {
+					el = fieldRenderer(fieldStore, layout.renderer, options);
+					break;
 				}
 			}
-			const res = fieldRenderer(fieldStore, layout.renderer, options);
-			if (res) {
-				node.replaceWith(res);
+			if (!el) {
+				const value = node.getAttribute('placeholder') || '';
+				node.replaceWith(document.createTextNode(value));
 				return;
 			}
-			const value = node.getAttribute('placeholder') || '';
-			node.replaceWith(document.createTextNode(value));
+			const className = node.getAttribute('class') || '';
+			if (className) {
+				el.setAttribute('class', [
+					el.getAttribute('class') || '',
+					className,
+				].filter(Boolean).join(' '));
+			}
+			const style = node.getAttribute('style') || '';
+			if (style) {
+				el.setAttribute('style', [
+					el.getAttribute('style') || '',
+					style,
+				].filter(Boolean).join(' '));
+			}
+			node.replaceWith(el);
 			return;
 		}
 		if (tagName === 'nl-form-button') {
 			const button = document.createElement('button');
+			const className = node.getAttribute('class') || '';
+			const style = node.getAttribute('style') || '';
+			if (className) { button.setAttribute('class', className); }
+			if (style) { button.setAttribute('style', style); }
 			button.classList.add('NeeloongForm-item-button');
 			const click = node.getAttribute('click') || '';
 			const call = options?.call;
@@ -4986,7 +5095,7 @@ function getHtmlContent(html) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
@@ -5009,7 +5118,7 @@ function FormFieldInline(store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {object} option 
@@ -5048,6 +5157,7 @@ function Line(store, fieldRenderer, layout, {
 			const body = root.appendChild(document.createElement('tr'));
 			const main = body.appendChild(document.createElement('td'));
 			main.colSpan = columns.length;
+			main.appendChild(form);
 			body.hidden = true;
 			trigger = () => {
 				if (body.hidden) {
@@ -5087,12 +5197,12 @@ function Line(store, fieldRenderer, layout, {
 	}
 
 	for (const column of columns) {
-		const { actions, field, pattern } = column;
+		const { actions, field, pattern, editable } = column;
 		if (!actions?.length) {
 			const td = head.appendChild(document.createElement('td'));
 			const child = field && store.child(field);
 			if (child) {
-				const el = FormFieldInline(child, fieldRenderer, column, options);
+				const el = FormFieldInline(child, fieldRenderer, column, {...options, editable: options?.editable && (editable !== false)});
 				if (el) { td.appendChild(el); }
 			}
 			continue;
@@ -5140,6 +5250,64 @@ function Line(store, fieldRenderer, layout, {
 	return root;
 }
 
+/** @import { ArrayStore } from '../Store/index.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
+
+/**
+ *
+ * @template T
+ * @param {ArrayStore} store
+ * @param {StoreLayout.Field<T>} layout
+ * @param {StoreLayout.Action[]} actionOptions
+ * @param {(fields: { field: string; width: any; label: any; editable?: boolean? }[]) => StoreLayout.Column<T>[]} createDefault
+ * @returns {StoreLayout.Column<T>[]}
+ */
+function getColumns(store, layout, actionOptions, createDefault) {
+	const fieldList = Object.entries(store.type || {})
+		.filter(([k, v]) => typeof v?.type !== 'object')
+		.map(([field, { width, label }]) => ({ field, width, label }));
+	const headerColumns = layout.columns;
+	if (Array.isArray(headerColumns)) {
+		const map = new Map(fieldList.map(v => [v.field, v]));
+		/** @type {(StoreLayout.Column<T> | null)[]} */
+		const allColumns = headerColumns.map(v => {
+			if (!v) { return null; }
+			if (typeof v === 'number') { return { placeholder: v }; }
+			if (typeof v === 'string') { return map.get(v) || null; }
+			if (typeof v !== 'object') { return null; }
+			if (Array.isArray(v)) {
+				/** @type {Set<StoreLayout.Action>} */
+				const options = new Set(actionOptions);
+				const actions = v.filter(v => options.delete(v));
+				if (!actions) { return null; }
+				return { actions };
+			}
+			const { action, actions, field, placeholder, pattern, width, label, editable } = v;
+			if (field) {
+				const define = map.get(field);
+				if (define) {
+					return { field, placeholder, width, label: label || define.label, editable };
+				}
+			}
+			const options = new Set(actionOptions);
+			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
+			if (allActions.length) {
+				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label, editable };
+			}
+			if (pattern) {
+				return { pattern, placeholder, width, label, editable };
+			}
+			if (placeholder || width) {
+				return { placeholder, width, label, editable };
+			}
+			return null;
+		});
+		const columns = /** @type {StoreLayout.Column<T>[]} */(allColumns.filter(Boolean));
+		if (columns.length) { return columns; }
+	}
+	return createDefault(fieldList);
+}
+
 /** @import { Store, ArrayStore } from '../Store/index.mjs' */
 /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
@@ -5170,6 +5338,7 @@ function renderHead(signal, parent, columns, add, addable, editable) {
 		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, signal);
 	}
 }
+
 /**
  *
  * @template T
@@ -5181,54 +5350,15 @@ function renderHead(signal, parent, columns, add, addable, editable) {
  */
 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')
-		.map(([field, { width, label }]) => ({ field, width, label }));
-	/** @type {StoreLayout.Column<T>[]} */
-	let columns = [];
-	if (Array.isArray(headerColumns)) {
-		const map = new Map(fieldList.map(v => [v.field, v]));
-
-		/** @type {(StoreLayout.Column<T> | null)[]} */
-		const allColumns = headerColumns.map(v => {
-			if (!v) { return null; }
-			if (typeof v === 'number') { return { placeholder: v }; }
-			if (typeof v === 'string') { return map.get(v) || null; }
-			if (typeof v !== 'object') { return null; }
-			if (Array.isArray(v)) {
-				/** @type {Set<StoreLayout.Action>} */
-				const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-				const actions = v.filter(v => options.delete(v));
-				if (!actions) { return null; }
-				return { actions };
-			}
-			const { action, actions, field, placeholder, pattern, width, label } = v;
-			if (field) {
-				const define = map.get(field);
-				if (define) {
-					return { field, placeholder, width, label: label || define.label };
-				}
-			}
-			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial']);
-			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
-			if (allActions.length) {
-				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
-			}
-			// if (pattern) {
-			// 	return { pattern, placeholder, width, label };
-			// }
-			return null;
-		});
-		columns = /** @type {StoreLayout.Column<T>[]} */(allColumns.filter(Boolean));
-
-	}
-	if (!columns.length) {
-		columns = [
+	const columns = getColumns(
+		store,
+		layout,
+		['add', 'move', 'trigger', 'remove', 'serial'],
+		fields => [
 			{ actions: ['add', 'trigger', 'move', 'remove', 'serial'] },
-			...fieldList.slice(0, 3),
-		];
-	}
+			...fields.slice(0, 3),
+		],
+	);
 
 	const table = document.createElement('table');
 	table.classList.add('NeeloongForm-table');
@@ -5473,8 +5603,8 @@ function createCell(signal, layout, values, defCell, blockOnly) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
- * @param {Signal.State<Store<any, any>?>} currentStore 
+ * @param {Store<any, any, any>} store 
+ * @param {Signal.State<Store<any, any, any>?>} currentStore 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {Signal.State<State>} state
@@ -5488,7 +5618,7 @@ function createCell(signal, layout, values, defCell, blockOnly) {
  * @param {() => void} option.dragend 
  * @param {{get(): boolean}} option.deletable 
  * @param {() => void} option.addNode 
- * @param {(store: Store<any, any>) => () => void} option.createDetails 
+ * @param {(store: Store<any, any, any>) => () => void} option.createDetails 
  * @param {StoreLayout.Options?} options
  * @returns {HTMLElement}
  */
@@ -5805,56 +5935,16 @@ function createState(store, states, drag, levelKey, index) {
  */
 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')
-		.map(([field, { width, label }]) => ({ field, width, label }));
-	/** @type {StoreLayout.Column<T>[]} */
-	let columns = [];
-	if (Array.isArray(headerColumns)) {
-		const map = new Map(fieldList.map(v => [v.field, v]));
-		/** @type {(StoreLayout.Column<T> | null)[]} */
-		const allColumns = headerColumns.map(v => {
-			if (!v) { return null; }
-			if (typeof v === 'number') { return { placeholder: v }; }
-			if (typeof v === 'string') { return map.get(v) || null; }
-			if (typeof v !== 'object') { return null; }
-			if (Array.isArray(v)) {
-				/** @type {Set<StoreLayout.Action>} */
-				const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-				const actions = v.filter(v => options.delete(v));
-				if (!actions) { return null; }
-				return { actions };
-			}
-			const { action, actions, field, placeholder, pattern, width, label } = v;
-			if (field) {
-				const define = map.get(field);
-				if (define) {
-					return { field, placeholder, width, label: label || define.label };
-				}
-			}
-			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
-			if (allActions.length) {
-				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
-			}
-			if (pattern) {
-				return { pattern, placeholder, width, label };
-			}
-			if (placeholder || width) {
-				return { placeholder, width, label };
-			}
-			return null;
-		});
-		columns = /** @type {StoreLayout.Column<T>[]} */(allColumns.filter(Boolean));
-	}
-	if (!columns.length) {
-		columns = [
+	const columns = getColumns(
+		store,
+		layout,
+		['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse'],
+		fields => [
 			{ actions: ['collapse', 'move'] },
-			fieldList[0],
+			fields[0],
 			{ actions: ['add', 'remove'] },
-		];
-	}
+		]
+	);
 
 
 	const root = document.createElement('div');
@@ -5930,10 +6020,10 @@ function Tree(store, fieldRenderer, layout, options) {
 
 	/** @type {AbortController?} */
 	let detailAbortController = null;
-	const detailsStore = new Signal.State(/** @type{Store<any, any>?}*/(null));
+	const detailsStore = new Signal.State(/** @type{Store<any, any, any>?}*/(null));
 	/**
 	 * 
-	 * @param {Store<any, any>} store 
+	 * @param {Store<any, any, any>} store 
 	 * @returns 
 	 */
 	function createDetails(store) {
@@ -6185,7 +6275,7 @@ function Tree(store, fieldRenderer, layout, options) {
  * 
  * @template T
  * @param {string | ParentNode} html 
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Options?} options
  * @param {StoreLayout.Field<T>} layout
@@ -6217,7 +6307,7 @@ function renderArrayCell(arrayStyle, store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
@@ -6251,7 +6341,7 @@ function FormField(store, fieldRenderer, layout, options) {
 
 /**
  *
- * @param {Store<any, any>} store
+ * @param {Store<any, any, any>} store
  * @param {StoreLayout.Button} layout
  * @param {StoreLayout.Options?} options
  * @returns {ParentNode}
@@ -6289,7 +6379,7 @@ function FormButton(store, layout, options) {
 /**
  *
  * @template T
- * @param {Store<any, any>} store
+ * @param {Store<any, any, any>} store
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Html} layout
  * @param {StoreLayout.Options?} options
@@ -6311,7 +6401,7 @@ function FormHtml(store, fieldRenderer, layout, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Item<T>} item
  * @param {StoreLayout.Options?} options
@@ -6336,7 +6426,7 @@ function FormItem(store, fieldRenderer, item, options) {
 /**
  * 
  * @template T
- * @param {Store<any, any>} store 
+ * @param {Store<any, any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options