@neeloong/form 0.23.0 → 0.25.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.23.0
+* @neeloong/form v0.25.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); }
@@ -899,7 +904,7 @@ class Store {
 	/**
 	 * 异步校验
 	 * @overload
-	 * @param {true} [path]
+	 * @param {true} [self]
 	 * @returns {Promise<string[] | null>}
 	 */
 	/**
@@ -922,6 +927,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 }];
@@ -933,7 +939,7 @@ class Store {
 	}
 }
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 
 /**
  * @template {Record<string, any>} [T=Record<string, any>]
@@ -997,7 +1003,7 @@ class ObjectStore extends Store {
 // @ts-ignore
 setObjectStore(ObjectStore);
 
-/** @import { Schema } from '../types.mjs' */
+/** @import { Schema } from '../Schema.types.mjs' */
 
 
 
@@ -1051,7 +1057,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 +1094,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;
 		};
@@ -3486,8 +3495,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' */
 
@@ -3657,7 +3665,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' */
@@ -3668,7 +3677,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) {
@@ -4546,7 +4555,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) {
@@ -4628,7 +4637,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}
  */
@@ -4693,7 +4702,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}
  */
@@ -4716,7 +4725,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}
  */
@@ -4729,7 +4738,7 @@ 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' */
 
 /**
  * 
@@ -4755,7 +4764,7 @@ function createFieldFilter(field) {
  * @param {Store} store 
  * @param {Node} node 
  * @param {StoreLayout.Options?} options
- * @param {StoreLayout<T>?} [layout] 
+ * @param {StoreLayout<T>} layout 
  * @param {Node} [anchor]
  * @param {(child?: Store<any, any> | undefined) => void} [dragenter]
  * @returns {void}
@@ -4769,8 +4778,10 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 			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; }
+			const fieldLayout = field
+				? layout?.fields?.find(createFieldFilter(field)) || fieldStore.layout
+				: { ...layout, html: '' };
 			switch (mode) {
 				case 'grid': {
 					const el = Form(store, fieldRenderer, fieldLayout, options);
@@ -4778,7 +4789,7 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 					return;
 				}
 			}
-			const res = fieldRenderer(fieldStore, layout?.renderer, options);
+			const res = fieldRenderer(fieldStore, layout.renderer, options);
 			if (res) {
 				node.replaceWith(res);
 				return;
@@ -4811,7 +4822,9 @@ function renderHtml(store, fieldRenderer, node, options, layout, anchor, dragent
 				return;
 			}
 			node.removeAttribute('nl-form-field');
-			const fieldLayout = field ? layout?.fields?.find(createFieldFilter(field)) : layout;
+			const fieldLayout = field
+				? layout.fields?.find(createFieldFilter(field)) || fieldStore.layout
+				: { ...layout, html: '' };
 			if (!array) {
 				renderHtml(fieldStore, fieldRenderer, node, options, fieldLayout, anchor);
 				return;
@@ -4976,26 +4989,32 @@ function getHtmlContent(html) {
  * @template T
  * @param {Store<any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
  * @returns {ParentNode?}
  */
 function FormFieldInline(store, fieldRenderer, layout, options) {
 	if (options?.signal?.aborted) { return null; }
-	return fieldRenderer(store, layout?.renderer, options);
+	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<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @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 
@@ -5005,8 +5024,8 @@ function FormFieldInline(store, fieldRenderer, layout, options) {
  * @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', () => {
@@ -5030,6 +5049,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) {
@@ -5068,13 +5088,13 @@ 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 = FormFieldInline(child, fieldRenderer, null, options);
+				const el = FormFieldInline(child, fieldRenderer, column, options);
 				if (el) { td.appendChild(el); }
 			}
 			continue;
@@ -5105,7 +5125,7 @@ function Line(store, fieldRenderer, layout, {
 					const del = handle.appendChild(document.createElement('button'));
 					del.classList.add('NeeloongForm-table-remove');
 					del.addEventListener('click', remove);
-					watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+					watch(() => !deletable.get(), disabled => {
 						del.disabled = disabled;
 					}, true, options.signal);
 					continue;
@@ -5122,56 +5142,26 @@ function Line(store, fieldRenderer, layout, {
 	return root;
 }
 
-/** @import { Store, ArrayStore } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { ArrayStore } from '../Store/index.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
-/**
- * 
- * @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(signal, parent, columns, add, addable, editable) {
-	const tr = parent.appendChild(document.createElement('tr'));
-	for (const { action, actions, width, label } of columns) {
-		const th = tr.appendChild(document.createElement('th'));
-		if (width) { th.setAttribute('width', `${width}`); }
-		if (![action, actions].flat().includes('add')) {
-			th.innerText = label || '';
-			continue;
-		}
-		if (!editable) { continue; }
-		const button = th.appendChild(document.createElement('button'));
-		button.addEventListener('click', add);
-		button.classList.add('NeeloongForm-table-add');
-		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, signal);
-	}
-}
 /**
  *
  * @template T
  * @param {ArrayStore} store
- * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
- * @param {StoreLayout.Options?} options
- * @returns {HTMLTableElement?}
+ * @param {StoreLayout.Field<T>} layout
+ * @param {StoreLayout.Action[]} actionOptions
+ * @param {(fields: { field: string; width: any; label: any; }[]) => StoreLayout.Column<T>[]} createDefault
+ * @returns {StoreLayout.Column<T>[]}
  */
-function Table(store, fieldRenderer, layout, options) {
-	if (options?.signal?.aborted) { return null; }
-	const headerColumns = layout?.columns;
+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 }));
-	/** @type {StoreLayout.Column[]} */
-	let columns = [];
+	const headerColumns = layout.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 }; }
@@ -5179,7 +5169,7 @@ function Table(store, fieldRenderer, layout, options) {
 			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 options = new Set(actionOptions);
 				const actions = v.filter(v => options.delete(v));
 				if (!actions) { return null; }
 				return { actions };
@@ -5191,32 +5181,82 @@ function Table(store, fieldRenderer, layout, options) {
 					return { field, placeholder, width, label: label || define.label };
 				}
 			}
