@neeloong/form 0.8.0 → 0.9.0

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.8.0
+* @neeloong/form v0.9.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -651,7 +651,7 @@
 
   }
   /** @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; }
@@ -965,7 +965,7 @@
   		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 || {});
@@ -1028,7 +1028,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, values$1, schema.values);
+  		[this.#selfValues, this.#values] = createState(this, values$1, values, schema.values);
 
   		const validatorResult = createValidator(this, schema.validator, validator);
 
@@ -1260,9 +1260,9 @@
   	/** @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[]>} */
@@ -1762,6 +1762,16 @@
   // @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',
@@ -1809,64 +1819,137 @@
   /** @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;
@@ -1887,12 +1970,12 @@
   		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),
   	};
   }
 
@@ -2404,6 +2487,54 @@
   		'&#' + 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 
@@ -2411,81 +2542,37 @@
    * @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'; }
@@ -2547,44 +2634,66 @@
   /**
    * @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
    */
 
@@ -2592,7 +2701,7 @@
    * @callback Calc
    * @param {Record<string, any>} env
    * @returns {any}
-  */
+   */
 
 
   /**
@@ -2889,37 +2998,63 @@
    */
   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 exports.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
   	}
 
   	/**
@@ -2962,6 +3097,29 @@
   		]));
   		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
@@ -3005,12 +3163,12 @@
   	}
 
   	/**
-  	 * @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 }
@@ -3128,45 +3286,55 @@
   		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 exports.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 exports.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 exports.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 exports.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;
@@ -3179,8 +3347,8 @@
   	}
   	/**
   	 * 
-  	 * @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; }
@@ -3189,35 +3357,40 @@
   		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 exports.Signal.Computed(() => name(getters));
+  				const val = new exports.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 exports.Signal.State(/** @type {any} */(null));
-  			if (typeof v === 'function') {
+  			const val = new exports.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());
   			}
@@ -3328,44 +3501,44 @@
   /**
    * @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;
@@ -3374,11 +3547,11 @@
   		}
   		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');
@@ -3402,23 +3575,24 @@
   /**
    * @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 ()=> {
@@ -3436,26 +3610,29 @@
   /**
    * @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));
   	}
@@ -3539,16 +3716,20 @@
   /**
    * @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);
@@ -3610,9 +3791,10 @@
   	}
   }
 
-  /** @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>} */
@@ -3732,14 +3914,68 @@
   		}
   	},
   };
+  /**
+   * 
+   * @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 };
 
@@ -3780,9 +4016,9 @@
   			};
   		},
   		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 () => {
@@ -3823,40 +4059,8 @@
   			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; }
@@ -4046,6 +4250,9 @@
   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()];
@@ -4224,7 +4431,7 @@
    * @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) {
@@ -4278,18 +4485,18 @@
 
   	/** @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);
@@ -4313,7 +4520,7 @@
   			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;
@@ -4332,13 +4539,13 @@
   			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);
@@ -4348,7 +4555,7 @@
   		}
   		renderIf(ifList);
   		ifList = [];
-  		const ifv = layout.directives.if;
+  		const ifv = layout.if;
   		if (ifv) {
   			ifList.push([ifv, layout]);
   			continue;
@@ -4357,6 +4564,7 @@
   			renderItem(layout, currentTemplates)
   		);
   	}
+  	renderIf(ifList);
 
   	return () => {
   		if (!bkList) { return; }
@@ -4503,6 +4711,135 @@
   	}
   }
 
+  /** @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 exports.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' */
 
   /**
@@ -4512,31 +4849,36 @@
    * @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
@@ -4560,23 +4902,27 @@
   	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();
   	};
   }
   /**
@@ -4587,17 +4933,17 @@
    * @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);
   	}
@@ -4620,15 +4966,17 @@
    * @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);
   	});
   }