@neeloong/form 0.1.0

package/index.js

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