-			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial']);
+			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 };
 			}
-			// if (pattern) {
-			// 	return { pattern, placeholder, width, label };
-			// }
+			if (pattern) {
+				return { pattern, placeholder, width, label };
+			}
+			if (placeholder || width) {
+				return { placeholder, width, label };
+			}
 			return null;
 		});
-		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
+		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' */
 
+/**
+ * 
+ * @template T
+ * @param {AbortSignal | null | undefined} signal 
+ * @param {HTMLElement} parent 
+ * @param {StoreLayout.Column<T>[]} columns 
+ * @param {() => any} add 
+ * @param {{get(): boolean}} addable 
+ * @param {boolean?} [editable] 
+ * @returns {void}
+ */
+function renderHead(signal, parent, columns, add, addable, editable) {
+	const tr = parent.appendChild(document.createElement('tr'));
+	for (const { action, actions, width, label } of columns) {
+		const th = tr.appendChild(document.createElement('th'));
+		if (width) { th.setAttribute('width', `${width}`); }
+		if (![action, actions].flat().includes('add')) {
+			th.innerText = label || '';
+			continue;
+		}
+		if (!editable) { continue; }
+		const button = th.appendChild(document.createElement('button'));
+		button.addEventListener('click', add);
+		button.classList.add('NeeloongForm-table-add');
+		watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true, signal);
 	}
