@neeloong/form 0.23.0 → 0.25.0

package/index.full.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.23.0
+* @neeloong/form v0.25.0
 * (c) 2024-2026 Fierflame
 * @license Apache-2.0
 */
@@ -614,7 +614,7 @@
 
   }
 
-  /** @import { Schema } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
   /** @param {*} v  */
   const string = v => typeof v === 'string' && v || null;
   /** @param {*} v  */
@@ -711,7 +711,7 @@
   	return r;
   }
 
-  /** @import { Schema } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
   /** @import ArrayStore from './ArrayStore.mjs' */
 
 
@@ -763,7 +763,7 @@
   }
 
   /** @import Store from './Store.mjs' */
-  /** @import { AsyncValidator, Validator } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
   /**
    * 
    * @param {*} v 
@@ -778,7 +778,7 @@
   /**
    * 
    * @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) {
@@ -801,7 +801,7 @@
   /**
    * 
    * @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) {
@@ -816,7 +816,7 @@
   	const st = new exports.Signal.State(/** @type {string[]} */([]));
   	/**
   	 * 
-  	 * @param {AsyncValidator} validator 
+  	 * @param {Schema.AsyncValidator} validator 
   	 * @param {AbortSignal} signal 
   	 */
   	async function run(validator, signal) {
@@ -870,7 +870,8 @@
   }
 
   /** @import { Ref } from './ref.mjs' */
-  /** @import { AsyncValidator, Schema, Validator } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * 管理单个表单字段的状态和行为
@@ -967,8 +968,8 @@
   	 * @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]
   	 * 
@@ -1000,6 +1001,7 @@
   		this.#type = schema.type;
   		this.#meta = schema.meta;
   		this.#component = schema.component;
+  		this.#layout = schema.layout || {};
 
   		const selfNewState = new exports.Signal.State(Boolean(isNew));
   		this.#selfNew = selfNewState;
@@ -1090,6 +1092,9 @@
   			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); }
@@ -1477,7 +1482,7 @@
   	/**
   	 * 异步校验
   	 * @overload
-  	 * @param {true} [path]
+  	 * @param {true} [self]
   	 * @returns {Promise<string[] | null>}
   	 */
   	/**
@@ -1500,6 +1505,7 @@
   				});
   		}
   		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 }];
@@ -1511,7 +1517,7 @@
   	}
   }
 
-  /** @import { Schema } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
 
   /**
    * @template {Record<string, any>} [T=Record<string, any>]
@@ -1575,7 +1581,7 @@
   // @ts-ignore
   setObjectStore(ObjectStore);
 
-  /** @import { Schema } from '../types.mjs' */
+  /** @import { Schema } from '../Schema.types.mjs' */
 
 
 
@@ -1629,7 +1635,7 @@
   			}
 
   		};
-  		super(schema, {
+  		super({ ...schema, immutable: false }, {
   			index, new: isNew, parent,
   			size: new exports.Signal.Computed(() => childrenState.get().length),
   			setValue(v) {
@@ -1666,7 +1672,10 @@
   			},
   		};
   		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;
   		};
@@ -4064,8 +4073,7 @@
   	}
   }
 
-  /** @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' */
 
@@ -4235,7 +4243,8 @@
   	}
   }
 
-  /** @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' */
@@ -4246,7 +4255,7 @@
    * @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) {
@@ -5124,7 +5133,7 @@
    * @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) {
@@ -5206,7 +5215,7 @@
    * @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}
    */
@@ -5271,7 +5280,7 @@
    * @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}
    */
@@ -5294,7 +5303,7 @@
    * @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}
    */
@@ -5307,7 +5316,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * 
@@ -5333,7 +5342,7 @@
    * @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}
@@ -5347,8 +5356,10 @@
   			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);
@@ -5356,7 +5367,7 @@
   					return;
   				}
   			}
-  			const res = fieldRenderer(fieldStore, layout?.renderer, options);
+  			const res = fieldRenderer(fieldStore, layout.renderer, options);
   			if (res) {
   				node.replaceWith(res);
   				return;
@@ -5389,7 +5400,9 @@
   				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;
@@ -5554,26 +5567,32 @@
    * @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 
@@ -5583,8 +5602,8 @@
    * @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', () => {
@@ -5608,6 +5627,7 @@
   			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) {
@@ -5646,13 +5666,13 @@
 
   	}
 
