@neeloong/form 0.10.0 → 0.12.0

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.10.0
+* @neeloong/form v0.12.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -651,7 +651,7 @@
 
   }
   /** @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; }
@@ -726,7 +726,8 @@
   /** @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] 
@@ -863,6 +864,7 @@
   /**
    * 管理单个表单字段的状态和行为
    * @template [T=any]
+   * @template [M=any]
    */
   class Store {
   	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
@@ -904,7 +906,8 @@
   	}
   	/**
   	 * 从数据结构模式创建存储
-  	 * @param {Schema} schema 数据结构模式
+  	 * @template [M=any]
+  	 * @param {Schema<M>} schema 数据结构模式
   	 * @param {object} [options] 选项
   	 * @param {boolean} [options.new] 是否为新建环境
   	 */
@@ -928,12 +931,12 @@
   	#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] 
@@ -968,9 +971,9 @@
   		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 || {});
@@ -1033,7 +1036,7 @@
   		[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);
 
@@ -1048,10 +1051,10 @@
   		this.#cancelChange = cancelChange;
   		this.#cancelBlur = cancelBlur;
   		
-  		if (length instanceof exports.Signal.State || length instanceof exports.Signal.Computed) {
-  			this.#length = length;
+  		if (size instanceof exports.Signal.State || size instanceof exports.Signal.Computed) {
+  			this.#size = size;
   		} else {
-  			this.#length = new exports.Signal.State(length || 0);
+  			this.#size = new exports.Signal.State(size || 0);
   		}
 
   		if (isNull) {
@@ -1089,7 +1092,7 @@
   	#root = this;
   	/** @readonly @type {any} */
   	#type;
-  	/** @readonly @type {any} */
+  	/** @readonly @type {M | void} */
   	#meta;
   	/** @readonly @type {any} */
   	#component;
@@ -1107,9 +1110,9 @@
   	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 exports.Signal.State(/** @type {string | number} */(''));
   	/** 索引信息 */
   	get index() { return this.#index.get(); }
@@ -1291,10 +1294,10 @@
   	/** @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[]>} */
@@ -1496,7 +1499,8 @@
 
   /**
    * @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'; }
@@ -1510,7 +1514,7 @@
   	 */
   	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] 
@@ -1522,7 +1526,7 @@
   		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) {
@@ -1563,7 +1567,8 @@
 
   /**
    * @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} */
@@ -1586,7 +1591,7 @@
   	}
   	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] 
@@ -1604,6 +1609,7 @@
   			for (let i = children.length; i < length; i++) {
   					children.push(this.#create(i));
   			}
+  			children.length = length;
   			if (oldLength !== length) {
   				childrenState.set(children);
   			}
@@ -1611,7 +1617,7 @@
   		};
   		super(schema, {
   			index, new: isNew, parent,
-  			length: new exports.Signal.Computed(() => childrenState.get().length),
+  			size: new exports.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] },
@@ -1801,6 +1807,158 @@
   // @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;
   /**
    * 
@@ -1856,6 +2014,7 @@
   }
 
   /** @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;
@@ -1895,14 +2054,14 @@
   }
 
   /**
-   * @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
@@ -1957,11 +2116,11 @@
   			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 === '?') {
@@ -1998,10 +2157,40 @@
 
   /** @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) {
@@ -2013,8 +2202,7 @@
   		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),
   	};
@@ -2267,6 +2455,7 @@
   };
 
   /** @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;
 
@@ -2332,7 +2521,7 @@
    * 解析模板内容
    * @param {string} source 输入源字符串
    * @param {Layout.Options} [options] 解析选项
-   * @returns {(Layout.Node | string)[]}
+   * @returns {Layout.Child[]}
    */
   function parse(source, {
   	createCalc = () => { throw new ParseError('CALC'); },
@@ -2341,15 +2530,15 @@
   	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;
@@ -2525,229 +2714,156 @@
   			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 上下文环境
@@ -2762,10 +2878,9 @@
    * @returns {void}
   */
 
-  var index$1 = /*#__PURE__*/Object.freeze({
+  var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    parse: parse,
-    stringify: stringify
+    parse: parse
   });
 
   /**
@@ -2861,7 +2976,7 @@
   	null: true,
   	index: true,
   	no: true,
-  	length: true,
+  	size: true,
 
   	error: true,
   	errors: true,
@@ -2920,7 +3035,7 @@
   	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))}];
@@ -2933,7 +3048,7 @@
   	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);
   	}}];
   }
@@ -3085,10 +3200,9 @@
   	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') {
@@ -3274,17 +3388,16 @@
   		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;
@@ -3293,11 +3406,13 @@
   	 * 
   	 * @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;
   	}
   	/**
@@ -3314,12 +3429,12 @@
   	}
   	/**
   	 * 
-  	 * @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) {
@@ -3398,22 +3513,39 @@
   	}
   	/**
   	 * 
-  	 * @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 exports.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 exports.Signal.Computed(() => calc(getters));
-  				explicit[key] = items[key] = {
+  				explicit[variable] = items[variable] = {
   					get: () => { return val.get(); },
   				};
   				continue;
@@ -3422,34 +3554,17 @@
   				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 exports.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;
   	}
 
@@ -4432,17 +4547,24 @@
   		}
 
   	}
+  	const count = new exports.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;
   			}
@@ -4489,18 +4611,18 @@
    * @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');
@@ -4516,7 +4638,7 @@
   			node.remove();
   		}
   	}
-  	const result = envs.watch(html, val => {
+  	const result = envs.watch(value, val => {
   		remove();
   		add(toText(val));
   	});
@@ -4528,113 +4650,7 @@
   	};
   }
 
-  /** @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' */
 
   /**
    *
@@ -4647,8 +4663,16 @@
   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 () => {
@@ -4694,11 +4718,13 @@
   			e.remove();
   		}
   	}
+  	const count = new exports.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) : [];
@@ -4708,8 +4734,9 @@
   				const valueState = new exports.Signal.State(value);
   				const indexState = new exports.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]);
@@ -4898,6 +4925,50 @@
   	};
   }
 
+  /** @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' */
 
   /**
@@ -4905,37 +4976,19 @@
    * @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;
@@ -4959,11 +5012,9 @@
   	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);
@@ -4971,7 +5022,7 @@
 
   	handler.mount();
   	const enhancement = bindEnhancements(handler.tag, layout.enhancements, env, enhancements, root, slot);
-  	
+
   	return () => {
   		enhancement();
   		handler.destroy();
@@ -4983,43 +5034,117 @@
   		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] 全局数据
@@ -5028,20 +5153,18 @@
    * @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);
   }
 
-  exports.Layout = index$1;
+  exports.Layout = index;
   exports.Store = Store;
   exports.effect = effect;
-  exports.render = index;
+  exports.render = render;
   exports.watch = watch;
 
 }));