@neeloong/form 0.1.0

package/index.mjs

@@ -0,0 +1,3076 @@
+/*!
+* @neeloong/form v0.1.0
+* (c) 2024-2025 Fierflame
+* @license Apache-2.0
+*/
+
+import { Signal } from 'signal-polyfill';
+export { Signal } from 'signal-polyfill';
+
+/** @import Store from './index.mjs' */
+
+/**
+ *
+ * @param {Store} self
+ * @param {boolean?} [defState]
+ * @param {boolean | ((store: Store) => boolean) | null} [fn]
+ * @param {Signal.Computed<boolean>?} [parent]
+ * @returns {[Signal.State<boolean?>, Signal.Computed<boolean>]}
+ */
+const createBooleanStates = (self, defState, fn, parent) => {
+
+	const selfState = new Signal.State(typeof defState === 'boolean' ? defState : null);
+	const scriptState = typeof fn === 'function' ? new Signal.Computed(() => fn(self)) : fn ? new Signal.Computed(() => true) : new Signal.Computed(() => false);
+
+	const getState = () => {
+		const s = selfState.get();
+		return s === null ? scriptState.get() : s;
+	};
+	const state = parent
+		? new Signal.Computed(() => parent.get() || getState())
+		: new Signal.Computed(getState);
+
+	return [selfState, state];
+
+};
+
+/** @import { Schema } from '../types.mjs' */
+/**
+ * @template [T=any]
+ */
+class Store {
+	/**
+	 * @param {Schema} schema
+	 * @param {object} [options] 
+	 * @param {boolean} [options.new] 
+	 */
+	static create(schema, options = {}) {
+		return new ObjectStore({type: null, props: schema}, { ...options, parent: null });
+	}
+	#null = false;
+	get null() { return this.#null; }
+	/**
+	 * @param {Schema.Field} schema
+	 * @param {object} options 
+	 * @param {*} [options.parent] 
+	 * @param {*} [options.state] 
+	 * @param {number | string | null} [options.index] 
+	 * @param {number} [options.length] 
+	 * @param {boolean} [options.null] 
+	 * @param {boolean} [options.new] 
+	 * @param {boolean} [options.hidden] 
+	 * @param {boolean} [options.clearable] 
+	 * @param {boolean} [options.required] 
+	 * @param {boolean} [options.readonly] 
+	 * @param {boolean} [options.disabled] 
+	 * @param {((value: any) => any)?} [options.setValue] 
+	 * @param {((value: any) => any)?} [options.setState] 
+	 * @param {((value: any, state: any) => [value: any, state: any])?} [options.convert] 
+	 * @param {((value: T?, index: any) => void)?} [options.onUpdate] 
+	 * @param {((value: T?, index: any) => void)?} [options.onUpdateState] 
+	 */
+	constructor(schema, {
+		null: isNull, state,
+		setValue, setState, convert, onUpdate, onUpdateState,
+		index, length, new: isNew, parent: parentNode,
+		hidden, clearable, required, disabled, readonly,
+	}) {
+		this.schema = schema;
+		this.#state.set(typeof state === 'object' && state || {});
+		const parent = parentNode instanceof Store ? parentNode : null;
+		if (parent) {
+			this.#parent = parent;
+			this.#root = parent.#root;
+			// TODO: 事件向上冒泡
+		}
+
+		const selfNewState = new Signal.State(Boolean(isNew));
+		this.#selfNew = selfNewState;
+		/** @type {Signal.Computed<boolean>} */
+		const newState = parent
+			? new Signal.Computed(() => parent.#new.get() || selfNewState.get())
+			: new Signal.Computed(() => selfNewState.get());
+
+		this.#new = newState;
+		const immutable = Boolean(schema.immutable);
+		const creatable = schema.creatable !== false;
+		this.#immutable = immutable;
+		this.#creatable = creatable;
+		this.#editable = new Signal.Computed(() => newState.get() ? creatable : !immutable);
+
+		[this.#selfHidden, this.#hidden] = createBooleanStates(this, hidden, schema.hidden, parent ? parent.#hidden : null);
+		[this.#selfClearable, this.#clearable] = createBooleanStates(this, clearable, schema.clearable, parent ? parent.#clearable : null);
+		[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.#selfReadonly, this.#readonly] = createBooleanStates(this, readonly, schema.readonly, parent ? parent.#readonly : null);
+
+		if (isNull) {
+			this.#null = true;
+			return;
+		}
+		this.#onUpdate = onUpdate || null;
+		this.#onUpdateState = onUpdateState || null;
+		this.#setValue = typeof setValue === 'function' ? setValue : null;
+		this.#setState = typeof setState === 'function' ? setState : null;
+		this.#convert = typeof convert === 'function' ? convert : null;
+		this.#length.set(length || 0);
+		this.#index.set(index ?? '');
+
+	}
+	#destroyed = false;
+	/** @type {((value: any) => any)?} */
+	#setValue = null
+	/** @type {((value: any) => any)?} */
+	#setState = null
+	/** @type {((value: any, state: any) => [value: any, state: any])?} */
+	#convert = null
+	/** @type {((value: any, index: any) => void)?} */
+	#onUpdate = null
+	/** @type {((value: any, index: any) => void)?} */
+	#onUpdateState = null
+	/** @readonly @type {Store?} */
+	#parent = null;
+	/** @readonly @type {Store} */
+	#root = this;
+	get parent() { return this.#parent; }
+	get root() { return this.#root; }
+
+	#length = new Signal.State(0);
+	get length() { return this.#length.get(); }
+	set length(v) { this.#length.set(v); }
+	#index = new Signal.State(/** @type {string | number} */(''));
+	get index() { return this.#index.get(); }
+	set index(v) { this.#index.set(v); }
+	get no() {
+		if (this.#null) { return ''; }
+		const index = this.index;
+		return typeof index === 'number' ? index + 1 : index;
+	}
+
+	#creatable = true;
+	get creatable() { return this.#creatable; }
+	#immutable = false;
+	get immutable() { return this.#immutable; }
+
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#new
+	/** @readonly @type {Signal.State<boolean>} */
+	#selfNew
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#editable
+	get selfNew() { return this.#selfNew.get(); }
+	set selfNew(v) { this.#selfNew.set(Boolean(v)); }
+	get new() { return this.#new.get(); }
+	set new(v) { this.#selfNew.set(Boolean(v)); }
+	get editable() { return this.#editable.get(); }
+
+	/** @readonly @type {Signal.State<boolean?>} */
+	#selfHidden
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#hidden
+	get selfHidden() { return this.#selfHidden.get(); }
+	set selfHidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
+	get hidden() { return this.#hidden.get(); }
+	set hidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
+
+	/** @readonly @type {Signal.State<boolean?>} */
+	#selfClearable
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#clearable
+	get selfClearable() { return this.#selfClearable.get(); }
+	set selfClearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
+	get clearable() { return this.#clearable.get(); }
+	set clearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
+
+	/** @readonly @type {Signal.State<boolean?>} */
+	#selfRequired
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#required
+	get selfRequired() { return this.#selfRequired.get(); }
+	set selfRequired(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
+	get required() { return this.#required.get(); }
+	set required(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
+
+	/** @readonly @type {Signal.State<boolean?>} */
+	#selfDisabled
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#disabled
+	get selfDisabled() { return this.#selfDisabled.get(); }
+	set selfDisabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
+	get disabled() { return this.#disabled.get(); }
+	set disabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
+
+	/** @readonly @type {Signal.State<boolean?>} */
+	#selfReadonly
+	/** @readonly @type {Signal.Computed<boolean>} */
+	#readonly
+	get selfReadonly() { return this.#selfReadonly.get(); }
+	set selfReadonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
+	get readonly() { return this.#readonly.get(); }
+	set readonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
+
+
+
+
+
+	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
+	*[Symbol.iterator]() {}
+	/**
+	 * 
+	 * @param {string | number} key 
+	 * @returns {Store?}
+	 */
+	child(key) { return null; }
+
+	#set = false;
+	/** @type {T?} */
+	#initValue = null;
+	#lastValue = this.#initValue;
+	#value = new Signal.State(this.#initValue);
+
+	
+	#state = new Signal.State(/** @type {any} */(null));
+	#lastState = this.#state.get();
+
+
+	get changed() { return this.#value.get() === this.#lastValue; }
+	get saved() { return this.#value.get() === this.#initValue; }
+
+	get value() { return this.#value.get(); }
+	set value(v) {
+		if (this.#destroyed) { return; }
+		const val = this.#setValue?.(v) || v;
+		this.#value.set(val);
+		if (!this.#set) {
+			this.#set = true;
+			this.#initValue = v;
+		}
+		this.#onUpdate?.(this.#value.get(), this.#index.get());
+		this.#requestUpdate();
+	}
+
+	get state() { return this.#state.get(); }
+	set state(v) {
+		if (this.#destroyed) { return; }
+		const sta = this.#setState?.(v) || v;
+		this.#state.set(sta);
+		this.#set = true;
+		this.#onUpdateState?.(this.#state.get(), this.#index.get());
+		this.#requestUpdate();
+	}
+	#requestUpdate() {
+		if (this.#needUpdate) { return; }
+		this.#needUpdate = true;
+		queueMicrotask(() => {
+			const oldValue = this.#value.get();
+			const oldState = this.#state.get();
+			return this.#runUpdate(oldValue, oldState);
+		});
+	}
+
+
+	#needUpdate = false;
+	/**
+	 * 
+	 * @param {T} value 
+	 * @param {*} state 
+	 * @returns 
+	 */
+	#toUpdate(value, state) {
+		if (this.#destroyed) { return value; }
+		const [val,sta] = this.#convert?.(value, state) || [value, state];
+		if(this.#value.get() === val && this.#state.get() === sta) { return [val,sta] }
+		this.#value.set(val);
+		this.#state.set(sta);
+		if (!this.#set) {
+			this.#set = true;
+			this.#initValue = val;
+		}
+		return this.#runUpdate(val, sta);
+	}
+	/**
+	 * 
+	 * @param {*} val 
+	 * @param {*} sta 
+	 * @returns 
+	 */
+	#runUpdate(val, sta) {
+		if (this.#destroyed) { return [val, sta]; }
+		this.#needUpdate = false;
+		if (val && typeof val === 'object') {
+			/** @type {T} */
+			// @ts-ignore
+			let newValues = Array.isArray(val) ? [...val] : {...val};
+			let newStates = Array.isArray(val) ? Array.isArray(sta) ? [...sta] : [] : {...sta};
+			let updated = false;
+			for (const [key, field] of this) {
+				// @ts-ignore
+				const data = val[key];
+				const state = sta?.[key];
+				const [newData, newState] = field.#toUpdate(data, state);
+				if (data !== newData) {
+					// @ts-ignore
+					newValues[key] = newData;
+					updated = true;
+				}
+				if (state !== newState) {
+					newStates[key] = newState;
+					updated = true;
+				}
+			}
+			if (updated) {
+				val = newValues;
+				sta = newStates;
+				this.#value.set(val);
+				this.#state.set(newStates);
+			}
+		}
+		if (this.#lastValue === val && this.#lastState === sta) {
+			return [val, sta];
+		}
+		this.#lastValue = val;
+		this.#lastState = sta;
+		return [val, sta];
+
+	}
+
+
+
+	get destroyed() { return this.#destroyed; }
+	destroy() {
+		if (this.#destroyed) { return; }
+		this.#destroyed = true;
+		for (const [, field] of this) {
+			field.destroy();
+		}
+	}
+
+}
+
+
+
+class ObjectStore extends Store {
+	/** @type {Record<string, Store>} */
+	#children
+	*[Symbol.iterator]() {yield* Object.entries(this.#children);}
+	/**
+	 * 
+	 * @param {string | number} key 
+	 * @returns {Store?}
+	 */
+	child(key) { return this.#children[key] || null; }
+	/**
+	 * @param {Schema.Field} schema
+	 * @param {object} [options] 
+	 * @param {Store?} [options.parent] 
+	 * @param {string | number} [options.index] 
+	 * @param {boolean} [options.new] 
+	 * @param {(value: any, index: any) => void} [options.onUpdate] 
+	 * @param {(value: any, index: any) => void} [options.onUpdateState] 
+	 */
+	constructor(schema,{ parent, index, new: isNew, onUpdate, onUpdateState } = {}) {
+		super(schema, {
+			parent, index, new: isNew, onUpdate, onUpdateState,
+			setValue(v) {
+				if (typeof v !== 'object') { return {}; }
+				return v;
+			},
+			setState(v) {
+				if (typeof v !== 'object') { return {}; }
+				return v;
+			},
+			convert(v, state) {
+				return [
+					typeof v === 'object' ? v : {},
+					typeof state === 'object' ? state : {},
+				]
+			},
+		});
+		const children = Object.create(null);
+		const childCommonOptions = {
+			parent: this,
+			/** @param {*} value @param {*} index */
+			onUpdate: (value, index) => {
+				this.value = {...this.value, [index]: value};
+			},
+			/** @param {*} state @param {*} index */
+			onUpdateState: (state, index) => {
+				this.state = {...this.state, [index]: state};
+			}
+		};
+
+		for (const [index, field] of Object.entries(schema.props || {})) {
+			let child;
+			if (typeof field.type === 'string') {
+				if (field.array) {
+					child = new ArrayStore(field, {...childCommonOptions, index});
+				} else {
+					child = new Store(field, {...childCommonOptions, index});
+				}
+			} else if (field.array) {
+				child = new ArrayStore(field, {...childCommonOptions, index});
+			} else {
+				child = new ObjectStore(field, { ...childCommonOptions, index});
+			}
+			children[index] = child;
+		}
+		this.#children = children;
+	}
+}
+
+/**
+ * @template [T=any]
+ * @extends {Store<(T | null)[]>}
+ */
+class ArrayStore extends Store {
+	/** @type {(index: number, isNew?: boolean) => Store} */
+	#create = () => {throw new Error}
+	#children = new Signal.State(/** @type {Store[]} */([]));
+	get children() { return [...this.#children.get()]; }
+	*[Symbol.iterator]() { return yield*[...this.#children.get().entries()]; }
+	/**
+	 * 
+	 * @param {string | number} key 
+	 * @returns {Store?}
+	 */
+	child(key) {
+		const children = this.#children.get();
+		if (typeof key === 'number' && key < 0) {
+			return children[children.length + key] || null;
+		}
+		return children[Number(key)] || null;
+	}
+	/**
+	 * @param {Schema.Field} schema
+	 * @param {object} [options] 
+	 * @param {Store?} [options.parent]
+	 * @param {string | number | null} [options.index] 
+	 * @param {boolean} [options.new] 
+	 * @param {(value: any, index: any) => void} [options.onUpdate] 
+	 * @param {(value: any, index: any) => void} [options.onUpdateState] 
+	 */
+	constructor(schema,  { parent, onUpdate, onUpdateState, index, new: isNew} = {}) {
+		// @ts-ignore
+		const updateChildren = (list) => {
+			if (this.destroyed) { return; }
+			const length = Array.isArray(list) && list.length || 0;
+			const children = [...this.#children.get()];
+			const oldLength = children.length;
+			for (let i = children.length; i < length; i++) {
+					children.push(this.#create(i));
+			}
+			for (const schema of children.splice(length)) {
+				schema.destroy();
+			}
+			if (oldLength !== length) {
+				this.length = children.length;
+				this.#children.set(children);
+			}
+
+		};
+		super(schema, {
+			index, new: isNew, parent,
+			state: [],
+			setValue(v) { return Array.isArray(v) ? v : v == null ? [] : [v] },
+			setState(v) { return Array.isArray(v) ? v : v == null ? [] : [v] },
+			convert(v, state) {
+				const val = Array.isArray(v) ? v : v == null ? [] : [v];
+				updateChildren(val);
+				return [
+					val,
+					(Array.isArray(state) ? state : v == null ? [] : [state]),
+				];
+			},
+			onUpdate:(value, index) => {
+				updateChildren(value);
+				onUpdate?.(value, index);
+			},
+			onUpdateState,
+		});
+		const childCommonOptions = {
+			parent: this,
+			/** @param {*} value @param {*} index */
+			onUpdate: (value, index) => {
+				const val = [...this.value || []];
+				if (val.length < index) {
+					val.length = index;
+				}
+				val[index] = value;
+				this.value = val;
+			},
+			/** @param {*} state @param {*} index */
+			onUpdateState: (state, index) => {
+				const sta = [...this.state || []];
+				if (sta.length < index) {
+					sta.length = index;
+				}
+				sta[index] = state;
+				this.state = sta;
+			},
+		};
+		if (typeof schema.type === 'string') {
+			this.#create = (index, isNew) =>  {
+				const child = new Store(schema, {...childCommonOptions, index, new: isNew });
+				child.index = index;
+				return child
+			};
+		} else if (!Array.isArray(schema.props)) {
+			this.#create = (index, isNew) =>  {
+				const child = new ObjectStore(schema, { ...childCommonOptions, index, new: isNew});
+				child.index = index;
+				return child
+			};
+		} else {
+			throw new Error();
+		}
+		
+	}
+	/**
+	 * 
+	 * @param {number} index 
+	 * @param {T} value 
+	 * @param {boolean} [isNew] 
+	 * @returns 
+	 */
+	insert(index, value, isNew) {
+		if (this.destroyed) { return false; }
+		const data = this.value;
+		if (!Array.isArray(data)) { return false; }
+		const children = [...this.#children.get()];
+		const insertIndex = Math.max(0, Math.min(Math.floor(index), children.length));
+		const item = this.#create(insertIndex, isNew);
+		item.new = true;
+		children.splice(insertIndex, 0, item);
+		for (let i = index + 1; i < children.length; i++) {
+			children[i].index = i;
+		}
+		const val = [...data];
+		val.splice(insertIndex, 0, value);
+		const state = this.state;
+		if (Array.isArray(state)) {
+			const sta = [...state];
+			sta.splice(insertIndex, 0, {});
+			this.state = sta;
+		}
+		this.value = val;
+		this.length = children.length;
+		this.#children.set(children);
+		return true;
+	}
+	/**
+	 * 
+	 * @param {T} value 
+	 * @returns 
+	 */
+	add(value) {
+		return this.insert(this.#children.get().length, value);
+	}
+	/**
+	 * 
+	 * @param {number} index 
+	 * @returns 
+	 */
+	remove(index) {
+		if (this.destroyed) { return; }
+		const data = this.value;
+		if (!Array.isArray(data)) { return; }
+		const children = [...this.#children.get()];
+		const removeIndex = Math.max(0, Math.min(Math.floor(index), children.length));
+		const [item] = children.splice(removeIndex, 1);
+		if (!item) { return; }
+		for (let i = index; i < children.length; i++) {
+			children[i].index = i;
+		}
+		item.destroy();
+		const val = [...data];
+		const [value] = val.splice(removeIndex, 1);
+		const state = this.state;
+		if (Array.isArray(state)) {
+			const sta = [...this.state];
+			sta.splice(removeIndex, 1);
+			this.state = sta;
+		}
+		this.value = val;
+		this.length = children.length;
+		this.#children.set(children);
+		return value;
+
+	}
+	/**
+	 * 
+	 * @param {number} from 
+	 * @param {number} to 
+	 * @returns 
+	 */
+	move(from, to) {
+		if (this.destroyed) { return false; }
+		const data = this.value;
+		if (!Array.isArray(data)) { return false; }
+		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);
+		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 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;
+			}
+			this.state = sta;
+		}
+		this.value = val;
+		this.#children.set(children);
+		return true;
+
+	}
+	/**
+	 * 
+	 * @param {number} a 
+	 * @param {number} b 
+	 * @returns 
+	 */
+	exchange(a, b) {
+		if (this.destroyed) { return false; }
+		const data = this.value;
+		if (!Array.isArray(data)) { return false; }
+		const children = [...this.#children.get()];
+		const aItem = children[a];
+		const bItem = children[b];
+		if (!aItem || !bItem) { return false; }
+		children[b] = aItem;
+		children[a] = bItem;
+		aItem.index = b;
+		bItem.index = a;
+		const val = [...data];
+		const aValue = val[a];
+		const bValue = val[b];
+		val[b] = aValue;
+		val[a] = bValue;
+		const state = this.state;
+		if (Array.isArray(state)) {
+			const sta = [...state];
+			const aValue = sta[a];
+			const bValue = sta[b];
+			sta[b] = aValue;
+			sta[a] = bValue;
+			this.state = sta;
+		}
+		this.value = val;
+		this.#children.set(children);
+		return true;
+	}
+}
+
+const errors = {
+	CALC: 'no `creteCalc` option, no expression parsing support',
+	EVENT: 'no `creteEvent`, options, no event parsing support',
+	/** @param {string} endTag @param {string} startTag */
+	CLOSE: (endTag, startTag) => `end tag name: ${endTag} is not match the current start tagName: ${startTag}`,
+	/** @param {string} name */
+	UNCLOSE: (name) => `end tag name: ${name} maybe not complete`,
+	/** @param {string} char */
+	QUOTE: (char) => `attribute value no end \'${char}\' match`,
+	CLOSE_SYMBOL: `elements closed character '/' and '>' must be connected to`,
+	/** @param {string} endTag @param {string} [startTag] */
+	UNCOMPLETED: (endTag, startTag) => startTag 
+	? `end tag name: ${endTag} is not complete: ${startTag}`
+	: `end tag name: ${endTag} maybe not complete`,
+	/** @param {string} entity */
+	ENTITY: entity => `entity not found: ${entity}`,
+	/** @param {string} symbol */
+	SYMBOL: symbol => `unexpected symbol: ${symbol}`,
+	/** @param {string} tag */
+	TAG: tag => `invalid tagName: ${tag}`,
+	/** @param {string} attr */
+	ATTR: attr => `invalid attribute: ${attr}`,
+	EQUAL: 'attribute equal must after attrName',
+	ATTR_VALUE: 'attribute value must after "="',
+	EOF: `unexpected end of file`,
+};
+class ParseError extends Error {
+	/**
+	 * @param {keyof typeof errors} code
+	 * @param {...*} p 
+	 */
+	constructor(code, ...p) {
+		/** @type {*} */
+		const f = errors[code];
+		if (typeof f === 'function') {
+			super(f(...p));
+
+		} else {
+			super(f);
+		}
+		this.code = code;
+	}
+}
+
+/** @import * as Layout from './index.mjs' */
+
+const attrPattern = /^(?<decorator>[:@!+*\.]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
+const nameRegex = /^(?<name>[a-zA-Z$\p{Unified_Ideograph}_][\da-zA-Z$\p{Unified_Ideograph}_]*)?$/u;
+/**
+ * @param {Layout.Node} node
+ * @param {Exclude<Layout.Options['creteCalc'], undefined>} creteCalc
+ * @param {Exclude<Layout.Options['creteEvent'], undefined>} creteEvent
+ */
+function createAttributeAdder(node, creteCalc, creteEvent) {
+	const { attrs, directives, events, classes, styles, vars, aliases } = node;
+	/**
+	 * @param {string} qName
+	 * @param {string} value
+	 */
+	function addAttribute(qName, value) {
+		const attr = attrPattern.exec(qName
+			.replace(/．/g,'.')
+			.replace(/：/g,':')
+			.replace(/＠/g,'@')
+			.replace(/＋/g,'+')
+			.replace(/－/g,'-')
+			.replace(/[＊×]/g,'*')
+			.replace(/！/g, '!'))?.groups;
+		if (!attr) { throw new ParseError('ATTR', qName); }
+		const { name } = attr;
+		const decorator = attr.decorator?.toLowerCase();
+		if (!decorator) {
+			attrs[name] = value;
+		} else if (decorator === ':') {
+			attrs[name] = nameRegex.test(value) ? {name: value} : creteCalc(value);
+		} else if (decorator === '.') {
+			classes[name] = !value ? true : nameRegex.test(value) ? value : creteCalc(value);
+		} else if (decorator === 'style:') {
+			styles[name] = nameRegex.test(value) ? value : creteCalc(value);
+		} else if (decorator === '@') {
+			events[name] = nameRegex.test(value) ? value : creteEvent(value);
+		} else if (decorator === '+') {
+			vars[name] = !value ? '' : nameRegex.test(value) ? value : creteCalc(value);
+		} else if (decorator === '*') {
+			aliases[name] = nameRegex.test(value) ? value : creteEvent(value);
+		} else if (decorator === '!') {
+			const key = name.toString();
+			switch (key) {
+				case 'fragment':
+				case 'else':
+				case 'enum':
+					directives[key] = true;
+					break;
+				case 'if':
+				case 'text':
+				case 'html':
+					directives[key] = nameRegex.test(value) ? value : creteCalc(value);
+					break;
+				case 'bind':
+				case 'value':
+				case 'comment':
+					directives[key] = value;
+					break;
+			}
+		}
+	}
+	return addAttribute;
+}
+
+/** @import * as Layout from './index.mjs' */
+
+/**
+ * @param {string} name
+ * @param {string?} [is]
+ * @returns {Layout.Node}
+ * 
+ */
+function createElement(name, is) {
+	return {
+		name,
+		is,
+		children: [],
+		attrs: Object.create(null),
+		events: Object.create(null),
+		directives: Object.create(null),
+		classes: Object.create(null),
+		styles: Object.create(null),
+		vars: Object.create(null),
+		aliases: Object.create(null),
+	};
+}
+
+/** @type {Record<string, string>} */
+var entityMap = {
+       lt: '<',
+       gt: '>',
+       amp: '&',
+       quot: '"',
+       apos: "'",
+       
+       Agrave: 'À',
+       Aacute: 'Á',
+       Acirc: 'Â',
+       Atilde: 'Ã',
+       Auml: 'Ä',
+       Aring: 'Å',
+       AElig: 'Æ',
+       Ccedil: 'Ç',
+       Egrave: 'È',
+       Eacute: 'É',
+       Ecirc: 'Ê',
+       Euml: 'Ë',
+       Igrave: 'Ì',
+       Iacute: 'Í',
+       Icirc: 'Î',
+       Iuml: 'Ï',
+       ETH: 'Ð',
+       Ntilde: 'Ñ',
+       Ograve: 'Ò',
+       Oacute: 'Ó',
+       Ocirc: 'Ô',
+       Otilde: 'Õ',
+       Ouml: 'Ö',
+       Oslash: 'Ø',
+       Ugrave: 'Ù',
+       Uacute: 'Ú',
+       Ucirc: 'Û',
+       Uuml: 'Ü',
+       Yacute: 'Ý',
+       THORN: 'Þ',
+       szlig: 'ß',
+       agrave: 'à',
+       aacute: 'á',
+       acirc: 'â',
+       atilde: 'ã',
+       auml: 'ä',
+       aring: 'å',
+       aelig: 'æ',
+       ccedil: 'ç',
+       egrave: 'è',
+       eacute: 'é',
+       ecirc: 'ê',
+       euml: 'ë',
+       igrave: 'ì',
+       iacute: 'í',
+       icirc: 'î',
+       iuml: 'ï',
+       eth: 'ð',
+       ntilde: 'ñ',
+       ograve: 'ò',
+       oacute: 'ó',
+       ocirc: 'ô',
+       otilde: 'õ',
+       ouml: 'ö',
+       oslash: 'ø',
+       ugrave: 'ù',
+       uacute: 'ú',
+       ucirc: 'û',
+       uuml: 'ü',
+       yacute: 'ý',
+       thorn: 'þ',
+       yuml: 'ÿ',
+       nbsp: '\u00a0',
+       iexcl: '¡',
+       cent: '¢',
+       pound: '£',
+       curren: '¤',
+       yen: '¥',
+       brvbar: '¦',
+       sect: '§',
+       uml: '¨',
+       copy: '©',
+       ordf: 'ª',
+       laquo: '«',
+       not: '¬',
+       shy: '­­',
+       reg: '®',
+       macr: '¯',
+       deg: '°',
+       plusmn: '±',
+       sup2: '²',
+       sup3: '³',
+       acute: '´',
+       micro: 'µ',
+       para: '¶',
+       middot: '·',
+       cedil: '¸',
+       sup1: '¹',
+       ordm: 'º',
+       raquo: '»',
+       frac14: '¼',
+       frac12: '½',
+       frac34: '¾',
+       iquest: '¿',
+       times: '×',
+       divide: '÷',
+       forall: '∀',
+       part: '∂',
+       exist: '∃',
+       empty: '∅',
+       nabla: '∇',
+       isin: '∈',
+       notin: '∉',
+       ni: '∋',
+       prod: '∏',
+       sum: '∑',
+       minus: '−',
+       lowast: '∗',
+       radic: '√',
+       prop: '∝',
+       infin: '∞',
+       ang: '∠',
+       and: '∧',
+       or: '∨',
+       cap: '∩',
+       cup: '∪',
+       'int': '∫',
+       there4: '∴',
+       sim: '∼',
+       cong: '≅',
+       asymp: '≈',
+       ne: '≠',
+       equiv: '≡',
+       le: '≤',
+       ge: '≥',
+       sub: '⊂',
+       sup: '⊃',
+       nsub: '⊄',
+       sube: '⊆',
+       supe: '⊇',
+       oplus: '⊕',
+       otimes: '⊗',
+       perp: '⊥',
+       sdot: '⋅',
+       Alpha: 'Α',
+       Beta: 'Β',
+       Gamma: 'Γ',
+       Delta: 'Δ',
+       Epsilon: 'Ε',
+       Zeta: 'Ζ',
+       Eta: 'Η',
+       Theta: 'Θ',
+       Iota: 'Ι',
+       Kappa: 'Κ',
+       Lambda: 'Λ',
+       Mu: 'Μ',
+       Nu: 'Ν',
+       Xi: 'Ξ',
+       Omicron: 'Ο',
+       Pi: 'Π',
+       Rho: 'Ρ',
+       Sigma: 'Σ',
+       Tau: 'Τ',
+       Upsilon: 'Υ',
+       Phi: 'Φ',
+       Chi: 'Χ',
+       Psi: 'Ψ',
+       Omega: 'Ω',
+       alpha: 'α',
+       beta: 'β',
+       gamma: 'γ',
+       delta: 'δ',
+       epsilon: 'ε',
+       zeta: 'ζ',
+       eta: 'η',
+       theta: 'θ',
+       iota: 'ι',
+       kappa: 'κ',
+       lambda: 'λ',
+       mu: 'μ',
+       nu: 'ν',
+       xi: 'ξ',
+       omicron: 'ο',
+       pi: 'π',
+       rho: 'ρ',
+       sigmaf: 'ς',
+       sigma: 'σ',
+       tau: 'τ',
+       upsilon: 'υ',
+       phi: 'φ',
+       chi: 'χ',
+       psi: 'ψ',
+       omega: 'ω',
+       thetasym: 'ϑ',
+       upsih: 'ϒ',
+       piv: 'ϖ',
+       OElig: 'Œ',
+       oelig: 'œ',
+       Scaron: 'Š',
+       scaron: 'š',
+       Yuml: 'Ÿ',
+       fnof: 'ƒ',
+       circ: 'ˆ',
+       tilde: '˜',
+       ensp: ' ',
+       emsp: ' ',
+       thinsp: ' ',
+       zwnj: '‌',
+       zwj: '‍',
+       lrm: '‎',
+       rlm: '‏',
+       ndash: '–',
+       mdash: '—',
+       lsquo: '‘',
+       rsquo: '’',
+       sbquo: '‚',
+       ldquo: '“',
+       rdquo: '”',
+       bdquo: '„',
+       dagger: '†',
+       Dagger: '‡',
+       bull: '•',
+       hellip: '…',
+       permil: '‰',
+       prime: '′',
+       Prime: '″',
+       lsaquo: '‹',
+       rsaquo: '›',
+       oline: '‾',
+       euro: '€',
+       trade: '™',
+       larr: '←',
+       uarr: '↑',
+       rarr: '→',
+       darr: '↓',
+       harr: '↔',
+       crarr: '↵',
+       lceil: '⌈',
+       rceil: '⌉',
+       lfloor: '⌊',
+       rfloor: '⌋',
+       loz: '◊',
+       spades: '♠',
+       clubs: '♣',
+       hearts: '♥',
+       diams: '♦'
+};
+
+/** @import * as Layout from './index.mjs' */
+
+const tagNamePattern = /^(?<name>[\w\p{Unified_Ideograph}_][-\.\|:|d\w\p{Unified_Ideograph}_:]*)(?:|(?<is>[\w\p{Unified_Ideograph}_][-\.\|:|d\w\p{Unified_Ideograph}_]*))?$/u;
+
+/**
+ * 
+ * @param {string} c 
+ * @returns 
+ */
+function isSpace(c) {
+	return c === '0x80' || c <= ' ';
+}
+/**
+ * 
+ * @param {string} c 
+ * @returns 
+ */
+function isIdCode(c) {
+	return c !== '=' && c !== '/' && c !== '>' && c && c !== '\'' && c !== '"' && !isSpace(c);
+}
+
+/**
+ * 
+ * @param {string} source 
+ * @param {number} elStartEnd 
+ * @param {string} name 
+ * @param {*} closeMap 
+ * @returns 
+ */
+function fixSelfClosed(source, elStartEnd, name, closeMap) {
+	let pos = closeMap[name];
+	if (pos == null) {
+		pos = source.lastIndexOf('</' + name + '>');
+		if (pos < elStartEnd) {
+			pos = source.lastIndexOf('</' + name);
+		}
+		closeMap[name] = pos;
+	}
+	return pos < elStartEnd;
+}
+
+/**
+ * @param {ConstructorParameters<typeof ParseError>} p 
+ */
+function error(...p) {
+	console.error(new ParseError(...p));
+}
+
+/**
+ *
+ * @param {string} a
+ * @returns {string}
+ */
+function entityReplacer(a) {
+	const k = a.slice(1, -1);
+	if (k.charAt(0) === '#') {
+		return String.fromCodePoint(parseInt(k.substring(1).replace('x', '0x')));
+	}
+	if (k in entityMap) { return entityMap[k]; }
+	error('ENTITY', a);
+	return a;
+}
+/**
+ *
+ * @param {string} source
+ * @param {Layout.Options} [options]
+ * @returns {(Layout.Node | string)[]}
+ */
+function parse(source, {
+	creteCalc = () => { throw new ParseError('CALC'); },
+	creteEvent = () => { throw new ParseError('EVENT'); },
+	simpleTag = new Set,
+} = {}) {
+	/** @type {(Layout.Node | string)[]} */
+	const children = [];
+
+	const doc = { children };
+	/** @type {(Layout.Node | null)[]} */
+	const stack = [];
+	/** @type {Layout.Node?} */
+	let currentNode = null;
+	/** @type {typeof doc | Layout.Node} */
+	let current = doc;
+	function endElement() {
+		currentNode = stack.pop() || null;
+		current = currentNode || doc;
+	}
+	/**
+	 * 
+	 * @param {string} chars 
+	 * @returns 
+	 */
+	function characters(chars) {
+		chars = chars.replace(/^\n|(?<=\n)\t+|\n\t*$/g, '');
+		if (!chars) { return; }
+		current.children.push(chars);
+	}
+
+	let closeMap = {};
+	let index = 0;
+	/**
+	 * 
+	 * @param {number} end 
+	 */
+	function appendText(end) {
+		if (end <= index) { return; }
+		const xt = source.substring(index, end).replace(/&#?\w+;/g, entityReplacer);
+		characters(xt);
+		index = end;
+	}
+	for (; ;) {
+		const tagStart = source.indexOf('<', index);
+		if (tagStart < 0) {
+			const text = source.substring(index);
+			if (!text.match(/^\s*$/)) {
+				characters(text);
+			}
+			break;
+		}
+		if (tagStart > index) {
+			appendText(tagStart);
+		}
+		if (source.charAt(tagStart + 1) === '/') {
+			index = source.indexOf('>', tagStart + 3);
+			let name = source.substring(tagStart + 2, index);
+			if (index < 0) {
+				name = source.substring(tagStart + 2).replace(/[\s<].*/, '');
+				error('UNCOMPLETED', name, currentNode?.name);
+				index = tagStart + 1 + name.length;
+			} else if (name.match(/\s</)) {
+				name = name.replace(/[\s<].*/, '');
+				error('UNCOMPLETED', name);
+				index = tagStart + 1 + name.length;
+			}
+			if (currentNode) {
+				const currentName = currentNode.name;
+				if (currentName === name) {
+					endElement();
+				} else if (currentName.toLowerCase() == name.toLowerCase()) {
+					endElement();
+				} else {
+					throw new ParseError('CLOSE', name, currentNode.name);
+				}
+			}
+			index++;
+			continue;
+		}
+		index = tagStart + 1;
+		/**
+		 * 
+		 * @param {string} c 
+		 * @returns 
+		 */
+		function getQuote(c) {
+			let start = index + 1;
+			index = source.indexOf(c, start);
+			if (index < 0) { throw new ParseError('QUOTE', c); }
+			const value = source.slice(start, index).replace(/&#?\w+;/g, entityReplacer);
+			index++;
+			return value;
+		}
+		function skipSpace() {
+			let c = source.charAt(index);
+			for (; c <= ' ' || c === '\u0080'; c = source.charAt(++index)) { }
+			return c;
+
+		}
+		function getId() {
+			let start = index;
+			let c = source.charAt(index);
+			while (isIdCode(c)) {
+				index++;
+				c = source.charAt(index);
+			}
+			return source.slice(start, index);
+		}
+		let c = source.charAt(index);
+		switch (c) {
+			case '=': throw new ParseError('EQUAL');
+			case '"': case '\'': throw new ParseError('ATTR_VALUE');
+			case '>': case '/': throw new ParseError('SYMBOL', c);
+			case '': throw new ParseError('EOF');
+		}
+		const name = getId();
+		const tagRes = tagNamePattern.exec(name)?.groups;
+		if (!tagRes) { throw new ParseError('TAG', name); }
+		stack.push(currentNode);
+		currentNode = createElement(tagRes.name, tagRes.is);
+		current.children.push(currentNode);
+		current = currentNode;
+		const addAttribute = createAttributeAdder(currentNode, creteCalc, creteEvent);
+
+		let run = true;
+		let closed = false;
+		parseAttr: for (; run;) {
+			let c = skipSpace();
+			switch (c) {
+				case '': error('EOF'); index++; break parseAttr;
+				case '>': index++; break parseAttr;
+				case '/': closed = true; break parseAttr;
+				case '"': case '\'': throw new ParseError('ATTR_VALUE');
+				case '=': throw new ParseError('SYMBOL', c);
+			}
+			const id = getId();
+			if (!id) { error('EOF'); index++; break parseAttr; }
+			c = skipSpace();
+			switch (c) {
+				case '': error('EOF'); index++; break parseAttr;
+				case '>': addAttribute(id, ''); index++; break parseAttr;
+				case '/': addAttribute(id, ''); closed = true; break parseAttr;
+				case '=': index++; break;
+				case '\'': case '"': addAttribute(id, getQuote(c)); continue;
+				default: addAttribute(id, ''); continue;
+			}
+			c = skipSpace();
+			switch (c) {
+				case '': addAttribute(id, ''); error('EOF'); index++; break parseAttr;
+				case '>': addAttribute(id, ''); index++; break parseAttr;
+				case '/': addAttribute(id, ''); closed = true; break parseAttr;
+				case '\'': case '"': addAttribute(id, getQuote(c)); continue;
+			}
+			addAttribute(id, getId());
+		}
+		if (closed) {
+			while (true) {
+				index++;
+				const c = source.charAt(index);
+				if (c === '/') { continue; }
+				if (c <= ' ' || c === '\u0080') { continue; }
+				break;
+			}
+			const c = source.charAt(index);
+			switch (c) {
+				case '=': throw new ParseError('EQUAL');
+				case '"': case '\'': throw new ParseError('ATTR_VALUE'); // No known test case
+				case '': error('EOF'); break;
+				case '>': index++; break;
+				default: throw new ParseError('CLOSE_SYMBOL');
+			}
+			endElement();
+		} else if (simpleTag.has(name) || fixSelfClosed(source, index, name, closeMap)) {
+			endElement();
+		}
+	}
+	return children;
+}
+
+/** @import * as Layout from './index.mjs' */
+
+/**
+ * 
+ * @param {*} c 
+ * @returns 
+ */
+function _xmlEncoder(c) {
+	return c == '<' && '&lt;' ||
+		c == '>' && '&gt;' ||
+		c == '&' && '&amp;' ||
+		c == '"' && '&quot;' ||
+		'&#' + c.charCodeAt() + ';';
+}
+
+/**
+ * 
+ * @param {Layout.Node} node 
+ * @param {number} [level] 
+ * @returns {Iterable<string>}
+ */
+function* nodeToString(node, level = 0) {
+	const { attrs, events, directives, children, is, name, classes, styles, aliases, vars } = node;
+	const pad = level > 0 ? ''.padEnd(level, '\t') : '';
+
+	yield pad;
+	yield* ['<', name || '-'];
+	if (is) { yield* ['|', is]; }
+
+	for (const [name, value] of Object.entries(directives)) {
+		if (value === false || value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		yield* [' !', name];
+		if (val && typeof val === 'string') {
+			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(aliases)) {
+		if (value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		yield* [' *', name];
+		if (val && typeof val === 'string') {
+			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(vars)) {
+		if (value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		yield* [' +', name];
+		if (val && typeof val === 'string') {
+			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(attrs)) {
+		if (value == null) { continue; }
+		if (typeof value === 'string') {
+			yield* [' ', name];
+			if (value) {
+				yield* ['="', value.replace(/[<&"]/g, _xmlEncoder), '"'];
+			}
+			continue;
+		}
+		const val = typeof value === 'function' ? String(value) : typeof value === 'object' ? value.name : value;
+		if (val && typeof val === 'string') {
+			yield* [' :', name, '="', val.replace(/[<&"]/g, _xmlEncoder) || '', '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(events)) {
+		if (value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		if (val && typeof val === 'string') {
+			yield* [' @', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(classes)) {
+		if (value == null || value == false) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		yield* [' .', name];
+		if (val && typeof val === 'string') {
+			yield* [' .', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	for (const [name, value] of Object.entries(styles)) {
+		if (value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		if (val && typeof val === 'string') {
+			yield* [' style:', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
+	if (!children.length) {
+		yield '/>';
+		if (level >= 0) { yield '\n'; }
+		return;
+	}
+	if (children.length === 1) {
+		const [child] = children;
+		if (typeof child === 'string' && child.length < 80 && !child.includes('\n')) {
+			yield '>';
+			yield* [child.replace(/[<&\t]/g, _xmlEncoder).replace(/]]>/g, ']]&gt;')];
+			yield* ['</', name, '>'];
+			if (level >= 0) { yield '\n'; }
+			return;
+		}
+	}
+	yield '>';
+	if (level >= 0) { yield '\n'; }
+	yield* listToString(children, level >= 0 ? level + 1 : -1);
+	yield* [pad, '</', name, '>'];
+	if (level >= 0) { yield '\n'; }
+
+}
+/**
+ * 
+ * @param {(Layout.Node |string)[]} nodes 
+ * @param {number} [level] 
+ * @returns {Iterable<string>}
+ */
+function* listToString(nodes, level = 0) {
+	if (!nodes.length) { return ''; }
+
+	const pad = level > 0 ? ''.padEnd(level, '\t') : '';
+	for (const child of nodes) {
+		if (typeof child === 'string') {
+			let text = child.replace(/[<&\t]/g, _xmlEncoder).replace(/]]>/g, ']]&gt;');
+			if (pad) {
+				text = text.replace(/(?<=^|\n)/g, pad);
+			}
+			yield text;
+			if (level >= 0) { yield '\n'; }
+		} else {
+			yield* nodeToString(child, level);
+		}
+	}
+}
+/**
+ * 
+ * @param {Layout.Node | (Layout.Node |string)[]} value 
+ * @param {boolean} [formable] 
+ * @returns {string}
+ */
+function toString(value, formable) {
+	const level = formable ? 0 : -1;
+	if (Array.isArray(value)) { return [...listToString(value, level)].join(''); }
+	return [nodeToString(value, level)].join();
+
+}
+
+/**
+ * @typedef {object} Directives
+ * 
+ * @property {boolean} [fragment]
+ * 
+ * @property {string | Function} [if]
+ * @property {boolean} [else]
+ * 
+ * @property {string} [value] 值关联（关联为列表）
+ * @property {boolean} [enum] 列表属性枚举
+ * 
+ * @property {string} [bind]
+ * @property {string | Function} [text]
+ * @property {string | Function} [html]
+ * 
+ * @property {string | Function} [comment] 注释
+ */
+
+
+
+/**
+ * @typedef {object} Options
+ * @property {(t: string) => (vars: Record<string, any>) => any} [options.creteCalc]
+ * @property {(t: string) => ($event: any, vars: Record<string, any>) => any} [options.creteEvent]
+ * @property {Set<string>} [options.simpleTag]
+ */
+/**
+ * @typedef {object} Node
+ * @property {string} name
+ * @property {string?} [is]
+ * @property {string} [id]
+ * @property {Record<string, string | {name: string} | ((global: any) => void)>} attrs
+ * @property {Record<string, string | boolean | ((global: any) => void)>} classes
+ * @property {Record<string, string | ((global: any) => void)>} styles
+ * @property {Record<string, string | (($event: any, global: any) => void)>} events
+ * @property {Record<string, string | ((global: any) => void)>} vars
+ * @property {Record<string, string | Function>} aliases
+ * @property {Directives} directives
+ * @property {(Node | string)[]} children
+ */
+
+var index$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	parse: parse,
+	stringify: toString
+});
+
+let needsEnqueue = true;
+
+const w = new Signal.subtle.Watcher(() => {
+	if (needsEnqueue) {
+		needsEnqueue = false;
+		queueMicrotask(processPending);
+	}
+});
+
+function processPending() {
+	needsEnqueue = true;
+
+	for (const s of w.getPending()) {
+		s.get();
+	}
+
+	w.watch();
+}
+
+/**
+ * 创建可赋值计算值
+ * @template T
+ * @param {() => T} getter 取值方法
+ * @param {(value: T) => void} callback 取值方法
+ * @returns {() => void}
+ */
+function watch(getter, callback) {
+
+	let run = false;
+	/** @type {any} */
+	let value;
+	const computed = new Signal.Computed(() => {
+		const val = getter();
+		if (run && Object.is(val, value)) { return; }
+		value = val;
+		run = true;
+		callback(val);
+	});
+
+	w.watch(computed);
+	computed.get();
+
+	return () => { w.unwatch(computed); };
+}
+
+/** @typedef {{get(): any; set?(v: any): void; exec?: null; store?: Store; calc?: null; }} ValueDefine */
+/** @typedef {{get?: null; exec(...p: any[]): any;  calc?: null}} ExecDefine */
+/** @typedef {{get?: null; calc(...p: any[]): any;  exec?: null;}} CalcDefine */
+/**
+ * 
+ * @param {Store} val 
+ * @param {string | number} [key] 
+ * @returns {Iterable<[string, ValueDefine | ExecDefine | CalcDefine]>}
+ */
+function *toItem(val, key = '', sign = '$') {
+	yield [`${key}`, {get: () => val.value, set: v => val.value = v, store: val}];
+	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
+	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
+	yield [`${key}${sign}null`, {get: () => val.null}];
+	yield [`${key}${sign}index`, {get: () => val.index}];
+	yield [`${key}${sign}no`, {get: () => val.no}];
+	yield [`${key}${sign}length`, {get: () => val.length}];
+	yield [`${key}${sign}creatable`, {get: () => val.creatable}];
+	yield [`${key}${sign}immutable`, {get: () => val.immutable}];
+	yield [`${key}${sign}new`, {get: () => val.new}];
+	yield [`${key}${sign}editable`, {get: () => val.editable}];
+	yield [`${key}${sign}hidden`, {get: () => val.hidden}];
+	yield [`${key}${sign}clearable`, {get: () => val.clearable}];
+	yield [`${key}${sign}required`, {get: () => val.required}];
+	yield [`${key}${sign}disabled`, {get: () => val.disabled}];
+	yield [`${key}${sign}readonly`, {get: () => val.readonly}];
+	if (!(val instanceof ArrayStore)) { return; }
+	yield [`${key}${sign}insert`, {exec: (index, value) => val.insert(index, value)}];
+	yield [`${key}${sign}add`, {exec: (v) => val.add(v)}];
+	yield [`${key}${sign}remove`, {exec: (index) => val.remove(index)}];
+	yield [`${key}${sign}move`, {exec: (from, to) => val.move(from, to)}];
+	yield [`${key}${sign}exchange`, {exec: (a, b) => val.exchange(a, b)}];
+}
+/**
+ * 
+ * @param {Store?} parent 
+ * @param {Store} val 
+ * @param {string | number} [key] 
+ * @returns {Iterable<[string, ValueDefine | ExecDefine | CalcDefine]>}
+ */
+function *toParentItem(parent, val, key = '', sign = '$') {
+	if (!(parent instanceof ArrayStore)) {
+		yield [`${key}${sign}upMovable`, {get: () => false}];
+		yield [`${key}${sign}downMovable`, {get: () => false}];
+		return
+	}
+	yield [`${key}${sign}upMovable`, {get: () => {
+		const s = val.index;
+		if (typeof s !== 'number') { return false; }
+		if (s <= 0) { return false; }
+		return true;
+	}}];
+	yield [`${key}${sign}downMovable`, {get: () => {
+		const s = val.index;
+		if (typeof s !== 'number') { return false; }
+		if (s >= parent.length - 1) { return false; }
+		return true;
+	}}];
+	yield [`${key}${sign}remove`, {exec: () => parent.remove(Number(val.index))}];
+	yield [`${key}${sign}upMove`, {exec: () => {
+		const s = val.index;
+		if (typeof s !== 'number') { return; }
+		if (s <= 0) { return; }
+		parent.move(s, s - 1);
+	}}];
+	yield [`${key}${sign}downMove`, {exec: () => {
+		const s = val.index;
+		if (typeof s !== 'number') { return; }
+		if (s >= parent.length - 1) { return; }
+		parent.move(s, s + 1);
+	}}];
+}
+class Environment {
+	/**
+	 * @param {string | Function} value
+	 */
+	exec(value) {
+		if (typeof value === 'string') {
+			const item = this.#items[value];
+			if (typeof item?.get !== 'function') { return }
+			return item.get();
+		}
+		if (typeof value === 'function') {
+			return value(this.getters);
+		}
+	}
+	/**
+	 * @param {string | Function} value
+	 * @param {(value: any) => void} cb 
+	 */
+	watch(value, cb) { return watch(() => this.exec(value), cb); }
+
+	/**
+	 * @param {string} name
+	 * @param {string} type
+	 * @param {(value: any) => void} cb 
+	 */
+	bind(name, type, cb) {
+		const item = this.#items[name];
+		if (!item?.get) { return; }
+		const { store } = item;
+		if (!store) { return; }
+		switch(type) {
+			case 'value': return watch(() => store.value, cb);
+			case 'state': return watch(() => store.state, cb);
+			case 'required': return watch(() => store.required, cb);
+			case 'clearable': return watch(() => store.clearable, cb);
+			case 'hidden': return watch(() => store.hidden, cb);
+			case 'disabled': return watch(() => store.disabled, cb);
+			case 'readonly': return watch(() => store.readonly || !store.editable, cb);
+		}
+	}
+	/**
+	 * @param {string} name
+	 * @returns {Record<string, ((cb: (value: any) => void) => () => void) | void> | void}
+	 */
+	bindAll(name) {
+		const item = this.#items[name];
+		if (!item?.get) { return; }
+		const { store } = item;
+		if (!store) {
+			const get = item.get;
+			if (typeof get !== 'function') { return; }
+			return { '$value': cb => watch(get, cb) }
+		}
+		return {
+			'$value': cb => watch(() => store.value, cb),
+			'$state': cb => watch(() => store.state, cb),
+			'$required': cb => watch(() => store.required, cb),
+			'$clearable': cb => watch(() => store.clearable, cb),
+			'$hidden': cb => watch(() => store.hidden, cb),
+			'$disabled': cb => watch(() => store.disabled, cb),
+			'$readonly': cb => watch(() => store.readonly || !store.editable, cb),
+		}
+	}
+	/**
+	 * @param {string} name
+	 * @param {string} type
+	 * @returns {((value: any) => void) | void} 
+	 */
+	bindSet(name, type) {
+		const item = this.#items[name];
+		if (!item?.get) { return; }
+		const { store } = item;
+		if (!store) { return; }
+		switch(type) {
+			case 'value': return v => {store.value = v; };
+			case 'state': return v => {store.state = v; };
+		}
+	}
+	/**
+	 * @param {string} name
+	 * @returns {Record<string, ((value: any) => void) | void> | void} 
+	 */
+	bindStateAllSet(name) {
+		const item = this.#items[name];
+		if (!item?.get) { return; }
+		const { store } = item;
+		if (!store) { 
+			const set = item.set;
+			if (typeof set !== 'function') { return; }
+			return { '$value': set }
+		 }
+		return {
+			'$value': v => {store.value = v; },
+			'$state': v => {store.state = v; },
+		}
+	}
+
+	/**
+	 * @param {string | (($event: any, global: any) => any)} event
+	 * @returns {(($event: any, global: any) => any)?}
+	 */
+	getEvent(event) {
+		if (typeof event === 'function') { return event }
+		const item = this.#items[event];
+		if (!item) { return null }
+		const {exec, calc} = item;
+		if (typeof exec === 'function') { return exec }
+		if (typeof calc === 'function') { return calc }
+		return null
+
+	}
+	/**
+	 * 
+	 * @param {Environment | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>?} [global] 
+	 */
+	constructor(global) {
+		if (global instanceof Environment) {
+			this.#global = global.#global;
+			const schemaItems = this.#schemaItems;
+			for (const [k, v] of Object.entries(global.#schemaItems)) {
+				schemaItems[k] = v;
+			}
+			const explicit = this.#explicit;
+			for (const [k, v] of Object.entries(global.#explicit)) {
+				explicit[k] = v;
+			}
+			return;
+		}
+		const items = Object.create(null);
+		this.#global = items;
+		if (!global) { return }
+		if (typeof global !== 'object') { return; }
+		for (const [key, value] of Object.entries(global)) {
+			if (!key || key.includes('$')) { continue; }
+			if (!value || typeof value !== 'object') { return; }
+			if (value instanceof Store) {
+				for (const [k, v] of toItem(value, key)) {
+					items[k] = v;
+				}
+				continue;
+			}
+			const {get,set,exec,calc} = value;
+			if (typeof get === 'function') {
+				items[key] = typeof set === 'function' ? {get,set} : {get};
+				continue;
+			}
+			if (typeof calc === 'function') {
+				items[key] = {calc};
+				continue;
+			}
+			if (typeof exec === 'function') {
+				items[key] = {exec};
+				continue;
+			}
+		}
+	}
+	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+	#global
+	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+	#schemaItems = Object.create(null);
+	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+	#explicit = Object.create(null);
+	/** @type {Store?} */
+	#store = null
+	/** @type {Store?} */
+	#parent = null
+	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>?} */
+	#allItems = null
+	get #items() {
+		const ai = this.#allItems;
+		if (ai) { return ai; }
+		/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+		const ais = Object.create(null, Object.getOwnPropertyDescriptors({
+			...this.#schemaItems,
+			...this.#global,
+			...this.#explicit,
+		}));
+		const store = this.#store;
+		const parent = this.#parent;
+		if (store) {
+			for (const [key, item] of toItem(store)) {
+				ais[key] = item;
+			}
+			for (const [key, item] of toParentItem(parent, store)) {
+				ais[key] = item;
+			}
+		}
+		this.#allItems = ais;
+		return ais;
+	}
+	/**
+	 * 
+	 * @param {Store} store 
+	 * @param {Store} [parent] 
+	 */
+	setValue(store, parent) {
+		const cloned = new Environment(this);
+		cloned.#store = store;
+		if (parent) { cloned.#parent = parent; }
+		if (store instanceof ArrayStore) { return cloned; }
+		const items = cloned.#schemaItems;
+		for (const [name, val] of store) {
+			for (const [b, x] of toItem(val, name)) {
+				items[b] = x;
+			}
+			for (const [b, x] of toItem(val, name, '$$')) {
+				items[b] = x;
+			}
+		}
+		return cloned;
+	}
+	/**
+	 * 
+	 * @param {Record<string, string | Function>} aliases 
+	 * @param {Record<string, any>} vars 
+	 */
+	set(aliases, vars) {
+		if (Object.keys(aliases).length + Object.keys(vars).length === 0) { return this; }
+		const cloned = new Environment(this);
+		cloned.#store = this.#store;
+		cloned.#parent = this.#parent;
+		const explicit = cloned.#explicit;
+		const items = cloned.#items;
+		for (const [key, name] of Object.entries(aliases)) {
+			if (typeof name === 'function') {
+				const getters = cloned.getters;
+				cloned.#getters = null;
+				const val = new Signal.Computed(() => name(getters));
+				explicit[key] = items[key] = {
+					get: () => { return val.get(); },
+				};
+				continue;
+			}
+			const item = items[name];
+			if (!item) { continue; }
+			if (!item.get || !item.store) {
+				explicit[key] = items[key] = item;
+				continue;
+			}
+			for (const [k, it] of toItem(item.store, key)) {
+				explicit[k] = items[k] = it;
+			}
+		}
+		for (const [k,v] of Object.entries(vars)) {
+			
+			const val = new Signal.State(/** @type {any} */(null));
+			if (typeof v === 'function') {
+				const settable = cloned.settable;
+				cloned.#settable = null;
+				val.set(v(settable));
+			} else if (v && typeof v === 'string') {
+				const item = items[v];
+				if (!item?.get) { continue }
+				val.set(item.get());
+			}
+			explicit[k] = items[k] = {
+				get: () => { return val.get(); },
+				set: (v) => { val.set(v); },
+			};
+		}
+		return cloned;
+	}
+
+	/** @type {Record<string, any>?} */
+	#all = null;
+	get all() {
+		const gt = this.#all;
+		if (gt) { return gt; }
+		/** @type {Record<string, any>} */
+		const ngt = {};
+		for (const [key, item] of Object.entries(this.#items)) {
+			if (item.get) {
+				Object.defineProperty(ngt, key, {
+					get: item.get,
+					set: item.set,
+					configurable: true,
+					enumerable: true,
+				});
+			} else if (item.calc) {
+				Object.defineProperty(ngt, key, {
+					value: item.calc,
+					writable: false,
+					configurable: true,
+					enumerable: false,
+				});
+			} else {
+				Object.defineProperty(ngt, key, {
+					value: item.exec,
+					writable: false,
+					configurable: true,
+					enumerable: false,
+				});
+			}
+		}
+		this.#all = ngt;
+		return ngt;
+	}
+	/** @type {Record<string, any>?} */
+	#settable = null;
+	get settable() {
+		const gt = this.#settable;
+		if (gt) { return gt; }
+		/** @type {Record<string, any>} */
+		const ngt = {};
+		for (const [key, item] of Object.entries(this.#items)) {
+			if (item.get) {
+				Object.defineProperty(ngt, key, {
+					get: item.get,
+					set: item.set,
+					configurable: true,
+					enumerable: true,
+				});
+			} else if (item.calc) {
+				Object.defineProperty(ngt, key, {
+					value: item.calc,
+					writable: false,
+					configurable: true,
+					enumerable: false,
+				});
+			}
+		}
+		this.#settable = ngt;
+		return ngt;
+	}
+	/** @type {Record<string, any>?} */
+	#getters = null;
+	get getters() {
+		const gt = this.#getters;
+		if (gt) { return gt; }
+		/** @type {Record<string, any>} */
+		const ngt = {};
+		for (const [key, item] of Object.entries(this.#items)) {
+			if (item.get) {
+				Object.defineProperty(ngt, key, {
+					get: item.get,
+					configurable: true,
+					enumerable: true,
+				});
+			} else if (item.calc) {
+				Object.defineProperty(ngt, key, {
+					value: item.calc,
+					writable: false,
+					configurable: true,
+					enumerable: false,
+				});
+			}
+		}
+		this.#getters = ngt;
+		return ngt;
+	}
+}
+
+/** @import { Component } from '../types.mjs' */
+
+/**
+ * @param {Component.Handler} handler
+ * @param {Environment} envs
+ * @param {Record<string, string | {name: string} | ((...any: any) => void)>} attrs
+ * @param {Record<string, Component.Attr>} componentAttrs
+ * @param {string?} [bindValue]
+ */
+function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
+
+	let bk = new Set();
+	for (const [name, attr] of Object.entries(componentAttrs)) {
+		const attrValue = attrs[name];
+		if (name in attrs) {
+			if (typeof attrValue !== 'function' && typeof attrValue !== 'object') {
+				handler.set(name, attrValue);
+				continue;
+			}
+			const attrSchema = typeof attrValue === 'function' ? attrValue : attrValue.name;
+			if (attr.immutable) {
+				handler.set(name, envs.exec(attrSchema));
+				continue;
+			}
+			bk.add(envs.watch(attrSchema, v => handler.set(name, v)));
+			continue;
+		}
+		const bind = attr.bind;
+		if (!bindValue || !bind) {
+			handler.set(name, attr.default);
+			continue;
+		}
+		if (typeof bind === 'string') {
+			const r = envs.bind(bindValue, bind, v => handler.set(name, v));
+			if (r) {
+				bk.add(r);
+			} else {
+				handler.set(name, attr.default);
+			}
+			continue;
+		}
+		if (!Array.isArray(bind)) {
+			handler.set(name, attr.default);
+			continue;
+		}
+		const [event, set, isState] = bind;
+		if (!event || typeof set !== 'function') {
+			continue;
+		}
+		if (!isState) {
+			bk.add(envs.watch(bindValue, v => handler.set(name, v)));
+			handler.addEvent(event, (...args) => { envs.all[bindValue] = set(...args);});
+			continue;
+		}
+		const r = envs.bind(bindValue, 'state', v => handler.set(name, v));
+		if (!r) { continue; }
+		bk.add(r);
+		const s = envs.bindSet(bindValue, 'state');
+		if (!s) { continue; }
+		handler.addEvent(event, (...args) => { s(set(...args));});
+	}
+	// TODO: 创建组件
+	return ()=> {
+		const list = bk;
+		bk = new Set();
+		for (const s of list) {
+			s();
+		}
+	}
+}
+
+/** @import { Component } from '../types.mjs' */
+
+/**
+ * @param {Component.Handler} handler
+ * @param {Environment} envs
+ * @param {Record<string, string | {name: string} | ((...any: any) => void)>} attrs
+ * @param {string?} [bindValue]
+ */
+function bindBaseAttrs(handler, envs, attrs, bindValue) {
+	const tag = handler.tag;
+	let bk = new Set();
+	for (const [name, attr] of Object.entries(attrs)) {
+		if (typeof attr !== 'function' && typeof attr !== 'object') {
+			handler.set(name, attr);
+			continue;
+		}
+		const attrSchema = typeof attr === 'function' ? attr : attr.name;
+		if (typeof tag === 'string' && tag.toLocaleLowerCase() === 'input' && name.toLocaleLowerCase() === 'type') {
+			const value = envs.exec(attrSchema);
+			handler.set(name, value);
+			continue;
+		}
+		bk.add(envs.watch(attrSchema, val => handler.set(name, val)));
+	}
+	if (bindValue) {
+		for (const [key, effect] of Object.entries(envs.bindAll(bindValue) || {})) {
+			if (typeof effect !== 'function') { continue; }
+			bk.add(effect(val => handler.set(key, val)));
+		}
+		for (const [key, setter] of Object.entries(envs.bindStateAllSet(bindValue) || {})) {
+			if (typeof setter !== 'function') { continue; }
+			handler.addEvent(key, $event => setter($event));
+		}
+	}
+
+	return ()=> {
+		const list = bk;
+		bk = new Set();
+		for (const s of list) {
+			s();
+		}
+	}
+}
+
+/**
+ * @param {Node} node
+ * @param {Environment} envs
+ * @param {Record<string, string | boolean | ((...any: any) => void)>} classes
+ */
+function bindClasses(node, classes, envs) {
+	if (!(node instanceof Element)) {
+		return () => {};
+	}
+
+	/** @type {Set<() => void>?} */
+	let bk = new Set();
+	for (const [name, attr] of Object.entries(classes)) {
+		if (!attr) { continue; }
+		if (attr === true) {
+			node.classList.add(name);
+			continue;
+		}
+		bk.add(watch(() => Boolean(envs.exec(attr)), value => {
+			if (value) {
+				node.classList.add(name);
+			} else {
+				node.classList.remove(name);
+			}
+		}));
+	}
+	// TODO: 创建组件
+	return ()=> {
+		if (!bk) { return; }
+		const list = bk;
+		bk = null;
+		for (const s of list) {
+			s();
+		}
+	}
+}
+
+/** @type {Record<string, string>} */
+const unit = {
+	'width': 'px',
+	'height': 'px',
+	'top': 'px',
+	'right': 'px',
+	'bottom': 'px',
+	'left': 'px',
+	'border': 'px',
+	'border-top': 'px',
+	'border-right': 'px',
+	'border-left': 'px',
+	'border-bottom': 'px',
+	'border-width': 'px',
+	'border-top-width': 'px',
+	'border-right-width': 'px',
+	'border-left-width': 'px',
+	'border-bottom-width': 'px',
+	'border-radius': 'px',
+	'border-top-left-radius': 'px',
+	'border-top-right-radius': 'px',
+	'border-bottom-left-radius': 'px',
+	'border-bottom-right-radius': 'px',
+	'padding': 'px',
+	'padding-top': 'px',
+	'padding-right': 'px',
+	'padding-left': 'px',
+	'padding-bottom': 'px',
+	'margin': 'px',
+	'margin-top': 'px',
+	'margin-right': 'px',
+	'margin-left': 'px',
+	'margin-bottom': 'px',
+};
+/**
+ * 
+ * @param {string} name 
+ * @param {any} value 
+ * @returns {[string, 'important' | undefined]?}
+ */
+function toStyle(name, value) {
+	let important = Array.isArray(value) ? Boolean(value[1]) : false;
+	let style = '';
+	/** @typedef {[string, 'important' | undefined]} Result */
+	if (typeof value === 'string') {
+		style = value.replace(/!important\s*$/, '');
+		if (!style) { return null; }
+		important = style !== value;
+		return [style, important ? 'important' : undefined];
+	}
+	const val = Array.isArray(value) ? value[0] : value;
+	if (typeof val === 'number' || typeof val === 'bigint') {
+		style = val && name in unit ? `${ val }${ unit[name] }` : `${ val }`;
+	} else if (typeof val === 'string') {
+		style = val;
+	}
+	if (!style) { return null; }
+	return [style, important ? 'important' : undefined];
+
+
+}
+
+
+/**
+ * @param {Element} node
+ * @param {Environment} envs
+ * @param {Record<string, string | ((...any: any) => void)>} classes
+ */
+function bindStyles(node, classes, envs) {
+	if (!(node instanceof HTMLElement) && !(node instanceof SVGElement)) {
+		return () => {};
+	}
+
+	/** @type {Set<() => void>?} */
+	let bk = new Set();
+	for (const [name, attr] of Object.entries(classes)) {
+		bk.add(watch(() => toStyle(name, envs.exec(attr)), value => {
+			if (value) {
+				node.style.setProperty(name, ...value);
+			} else {
+				node.style.removeProperty(name);
+			}
+		}));
+	}
+	// TODO: 创建组件
+	return ()=> {
+		if (!bk) { return; }
+		const list = bk;
+		bk = null;
+		for (const s of list) {
+			s();
+		}
+	}
+}
+
+/**
+ * @template {Record<string, any[]>} T
+ */
+class EventEmitter {
+	/** @type {Map<keyof T, Set<(...p: any[]) => void>>} */
+	#events = new Map()
+	/**
+	 * 
+	 * @template {keyof T} K
+	 * @param {K} event 
+	 * @param  {T[K]} p 
+	 */
+	emit(event, ...p) {
+		const key = typeof event === 'number' ? String(event) : event;
+		const events = this.#events;
+		for (const d of [...events.get(key) || []]) {
+			d(...p);
+		}
+	}
+	/**
+	 * 
+	 * @template {keyof T} K
+	 * @param {K} event 
+	 * @param  {(...p: T[K]) => void} listener
+	 * @returns {() => void}
+	 */
+	listen(event, listener) {
+		/** @type {any} */
+		const fn = listener.bind(this);
+		const events = this.#events;
+		const key = typeof event === 'number' ? String(event) : event;
+		let set = events.get(key);
+		if (!set) {
+			set = new Set();
+			events.set(key, set);
+		}
+		set.add(fn);
+		return () => { set?.delete(fn); }
+
+	}
+}
+
+/** @import { Component } from '../types.mjs' */
+/** @import Environment from './Environment.mjs' */
+
+
+/** @type {Record<string, (evt: any, param: string[], global: any) => boolean | null | void>} */
+const eventFilters = {
+	stop(evt) {
+		if (evt instanceof Event) { evt.stopPropagation(); }
+	},
+	prevent(evt) {
+		if (evt instanceof Event) { evt.preventDefault(); }
+	},
+	self(evt) {
+		if (evt instanceof Event) { return evt.target === evt.currentTarget; }
+	},
+	enter(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Enter'; }
+	},
+	tab(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Tab'; }
+	},
+	esc(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Escape'; }
+	},
+	space(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === ' '; }
+	},
+	backspace(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Backspace'; }
+	},
+	delete(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Delete'; }
+	},
+	delBack(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Delete' || evt.key === 'Backspace'; }
+	},
+	'del-back'(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Delete' || evt.key === 'Backspace'; }
+	},
+	insert(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.key === 'Insert'; }
+	},
+	repeat(evt) {
+		if (evt instanceof KeyboardEvent) { return evt.repeat; }
+	},
+
+	key(evt, param) {
+		if (evt instanceof KeyboardEvent) {
+			const key = evt.code.toLowerCase().replace(/-/g, '');
+			for (const k of param) {
+				if (key === k.toLowerCase().replace(/-/g, '')) { return true }
+			}
+			return false;
+		}
+	},
+	main(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 0; }
+	},
+	auxiliary(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 1; }
+	},
+	secondary(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 2; }
+	},
+	left(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 0; }
+	},
+	middle(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 1; }
+	},
+	right(evt) {
+		if (evt instanceof MouseEvent) { return evt.button === 2; }
+	},
+	primary(evt) {
+		if (evt instanceof PointerEvent) { return evt.isPrimary; }
+	},
+	mouse(evt) {
+		if (evt instanceof PointerEvent) { return evt.pointerType === 'mouse'; }
+	},
+	pen(evt) {
+		if (evt instanceof PointerEvent) { return evt.pointerType === 'pen'; }
+	},
+	touch(evt) {
+		if (evt instanceof PointerEvent) { return evt.pointerType === 'touch'; }
+	},
+	pointer(evt, param) {
+		if (evt instanceof PointerEvent) {
+			const pointerType = evt.pointerType.toLowerCase().replace(/-/g, '');
+			for (const k of param) {
+				if (pointerType === k.toLowerCase().replace(/-/g, '')) { return true }
+			}
+			return false;
+		}
+	},
+
+	ctrl(evt) {
+		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+			return evt.ctrlKey;
+		}
+	},
+	alt(evt) {
+		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+			return evt.altKey;
+		}
+	},
+	shift(evt) {
+		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+			return evt.shiftKey;
+		}
+	},
+	meta(evt) {
+		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+			return evt.metaKey;
+		}
+	},
+	cmd(evt) {
+		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+			return evt.ctrlKey || evt.metaKey;
+		}
+	},
+};
+/**
+ * 
+ * @param {Component | string} component 
+ * @param {Environment} env 
+ * @returns 
+ */
+function createContext(component, env) {
+	const tag = typeof component === 'string' ? component : component.tag;
+	const { attrs, events } = typeof component !== 'string' && component || {attrs: null, events: null };
+
+	let destroyed = false;
+	let init = false;
+	const tagAttrs = Object.create(null);
+
+	/** @type {[string, ($event: any) => void, AddEventListenerOptions][]} */
+	const allEvents = [];
+	const stateEmitter = new EventEmitter();
+	/** @type {EventEmitter<Record<string, [any, any, string]>>} */
+	const attrEmitter = new EventEmitter();
+	/** @type {Component.Context} */
+	const context = {
+		events: allEvents,
+		props: attrs ? new Set(Object.entries(attrs).filter(([,a]) => a.isProp).map(([e]) => e)) : null,
+		tagAttrs,
+		watchAttr(name, fn) { return attrEmitter.listen(name, fn); },
+		get destroyed() { return destroyed},
+		get init() { return init},
+		listen(name, listener) { return stateEmitter.listen(name, listener); },
+	};
+	/** @type {Component.Handler} */
+	const handler = {
+		tag,
+		set(name, value) {
+			if (attrs && !(name in attrs)) { return; }
+			if (!(name in tagAttrs)) { tagAttrs[name] = void 0; }
+			const old = tagAttrs[name];
+			if (old === value) { return; }
+			tagAttrs[name] = value;
+			attrEmitter.emit(name, value, old, name);
+		},
+		addEvent(name, fn) {
+			if (typeof fn !== 'function') { return; }
+			const [e, ...fs] = name.split('.').filter(Boolean);
+			const filters = events ? events[e].filters : {};
+			if (!filters) { return; }
+			/** @type {AddEventListenerOptions} */
+			const options = {};
+			/** @type {[($event: any, param: string[], env: any) => boolean | null | void, string[], boolean][]} */
+			const filterFns = [];
+			if (filters) for (let f = fs.shift();f;f = fs.shift()) {
+				const paramIndex = f.indexOf(':');
+				const noParamName = paramIndex >= 0 ? f.slice(0, paramIndex) : f;
+				const param = paramIndex >= 0 ? f.slice(paramIndex + 1).split(':') : [];
+				const filterName = noParamName.replace(/^-+/, '');
+				const sub = (noParamName.length - filterName.length) % 2 === 1;
+				let filter = filters[filterName] || filterName;
+				switch(filter) {
+					case 'once':
+						options.once = !sub;
+						break;
+					case 'passive':
+						options.passive = !sub;
+						break;
+					case 'capture':
+						options.capture = !sub;
+						break;
+					default:
+						if (typeof filter === 'string') {
+							filter = eventFilters[filter];
+						}
+				}
+				if (typeof filter !== 'function') { continue; }
+				filterFns.push([filter, param, sub]);
+			}
+			allEvents.push([e, $event => {
+				const global = env.all;
+				for (const [filter, param, sub] of filterFns) {
+					if (filter($event, param, global) === sub) { return}
+				}
+				fn($event, global);
+			}, options]);
+		},
+		destroy() {
+			if (destroyed) { return }
+			destroyed = true;
+			stateEmitter.emit('destroy');
+		},
+		init() {
+			if (init) { return }
+			init = true;
+			stateEmitter.emit('init', {events: allEvents});
+		},
+
+	};
+	return { context, handler };
+}
+
+/** @import { Component } from '../types.mjs' */
+/**
+ *
+ * @param {any} val
+ * @returns
+ */
+function toAttrValue(val) {
+	if (typeof val === 'number') {
+		return String(val);
+	}
+	if (typeof val === 'bigint') {
+		return String(val);
+	}
+	if (typeof val === 'boolean') {
+		return val ? '' : null;
+	}
+	if (typeof val === 'string') {
+		return val;
+	}
+	if ((val ?? null) === null) {
+		return null;
+	}
+	return String(val);
+}
+/**
+ *
+ * @param {any} val
+ * @returns
+ */
+function toText$1(val) {
+	if ((val ?? null) === null) {
+		return '';
+	}
+	return String(val);
+}
+
+
+/**
+ * 
+ * @param {Element} el 
+ * @param {string} attr 
+ */
+function getAttrs(el, attr) {
+	if (el instanceof HTMLInputElement && 'checked' === attr) {
+		switch (el.type.toLowerCase()) {
+			case 'checkbox':
+			case 'radio':
+				return Boolean;
+		}
+	}
+	if ((
+		el instanceof HTMLSelectElement
+		|| el instanceof HTMLInputElement
+		|| el instanceof HTMLTextAreaElement
+	) && 'value' === attr) {
+		return toText$1;
+	}
+	if ((el instanceof HTMLDetailsElement) && 'open' === attr) {
+		return Boolean;
+	}
+	if (el instanceof HTMLMediaElement) {
+		if ('muted' === attr) {
+			return Boolean;
+		}
+		if ('paused' === attr) {
+			return Boolean;
+		}
+		if ('currentTime' === attr) {
+			return true;
+		}
+		if ('playbackRate' === attr) {
+			return true;
+		}
+		if ('volume' === attr) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @typedef {object} TagBind
+ * @property {Record<string, (value: any, el: any) => void>} attrs
+ * @property {Record<string, [name: string, set: (event: any, el: any) => any]>} events
+ */
+/** @type {Record<string, TagBind>} */
+const tagBindMap = {
+	input: {
+		attrs: {
+			/** @param {any} v @param {HTMLInputElement} e */
+			$disabled: (v, e) => {e.disabled = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$readonly: (v, e) => {e.readOnly = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$required: (v, e) => {e.required = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$value: (v, e) => {
+				switch(e.type) {
+					case 'checkbox':
+					case 'radio':
+						e.checked = Boolean(v);
+						break;
+				}
+				e.value = toText$1(v);
+			},
+		},
+		events: {
+			$value: ['input', (v, e) => {
+				switch(e.type) {
+					case 'checkbox':
+					case 'radio':
+						return e.checked;
+					case 'number':
+						return Number(e.value);
+				}
+				return e.value;
+			}],
+		},
+	},
+	textarea: {
+		attrs: {
+			/** @param {any} v @param {HTMLInputElement} e */
+			$disabled: (v, e) => {e.disabled = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$readonly: (v, e) => {e.readOnly = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$required: (v, e) => {e.required = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$value: (v, e) => { e.value = toText$1(v); },
+		},
+		events: {
+			$value: ['input', (v, e) => { return e.value; }],
+		},
+	},
+	select: {
+		attrs: {
+			/** @param {any} v @param {HTMLInputElement} e */
+			$disabled: (v, e) => {e.disabled = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$readonly: (v, e) => {e.readOnly = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$required: (v, e) => {e.required = v;},
+			/** @param {any} v @param {HTMLInputElement} e */
+			$value: (v, e) => { e.value = toText$1(v); },
+		},
+		events: {
+			$value: ['change', (v, e) => { return e.value; }],
+		},
+	},
+};
+
+/**
+ * 
+ * @param {Component.Context} context 
+ * @param {string} name 
+ * @param {string?} [is] 
+ */
+function createTagComponent (context, name, is) {
+	const node = document.createElement(name, {is: is || undefined});
+	const { watchAttr, props } = context;
+
+	context.listen('init', ({events})=> {
+		const e = tagBindMap[name.toLowerCase()];
+		const eAttrs = e?.attrs || {};
+		const eEvents = e?.events || {};
+		for (const [type, listener, options] of events) {
+			if (type[0] === '$') {
+				const e = eEvents[type];
+				if (e) {
+					const [evt, set] = e;
+					node.addEventListener(evt, e => listener(set(e, node)), options);
+				}
+				continue;
+			}
+			node.addEventListener(type, listener, options);
+		}
+		if (props) {
+			for (const [name, attr] of Object.entries(context.tagAttrs)) {
+				watchAttr(name, v => {
+					// @ts-ignore
+					if (props.has(name)) { node[name] = v; } else {
+						const val = toAttrValue(v);
+						if (val == null) {
+							node.removeAttribute(name);
+						} else {
+							node.setAttribute(name, val);
+						}
+					}
+				});
+				// @ts-ignore
+				if (props.has(name)) { node[name] = attr; } else {
+					const val = toAttrValue(attr);
+					if (val !== null) {
+						node.setAttribute(name, val);
+					}
+				}
+			}
+			return;
+
+		}
+		for (const [name, attr] of Object.entries(context.tagAttrs)) {
+			if (node instanceof HTMLInputElement && name.toLocaleLowerCase() === 'type') {
+				const value = toAttrValue(attr);
+				if (value !== null) {
+					node.setAttribute(name, value);
+				}
+				continue;
+			}
+			if (name === '$hidden') {
+				if (attr) { node.hidden = attr; }
+				watchAttr(name, (val) => { node.hidden = val; });
+				continue;
+			}
+
+			if (name[0] === '$') {
+				const e = eAttrs[name];
+				if (e) {
+					e(attr, node);
+					watchAttr(name, (attr) => e(attr, node));
+				}
+				continue;
+			}
+			const prop = getAttrs(node, name);
+			if (typeof prop === 'function') {
+				// @ts-ignore
+				node[name] = prop(attr);
+				watchAttr(name, (attr) => {
+					// @ts-ignore
+					node[name] = prop(attr);
+				});
+				continue;
+			}
+			if (prop) {
+				// @ts-ignore
+				node[name] = attr;
+				watchAttr(name, (attr) => {
+					// @ts-ignore
+					node[name] = attr;
+				});
+				continue;
+			}
+			let value = toAttrValue(attr);
+			if (value !== null) {
+				node.setAttribute(name, value);
+			}
+			watchAttr(name, (val) => {
+				const value = toAttrValue(val);
+				if (value === null) {
+					node.removeAttribute(name);
+				} else {
+					node.setAttribute(name, value);
+				}
+			});
+		}
+	});
+	return node;
+}
+
+/** @import * as Layout from '../Layout/index.mjs' */
+/** @import Store, { ArrayStore } from '../Store/index.mjs' */
+
+/**
+ *
+ * @param {Layout.Node} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {ArrayStore} store
+ * @param {Environment} env
+ * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
+ */
+function renderArray(layout, parent, next, store, env, renderItem) {
+	const start = parent.insertBefore(document.createComment(''), next);
+	/** @type {Map<Store, [Comment, Comment, () => void]>} */
+	let seMap = new Map();
+	/** @param {Map<Store, [Comment, Comment, () => void]>} map */
+	function destroyMap(map) {
+		for (const [s, e, d] of map.values()) {
+			d();
+			s.remove();
+			e.remove();
+		}
+
+	}
+	const childrenResult = watch(() => store.children, function render(children) {
+		if (!start.parentNode) { return; }
+		let nextNode = start.nextSibling;
+		const oldSeMap = seMap;
+		seMap = new Map();
+		for (let child of children) {
+			const old = oldSeMap.get(child);
+			if (!old) {
+				const ItemStart = parent.insertBefore(document.createComment(''), nextNode);
+				const itemEnd = parent.insertBefore(document.createComment(''), nextNode);
+				const d = renderItem(layout, parent, itemEnd, child, env.setValue(child, store));
+				seMap.set(child, [ItemStart, itemEnd, d]);
+				continue;
+			}
+			oldSeMap.delete(child);
+			seMap.set(child, old);
+			if (nextNode === old[0]) {
+				nextNode = old[1].nextSibling;
+				continue;
+			}
+			/** @type {Node?} */
+			let c = old[0];
+			while (c && c !== old[1]) {
+				const o = c;
+				c = c.nextSibling;
+				parent.insertBefore(o, nextNode);
+			}
+			parent.insertBefore(old[1], nextNode);
+		}
+		destroyMap(oldSeMap);
+	});
+
+	return () => {
+		start.remove();
+		childrenResult();
+	};
+}
+
+/** @import * as Layout from '../Layout/index.mjs' */
+/**
+ *
+ * @param {any} val
+ * @returns
+ */
+function toText(val) {
+	if ((val ?? null) === null) {
+		return '';
+	}
+	return String(val);
+}
+
+
+/**
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Environment} envs
+ * @param {Layout.Directives} layout
+ */
+function renderFillDirectives(parent, next, envs, { text, html }) {
+	if (text != null) {
+		const node = parent.insertBefore(document.createTextNode(''), next);
+		const stop = envs.watch(text, val => node.textContent = toText(val));
+		return () => {
+			node.remove();
+			stop();
+		};
+	}
+	if (html == null) { return; }
+	const start = parent.insertBefore(document.createComment(''), next);
+	const end = parent.insertBefore(document.createComment(''), next);
+	const div = document.createElement('div');
+	/** @param {string} html  */
+	function add(html) {
+		div.innerHTML = html;
+		for (let node = div.firstChild; node; node = start.firstChild) {
+			parent.insertBefore(node, end);
+		}
+	}
+	function remove() {
+		for (let node = start.nextSibling; node && node !== end; node = start.nextSibling) {
+			node.remove();
+		}
+	}
+	const result = envs.watch(html, val => {
+		remove();
+		add(toText(val));
+	});
+	return () => {
+		result();
+		remove();
+		start.remove();
+		end.remove();
+	};
+}
+
+/** @import * as Layout from '../Layout/index.mjs' */
+
+/**
+ * @param {(Layout.Node | string)[]} layouts
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Environment} envs
+ * @param {(layout: Layout.Node) => () => void} renderItem
+ * @returns {() => void}
+ */
+function renderList(layouts, parent, next, envs, renderItem) {
+
+	/** @type {Set<() => void>?} */
+	let bkList = new Set();
+	/** @type {[string | Function | null, Layout.Node][]} */
+	let ifList = [];
+
+	/** @param {[string | Function | null, Layout.Node][]} list */
+	function renderIf(list) {
+		if (!list.length || !bkList) { return; }
+		const end = parent.insertBefore(document.createComment(''), next);
+		
+		
+		let lastIndex = -1;
+		let destroy = () => { };
+		/**
+		 *
+		 * @param {number} index
+		 * @returns
+		 */
+		function renderIndex(index) {
+			const layout = list[index]?.[1];
+			if (!layout) { return; }
+			destroy = renderItem(layout);
+		}
+		bkList.add(() => {
+			destroy();
+			destroy = () => { };
+			end.remove();
+		});
+		bkList.add(watch(
+			() => list.findIndex(([ifv]) => ifv === null || envs.exec(ifv)),
+			index => {
+				if (index === lastIndex) { return; }
+				lastIndex = index;
+				destroy();
+				destroy = () => { };
+				renderIndex(lastIndex);
+			},
+		));
+	}
+	for (const layout of layouts) {
+		if (typeof layout === 'string') {
+			renderIf(ifList);
+			ifList = [];
+			const node = document.createTextNode(layout);
+			parent.insertBefore(node, next);
+			bkList.add(() => node.remove());
+			continue;
+		}
+		if (ifList.length && layout.directives.else) {
+			const ifv = layout.directives.if || null;
+			ifList.push([ifv, layout]);
+			if (!ifv) {
+				renderIf(ifList);
+				ifList = [];
+			}
+			continue;
+		}
+		renderIf(ifList);
+		ifList = [];
+		const ifv = layout.directives.if;
+		if (ifv) {
+			ifList.push([ifv, layout]);
+			continue;
+		}
+		bkList.add(
+			renderItem(layout)
+		);
+	}
+
+	return () => {
+		if (!bkList) { return; }
+		const list = bkList;
+		bkList = null;
+		for (const s of list) {
+			s();
+		}
+	};
+}
+
+/** @import Store from '../Store/index.mjs' */
+
+/**
+ * @param {Layout.Node} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Environment} env
+ * @param {(layout: Layout.Node) => () => void} renderItem
+ * @returns {() => void}
+ */
+function renderFragment(layout, parent, next, env, renderItem) {
+	return renderFillDirectives(parent, next, env, layout.directives) || 
+	renderList(layout.children || [], parent, next, env, renderItem);
+
+}
+/**
+ * @param {Layout.Node} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Store} store
+ * @param {Environment} env
+ * @param {string[]} componentPath
+ * @param {((path: string[]) => Component?)?} [getComponent]
+ */
+function renderItem(layout, parent, next, store, env, componentPath, getComponent) {
+	env = env.set(layout.aliases, layout.vars);
+	if (!layout.name || layout.directives.fragment) {
+		return renderFragment(layout, parent, next, env, l => {
+			return render(l, parent, next, store, env, componentPath, getComponent);
+		});
+	}
+	const path = [...componentPath, layout.name];
+	const component = getComponent?.(path);
+	if (getComponent && !component) { return () => { }; }
+	const { context, handler } = createContext(component ? component : layout.name, env);
+
+
+	const componentAttrs = component?.attrs;
+	const attrs = componentAttrs
+		? bindAttrs(handler, env, layout.attrs, componentAttrs, layout.directives.bind)
+		: bindBaseAttrs(handler, env, layout.attrs, layout.directives.bind);
+
+	for (const [name, event] of Object.entries(layout.events)) {
+		const fn = env.getEvent(event);
+		if (fn) { handler.addEvent(name, fn); }
+	}
+
+	const r = component ?
+		typeof component.tag === 'function'
+			? component.tag(context)
+			: createTagComponent(context, component.tag, component.is)
+		: createTagComponent(context, layout.name, layout.is);
+	const root = Array.isArray(r) ? r[0] : r;
+	const slot = Array.isArray(r) && r[1] || root;
+	parent.insertBefore(root, next);
+	const children =
+		renderFillDirectives(slot, null, env, layout.directives)
+		|| renderList(layout.children || [], slot, null, env, l => {
+			return render(l, slot, null, store, env, componentPath, getComponent);
+		});
+
+
+	bindClasses(root, layout.classes, env);
+	bindStyles(root, layout.styles, env);
+
+	handler.init();
+	// TODO: 创建组件
+	return () => {
+		root.remove();
+		handler.destroy();
+		attrs();
+		children();
+	};
+}
+/**
+ *
+ * @param {Layout.Node} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Store} store
+ * @param {Environment} env
+ * @param {string[]} componentPath
+ * @param {((path: string[]) => Component?)?} [getComponent]
+ * @returns {() => void}
+ */
+function render(layout, parent, next, store, env, componentPath, getComponent) {
+	const { directives } = layout;
+	const { value } = directives;
+	if (value) {
+		const newStore = store.child(value);
+		if (!newStore) { return () => {}; }
+		store = newStore;
+		env = env.setValue(store);
+	}
+	if (!directives.enum) {
+		return renderItem(layout, parent, next, store, env, componentPath, getComponent);
+	}
+	if (!(store instanceof ArrayStore)) { return () => { }; }
+	return renderArray(layout, parent, next, store, env, (a, b, c, store, env) => {
+		return renderItem(a, b, c, store, env, componentPath, getComponent);
+	});
+}
+
+/**
+ * @overload
+ * @param {Store} store
+ * @param {(Layout.Node | string)[]} layouts 
+ * @param {Element} parent 
+ * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [global] 
+ * @param {(path: string[]) => Component?} [components] 
+ * @returns {() => void}
+ */
+/**
+ * @overload
+ * @param {Store} store
+ * @param {(Layout.Node | string)[]} layouts 
+ * @param {Element} parent 
+ * @param {((path: string[]) => Component?)?} [components] 
+ * @returns {() => void}
+ */
+/**
+ * @param {Store} store
+ * @param {(Layout.Node | string)[]} layouts 
+ * @param {Element} parent 
+ * @param {((path: string[]) => Component?) | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt1] 
+ * @param {((path: string[]) => Component?) | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt2] 
+ */
+function index (store, layouts, parent, opt1, opt2) {
+	const options = [opt1, opt2];
+	const components = options.find(v => typeof v === 'function');
+	const global = options.find(v => typeof v === 'object');
+	const env = new Environment(global).setValue(store);
+	return renderList(layouts, parent, null, env, l => {
+		return render(l, parent, null, store, env, [], components);
+	});
+}
+
+export { index$1 as Layout, Store, index as render };