-  	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;
@@ -5683,7 +5703,7 @@
   					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;
@@ -5700,56 +5720,26 @@
   	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 }; }
@@ -5757,7 +5747,7 @@
   			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 };
@@ -5769,32 +5759,82 @@
   					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 exports.Signal.Computed(() => store.addable);
-  	const deletable = { get: () => Boolean(options?.editable) };
+  	const addable = new exports.Signal.Computed(() => !store.readonly && !store.disabled && store.addable);
   	function add() {
   		const data = {};
   		store.add(data);
@@ -5832,7 +5872,7 @@
 
   	}
   	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'));
@@ -5866,11 +5906,11 @@
   				const ac = new AbortController();
   				const el = Line(child, fieldRenderer, layout, {
   					columns,
+  					deletable: new exports.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,
@@ -5896,16 +5936,16 @@
   	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}`;
@@ -5923,7 +5963,7 @@
   	}
   }
 
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * @typedef {object} CellValues
@@ -5961,7 +6001,7 @@
   /**
    *
    * @param {AbortSignal | null | undefined} signal
-   * @param {StoreLayout.Grid?} [layout]
+   * @param {StoreLayout.Grid} layout
    * @param {CellValues} [values]
    * @param {StoreLayout.Grid['cell']?} [defCell]
    * @param {boolean?} [blockOnly]
@@ -6007,7 +6047,7 @@
   		}
   		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) {
@@ -6028,7 +6068,7 @@
 
   /** @import { Store } from '../Store/index.mjs' */
   /** @import { State } from './Tree.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * 
@@ -6036,10 +6076,11 @@
    * @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 
@@ -6053,8 +6094,8 @@
    */
   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) => {
@@ -6115,9 +6156,9 @@
   		}
   		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');
@@ -6140,7 +6181,8 @@
   	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');
@@ -6149,7 +6191,7 @@
   			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;
   			}
@@ -6198,7 +6240,7 @@
   					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;
@@ -6208,7 +6250,7 @@
   					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;
@@ -6248,7 +6290,7 @@
   }
 
   /** @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',
@@ -6357,62 +6399,22 @@
    * @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');
@@ -6529,9 +6531,8 @@
   	}
 
 
-  	const levelKey = layout?.levelKey || 'level';
-  	const addable = new exports.Signal.Computed(() => store.addable);
-  	const deletable = { get: () => Boolean(options?.editable) };
+  	const levelKey = layout.levelKey || 'level';
+  	const addable = new exports.Signal.Computed(() => !store.readonly && !store.disabled && store.addable);
   	/**
   	 * 
   	 * @param {number} parent 
@@ -6704,12 +6705,12 @@
   				const elState = new exports.Signal.State(state);
   				const ac = new AbortController();
   				const el = TreeLine(child, detailsStore, fieldRenderer, layout, elState, {
-  					columns,
+  					columns, addable,
+  					deletable: new exports.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),
@@ -6747,7 +6748,7 @@
    * @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) {
@@ -6761,7 +6762,7 @@
    * @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?}
    */
@@ -6778,14 +6779,14 @@
    * @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'
@@ -6796,8 +6797,8 @@
   	/** @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);
@@ -6806,7 +6807,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    *
@@ -6843,7 +6844,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    *
@@ -6865,7 +6866,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * 
@@ -6883,7 +6884,9 @@
   	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);
   	}
@@ -6895,7 +6898,7 @@
    * @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?}
@@ -6904,8 +6907,8 @@
   	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); }
@@ -6913,7 +6916,7 @@
   	} 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); }
   		}
   	}
@@ -6922,7 +6925,7 @@
   }
 
   /** @import { Store } from '../Store/index.mjs' */
-  /** @import { StoreLayout } from '../types.mjs' */
+  /** @import { StoreLayout } from '../StoreLayout.types.mjs' */
 
   /**
    * 
@@ -6930,19 +6933,20 @@
    * @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);