@neeloong/form 0.10.0 → 0.12.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.10.0
+* @neeloong/form v0.12.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -73,7 +73,7 @@ function toValueItem(v) {
 
 }
 /** @param {*} v  */
-const values$1 = v => {
+const values = v => {
 	if (!v || !Array.isArray(v)) { return null;}
 	const list = v.map(toValueItem).filter(valueFilter);
 	if (!list.length) { return null; }
@@ -148,7 +148,8 @@ let ArrayStore$1 = null;
 /** @type {Record<string, {new(...p: ConstructorParameters<typeof Store>): Store}?>} */
 let TypeStores = Object.create(null);
 /**
- * @param {Schema.Field} schema
+ * @template [M=any]
+ * @param {Schema.Field<M>} schema
  * @param {object} [options] 
  * @param {Store?} [options.parent]
  * @param {string | number | null} [options.index] 
@@ -285,6 +286,7 @@ function merge(...v) {
 /**
  * 管理单个表单字段的状态和行为
  * @template [T=any]
+ * @template [M=any]
  */
 class Store {
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
@@ -326,7 +328,8 @@ class Store {
 	}
 	/**
 	 * 从数据结构模式创建存储
-	 * @param {Schema} schema 数据结构模式
+	 * @template [M=any]
+	 * @param {Schema<M>} schema 数据结构模式
 	 * @param {object} [options] 选项
 	 * @param {boolean} [options.new] 是否为新建环境
 	 */
@@ -350,12 +353,12 @@ class Store {
 	#ref = null;
 	get ref() { return this.#ref || createRef(this); }
 	/**
-	 * @param {Schema.Field} schema 字段的 Schema 定义
+	 * @param {Schema.Field<M>} schema 字段的 Schema 定义
 	 * @param {object} [options] 可选配置
 	 * @param {*} [options.parent] 
 	 * @param {*} [options.state] 
 	 * @param {number | string | null} [options.index] 
-	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.length] 
+	 * @param {number | Signal.State<number> | Signal.Computed<number>} [options.size] 
 	 * @param {boolean} [options.null] 
 	 * @param {boolean} [options.new] 
 	 * @param {boolean} [options.hidden] 
@@ -390,9 +393,9 @@ class Store {
 		null: isNull, state, ref,
 		setValue, setState, convert, onUpdate, onUpdateState,
 		validator, validators,
-		index, length, new: isNew, parent: parentNode,
+		index, size, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly,
-		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values
+		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
 	} = {}) {
 		this.schema = schema;
 		this.#state.set(typeof state === 'object' && state || {});
@@ -455,7 +458,7 @@ class Store {
 		[this.#selfMaxLength, this.#maxLength] = createState(this, number, maxLength, schema.maxLength);
 		[this.#selfPattern, this.#pattern] = createState(this, regex, pattern, schema.pattern);
 		// @ts-ignore
-		[this.#selfValues, this.#values] = createState(this, values$1, values, schema.values);
+		[this.#selfValues, this.#values] = createState(this, values, values$1, schema.values);
 
 		const validatorResult = createValidator(this, schema.validator, validator);
 
@@ -470,10 +473,10 @@ class Store {
 		this.#cancelChange = cancelChange;
 		this.#cancelBlur = cancelBlur;
 		
-		if (length instanceof Signal.State || length instanceof Signal.Computed) {
-			this.#length = length;
+		if (size instanceof Signal.State || size instanceof Signal.Computed) {
+			this.#size = size;
 		} else {
-			this.#length = new Signal.State(length || 0);
+			this.#size = new Signal.State(size || 0);
 		}
 
 		if (isNull) {
@@ -511,7 +514,7 @@ class Store {
 	#root = this;
 	/** @readonly @type {any} */
 	#type;
-	/** @readonly @type {any} */
+	/** @readonly @type {M | void} */
 	#meta;
 	/** @readonly @type {any} */
 	#component;
@@ -529,9 +532,9 @@ class Store {
 	get component() { return this.#component; }
 
 	/** @type {Signal.State<number> | Signal.Computed<number>} */
-	#length;
+	#size;
 	/** 长度信息 */
-	get length() { return this.#length.get(); }
+	get size() { return this.#size.get(); }
 	#index = new Signal.State(/** @type {string | number} */(''));
 	/** 索引信息 */
 	get index() { return this.#index.get(); }
@@ -713,10 +716,10 @@ class Store {
 	/** @readonly @type {Signal.Computed<(Schema.Value.Group | Schema.Value)[] | null>} */
 	#values
 	get selfValues() { return this.#selfValues.get(); }
-	set selfValues(v) { this.#selfValues.set(values$1(v)); }
+	set selfValues(v) { this.#selfValues.set(values(v)); }
 	/** 可选值列表 */
 	get values() { return this.#values.get(); }
-	set values(v) { this.#selfValues.set(values$1(v)); }
+	set values(v) { this.#selfValues.set(values(v)); }
 
 
 	/** @type {Signal.Computed<string[]>} */
@@ -918,7 +921,8 @@ class Store {
 
 /**
  * @template {Record<string, any>} [T=Record<string, any>]
- * @extends {Store<T>}
+ * @template [M=any]
+ * @extends {Store<T, M>}
  */
 class ObjectStore extends Store {
 	get kind() { return 'object'; }
@@ -932,7 +936,7 @@ class ObjectStore extends Store {
 	 */
 	child(key) { return this.#children[key] || null; }
 	/**
-	 * @param {Schema.Object & Schema.Attr} schema
+	 * @param {Schema.Object<M> & Schema.Attr<M>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent] 
 	 * @param {number | string | null} [options.index] 
@@ -944,7 +948,7 @@ class ObjectStore extends Store {
 		const childrenTypes = Object.entries(schema.type);
 		super(schema, {
 			parent, index, new: isNew, onUpdate, onUpdateState,
-			length: childrenTypes.length,
+			size: childrenTypes.length,
 			setValue(v) { return typeof v === 'object' ? v : null; },
 			setState(v) { return typeof v === 'object' ? v : null; },
 			convert(v, state) {
@@ -985,7 +989,8 @@ setObjectStore(ObjectStore);
 
 /**
  * @template [T=any]
- * @extends {Store<(T | null)[]>}
+ * @template [M=any]
+ * @extends {Store<(T | null)[], M>}
  */
 class ArrayStore extends Store {
 	/** @type {(index: number, isNew?: boolean) => Store} */
@@ -1008,7 +1013,7 @@ class ArrayStore extends Store {
 	}
 	get kind() { return 'array'; }
 	/**
-	 * @param {Schema.Field} schema
+	 * @param {Schema.Field<M>} schema
 	 * @param {object} [options] 
 	 * @param {Store?} [options.parent]
 	 * @param {string | number | null} [options.index] 
@@ -1026,6 +1031,7 @@ class ArrayStore extends Store {
 			for (let i = children.length; i < length; i++) {
 					children.push(this.#create(i));
 			}
+			children.length = length;
 			if (oldLength !== length) {
 				childrenState.set(children);
 			}
@@ -1033,7 +1039,7 @@ class ArrayStore extends Store {
 		};
 		super(schema, {
 			index, new: isNew, parent,
-			length: new Signal.Computed(() => childrenState.get().length),
+			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] },
@@ -1223,6 +1229,158 @@ class ArrayStore extends Store {
 // @ts-ignore
 setArrayStore(ArrayStore);
 
+/** @import * as Layout from './index.mjs' */
+
+/** @import { OldNode } from './createElement.mjs' */
+
+/**
+ * @param {(OldNode | string)[]} [layouts]
+ * @returns {Layout.Child[]}
+ */
+function renderList(layouts) {
+	if (!layouts?.length) { return []; }
+	/** @type {Layout.Child[]} */
+	const children = [];
+	/** @type {[Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | null, OldNode][]} */
+	let ifList = [];
+	/** @type {Record<string, Layout.Template>} */
+	let templates = Object.create(null);
+	let hasTemplate = false;
+	for (const layout of layouts) {
+		if (typeof layout === 'string') { continue; }
+		const name = layout.template;
+		if (!name) { continue; }
+		hasTemplate = true;
+		const children = convertItem(layout);
+		templates[name] = { params: layout.params, children: children ? [children] : [] };
+	}
+
+	/** @param {[Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | null, OldNode][]} list */
+	function renderIf(list) {
+		if (!list.length) { return; }
+		children.push({
+			type: 'divergent',
+			children: list.map(([a, b]) => {
+				const child = convertItem(b);
+				if (!child) { return [{ children: [] }, a]; }
+				if (typeof child !== 'string' && child.type === 'fragment') {
+					return [child, a];
+				}
+				return [{ children: [child] }, a];
+			}),
+		});
+	}
+	for (const layout of layouts) {
+		if (typeof layout === 'string') {
+			renderIf(ifList);
+			ifList = [];
+			children.push(layout);
+			continue;
+		}
+		if (layout.template) {
+			renderIf(ifList);
+			ifList = [];
+			continue;
+		}
+		if (ifList.length && layout.else) {
+			const ifv = layout.if || null;
+			ifList.push([ifv, layout]);
+			if (!ifv) {
+				renderIf(ifList);
+				ifList = [];
+			}
+			continue;
+		}
+		renderIf(ifList);
+		ifList = [];
+		const ifv = layout.if;
+		if (ifv) {
+			ifList.push([ifv, layout]);
+			continue;
+		}
+		const s = convertItem(layout);
+		if (s)
+			children.push(s);
+	}
+	renderIf(ifList);
+	if (hasTemplate) {
+		return [{ type: 'fragment', templates, children }];
+	}
+	return children;
+}
+
+
+/**
+ * @param {OldNode} layout
+ * @returns {Layout.Child | undefined}
+ */
+function renderFillDirectives$1({ text, html }) {
+	if (text != null) { return { type: 'content', value: text }; }
+	if (html != null) { return { type: 'content', value: html, html: true }; }
+}
+
+/**
+ * @param {OldNode} layout
+ * @returns {Layout.Child?}
+ */
+function convertNode(layout) {
+	const fragment = layout.fragment;
+	if (fragment && typeof fragment === 'string') {
+		return { type: 'template', template: fragment, attrs: layout.attrs, children: [] };
+	}
+	const child = renderFillDirectives$1(layout);
+	const children = child ? [child] : renderList(layout.children);
+	if (!layout.name || fragment) { return child || { type: 'fragment', children }; }
+	return {
+		name: layout.name,
+		is: layout.is,
+		attrs: layout.attrs,
+		events: layout.events,
+		classes: layout.classes,
+		styles: layout.styles,
+		enhancements: layout.enhancements,
+		bind: layout.bind,
+		comment: layout.comment,
+		children,
+	};
+}
+/**
+ *
+ * @param {OldNode} layout
+ * @returns {Layout.Child?}
+ */
+function convertItem(layout) {
+	let child = convertNode(layout);
+	/** @type {Layout.Variable[]?} */
+	let vars = layout.vars;
+	if (vars.length && child && typeof child !== 'string') {
+		if (child.vars) {
+			child.vars = [...vars, ...child.vars];
+		} else if (child) {
+			child.vars = vars;
+		} else {
+			child = { type: 'fragment', vars, children: [] };
+		}
+		vars = null;
+	}
+	const enumValue = layout.enum;
+	const name = layout.value;
+	if (enumValue) { child = { type: 'enum', value: enumValue, vars, children: child ? [child] : [] }; vars = null; }
+	if (name) { child = { type: 'value', name, vars, children: child ? [child] : [] }; vars = null; }
+	if (vars?.length) {
+		child = { type: 'fragment', vars, children: child ? [child] : [] };
+	}
+	return child;
+}
+
+/**
+ * @param {(OldNode | string)[]} layouts 布局信息
+ * @returns {Layout.Child[]}
+ */
+function convert(layouts) {
+	return renderList(layouts);
+}
+
 const numRegex = /^([+-]?(\d(_?\d)*(\.(\d(_?\d)*)?)?|\.\d(_?\d)*)(?:e[+-]?\d(_?\d)*)|0(b[01](?:_?[01])*|o[0-7](?:_?[0-7])*|x[\dA-F](?:_?[\dA-F])*))$/is;
 /**
  * 
@@ -1278,6 +1436,7 @@ class ParseError extends Error {
 }
 
 /** @import * as Layout from './index.mjs' */
+/** @import { OldNode } from './createElement.mjs' */
 
 const attrPattern = /^(?<decorator>[:@!+*\.?]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
 const enhancementPattern = /^~(?<enhancement>[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_\d\.]*)(?:(?<decorator>[:@!])(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*))?$/u;
@@ -1317,14 +1476,14 @@ function parse$1(value, createCalc) {
 }
 
 /**
- * @param {Layout.Node} node
+ * @param {OldNode} node
  * @param {Exclude<Layout.Options['createCalc'], undefined>} createCalc
  * @param {Exclude<Layout.Options['createInit'], undefined>} createInit
  * @param {Exclude<Layout.Options['createEvent'], undefined>} createEvent
  * @param {boolean} enableHTML
  */
 function createAttributeAdder(node, createCalc, createInit, createEvent, enableHTML) {
-	const { attrs, events, classes, styles, vars, aliases, params, enhancements } = node;
+	const { attrs, events, classes, styles, vars, params, enhancements } = node;
 	/**
 	 * @param {string} qName
 	 * @param {string} value
@@ -1379,11 +1538,11 @@ function createAttributeAdder(node, createCalc, createInit, createEvent, enableH
 			return;
 		}
 		if (decorator === '+') {
-			vars[name] = !value ? {value: undefined} : parse$1(value, createInit);
+			vars.push({...value ? parse$1(value, createInit) : {value: undefined}, variable: name, init: true});
 			return;
 		}
 		if (decorator === '*') {
-			aliases[name] = parse$1(value, createCalc);
+			vars.push({...parse$1(value, createCalc), variable: name, init: false });
 			return;
 		}
 		if (decorator === '?') {
@@ -1420,10 +1579,40 @@ function createAttributeAdder(node, createCalc, createInit, createEvent, enableH
 
 /** @import * as Layout from './index.mjs' */
 
+/**
+ * @typedef {object} OldNode 布局节点
+ * @property {string} name 标签名
+ * @property {string?} [is]
+ * @property {string} [id]
+ * @property {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} attrs 属性
+ * @property {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} params 模板参数定义
+ * @property {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} classes 类名
+ * @property {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} styles 样式
+ * @property {Record<string, Layout.Node.Name | Layout.Node.Event>} events 事件
+ * @property {Layout.Variable[]} vars 局部变量/别名/计算名
+ * @property {Record<string, Layout.Enhancement>} enhancements 增强
+ * 
+ * @property {string} [template] 模板定义的名称
+ * @property {boolean | string} [fragment] 是否为片段或模板调用
+ * 
+ * @property {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [if] 分歧条件
+ * @property {boolean} [else] 否定
+ * 
+ * @property {string} [value] 值关联
+ * @property {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [enum] 列表属性枚举
+ * 
+ * @property {boolean | string} [bind] 绑定内容
+ * @property {Layout.Node.Name | Layout.Node.Value | Layout.Node.Calc} [text] 文本渲染
+ * @property {Layout.Node.Name | Layout.Node.Value | Layout.Node.Calc} [html] HTML 渲染
+ * 
+ * @property {string} [comment] 注释
+ * 
+ * @property {(OldNode | string)[]} children 子元素
+ */
 /**
  * @param {string} name
  * @param {string?} [is]
- * @returns {Layout.Node}
+ * @returns {OldNode}
  * 
  */
 function createElement(name, is) {
@@ -1435,8 +1624,7 @@ function createElement(name, is) {
 		events: Object.create(null),
 		classes: Object.create(null),
 		styles: Object.create(null),
-		vars: Object.create(null),
-		aliases: Object.create(null),
+		vars: [],
 		params: Object.create(null),
 		enhancements: Object.create(null),
 	};
@@ -1689,6 +1877,7 @@ var entityMap = {
 };
 
 /** @import * as Layout from './index.mjs' */
+/** @import { OldNode } from './createElement.mjs' */
 
 const tagNamePattern = /^(?<name>[\w\p{Unified_Ideograph}_][-\.\|:|d\w\p{Unified_Ideograph}_:]*)(?:|(?<is>[\w\p{Unified_Ideograph}_][-\.\|:|d\w\p{Unified_Ideograph}_]*))?$/u;
 
@@ -1754,7 +1943,7 @@ function entityReplacer(a) {
  * 解析模板内容
  * @param {string} source 输入源字符串
  * @param {Layout.Options} [options] 解析选项
- * @returns {(Layout.Node | string)[]}
+ * @returns {Layout.Child[]}
  */
 function parse(source, {
 	createCalc = () => { throw new ParseError('CALC'); },
@@ -1763,15 +1952,15 @@ function parse(source, {
 	simpleTag = new Set,
 	enableHTML = false,
 } = {}) {
-	/** @type {(Layout.Node | string)[]} */
+	/** @type {(OldNode | string)[]} */
 	const children = [];
 
 	const doc = { children };
-	/** @type {(Layout.Node | null)[]} */
+	/** @type {(OldNode | null)[]} */
 	const stack = [];
-	/** @type {Layout.Node?} */
+	/** @type {OldNode?} */
 	let currentNode = null;
-	/** @type {typeof doc | Layout.Node} */
+	/** @type {typeof doc | OldNode} */
 	let current = doc;
 	function endElement() {
 		currentNode = stack.pop() || null;
@@ -1947,229 +2136,156 @@ function parse(source, {
 			endElement();
 		}
 	}
-	return children;
+	return convert(children);
 }
 
-/** @import * as Layout from './index.mjs' */
-
 /**
- * 
- * @param {*} c 
- * @returns 
+ * @typedef {object} Enhancement 增强信息
+ * @property {Record<string, Node.Name | Node.Event>} events 事件
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
+ * @property {Node.Name | Node.Calc | Node.Value} [value] 主值
+ * @property {boolean | string} [bind] 绑定信息
  */
-function _xmlEncoder(c) {
-	return c == '<' && '&lt;' ||
-		c == '>' && '&gt;' ||
-		c == '&' && '&amp;' ||
-		c == '"' && '&quot;' ||
-		'&#' + c.charCodeAt() + ';';
-}
 
 /**
- * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Event | Layout.Node.Value} def 
+ * @typedef {object} Options 解析选项
+ * @property {boolean} [enableHTML] 启用 `!html` 指令
+ * @property {(t: string) => Calc} [createCalc] 创建计算属性的工厂函数
+ * @property {(t: string) => Calc} [createInit] 创建变量初始化的工厂函数
+ * @property {(t: string) => EventListener} [createEvent] 创建事件监听器的工厂函数
+ * @property {Set<string>} [simpleTag] 简单标签的集合
+ */
+/**
+ * @template [T=any]
+ * @typedef {{value: T; name?: undefined; calc?: undefined; event?: undefined}} Node.Value 基础值
  */
-function toValue({name, calc, event, value}) {
-	if (value === true || value === undefined) { return ''; }
-	const val = typeof value === 'string' ? JSON.stringify(value) : name || calc || event || value;
-		return `="${toAttrValue$1(val)}"`;
-}
 /**
- * @param {string | Function | null} [value] 
+ * @typedef {{name: string; value?: undefined; calc?: undefined; event?: undefined}} Node.Name 名称
+ */
+/**
+ * @typedef {{event: EventListener; name?: undefined; calc?: undefined; value?: undefined}} Node.Event 事件
  */
-function toAttrValue$1(value) {
-	return String(value).replace(/[<&"]/g, _xmlEncoder);
-}
-
 /**
- * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Event | Layout.Node.Value>} values
- * @param {string} [prefix]
- * @param {boolean | null} [isName]
+ * @typedef {{calc: Calc; name?: undefined; value?: undefined; event?: undefined}} Node.Calc 计算
  */
-function *values(values, prefix, isName = false) {
-	if (prefix) {
-		for (const [key, {name, calc, event, value}] of Object.entries(values)) {
-			yield ` ${prefix}${key}`;
-			if (isName && name === key) { continue; }
-			const val = value && typeof value === 'string' ? JSON.stringify(value) : name || calc || event || value;
-			if (val == null) { continue; }
-			if (isName === false && val === true) { continue; }
-			yield `="${toAttrValue$1(val)}"`;
-		}
-		return;
-	}
-	for (const [key, attr] of Object.entries(values)) {
-		if (!attr) { continue; }
-		const {name, value, calc} = attr;
-		if (name === key) { yield ` :${key}`; continue; }
-		if (name || calc || typeof value !== 'string') {
-			yield ` :${key}="${toAttrValue$1(name || calc || value)}"`;
-			continue;
-		}
-		yield ` ${key}`;
-		if (value) {
-			yield `="${toAttrValue$1(value)}"`;
-		}
-	}
-}
-
 
 /**
  * 
- * @param {Layout.Node} node 
- * @param {number} [level] 
- * @returns {Iterable<string>}
+ * @typedef {Divergent | Select | Enum | Content | CallTemplate | Fragment | Node | string} Child 分歧
  */
-function* nodeToString(node, level = 0) {
-	const { children, is, name } = node;
-	const pad = level > 0 ? ''.padEnd(level, '\t') : '';
-
-	yield pad;
-	yield* ['<', name || '-'];
-	if (is) { yield* ['|', is]; }
-	if (node.template) {
-		yield ` !template="${toAttrValue$1(node.template)}"`;
-		yield* values(node.params, '?', null);
-	}
-	if (node.fragment) { yield node.fragment === true ? ` !fragment` : ` !fragment="${toAttrValue$1(node.fragment)}"`; }
-	if (node.else) { yield ` !else`; }
-	if (node.if) { yield ` !if${toValue(node.if)}`; }
-	if (node.value) { yield ` !value="${toAttrValue$1(node.value)}"`; }
-	if (node.enum) { yield ` !enum${toValue(node.enum)}`; }
-	yield* values(node.aliases, '*', null);
-	yield* values(node.vars, '+', null);
-	if (node.bind) { yield node.bind === true ? ` !bind` : ` !bind="${toAttrValue$1(node.bind)}"`; }
-	yield* values(node.attrs);
-	yield* values(node.events, '@', true);
-	yield* values(node.classes, '.', true);
-	yield* values(node.styles, 'style:');
-	for (const [k, en] of Object.entries(node.enhancements)) {
-		if (en.bind) { yield en.bind === true ? ` ~${k}!bind` : ` ~${k}!bind="${toAttrValue$1(en.bind)}"`; }
-		if (en.value) { yield ` ~${k}${toValue(en.value)}`; }
-		yield* values(en.attrs, `~${k}:`, true);
-		yield* values(en.events, `~${k}@`, true);
-	}
-	if (node.text) { yield ` !text${toValue(node.text)}`; }
-	if (node.html) { yield ` !html${toValue(node.html)}`; }
-	if (node.comment) { yield ` !comment="${toAttrValue$1(node.comment)}"`; }
-	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>}
+ * @template [T=unknown]
+ * @typedef {object} Variable 变量定义
+ * @property {string} variable
+ * @property {string} [name]
+ * @property {Calc} [calc]
+ * @property {T} [value]
+ * @property {boolean} [init] 是否普通变量
+ * @property {string} [comment] 注释
  */
-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}
+ * @typedef {object} Template
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} params 模板参数定义
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
  */
-function stringify(value, formable) {
-	const level = formable ? 0 : -1;
-	if (Array.isArray(value)) { return [...listToString(value, level)].join(''); }
-	return [nodeToString(value, level)].join();
-
-}
-
 /**
- * @typedef {object} Enhancement 增强信息
- * @property {Record<string, Node.Name | Node.Event>} events 事件
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
- * @property {Node.Name | Node.Calc | Node.Value} [value] 主值
- * @property {boolean | string} [bind] 绑定信息
+ * 
+ * @typedef {object} DivergentChildren 分歧项
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
  */
-
 /**
- * @typedef {object} Options 解析选项
- * @property {boolean} [enableHTML] 启用 `!html` 指令
- * @property {(t: string) => Calc} [createCalc] 创建计算属性的工厂函数
- * @property {(t: string) => Calc} [createInit] 创建变量初始化的工厂函数
- * @property {(t: string) => EventListener} [createEvent] 创建事件监听器的工厂函数
- * @property {Set<string>} [simpleTag] 简单标签的集合
+ * 
+ * @typedef {object} Divergent 分歧
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'divergent'} type
+ * @property {[children: DivergentChildren, condition?: Node.Name | Node.Calc | Node.Value | null][]} children
+ * @property {string} [comment] 注释
  */
 /**
- * @template [T=any]
- * @typedef {{value: T; name?: undefined; calc?: undefined; event?: undefined}} Node.Value 基础值
+ * 
+ * @typedef {object} Select 选值
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'value'} type
+ * @property {string} name
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
  */
 /**
- * @typedef {{name: string; value?: undefined; calc?: undefined; event?: undefined}} Node.Name 名称
+ * 
+ * @typedef {object} Enum 枚举
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'enum'} type
+ * @property {Node.Name | Node.Calc | Node.Value} value
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
  */
 /**
- * @typedef {{event: EventListener; name?: undefined; calc?: undefined; value?: undefined}} Node.Event 事件
+ * 
+ * @typedef {object} Content 内容填充
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'content'} type
+ * @property {Node.Name | Node.Calc | Node.Value} value
+ * @property {boolean} [html]
+ * @property {string} [comment] 注释
  */
 /**
- * @typedef {{calc: Calc; name?: undefined; value?: undefined; event?: undefined}} Node.Calc 计算
+ * 
+ * @typedef {object} CallTemplate 模板调用
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'template'} type
+ * @property {string} template 模板名
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
+ * @property {boolean | string} [bind] 绑定内容
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
+ */
+
+/**
+ * @typedef {object} Fragment 片段
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {'fragment'} type
+ * @property {Child[]} children 子元素
+ * @property {string} [comment] 注释
  */
+
+
 /**
  * @typedef {object} Node 布局节点
+ * @property {Variable[]?} [vars] 局部变量/别名/计算名
+ * @property {Record<string, Template>} [templates]
+ * @property {null} [type]
+ * 
  * @property {string} name 标签名
  * @property {string?} [is]
  * @property {string} [id]
  * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} params 模板参数定义
  * @property {Record<string, Node.Name | Node.Calc | Node.Value>} classes 类名
  * @property {Record<string, Node.Name | Node.Calc | Node.Value>} styles 样式
  * @property {Record<string, Node.Name | Node.Event>} events 事件
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} vars 局部变量
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} aliases 别名/计算名
  * @property {Record<string, Enhancement>} enhancements 增强
  * 
- * @property {string} [template] 模板定义的名称
- * @property {boolean | string} [fragment] 是否为片段或模板调用
- * 
- * @property {Node.Name | Node.Calc | Node.Value} [if] 分歧条件
- * @property {boolean} [else] 否定
- * 
- * @property {string} [value] 值关联
- * @property {Node.Name | Node.Calc | Node.Value} [enum] 列表属性枚举
  * 
  * @property {boolean | string} [bind] 绑定内容
- * @property {Node.Name | Node.Value | Node.Calc} [text] 文本渲染
- * @property {Node.Name | Node.Value | Node.Calc} [html] HTML 渲染
  * 
  * @property {string} [comment] 注释
  * 
- * @property {(Node | string)[]} children 子元素
+ * @property {Child[]} children 子元素
  */
 
+
 /**
  * @callback Calc 计算函数
  * @param {Record<string, any>} env 上下文环境
@@ -2184,10 +2300,9 @@ function stringify(value, formable) {
  * @returns {void}
 */
 
-var index$1 = /*#__PURE__*/Object.freeze({
+var index = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	parse: parse,
-	stringify: stringify
+	parse: parse
 });
 
 /**
@@ -2283,7 +2398,7 @@ const bindable = {
 	null: true,
 	index: true,
 	no: true,
-	length: true,
+	size: true,
 
 	error: true,
 	errors: true,
@@ -2342,7 +2457,7 @@ function *toParentItem(parent, val, key = '', sign = '$') {
 	yield [`${key}${sign}downMovable`, {get: () => {
 		const s = val.index;
 		if (typeof s !== 'number') { return false; }
-		if (s >= parent.length - 1) { return false; }
+		if (s >= parent.size - 1) { return false; }
 		return true;
 	}}];
 	yield [`${key}${sign}remove`, {exec: () => parent.remove(Number(val.index))}];
@@ -2355,7 +2470,7 @@ function *toParentItem(parent, val, key = '', sign = '$') {
 	yield [`${key}${sign}downMove`, {exec: () => {
 		const s = val.index;
 		if (typeof s !== 'number') { return; }
-		if (s >= parent.length - 1) { return; }
+		if (s >= parent.size - 1) { return; }
 		parent.move(s, s + 1);
 	}}];
 }
@@ -2507,10 +2622,9 @@ class Environment {
 	watch(value, cb) { return watch(() => this.exec(value), cb, true); }
 
 	/**
-	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | null} [en]
+	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} en
 	 */
 	enum(en) {
-		if (!en) { return true; }
 		const {name, calc} = en;
 		if (typeof calc === 'function') { return () => calc(this.getters); }
 		if (typeof name === 'string') {
@@ -2696,17 +2810,16 @@ class Environment {
 		const store = this.store;
 		const parent = this.#parent;
 		const object = this.#object;
+		for (const [key, item] of toItem(store)) {
+			ais[key] = item;
+		}
+		for (const [key, item] of toParentItem(parent, store)) {
+			ais[key] = item;
+		}
 		if (object) {
 			for (const k of Object.keys(object)) {
 				ais[`$${k}`] = {get: () => object[k]};
 			}
-		} else {
-			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;
@@ -2715,11 +2828,13 @@ class Environment {
 	 * 
 	 * @param {Store} store 
 	 * @param {Store} parent 
+	 * @param {Record<string, any>} [object] 
 	 */
-	setStore(store, parent) {
+	setStore(store, parent, object) {
 		const cloned = new Environment(store, this);
 		if (parent) { cloned.#parent = parent; }
 		setStore(cloned.#schemaItems, store);
+		if (object) { cloned.#object = object; }
 		return cloned;
 	}
 	/**
@@ -2736,12 +2851,12 @@ class Environment {
 	}
 	/**
 	 * 
-	 * @param {Layout.Node} template 
-	 * @param {Layout.Node} source 
+	 * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value<any>>} params 
+	 * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value<any>>} attrs 
 	 * @param {Environment} sourceEnv 
 	 * @param {string | null | boolean} [bind] 
 	 */
-	params({params}, {attrs}, sourceEnv, bind) {
+	params(params, attrs, sourceEnv, bind) {
 		/** @type {Store} */
 		let store = this.store;
 		if (bind === true) {
@@ -2820,22 +2935,39 @@ class Environment {
 	}
 	/**
 	 * 
-	 * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} aliases 
-	 * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} vars 
+	 * @param {Layout.Variable[]?} [vars] 
+	 * @returns 
 	 */
-	set(aliases, vars) {
-		if (Object.keys(aliases).length + Object.keys(vars).length === 0) { return this; }
+	set(vars) {
+		if (!vars?.length) { return this; }
 		const cloned = new Environment(this.store, this);
 		cloned.#parent = this.#parent;
 		cloned.#object = this.#object;
 		const explicit = cloned.#explicit;
 		const items = cloned.#items;
-		for (const [key, {name, calc, value}] of Object.entries(aliases)) {
+		for (const { variable, name, calc, value, init } of vars) {
+			if (init) {
+				const val = new Signal.State(/** @type {any} */(value));
+				if (typeof calc === 'function') {
+					const settable = cloned.settable;
+					cloned.#settable = null;
+					val.set(calc(settable));
+				} else if (name) {
+					const item = items[name];
+					if (!item?.get) { continue; }
+					val.set(item.get());
+				}
+				explicit[variable] = items[variable] = {
+					get: () => { return val.get(); },
+					set: (v) => { val.set(v); },
+				};
+				continue;
+			}
 			if (typeof calc === 'function') {
 				const getters = cloned.getters;
 				cloned.#getters = null;
 				const val = new Signal.Computed(() => calc(getters));
-				explicit[key] = items[key] = {
+				explicit[variable] = items[variable] = {
 					get: () => { return val.get(); },
 				};
 				continue;
@@ -2844,34 +2976,17 @@ class Environment {
 				const item = items[name];
 				if (!item) { continue; }
 				if (!item.get || !item.store) {
-					explicit[key] = items[key] = item;
+					explicit[variable] = items[variable] = item;
 					continue;
 				}
-				for (const [k, it] of toItem(item.store, key)) {
+				for (const [k, it] of toItem(item.store, variable)) {
 					explicit[k] = items[k] = it;
 				}
 				continue;
 			}
-			explicit[key] = items[key] = { get: () => { return value; } };
+			explicit[variable] = items[variable] = { get: () => { return value; } };
 			continue;
 		}
-		for (const [k,{name, calc, value}] of Object.entries(vars)) {
-			
-			const val = new Signal.State(/** @type {any} */(value));
-			if (typeof calc === 'function') {
-				const settable = cloned.settable;
-				cloned.#settable = null;
-				val.set(calc(settable));
-			} else if (name) {
-				const item = items[name];
-				if (!item?.get) { continue }
-				val.set(item.get());
-			}
-			explicit[k] = items[k] = {
-				get: () => { return val.get(); },
-				set: (v) => { val.set(v); },
-			};
-		}
 		return cloned;
 	}
 
@@ -3854,17 +3969,24 @@ function renderArray(parent, next, store, env, renderItem) {
 		}
 
 	}
+	const count = new Signal.State(0);
 	const childrenResult = watch(() => store.children, function render(children) {
 		if (!start.parentNode) { return; }
 		let nextNode = start.nextSibling;
 		const oldSeMap = seMap;
 		seMap = new Map();
+		count.set(children.length);
 		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(itemEnd, env.setStore(child, store));
+				const d = renderItem(itemEnd, env.setStore(child, store, {
+					get count() { return count.get() },
+					get key() { return child.index; },
+					get index() { return child.index; },
+					get item() { return child.value; },
+				}));
 				seMap.set(child, [ItemStart, itemEnd, d]);
 				continue;
 			}
@@ -3911,18 +4033,18 @@ function toText(val) {
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} envs
- * @param {Layout.Node} layout
+ * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} value
+ * @param {boolean} [isHtml]
  */
-function renderFillDirectives(parent, next, envs, { text, html }) {
-	if (text != null) {
+function renderFillDirectives(parent, next, envs, value, isHtml) {
+	if (!isHtml) {
 		const node = parent.insertBefore(document.createTextNode(''), next);
-		const stop = envs.watch(text, val => node.textContent = toText(val));
+		const stop = envs.watch(value, 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');
@@ -3938,7 +4060,7 @@ function renderFillDirectives(parent, next, envs, { text, html }) {
 			node.remove();
 		}
 	}
-	const result = envs.watch(html, val => {
+	const result = envs.watch(value, val => {
 		remove();
 		add(toText(val));
 	});
@@ -3950,113 +4072,7 @@ function renderFillDirectives(parent, next, envs, { text, html }) {
 	};
 }
 
-/** @import * as Layout from '../Layout/index.mjs' */
-
-/**
- * @param {(Layout.Node | string)[]} layouts
- * @param {Element} parent
- * @param {Node?} next
- * @param {Environment} envs
- * @param {Record<string, [Layout.Node, Environment]>} templates
- * @param {(layout: Layout.Node, templates: Record<string, any>) => () => void} renderItem
- * @returns {() => void}
- */
-function renderList(layouts, parent, next, envs, templates, renderItem) {
-
-	/** @type {Set<() => void>?} */
-	let bkList = new Set();
-	/** @type {[Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | null, Layout.Node][]} */
-	let ifList = [];
-	/** @type {Record<string, [Layout.Node, Environment]>} */
-	let currentTemplates = Object.create(templates);
-	for (const layout of layouts) {
-		if (typeof layout === 'string') { continue; }
-		const name = layout.template;
-		if (!name) { continue; }
-		currentTemplates[name] = [layout, envs];
-	}
-
-	/** @param {[Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | 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, currentTemplates);
-		}
-		bkList.add(() => {
-			destroy();
-			destroy = () => { };
-			end.remove();
-		});
-		bkList.add(watch(
-			() => list.findIndex(([ifv]) => !ifv || envs.exec(ifv)),
-			index => {
-				if (index === lastIndex) { return; }
-				lastIndex = index;
-				destroy();
-				destroy = () => { };
-				renderIndex(lastIndex);
-			}, true,
-		));
-	}
-	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 (layout.template) {
-			renderIf(ifList);
-			ifList = [];
-			continue;
-		}
-		if (ifList.length && layout.else) {
-			const ifv = layout.if || null;
-			ifList.push([ifv, layout]);
-			if (!ifv) {
-				renderIf(ifList);
-				ifList = [];
-			}
-			continue;
-		}
-		renderIf(ifList);
-		ifList = [];
-		const ifv = layout.if;
-		if (ifv) {
-			ifList.push([ifv, layout]);
-			continue;
-		}
-		bkList.add(
-			renderItem(layout, currentTemplates)
-		);
-	}
-	renderIf(ifList);
-
-	return () => {
-		if (!bkList) { return; }
-		const list = bkList;
-		bkList = null;
-		for (const s of list) {
-			s();
-		}
-	};
-}
-
-/** @import { ObjectStore } from '../Store/index.mjs' */
+/** @import { ObjectStore, Store } from '../Store/index.mjs' */
 
 /**
  *
@@ -4069,8 +4085,16 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 function renderObject(parent, next, store, env, renderItem) {
 	/** @type {(() => void)[]} */
 	const children = [];
-	for (const [k, child] of [...store]) {
-	children.push(renderItem(next, env.setStore(child, store)));
+	/** @type {[string, Store<any, any>, number][]} */
+	const childStores = [...store].map(([k,v], i) => [k,v,i]);
+	const count = childStores.length;
+	for (const [key, child, index] of childStores) {
+	children.push(renderItem(next, env.setStore(child, store, {
+		get count() { return count; },
+		get key() { return key; },
+		get index() { return index; },
+		get item() { return child.value; },
+	})));
 	}
 
 	return () => {
@@ -4116,11 +4140,13 @@ function renderEnum(parent, next, getter, env, renderItem) {
 			e.remove();
 		}
 	}
+	const count = new Signal.State(0);
 	const childrenResult = watch(() => list.get(), function render(children) {
 		if (!start.parentNode) { return; }
 		let nextNode = start.nextSibling;
 		const oldSeMap = seMap;
 		seMap = [];
+		count.set(children.length);
 		for (const [value, index, key] of children) {
 			const index2 = oldSeMap.findIndex((v) => v[3] === key);
 			const [old] = index2 >= 0 ? oldSeMap.splice(index2, 1) : [];
@@ -4130,8 +4156,9 @@ function renderEnum(parent, next, getter, env, renderItem) {
 				const valueState = new Signal.State(value);
 				const indexState = new Signal.State(index);
 				const d = renderItem(itemEnd, env.setObject({
+					get count() { return count.get() },
 					get key() { return key; },
-					get value() { return valueState.get(); },
+					get item() { return valueState.get(); },
 					get index() { return indexState.get(); },
 				}));
 				seMap.push([ItemStart, itemEnd, d, key, valueState, indexState]);
@@ -4320,6 +4347,50 @@ function bindEnhancements(tag, enhancementDefine, env, enhancements, root, slot)
 	};
 }
 
+/** @import * as Layout from '../Layout/index.mjs' */
+
+/**
+ * @param {Layout.Divergent} layout
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Environment} env
+ * @param {(layout: Layout.Child[], vars?: Layout.Variable[]?, templates?: Record<string, any>) => () => void} renderItem
+ * @returns {() => void}
+ */
+function divergent(layout, parent, next, env, renderItem) {
+	const children = layout.children;
+	if (!children.length) { return () => { }; }
+	const end = parent.insertBefore(document.createComment(''), next);
+	/** @type {typeof children[0]?} */
+	let last = null;
+	let destroy = () => { };
+	const stop = () => {
+		destroy();
+		destroy = () => { };
+		end.remove();
+	};
+	const unwatch = watch(
+		() => children.find(([, ifv]) => !ifv || env.exec(ifv)) || null,
+		item => {
+			if (item === last) { return; }
+			last = item;
+			destroy();
+			destroy = () => { };
+			const layout = item?.[0];
+			if (!layout) { return; }
+			destroy = renderItem(layout.children, layout.vars, layout.templates);
+		}, true,
+	);
+
+	let destroyed = false;
+	return () => {
+		if (destroyed) { return; }
+		destroyed = true;
+		unwatch();
+		stop();
+	};
+}
+
 /** @import Store from '../Store/index.mjs' */
 
 /**
@@ -4327,37 +4398,19 @@ function bindEnhancements(tag, enhancementDefine, env, enhancements, root, slot)
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} env
- * @param {Record<string, [Layout.Node, Environment]>} templates
+ * @param {Record<string, [Layout.Template, Environment]>} templates
  * @param {string[]} componentPath
  * @param {Record<string, Enhancement>} enhancements
  * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  */
-function renderItem(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
-	env = env.set(layout.aliases, layout.vars);
+function renderNode(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
 	const bind = layout.bind;
-	const fragment = layout.fragment;
-	if (fragment && typeof fragment === 'string') {
-		const template = templates[fragment];
-		if (!template) { return () => {}; }
-		const [templateLayout, templateEnv] = template;
-		const newEnv = templateEnv.params(templateLayout, layout, env, bind);
-		return render(templateLayout, parent, next, newEnv, templates, componentPath, enhancements, relate, getComponent);
-	}
-	if (!layout.name || layout.fragment) {
-		return renderFillDirectives(parent, next, env, layout) || 
-			renderList(layout.children || [], parent, next, env, templates, (layout, templates) => {
-				return render(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
-			});
-	}
 	const path = [...componentPath, layout.name];
 	const component = getComponent?.(path);
 	if (getComponent && !component) { return () => { }; }
 	const { context, handler } = createContext(
-		component ? component : layout.name,
-		env,
-		env.getStore(bind),
-		relate
+		component ? component : layout.name, env, env.getStore(bind), relate
 	);
 
 	const componentAttrs = component?.attrs;
@@ -4381,11 +4434,9 @@ function renderItem(layout, parent, next, env, templates, componentPath, enhance
 	const root = Array.isArray(r) ? r[0] : r;
 	const slot = Array.isArray(r) ? r[1] : root;
 	parent.insertBefore(root, next);
-	const children = slot ? 
-		renderFillDirectives(slot, null, env, layout)
-		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
-			return render(layout, slot, null, env, templates, componentPath, enhancements, relate, getComponent);
-		}) : () => {};
+	const children = slot ?
+		renderChildren(layout.children || [], slot, null, env, templates, componentPath, enhancements, relate, getComponent)
+		: () => { };
 
 
 	const classes = bindClasses(root, env, layout.classes, layout.attrs.class);
@@ -4393,7 +4444,7 @@ function renderItem(layout, parent, next, env, templates, componentPath, enhance
 
 	handler.mount();
 	const enhancement = bindEnhancements(handler.tag, layout.enhancements, env, enhancements, root, slot);
-	
+
 	return () => {
 		enhancement();
 		handler.destroy();
@@ -4405,43 +4456,117 @@ function renderItem(layout, parent, next, env, templates, componentPath, enhance
 		styles();
 	};
 }
+
 /**
  *
- * @param {Layout.Node} layout
+ * @param {Environment} env
+ * @param {Record<string, [Layout.Template, Environment]>} parentTemplates
+ * @param {Record<string, Layout.Template>} [newTemplates]
+ * @returns {Record<string, [Layout.Template, Environment]>}
+ */
+function createTemplates(env, parentTemplates, newTemplates) {
+	if (!newTemplates) { return parentTemplates; }	const layOutTemplates = Object.entries(newTemplates);
+	if (!layOutTemplates.length) { return parentTemplates; }
+	/** @type {Record<string, [Layout.Template, Environment]>} */
+	const templates = Object.create(parentTemplates);
+	for (const [name, template] of layOutTemplates) {
+		templates[name] = [template, env];
+	}
+	return templates;
+}
+/**
+ *
+ * @param {Layout.Child} layout
  * @param {Element} parent
  * @param {Node?} next
- * @param {Environment} env
- * @param {Record<string, [Layout.Node, Environment]>} templates
+ * @param {Environment} parentEnv
+ * @param {Record<string, [Layout.Template, Environment]>} parentTemplates
  * @param {string[]} componentPath
  * @param {Record<string, Enhancement>} enhancements
  * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
  * @param {Component.Getter?} [getComponent]
  * @returns {() => void}
  */
-function render(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
-	const newEnv = env.child(layout.value);
-	if (!newEnv) { return () => {}; }
-	const list = newEnv.enum(layout.enum);
-	/** @type {(next: Node | null, env: any) => () => void} */
-	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
-	if (list === true) {
-		return r(next, newEnv);
+function renderChild(layout, parent, next, parentEnv, parentTemplates, componentPath, enhancements, relate, getComponent) {
+	if (typeof layout === 'string') {
+		const node = document.createTextNode(layout);
+		parent.insertBefore(node, next);
+		return () => node.remove();
 	}
-	if (list instanceof ArrayStore) {
-		return renderArray(parent, next, list, newEnv, r);
+	const env = parentEnv.set(layout.vars);
+	const templates = createTemplates(env, parentTemplates, layout.templates);
+	if (layout.type === 'divergent') {
+		return divergent(layout, parent, next, env, (list, vars, templates2) => {
+			const listEnv = env.set(vars);
+			const templates = createTemplates(listEnv, parentTemplates, templates2);
+			return renderChildren(list, parent, next, listEnv, templates, componentPath, enhancements, relate, getComponent);
+		});
 	}
-	if (list instanceof ObjectStore) {
-		return renderObject(parent, next, list, newEnv, r);
+	if (layout.type === 'value') {
+		const newEnv = env.child(layout.name);
+		if (!newEnv) { return () => { }; }
+		return renderChildren(layout.children, parent, next, newEnv, templates, componentPath, enhancements, relate, getComponent);
 	}
-	if (typeof list === 'function') {
-		return renderEnum(parent, next, list, newEnv, r);
+	if (layout.type === 'enum') {
+		const list = env.enum(layout.value);
+		/** @type {(next: Node | null, env: any) => () => void} */
+		const r = (next, env) => renderChildren(layout.children, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
+		if (list instanceof ArrayStore) {
+			return renderArray(parent, next, list, env, r);
+		}
+		if (list instanceof ObjectStore) {
+			return renderObject(parent, next, list, env, r);
+		}
+		if (typeof list === 'function') {
+			return renderEnum(parent, next, list, env, r);
+		}
+		return () => { };
 	}
-	return () => { };
+	if (layout.type === 'content') {
+		return renderFillDirectives(parent, next, env, layout.value, layout.html);
+	}
+	if (layout.type === 'template') {
+		const template = templates[layout.template];
+		if (!template) { return () => { }; }
+		const [templateLayout, templateEnv] = template;
+		const newEnv = templateEnv.params(templateLayout.params, layout.attrs, env, layout.bind);
+		const subTemplates = createTemplates(newEnv, parentTemplates, templateLayout.templates);
+		return renderChildren(templateLayout.children, parent, next, newEnv, subTemplates, componentPath, enhancements, relate, getComponent);
+	}
+	if (layout.type === 'fragment') {
+		return renderChildren(layout.children, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
+	}
+	return renderNode(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
+}
+
+/**
+ *
+ * @param {Layout.Child[]} layouts
+ * @param {Element} parent
+ * @param {Node?} next
+ * @param {Environment} env
+ * @param {Record<string, [Layout.Template, Environment]>} templates
+ * @param {string[]} componentPath
+ * @param {Record<string, Enhancement>} enhancements
+ * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
+ * @param {Component.Getter?} [getComponent]
+ * @returns {() => void}
+ */
+function renderChildren(layouts, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
+	const list = layouts.map(v => renderChild(v, parent, next, env, templates, componentPath, enhancements, relate, getComponent));
+	let removed = false;
+	return () => {
+		if (removed) { return; }
+		removed = true;
+		for (const k of list) {
+			k();
+		}
+	};
 }
 
 /**
  * @param {Store} store 存储实例
- * @param {(Layout.Node | string)[]} layouts 布局信息
+ * @param {Layout.Child[]} layouts 布局信息
  * @param {Element} parent 渲染节点
  * @param {object} [options] 选项
  * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 全局数据
@@ -4450,14 +4575,12 @@ function render(layout, parent, next, env, templates, componentPath, enhancement
  * @param {Record<string, Enhancement>} [options.enhancements] 增强信息
  * @returns {() => void}
  */
-function index (store, layouts, parent, {component, global, relate, enhancements} = {}) {
+function render(store, layouts, parent, { component, global, relate, enhancements } = {}) {
 	const env = new Environment(store, global);
 	const templates = Object.create(null);
 	const allEnhancements = enhancements || {};
-	const relateFn = typeof relate  === 'function' ? relate : null;
-	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
-		return render(layout, parent, null, env, templates, [], allEnhancements, relateFn, component);
-	});
+	const relateFn = typeof relate === 'function' ? relate : null;
+	return renderChildren(layouts, parent, null, env, templates, [], allEnhancements, relateFn, component);
 }
 
-export { index$1 as Layout, Store, effect, index as render, watch };
+export { index as Layout, Store, effect, render, watch };