@neeloong/form 0.8.0 → 0.9.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.8.0
+* @neeloong/form v0.9.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -73,7 +73,7 @@ function toValueItem(v) {
 
 }
 /** @param {*} v  */
-const values = v => {
+const values$1 = v => {
 	if (!v || !Array.isArray(v)) { return null;}
 	const list = v.map(toValueItem).filter(valueFilter);
 	if (!list.length) { return null; }
@@ -387,7 +387,7 @@ class Store {
 		validator, validators,
 		index, length, new: isNew, parent: parentNode,
 		hidden, clearable, required, disabled, readonly,
-		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values: values$1
+		label, description, placeholder, min, max, step, minLength, maxLength, pattern, values
 	} = {}) {
 		this.schema = schema;
 		this.#state.set(typeof state === 'object' && state || {});
@@ -450,7 +450,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, values$1, schema.values);
+		[this.#selfValues, this.#values] = createState(this, values$1, values, schema.values);
 
 		const validatorResult = createValidator(this, schema.validator, validator);
 
@@ -682,9 +682,9 @@ 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(v)); }
+	set selfValues(v) { this.#selfValues.set(values$1(v)); }
 	get values() { return this.#values.get(); }
-	set values(v) { this.#selfValues.set(values(v)); }
+	set values(v) { this.#selfValues.set(values$1(v)); }
 
 
 	/** @type {Signal.Computed<string[]>} */
@@ -1184,6 +1184,16 @@ class ArrayStore extends Store {
 // @ts-ignore
 setArrayStore(ArrayStore);
 
+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;
+/**
+ * 
+ * @param {string} t 
+ * @returns 
+ */
+function parseNumber(t) {
+	return numRegex.test(t) ? Number(t.replaceAll('_', '')) : NaN;
+}
+
 const errors = {
 	CALC: 'no `createCalc` option, no expression parsing support',
 	EVENT: 'no `createEvent`, options, no event parsing support',
@@ -1231,64 +1241,137 @@ class ParseError extends Error {
 /** @import * as Layout from './index.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;
 const nameRegex = /^(?<name>[a-zA-Z$\p{Unified_Ideograph}_][\da-zA-Z$\p{Unified_Ideograph}_]*)?$/u;
+
+/**
+ * 
+ * @param {Record<string, Layout.Enhancement>} enhancements 
+ * @param {string} name 
+ */
+function getEnhancement(enhancements, name) {
+	const enhancement = enhancements[name];
+	if (enhancement) { return enhancement; }
+	/** @type {Layout.Enhancement} */
+	const e = {
+		attrs: Object.create(null),
+		events: Object.create(null),
+	};
+	enhancements[name] = e;
+	return e;
+}
+/**
+ * 
+ * @param {string} value 
+ * @param {Exclude<Layout.Options['createCalc'], undefined>} createCalc 
+ * @returns {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value}
+ */
+function parse$1(value, createCalc) {
+	const text = value.replace(/$\s+|\s+$/gs,'');
+	if (text === 'null') { return {value: null} }
+	if (text === 'true') { return {value: true} }
+	if (text === 'false') { return {value: false} }
+	const t = parseNumber(text);
+	if (!Number.isNaN(t)) { return {value: t}; }
+	if (nameRegex.test(text)) { return {name: text} }
+	return {calc: createCalc(value)};
+}
+
 /**
  * @param {Layout.Node} node
  * @param {Exclude<Layout.Options['createCalc'], undefined>} createCalc
  * @param {Exclude<Layout.Options['createEvent'], undefined>} createEvent
  */
 function createAttributeAdder(node, createCalc, createEvent) {
-	const { attrs, directives, events, classes, styles, vars, aliases, params } = node;
+	const { attrs, events, classes, styles, vars, aliases, params, enhancements } = node;
 	/**
 	 * @param {string} qName
 	 * @param {string} value
 	 */
 	function addAttribute(qName, value) {
-		const attr = attrPattern.exec(qName
-			.replace(/．/g,'.')
-			.replace(/：/g,':')
-			.replace(/＠/g,'@')
-			.replace(/＋/g,'+')
-			.replace(/－/g,'-')
-			.replace(/[＊×]/g,'*')
-			.replace(/！/g, '!'))?.groups;
+		const qn = qName
+		.replace(/．/g,'.')
+		.replace(/：/g,':')
+		.replace(/＠/g,'@')
+		.replace(/＋/g,'+')
+		.replace(/－/g,'-')
+		.replace(/[＊×]/g,'*')
+		.replace(/！/g, '!');
+		const attr = (attrPattern.exec(qn) || enhancementPattern.exec(qn))?.groups;
 		if (!attr) { throw new ParseError('ATTR', qName); }
-		const { name } = attr;
+		const { name, enhancement } = attr;
 		const decorator = attr.decorator?.toLowerCase();
-		if (!decorator) {
-			attrs[name] = value;
-		} else if (decorator === ':') {
-			attrs[name] = nameRegex.test(value) ? {name: value} : createCalc(value);
-		} else if (decorator === '.') {
-			classes[name] = !value ? true : nameRegex.test(value) ? value : createCalc(value);
-		} else if (decorator === 'style:') {
-			styles[name] = nameRegex.test(value) ? value : createCalc(value);
-		} else if (decorator === '@') {
-			events[name] = nameRegex.test(value) ? value : createEvent(value);
-		} else if (decorator === '+') {
-			vars[name] = !value ? '' : nameRegex.test(value) ? value : createCalc(value);
-		} else if (decorator === '*') {
-			aliases[name] = nameRegex.test(value) ? value : createCalc(value);
-		} else if (decorator === '?') {
-			params[name] = nameRegex.test(value) ? value : createCalc(value);
-		} else if (decorator === '!') {
-			const key = name.toString();
-			switch (key) {
-				case 'fragment': directives.fragment = value || true; break;
-				case 'else': directives.else = true; break;
-				case 'enum':
-					directives.enum = value ? nameRegex.test(value) ? value : createCalc(value) : true;
-					break;
-				case 'if':
-				case 'text':
-				case 'html':
-					directives[key] = nameRegex.test(value) ? value : createCalc(value);
-					break;
-				case 'template': directives.template = value; break;
-				case 'bind': directives.bind = value || true; break;
-				case 'value': directives.value = value; break;
-				case 'comment': directives.comment = value; break;
+		if (enhancement) {
+			if (decorator === ':') {
+				getEnhancement(enhancements, enhancement).attrs[name] = value ? parse$1(value, createCalc) : {name};
+			} else if (decorator === '@') {
+				getEnhancement(enhancements, enhancement).events[name] = value ? nameRegex.test(value) ? {name: value} : {event: createEvent(value)} : {name};
+			} else if (decorator === '!') {
+				switch(name) {
+					case 'bind':
+						getEnhancement(enhancements, enhancement).bind = value || true;
+						break;
+				}
+			} else {
+				getEnhancement(enhancements, enhancement).value = parse$1(value, createCalc);
 			}
+			return;
+		}
+		if (!decorator) {
+			attrs[name] = {value};
+			return;
+		}
+		if (decorator === ':') {
+			attrs[name] = value ? parse$1(value, createCalc) : {name};
+			return;
+		}
+		if (decorator === '.') {
+			classes[name] = value ? parse$1(value, createCalc) : {name};
+			return;
+		}
+		if (decorator === 'style:') {
+			styles[name] = parse$1(value, createCalc);
+			return;
+		}
+		if (decorator === '@') {
+			events[name] = value ? nameRegex.test(value) ? {name: value} : {event: createEvent(value)} : {name};
+			return;
+		}
+		if (decorator === '+') {
+			vars[name] = !value ? {value: undefined} : parse$1(value, createCalc);
+			return;
+		}
+		if (decorator === '*') {
+			aliases[name] = parse$1(value, createCalc);
+			return;
+		}
+		if (decorator === '?') {
+			params[name] = parse$1(value, createCalc);
+			return;
+		}
+		if (decorator !== '!') {
+			return;
+		}
+		const key = name.toString();
+		switch (key) {
+			case 'fragment': node.fragment = value || true; break;
+			case 'else': node.else = true; break;
+			case 'enum':
+				node.enum = value ? parse$1(value, createCalc) : {value: true};
+				break;
+			case 'if':
+				node.if = parse$1(value, createCalc);
+				break;
+			case 'text':
+				node.text = parse$1(value, createCalc);
+				break;
+			case 'html':
+				node.html = parse$1(value, createCalc);
+				break;
+			case 'template': node.template = value; break;
+			case 'bind': node.bind = value || true; break;
+			case 'value': node.value = value; break;
+			case 'comment': node.comment = value; break;
 		}
 	}
 	return addAttribute;
@@ -1309,12 +1392,12 @@ function createElement(name, is) {
 		children: [],
 		attrs: Object.create(null),
 		events: Object.create(null),
-		directives: Object.create(null),
 		classes: Object.create(null),
 		styles: Object.create(null),
 		vars: Object.create(null),
 		aliases: Object.create(null),
 		params: Object.create(null),
+		enhancements: Object.create(null),
 	};
 }
 
@@ -1826,6 +1909,54 @@ function _xmlEncoder(c) {
 		'&#' + c.charCodeAt() + ';';
 }
 
+/**
+ * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Event | Layout.Node.Value} def 
+ */
+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] 
+ */
+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]
+ */
+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 
@@ -1833,81 +1964,37 @@ function _xmlEncoder(c) {
  * @returns {Iterable<string>}
  */
 function* nodeToString(node, level = 0) {
-	const { attrs, events, directives, children, is, name, params, classes, styles, aliases, vars } = node;
+	const { children, is, name } = node;
 	const pad = level > 0 ? ''.padEnd(level, '\t') : '';
 
 	yield pad;
 	yield* ['<', name || '-'];
 	if (is) { yield* ['|', is]; }
-
-	for (const [name, value] of Object.entries(params)) {
-		if (value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		yield* [' ?', name];
-		if (val && typeof val === 'string') {
-			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(directives)) {
-		if (value === false || value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		yield* [' !', name];
-		if (val && typeof val === 'string') {
-			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(aliases)) {
-		if (value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		yield* [' *', name];
-		if (val && typeof val === 'string') {
-			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(vars)) {
-		if (value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		yield* [' +', name];
-		if (val && typeof val === 'string') {
-			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(attrs)) {
-		if (value == null) { continue; }
-		if (typeof value === 'string') {
-			yield* [' ', name];
-			if (value) {
-				yield* ['="', value.replace(/[<&"]/g, _xmlEncoder), '"'];
-			}
-			continue;
-		}
-		const val = typeof value === 'function' ? String(value) : typeof value === 'object' ? value.name : value;
-		if (val && typeof val === 'string') {
-			yield* [' :', name, '="', val.replace(/[<&"]/g, _xmlEncoder) || '', '"'];
-		}
+	if (node.template) {
+		yield ` !template="${toAttrValue$1(node.template)}"`;
+		yield* values(node.params, '?', null);
 	}
-	for (const [name, value] of Object.entries(events)) {
-		if (value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		if (val && typeof val === 'string') {
-			yield* [' @', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(classes)) {
-		if (value == null || value == false) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		yield* [' .', name];
-		if (val && typeof val === 'string') {
-			yield* [' .', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
-	}
-	for (const [name, value] of Object.entries(styles)) {
-		if (value == null) { continue; }
-		const val = typeof value === 'function' ? String(value) : value;
-		if (val && typeof val === 'string') {
-			yield* [' style:', name, '="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
-		}
+	if (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'; }
@@ -1969,44 +2056,66 @@ function toString(value, formable) {
 /**
  * @typedef {object} Directives
  * 
- * @property {string} [template]
- * 
- * @property {boolean | string} [fragment]
- * 
- * @property {string | Calc} [if]
- * @property {boolean} [else]
- * 
- * @property {string} [value] 值关联（关联为列表）
- * @property {boolean | string | Calc} [enum] 列表属性枚举
- * 
- * @property {boolean | string} [bind]
- * @property {string | Calc} [text]
- * @property {string | Calc} [html]
- * 
- * @property {string} [comment] 注释
  */
 
 
 
+/**
+ * @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} Options
  * @property {(t: string) => Calc} [options.createCalc]
  * @property {(t: string) => EventListener} [options.createEvent]
  * @property {Set<string>} [options.simpleTag]
  */
+/**
+ * @template [T=any]
+ * @typedef {{value: T; name?: undefined; calc?: undefined; event?: undefined}} Node.Value
+ */
+/**
+ * @typedef {{name: string; value?: undefined; calc?: undefined; event?: undefined}} Node.Name
+ */
+/**
+ * @typedef {{event: EventListener; name?: undefined; calc?: undefined; value?: undefined}} Node.Event
+ */
+/**
+ * @typedef {{calc: Calc; name?: undefined; value?: undefined; event?: undefined}} Node.Calc
+ */
 /**
  * @typedef {object} Node
  * @property {string} name
  * @property {string?} [is]
  * @property {string} [id]
- * @property {Record<string, string | {name: string} | Calc>} attrs
- * @property {Record<string, string | Calc>} params
- * @property {Record<string, string | boolean | Calc>} classes
- * @property {Record<string, string | Calc>} styles
- * @property {Record<string, string | EventListener>} events
- * @property {Record<string, string | Calc>} vars
- * @property {Record<string, string | Calc>} aliases
- * @property {Directives} directives
+ * @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]
+ * 
+ * @property {string} [comment] 注释
+ * 
  * @property {(Node | string)[]} children
  */
 
@@ -2014,7 +2123,7 @@ function toString(value, formable) {
  * @callback Calc
  * @param {Record<string, any>} env
  * @returns {any}
-*/
+ */
 
 
 /**
@@ -2311,37 +2420,63 @@ function addStore(store, env) {
  */
 class Environment {
 	/**
-	 * @param {string | Layout.Calc} value
+	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} value
 	 */
-	exec(value) {
-		if (typeof value === 'string') {
-			const item = this.#items[value];
+	exec({name, calc, value }) {
+		if (typeof name === 'string') {
+			const item = this.#items[name];
 			if (typeof item?.get !== 'function') { return }
 			return item.get();
 		}
-		if (typeof value === 'function') {
-			return value(this.getters);
+		if (typeof calc === 'function') {
+			return calc(this.getters);
 		}
+		return value;
 	}
 	/**
-	 * @param {string | Layout.Calc} value
+	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} value
+	 */
+	get({name, calc, value}) {
+		if (typeof name === 'string') {
+			const item = this.#items[name];
+			if (typeof item?.get !== 'function') { return }
+			const{get, set} = item;
+			return {get, set};
+		}
+		if (typeof calc === 'function') {
+			const c = new Signal.Computed(() => calc(this.getters));
+			return {get: () => c.get() };
+		}
+		return {get: () => value };
+	}
+	/**
+	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} value
 	 * @param {(value: any) => void} cb 
 	 */
 	watch(value, cb) { return watch(() => this.exec(value), cb, true); }
 
 	/**
-	 * @param {string | Layout.Calc | boolean | null} [name]
+	 * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value | null} [en]
 	 */
-	enum(name) {
-		if (!name) { return true; }
-		if (name === true) { return this.store; }
-		if (typeof name === 'function') { return () => name(this.getters); }
-		if (typeof name !== 'string') { return null; }
-		const item = this.#items[name];
-		if (typeof item?.get !== 'function') { return null }
-		const store = item.store;
-		return store instanceof Store ? store : item.get;
-
+	enum(en) {
+		if (!en) { return true; }
+		const {name, calc} = en;
+		if (typeof calc === 'function') { return () => calc(this.getters); }
+		if (typeof name === 'string') {
+			const item = this.#items[name];
+			if (typeof item?.get !== 'function') { return null }
+			const store = item.store;
+			return store instanceof Store ? store : item.get;
+		}
+		return this.store;
+	}
+	/**
+	 * @param {string | boolean | null} [name]
+	 */
+	getStore(name) {
+		if (!name) { return null; }
+		const item = this.#items[name === true ? '' : name];
+		return item?.get && item.store || null
 	}
 
 	/**
@@ -2384,6 +2519,29 @@ class Environment {
 		]));
 		return res;
 	}
+	/**
+	 * @param {string | true} name
+	 * @returns {Record<string, {get(): any; set?(v: any): void}> | void}
+	 */
+	getBindAll(name) {
+		const item = this.#items[name === true ? '' : name];
+		if (!item?.get) { return {}; }
+		const { store } = item;
+		if (!store) {
+			const { get, set } = item;
+			return { '$value': {get,set} }
+		}
+		/** @type {Record<string, {get(): any; set?(v: any): void}> | void} */
+		const res = Object.fromEntries([...bindableSet].map(v => [
+			`$${v}`, v === 'value' || v === 'state' ? {
+				get: () => store[v], 
+				set: (s)=>{store[v] = s;}
+			} : {
+				get: () => store[v], 
+			}
+		]));
+		return res;
+	}
 	/**
 	 * @param {string | true} name
 	 * @param {string} type
@@ -2427,12 +2585,12 @@ class Environment {
 	}
 
 	/**
-	 * @param {string | Layout.EventListener} event
+	 * @param {Layout.Node.Name | Layout.Node.Event} event
 	 * @returns {Layout.EventListener?}
 	 */
-	getEvent(event) {
+	getEvent({name, event}) {
 		if (typeof event === 'function') { return event }
-		const item = this.#items[event];
+		const item = this.#items[name];
 		if (!item) { return null }
 		const {exec, calc} = item;
 		if (typeof exec === 'function') { return exec }
@@ -2550,45 +2708,55 @@ class Environment {
 		const items = cloned.#items;
 		for (const [key, param] of Object.entries(params)) {
 			const attr = key in attrs ? attrs[key] : null;
-			if (typeof attr === 'string') {
-				explicit[key] = items[key] = {get: () => attr};
-			} else if (attr && typeof attr === 'object') {
-				const item = sourceEnv.#items[attr.name];
-				if (!item?.get) { continue; }
-				if (!item.store) {
-					explicit[key] = items[key] = item;
+			if (attr) {
+				const {name, calc, value} = attr;
+				if (name) {
+					const item = sourceEnv.#items[name];
+					if (!item?.get) { continue; }
+					if (!item.store) {
+						explicit[key] = items[key] = item;
+						continue;
+					}
+					for (const [k, it] of toItem(item.store, key)) {
+						explicit[k] = items[k] = it;
+					}
 					continue;
-				}
-				for (const [k, it] of toItem(item.store, key)) {
-					explicit[k] = items[k] = it;
+				} else if (typeof calc === 'function') {
+					const val = new Signal.Computed(() => calc(sourceEnv.getters));
+					explicit[key] = items[key] = {
+						get: () => { return val.get(); },
+					};
+					continue;
+				} else {
+					explicit[key] = items[key] = {get: () => value};
 				}
 				continue;
-
-			} else if (typeof attr === 'function') {
-				const val = new Signal.Computed(() => attr(sourceEnv.getters));
-				explicit[key] = items[key] = {
-					get: () => { return val.get(); },
-				};
-				continue;
-			} else if (typeof param === 'function') {
-				const getters = cloned.getters;
-				cloned.#getters = null;
-				const val = new Signal.Computed(() => param(getters));
-				explicit[key] = items[key] = {
-					get: () => { return val.get(); },
-				};
-				continue;
 			} else {
-				const item = items[param];
-				if (!item?.get) { continue; }
-				if (!item.store) {
-					explicit[key] = items[key] = item;
+				const {name, calc, value} = param;
+				if (typeof calc === 'function') {
+					const getters = cloned.getters;
+					cloned.#getters = null;
+					const val = new Signal.Computed(() => calc(getters));
+					explicit[key] = items[key] = {
+						get: () => { return val.get(); },
+					};
 					continue;
+				} else if (name) {
+					const item = items[name];
+					if (!item?.get) { continue; }
+					if (!item.store) {
+						explicit[key] = items[key] = item;
+						continue;
+					}
+					for (const [k, it] of toItem(item.store, key)) {
+						explicit[k] = items[k] = it;
+					}
+					continue;
+				} else {
+					explicit[key] = items[key] = {get: () => value};
+					continue;
+
 				}
-				for (const [k, it] of toItem(item.store, key)) {
-					explicit[k] = items[k] = it;
-				}
-				continue;
 			}
 		}
 		return cloned;
@@ -2601,8 +2769,8 @@ class Environment {
 	}
 	/**
 	 * 
-	 * @param {Record<string, string | Layout.Calc>} aliases 
-	 * @param {Record<string, string | Layout.Calc>} vars 
+	 * @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 
 	 */
 	set(aliases, vars) {
 		if (Object.keys(aliases).length + Object.keys(vars).length === 0) { return this; }
@@ -2611,35 +2779,40 @@ class Environment {
 		cloned.#object = this.#object;
 		const explicit = cloned.#explicit;
 		const items = cloned.#items;
-		for (const [key, name] of Object.entries(aliases)) {
-			if (typeof name === 'function') {
+		for (const [key, {name, calc, value}] of Object.entries(aliases)) {
+			if (typeof calc === 'function') {
 				const getters = cloned.getters;
 				cloned.#getters = null;
-				const val = new Signal.Computed(() => name(getters));
+				const val = new Signal.Computed(() => calc(getters));
 				explicit[key] = items[key] = {
 					get: () => { return val.get(); },
 				};
 				continue;
 			}
-			const item = items[name];
-			if (!item) { continue; }
-			if (!item.get || !item.store) {
-				explicit[key] = items[key] = item;
+			if (name) {
+				const item = items[name];
+				if (!item) { continue; }
+				if (!item.get || !item.store) {
+					explicit[key] = items[key] = item;
+					continue;
+				}
+				for (const [k, it] of toItem(item.store, key)) {
+					explicit[k] = items[k] = it;
+				}
 				continue;
 			}
-			for (const [k, it] of toItem(item.store, key)) {
-				explicit[k] = items[k] = it;
-			}
+			explicit[key] = items[key] = { get: () => { return value; } };
+			continue;
 		}
-		for (const [k,v] of Object.entries(vars)) {
+		for (const [k,{name, calc, value}] of Object.entries(vars)) {
 			
-			const val = new Signal.State(/** @type {any} */(null));
-			if (typeof v === 'function') {
+			const val = new Signal.State(/** @type {any} */(value));
+			if (typeof calc === 'function') {
 				const settable = cloned.settable;
 				cloned.#settable = null;
-				val.set(v(settable));
-			} else if (v && typeof v === 'string') {
-				const item = items[v];
+				val.set(calc(settable));
+			} else if (name) {
+				const item = items[name];
 				if (!item?.get) { continue }
 				val.set(item.get());
 			}
@@ -2750,44 +2923,44 @@ class Environment {
 /**
  * @param {Component.Handler} handler
  * @param {Environment} envs
- * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
+ * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} attrs
  * @param {Record<string, Component.Attr>} componentAttrs
  * @param {string | boolean | null} [bindValue]
  */
 function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 
 	let bk = new Set();
-	for (const [name, attr] of Object.entries(componentAttrs)) {
-		const attrValue = attrs[name];
-		if (name in attrs) {
-			if (typeof attrValue !== 'function' && typeof attrValue !== 'object') {
-				handler.set(name, attrValue);
+	for (const [key, attr] of Object.entries(componentAttrs)) {
+		if (key === 'class' || key === 'style') { continue; }
+		if (key in attrs) {
+			const attrDefine = attrs[key];
+			const { name, calc, value } = attrs[key];
+			if (!name && !calc) {
+				handler.set(key, value);
 				continue;
 			}
-			const attrSchema = typeof attrValue === 'function' ? /** @type{Layout.Calc} */(attrValue) : attrValue.name;
 			if (attr.immutable) {
-				handler.set(name, envs.exec(attrSchema));
-				continue;
+				handler.set(key, envs.exec(attrDefine));
 			}
-			bk.add(envs.watch(attrSchema, v => handler.set(name, v)));
+			bk.add(envs.watch(attrDefine, v => handler.set(key, v)));
 			continue;
 		}
 		const bind = attr.bind;
 		if (!bindValue || !bind) {
-			handler.set(name, attr.default);
+			handler.set(key, attr.default);
 			continue;
 		}
 		if (typeof bind === 'string') {
-			const r = envs.bind(bindValue, bind, v => handler.set(name, v));
+			const r = envs.bind(bindValue, bind, v => handler.set(key, v));
 			if (r) {
 				bk.add(r);
 			} else {
-				handler.set(name, attr.default);
+				handler.set(key, attr.default);
 			}
 			continue;
 		}
 		if (!Array.isArray(bind)) {
-			handler.set(name, attr.default);
+			handler.set(key, attr.default);
 			continue;
 		}
 		const [event, set, isState] = bind;
@@ -2796,11 +2969,11 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 		}
 		if (!isState) {
 			const bindKey = bindValue === true ? '' : bindValue;
-			bk.add(envs.watch(bindKey, v => handler.set(name, v)));
+			bk.add(envs.watch({name: bindKey}, v => handler.set(key, v)));
 			handler.addEvent(event, (...args) => { envs.all[bindKey] = set(...args);});
 			continue;
 		}
-		const r = envs.bind(bindValue, 'state', v => handler.set(name, v));
+		const r = envs.bind(bindValue, 'state', v => handler.set(key, v));
 		if (!r) { continue; }
 		bk.add(r);
 		const s = envs.bindSet(bindValue, 'state');
@@ -2824,23 +2997,24 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 /**
  * @param {Component.Handler} handler
  * @param {Environment} envs
- * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
+ * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} attrs
  */
 function bindBaseAttrs(handler, envs, attrs) {
 	const tag = handler.tag;
 	let bk = new Set();
-	for (const [name, attr] of Object.entries(attrs)) {
-		if (typeof attr !== 'function' && typeof attr !== 'object') {
-			handler.set(name, attr);
+	for (const [key, attr] of Object.entries(attrs)) {
+		if (key === 'class' || key === 'style') { continue; }
+		const {name, calc, value} = attr;
+		if (!name && !calc) {
+			handler.set(key, value);
 			continue;
 		}
-		const attrSchema = typeof attr === 'function' ? /** @type{Layout.Calc} */(attr) : attr.name;
-		if (typeof tag === 'string' && tag.toLocaleLowerCase() === 'input' && name.toLocaleLowerCase() === 'type') {
-			const value = envs.exec(attrSchema);
-			handler.set(name, value);
+		if (typeof tag === 'string' && tag.toLocaleLowerCase() === 'input' && key.toLocaleLowerCase() === 'type') {
+			const value = envs.exec(attr);
+			handler.set(key, value);
 			continue;
 		}
-		bk.add(envs.watch(attrSchema, val => handler.set(name, val)));
+		bk.add(envs.watch(attr, val => handler.set(key, val)));
 	}
 
 	return ()=> {
@@ -2858,26 +3032,29 @@ function bindBaseAttrs(handler, envs, attrs) {
 /**
  * @param {Node} node
  * @param {Environment} envs
- * @param {Record<string, string | boolean | Layout.Calc>} classes
+ * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} classes
+ * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [classAttr]
  */
-function bindClasses(node, classes, envs) {
+function bindClasses(node, envs, classes, classAttr) {
 	if (!(node instanceof Element)) {
 		return () => {};
 	}
+	if (classAttr) {
+		node.className += ' ' + envs.exec(classAttr);
+	}
 
 	/** @type {Set<() => void>?} */
 	let bk = new Set();
-	for (const [name, attr] of Object.entries(classes)) {
-		if (!attr) { continue; }
-		if (attr === true) {
-			node.classList.add(name);
+	for (const [key, attr] of Object.entries(classes)) {
+		if (attr.value) {
+			node.classList.add(key);
 			continue;
 		}
 		bk.add(watch(() => Boolean(envs.exec(attr)), value => {
 			if (value) {
-				node.classList.add(name);
+				node.classList.add(key);
 			} else {
-				node.classList.remove(name);
+				node.classList.remove(key);
 			}
 		}, true));
 	}
@@ -2961,16 +3138,20 @@ function toStyle(name, value) {
 /**
  * @param {Element} node
  * @param {Environment} envs
- * @param {Record<string, string | Layout.Calc>} classes
+ * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} styles
+ * @param {Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value} [styleAttr]
  */
-function bindStyles(node, classes, envs) {
+function bindStyles(node, envs, styles, styleAttr) {
 	if (!(node instanceof HTMLElement) && !(node instanceof SVGElement)) {
 		return () => {};
 	}
+	if (styleAttr) {
+		node.setAttribute('style', node.getAttribute('style') + ';' + envs.exec(styleAttr));
+	}
 
 	/** @type {Set<() => void>?} */
 	let bk = new Set();
-	for (const [name, attr] of Object.entries(classes)) {
+	for (const [name, attr] of Object.entries(styles)) {
 		bk.add(watch(() => toStyle(name, envs.exec(attr)), value => {
 			if (value) {
 				node.style.setProperty(name, ...value);
@@ -3032,9 +3213,10 @@ class EventEmitter {
 	}
 }
 
-/** @import { Component } from '../types.mjs' */
+/** @import { Component, Relatedness } from '../types.mjs' */
 /** @import Store from '../Store/index.mjs' */
 /** @import Environment from './Environment/index.mjs' */
+/** @import * as Layout from '../Layout/index.mjs' */
 
 
 /** @type {Record<string, Component.Event.Filter>} */
@@ -3154,14 +3336,68 @@ const eventFilters = {
 		}
 	},
 };
+/**
+ * 
+ * @param {string[]} fs 
+ * @param {Record<string, string | Component.Event.Filter>} filters 
+ * @param {AddEventListenerOptions?} [options] 
+ * @returns 
+ */
+function findFilters(fs, filters, options) {
+	/** @type {[Component.Event.Filter, string[], boolean][]} */
+	const filterFns = [];
+	if (filters) for (let f = fs.shift(); f; f = fs.shift()) {
+		const paramIndex = f.indexOf(':');
+		const noParamName = paramIndex >= 0 ? f.slice(0, paramIndex) : f;
+		const param = paramIndex >= 0 ? f.slice(paramIndex + 1).split(':') : [];
+		const filterName = noParamName.replace(/^-+/, '');
+		const sub = (noParamName.length - filterName.length) % 2 === 1;
+		let filter = filters[filterName] || filterName;
+		if (options) {
+			switch (filter) {
+				case 'once': case 'passive': case 'capture': options[filter] = !sub; continue;
+			}
+		}
+		if (typeof filter === 'string') {
+			filter = eventFilters[filter];
+		}
+		if (typeof filter !== 'function') { continue; }
+		filterFns.push([filter, param, sub]);
+	}
+	return filterFns;
+}
+
+/**
+ * 
+ * @param {Environment} env 
+ * @param {Layout.EventListener} fn
+ * @param {[Component.Event.Filter, string[], boolean][]} filterFns 
+ * @returns {($event: any) => void}
+ */
+function bindFilters(env, fn, filterFns) {
+	return $event => {
+		const global = env.all;
+		for (const [filter, param, sub] of filterFns) {
+			if (filter($event, param, global) === sub) { return; }
+		}
+		fn($event, global);
+	}
+}
+
+/** @import { Component, Relatedness } from '../types.mjs' */
+/** @import Store from '../Store/index.mjs' */
+/** @import Environment from './Environment/index.mjs' */
+
+
 /**
  * 
  * @param {Component | string} component 
  * @param {Environment} env 
- * @param {((store: Store, el: Element) => () => void)?} [relate]
+ * @param {Store?} store 
+ * @param {((store: Store, el: Element | Relatedness) => () => void)?} [relate]
  * @returns 
  */
-function createContext(component, env, relate) {
+function createContext(component, env, store, relate) {
 	const tag = typeof component === 'string' ? component : component.tag;
 	const { attrs, events } = typeof component !== 'string' && component || { attrs: null, events: null };
 
@@ -3202,9 +3438,9 @@ function createContext(component, env, relate) {
 			};
 		},
 		relate(el) {
-			if (!relate || destroyed) { return () => { }; }
+			if (!store || !relate || destroyed) { return () => { }; }
 			try {
-				const w = relate(env.store, el);
+				const w = relate(store, el);
 				if (typeof w !== 'function') { return () => { }; }
 				cancelFns.add(w);
 				return () => {
@@ -3245,40 +3481,8 @@ function createContext(component, env, relate) {
 			if (!filters) { return; }
 			/** @type {AddEventListenerOptions} */
 			const options = {};
-			/** @type {[Component.Event.Filter, string[], boolean][]} */
-			const filterFns = [];
-			if (filters) for (let f = fs.shift(); f; f = fs.shift()) {
-				const paramIndex = f.indexOf(':');
-				const noParamName = paramIndex >= 0 ? f.slice(0, paramIndex) : f;
-				const param = paramIndex >= 0 ? f.slice(paramIndex + 1).split(':') : [];
-				const filterName = noParamName.replace(/^-+/, '');
-				const sub = (noParamName.length - filterName.length) % 2 === 1;
-				let filter = filters[filterName] || filterName;
-				switch (filter) {
-					case 'once':
-						options.once = !sub;
-						break;
-					case 'passive':
-						options.passive = !sub;
-						break;
-					case 'capture':
-						options.capture = !sub;
-						break;
-					default:
-						if (typeof filter === 'string') {
-							filter = eventFilters[filter];
-						}
-				}
-				if (typeof filter !== 'function') { continue; }
-				filterFns.push([filter, param, sub]);
-			}
-			allEvents.push([e, $event => {
-				const global = env.all;
-				for (const [filter, param, sub] of filterFns) {
-					if (filter($event, param, global) === sub) { return; }
-				}
-				fn($event, global);
-			}, options]);
+			const filterFns = findFilters(fs, filters, options);
+			allEvents.push([e, bindFilters(env, fn, filterFns), options]);
 		},
 		destroy() {
 			if (destroyed) { return; }
@@ -3468,6 +3672,9 @@ const tagBindMap = {
 function createTagComponent (context, name, is) {
 	const node = document.createElement(name, {is: is || undefined});
 	const { watchAttr, props } = context;
+	if(['input', 'textarea', 'select'].includes(name.toLowerCase())) {
+		context.relate(node);
+	}
 
 	context.listen('init', ({events})=> {
 		const e = tagBindMap[name.toLowerCase()];
@@ -3646,7 +3853,7 @@ function toText(val) {
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} envs
- * @param {Layout.Directives} layout
+ * @param {Layout.Node} layout
  */
 function renderFillDirectives(parent, next, envs, { text, html }) {
 	if (text != null) {
@@ -3700,18 +3907,18 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 
 	/** @type {Set<() => void>?} */
 	let bkList = new Set();
-	/** @type {[string | Layout.Calc | null, Layout.Node][]} */
+	/** @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.directives.template;
+		const name = layout.template;
 		if (!name) { continue; }
 		currentTemplates[name] = [layout, envs];
 	}
 
-	/** @param {[string | Layout.Calc | null, Layout.Node][]} list */
+	/** @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);
@@ -3735,7 +3942,7 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 			end.remove();
 		});
 		bkList.add(watch(
-			() => list.findIndex(([ifv]) => ifv === null || envs.exec(ifv)),
+			() => list.findIndex(([ifv]) => !ifv || envs.exec(ifv)),
 			index => {
 				if (index === lastIndex) { return; }
 				lastIndex = index;
@@ -3754,13 +3961,13 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 			bkList.add(() => node.remove());
 			continue;
 		}
-		if (layout.directives.template) {
+		if (layout.template) {
 			renderIf(ifList);
 			ifList = [];
 			continue;
 		}
-		if (ifList.length && layout.directives.else) {
-			const ifv = layout.directives.if || null;
+		if (ifList.length && layout.else) {
+			const ifv = layout.if || null;
 			ifList.push([ifv, layout]);
 			if (!ifv) {
 				renderIf(ifList);
@@ -3770,7 +3977,7 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 		}
 		renderIf(ifList);
 		ifList = [];
-		const ifv = layout.directives.if;
+		const ifv = layout.if;
 		if (ifv) {
 			ifList.push([ifv, layout]);
 			continue;
@@ -3779,6 +3986,7 @@ function renderList(layouts, parent, next, envs, templates, renderItem) {
 			renderItem(layout, currentTemplates)
 		);
 	}
+	renderIf(ifList);
 
 	return () => {
 		if (!bkList) { return; }
@@ -3925,6 +4133,135 @@ function bindBase(handler, env, bind) {
 	}
 }
 
+/** @import Environment from './Environment/index.mjs' */
+/** @import { Enhancement } from '../types.mjs' */
+/** @import * as Layout from '../Layout/index.mjs' */
+
+/**
+ * 
+ * @param {object} obj 
+ * @param {string} name 
+ * @returns 
+ */
+const hasOwnProperty = (obj, name) => Object.prototype.hasOwnProperty.call(obj, name);
+/**
+ * @param {any} tag
+ * @param {Record<string, Layout.Enhancement>} enhancementDefine
+ * @param {Environment} env
+ * @param {Record<string, Enhancement>} enhancements
+ * @param {Element} root
+ * @param {Element?} [slot]
+ */
+function bindEnhancements(tag, enhancementDefine, env, enhancements, root, slot) {
+
+	let bk = new Set();
+	for (const [name, { attrs: attrDefine, value, events: eventsDefine, bind }] of Object.entries(enhancementDefine)) {
+		if (!hasOwnProperty(enhancements, name)) { continue; }
+		const enhancement = enhancements[name];
+		if (typeof enhancement !== 'function') { continue; }
+
+
+		let destroyed = false;
+		const destroyedState = new Signal.State(false);
+		const events = /** @type {any} */(enhancement)?.events;
+		/** @type {[string, ($event: any) => void, AddEventListenerOptions][]} */
+		const allEvents = [];
+		const attrs = Object.create(null);
+		/** @type {Set<() => void>} */
+		const cancelFns = new Set();
+		const stateEmitter = new EventEmitter();
+
+		/**
+		 * 
+		 * @param {string} name 
+		 * @param {Layout.EventListener} fn 
+		 * @returns 
+		 */
+		function addEvent(name, fn) {
+			if (typeof fn !== 'function') { return; }
+			const [e, ...fs] = name.split('.').filter(Boolean);
+			const filters = events ? events[e].filters : {};
+			if (!filters) { return; }
+			/** @type {AddEventListenerOptions} */
+			const options = {};
+			const filterFns = findFilters(fs, filters, options);
+			allEvents.push([e, bindFilters(env, fn, filterFns), options]);
+		}
+		function destroy() {
+			if (destroyed) { return; }
+			destroyed = true;
+			destroyedState.set(true);
+			for (const w of cancelFns) {
+				w();
+			}
+			stateEmitter.emit('destroy');
+		}
+		bk.add(destroy);
+
+
+
+		for (const [name, attr] of Object.entries(attrDefine)) {
+			const s = env.get(attr);
+			if (!s) { continue; }
+			Object.defineProperty(attrs, name, { ...s, configurable: true, enumerable: true });
+		}
+
+		for (const [name, event] of Object.entries(eventsDefine)) {
+			const fn = env.getEvent(event);
+			if (fn) { addEvent(name, fn); }
+		}
+
+		if (bind) {
+			for (const [key, effect] of Object.entries(env.getBindAll(bind) || {})) {
+				Object.defineProperty(attrs, key, { ...effect, configurable: true, enumerable: true });
+			}
+			for (const [key, setter] of Object.entries(env.bindEvents(bind) || {})) {
+				addEvent(key, $event => setter($event));
+			}
+
+		}
+		/**@type {Enhancement.Context} */
+		const context = {
+			get value() { return null; },
+			events: allEvents,
+			attrs: attrs,
+			watchAttr(name, fn) {
+				if (destroyed) { return () => { }; }
+				let old = attrs[name];
+				const w = watch(() => attrs[name], v => {
+					const o = old;
+					old = v;
+					fn(v, o, name);
+				}, true);
+				cancelFns.add(w);
+
+				return () => {
+					cancelFns.delete(w);
+					w();
+				};
+			},
+			get destroyed() { return destroyedState.get(); },
+			listen(name, listener) { return stateEmitter.listen(name, listener); },
+			root, slot,
+			tag,
+		};
+		if (value) {
+			const s = env.get(value);
+			if (s) {
+				Object.defineProperty(context, 'value', { ...s, configurable: true, enumerable: true });
+			}
+		}
+		enhancement(context);
+	}
+	return () => {
+		const list = bk;
+		bk = new Set();
+		for (const s of list) {
+			s();
+		}
+	};
+}
+
 /** @import Store from '../Store/index.mjs' */
 
 /**
@@ -3934,31 +4271,36 @@ function bindBase(handler, env, bind) {
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
- * @param {((store: Store, el: Element) => () => void)?} [relate]
+ * @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, relate, getComponent) {
+function renderItem(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
 	env = env.set(layout.aliases, layout.vars);
-	const bind = layout.directives.bind;
-	const fragment = layout.directives.fragment;
+	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, relate, getComponent);
+		return render(templateLayout, parent, next, newEnv, templates, componentPath, enhancements, relate, getComponent);
 	}
-	if (!layout.name || layout.directives.fragment) {
-		return renderFillDirectives(parent, next, env, layout.directives) || 
+	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, relate, getComponent);
+				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, relate);
-
+	const { context, handler } = createContext(
+		component ? component : layout.name,
+		env,
+		env.getStore(bind),
+		relate
+	);
 
 	const componentAttrs = component?.attrs;
 	const attrs = componentAttrs
@@ -3982,23 +4324,27 @@ function renderItem(layout, parent, next, env, templates, componentPath, relate,
 	const slot = Array.isArray(r) ? r[1] : root;
 	parent.insertBefore(root, next);
 	const children = slot ? 
-		renderFillDirectives(slot, null, env, layout.directives)
+		renderFillDirectives(slot, null, env, layout)
 		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
-			return render(layout, slot, null, env, templates, componentPath, relate, getComponent);
+			return render(layout, slot, null, env, templates, componentPath, enhancements, relate, getComponent);
 		}) : () => {};
 
 
-	bindClasses(root, layout.classes, env);
-	bindStyles(root, layout.styles, env);
+	const classes = bindClasses(root, env, layout.classes, layout.attrs.class);
+	const styles = bindStyles(root, env, layout.styles, layout.attrs.style);
 
 	handler.mount();
+	const enhancement = bindEnhancements(handler.tag, layout.enhancements, env, enhancements, root, slot);
 	
 	return () => {
-		root.remove();
+		enhancement();
 		handler.destroy();
+		root.remove();
 		attrs();
 		children();
 		base();
+		classes();
+		styles();
 	};
 }
 /**
@@ -4009,17 +4355,17 @@ function renderItem(layout, parent, next, env, templates, componentPath, relate,
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
- * @param {((store: Store, el: Element) => () => void)?} [relate]
+ * @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, relate, getComponent) {
-	const { directives } = layout;
-	const newEnv = env.child(directives.value);
+function render(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent) {
+	const newEnv = env.child(layout.value);
 	if (!newEnv) { return () => {}; }
-	const list = newEnv.enum(directives.enum);
+	const list = newEnv.enum(layout.enum);
 	/** @type {(next: Node | null, env: any) => () => void} */
-	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, relate, getComponent);
+	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, enhancements, relate, getComponent);
 	if (list === true) {
 		return r(next, newEnv);
 	}
@@ -4042,15 +4388,17 @@ function render(layout, parent, next, env, templates, componentPath, relate, get
  * @param {object} [options] 
  * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 
  * @param {(path: string[]) => Component?} [options.component] 
- * @param {(store: Store, el: Element) => () => void} [options.relate]
+ * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate]
+ * @param {Record<string, Enhancement>} [options.enhancements]
  * @returns {() => void}
  */
-function index (store, layouts, parent, {component, global, relate} = {}) {
+function index (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, [], relateFn, component);
+		return render(layout, parent, null, env, templates, [], allEnhancements, relateFn, component);
 	});
 }