@neeloong/form 0.18.0 → 0.20.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.18.0
+* @neeloong/form v0.20.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -85,7 +85,7 @@ const values = v => {
  * @param {T | ((store: Store) => T?) | null} [fn]
  * @returns {[Signal.State<T?>, Signal.Computed<T?>]}
  */
-function createState(self, toValue, defState, fn) {
+function createState$1(self, toValue, defState, fn) {
 
 	const selfState = new Signal.State(toValue(defState));
 	/** @type {Signal.Computed<T>} */
@@ -466,17 +466,17 @@ class Store {
 		[this.#selfRequired, this.#required] = createBooleanStates(this, required, schema.required, parent ? parent.#required : null);
 		[this.#selfDisabled, this.#disabled] = createBooleanStates(this, disabled, schema.disabled, parent ? parent.#disabled : null);
 
-		[this.#selfLabel, this.#label] = createState(this, string, label, schema.label);
-		[this.#selfDescription, this.#description] = createState(this, string, description, schema.description);
-		[this.#selfPlaceholder, this.#placeholder] = createState(this, string, placeholder, schema.placeholder);
-		[this.#selfMin, this.#min] = createState(this, number, min, schema.min);
-		[this.#selfMax, this.#max] = createState(this, number, max, schema.max);
-		[this.#selfStep, this.#step] = createState(this, number, step, schema.step);
-		[this.#selfMinLength, this.#minLength] = createState(this, number, minLength, schema.minLength);
-		[this.#selfMaxLength, this.#maxLength] = createState(this, number, maxLength, schema.maxLength);
-		[this.#selfPattern, this.#pattern] = createState(this, regex, pattern, schema.pattern);
+		[this.#selfLabel, this.#label] = createState$1(this, string, label, schema.label);
+		[this.#selfDescription, this.#description] = createState$1(this, string, description, schema.description);
+		[this.#selfPlaceholder, this.#placeholder] = createState$1(this, string, placeholder, schema.placeholder);
+		[this.#selfMin, this.#min] = createState$1(this, number, min, schema.min);
+		[this.#selfMax, this.#max] = createState$1(this, number, max, schema.max);
+		[this.#selfStep, this.#step] = createState$1(this, number, step, schema.step);
+		[this.#selfMinLength, this.#minLength] = createState$1(this, number, minLength, schema.minLength);
+		[this.#selfMaxLength, this.#maxLength] = createState$1(this, number, maxLength, schema.maxLength);
+		[this.#selfPattern, this.#pattern] = createState$1(this, regex, pattern, schema.pattern);
 		// @ts-ignore
-		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
+		[this.#selfValues, this.#values] = createState$1(this, values, values$1, schema.values);
 
 		[this.#selfRemovable, this.#removable] = createBooleanStates(this, removable, schema.removable ?? true);
 
@@ -1043,11 +1043,11 @@ setObjectStore(ObjectStore);
  */
 class ArrayStore extends Store {
 	/** @type {(index: number, isNew?: boolean) => Store} */
-	#create = () => {throw new Error}
+	#create = () => { throw new Error; };
 	/** @type {Signal.State<Store[]>} */
-	#children
+	#children;
 	get children() { return [...this.#children.get()]; }
-	*[Symbol.iterator]() { return yield*[...this.#children.get().entries()]; }
+	*[Symbol.iterator]() { return yield* [...this.#children.get().entries()]; }
 	/**
 	 * 
 	 * @param {string | number} key 
@@ -1071,7 +1071,7 @@ class ArrayStore extends Store {
 	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdate] 
 	 * @param {(value: any, index: any, store: Store) => void} [options.onUpdateState] 
 	 */
-	constructor(schema, { parent, onUpdate, onUpdateState, index, new: isNew, addable} = {}) {
+	constructor(schema, { parent, onUpdate, onUpdateState, index, new: isNew, addable } = {}) {
 		const childrenState = new Signal.State(/** @type {Store[]} */([]));
 		// @ts-ignore
 		const updateChildren = (list) => {
@@ -1079,7 +1079,7 @@ class ArrayStore extends Store {
 			const children = [...childrenState.get()];
 			const oldLength = children.length;
 			for (let i = children.length; i < length; i++) {
-					children.push(this.#create(i));
+				children.push(this.#create(i));
 			}
 			children.length = length;
 			if (oldLength !== length) {
@@ -1091,8 +1091,8 @@ class ArrayStore extends Store {
 			index, new: isNew, parent,
 			size: new Signal.Computed(() => childrenState.get().length),
 			state: [],
-			setValue(v) { return Array.isArray(v) ? v : v == null ? null : [v] },
-			setState(v) { return Array.isArray(v) ? v : v == null ? null : [v] },
+			setValue(v) { return Array.isArray(v) ? v : v == null ? null : [v]; },
+			setState(v) { return Array.isArray(v) ? v : v == null ? null : [v]; },
 			convert(v, state) {
 				const val = Array.isArray(v) ? v : v == null ? null : [v];
 				updateChildren(val);
@@ -1101,7 +1101,7 @@ class ArrayStore extends Store {
 					(Array.isArray(state) ? state : v == null ? [] : [state]),
 				];
 			},
-			onUpdate:(value, index, state) => {
+			onUpdate: (value, index, state) => {
 				updateChildren(value);
 				onUpdate?.(value, index, state);
 			},
@@ -1110,13 +1110,13 @@ class ArrayStore extends Store {
 		});
 
 		[this.#selfAddable, this.#addable] = createBooleanStates(this, addable, schema.addable ?? true);
-		
+
 		this.#children = childrenState;
 		const childCommonOptions = {
 			parent: this,
 			/** @param {*} value @param {*} index @param {Store} store */
 			onUpdate: (value, index, store) => {
-				if (childrenState.get()[index] !== store) { return;}
+				if (childrenState.get()[index] !== store) { return; }
 				const val = [...this.value || []];
 				if (val.length < index) {
 					val.length = index;
@@ -1126,7 +1126,7 @@ class ArrayStore extends Store {
 			},
 			/** @param {*} state @param {*} index @param {Store} store */
 			onUpdateState: (state, index, store) => {
-				if (childrenState.get()[index] !== store) { return;}
+				if (childrenState.get()[index] !== store) { return; }
 				const sta = [...this.state || []];
 				if (sta.length < index) {
 					sta.length = index;
@@ -1135,18 +1135,18 @@ class ArrayStore extends Store {
 				this.state = sta;
 			},
 		};
-		this.#create = (index, isNew) =>  {
-			const child = create(schema, {...childCommonOptions, index, new: isNew });
+		this.#create = (index, isNew) => {
+			const child = create(schema, { ...childCommonOptions, index, new: isNew });
 			child.index = index;
-			return child
+			return child;
 		};
 	}
 
 
 	/** @readonly @type {Signal.State<boolean?>} */
-	#selfAddable
+	#selfAddable;
 	/** @readonly @type {Signal.Computed<boolean>} */
-	#addable
+	#addable;
 	get selfAddable() { return this.#selfAddable.get(); }
 	set selfAddable(v) { this.#selfAddable.set(typeof v === 'boolean' ? v : null); }
 	/** 是否禁用字段 */
@@ -1226,37 +1226,49 @@ class ArrayStore extends Store {
 	 * 
 	 * @param {number} from 
 	 * @param {number} to 
+	 * @param {number} quantity 
 	 * @returns 
 	 */
-	move(from, to) {
+	move(from, to, quantity = 1) {
+		const q = Math.floor(quantity);
+		if (q < 1) { return 0; }
+		if (from <= to && from + q > to) { return 0; }
+
 		const data = this.value;
-		if (!Array.isArray(data)) { return false; }
+		if (!Array.isArray(data)) { return 0; }
+
 		const children = [...this.#children.get()];
-		const [item] = children.splice(from, 1);
-		if (!item) { return false; }
-		children.splice(to, 0, item);
-		let lft = Math.min(from, to);
-		let rgt = Math.max(from, to);
+		const list = children.splice(from, q);
+		const len = list.length;
+		if (!len) { return 0; }
+		const toIndex = q > 1 && to > from ? to - q + 1 : to;
+		children.splice(toIndex, 0, ...list);
+
+		let lft = Math.min(from, toIndex);
+		let rgt = Math.max(from + q - 1, to);
 		for (let i = lft; i <= rgt; i++) {
 			children[i].index = i;
 		}
+
 		const val = [...data];
-		const [value] = val.splice(from, 1);
-		val.splice(to, 0, value);
+		const values = val.splice(from, len);
+		for (let i = values.length; i < len; i++) { values.push(null); }
+		while (toIndex > val.length) { val.push(null); }
+		val.splice(toIndex, 0, ...values);
+
 		const state = this.state;
 		if (Array.isArray(state)) {
 			const sta = [...state];
-			const [value = {}] = sta.splice(from, 1);
-			if (to <= sta.length) {
-				sta.splice(to, 0, value);
-			} else {
-				sta[to] = value;
-			}
+			const states = sta.splice(from, len);
+			for (let i = states.length; i < len; i++) { states.push({}); }
+			while (toIndex > sta.length) { sta.push({}); }
+			sta.splice(toIndex, 0, ...states);
+
 			this.state = sta;
 		}
 		this.#children.set(children);
 		this.value = val;
-		return true;
+		return len;
 
 	}
 	/**
@@ -4937,6 +4949,7 @@ function Table(store, fieldRenderer, layout, options) {
 	if (Array.isArray(headerColumns)) {
 		const map = new Map(fieldList.map(v => [v.field, v]));
 		columns = headerColumns.map(v => {
+			if (typeof v === 'number') { return [] }
 			if (typeof v === 'string') { return map.get(v) || [] }
 			if (!Array.isArray(v)) { return []; }
 			/** @type {Set<StoreLayout.Action>} */
@@ -5323,6 +5336,54 @@ function getHtmlContent(html) {
 	return template.content;
 }
 
+/** @import { StoreLayout } from '../types.mjs' */
+
+/**
+ *
+ * @param {HTMLElement} root
+ * @param {StoreLayout.Grid?} [layout]
+ */
+function bindGrid(root, layout) {
+	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
+	root.classList.add(`NeeloongForm-item-grid`);
+	if (colStart && colEnd) {
+		root.style.gridColumn = `${colStart} / ${colEnd}`;
+	} else if (colStart && colSpan) {
+		root.style.gridColumn = `${colStart} / span ${colSpan}`;
+	} else if (colSpan) {
+		root.style.gridColumn = `span ${colSpan}`;
+	}
+	if (rowStart && rowEnd) {
+		root.style.gridRow = `${rowStart} / ${rowEnd}`;
+	} else if (rowStart && rowSpan) {
+		root.style.gridRow = `${rowStart} / span ${rowSpan}`;
+	} else if (rowSpan) {
+		root.style.gridRow = `span ${rowSpan}`;
+	}
+
+
+
+
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {HTMLElement} root
+ * @param {CellValues} [values]
+ * @returns {() => void}
+ */
+function bindErrored(root, values) {
+	return effect(() => {
+		if (values?.error) {
+			root.classList.add('NeeloongForm-item-errored');
+		} else {
+			root.classList.remove('NeeloongForm-item-errored');
+		}
+	});
+}
+
 /**
  *
  * @param {HTMLElement} root
@@ -5339,9 +5400,49 @@ function bindRequired(root, values) {
 	});
 }
 
+/** @import { CellValues } from './createCell.mjs' */
+
 /**
  *
- * @param {{label?: string | null; description?: string | null; required?: boolean | null}} [values]
+ * @param {CellValues} [values]
+ * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ */
+function createStdCell(values) {
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	const root = document.createElement('div');
+	root.className = 'NeeloongForm-item';
+	destroyList.push(bindRequired(root, values));
+
+	const label = root.appendChild(document.createElement('div'));
+	label.className = 'NeeloongForm-item-label';
+	destroyList.push(effect(() => label.innerText = values?.label || ''));
+
+	const content = root.appendChild(document.createElement('div'));
+	content.className = 'NeeloongForm-item-content';
+
+	const description = root.appendChild(document.createElement('div'));
+	description.className = 'NeeloongForm-item-description';
+	destroyList.push(effect(() => description.innerText = values?.description || ''));
+	const error = root.appendChild(document.createElement('div'));
+	error.className = 'NeeloongForm-item-error';
+	destroyList.push(effect(() => error.innerText = values?.error || ''));
+	destroyList.push(bindErrored(root, values));
+
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, content, destroyList];
+
+
+}
+
+/** @import { CellValues } from './createCell.mjs' */
+
+/**
+ *
+ * @param {CellValues} [values]
  * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
  */
 function createCollapseCell(values) {
@@ -5354,6 +5455,7 @@ function createCollapseCell(values) {
 	root.open = true;
 	const summary = root.appendChild(document.createElement('summary'));
 	destroyList.push(effect(() => summary.innerText = values?.label || ''));
+	destroyList.push(bindErrored(root, values));
 
 	return [root, () => {
 		for (const destroy of destroyList) {
@@ -5364,48 +5466,48 @@ function createCollapseCell(values) {
 
 }
 
-/** @import { StoreLayout } from '../types.mjs' */
+/** @import { CellValues } from './createCell.mjs' */
 
 /**
  *
- * @param {HTMLElement} root
- * @param {StoreLayout.Item?} layout
+ * @param {CellValues} [values]
+ * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
  */
-function bindGrid(root, layout) {
-	const { colStart, colSpan, colEnd, rowStart, rowSpan, rowEnd } = layout || {};
-	root.classList.add(`NeeloongForm-item-grid`);
-	if (colStart && colEnd) {
-		root.style.gridColumn = `${colStart} / ${colEnd}`;
-	} else if (colStart && colSpan) {
-		root.style.gridColumn = `${colStart} / span ${colSpan}`;
-	} else if (colSpan) {
-		root.style.gridColumn = `span ${colSpan}`;
-	}
-	if (rowStart && rowEnd) {
-		root.style.gridRow = `${rowStart} / ${rowEnd}`;
-	} else if (rowStart && rowSpan) {
-		root.style.gridRow = `${rowStart} / span ${rowSpan}`;
-	} else if (rowSpan) {
-		root.style.gridRow = `span ${rowSpan}`;
-	}
+function createNullCell(values) {
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	const root = document.createElement('div');
+	root.className = 'NeeloongForm-item';
+	destroyList.push(bindRequired(root, values));
+	destroyList.push(bindErrored(root, values));
 
 
+	return [root, () => {
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}, root, destroyList];
 
 
 }
 
+/** @import { CellValues } from './createCell.mjs' */
+
 /**
  *
- * @param {{label?: string | null; description?: string | null; required?: boolean | null}} [values]
- * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ * @param {CellValues} [values]
+ * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
  */
-function createNullCell(values) {
+function createFieldsetCell(values) {
 	/** @type {(() => void)[]} */
 	const destroyList = [];
-	const root = document.createElement('div');
+	const root = document.createElement('fieldset');
 	root.className = 'NeeloongForm-item';
 	destroyList.push(bindRequired(root, values));
 
+	const legend = root.appendChild(document.createElement('legend'));
+	destroyList.push(effect(() => legend.innerText = values?.label || ''));
+	destroyList.push(bindErrored(root, values));
 
 	return [root, () => {
 		for (const destroy of destroyList) {
@@ -5416,62 +5518,769 @@ function createNullCell(values) {
 
 }
 
+/** @import { StoreLayout } from '../types.mjs' */
+
+/**
+ * @typedef {object} CellValues
+ * @property {string?} [label]
+ * @property {string?} [description]
+ * @property {string?} [error]
+ * @property {boolean?} [required]
+ */
 /**
  *
- * @param {{label?: string | null; description?: string | null; required?: boolean | null}} [values]
- * @returns {[HTMLDivElement, () => void, HTMLDivElement, (() => void)[]]}
+ * @param {StoreLayout.Grid?} [layout]
+ * @param {CellValues} [values]
+ * @param {StoreLayout.Grid['cell']?} [defCell]
+ * @param {boolean?} [blockOnly]
+ * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
  */
-function createBaseCell(values) {
+function createCell(layout, values, defCell, blockOnly) {
+	/**
+	 *
+	 * @param {string?} [cellType]
+	 * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]?}
+	 */
+	function create(cellType) {
+		if (!cellType) { return null; }
+		if (!blockOnly) {
+			switch (cellType) {
+				case 'inline': {
+					const result = createStdCell(values);
+					bindGrid(result[0], layout);
+					return result;
+				}
+				case 'base': {
+					const result = createNullCell(values);
+					bindGrid(result[0], layout);
+					return result;
+				}
+			}
+		}
+		switch (cellType) {
+			case 'block': return createStdCell(values);
+			case 'fieldset': return createFieldsetCell(values);
+			case 'collapse': return createCollapseCell(values);
+		}
+		return null;
+	}
+	return create(layout?.cell) || create(defCell) || createStdCell(values);
+}
+
+/** @import { Store } from '../Store/index.mjs' */
+/** @import { State } from './Tree.mjs' */
+/** @import { StoreLayout } from '../types.mjs' */
+
+/**
+ * 
+ * @param {Store<any, any>} store 
+ * @param {Signal.State<Store<any, any>?>} currentStore 
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Field?} layout
+ * @param {State} initState
+ * @param {object} option 
+ * @param {(string | number | StoreLayout.Action[])[]} option.columns 
+ * @param {() => void} option.remove 
+ * @param {(el: HTMLElement) => () => void} option.dragenter 
+ * @param {() => void} option.dragstart 
+ * @param {(inChildren?: boolean) => void} option.drop 
+ * @param {() => void} option.dragend 
+ * @param {{get(): boolean}} option.deletable 
+ * @param {() => void} option.addNode 
+ * @param {(store: Store<any, any>) => () => void} option.createDetails 
+ * @param {StoreLayout.Options?} options
+
+ * @returns {[HTMLElement, () => void, (s: State) => void]}
+ */
+function TreeLine(
+	store, currentStore, fieldRenderer, layout, initState, {
+		columns,
+		remove, dragenter, dragstart, dragend, deletable, addNode, drop, createDetails,
+	}, options) {
+	const state = new Signal.State(initState);
+	const root = document.createElement('div');
+	root.addEventListener('dragstart', (event) => {
+		if (event.target !== event.currentTarget) { return; }
+		dragstart();
+	});
+	root.addEventListener('dragend', dragend);
+
 	/** @type {(() => void)[]} */
 	const destroyList = [];
-	const root = document.createElement('div');
-	root.className = 'NeeloongForm-item';
-	destroyList.push(bindRequired(root, values));
+	root.classList.add('NeeloongForm-tree-item');
 
-	const label = root.appendChild(document.createElement('div'));
-	label.className = 'NeeloongForm-item-label';
-	destroyList.push(effect(() => label.innerText = values?.label || ''));
+	destroyList.push(effect(() => {
+		if (currentStore.get() === store) {
+			root.classList.add('NeeloongForm-tree-current');
+		} else {
+			root.classList.remove('NeeloongForm-tree-current');
+		}
+	}));
+	destroyList.push(effect(() => {
+		const level = state.get().level;
+		root.style.setProperty(`--NeeloongForm-tree-level`, `${level}`);
+	}));
 
-	const content = root.appendChild(document.createElement('div'));
-	content.className = 'NeeloongForm-item-content';
+	destroyList.push(effect(() => { root.hidden = state.get().hidden; }));
 
-	const description = root.appendChild(document.createElement('div'));
-	description.className = 'NeeloongForm-item-description';
-	destroyList.push(effect(() => description.innerText = values?.description || ''));
+
+	/** @type {HTMLButtonElement[]} */
+	const collapseList = [];
+
+	/**
+	 * 
+	 * @param {PointerEvent} event 
+	 */
+	function pointerdown({ pointerId }) {
+		root.draggable = true;
+		/** @param {PointerEvent} event */
+		function pointerup(event) {
+			if (event.pointerId !== pointerId) { return; }
+			if (!root) { return; }
+			root.draggable = false;
+			window.removeEventListener('pointerup', pointerup, { capture: true });
+			window.removeEventListener('pointercancel', pointerup, { capture: true });
+		}
+		window.addEventListener('pointerup', pointerup, { capture: true });
+		window.addEventListener('pointercancel', pointerup, { capture: true });
+
+	}
+	function switchCollapsed() {
+		const s = state.get();
+		s.collapsed = !s.collapsed;
+	}
+	let close = () => { };
+	function open() {
+		close = createDetails(store);
+	}
+	function trigger() {
+		if (currentStore.get() === store) {
+			close(); return;
+		}
+		close = createDetails(store);
+	}
+	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');
+
+	const dropFront = root.appendChild(document.createElement('div'));
+	dropFront.classList.add('NeeloongForm-tree-drop');
+	const dropChildren = root.appendChild(document.createElement('div'));
+	dropChildren.classList.add('NeeloongForm-tree-drop-children');
+	dropFront.addEventListener('dragover', (e) => e.preventDefault());
+	dropChildren.addEventListener('dragover', (e) => e.preventDefault());
+	dropFront.addEventListener('drop', () => drop());
+	dropChildren.addEventListener('drop', () => drop(true));
+	destroyList.push(effect(() => { 
+		dropFront.hidden = dropChildren.hidden = !state.get().droppable;
+	 }));
+
+	let dragleave = () => {};
+	dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
+	dropChildren.addEventListener('dragenter', () => dragleave = dragenter(dropChildren));
+	dropFront.addEventListener('dragleave', () => dragleave());
+	dropChildren.addEventListener('dragleave', () => dragleave());
+
+	for (const name of columns) {
+		if (typeof name === 'number') {
+			const td = line.appendChild(document.createElement('div'));
+			td.classList.add('NeeloongForm-tree-placeholder');
+			td.style.flex = `${name}`;
+			if (click) { td.addEventListener('click', click); }
+			if (moveStart) { td.addEventListener('pointerdown', moveStart); }
+			continue;
+		}
+		if (!Array.isArray(name)) {
+			const td = line.appendChild(document.createElement('div'));
+			td.classList.add('NeeloongForm-tree-cell');
+			const child = store.child(name);
+			if (!child) { continue; }
+			const [el, destroy] = FormField(child, fieldRenderer, null, { ...options, editable: false }, true);
+			destroyList.push(destroy);
+			td.appendChild(el);
+			if (click) { td.addEventListener('click', click); }
+			if (moveStart) { td.addEventListener('pointerdown', moveStart); }
+			continue;
+		}
+		for (const k of name) {
+			switch (k) {
+				case 'trigger': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-trigger');
+					btn.addEventListener('click', trigger);
+					continue;
+				}
+				case 'open': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-open');
+					btn.addEventListener('click', open);
+					continue;
+				}
+				case 'collapse': {
+					const btn = line.appendChild(document.createElement('button'));
+					btn.classList.add('NeeloongForm-tree-collapse');
+					btn.addEventListener('click', switchCollapsed);
+					collapseList.push(btn);
+					continue;
+				}
+				case 'move': {
+					if (!options?.editable) { continue; }
+					const move = line.appendChild(document.createElement('button'));
+					move.classList.add('NeeloongForm-tree-move');
+					move.addEventListener('pointerdown', pointerdown);
+					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+						move.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'add': {
+					if (!options?.editable) { continue; }
+					const move = line.appendChild(document.createElement('button'));
+					move.classList.add('NeeloongForm-tree-add');
+					move.addEventListener('click', addNode);
+					destroyList.push(watch(() => store.readonly || store.disabled, disabled => {
+						move.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'remove': {
+					if (!options?.editable) { continue; }
+					const del = line.appendChild(document.createElement('button'));
+					del.classList.add('NeeloongForm-tree-remove');
+					del.addEventListener('click', remove);
+					destroyList.push(watch(() => !deletable.get() || store.readonly || store.disabled, disabled => {
+						del.disabled = disabled;
+					}, true));
+					continue;
+				}
+				case 'serial': {
+					const serial = line.appendChild(document.createElement('span'));
+					serial.classList.add('NeeloongForm-tree-serial');
+					continue;
+				}
+			}
+		}
+	}
+	destroyList.push(effect(() => {
+		const s = state.get();
+		if (!s.hasChildren) {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-close');
+				btn.classList.remove('NeeloongForm-tree-collapse-open');
+				btn.disabled = true;
+			}
+		} else if (s.collapsed) {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-close');
+				btn.classList.add('NeeloongForm-tree-collapse-open');
+				btn.disabled = false;
+			}
+		} else {
+			for (const btn of collapseList) {
+				btn.classList.remove('NeeloongForm-tree-collapse-open');
+				btn.classList.add('NeeloongForm-tree-collapse-close');
+				btn.disabled = false;
+			}
+		}
+	}));
 
 	return [root, () => {
 		for (const destroy of destroyList) {
 			destroy();
 		}
-	}, content, destroyList];
+	}, s => state.set(s)];
+}
 
+/** @import { Store, ArrayStore } from '../Store/index.mjs' */
+/** @import { StoreLayout } from '../types.mjs' */
 
+const verticalWritingMode = new Set([
+	'vertical-lr', 'vertical-rl', 'sideways-lr', 'sideways-rl',
+]);
+/**
+ *
+ * @param {Element} root
+ * @returns {[boolean, boolean]}
+ */
+function getLayout(root) {
+	const style = getComputedStyle(root);
+	const writingMode = style.writingMode?.toLowerCase();
+	const vertical = verticalWritingMode.has(writingMode);
+	const reverse = style.direction.toLowerCase() === 'rtl' !== (writingMode === 'sideways-lr');
+	return [vertical, reverse];
 }
 
-/** @import { StoreLayout } from '../types.mjs' */
+/**
+ * @typedef {object} State
+ * @property {number} level
+ * @property {number} levelValue
+ * @property {boolean} collapsed
+ * @property {boolean} hidden
+ * @property {boolean} droppable
+ * @property {Set<number>} parents
+ * @property {boolean} hasChildren
+ */
 
+/**
+ * 
+ * @param {ArrayStore} store
+ * @param {State[]} states
+ * @param {Signal.State<number>} drag
+ * @param {string} levelKey
+ * @param {*} index 
+ * @returns {State}
+ */
+function createState(store, states, drag, levelKey, index) {
+	const levelValue = new Signal.Computed(() => {
+		const child = store.child(index);
+		if (!child) { return 0; }
+		return Math.max(0, Math.floor(child.value?.[levelKey]) || 0);
+	});
+	const parentIndex = new Signal.Computed(() => {
+		const child = store.child(index);
+		if (!child) { return -1; }
+		const level = levelValue.get();
+		if (!level) { return -1; }
+		for (let k = index - 1; k >= 0; k--) {
+			if (level > states[k]?.levelValue) { return k; }
+		}
+		return -1;
+	});
+	const hasChildren = new Signal.Computed(() => {
+		const children = store.children;
+		const next = children[index + 1];
+		if (!next) { return false; }
+		const child = children[index];
+		if (!child) { return false; }
+		const level = levelValue.get();
+		return Math.floor(next.child(levelKey)?.value) > level;
+	});
+	const droppable = new Signal.Computed(() => {
+		const dragRow = drag.get();
+		if (dragRow === index) { return false; }
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return true; }
+		return parent.droppable;
+	});
+	const level = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return 0; }
+		return parent.level + 1;
+	});
+	const collapsed = new Signal.State(false);
+	const hidden = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return false; }
+		return parent.collapsed || parent.hidden;
+	});
+	/** @type {Signal.Computed<Set<number>>} */
+	const parents = new Signal.Computed(() => {
+		const pIndex = parentIndex.get();
+		const parent = states[pIndex];
+		if (!parent) { return new Set(); }
+		const set = new Set(parent.parents);
+		set.add(pIndex);
+		return set;
+	});
+	return {
+		get level() { return level.get(); },
+		get levelValue() { return levelValue.get(); },
+		get collapsed() { return collapsed.get(); },
+		set collapsed(v) { collapsed.set(v); },
+		get hidden() { return hidden.get(); },
+		get hasChildren() { return hasChildren.get(); },
+		get droppable() { return droppable.get(); },
+		get parents() { return parents.get(); },
+	};
+}
 /**
  *
- * @param {StoreLayout.Item} layout
- * @param {{label?: string | null; description?: string | null; required?: boolean | null}} [values]
- * @param {string?} [defCell]
- * @returns {[HTMLElement, () => void, HTMLElement, (() => void)[]]}
+ * @param {ArrayStore} store
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Field?} layout
+ * @param {StoreLayout.Options?} options
+ * @returns {[HTMLElement, () => void]}
  */
-function createCell(layout, values, defCell) {
-	switch (layout.cell || defCell) {
-		default: 
-		case 'block': return createBaseCell(values);
-		case 'collapse': return createCollapseCell(values);
-		case 'inline': {
-			const result = createBaseCell(values);
-			bindGrid(result[0], layout);
-			return result;
+function Tree(store, fieldRenderer, layout, options) {
+	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 {({ field: string; width: any; label: any; } | number | StoreLayout.Action[])[]} */
+	let columns = [];
+	if (Array.isArray(headerColumns)) {
+		const map = new Map(fieldList.map(v => [v.field, v]));
+		columns = headerColumns.map(v => {
+			if (typeof v === 'number') { return v; }
+			if (typeof v === 'string') { return map.get(v) || []; }
+			if (!Array.isArray(v)) { return []; }
+			/** @type {Set<StoreLayout.Action>} */
+			const options = new Set(['add', 'move', 'trigger', 'remove', 'serial', 'open', 'collapse']);
+			return v.filter(v => options.delete(v));
+		}).filter(v => !Array.isArray(v) || v.length);
+	}
+	if (!columns.length) {
+		columns = [['collapse', 'move'], fieldList[0], ['add', 'remove']];
+	}
+	if (!columns.find(v => !Array.isArray(v))) {
+		columns.push(...fieldList.slice(0, 3));
+	}
+
+
+
+	const root = document.createElement('div');
+	root.className = 'NeeloongForm-tree';
+	const main = root.appendChild(document.createElement('div'));
+	main.className = 'NeeloongForm-tree-main';
+	const splitter = root.appendChild(document.createElement('div'));
+	splitter.className = 'NeeloongForm-tree-splitter';
+	const details = root.appendChild(document.createElement('div'));
+	details.className = 'NeeloongForm-tree-details';
+	splitter.hidden = true;
+	details.hidden = true;
+	/** @type {number?} */
+	let splitterPointerId = null;
+	let splitterOffset = 0;
+	function stopMove() {
+		const pointerId = splitterPointerId;
+		if (pointerId === null) { return; }
+		splitterPointerId = null;
+		splitter.releasePointerCapture(pointerId);
+	}
+
+	splitter.addEventListener('pointerdown', e => {
+		const { pointerId } = e;
+		if (![null, pointerId].includes(splitterPointerId)) { return; }
+		splitterPointerId = pointerId;
+		splitter.setPointerCapture(pointerId);
+		switch (getLayout(splitter).map((v, i) => v ? 2 ** i : 0).reduce((a, b) => a + b)) {
+			case 0: splitterOffset = -e.offsetX; break;
+			case 1: splitterOffset = -e.offsetY; break;
+			case 2: splitterOffset = e.offsetX - splitter.offsetWidth; break;
+			case 3: splitterOffset = e.offsetY - splitter.offsetHeight; break;
+		}
+	});
+	/**
+	 * @param {boolean} vertical
+	 * @returns {number}
+	 */
+	const getSize = vertical => vertical
+		? root.clientHeight - splitter.offsetHeight
+		: root.clientWidth - splitter.offsetWidth;
+	/** @param {PointerEvent} e */
+	const updateMove = e => {
+		const [vertical, reverse] = getLayout(splitter);
+		let os = 0;
+		switch ([vertical, reverse].map((v, i) => v ? 2 ** i : 0).reduce((a, b) => a + b)) {
+			case 0: os = e.clientX - root.getBoundingClientRect().left; break;
+			case 1: os = e.clientY - root.getBoundingClientRect().top; break;
+			case 2: os = root.getBoundingClientRect().right - e.clientX; break;
+			case 3: os = root.getBoundingClientRect().bottom - e.clientY; break;
+		}
+		const value = 1 - Math.max(0, Math.min((os + splitterOffset) / getSize(vertical), 1));
+		details.style.inlineSize = `${value * 100}%`;
+	};
+	splitter.addEventListener('pointermove', e => {
+		const { pointerId } = e;
+		if (!splitter.hasPointerCapture(pointerId)) { return; }
+		updateMove(e);
+	});
+	splitter.addEventListener('pointerup', e => {
+		const { pointerId } = e;
+		if (pointerId !== splitterPointerId) { return; }
+		updateMove(e);
+		stopMove();
+	});
+	splitter.addEventListener('pointercancel', e => {
+		const { pointerId } = e;
+		if (pointerId !== splitterPointerId) { return; }
+		updateMove(e);
+		stopMove();
+	});
+
+
+	/** @type {(() => void)[]} */
+	const destroyList = [];
+	let destroyDetails = () => { };
+	const detailsStore = new Signal.State(/** @type{Store<any, any>?}*/(null));
+	/**
+	 * 
+	 * @param {Store<any, any>} store 
+	 * @returns 
+	 */
+	function createDetails(store) {
+		if (detailsStore.get() === store) { return destroyDetails; }
+		destroyDetails();
+		detailsStore.set(store);
+		const [form, destroy] = Form(store, fieldRenderer, layout, options);
+		details.appendChild(form);
+		details.hidden = false;
+		splitter.hidden = false;
+		let done = false;
+		destroyDetails = () => {
+			if (done) { return; }
+			done = true;
+			detailsStore.set(null);
+			form.remove();
+			destroy();
+			stopMove();
+			splitter.hidden = true;
+			details.hidden = true;
+		};
+		return destroyDetails;
+
+	}
+
+
+	const levelKey = layout?.levelKey || 'level';
+	const addable = new Signal.Computed(() => store.addable);
+	const deletable = { get: () => Boolean(options?.editable) };
+	/**
+	 * 
+	 * @param {number} parent 
+	 */
+	function addNode(parent) {
+		/** @type {Record<string, any>} */
+		const data = {};
+		if (parent === -2) {
+			data[levelKey] = 0;
+			store.add(data);
+			return;
+		}
+		data[levelKey] = (states[parent]?.levelValue ?? -1) + 1;
+		store.insert(parent + 1, data);
+
+	}
+	/**
+	 * 
+	 * @param {Store} child 
+	 */
+	function remove(child) {
+		store.remove(Number(child.index));
+	}
+	let dragRow = -1;
+	let drag = new Signal.State(dragRow);
+	/**
+	 * 
+	 * @param {Store} [child] 
+	 * @param {boolean} [inChildren] 
+	 */
+	function getLevel(child, inChildren) {
+		if (!child) { return 0; }
+		const newLevel = Number(states[Number(child.index)]?.levelValue) || 0;
+		if (!inChildren) { return newLevel; }
+		return newLevel + 1;
+	}
+	/**
+	 * 
+	 * @param {number} start 
+	 */
+	function getQuantity(start) {
+		let last = start + 1;
+		const level = states[dragRow]?.level ?? 0;
+		for (; (states[last]?.level ?? -1) > level; last++) { }
+		return last - dragRow;
+	}
+	/**
+	 * 
+	 * @param {Store} [child] 
+	 * @param {boolean} [inChildren] 
+	 */
+	function drop(child, inChildren) {
+		if (dragRow < 0) { return; }
+		const newLevel = Number(getLevel(child, inChildren)) || 0;
+		let quantity = getQuantity(dragRow);
+		let index = -1;
+		if (child) {
+			index = Number(child.index);
+			if (dragRow === index || states[index]?.parents?.has(dragRow)) { return; }
+			if (inChildren || index !== dragRow + quantity) {
+				if (inChildren) {
+					for (const currentLevel = states[index]?.level || 0; states[index + 1]?.level > currentLevel; index++);
+					if (index < dragRow) { index += 1; }
+				} else {
+					if (index > dragRow) { index -= 1; }
+				}
+				if (index < 0) { return; }
+			} else {
+				index = -1;
+			}
+
+		} else {
+			index = states.length - 1;
+			if (index < 0) { return; }
+		}
+		if (index >= 0 && dragRow !== index) {
+			quantity = store.move(dragRow, index, quantity);
+			if (!quantity) { return; }
+			dragRow = quantity > 1 && index > dragRow ? index - quantity + 1 : index;
+			drag.set(dragRow);
+		}
+		const levelSub = Array(quantity).fill(states[dragRow]?.level ?? 0).map((l, i) => Math.max((states[i + dragRow]?.level ?? 0) - l, 0));
+		for (let i = 0; i < quantity; i++) {
+			const c = store.children[dragRow + i]?.child(levelKey);
+			if (c) {
+				c.value = newLevel + levelSub[i];
+			}
 		}
-		case 'base': {
-			const result = createNullCell(values);
-			bindGrid(result[0], layout);
-			return result;
+
+
+	}
+	/**
+	 * 
+	 * @param {Store} child 
+	 */
+	function dragstart(child) {
+		dragRow = Number(child.index);
+		drag.set(dragRow);
+		main.classList.add('NeeloongForm-tree-moving');
+
+	}
+	/** @type {HTMLElement?} */
+	let dragenterEl = null;
+	/** @param {HTMLElement} el */
+	function dragenter(el) {
+		if (dragRow === -1) { return () => { }; }
+		dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+		dragenterEl = el;
+		dragenterEl?.classList.add('NeeloongForm-tree-drag-over');
+		return () => {
+			if (dragenterEl !== el) { return; }
+			dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+			dragenterEl = null;
+		};
+
+	}
+	function dragend() {
+		dragRow = -1;
+		drag.set(dragRow);
+		main.classList.remove('NeeloongForm-tree-moving');
+		dragenterEl?.classList.remove('NeeloongForm-tree-drag-over');
+		dragenterEl = null;
+
+	}
+	if (options?.editable) {
+		const button = main.appendChild(document.createElement('button'));
+		button.addEventListener('click', () => addNode(-1));
+		button.classList.add('NeeloongForm-tree-head-add');
+		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+	}
+	const start = main.appendChild(document.createComment(''));
+	if (options?.editable) {
+		const foot = main.appendChild(document.createElement('div'));
+		foot.classList.add('NeeloongForm-tree-foot');
+		const button = foot.appendChild(document.createElement('button'));
+		button.addEventListener('click', () => addNode(-2));
+		button.classList.add('NeeloongForm-tree-foot-add');
+		const dropFront = foot.appendChild(document.createElement('div'));
+		dropFront.classList.add('NeeloongForm-tree-drop');
+
+
+		let dragleave = () => { };
+		dropFront.addEventListener('dragover', (e) => e.preventDefault());
+		dropFront.addEventListener('dragenter', () => dragleave = dragenter(dropFront));
+		dropFront.addEventListener('dragleave', () => dragleave());
+		dropFront.addEventListener('drop', () => drop());
+
+
+		destroyList.push(watch(() => !addable.get(), disabled => { button.disabled = disabled; }, true));
+	}
+	/** @type {Map<Store, [HTMLElement, () => void, (s: State) => void]>} */
+	let seMap = new Map();
+	/** @param {Map<Store, [tbody: HTMLElement, destroy: () => void, (s: State) => void]>} map */
+	function destroyMap(map) {
+		for (const [el, destroy] of map.values()) {
+			destroy();
+			el.remove();
 		}
+
+	}
+	/** @type {State[]} */
+	const states = [];
+	const columnNames = columns.map((v) => Array.isArray(v) || typeof v === 'number' ? v : v.field);
+	const childrenResult = watch(() => store.children, function render(children) {
+		let nextNode = start.nextSibling;
+		const oldSeMap = seMap;
+		seMap = new Map();
+		const childrenLength = children.length;
+		for (let i = states.length; i < childrenLength; i++) {
+			states[i] = createState(store, states, drag, 'level', i);
+		}
+
+		let i = -1;
+		for (let child of children) {
+			i++;
+			const state = states[i];
+			const old = oldSeMap.get(child);
+			if (!old) {
+				const [el, destroy, setState] = TreeLine(child, detailsStore, fieldRenderer, layout, state, {
+					columns: columnNames,
+					remove: remove.bind(null, child),
+					dragenter,
+					dragstart: dragstart.bind(null, child),
+					dragend,
+					deletable,
+					addNode: () => addNode(Number(child.index)),
+					createDetails,
+					drop: drop.bind(null, child),
+				}, options);
+				main.insertBefore(el, nextNode);
+				seMap.set(child, [el, destroy, setState]);
+				continue;
+			}
+			oldSeMap.delete(child);
+			seMap.set(child, old);
+			old[2](state);
+			if (nextNode === old[0]) {
+				nextNode = nextNode.nextSibling;
+				continue;
+			}
+			main.insertBefore(old[0], nextNode);
+		}
+		states.splice(childrenLength);
+		destroyMap(oldSeMap);
+	}, true);
+
+	return [root, () => {
+		start.remove();
+		destroyMap(seMap);
+		childrenResult();
+		destroyDetails?.();
+		for (const destroy of destroyList) {
+			destroy();
+		}
+	}];
+}
+
+/**
+ * 
+ * @param {string | ParentNode} html 
+ * @param {Store<any, any>} store 
+ * @param {StoreLayout.Renderer} fieldRenderer 
+ * @param {StoreLayout.Options?} options
+ * @param {StoreLayout.Field?} layout
+ * @returns 
+ */
+function Html(html, store, fieldRenderer, options, layout) {
+	const htmlContent = getHtmlContent(html);
+	const destroy = renderHtml(store, fieldRenderer, htmlContent, options, layout);
+	return [htmlContent, destroy];
+}
+
+/**
+ * 
+ * @param {StoreLayout.Field['arrayStyle']?} arrayStyle 
+ */
+function getArrayCell(arrayStyle) {
+	switch(arrayStyle) {
+		case 'tree': return Tree;
+		default: return Table;
 	}
 
 }
@@ -5500,46 +6309,22 @@ function FormField(store, fieldRenderer, layout, options, inline = false) {
 	}
 	const isObject = type && typeof type === 'object';
 	const html = layout?.html;
-	if (html) {
-		const [root, destroy, content, destroyList] = createCell(layout, store, isObject ? 'collapse' : 'base');
-		const htmlContent = getHtmlContent(html);
-		destroyList.push(renderHtml(store, fieldRenderer, htmlContent, options, layout));
-		content.appendChild(htmlContent);
-		return [root, destroy];
-	}
-	if (isObject) {
-		const [root, destroy, content, destroyList] = createCollapseCell(store);
-		destroyList.push(effect(() => root.hidden = store.hidden));
-		if (typeof component === 'function') {
-			const r = fieldRenderer(store, component, options);
-			if (r) {
-				const [el, destroy] = r;
-				content.appendChild(el);
-				destroyList.push(destroy);
-			}
-		} else if (store instanceof ArrayStore) {
-			const [table, destroy] = Table(store, fieldRenderer, layout, options);
-			content.appendChild(table);
-			destroyList.push(destroy);
-		} else {
-			const [form, destroy] = Form(store, fieldRenderer, layout, options);
-			content.appendChild(form);
-			destroyList.push(destroy);
-		}
-		return [root, destroy];
-	}
-
-
-	const [root, destroy, content, destroyList] = createNullCell(store);
-	bindGrid(root, layout);
+	/** @type {StoreLayout.Grid['cell']} */
+	const cellType = isObject
+		? store instanceof ArrayStore ? 'collapse' : 'fieldset'
+		: html ? 'base' : 'inline';
+	const [root, destroy, content, destroyList] = createCell(layout, store, cellType, isObject);
 	destroyList.push(effect(() => root.hidden = store.hidden));
-	if (typeof component === 'function') {
-		const r = fieldRenderer(store, component, options);
-		if (r) {
-			const [el, destroy] = r;
-			content.appendChild(el);
-			destroyList.push(destroy);
-		}
+
+	const r =
+		html && Html(html, store, fieldRenderer, options, layout)
+		|| typeof component === 'function' && fieldRenderer(store, component, options)
+		|| store instanceof ArrayStore && getArrayCell(layout?.arrayStyle)(store, fieldRenderer, layout, options)
+		|| isObject && Form(store, fieldRenderer, layout, options);
+	if (r) {
+		const [el, destroy] = r;
+		content.appendChild(el);
+		destroyList.push(destroy);
 	}
 	return [root, destroy];
 }
@@ -5555,9 +6340,18 @@ function FormField(store, fieldRenderer, layout, options, inline = false) {
  * @returns {[ParentNode, () => void]}
  */
 function FormButton(store, layout, options) {
-	const [root, destroy, content] = createCell(layout, store);
+	const [root, destroy, content, destroyList] = createCell(layout, store);
 	const button = document.createElement('button');
-	button.innerText = layout.text || '';
+	destroyList.push(() => {
+		const t = layout.text;
+		const text = typeof t === 'function' ? t(store, options) : t;
+		button.innerText = text ?? '';
+	});
+	destroyList.push(() => {
+		const d = layout.disabled;
+		const disabled = typeof d === 'function' ? d(store, options) : d;
+		button.disabled = Boolean(disabled);
+	});
 	button.className = 'NeeloongForm-item-button';
 	content.appendChild(button);
 	const click = layout.click;