-	if (!columns.length) {
-		columns = [
+}
+
+/**
+ *
+ * @template T
+ * @param {ArrayStore} store
+ * @param {StoreLayout.Renderer<T>} fieldRenderer 
+ * @param {StoreLayout.Field<T>} layout
+ * @param {StoreLayout.Options?} options
+ * @returns {HTMLTableElement?}
+ */
+function Table(store, fieldRenderer, layout, options) {
+	if (options?.signal?.aborted) { return null; }
+	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');
 	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);
@@ -5254,7 +5294,7 @@ function Table(store, fieldRenderer, layout, options) {
 
 	}
 	renderHead(options?.signal, thead, columns, add, addable, Boolean(options?.editable));
-	switch (layout?.tableFoot) {
+	switch (layout.tableFoot) {
 		default:
 		case 'header': {
 			const tfoot = table.appendChild(document.createElement('tfoot'));
@@ -5288,11 +5328,11 @@ function Table(store, fieldRenderer, layout, options) {
 				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,
 					signal: options?.signal ? AbortSignal.any([options?.signal, ac.signal]) : ac.signal,
@@ -5318,16 +5358,16 @@ function Table(store, fieldRenderer, layout, options) {
 	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}`;
@@ -5345,7 +5385,7 @@ function bindGrid(root, layout) {
 	}
 }
 
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * @typedef {object} CellValues
@@ -5383,7 +5423,7 @@ function createStdCell(signal, values) {
 /**
  *
  * @param {AbortSignal | null | undefined} signal
- * @param {StoreLayout.Grid?} [layout]
+ * @param {StoreLayout.Grid} layout
  * @param {CellValues} [values]
  * @param {StoreLayout.Grid['cell']?} [defCell]
  * @param {boolean?} [blockOnly]
@@ -5429,7 +5469,7 @@ function createCell(signal, layout, values, defCell, blockOnly) {
 		}
 		return null;
 	}
-	const [root, content] = create(layout?.cell) || create(defCell) || createStdCell(signal, values);
+	const [root, content] = create(layout.cell) || create(defCell) || createStdCell(signal, values);
 	root.classList.add('NeeloongForm-item');
 	effect(() => {
 		if (values?.error) {
@@ -5450,7 +5490,7 @@ function createCell(signal, layout, values, defCell, blockOnly) {
 
 /** @import { Store } from '../Store/index.mjs' */
 /** @import { State } from './Tree.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
@@ -5458,10 +5498,11 @@ function createCell(signal, layout, values, defCell, blockOnly) {
  * @param {Store<any, any>} store 
  * @param {Signal.State<Store<any, any>?>} currentStore 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @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 
@@ -5475,8 +5516,8 @@ function createCell(signal, layout, values, defCell, blockOnly) {
  */
 function TreeLine(
 	store, currentStore, fieldRenderer, layout, state, {
-		columns,
-		remove, dragenter, dragstart, dragend, deletable, addNode, drop, createDetails,
+		columns, addable, deletable,
+		remove, dragenter, dragstart, dragend, addNode, drop, createDetails,
 	}, options) {
 	const root = document.createElement('div');
 	root.addEventListener('dragstart', (event) => {
@@ -5537,9 +5578,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');
@@ -5562,7 +5603,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');
@@ -5571,7 +5613,7 @@ function TreeLine(
 			if (field) {
 				const child = store.child(field);
 				if (!child) { continue; }
-				const el = FormFieldInline(child, fieldRenderer, null, { ...options, editable: false });
+				const el = FormFieldInline(child, fieldRenderer, column, { ...options, editable: false });
 				if (el) { td.appendChild(el); }
 				continue;
 			}
@@ -5620,7 +5662,7 @@ function TreeLine(
 					const move = line.appendChild(document.createElement('button'));
 					move.classList.add('NeeloongForm-tree-add');
 					move.addEventListener('click', addNode);
-					watch(() => store.readonly || store.disabled, disabled => {
+					watch(() => !addable.get(), disabled => {
 						move.disabled = disabled;
 					}, true, options.signal);
 					continue;
@@ -5630,7 +5672,7 @@ function TreeLine(
 					const del = line.appendChild(document.createElement('button'));
 					del.classList.add('NeeloongForm-tree-remove');
 					del.addEventListener('click', remove);
-					watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+					watch(() => !deletable.get(), disabled => {
 						del.disabled = disabled;
 					}, true, options.signal);
 					continue;
@@ -5670,7 +5712,7 @@ function TreeLine(
 }
 
 /** @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',
@@ -5779,62 +5821,22 @@ function createState(store, states, drag, levelKey, index) {
  * @template T
  * @param {ArrayStore} store
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
  * @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')
-		.map(([field, { width, label }]) => ({ field, width, label }));
-	/** @type {StoreLayout.Column[]} */
-	let columns = [];
-	if (Array.isArray(headerColumns)) {
-		const map = new Map(fieldList.map(v => [v.field, v]));
-		/** @type {(StoreLayout.Column | null)[]} */
-		const allColumns = headerColumns.map(v => {
-			if (!v) { return null; }
-			if (typeof v === 'number') { return { placeholder: v }; }
-			if (typeof v === 'string') { return map.get(v) || null; }
-			if (typeof v !== 'object') { return null; }
-			if (Array.isArray(v)) {
-				/** @type {Set<StoreLayout.Action>} */
-				const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-				const actions = v.filter(v => options.delete(v));
-				if (!actions) { return null; }
-				return { actions };
-			}
-			const { action, actions, field, placeholder, pattern, width, label } = v;
-			if (field) {
-				const define = map.get(field);
-				if (define) {
-					return { field, placeholder, width, label: label || define.label };
-				}
-			}
-			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
-			const allActions = [action, actions].flat().filter(v => v && options.delete(v));
-			if (allActions.length) {
-				return { actions: /** @type {StoreLayout.Action[]} */(allActions), width, label };
-			}
-			if (pattern) {
-				return { pattern, placeholder, width, label };
-			}
-			if (placeholder || width) {
-				return { placeholder, width, label };
-			}
-			return null;
-		});
-		columns = /** @type {StoreLayout.Column[]} */(allColumns.filter(Boolean));
-	}
-	if (!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');
@@ -5951,9 +5953,8 @@ function Tree(store, fieldRenderer, layout, options) {
 	}
 
 
-	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 
@@ -6126,12 +6127,12 @@ function Tree(store, fieldRenderer, layout, options) {
 				const elState = new Signal.State(state);
 				const ac = new AbortController();
 				const el = TreeLine(child, detailsStore, fieldRenderer, layout, elState, {
-					columns,
+					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),
@@ -6169,7 +6170,7 @@ function Tree(store, fieldRenderer, layout, options) {
  * @param {Store<any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {StoreLayout.Options?} options
- * @param {StoreLayout.Field<T>?} layout
+ * @param {StoreLayout.Field<T>} layout
  * @returns {ParentNode}
  */
 function Html(html, store, fieldRenderer, options, layout) {
@@ -6183,7 +6184,7 @@ function Html(html, store, fieldRenderer, options, layout) {
  * @param {StoreLayout.Field<T>['arrayStyle']?} arrayStyle 
  * @param {ArrayStore} store
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
  * @returns {HTMLElement?}
  */
@@ -6200,14 +6201,14 @@ function renderArrayCell(arrayStyle, store, fieldRenderer, layout, options) {
  * @template T
  * @param {Store<any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout.Field<T>?} layout
+ * @param {StoreLayout.Field<T>} layout
  * @param {StoreLayout.Options?} options
  * @returns {ParentNode}
  */
 function FormField(store, fieldRenderer, layout, options) {
 	const { type } = store;
 	const isObject = Boolean(type && typeof type === 'object');
-	const html = layout?.html;
+	const html = layout.html;
 	/** @type {StoreLayout.Grid['cell']} */
 	const cellType = isObject
 		? store instanceof ArrayStore ? 'collapse' : 'fieldset'
@@ -6218,8 +6219,8 @@ function FormField(store, fieldRenderer, layout, options) {
 	/** @type {false | ParentNode | null} */
 	const r =
 		html && Html(html, store, fieldRenderer, options, layout)
-		|| fieldRenderer(store, layout?.renderer, options)
-		|| store instanceof ArrayStore && renderArrayCell(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) {
 		content.appendChild(r);
@@ -6228,7 +6229,7 @@ function FormField(store, fieldRenderer, layout, options) {
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  *
@@ -6265,7 +6266,7 @@ function FormButton(store, layout, options) {
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  *
@@ -6287,7 +6288,7 @@ function FormHtml(store, fieldRenderer, layout, options) {
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
@@ -6305,7 +6306,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);
 	}
@@ -6317,7 +6320,7 @@ function FormItem(store, fieldRenderer, item, options) {
  * @template T
  * @param {Store<any, any>} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
- * @param {StoreLayout<T>?} layout
+ * @param {StoreLayout<T>} layout
  * @param {StoreLayout.Options?} options
  * @param {HTMLElement} [parent]
  * @returns {HTMLElement?}
@@ -6326,8 +6329,8 @@ function Form(store, fieldRenderer, layout, options, parent) {
 	if (options?.signal?.aborted) { return null; }
 	const root = parent instanceof HTMLElement ? parent : document.createElement('div');
 	root.classList.add('NeeloongForm');
-	const fieldLayouts = layout?.fields;
-	if (fieldLayouts) {
+	const fieldLayouts = layout.fields || store.layout.fields;
+	if (fieldLayouts?.length) {
 		for (const fieldTemplate of fieldLayouts) {
 			const el = FormItem(store, fieldRenderer, fieldTemplate, options);
 			if (el) { root.appendChild(el); }
@@ -6335,7 +6338,7 @@ function Form(store, fieldRenderer, layout, options, parent) {
 	} else {
 		const fields = [...store].map(([, v]) => v);
 		for (const field of fields) {
-			const el = FormField(field, fieldRenderer, null, options);
+			const el = FormField(field, fieldRenderer, field.layout, options);
 			if (el) { root.appendChild(el); }
 		}
 	}
@@ -6344,7 +6347,7 @@ function Form(store, fieldRenderer, layout, options, parent) {
 }
 
 /** @import { Store } from '../Store/index.mjs' */
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
 /**
  * 
@@ -6352,19 +6355,20 @@ function Form(store, fieldRenderer, layout, options, parent) {
  * @param {Store} store 
  * @param {StoreLayout.Renderer<T>} fieldRenderer 
  * @param {HTMLElement} root 
- * @param {StoreLayout<T>?} [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;
+	const storeLayout = layout || store.layout;
+	const html = storeLayout.html;
 	if (!html) {
-		Form(store, fieldRenderer, layout || null, options || null, root);
+		Form(store, fieldRenderer, storeLayout, options || null, root);
 		return;
 	}
 	const content = getHtmlContent(html);
-	renderHtml(store, fieldRenderer, content, options || null, layout);
+	renderHtml(store, fieldRenderer, content, options || null, storeLayout);
 	root.appendChild(content);
 	options?.signal?.addEventListener('abort', () => {
 		root.removeChild(content);