@next-core/brick-kit 2.192.0 → 2.193.0

package/dist/index.bundle.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('history'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('lodash'), require('@next-core/brick-utils'), require('react'), require('@next-core/brick-http'), require('antd'), require('@ant-design/icons'), require('i18next'), require('moment'), require('@next-core/pipes'), require('@next-core/easyops-analytics'), require('js-yaml'), require('@next-core/loader'), require('react-i18next'), require('@babel/runtime/helpers/esm/extends'), require('@next-core/illustrations'), require('@babel/runtime/helpers/decorate')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'history', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', 'lodash', '@next-core/brick-utils', 'react', '@next-core/brick-http', 'antd', '@ant-design/icons', 'i18next', 'moment', '@next-core/pipes', '@next-core/easyops-analytics', 'js-yaml', '@next-core/loader', 'react-i18next', '@babel/runtime/helpers/esm/extends', '@next-core/illustrations', '@babel/runtime/helpers/decorate'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._defineProperty$1, global._asyncToGenerator$3, global._, global.brickUtils, global.React, global.brickHttp, global.antd, global.icons, global.i18next, global.moment, global.pipes, global.easyopsAnalytics, global.yaml, global.loader, global.reactI18next, global._extends, global.illustrations, global._decorate));
-})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _defineProperty$1, _asyncToGenerator$3, _, brickUtils, React, brickHttp, antd, icons, i18next, moment, pipes, easyopsAnalytics, yaml, loader, reactI18next, _extends, illustrations, _decorate) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('history'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('lodash'), require('@next-core/brick-utils'), require('moment'), require('@next-core/pipes'), require('i18next'), require('react'), require('@next-core/brick-http'), require('@next-core/easyops-analytics'), require('antd'), require('@ant-design/icons'), require('js-yaml'), require('@next-core/loader'), require('react-i18next'), require('@babel/runtime/helpers/esm/extends'), require('@next-core/illustrations'), require('@babel/runtime/helpers/decorate')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'history', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', 'lodash', '@next-core/brick-utils', 'moment', '@next-core/pipes', 'i18next', 'react', '@next-core/brick-http', '@next-core/easyops-analytics', 'antd', '@ant-design/icons', 'js-yaml', '@next-core/loader', 'react-i18next', '@babel/runtime/helpers/esm/extends', '@next-core/illustrations', '@babel/runtime/helpers/decorate'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._defineProperty$1, global._asyncToGenerator$3, global._, global.brickUtils, global.moment, global.pipes, global.i18next, global.React, global.brickHttp, global.easyopsAnalytics, global.antd, global.icons, global.yaml, global.loader, global.reactI18next, global._extends, global.illustrations, global._decorate));
+})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _defineProperty$1, _asyncToGenerator$3, _, brickUtils, moment, pipes, i18next, React, brickHttp, easyopsAnalytics, antd, icons, yaml, loader, reactI18next, _extends, illustrations, _decorate) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -11,9 +11,9 @@
   var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$1);
   var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator$3);
   var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+  var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
   var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
   var _decorate__default = /*#__PURE__*/_interopDefaultLegacy(_decorate);
@@ -289,658 +289,391 @@
     }
   };
 
-  var brickTemplateRegistry = new Map();
-  function registerBrickTemplate(name, factory) {
-    if (brickTemplateRegistry.has(name)) {
-      // eslint-disable-next-line no-console
-      console.error("Brick template of \"".concat(name, "\" already registered."));
-      return;
+  function supply(attemptToVisitGlobals, providedGlobalVariables, mock) {
+    var globalVariables = _objectSpread__default["default"]({}, providedGlobalVariables);
+    // Allow limited browser builtin values.
+    globalVariables["undefined"] = undefined;
+    for (var variableName of attemptToVisitGlobals) {
+      if (!Object.prototype.hasOwnProperty.call(globalVariables, variableName)) {
+        var variable = supplyIndividual(variableName, mock);
+        if (variable !== undefined) {
+          globalVariables[variableName] = variable;
+        }
+      }
     }
-    brickTemplateRegistry.set(name, factory);
+    return globalVariables;
   }
+  var shouldOmitInLodash = new Set([
+  // Omit all mutable methods from lodash.
+  // But allow sequence methods like `_.chain`.
+  "fill", "pull", "pullAll", "pullAllBy", "pullAllWith", "pullAt", "remove", "reverse", "assign", "assignIn", "assignInWith", "assignWith", "defaults", "defaultsDeep", "merge", "mergeWith", "set", "setWith", "unset", "update", "updateWith",
+  /**
+   * Ignore `Function` methods from lodash, too.
+   * There are chances to invoke `Object.assign`, etc.
+   *
+   * E.g.:
+   *
+   * ```
+   * _.wrap(_.method('constructor.assign',{b:2},{b:3}),(func,...a) => func(...a))({})
+   * ```
+   */
+  "after", "ary", "before", "bind", "bindKey", "curry", "curryRight", "debounce", "defer", "delay", "flip", "memoize", "negate", "once", "overArgs", "partial", "partialRight", "rearg", "rest", "spread", "throttle", "unary", "wrap"]);
 
-  // Themes.
-  var DEFAULT_THEME = "light";
-  var theme = DEFAULT_THEME;
-  var storage = new brickUtils.JsonStorage(localStorage);
-  var LOCAL_STORAGE_APPS_THEME_KEY = "apps-theme";
-  function setTheme(value) {
-    if (value !== "dark" && value !== "light" && value !== "dark-v2") {
-      throw new Error("Unsupported theme: ".concat(value));
+  // Omit all mutable methods from moment.
+  var shouldOmitInMoment = new Set(["lang", "langData", "locale", "localeData", "defineLocale", "updateLocale", "updateOffset"]);
+  var allowedGlobalObjects = new Set(["Array", "Boolean", "Date", "Infinity", "JSON", "Math", "NaN", "Number", "String", "RegExp", "decodeURI", "decodeURIComponent", "encodeURI", "encodeURIComponent", "isFinite", "isNaN", "parseFloat", "parseInt", "Map", "Set", "URLSearchParams", "WeakMap", "WeakSet", "atob", "btoa"]);
+  function supplyIndividual(variableName, mock) {
+    switch (variableName) {
+      case "Object":
+        // Do not allow mutable methods like `Object.assign`.
+        return delegateMethods(Object, ["entries", "fromEntries", "keys", "values"]);
+      case "_":
+        return Object.fromEntries(Object.entries(___default["default"]).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
+      case "moment":
+        return Object.assign(function () {
+          return moment__default["default"](...arguments);
+        }, Object.fromEntries(Object.entries(moment__default["default"]).filter(entry => !shouldOmitInMoment.has(entry[0]))));
+      case "PIPES":
+        return pipes.pipes;
+      case "TAG_URL":
+        return tagUrlFactory(true);
+      case "SAFE_TAG_URL":
+        return tagUrlFactory();
+      default:
+        if (allowedGlobalObjects.has(variableName)) {
+          return window[variableName];
+        }
     }
-    theme = value;
   }
-  function getTheme() {
-    return theme;
+  function delegateMethods(target, methods) {
+    return Object.fromEntries(methods.map(method => [method, function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return target[method].apply(target, args);
+    }]));
   }
-  function getCurrentTheme() {
-    return document.documentElement.dataset.theme;
+  /**
+   * Pass `ignoreSlashes` as `true` to encode all tagged expressions
+   * as URL components, except for `/` which maybe used in `APP.homepage`.
+   *
+   * Otherwise encode all tagged expressions as URL components.
+   * This will encode `/` as `%2F`. So do not use it directly
+   * with `APP.homepage` as in template expressions.
+   *
+   * @example
+   *
+   * ```js
+   * TAG_URL`${APP.homepage}/list?q=${q}&redirect=${redirect}`
+   * ```
+   *
+   * ```js
+   * SAFE_TAG_URL`file/${path}?q=${q}`
+   * // `path` will be fully transformed by `encodeURIComponent`.
+   * ```
+   *
+   * ```js
+   * // Wrap `APP.homepage` outside of `SAFE_TAG_URL`.
+   * `${APP.homepage}/${SAFE_TAG_URL`file/${path}?q=${q}`}`
+   * ```
+   */
+  function tagUrlFactory(ignoreSlashes) {
+    return function (strings) {
+      for (var _len2 = arguments.length, partials = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        partials[_key2 - 1] = arguments[_key2];
+      }
+      var result = [];
+      strings.forEach((str, index) => {
+        result.push(str);
+        if (index < partials.length) {
+          result.push(ignoreSlashes ? String(partials[index]).replace(/[^/]+/g, p => encodeURIComponent(p)) : encodeURIComponent(String(partials[index])));
+        }
+      });
+      return result.join("");
+    };
   }
-  function applyTheme(value) {
-    if (value) {
-      setTheme(value);
-    } else {
-      value = getTheme();
-    }
-    if (value !== getCurrentTheme()) {
-      document.documentElement.dataset.theme = value;
-      window.dispatchEvent(new CustomEvent("theme.change", {
-        detail: value
-      }));
-    }
+
+  function getUrlByAliasFactory(app) {
+    return function getUrlByAlias(alias, pathParams, query) {
+      if (!(app !== null && app !== void 0 && app.$$routeAliasMap.has(alias))) {
+        // eslint-disable-next-line no-console
+        throw new Error("Route alias not found: ".concat(alias));
+      }
+      var routeConf = app.$$routeAliasMap.get(alias);
+      var url = brickUtils.toPath(brickUtils.computeRealRoutePath(routeConf.path, app), pathParams);
+      if (query) {
+        var urlSearchParams = new URLSearchParams();
+        for (var [key, value] of Object.entries(query)) {
+          if (Array.isArray(value)) {
+            for (var item of value) {
+              urlSearchParams.append(key, item);
+            }
+          } else if (value !== undefined && value !== null && value !== "") {
+            urlSearchParams.set(key, value);
+          }
+        }
+        var queryString = urlSearchParams.toString();
+        if (queryString.length > 0) {
+          url += "?".concat(queryString);
+        }
+      }
+      return url;
+    };
   }
-  function useCurrentTheme() {
-    var [currentTheme, setCurrentTheme] = React.useState(getCurrentTheme());
-    React.useEffect(() => {
-      var listenToThemeChange = event => {
-        setCurrentTheme(event.detail);
-      };
-      window.addEventListener("theme.change", listenToThemeChange);
-      return () => {
-        window.removeEventListener("theme.change", listenToThemeChange);
-      };
-    }, []);
-    return currentTheme;
+
+  function getUrlBySegueFactory(app, segues) {
+    return function getUrlBySegue(segueId, pathParams, query) {
+      if (!brickUtils.hasOwnProperty(segues, segueId)) {
+        // eslint-disable-next-line no-console
+        throw new Error("Segue not found: ".concat(segueId));
+      }
+      var segue = segues[segueId];
+      return getUrlByAliasFactory(app)(segue.target, pathParams, query);
+    };
   }
-  function batchSetAppsLocalTheme(appsTheme) {
-    storage.setItem(LOCAL_STORAGE_APPS_THEME_KEY, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLocalAppsTheme()), appsTheme));
+
+  function imagesFactory(appId, isBuildPush, version) {
+    return {
+      get(name) {
+        var getSuffix = () => {
+          var suffix = window.APP_ROOT ? "".concat(window.APP_ROOT).concat(window.BOOTSTRAP_UNION_FILE && window.PUBLIC_DEPS ? "" : "-/") : "";
+          if (!suffix.startsWith("/")) {
+            suffix = getBasePath() + suffix;
+          }
+          if (window.APP_ID && window.APP_ID !== appId) {
+            return suffix.replace(new RegExp("(^|/)".concat(_.escapeRegExp(window.APP_ID), "/")), "$1".concat(appId, "/")).replace(/\/\d+\.\d+\.\d+\//, "/".concat(version, "/"));
+          }
+          return suffix;
+        };
+        return isBuildPush ? "".concat(getBasePath(), "api/gateway/object_store.object_store.GetObject/api/v1/objectStore/bucket/next-builder/object/").concat(name) : window.BOOTSTRAP_UNION_FILE && window.PUBLIC_DEPS ? "".concat(getSuffix(), "images/").concat(name) : "".concat(getSuffix(), "micro-apps/").concat(appId, "/images/").concat(name);
+      }
+    };
   }
-  function getLocalAppsTheme() {
-    var result;
-    try {
-      result = storage.getItem(LOCAL_STORAGE_APPS_THEME_KEY);
-    } catch (_unused) {
-      // eslint-disable-next-line no-console
-      console.error("JSON parse error inside `getLocalAppsTheme()`");
-    }
-    return result || {};
+  function widgetImagesFactory(widgetId, widgetVersion) {
+    return {
+      get(name) {
+        var _window$PUBLIC_ROOT;
+        return "".concat((_window$PUBLIC_ROOT = window.PUBLIC_ROOT) !== null && _window$PUBLIC_ROOT !== void 0 ? _window$PUBLIC_ROOT : "", "bricks/").concat(widgetId, "/").concat(window.PUBLIC_ROOT_WITH_VERSION && widgetVersion ? "".concat(widgetVersion, "/") : "", "dist/assets/").concat(name);
+      }
+    };
   }
 
-  // Modes.
-  var DEFAULT_MODE = "default";
-  var mode = DEFAULT_MODE;
-  function setMode(value) {
-    if (value !== "dashboard" && value !== "default") {
-      throw new Error("Unsupported mode: ".concat(value));
+  var injected = new WeakSet();
+
+  // The injected (or transformed) result should never be *injected* again.
+  // So does the fetched data from a remote api.
+  function recursiveMarkAsInjected(value) {
+    if (brickUtils.isObject(value)) {
+      if (!haveBeenInjected(value)) {
+        injected.add(value);
+        if (Array.isArray(value)) {
+          value.forEach(recursiveMarkAsInjected);
+        } else {
+          // Only mark pure objects.
+          var proto = Object.getPrototypeOf(value);
+          if (!proto || proto.constructor === Object) {
+            Object.values(value).forEach(recursiveMarkAsInjected);
+          }
+        }
+      }
     }
-    mode = value;
   }
-  function getMode() {
-    return mode;
+  function haveBeenInjected(object) {
+    return injected.has(object);
   }
-  function getCurrentMode() {
-    return document.documentElement.dataset.mode;
+  function resetAllInjected() {
+    injected = new WeakSet();
   }
-  function applyMode(value) {
-    if (value) {
-      setMode(value);
-    } else {
-      value = getMode();
-    }
-    if (value !== getCurrentMode()) {
-      document.documentElement.dataset.mode = value;
-      window.dispatchEvent(new CustomEvent("mode.change", {
-        detail: value
-      }));
+  function cloneDeepWithInjectedMark(value) {
+    if (brickUtils.isObject(value) && !isPreEvaluated(value)) {
+      var clone = Array.isArray(value) ? value.map(item => cloneDeepWithInjectedMark(item)) : Object.fromEntries(
+      // Get both string and symbol keys.
+      Object.entries(value).map(_ref => {
+        var [k, v] = _ref;
+        return [k, cloneDeepWithInjectedMark(v)];
+      }).concat(Object.getOwnPropertySymbols(value).map(k => [k, value[k]])));
+      if (haveBeenInjected(value)) {
+        injected.add(clone);
+      }
+      return clone;
     }
-  }
-  function useCurrentMode() {
-    var [currentMode, setCurrentMode] = React.useState(getCurrentMode());
-    React.useEffect(() => {
-      var listenToModeChange = event => {
-        setCurrentMode(event.detail);
-      };
-      window.addEventListener("mode.change", listenToModeChange);
-      return () => {
-        window.removeEventListener("mode.change", listenToModeChange);
-      };
-    }, []);
-    return currentMode;
-  }
-  function getCssPropertyValue(name) {
-    var _window$getComputedSt;
-    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.documentElement;
-    if (!el) return "";
-    return ((_window$getComputedSt = window.getComputedStyle(el)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue(name)) || "";
+    return value;
   }
 
-  function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-      var info = gen[key](arg);
-      var value = info.value;
-    } catch (error) {
-      reject(error);
-      return;
+  var StateOfUseBrick;
+  (function (StateOfUseBrick) {
+    StateOfUseBrick[StateOfUseBrick["INITIAL"] = 0] = "INITIAL";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK"] = 1] = "USE_BRICK";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_ITEM"] = 2] = "USE_BRICK_ITEM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_PROPERTIES"] = 3] = "USE_BRICK_PROPERTIES";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_TRANSFORM"] = 4] = "USE_BRICK_TRANSFORM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_EVENTS"] = 5] = "USE_BRICK_EVENTS";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_IF"] = 6] = "USE_BRICK_IF";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS"] = 7] = "USE_BRICK_SLOTS";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM"] = 8] = "USE_BRICK_SLOTS_ITEM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM_BRICKS"] = 9] = "USE_BRICK_SLOTS_ITEM_BRICKS";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM_BRICKS_ITEM"] = 10] = "USE_BRICK_SLOTS_ITEM_BRICKS_ITEM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE"] = 11] = "USE_BRICK_LIFECYCLE";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES"] = 12] = "USE_BRICK_LIFECYCLE_USERESOLVES";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM"] = 13] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM"] = 14] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT"] = 15] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT";
+    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM"] = 16] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM";
+  })(StateOfUseBrick || (StateOfUseBrick = {}));
+  function isLazyContentInUseBrick(state) {
+    switch (state) {
+      case StateOfUseBrick.USE_BRICK_PROPERTIES:
+      case StateOfUseBrick.USE_BRICK_TRANSFORM:
+      case StateOfUseBrick.USE_BRICK_EVENTS:
+      case StateOfUseBrick.USE_BRICK_IF:
+      case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM:
+      case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM:
+        return true;
     }
-    if (info.done) {
-      resolve(value);
+    return false;
+  }
+  function getNextStateOfUseBrick(state, isArray, key) {
+    if (isLazyContentInUseBrick(state)) {
+      return state;
+    }
+    if (isArray) {
+      switch (state) {
+        case StateOfUseBrick.USE_BRICK:
+          return StateOfUseBrick.USE_BRICK_ITEM;
+        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS:
+          return StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS_ITEM;
+        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES:
+          return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM;
+      }
     } else {
-      Promise.resolve(value).then(_next, _throw);
+      switch (state) {
+        case StateOfUseBrick.INITIAL:
+          if (key === "useBrick") {
+            return StateOfUseBrick.USE_BRICK;
+          }
+          break;
+        case StateOfUseBrick.USE_BRICK:
+        case StateOfUseBrick.USE_BRICK_ITEM:
+        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS_ITEM:
+          {
+            switch (key) {
+              case "properties":
+                return StateOfUseBrick.USE_BRICK_PROPERTIES;
+              case "transform":
+                return StateOfUseBrick.USE_BRICK_TRANSFORM;
+              case "events":
+                return StateOfUseBrick.USE_BRICK_EVENTS;
+              case "slots":
+                return StateOfUseBrick.USE_BRICK_SLOTS;
+              case "if":
+                return StateOfUseBrick.USE_BRICK_IF;
+              case "lifeCycle":
+                return StateOfUseBrick.USE_BRICK_LIFECYCLE;
+            }
+            break;
+          }
+        case StateOfUseBrick.USE_BRICK_SLOTS:
+          return StateOfUseBrick.USE_BRICK_SLOTS_ITEM;
+        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM:
+          if (key === "bricks") {
+            return StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS;
+          }
+          break;
+        case StateOfUseBrick.USE_BRICK_LIFECYCLE:
+          if (key === "useResolves") {
+            return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES;
+          }
+          break;
+        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM:
+          {
+            switch (key) {
+              case "transform":
+                return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM;
+              case "onReject":
+                return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT;
+            }
+            break;
+          }
+        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT:
+          if (key === "transform") {
+            return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM;
+          }
+          break;
+      }
     }
+    return StateOfUseBrick.INITIAL;
   }
-  function _asyncToGenerator$2(fn) {
-    return function () {
-      var self = this,
-        args = arguments;
-      return new Promise(function (resolve, reject) {
-        var gen = fn.apply(self, args);
-        function _next(value) {
-          asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
-        }
-        function _throw(err) {
-          asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
+
+  function getTracks(value) {
+    var contextNames = false;
+    var stateNames = false;
+    var formStateNames = false;
+    if (typeof value === "string" ? brickUtils.isEvaluable(value) : isPreEvaluated(value)) {
+      var raw = typeof value === "string" ? value : getPreEvaluatedRaw(value);
+      if (brickUtils.isTrackAll(raw)) {
+        var result = brickUtils.trackAll(raw);
+        if (result) {
+          contextNames = result.context;
+          stateNames = result.state;
+          formStateNames = result.formState;
         }
-        _next(undefined);
-      });
+      } else {
+        contextNames = brickUtils.trackContext(raw);
+        stateNames = brickUtils.trackState(raw);
+        formStateNames = brickUtils.trackFormState(raw);
+      }
+    }
+    return {
+      contextNames,
+      stateNames,
+      formStateNames
     };
   }
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-    return obj;
+
+  /** @internal */
+  function transformElementProperties(element, data, to, from, mapArray) {
+    var result = preprocessTransformProperties(data, to, from, mapArray);
+    setRealProperties(element, result, true);
   }
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
+
+  /** @internal */
+  function transformProperties(props, data, to, from, mapArray, options) {
+    var result = preprocessTransformProperties(data, to, from, mapArray, options);
+    for (var [propName, propValue] of Object.entries(result)) {
+      _.set(props, propName, propValue);
     }
-    return keys;
+    return props;
   }
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+
+  /** @internal */
+  function doTransform(data, to, options) {
+    var preEvaluated = isPreEvaluated(to);
+    if (preEvaluated || typeof to === "string") {
+      // For `useBrick`, some fields such as `properties`/`transform`/`events`,
+      // are kept and to be transformed later.
+      var lazy = (options === null || options === void 0 ? void 0 : options.$$lazyForUseBrick) && isLazyContentInUseBrick(options.$$stateOfUseBrick);
+      if (lazy) {
+        // The current data context is not memoized, since a new data context
+        // should always be provided before later transformations.
+        return to;
+      }
+      var result;
+      var dismissRecursiveMarkingInjected = false;
+      if (preEvaluated || brickUtils.isEvaluable(to)) {
+        var runtimeContext = {
+          data
+        };
+        if (options !== null && options !== void 0 && options.tplContextId) runtimeContext.tplContextId = options.tplContextId;
+        if (options !== null && options !== void 0 && options.formContextId) runtimeContext.formContextId = options.formContextId;
+        result = evaluate(to, runtimeContext, options === null || options === void 0 ? void 0 : options.evaluateOptions);
+        dismissRecursiveMarkingInjected = shouldDismissRecursiveMarkingInjected(to);
       } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
+        result = options !== null && options !== void 0 && options.allowInject ? brickUtils.transformAndInject(to, data, _internalApiGetCurrentContext()) : brickUtils.transform(to, data);
+      }
+      if (!dismissRecursiveMarkingInjected) {
+        recursiveMarkAsInjected(result);
       }
-    }
-    return target;
-  }
-
-  /**
-   * @description 获取实例详情
-   * @endpoint GET /object/:objectId/instance/:instanceId
-   */
-  var InstanceApi_getDetail = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$2(function* (objectId, instanceId, params, options) {
-      return (/**! @contract easyops.api.cmdb.instance.GetDetail */
-        (yield brickHttp.http.get("api/gateway/cmdb.instance.GetDetail/object/".concat(objectId, "/instance/").concat(instanceId), _objectSpread2(_objectSpread2({}, options), {}, {
-          params
-        }))).data
-      );
-    });
-    return function InstanceApi_getDetail(_x, _x2, _x3, _x4) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  /**
-   * @description 搜索实例
-   * @endpoint POST /object/:objectId/instance/_search
-   */
-  var InstanceApi_postSearch = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$2(function* (objectId, data, options) {
-      return (/**! @contract easyops.api.cmdb.instance.PostSearch */
-        (yield brickHttp.http.post("api/gateway/cmdb.instance.PostSearch/object/".concat(objectId, "/instance/_search"), data, options)).data
-      );
-    });
-    return function InstanceApi_postSearch(_x, _x2, _x3) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  /**
-   * @description 获取菜单信息
-   * @endpoint GET /api/v1/micro-app/menus/:menuId
-   */
-  var InstalledMicroAppApi_getMenusInfo = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator__default["default"](function* (menuId, params, options) {
-      return (/**! @contract easyops.api.micro_app.installed_micro_app.GetMenusInfo@1.0.0 */(yield brickHttp.http.get("api/gateway/micro_app.installed_micro_app.GetMenusInfo/api/v1/micro-app/menus/".concat(menuId), _objectSpread__default["default"](_objectSpread__default["default"]({}, options), {}, {
-          params
-        }))).data
-      );
-    });
-    return function InstalledMicroAppApi_getMenusInfo(_x, _x2, _x3) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  /** 微应用的i18n信息 */
-
-  /**
-   * @description 获取微应用的i18n数据
-   * @endpoint GET /api/v1/micro-app/i18n
-   */
-  var InstalledMicroAppApi_getI18NData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator__default["default"](function* (params, options) {
-      return (/**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */(yield brickHttp.http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread__default["default"](_objectSpread__default["default"]({}, options), {}, {
-          params
-        }))).data
-      );
-    });
-    return function InstalledMicroAppApi_getI18NData(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  /**
-   * @description 校验系统权限
-   * @endpoint POST /api/micro_app/v1/permission/validate
-   */
-  var PermissionApi_validatePermissions = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator__default["default"](function* (data, options) {
-      return (/**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */(yield brickHttp.http.post("api/gateway/micro_app.permission.ValidatePermissions/api/micro_app/v1/permission/validate", data, options)).data
-      );
-    });
-    return function PermissionApi_validatePermissions(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  function supply(attemptToVisitGlobals, providedGlobalVariables, mock) {
-    var globalVariables = _objectSpread__default["default"]({}, providedGlobalVariables);
-    // Allow limited browser builtin values.
-    globalVariables["undefined"] = undefined;
-    for (var variableName of attemptToVisitGlobals) {
-      if (!Object.prototype.hasOwnProperty.call(globalVariables, variableName)) {
-        var variable = supplyIndividual(variableName, mock);
-        if (variable !== undefined) {
-          globalVariables[variableName] = variable;
-        }
-      }
-    }
-    return globalVariables;
-  }
-  var shouldOmitInLodash = new Set([
-  // Omit all mutable methods from lodash.
-  // But allow sequence methods like `_.chain`.
-  "fill", "pull", "pullAll", "pullAllBy", "pullAllWith", "pullAt", "remove", "reverse", "assign", "assignIn", "assignInWith", "assignWith", "defaults", "defaultsDeep", "merge", "mergeWith", "set", "setWith", "unset", "update", "updateWith",
-  /**
-   * Ignore `Function` methods from lodash, too.
-   * There are chances to invoke `Object.assign`, etc.
-   *
-   * E.g.:
-   *
-   * ```
-   * _.wrap(_.method('constructor.assign',{b:2},{b:3}),(func,...a) => func(...a))({})
-   * ```
-   */
-  "after", "ary", "before", "bind", "bindKey", "curry", "curryRight", "debounce", "defer", "delay", "flip", "memoize", "negate", "once", "overArgs", "partial", "partialRight", "rearg", "rest", "spread", "throttle", "unary", "wrap"]);
-
-  // Omit all mutable methods from moment.
-  var shouldOmitInMoment = new Set(["lang", "langData", "locale", "localeData", "defineLocale", "updateLocale", "updateOffset"]);
-  var allowedGlobalObjects = new Set(["Array", "Boolean", "Date", "Infinity", "JSON", "Math", "NaN", "Number", "String", "RegExp", "decodeURI", "decodeURIComponent", "encodeURI", "encodeURIComponent", "isFinite", "isNaN", "parseFloat", "parseInt", "Map", "Set", "URLSearchParams", "WeakMap", "WeakSet", "atob", "btoa"]);
-  function supplyIndividual(variableName, mock) {
-    switch (variableName) {
-      case "Object":
-        // Do not allow mutable methods like `Object.assign`.
-        return delegateMethods(Object, ["entries", "fromEntries", "keys", "values"]);
-      case "_":
-        return Object.fromEntries(Object.entries(___default["default"]).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
-      case "moment":
-        return Object.assign(function () {
-          return moment__default["default"](...arguments);
-        }, Object.fromEntries(Object.entries(moment__default["default"]).filter(entry => !shouldOmitInMoment.has(entry[0]))));
-      case "PIPES":
-        return pipes.pipes;
-      case "TAG_URL":
-        return tagUrlFactory(true);
-      case "SAFE_TAG_URL":
-        return tagUrlFactory();
-      default:
-        if (allowedGlobalObjects.has(variableName)) {
-          return window[variableName];
-        }
-    }
-  }
-  function delegateMethods(target, methods) {
-    return Object.fromEntries(methods.map(method => [method, function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return target[method].apply(target, args);
-    }]));
-  }
-  /**
-   * Pass `ignoreSlashes` as `true` to encode all tagged expressions
-   * as URL components, except for `/` which maybe used in `APP.homepage`.
-   *
-   * Otherwise encode all tagged expressions as URL components.
-   * This will encode `/` as `%2F`. So do not use it directly
-   * with `APP.homepage` as in template expressions.
-   *
-   * @example
-   *
-   * ```js
-   * TAG_URL`${APP.homepage}/list?q=${q}&redirect=${redirect}`
-   * ```
-   *
-   * ```js
-   * SAFE_TAG_URL`file/${path}?q=${q}`
-   * // `path` will be fully transformed by `encodeURIComponent`.
-   * ```
-   *
-   * ```js
-   * // Wrap `APP.homepage` outside of `SAFE_TAG_URL`.
-   * `${APP.homepage}/${SAFE_TAG_URL`file/${path}?q=${q}`}`
-   * ```
-   */
-  function tagUrlFactory(ignoreSlashes) {
-    return function (strings) {
-      for (var _len2 = arguments.length, partials = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        partials[_key2 - 1] = arguments[_key2];
-      }
-      var result = [];
-      strings.forEach((str, index) => {
-        result.push(str);
-        if (index < partials.length) {
-          result.push(ignoreSlashes ? String(partials[index]).replace(/[^/]+/g, p => encodeURIComponent(p)) : encodeURIComponent(String(partials[index])));
-        }
-      });
-      return result.join("");
-    };
-  }
-
-  function getUrlByAliasFactory(app) {
-    return function getUrlByAlias(alias, pathParams, query) {
-      if (!(app !== null && app !== void 0 && app.$$routeAliasMap.has(alias))) {
-        // eslint-disable-next-line no-console
-        throw new Error("Route alias not found: ".concat(alias));
-      }
-      var routeConf = app.$$routeAliasMap.get(alias);
-      var url = brickUtils.toPath(brickUtils.computeRealRoutePath(routeConf.path, app), pathParams);
-      if (query) {
-        var urlSearchParams = new URLSearchParams();
-        for (var [key, value] of Object.entries(query)) {
-          if (Array.isArray(value)) {
-            for (var item of value) {
-              urlSearchParams.append(key, item);
-            }
-          } else if (value !== undefined && value !== null && value !== "") {
-            urlSearchParams.set(key, value);
-          }
-        }
-        var queryString = urlSearchParams.toString();
-        if (queryString.length > 0) {
-          url += "?".concat(queryString);
-        }
-      }
-      return url;
-    };
-  }
-
-  function getUrlBySegueFactory(app, segues) {
-    return function getUrlBySegue(segueId, pathParams, query) {
-      if (!brickUtils.hasOwnProperty(segues, segueId)) {
-        // eslint-disable-next-line no-console
-        throw new Error("Segue not found: ".concat(segueId));
-      }
-      var segue = segues[segueId];
-      return getUrlByAliasFactory(app)(segue.target, pathParams, query);
-    };
-  }
-
-  function imagesFactory(appId, isBuildPush, version) {
-    return {
-      get(name) {
-        var getSuffix = () => {
-          var suffix = window.APP_ROOT ? "".concat(window.APP_ROOT).concat(window.BOOTSTRAP_UNION_FILE && window.PUBLIC_DEPS ? "" : "-/") : "";
-          if (!suffix.startsWith("/")) {
-            suffix = getBasePath() + suffix;
-          }
-          if (window.APP_ID && window.APP_ID !== appId) {
-            return suffix.replace(new RegExp("(^|/)".concat(_.escapeRegExp(window.APP_ID), "/")), "$1".concat(appId, "/")).replace(/\/\d+\.\d+\.\d+\//, "/".concat(version, "/"));
-          }
-          return suffix;
-        };
-        return isBuildPush ? "".concat(getBasePath(), "api/gateway/object_store.object_store.GetObject/api/v1/objectStore/bucket/next-builder/object/").concat(name) : window.BOOTSTRAP_UNION_FILE && window.PUBLIC_DEPS ? "".concat(getSuffix(), "images/").concat(name) : "".concat(getSuffix(), "micro-apps/").concat(appId, "/images/").concat(name);
-      }
-    };
-  }
-  function widgetImagesFactory(widgetId, widgetVersion) {
-    return {
-      get(name) {
-        var _window$PUBLIC_ROOT;
-        return "".concat((_window$PUBLIC_ROOT = window.PUBLIC_ROOT) !== null && _window$PUBLIC_ROOT !== void 0 ? _window$PUBLIC_ROOT : "", "bricks/").concat(widgetId, "/").concat(window.PUBLIC_ROOT_WITH_VERSION && widgetVersion ? "".concat(widgetVersion, "/") : "", "dist/assets/").concat(name);
-      }
-    };
-  }
-
-  var injected = new WeakSet();
-
-  // The injected (or transformed) result should never be *injected* again.
-  // So does the fetched data from a remote api.
-  function recursiveMarkAsInjected(value) {
-    if (brickUtils.isObject(value)) {
-      if (!haveBeenInjected(value)) {
-        injected.add(value);
-        if (Array.isArray(value)) {
-          value.forEach(recursiveMarkAsInjected);
-        } else {
-          // Only mark pure objects.
-          var proto = Object.getPrototypeOf(value);
-          if (!proto || proto.constructor === Object) {
-            Object.values(value).forEach(recursiveMarkAsInjected);
-          }
-        }
-      }
-    }
-  }
-  function haveBeenInjected(object) {
-    return injected.has(object);
-  }
-  function resetAllInjected() {
-    injected = new WeakSet();
-  }
-  function cloneDeepWithInjectedMark(value) {
-    if (brickUtils.isObject(value) && !isPreEvaluated(value)) {
-      var clone = Array.isArray(value) ? value.map(item => cloneDeepWithInjectedMark(item)) : Object.fromEntries(
-      // Get both string and symbol keys.
-      Object.entries(value).map(_ref => {
-        var [k, v] = _ref;
-        return [k, cloneDeepWithInjectedMark(v)];
-      }).concat(Object.getOwnPropertySymbols(value).map(k => [k, value[k]])));
-      if (haveBeenInjected(value)) {
-        injected.add(clone);
-      }
-      return clone;
-    }
-    return value;
-  }
-
-  var StateOfUseBrick;
-  (function (StateOfUseBrick) {
-    StateOfUseBrick[StateOfUseBrick["INITIAL"] = 0] = "INITIAL";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK"] = 1] = "USE_BRICK";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_ITEM"] = 2] = "USE_BRICK_ITEM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_PROPERTIES"] = 3] = "USE_BRICK_PROPERTIES";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_TRANSFORM"] = 4] = "USE_BRICK_TRANSFORM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_EVENTS"] = 5] = "USE_BRICK_EVENTS";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_IF"] = 6] = "USE_BRICK_IF";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS"] = 7] = "USE_BRICK_SLOTS";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM"] = 8] = "USE_BRICK_SLOTS_ITEM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM_BRICKS"] = 9] = "USE_BRICK_SLOTS_ITEM_BRICKS";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_SLOTS_ITEM_BRICKS_ITEM"] = 10] = "USE_BRICK_SLOTS_ITEM_BRICKS_ITEM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE"] = 11] = "USE_BRICK_LIFECYCLE";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES"] = 12] = "USE_BRICK_LIFECYCLE_USERESOLVES";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM"] = 13] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM"] = 14] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT"] = 15] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT";
-    StateOfUseBrick[StateOfUseBrick["USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM"] = 16] = "USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM";
-  })(StateOfUseBrick || (StateOfUseBrick = {}));
-  function isLazyContentInUseBrick(state) {
-    switch (state) {
-      case StateOfUseBrick.USE_BRICK_PROPERTIES:
-      case StateOfUseBrick.USE_BRICK_TRANSFORM:
-      case StateOfUseBrick.USE_BRICK_EVENTS:
-      case StateOfUseBrick.USE_BRICK_IF:
-      case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM:
-      case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM:
-        return true;
-    }
-    return false;
-  }
-  function getNextStateOfUseBrick(state, isArray, key) {
-    if (isLazyContentInUseBrick(state)) {
-      return state;
-    }
-    if (isArray) {
-      switch (state) {
-        case StateOfUseBrick.USE_BRICK:
-          return StateOfUseBrick.USE_BRICK_ITEM;
-        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS:
-          return StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS_ITEM;
-        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES:
-          return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM;
-      }
-    } else {
-      switch (state) {
-        case StateOfUseBrick.INITIAL:
-          if (key === "useBrick") {
-            return StateOfUseBrick.USE_BRICK;
-          }
-          break;
-        case StateOfUseBrick.USE_BRICK:
-        case StateOfUseBrick.USE_BRICK_ITEM:
-        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS_ITEM:
-          {
-            switch (key) {
-              case "properties":
-                return StateOfUseBrick.USE_BRICK_PROPERTIES;
-              case "transform":
-                return StateOfUseBrick.USE_BRICK_TRANSFORM;
-              case "events":
-                return StateOfUseBrick.USE_BRICK_EVENTS;
-              case "slots":
-                return StateOfUseBrick.USE_BRICK_SLOTS;
-              case "if":
-                return StateOfUseBrick.USE_BRICK_IF;
-              case "lifeCycle":
-                return StateOfUseBrick.USE_BRICK_LIFECYCLE;
-            }
-            break;
-          }
-        case StateOfUseBrick.USE_BRICK_SLOTS:
-          return StateOfUseBrick.USE_BRICK_SLOTS_ITEM;
-        case StateOfUseBrick.USE_BRICK_SLOTS_ITEM:
-          if (key === "bricks") {
-            return StateOfUseBrick.USE_BRICK_SLOTS_ITEM_BRICKS;
-          }
-          break;
-        case StateOfUseBrick.USE_BRICK_LIFECYCLE:
-          if (key === "useResolves") {
-            return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES;
-          }
-          break;
-        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM:
-          {
-            switch (key) {
-              case "transform":
-                return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_TRANSFORM;
-              case "onReject":
-                return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT;
-            }
-            break;
-          }
-        case StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT:
-          if (key === "transform") {
-            return StateOfUseBrick.USE_BRICK_LIFECYCLE_USERESOLVES_ITEM_ONREJECT_TRANSFORM;
-          }
-          break;
-      }
-    }
-    return StateOfUseBrick.INITIAL;
-  }
-
-  function getTracks(value) {
-    var contextNames = false;
-    var stateNames = false;
-    var formStateNames = false;
-    if (typeof value === "string" ? brickUtils.isEvaluable(value) : isPreEvaluated(value)) {
-      var raw = typeof value === "string" ? value : getPreEvaluatedRaw(value);
-      if (brickUtils.isTrackAll(raw)) {
-        var result = brickUtils.trackAll(raw);
-        if (result) {
-          contextNames = result.context;
-          stateNames = result.state;
-          formStateNames = result.formState;
-        }
-      } else {
-        contextNames = brickUtils.trackContext(raw);
-        stateNames = brickUtils.trackState(raw);
-        formStateNames = brickUtils.trackFormState(raw);
-      }
-    }
-    return {
-      contextNames,
-      stateNames,
-      formStateNames
-    };
-  }
-
-  /** @internal */
-  function transformElementProperties(element, data, to, from, mapArray) {
-    var result = preprocessTransformProperties(data, to, from, mapArray);
-    setRealProperties(element, result, true);
-  }
-
-  /** @internal */
-  function transformProperties(props, data, to, from, mapArray, options) {
-    var result = preprocessTransformProperties(data, to, from, mapArray, options);
-    for (var [propName, propValue] of Object.entries(result)) {
-      _.set(props, propName, propValue);
-    }
-    return props;
-  }
-
-  /** @internal */
-  function doTransform(data, to, options) {
-    var preEvaluated = isPreEvaluated(to);
-    if (preEvaluated || typeof to === "string") {
-      // For `useBrick`, some fields such as `properties`/`transform`/`events`,
-      // are kept and to be transformed later.
-      var lazy = (options === null || options === void 0 ? void 0 : options.$$lazyForUseBrick) && isLazyContentInUseBrick(options.$$stateOfUseBrick);
-      if (lazy) {
-        // The current data context is not memoized, since a new data context
-        // should always be provided before later transformations.
-        return to;
-      }
-      var result;
-      var dismissRecursiveMarkingInjected = false;
-      if (preEvaluated || brickUtils.isEvaluable(to)) {
-        var runtimeContext = {
-          data
-        };
-        if (options !== null && options !== void 0 && options.tplContextId) runtimeContext.tplContextId = options.tplContextId;
-        if (options !== null && options !== void 0 && options.formContextId) runtimeContext.formContextId = options.formContextId;
-        result = evaluate(to, runtimeContext, options === null || options === void 0 ? void 0 : options.evaluateOptions);
-        dismissRecursiveMarkingInjected = shouldDismissRecursiveMarkingInjected(to);
-      } else {
-        result = options !== null && options !== void 0 && options.allowInject ? brickUtils.transformAndInject(to, data, _internalApiGetCurrentContext()) : brickUtils.transform(to, data);
-      }
-      if (!dismissRecursiveMarkingInjected) {
-        recursiveMarkAsInjected(result);
-      }
-      return result;
+      return result;
     }
     if (!brickUtils.isObject(to) || haveBeenInjected(to)) {
       return to;
@@ -1244,44 +977,197 @@
     return "$".concat(type, "-").concat(id);
   }
 
-  function registerWidgetI18n(widgetId, i18n) {
-    var ns = getI18nNamespace("widget", widgetId);
-    Object.entries(i18n).forEach(_ref => {
-      var [lang, resources] = _ref;
-      i18next__default["default"].addResourceBundle(lang, ns, resources);
+  function registerWidgetI18n(widgetId, i18n) {
+    var ns = getI18nNamespace("widget", widgetId);
+    Object.entries(i18n).forEach(_ref => {
+      var [lang, resources] = _ref;
+      i18next__default["default"].addResourceBundle(lang, ns, resources);
+    });
+  }
+  function widgetI18nFactory(widgetId) {
+    return i18next.getFixedT(null, getI18nNamespace("widget", widgetId));
+  }
+
+  function i18nText(data) {
+    var _i18next$language;
+    if (!data) {
+      return;
+    }
+    var language = (_i18next$language = i18next__default["default"].language) !== null && _i18next$language !== void 0 ? _i18next$language : "zh-CN";
+    // First, make a perfect match.
+    if (brickUtils.hasOwnProperty(data, language)) {
+      return data[language];
+    }
+    // https://en.wikipedia.org/wiki/IETF_language_tag
+    var primaryLanguage = language.split("-")[0];
+    if (primaryLanguage !== language) {
+      // Then, match the primary language (which omits other subtags).
+      // E.g., match `zh` if the current language is `zh-CN`.
+      return brickUtils.hasOwnProperty(data, primaryLanguage) ? data[primaryLanguage] : undefined;
+    }
+    // At last, match the first key which starts with the primary language,
+    // if the current language contains primary subtag only.
+    // E.g., match `zh-CN` if the current language is `zh`.
+    var prefix = "".concat(primaryLanguage, "-");
+    for (var key of Object.keys(data)) {
+      if (key.startsWith(prefix)) {
+        return data[key];
+      }
+    }
+  }
+
+  // Themes.
+  var DEFAULT_THEME = "light";
+  var theme = DEFAULT_THEME;
+  var storage = new brickUtils.JsonStorage(localStorage);
+  var LOCAL_STORAGE_APPS_THEME_KEY = "apps-theme";
+  function setTheme(value) {
+    if (value !== "dark" && value !== "light" && value !== "dark-v2") {
+      throw new Error("Unsupported theme: ".concat(value));
+    }
+    theme = value;
+  }
+  function getTheme() {
+    return theme;
+  }
+  function getCurrentTheme() {
+    return document.documentElement.dataset.theme;
+  }
+  function applyTheme(value) {
+    if (value) {
+      setTheme(value);
+    } else {
+      value = getTheme();
+    }
+    if (value !== getCurrentTheme()) {
+      document.documentElement.dataset.theme = value;
+      window.dispatchEvent(new CustomEvent("theme.change", {
+        detail: value
+      }));
+    }
+  }
+  function useCurrentTheme() {
+    var [currentTheme, setCurrentTheme] = React.useState(getCurrentTheme());
+    React.useEffect(() => {
+      var listenToThemeChange = event => {
+        setCurrentTheme(event.detail);
+      };
+      window.addEventListener("theme.change", listenToThemeChange);
+      return () => {
+        window.removeEventListener("theme.change", listenToThemeChange);
+      };
+    }, []);
+    return currentTheme;
+  }
+  function batchSetAppsLocalTheme(appsTheme) {
+    storage.setItem(LOCAL_STORAGE_APPS_THEME_KEY, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLocalAppsTheme()), appsTheme));
+  }
+  function getLocalAppsTheme() {
+    var result;
+    try {
+      result = storage.getItem(LOCAL_STORAGE_APPS_THEME_KEY);
+    } catch (_unused) {
+      // eslint-disable-next-line no-console
+      console.error("JSON parse error inside `getLocalAppsTheme()`");
+    }
+    return result || {};
+  }
+
+  // Modes.
+  var DEFAULT_MODE = "default";
+  var mode = DEFAULT_MODE;
+  function setMode(value) {
+    if (value !== "dashboard" && value !== "default") {
+      throw new Error("Unsupported mode: ".concat(value));
+    }
+    mode = value;
+  }
+  function getMode() {
+    return mode;
+  }
+  function getCurrentMode() {
+    return document.documentElement.dataset.mode;
+  }
+  function applyMode(value) {
+    if (value) {
+      setMode(value);
+    } else {
+      value = getMode();
+    }
+    if (value !== getCurrentMode()) {
+      document.documentElement.dataset.mode = value;
+      window.dispatchEvent(new CustomEvent("mode.change", {
+        detail: value
+      }));
+    }
+  }
+  function useCurrentMode() {
+    var [currentMode, setCurrentMode] = React.useState(getCurrentMode());
+    React.useEffect(() => {
+      var listenToModeChange = event => {
+        setCurrentMode(event.detail);
+      };
+      window.addEventListener("mode.change", listenToModeChange);
+      return () => {
+        window.removeEventListener("mode.change", listenToModeChange);
+      };
+    }, []);
+    return currentMode;
+  }
+  function getCssPropertyValue(name) {
+    var _window$getComputedSt;
+    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.documentElement;
+    if (!el) return "";
+    return ((_window$getComputedSt = window.getComputedStyle(el)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue(name)) || "";
+  }
+
+  /**
+   * @description 获取菜单信息
+   * @endpoint GET /api/v1/micro-app/menus/:menuId
+   */
+  var InstalledMicroAppApi_getMenusInfo = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator__default["default"](function* (menuId, params, options) {
+      return (/**! @contract easyops.api.micro_app.installed_micro_app.GetMenusInfo@1.0.0 */(yield brickHttp.http.get("api/gateway/micro_app.installed_micro_app.GetMenusInfo/api/v1/micro-app/menus/".concat(menuId), _objectSpread__default["default"](_objectSpread__default["default"]({}, options), {}, {
+          params
+        }))).data
+      );
     });
-  }
-  function widgetI18nFactory(widgetId) {
-    return i18next.getFixedT(null, getI18nNamespace("widget", widgetId));
-  }
+    return function InstalledMicroAppApi_getMenusInfo(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
-  function i18nText(data) {
-    var _i18next$language;
-    if (!data) {
-      return;
-    }
-    var language = (_i18next$language = i18next__default["default"].language) !== null && _i18next$language !== void 0 ? _i18next$language : "zh-CN";
-    // First, make a perfect match.
-    if (brickUtils.hasOwnProperty(data, language)) {
-      return data[language];
-    }
-    // https://en.wikipedia.org/wiki/IETF_language_tag
-    var primaryLanguage = language.split("-")[0];
-    if (primaryLanguage !== language) {
-      // Then, match the primary language (which omits other subtags).
-      // E.g., match `zh` if the current language is `zh-CN`.
-      return brickUtils.hasOwnProperty(data, primaryLanguage) ? data[primaryLanguage] : undefined;
-    }
-    // At last, match the first key which starts with the primary language,
-    // if the current language contains primary subtag only.
-    // E.g., match `zh-CN` if the current language is `zh`.
-    var prefix = "".concat(primaryLanguage, "-");
-    for (var key of Object.keys(data)) {
-      if (key.startsWith(prefix)) {
-        return data[key];
-      }
-    }
-  }
+  /** 微应用的i18n信息 */
+
+  /**
+   * @description 获取微应用的i18n数据
+   * @endpoint GET /api/v1/micro-app/i18n
+   */
+  var InstalledMicroAppApi_getI18NData = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator__default["default"](function* (params, options) {
+      return (/**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */(yield brickHttp.http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread__default["default"](_objectSpread__default["default"]({}, options), {}, {
+          params
+        }))).data
+      );
+    });
+    return function InstalledMicroAppApi_getI18NData(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  /**
+   * @description 校验系统权限
+   * @endpoint POST /api/micro_app/v1/permission/validate
+   */
+  var PermissionApi_validatePermissions = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator__default["default"](function* (data, options) {
+      return (/**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */(yield brickHttp.http.post("api/gateway/micro_app.permission.ValidatePermissions/api/micro_app/v1/permission/validate", data, options)).data
+      );
+    });
+    return function PermissionApi_validatePermissions(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   var auth = {};
 
@@ -1931,419 +1817,950 @@
           }));
         }
       };
-      triggerEvent(updateContexts);
-      triggerEvent(affectContexts);
-      this.batchUpdate = false;
-      return;
+      triggerEvent(updateContexts);
+      triggerEvent(affectContexts);
+      this.batchUpdate = false;
+      return;
+    }
+    updateValue(name, value, method, callback) {
+      var _item$eventTarget;
+      if (!this.data.has(name)) {
+        if (this.tplContextId) {
+          throw new Error("State not found: ".concat(name));
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn("Context \"".concat(name, "\" is not declared, we recommend declaring it first."));
+          this.set(name, {
+            type: "free-variable",
+            value
+          });
+          return;
+        }
+      }
+      var item = this.data.get(name);
+      if (item.type !== "free-variable") {
+        // eslint-disable-next-line no-console
+        console.error("Unexpected storyboard context \"".concat(name, "\", expected \"free-variable\", received \"").concat(item.type, "\"."));
+        return;
+      }
+      if (method === "refresh" || method === "load") {
+        if (!item.useResolve) {
+          throw new Error("You can not ".concat(method, " the storyboard context \"").concat(name, "\" which is not using resolve."));
+        }
+        var promise;
+        if (method === "load") {
+          // Try to reuse previous request when calling `load`.
+          if (item.loaded) {
+            promise = Promise.resolve(item.value);
+          } else if (item.loading) {
+            promise = item.loading;
+          }
+        }
+        var shouldDismiss = error => {
+          // If render twice immediately, flow API contracts maybe cleared before
+          // the second rendering, while the page load handlers of the first
+          // rendering can't be cancelled, which throws `FlowApiNotFoundError`.
+          // So we ignore error reporting for this case.
+          return (error === null || error === void 0 ? void 0 : error.name) === "FlowApiNotFoundError" && this.renderId && this.renderId !== _internalApiGetRouterRenderId();
+        };
+        if (!promise) {
+          promise = item.loading = item.load(_objectSpread__default["default"]({
+            cache: method === "load" ? "default" : "reload"
+          }, value));
+          // Do not use the chained promise, since the callbacks need the original promise.
+          promise.then(val => {
+            this.finishLoad(item, val);
+          }, err => {
+            // Let users to override error handling.
+            if (!shouldDismiss(err) && !(callback !== null && callback !== void 0 && callback.error)) {
+              handleHttpError(err);
+            }
+          });
+        }
+        if (callback) {
+          var callbackFactory = eventCallbackFactory(callback, () => this.getResolveOptions(_internalApiGetCurrentContext()).mergedContext, null);
+          promise.then(val => {
+            callbackFactory("success")({
+              value: val
+            });
+            callbackFactory("finally")();
+          }, err => {
+            if (!shouldDismiss(err) && callback.error) {
+              callbackFactory("error")(err);
+            }
+            callbackFactory("finally")();
+          });
+        }
+        return;
+      }
+      if (method === "replace") {
+        item.value = value;
+      } else {
+        if (brickUtils.isObject(item.value)) {
+          Object.assign(item.value, value);
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn("Non-object current value of context \"".concat(name, "\" for \"context.assign\", try \"context.replace\" instead."));
+          item.value = value;
+        }
+      }
+      if (this.batchUpdate) return;
+      (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.eventName, {
+        detail: item.value
+      }));
+    }
+    finishLoad(item, value) {
+      var _item$eventTarget2;
+      if (!item.useResolve) {
+        // This happens when a tracked conditional resolve switches from
+        // resolve to fallback after an dep update triggered refresh but
+        // before it's been resolved.
+        return;
+      }
+      item.loaded = true;
+      item.value = value;
+      (_item$eventTarget2 = item.eventTarget) === null || _item$eventTarget2 === void 0 ? void 0 : _item$eventTarget2.dispatchEvent(new CustomEvent(this.eventName, {
+        detail: value
+      }));
+    }
+    waitForUsedContext(data) {
+      var _this = this;
+      return _asyncToGenerator__default["default"](function* () {
+        if (_this.tplContextId || _this.formContextId) {
+          return;
+        }
+        var usage = brickUtils.collectContextUsage(data, "CTX");
+        if (usage.includesComputed) {
+          for (var pending of _this.pendingStack) {
+            yield pending.pendingResult;
+          }
+        } else if (usage.usedContexts.length > 0) {
+          var _loop = function* (pendingContexts) {
+            yield Promise.all(usage.usedContexts.map(ctx => pendingContexts.get(ctx)));
+          };
+          for (var {
+            pendingContexts
+          } of _this.pendingStack) {
+            yield* _loop(pendingContexts);
+          }
+        }
+      })();
+    }
+    waitForAllContext() {
+      var _this2 = this;
+      return _asyncToGenerator__default["default"](function* () {
+        if (_this2.tplContextId || _this2.formContextId) {
+          return;
+        }
+        for (var pending of _this2.pendingStack) {
+          yield pending.pendingResult;
+        }
+      })();
+    }
+
+    /** After mount, dispatch the change event when an async data is loaded */
+    handleAsyncAfterMount() {
+      this.data.forEach(item => {
+        if (item.type === "free-variable" && item.async) {
+          // An async data always has `loading`
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          item.loading.then(value => {
+            this.finishLoad(item, value);
+          });
+        }
+      });
+    }
+    deferDefine(contextConfs, coreContext, brick) {
+      var {
+        mergedContext,
+        keyword
+      } = this.getResolveOptions(coreContext);
+      if (Array.isArray(contextConfs) && contextConfs.length > 0) {
+        var pending = brickUtils.deferResolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, this, brick), keyword);
+        this.pendingStack.push(pending);
+      }
+    }
+    define(contextConfs, coreContext, brick) {
+      var _this3 = this;
+      return _asyncToGenerator__default["default"](function* () {
+        if (Array.isArray(contextConfs)) {
+          var {
+            mergedContext,
+            keyword
+          } = _this3.getResolveOptions(coreContext);
+          yield brickUtils.resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this3, brick), keyword);
+        }
+      })();
+    }
+    syncDefine(contextConfs, coreContext, brick) {
+      if (Array.isArray(contextConfs)) {
+        var {
+          mergedContext,
+          keyword
+        } = this.getResolveOptions(coreContext);
+        brickUtils.syncResolveContextConcurrently(contextConfs, contextConf => syncResolveStoryboardContext(contextConf, mergedContext, this, brick), keyword);
+      }
+    }
+    getResolveOptions(coreContext) {
+      return this.formContextId ? {
+        mergedContext: _objectSpread__default["default"](_objectSpread__default["default"]({}, coreContext), {}, {
+          formContextId: this.formContextId
+        }),
+        keyword: "FORM_STATE"
+      } : this.tplContextId ? {
+        mergedContext: _objectSpread__default["default"](_objectSpread__default["default"]({}, coreContext), {}, {
+          tplContextId: this.tplContextId
+        }),
+        keyword: "STATE"
+      } : {
+        mergedContext: coreContext,
+        keyword: "CTX"
+      };
     }
-    updateValue(name, value, method, callback) {
-      var _item$eventTarget;
-      if (!this.data.has(name)) {
-        if (this.tplContextId) {
-          throw new Error("State not found: ".concat(name));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Context \"".concat(name, "\" is not declared, we recommend declaring it first."));
-          this.set(name, {
-            type: "free-variable",
-            value
+    getContextTriggerSetByLifecycle(lifecycle) {
+      return this.batchTriggerContextsNamesMap.get(lifecycle) || [];
+    }
+  }
+  function resolveStoryboardContext(_x, _x2, _x3, _x4) {
+    return _resolveStoryboardContext.apply(this, arguments);
+  }
+  function _resolveStoryboardContext() {
+    _resolveStoryboardContext = _asyncToGenerator__default["default"](function* (contextConf, coreContext, storyboardContextWrapper, brick) {
+      if (contextConf.property) {
+        if (storyboardContextWrapper.tplContextId) {
+          throw new Error("Setting `property` is not allowed in template scoped context");
+        }
+        if (brick) {
+          storyboardContextWrapper.set(contextConf.name, {
+            type: "brick-property",
+            brick,
+            prop: contextConf.property
           });
-          return;
         }
+        return true;
       }
-      var item = this.data.get(name);
-      if (item.type !== "free-variable") {
-        // eslint-disable-next-line no-console
-        console.error("Unexpected storyboard context \"".concat(name, "\", expected \"free-variable\", received \"").concat(item.type, "\"."));
-        return;
+      return resolveNormalStoryboardContext(contextConf, coreContext, storyboardContextWrapper, brick);
+    });
+    return _resolveStoryboardContext.apply(this, arguments);
+  }
+  var supportContextResolveTriggerBrickLifeCycle = ["onBeforePageLoad", "onPageLoad", "onBeforePageLeave", "onPageLeave", "onAnchorLoad", "onAnchorUnload"];
+  function resolveNormalStoryboardContext(_x5, _x6, _x7, _x8) {
+    return _resolveNormalStoryboardContext.apply(this, arguments);
+  }
+  function _resolveNormalStoryboardContext() {
+    _resolveNormalStoryboardContext = _asyncToGenerator__default["default"](function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
+      yield storyboardContextWrapper.waitForUsedContext(contextConf.if);
+      if (!looseCheckIf$1(contextConf, mergedContext)) {
+        return false;
       }
-      if (method === "refresh" || method === "load") {
-        if (!item.useResolve) {
-          throw new Error("You can not ".concat(method, " the storyboard context \"").concat(name, "\" which is not using resolve."));
-        }
-        var promise;
-        if (method === "load") {
-          // Try to reuse previous request when calling `load`.
-          if (item.loaded) {
-            promise = Promise.resolve(item.value);
-          } else if (item.loading) {
-            promise = item.loading;
+      var isTemplateState = !!storyboardContextWrapper.tplContextId;
+      var isFormState = !!storyboardContextWrapper.formContextId;
+      var value = getDefinedTemplateState(isTemplateState, contextConf, brick);
+      var load = null;
+      var loading;
+      var useResolve;
+      var trackConditionalResolve;
+      var resolvePolicy;
+      if (value === undefined) {
+        if (contextConf.resolve) {
+          var hasFallbackValue = brickUtils.hasOwnProperty(contextConf, "value");
+          // Track conditional resolve only if all matches:
+          //   - Track enabled
+          //   - Has fallback value
+          //   - Referencing other data in `resolve.if`
+          trackConditionalResolve = contextConf.track && hasFallbackValue && brickUtils.hasOwnProperty(contextConf.resolve, "if") && brickUtils.collectContextUsage(contextConf.resolve.if, isTemplateState ? "STATE" : isFormState ? "FORM_STATE" : "CTX").usedContexts.length > 0;
+          yield storyboardContextWrapper.waitForUsedContext(contextConf.resolve.if);
+          useResolve = looseCheckIf$1(contextConf.resolve, mergedContext);
+          if (useResolve || trackConditionalResolve) {
+            load = /*#__PURE__*/function () {
+              var _ref = _asyncToGenerator__default["default"](function* (options) {
+                var valueConf = {};
+                yield _internalApiGetResolver().resolveOne("reference", _objectSpread__default["default"]({
+                  transform: "value",
+                  transformMapArray: false
+                }, contextConf.resolve), valueConf, null, mergedContext, options);
+                return valueConf.value;
+              });
+              return function load(_x9) {
+                return _ref.apply(this, arguments);
+              };
+            }();
           }
-        }
-        var shouldDismiss = error => {
-          // If render twice immediately, flow API contracts maybe cleared before
-          // the second rendering, while the page load handlers of the first
-          // rendering can't be cancelled, which throws `FlowApiNotFoundError`.
-          // So we ignore error reporting for this case.
-          return (error === null || error === void 0 ? void 0 : error.name) === "FlowApiNotFoundError" && this.renderId && this.renderId !== _internalApiGetRouterRenderId();
-        };
-        if (!promise) {
-          promise = item.loading = item.load(_objectSpread__default["default"]({
-            cache: method === "load" ? "default" : "reload"
-          }, value));
-          // Do not use the chained promise, since the callbacks need the original promise.
-          promise.then(val => {
-            this.finishLoad(item, val);
-          }, err => {
-            // Let users to override error handling.
-            if (!shouldDismiss(err) && !(callback !== null && callback !== void 0 && callback.error)) {
-              handleHttpError(err);
+          if (useResolve) {
+            // `async` take precedence over `lazy`
+            resolvePolicy = contextConf.resolve.async && !isTemplateState ? "async" : contextConf.resolve.lazy ? "lazy" : "eager";
+            if (resolvePolicy === "eager") {
+              value = yield load();
+            } else if (resolvePolicy === "async") {
+              loading = load();
+            } else if (contextConf.resolve.trigger) {
+              var lifecycleName = contextConf.resolve.trigger;
+              if (supportContextResolveTriggerBrickLifeCycle.includes(lifecycleName)) {
+                var contextNameArray = storyboardContextWrapper.batchTriggerContextsNamesMap.get(lifecycleName) || [];
+                contextNameArray.push({
+                  name: contextConf.name,
+                  type: storyboardContextWrapper.tplContextId ? "state" : "context",
+                  tplContextId: storyboardContextWrapper.tplContextId
+                });
+                storyboardContextWrapper.batchTriggerContextsNamesMap.set(lifecycleName, contextNameArray);
+              } else {
+                // eslint-disable-next-line no-console
+                console.error("unsupported lifecycle: \"".concat(lifecycleName, "\""));
+              }
             }
-          });
+          } else if (!hasFallbackValue) {
+            return false;
+          }
         }
-        if (callback) {
-          var callbackFactory = eventCallbackFactory(callback, () => this.getResolveOptions(_internalApiGetCurrentContext()).mergedContext, null);
-          promise.then(val => {
-            callbackFactory("success")({
-              value: val
-            });
-            callbackFactory("finally")();
-          }, err => {
-            if (!shouldDismiss(err) && callback.error) {
-              callbackFactory("error")(err);
-            }
-            callbackFactory("finally")();
-          });
+        if ((!useResolve || resolvePolicy !== "eager") && contextConf.value !== undefined) {
+          yield storyboardContextWrapper.waitForUsedContext(contextConf.value);
+          // If the context has no resolve, just use its `value`.
+          // Or if the resolve is ignored or lazy, use its `value` as a fallback.
+          value = computeRealValue(contextConf.value, mergedContext, true);
         }
-        return;
       }
-      if (method === "replace") {
-        item.value = value;
-      } else {
-        if (brickUtils.isObject(item.value)) {
-          Object.assign(item.value, value);
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Non-object current value of context \"".concat(name, "\" for \"context.assign\", try \"context.replace\" instead."));
-          item.value = value;
-        }
+      resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, load, resolvePolicy === "eager", loading, resolvePolicy === "async", useResolve, trackConditionalResolve);
+      return true;
+    });
+    return _resolveNormalStoryboardContext.apply(this, arguments);
+  }
+  function syncResolveStoryboardContext(contextConf, mergedContext, storyboardContextWrapper, brick) {
+    if (!looseCheckIf$1(contextConf, mergedContext)) {
+      return false;
+    }
+    if (contextConf.resolve) {
+      throw new Error("resolve is not allowed here");
+    }
+    var value = getDefinedTemplateState(!!storyboardContextWrapper.tplContextId, contextConf, brick);
+    if (value === undefined) {
+      value = computeRealValue(contextConf.value, mergedContext, true);
+    }
+    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick);
+    return true;
+  }
+  function getDefinedTemplateState(isTemplateState, contextConf, brick) {
+    if (isTemplateState && brick.properties && brickUtils.hasOwnProperty(brick.properties, contextConf.name)) {
+      return brick.properties[contextConf.name];
+    }
+  }
+  function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, load, loaded, loading, async, useResolve, trackConditionalResolve) {
+    var newContext = {
+      type: "free-variable",
+      value,
+      // This is required for tracking context, even if no `onChange` is specified.
+      eventTarget: new EventTarget$1(),
+      useResolve,
+      load,
+      loaded,
+      loading,
+      async,
+      deps: []
+    };
+    var eventName = storyboardContextWrapper.formContextId ? "formstate.change" : storyboardContextWrapper.tplContextId ? "state.change" : "context.change";
+    if (contextConf.onChange) {
+      for (var handler of [].concat(contextConf.onChange)) {
+        newContext.eventTarget.addEventListener(eventName, listenerFactory(handler, mergedContext, brick));
+      }
+    }
+    newContext.eventTarget.addEventListener(eventName, e => {
+      storyboardContextWrapper.notifyRealTimeDataChange(contextConf.name, e.detail);
+    });
+    if (contextConf.track) {
+      var isTemplateState = !!storyboardContextWrapper.tplContextId;
+      var isFormState = !!storyboardContextWrapper.formContextId;
+      // Track its dependencies and auto update when each of them changed.
+      var deps = (isFormState ? brickUtils.trackUsedFormState : isTemplateState ? brickUtils.trackUsedState : brickUtils.trackUsedContext)(trackConditionalResolve ? [contextConf.resolve, contextConf.value] : load ? contextConf.resolve : contextConf.value);
+      !load && (newContext.deps = deps);
+      for (var dep of deps) {
+        var _eventTarget;
+        var ctx = storyboardContextWrapper.get().get(dep);
+        ctx === null || ctx === void 0 ? void 0 : (_eventTarget = ctx.eventTarget) === null || _eventTarget === void 0 ? void 0 : _eventTarget.addEventListener(eventName, batchAddListener(() => {
+          newContext.useResolve = trackConditionalResolve ? looseCheckIf$1(contextConf.resolve, mergedContext) : !!load;
+          if (newContext.useResolve) {
+            storyboardContextWrapper.updateValue(contextConf.name, {
+              cache: "default"
+            }, "refresh");
+          } else {
+            storyboardContextWrapper.updateValue(contextConf.name, computeRealValue(contextConf.value, mergedContext, true), "replace");
+          }
+        }, contextConf, storyboardContextWrapper));
       }
-      if (this.batchUpdate) return;
-      (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.eventName, {
-        detail: item.value
-      }));
     }
-    finishLoad(item, value) {
-      var _item$eventTarget2;
-      if (!item.useResolve) {
-        // This happens when a tracked conditional resolve switches from
-        // resolve to fallback after an dep update triggered refresh but
-        // before it's been resolved.
+    storyboardContextWrapper.set(contextConf.name, newContext);
+  }
+  function batchAddListener(listener, contextConf, storyboardContextWrapper) {
+    return event => {
+      if (storyboardContextWrapper.batchUpdate && storyboardContextWrapper.batchUpdateContextsNames.includes(contextConf.name)) {
         return;
       }
-      item.loaded = true;
-      item.value = value;
-      (_item$eventTarget2 = item.eventTarget) === null || _item$eventTarget2 === void 0 ? void 0 : _item$eventTarget2.dispatchEvent(new CustomEvent(this.eventName, {
-        detail: value
-      }));
+      listener(event);
+    };
+  }
+
+  var tplContextMap = new Map();
+  class CustomTemplateContext {
+    constructor(brick, renderId) {
+      _defineProperty__default["default"](this, "variables", void 0);
+      _defineProperty__default["default"](this, "state", void 0);
+      _defineProperty__default["default"](this, "id", _.uniqueId("tpl-ctx-"));
+      this.brick = brick;
+      tplContextMap.set(this.id, this);
+      this.state = new StoryboardContextWrapper(this.id, undefined, renderId);
+      brick.tplContextId = this.id;
     }
-    waitForUsedContext(data) {
-      var _this = this;
-      return _asyncToGenerator__default["default"](function* () {
-        if (_this.tplContextId || _this.formContextId) {
-          return;
-        }
-        var usage = brickUtils.collectContextUsage(data, "CTX");
-        if (usage.includesComputed) {
-          for (var pending of _this.pendingStack) {
-            yield pending.pendingResult;
-          }
-        } else if (usage.usedContexts.length > 0) {
-          var _loop = function* (pendingContexts) {
-            yield Promise.all(usage.usedContexts.map(ctx => pendingContexts.get(ctx)));
-          };
-          for (var {
-            pendingContexts
-          } of _this.pendingStack) {
-            yield* _loop(pendingContexts);
-          }
-        }
-      })();
+    setVariables(variables) {
+      this.variables = variables;
+      Object.freeze(variables);
     }
-    waitForAllContext() {
-      var _this2 = this;
-      return _asyncToGenerator__default["default"](function* () {
-        if (_this2.tplContextId || _this2.formContextId) {
-          return;
-        }
-        for (var pending of _this2.pendingStack) {
-          yield pending.pendingResult;
-        }
-      })();
+    getVariables() {
+      var {
+        element
+      } = this.brick;
+      if (element) {
+        return Object.fromEntries(Object.keys(this.variables).map(prop => [prop, element[prop]]));
+      }
+      return this.variables;
+    }
+    getBrick() {
+      return this.brick;
     }
+  }
+  function getCustomTemplateContext(tplContextId) {
+    return tplContextMap.get(tplContextId);
+  }
+  function getCustomContextTriggerListByLifecycle(lifecycle) {
+    return [...tplContextMap.values()].map(tplContext => tplContext.state.getContextTriggerSetByLifecycle(lifecycle)).filter(trigger => trigger.length > 0).flat(1);
+  }
 
-    /** After mount, dispatch the change event when an async data is loaded */
-    handleAsyncAfterMount() {
-      this.data.forEach(item => {
-        if (item.type === "free-variable" && item.async) {
-          // An async data always has `loading`
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          item.loading.then(value => {
-            this.finishLoad(item, value);
-          });
+  function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+      var info = gen[key](arg);
+      var value = info.value;
+    } catch (error) {
+      reject(error);
+      return;
+    }
+    if (info.done) {
+      resolve(value);
+    } else {
+      Promise.resolve(value).then(_next, _throw);
+    }
+  }
+  function _asyncToGenerator$2(fn) {
+    return function () {
+      var self = this,
+        args = arguments;
+      return new Promise(function (resolve, reject) {
+        var gen = fn.apply(self, args);
+        function _next(value) {
+          asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
         }
+        function _throw(err) {
+          asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
+        }
+        _next(undefined);
+      });
+    };
+  }
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
       });
+    } else {
+      obj[key] = value;
     }
-    deferDefine(contextConfs, coreContext, brick) {
-      var {
-        mergedContext,
-        keyword
-      } = this.getResolveOptions(coreContext);
-      if (Array.isArray(contextConfs) && contextConfs.length > 0) {
-        var pending = brickUtils.deferResolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, this, brick), keyword);
-        this.pendingStack.push(pending);
+    return obj;
+  }
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+
+  /**
+   * @description 获取实例详情
+   * @endpoint GET /object/:objectId/instance/:instanceId
+   */
+  var InstanceApi_getDetail = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator$2(function* (objectId, instanceId, params, options) {
+      return (/**! @contract easyops.api.cmdb.instance.GetDetail */
+        (yield brickHttp.http.get("api/gateway/cmdb.instance.GetDetail/object/".concat(objectId, "/instance/").concat(instanceId), _objectSpread2(_objectSpread2({}, options), {}, {
+          params
+        }))).data
+      );
+    });
+    return function InstanceApi_getDetail(_x, _x2, _x3, _x4) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  /**
+   * @description 搜索实例
+   * @endpoint POST /object/:objectId/instance/_search
+   */
+  var InstanceApi_postSearch = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator$2(function* (objectId, data, options) {
+      return (/**! @contract easyops.api.cmdb.instance.PostSearch */
+        (yield brickHttp.http.post("api/gateway/cmdb.instance.PostSearch/object/".concat(objectId, "/instance/_search"), data, options)).data
+      );
+    });
+    return function InstanceApi_postSearch(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var _excluded$8 = ["children"],
+    _excluded2$2 = ["children"],
+    _excluded3 = ["items", "app"];
+  var symbolAppId = Symbol("appId");
+  var symbolMenuI18nNamespace = Symbol("menuI18nNamespace");
+  var symbolOverrideApp = Symbol("overrideApp");
+  var symbolShouldCache = Symbol("shouldCache");
+  // Caching menu requests to avoid flicker.
+  var menuCache = new Map();
+  var menuTitleCache = new Map();
+  var processMenuCache = new Map();
+  function constructMenu(_x, _x2, _x3) {
+    return _constructMenu.apply(this, arguments);
+  }
+  function _constructMenu() {
+    _constructMenu = _asyncToGenerator__default["default"](function* (menuBar, context, kernel) {
+      var hasSubMenu = !!menuBar.subMenuId;
+      yield Promise.all([_asyncToGenerator__default["default"](function* () {
+        if (menuBar.menuId) {
+          var _menuBar$menu;
+          var defaultCollapsed = (_menuBar$menu = menuBar.menu) === null || _menuBar$menu === void 0 ? void 0 : _menuBar$menu.defaultCollapsed;
+          var menu = yield processMenu(menuBar.menuId, context, kernel, hasSubMenu);
+          if (!_.isNil(defaultCollapsed)) {
+            menu.defaultCollapsed = defaultCollapsed;
+          }
+          menuBar.menu = menu;
+        }
+      })(), _asyncToGenerator__default["default"](function* () {
+        if (hasSubMenu) {
+          menuBar.subMenu = yield processMenu(menuBar.subMenuId, context, kernel);
+        } else {
+          menuBar.subMenu = null;
+        }
+      })()]);
+    });
+    return _constructMenu.apply(this, arguments);
+  }
+  function preConstructMenus(_x4, _x5, _x6) {
+    return _preConstructMenus.apply(this, arguments);
+  }
+  function _preConstructMenus() {
+    _preConstructMenus = _asyncToGenerator__default["default"](function* (menus, context, kernel) {
+      var data = yield Promise.all(menus.map(menuId => processMenu(menuId, context, kernel, undefined, true)));
+      data.forEach((item, index) => processMenuCache.set(menus[index], item));
+    });
+    return _preConstructMenus.apply(this, arguments);
+  }
+  var getMenu = menuId => processMenuCache.get(menuId);
+  function fetchMenuById(_x7, _x8, _x9) {
+    return _fetchMenuById.apply(this, arguments);
+  }
+  function _fetchMenuById() {
+    _fetchMenuById = _asyncToGenerator__default["default"](function* (menuId, kernel, isPreFetch) {
+      if (menuCache.has(menuId)) {
+        return menuCache.get(menuId);
       }
-    }
-    define(contextConfs, coreContext, brick) {
-      var _this3 = this;
-      return _asyncToGenerator__default["default"](function* () {
-        if (Array.isArray(contextConfs)) {
-          var {
-            mergedContext,
-            keyword
-          } = _this3.getResolveOptions(coreContext);
-          yield brickUtils.resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this3, brick), keyword);
+      var menuList = window.STANDALONE_MICRO_APPS ? yield kernel.getStandaloneMenus(menuId, isPreFetch) : kernel.getFeatureFlags()["three-level-menu-layout"] ? (yield InstalledMicroAppApi_getMenusInfo(menuId, {
+        menuObjectId: "EASYOPS_STORYBOARD_MENU"
+      })).menus : (yield InstanceApi_postSearch("EASYOPS_STORYBOARD_MENU", {
+        page: 1,
+        page_size: 200,
+        fields: {
+          menuId: true,
+          title: true,
+          icon: true,
+          link: true,
+          titleDataSource: true,
+          defaultCollapsed: true,
+          defaultCollapsedBreakpoint: true,
+          type: true,
+          injectMenuGroupId: true,
+          dynamicItems: true,
+          itemsResolve: true,
+          items: true,
+          i18n: true,
+          "items.children": true,
+          "app.appId": true
+        },
+        query: {
+          menuId: {
+            $eq: menuId
+          },
+          app: {
+            $size: {
+              $gt: 0
+            }
+          }
         }
-      })();
-    }
-    syncDefine(contextConfs, coreContext, brick) {
-      if (Array.isArray(contextConfs)) {
-        var {
-          mergedContext,
-          keyword
-        } = this.getResolveOptions(coreContext);
-        brickUtils.syncResolveContextConcurrently(contextConfs, contextConf => syncResolveStoryboardContext(contextConf, mergedContext, this, brick), keyword);
+      })).list;
+      var menuData = yield mergeMenu(menuList, kernel);
+      if (!menuData) {
+        throw new Error("Menu not found: ".concat(menuId));
       }
-    }
-    getResolveOptions(coreContext) {
-      return this.formContextId ? {
-        mergedContext: _objectSpread__default["default"](_objectSpread__default["default"]({}, coreContext), {}, {
-          formContextId: this.formContextId
-        }),
-        keyword: "FORM_STATE"
-      } : this.tplContextId ? {
-        mergedContext: _objectSpread__default["default"](_objectSpread__default["default"]({}, coreContext), {}, {
-          tplContextId: this.tplContextId
-        }),
-        keyword: "STATE"
-      } : {
-        mergedContext: coreContext,
-        keyword: "CTX"
-      };
-    }
-    getContextTriggerSetByLifecycle(lifecycle) {
-      return this.batchTriggerContextsNamesMap.get(lifecycle) || [];
-    }
+      reorderMenu(menuData);
+      menuData[symbolShouldCache] && menuCache.set(menuId, menuData);
+      return menuData;
+    });
+    return _fetchMenuById.apply(this, arguments);
   }
-  function resolveStoryboardContext(_x, _x2, _x3, _x4) {
-    return _resolveStoryboardContext.apply(this, arguments);
+  function mergeMenu(_x10, _x11) {
+    return _mergeMenu.apply(this, arguments);
   }
-  function _resolveStoryboardContext() {
-    _resolveStoryboardContext = _asyncToGenerator__default["default"](function* (contextConf, coreContext, storyboardContextWrapper, brick) {
-      if (contextConf.property) {
-        if (storyboardContextWrapper.tplContextId) {
-          throw new Error("Setting `property` is not allowed in template scoped context");
+  function _mergeMenu() {
+    _mergeMenu = _asyncToGenerator__default["default"](function* (menuList, kernel) {
+      var mainMenu = menuList.find(menu => menu.type !== "inject");
+      if (!mainMenu) {
+        return undefined;
+      }
+      var validMenuList = [];
+      var injectWithMenus = new Map();
+      var menuWithI18n = new WeakMap();
+      for (var menu of menuList) {
+        if (menu.i18n) {
+          (function () {
+            var menuI18nNamespace = getI18nNamespace("menu", "".concat(menu.menuId, "~").concat(menu.app[0].appId, "+").concat(menu.instanceId));
+            // Support any language in `meta.i18n`.
+            Object.entries(menu.i18n).forEach(_ref6 => {
+              var [lang, resources] = _ref6;
+              i18next__default["default"].addResourceBundle(lang, menuI18nNamespace, resources);
+            });
+            menuWithI18n.set(menu, menuI18nNamespace);
+          })();
         }
-        if (brick) {
-          storyboardContextWrapper.set(contextConf.name, {
-            type: "brick-property",
-            brick,
-            prop: contextConf.property
-          });
+      }
+      var shouldCacheList = yield Promise.all(menuList.map(menu => loadDynamicMenuItems(menu, kernel, menuWithI18n)));
+      for (var _menu of menuList) {
+        var _menu$items;
+        if (((_menu$items = _menu.items) === null || _menu$items === void 0 ? void 0 : _menu$items.length) > 0) {
+          if (_menu.type === "inject" && _menu.injectMenuGroupId) {
+            var injectingMenus = injectWithMenus.get(_menu.injectMenuGroupId);
+            if (!injectingMenus) {
+              injectingMenus = [];
+              injectWithMenus.set(_menu.injectMenuGroupId, injectingMenus);
+            }
+            injectingMenus.push(_menu);
+          } else {
+            validMenuList.push(_menu);
+          }
         }
-        return true;
       }
-      return resolveNormalStoryboardContext(contextConf, coreContext, storyboardContextWrapper, brick);
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, mainMenu), {}, {
+        items: validMenuList.flatMap(menu => processGroupInject(menu.items, menu, injectWithMenus, menuWithI18n)),
+        [symbolShouldCache]: shouldCacheList.every(Boolean),
+        [symbolMenuI18nNamespace]: menuWithI18n.get(mainMenu),
+        [symbolOverrideApp]: mainMenu.overrideApp
+      });
     });
-    return _resolveStoryboardContext.apply(this, arguments);
-  }
-  var supportContextResolveTriggerBrickLifeCycle = ["onBeforePageLoad", "onPageLoad", "onBeforePageLeave", "onPageLeave", "onAnchorLoad", "onAnchorUnload"];
-  function resolveNormalStoryboardContext(_x5, _x6, _x7, _x8) {
-    return _resolveNormalStoryboardContext.apply(this, arguments);
+    return _mergeMenu.apply(this, arguments);
   }
-  function _resolveNormalStoryboardContext() {
-    _resolveNormalStoryboardContext = _asyncToGenerator__default["default"](function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
-      yield storyboardContextWrapper.waitForUsedContext(contextConf.if);
-      if (!looseCheckIf$1(contextConf, mergedContext)) {
-        return false;
+  function processGroupInject(items, menu, injectWithMenus, menuWithI18n) {
+    return items === null || items === void 0 ? void 0 : items.map(item => {
+      var _processGroupInject;
+      var foundInjectingMenus = item.groupId && injectWithMenus.get(item.groupId);
+      if (foundInjectingMenus) {
+        // Each menu to be injected with should be injected only once.
+        injectWithMenus.delete(item.groupId);
       }
-      var isTemplateState = !!storyboardContextWrapper.tplContextId;
-      var isFormState = !!storyboardContextWrapper.formContextId;
-      var value = getDefinedTemplateState(isTemplateState, contextConf, brick);
-      var load = null;
-      var loading;
-      var useResolve;
-      var trackConditionalResolve;
-      var resolvePolicy;
-      if (value === undefined) {
-        if (contextConf.resolve) {
-          var hasFallbackValue = brickUtils.hasOwnProperty(contextConf, "value");
-          // Track conditional resolve only if all matches:
-          //   - Track enabled
-          //   - Has fallback value
-          //   - Referencing other data in `resolve.if`
-          trackConditionalResolve = contextConf.track && hasFallbackValue && brickUtils.hasOwnProperty(contextConf.resolve, "if") && brickUtils.collectContextUsage(contextConf.resolve.if, isTemplateState ? "STATE" : isFormState ? "FORM_STATE" : "CTX").usedContexts.length > 0;
-          yield storyboardContextWrapper.waitForUsedContext(contextConf.resolve.if);
-          useResolve = looseCheckIf$1(contextConf.resolve, mergedContext);
-          if (useResolve || trackConditionalResolve) {
-            load = /*#__PURE__*/function () {
-              var _ref = _asyncToGenerator__default["default"](function* (options) {
-                var valueConf = {};
-                yield _internalApiGetResolver().resolveOne("reference", _objectSpread__default["default"]({
-                  transform: "value",
-                  transformMapArray: false
-                }, contextConf.resolve), valueConf, null, mergedContext, options);
-                return valueConf.value;
-              });
-              return function load(_x9) {
-                return _ref.apply(this, arguments);
-              };
-            }();
-          }
-          if (useResolve) {
-            // `async` take precedence over `lazy`
-            resolvePolicy = contextConf.resolve.async && !isTemplateState ? "async" : contextConf.resolve.lazy ? "lazy" : "eager";
-            if (resolvePolicy === "eager") {
-              value = yield load();
-            } else if (resolvePolicy === "async") {
-              loading = load();
-            } else if (contextConf.resolve.trigger) {
-              var lifecycleName = contextConf.resolve.trigger;
-              if (supportContextResolveTriggerBrickLifeCycle.includes(lifecycleName)) {
-                var contextNameArray = storyboardContextWrapper.batchTriggerContextsNamesMap.get(lifecycleName) || [];
-                contextNameArray.push({
-                  name: contextConf.name,
-                  type: storyboardContextWrapper.tplContextId ? "state" : "context",
-                  tplContextId: storyboardContextWrapper.tplContextId
-                });
-                storyboardContextWrapper.batchTriggerContextsNamesMap.set(lifecycleName, contextNameArray);
-              } else {
-                // eslint-disable-next-line no-console
-                console.error("unsupported lifecycle: \"".concat(lifecycleName, "\""));
-              }
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+        children: ((_processGroupInject = processGroupInject(item.children || item.items, menu, injectWithMenus, menuWithI18n)) !== null && _processGroupInject !== void 0 ? _processGroupInject : []).concat(foundInjectingMenus ? foundInjectingMenus.flatMap(injectingMenu => processGroupInject(injectingMenu.items, injectingMenu, injectWithMenus, menuWithI18n)) : []),
+        [symbolAppId]: menu.app[0].appId,
+        [symbolMenuI18nNamespace]: menuWithI18n.get(menu),
+        [symbolOverrideApp]: menu.overrideApp
+      });
+    });
+  }
+  function loadDynamicMenuItems(_x12, _x13, _x14) {
+    return _loadDynamicMenuItems.apply(this, arguments);
+  }
+  function _loadDynamicMenuItems() {
+    _loadDynamicMenuItems = _asyncToGenerator__default["default"](function* (menu, kernel, menuWithI18n) {
+      if (menu.dynamicItems && menu.itemsResolve) {
+        var _menu$itemsResolve;
+        var itemsConf = {};
+        var overrideAppId = menu.app[0].appId;
+        var context = _internalApiGetCurrentContext();
+        var newContext = context;
+        if (overrideAppId !== context.app.id && attemptToVisit(menu.itemsResolve, ["APP", "I18N"])) {
+          if (window.STANDALONE_MICRO_APPS) {
+            if (menu.overrideApp) {
+              menu.overrideApp.config = brickUtils.deepFreeze(_.merge({}, menu.overrideApp.defaultConfig, menu.overrideApp.userConfig));
             }
-          } else if (!hasFallbackValue) {
-            return false;
-          }
-        }
-        if ((!useResolve || resolvePolicy !== "eager") && contextConf.value !== undefined) {
-          yield storyboardContextWrapper.waitForUsedContext(contextConf.value);
-          // If the context has no resolve, just use its `value`.
-          // Or if the resolve is ignored or lazy, use its `value` as a fallback.
-          value = computeRealValue(contextConf.value, mergedContext, true);
+            newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
+              overrideApp: menu.overrideApp,
+              appendI18nNamespace: menuWithI18n.get(menu)
+            });
+          } else {
+            var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+            newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
+              overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
+              appendI18nNamespace: menuWithI18n.get(menu)
+            });
+          }
+        }
+        var usedActions = brickUtils.scanPermissionActionsInAny(menu.itemsResolve);
+        yield validatePermissions(usedActions);
+        yield _internalApiGetResolver().resolveOne("reference", _objectSpread__default["default"]({
+          transform: "items",
+          transformMapArray: false
+        }, menu.itemsResolve), itemsConf, null, newContext);
+        menu.items = itemsConf.items;
+        if ((_menu$itemsResolve = menu.itemsResolve) !== null && _menu$itemsResolve !== void 0 && _menu$itemsResolve.args) {
+          var _menu$itemsResolve2;
+          return !attemptToVisit((_menu$itemsResolve2 = menu.itemsResolve) === null || _menu$itemsResolve2 === void 0 ? void 0 : _menu$itemsResolve2.args, ["QUERY", "PATH"]);
         }
       }
-      resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, load, resolvePolicy === "eager", loading, resolvePolicy === "async", useResolve, trackConditionalResolve);
       return true;
     });
-    return _resolveNormalStoryboardContext.apply(this, arguments);
+    return _loadDynamicMenuItems.apply(this, arguments);
   }
-  function syncResolveStoryboardContext(contextConf, mergedContext, storyboardContextWrapper, brick) {
-    if (!looseCheckIf$1(contextConf, mergedContext)) {
-      return false;
-    }
-    if (contextConf.resolve) {
-      throw new Error("resolve is not allowed here");
-    }
-    var value = getDefinedTemplateState(!!storyboardContextWrapper.tplContextId, contextConf, brick);
-    if (value === undefined) {
-      value = computeRealValue(contextConf.value, mergedContext, true);
-    }
-    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick);
-    return true;
+  function walkMenuItems(menuItems) {
+    return menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(
+    // `if` is already evaluated.
+    looseCheckIfOfComputed).map(item => {
+      var children = walkMenuItems(item.children || item.items);
+      return item.type === "group" ? {
+        type: "group",
+        childLayout: item.childLayout,
+        title: item.text || item.title,
+        items: children,
+        groupId: item.groupId,
+        groupFrom: item.groupFrom
+      } : children !== null && children !== void 0 && children.length ? {
+        type: "subMenu",
+        childLayout: item.childLayout,
+        title: item.text || item.title,
+        icon: item.icon,
+        items: children,
+        defaultExpanded: item.defaultExpanded
+      } : item;
+    });
   }
-  function getDefinedTemplateState(isTemplateState, contextConf, brick) {
-    if (isTemplateState && brick.properties && brickUtils.hasOwnProperty(brick.properties, contextConf.name)) {
-      return brick.properties[contextConf.name];
-    }
+  function processMenu(_x15, _x16, _x17, _x18, _x19) {
+    return _processMenu.apply(this, arguments);
   }
-  function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, load, loaded, loading, async, useResolve, trackConditionalResolve) {
-    var newContext = {
-      type: "free-variable",
-      value,
-      // This is required for tracking context, even if no `onChange` is specified.
-      eventTarget: new EventTarget$1(),
-      useResolve,
-      load,
-      loaded,
-      loading,
-      async,
-      deps: []
-    };
-    var eventName = storyboardContextWrapper.formContextId ? "formstate.change" : storyboardContextWrapper.tplContextId ? "state.change" : "context.change";
-    if (contextConf.onChange) {
-      for (var handler of [].concat(contextConf.onChange)) {
-        newContext.eventTarget.addEventListener(eventName, listenerFactory(handler, mergedContext, brick));
+  function _processMenu() {
+    _processMenu = _asyncToGenerator__default["default"](function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
+      var _yield$fetchMenuById = yield fetchMenuById(menuId, kernel, isPreFetch),
+        {
+          items,
+          app
+        } = _yield$fetchMenuById,
+        restMenuData = _objectWithoutProperties__default["default"](_yield$fetchMenuById, _excluded3);
+      var usedActions = brickUtils.scanPermissionActionsInAny([items, restMenuData]);
+      yield validatePermissions(usedActions);
+      var appsRequireI18nFulfilled = new Set();
+      var rootAppId = app[0].appId;
+      if (rootAppId !== context.app.id && !restMenuData[symbolMenuI18nNamespace]) {
+        appsRequireI18nFulfilled.add(rootAppId);
       }
-    }
-    newContext.eventTarget.addEventListener(eventName, e => {
-      storyboardContextWrapper.notifyRealTimeDataChange(contextConf.name, e.detail);
+      collectAppsRequireI18nFulfilled(items, context.app.id, appsRequireI18nFulfilled);
+      yield kernel.fulfilStoryboardI18n([...appsRequireI18nFulfilled]);
+      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
+        items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
+      });
+      return {
+        title: yield processMenuTitle(menuData),
+        icon: menuData.icon,
+        link: menuData.link,
+        menuItems: walkMenuItems(menuData.items),
+        defaultCollapsed: menuData.defaultCollapsed || hasSubMenu,
+        defaultCollapsedBreakpoint: menuData.defaultCollapsedBreakpoint
+      };
     });
-    if (contextConf.track) {
-      var isTemplateState = !!storyboardContextWrapper.tplContextId;
-      var isFormState = !!storyboardContextWrapper.formContextId;
-      // Track its dependencies and auto update when each of them changed.
-      var deps = (isFormState ? brickUtils.trackUsedFormState : isTemplateState ? brickUtils.trackUsedState : brickUtils.trackUsedContext)(trackConditionalResolve ? [contextConf.resolve, contextConf.value] : load ? contextConf.resolve : contextConf.value);
-      !load && (newContext.deps = deps);
-      for (var dep of deps) {
-        var _eventTarget;
-        var ctx = storyboardContextWrapper.get().get(dep);
-        ctx === null || ctx === void 0 ? void 0 : (_eventTarget = ctx.eventTarget) === null || _eventTarget === void 0 ? void 0 : _eventTarget.addEventListener(eventName, batchAddListener(() => {
-          newContext.useResolve = trackConditionalResolve ? looseCheckIf$1(contextConf.resolve, mergedContext) : !!load;
-          if (newContext.useResolve) {
-            storyboardContextWrapper.updateValue(contextConf.name, {
-              cache: "default"
-            }, "refresh");
-          } else {
-            storyboardContextWrapper.updateValue(contextConf.name, computeRealValue(contextConf.value, mergedContext, true), "replace");
-          }
-        }, contextConf, storyboardContextWrapper));
+    return _processMenu.apply(this, arguments);
+  }
+  function collectAppsRequireI18nFulfilled(items, contextAppId, appIds) {
+    function collect(items) {
+      for (var _ref of items) {
+        var {
+            children
+          } = _ref,
+          rest = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+        var overrideAppId = rest[symbolAppId];
+        if (!rest[symbolMenuI18nNamespace] && overrideAppId !== contextAppId && !appIds.has(overrideAppId) && attemptToVisit(rest, ["I18N"])) {
+          appIds.add(overrideAppId);
+        }
+        children && collect(children);
       }
     }
-    storyboardContextWrapper.set(contextConf.name, newContext);
+    collect(items);
   }
-  function batchAddListener(listener, contextConf, storyboardContextWrapper) {
-    return event => {
-      if (storyboardContextWrapper.batchUpdate && storyboardContextWrapper.batchUpdateContextsNames.includes(contextConf.name)) {
-        return;
+  function computeMenuItemsWithOverrideApp(items, context, kernel) {
+    return Promise.all(items.map( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator__default["default"](function* (_ref2) {
+        var {
+            children
+          } = _ref2,
+          rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
+        return _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
+          children: children && (yield computeMenuItemsWithOverrideApp(children, context, kernel))
+        });
+      });
+      return function (_x20) {
+        return _ref3.apply(this, arguments);
+      };
+    }()));
+  }
+  function processMenuTitle(_x21) {
+    return _processMenuTitle.apply(this, arguments);
+  }
+  function _processMenuTitle() {
+    _processMenuTitle = _asyncToGenerator__default["default"](function* (menuData) {
+      if (menuData.title || _.isEmpty(menuData.titleDataSource)) {
+        return menuData.title;
       }
-      listener(event);
-    };
+      var cacheKey = JSON.stringify(menuData.titleDataSource);
+      if (menuTitleCache.has(cacheKey)) {
+        return menuTitleCache.get(cacheKey);
+      }
+      var {
+        objectId,
+        instanceId,
+        attributeId
+      } = menuData.titleDataSource;
+      var attr = attributeId !== null && attributeId !== void 0 ? attributeId : "name";
+      var instanceData = yield InstanceApi_getDetail(objectId, instanceId, {
+        fields: attr
+      });
+      var title;
+      if (attributeId === "#showKey" && Array.isArray(instanceData[attr])) {
+        var [primary, ...rest] = instanceData[attr];
+        title = rest.length > 0 ? "".concat(primary, "(").concat(rest.join(","), ")") : String(primary);
+      } else {
+        title = String(instanceData[attr]);
+      }
+      menuTitleCache.set(cacheKey, title);
+      return title;
+    });
+    return _processMenuTitle.apply(this, arguments);
+  }
+  function clearMenuTitleCache() {
+    menuTitleCache.clear();
+  }
+  function clearMenuCache() {
+    menuCache.clear();
+  }
+  function reorderMenu(menuData) {
+    menuData.items = reorderMenuItems(menuData.items);
+  }
+  function reorderMenuItems(list) {
+    return sortMenuItems(list).map(item => _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+      children: reorderMenuItems(item.children)
+    }));
+  }
+  function sortMenuItems(list) {
+    return _.sortBy(list, item => {
+      var _item$sort;
+      return (_item$sort = item.sort) !== null && _item$sort !== void 0 ? _item$sort : -Infinity;
+    });
   }
 
-  var tplContextMap = new Map();
-  class CustomTemplateContext {
-    constructor(brick, renderId) {
-      _defineProperty__default["default"](this, "variables", void 0);
-      _defineProperty__default["default"](this, "state", void 0);
-      _defineProperty__default["default"](this, "id", _.uniqueId("tpl-ctx-"));
-      this.brick = brick;
-      tplContextMap.set(this.id, this);
-      this.state = new StoryboardContextWrapper(this.id, undefined, renderId);
-      brick.tplContextId = this.id;
-    }
-    setVariables(variables) {
-      this.variables = variables;
-      Object.freeze(variables);
-    }
-    getVariables() {
-      var {
-        element
-      } = this.brick;
-      if (element) {
-        return Object.fromEntries(Object.keys(this.variables).map(prop => [prop, element[prop]]));
+  /**
+   * If the menu contains evaluations which use `APP` or `I18N`,
+   * we have to override app in context when computing real values.
+   */
+  function attemptToVisit(data, globals) {
+    var memo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new WeakSet();
+    if (typeof data === "string") {
+      if (brickUtils.isEvaluable(data)) {
+        if (globals.some(key => data.includes(key))) {
+          var {
+            attemptToVisitGlobals
+          } = brickUtils.preevaluate(data);
+          return globals.some(key => attemptToVisitGlobals.has(key));
+        }
+      } else if (globals.includes("APP")) {
+        return /\${\s*APP\s*\./.test(data);
       }
-      return this.variables;
-    }
-    getBrick() {
-      return this.brick;
+    } else if (brickUtils.isObject(data)) {
+      // Avoid call stack overflow.
+      // istanbul ignore next
+      if (memo.has(data)) {
+        return false;
+      }
+      memo.add(data);
+      return (Array.isArray(data) ? data : Object.values(data)).some(item => attemptToVisit(item, globals, memo));
     }
+    return false;
   }
-  function getCustomTemplateContext(tplContextId) {
-    return tplContextMap.get(tplContextId);
+  function computeRealValueWithOverrideApp(_x22, _x23, _x24, _x25) {
+    return _computeRealValueWithOverrideApp.apply(this, arguments);
   }
-  function getCustomContextTriggerListByLifecycle(lifecycle) {
-    return [...tplContextMap.values()].map(tplContext => tplContext.state.getContextTriggerSetByLifecycle(lifecycle)).filter(trigger => trigger.length > 0).flat(1);
+  function _computeRealValueWithOverrideApp() {
+    _computeRealValueWithOverrideApp = _asyncToGenerator__default["default"](function* (data, overrideAppId, context, kernel) {
+      if ("titleDataSource" in data && brickUtils.isObject(data.titleDataSource) && Object.entries(data.titleDataSource).every(_ref7 => {
+        var [key, value] = _ref7;
+        return value === null || value === "";
+      })) {
+        delete data.titleDataSource;
+      }
+      if ("if" in data && data.if === null) {
+        delete data.if;
+      }
+      if ("to" in data && data.to && !brickUtils.isEvaluable(data.to)) {
+        var yaml = pipes.pipes.yaml(data.to);
+        if (brickUtils.isObject(yaml) && ["pathname", "search", "hash"].some(key => brickUtils.hasOwnProperty(yaml, key))) {
+          data.to = yaml;
+        }
+      }
+      var newContext = context;
+      if (overrideAppId !== context.app.id && attemptToVisit(data, ["APP", "I18N", "IMG"])) {
+        if (window.STANDALONE_MICRO_APPS) {
+          if (data[symbolOverrideApp]) {
+            data[symbolOverrideApp].config = brickUtils.deepFreeze(_.merge({}, data[symbolOverrideApp].defaultConfig, data[symbolOverrideApp].userConfig));
+          }
+          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
+            overrideApp: data[symbolOverrideApp],
+            appendI18nNamespace: data[symbolMenuI18nNamespace]
+          });
+        } else {
+          var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
+            overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
+            appendI18nNamespace: data[symbolMenuI18nNamespace]
+          });
+        }
+      }
+      var processors = brickUtils.scanProcessorsInAny(data);
+      yield kernel.loadDynamicBricks([], processors);
+      yield kernel.router.waitForUsedContext(data);
+      return computeRealValue(data, newContext, true, {
+        ignoreSymbols: true
+      });
+    });
+    return _computeRealValueWithOverrideApp.apply(this, arguments);
   }
 
   var MediaBreakpoint;
@@ -2441,1027 +2858,610 @@
       return;
     }
     if (typeof raw !== "string") {
-      // If the `raw` is not a string, it must be a pre-evaluated object.
-      // Then fulfil the context, and restore the original `raw`.
-      runtimeContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, raw[symbolForContext]), runtimeContext);
-      raw = raw[symbolForRaw];
-    }
-
-    // A `SyntaxError` maybe thrown.
-    var precooked;
-    try {
-      precooked = brickUtils.preevaluate(raw);
-    } catch (error) {
-      var message = "".concat(error.message, ", in \"").concat(raw, "\"");
-      if (options.isReEvaluation) {
-        devtoolsHookEmit("re-evaluation", {
-          id: options.evaluationId,
-          detail: {
-            raw,
-            context: {}
-          },
-          error: message
-        });
-        return;
-      } else {
-        var errorConstructor = getCookErrorConstructor(error);
-        throw new errorConstructor(message);
-      }
-    }
-    var globalVariables = {};
-    var attemptToVisitGlobals = precooked.attemptToVisitGlobals;
-    var attemptToVisitEvent = attemptToVisitGlobals.has("EVENT");
-    var attemptToVisitData = attemptToVisitGlobals.has("DATA");
-    var attemptToVisitTpl = attemptToVisitGlobals.has("TPL");
-    var attemptToVisitState = attemptToVisitGlobals.has("STATE");
-    var attemptToVisitFormState = attemptToVisitGlobals.has("FORM_STATE");
-    var attemptToVisitTplOrState = attemptToVisitTpl || attemptToVisitState;
-
-    // Ignore evaluating if `event` is missing in context.
-    // Since it should be evaluated during events handling.
-    var missingEvent = options.lazy === true;
-    if (attemptToVisitEvent) {
-      if (brickUtils.hasOwnProperty(runtimeContext, "event")) {
-        globalVariables.EVENT = runtimeContext.event;
-      } else {
-        // Let's see if pre-evaluation is required (store the `data` in context).
-        missingEvent = true;
-      }
-    }
-    var missingTplOrState = attemptToVisitTplOrState && !brickUtils.hasOwnProperty(runtimeContext, "tplContextId");
-    var missingData = attemptToVisitData && !brickUtils.hasOwnProperty(runtimeContext, "data");
-    var rawWithContext = Object.keys(runtimeContext).length > 0 ? {
-      [symbolForRaw]: raw,
-      [symbolForContext]: runtimeContext
-    } : raw;
-
-    // Since `EVENT`, `DATA`, `TPL` and `STATE` are provided in different context,
-    // whenever missing one of them, memorize the current context for later consuming.
-    if (missingEvent || missingData || missingTplOrState) {
-      return rawWithContext;
-    }
-    if (attemptToVisitData) {
-      globalVariables.DATA = runtimeContext.data;
-    }
-    if (attemptToVisitTplOrState && runtimeContext.tplContextId) {
-      var tplContext = getCustomTemplateContext(runtimeContext.tplContextId);
-      if (attemptToVisitTpl) {
-        globalVariables.TPL = tplContext.getVariables();
-      }
-      if (attemptToVisitState) {
-        globalVariables.STATE = getDynamicReadOnlyProxy({
-          get(target, key) {
-            return tplContext.state.getValue(key);
-          },
-          ownKeys() {
-            return Array.from(tplContext.state.get().keys());
-          }
-        });
-      }
-    }
-    if (attemptToVisitFormState && runtimeContext.formContextId) {
-      var formContext = getCustomFormContext(runtimeContext.formContextId);
-      globalVariables.FORM_STATE = getDynamicReadOnlyProxy({
-        get(target, key) {
-          return formContext.formState.getValue(key);
-        },
-        ownKeys() {
-          return Array.from(formContext.formState.get().keys());
-        }
-      });
-    }
-    var internalContext = _internalApiGetCurrentContext();
-    var mergedContext = {};
-
-    // Use runtime context over internal context.
-    // Internal context such as `match`, maybe change after `history.push`.
-    // So we prefer memoized runtime context.
-    for (var key of ["query", "match", "hash", "pathname", "app", "segues"]) {
-      mergedContext[key] = (brickUtils.hasOwnProperty(runtimeContext, key) ? runtimeContext : internalContext)[key];
-    }
-    var {
-      app: currentApp,
-      query,
-      match,
-      hash,
-      pathname,
-      segues
-    } = mergedContext;
-    var {
-      sys,
-      flags,
-      storyboardContext
-    } = internalContext;
-    var app = (_runtimeContext$overr = runtimeContext.overrideApp) !== null && _runtimeContext$overr !== void 0 ? _runtimeContext$overr : currentApp;
-    function getIndividualGlobal(variableName) {
-      switch (variableName) {
-        case "ALIAS":
-          return {
-            getUrl: getUrlByAliasFactory(app)
-          };
-        case "ANCHOR":
-          return hash ? hash.substr(1) : null;
-        case "APP":
-          return _objectSpread__default["default"](_objectSpread__default["default"]({}, _.cloneDeep(app)), {}, {
-            getMenu
-          });
-        case "CTX":
-          return getDynamicReadOnlyProxy({
-            get(target, key) {
-              var _item$brick$element;
-              var item = storyboardContext.get(key);
-              return !item ? item : item.type === "brick-property" ? (_item$brick$element = item.brick.element) === null || _item$brick$element === void 0 ? void 0 : _item$brick$element[item.prop] : item.value;
-            },
-            ownKeys() {
-              return Array.from(storyboardContext.keys());
-            }
-          });
-        case "FLAGS":
-          return getReadOnlyProxy(flags);
-        case "HASH":
-          return hash;
-        case "PATH_NAME":
-          return pathname;
-        case "INSTALLED_APPS":
-          return {
-            has: (appId, matchVersion) => getRuntime().hasInstalledApp(appId, matchVersion)
-          };
-        case "LOCAL_STORAGE":
-          return {
-            getItem: getItemFactory("local")
-          };
-        case "MISC":
-          return getRuntime().getMiscSettings();
-        case "PARAMS":
-          return new URLSearchParams(query);
-        case "PATH":
-          return getReadOnlyProxy(match.params);
-        case "PROCESSORS":
-          return getDynamicReadOnlyProxy({
-            get(target, key) {
-              var pkg = customProcessorRegistry.get(key);
-              if (!pkg) {
-                throw new Error("'PROCESSORS.".concat(key, "' is not registered! Have you installed the relevant brick package of '").concat(key.replace(/[A-Z]/g, m => "-".concat(m.toLowerCase())), "-NB'?"));
-              }
-              return getDynamicReadOnlyProxy({
-                get(t, k) {
-                  return pkg.get(k);
-                },
-                ownKeys() {
-                  return Array.from(pkg.keys());
-                }
-              });
-            },
-            ownKeys() {
-              return Array.from(customProcessorRegistry.keys());
-            }
-          });
-        case "QUERY":
-          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.get(key)]));
-        case "QUERY_ARRAY":
-          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.getAll(key)]));
-        case "SEGUE":
-          return {
-            getUrl: getUrlBySegueFactory(app, segues)
-          };
-        case "SESSION_STORAGE":
-          return {
-            getItem: getItemFactory("session")
-          };
-        case "SYS":
-          return getReadOnlyProxy(sys);
-        case "MEDIA":
-          return getReadOnlyProxy(getMedia());
-        case "__WIDGET_FN__":
-          return widgetFunctions;
-        case "__WIDGET_IMG__":
-          return widgetImagesFactory;
-        case "__WIDGET_I18N__":
-          return widgetI18nFactory;
-      }
-    }
-    for (var variableName of attemptToVisitGlobals) {
-      var variable = getIndividualGlobal(variableName);
-      if (variable !== undefined) {
-        globalVariables[variableName] = variable;
-      }
+      // If the `raw` is not a string, it must be a pre-evaluated object.
+      // Then fulfil the context, and restore the original `raw`.
+      runtimeContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, raw[symbolForContext]), runtimeContext);
+      raw = raw[symbolForRaw];
     }
-    Object.assign(globalVariables, getGeneralGlobals(precooked.attemptToVisitGlobals, {
-      storyboardFunctions,
-      app,
-      appendI18nNamespace: runtimeContext.appendI18nNamespace
-    }));
+
+    // A `SyntaxError` maybe thrown.
+    var precooked;
     try {
-      var result = brickUtils.cook(precooked.expression, precooked.source, {
-        globalVariables: supply(precooked.attemptToVisitGlobals, globalVariables)
-      });
-      var detail = {
-        raw,
-        context: globalVariables,
-        result
-      };
-      if (options.isReEvaluation) {
-        devtoolsHookEmit("re-evaluation", {
-          id: options.evaluationId,
-          detail
-        });
-      } else {
-        devtoolsHookEmit("evaluation", detail);
-      }
-      return result;
+      precooked = brickUtils.preevaluate(raw);
     } catch (error) {
-      var _message = "".concat(error.message, ", in \"").concat(raw, "\"");
+      var message = "".concat(error.message, ", in \"").concat(raw, "\"");
       if (options.isReEvaluation) {
         devtoolsHookEmit("re-evaluation", {
           id: options.evaluationId,
           detail: {
             raw,
-            context: globalVariables
+            context: {}
           },
-          error: _message
+          error: message
         });
+        return;
       } else {
-        var _errorConstructor = getCookErrorConstructor(error);
-        throw new _errorConstructor(_message);
+        var errorConstructor = getCookErrorConstructor(error);
+        throw new errorConstructor(message);
       }
     }
-  }
-
-  function isBasicProperty(propRef) {
-    return !!propRef.refProperty;
-  }
-  function isTransformableProperty(propRef) {
-    return !!propRef.refTransform;
-  }
-  function isMergeableProperty(propRef) {
-    return !!propRef.mergeProperty;
-  }
-  function isRefProperty(propRef) {
-    return !!propRef.ref;
-  }
-  function isVariableProperty(propRef) {
-    return !!propRef.asVariable;
-  }
-
-  var customTemplateRegistry = new Map();
-  var appRegistered = new Set();
-  var symbolForComputedPropsFromProxy = Symbol.for("tpl.computedPropsFromProxy");
-  var symbolForRefForProxy = Symbol.for("tpl.refForProxy");
-  var symbolForTplContextId = Symbol.for("tpl.contextId");
+    var globalVariables = {};
+    var attemptToVisitGlobals = precooked.attemptToVisitGlobals;
+    var attemptToVisitEvent = attemptToVisitGlobals.has("EVENT");
+    var attemptToVisitData = attemptToVisitGlobals.has("DATA");
+    var attemptToVisitTpl = attemptToVisitGlobals.has("TPL");
+    var attemptToVisitState = attemptToVisitGlobals.has("STATE");
+    var attemptToVisitFormState = attemptToVisitGlobals.has("FORM_STATE");
+    var attemptToVisitTplOrState = attemptToVisitTpl || attemptToVisitState;
 
-  function propertyMerge(conf, value, object) {
-    return propertyMergeAll(conf.$$mergeBase, Object.fromEntries(conf.$$mergeBase.proxies.map(proxy => [proxy.$$reversedRef, proxy === conf ? value : object[proxy.$$reversedRef]])));
-  }
-  function propertyMergeAll(mergeBase, object) {
-    if (mergeBase.mergeType === "array") {
-      return propertyMergeAllOfArray(mergeBase, object);
-    }
-    if (mergeBase.mergeType === "object") {
-      return propertyMergeAllOfObject(mergeBase, object);
-    }
-    // istanbul ignore next: should never reach
-    throw new TypeError("unsupported mergeType: \"".concat(mergeBase.mergeType, "\""));
-  }
-  function propertyMergeAllOfArray(_ref, object) {
-    var _$1, _proxy$mergeArgs;
-    var {
-      baseValue,
-      context,
-      proxies
-    } = _ref;
-    // Use an approach like template-literal's quasis:
-    // `quasi0${0}quais1${1}quasi2...`
-    // Every quasi can be merged with multiple items.
-    var computedBaseValue = Array.isArray(baseValue) ? computeRealValue(baseValue, context, true, {
-      $$lazyForUseBrick: true
-    }) : [];
-    var quasis = [];
-    var size = computedBaseValue.length + 1;
-    for (var i = 0; i < size; i += 1) {
-      quasis.push([]);
-    }
-    for (var proxy of proxies) {
-      var position = void 0;
-      switch (proxy.mergeMethod) {
-        case "append":
-          position = computedBaseValue.length;
-          break;
-        case "prepend":
-          position = 0;
-          break;
-        case "insertAt":
-          // Defaults to `-1`.
-          position = (_$1 = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _$1 !== void 0 ? _$1 : -1;
-          if (position < 0) {
-            // It's counted from the end if position is negative.
-            position += quasis.length;
-          }
-          position = _.clamp(position, 0, computedBaseValue.length);
-          break;
-        // istanbul ignore next: should never reach
-        default:
-          throw new TypeError("unsupported mergeMethod: \"".concat(proxy.mergeMethod, "\" for mergeType \"").concat(proxy.mergeType, "\""));
-      }
-      var patchValue = object[proxy.$$reversedRef];
-      if (!Array.isArray(patchValue)) {
-        patchValue = [];
+    // Ignore evaluating if `event` is missing in context.
+    // Since it should be evaluated during events handling.
+    var missingEvent = options.lazy === true;
+    if (attemptToVisitEvent) {
+      if (brickUtils.hasOwnProperty(runtimeContext, "event")) {
+        globalVariables.EVENT = runtimeContext.event;
+      } else {
+        // Let's see if pre-evaluation is required (store the `data` in context).
+        missingEvent = true;
       }
-      quasis[position].push(...patchValue);
     }
-    return quasis.flatMap((item, index) => index < computedBaseValue.length ? item.concat(computedBaseValue[index]) : item);
-  }
-  function propertyMergeAllOfObject(_ref2, object) {
-    var {
-      baseValue,
-      proxies,
-      context
-    } = _ref2;
-    var computedBaseValue = brickUtils.isObject(baseValue) ? computeRealValue(baseValue, context, true) : {};
-    return proxies.reduce((acc, proxy) => {
-      switch (proxy.mergeMethod) {
-        case "extend":
-          return _objectSpread__default["default"](_objectSpread__default["default"]({}, acc), object[proxy.$$reversedRef]);
-        // istanbul ignore next: should never reach
-        default:
-          throw new TypeError("unsupported mergeMethod: \"".concat(proxy.mergeMethod, "\" for mergeType \"").concat(proxy.mergeType, "\""));
-      }
-    }, computedBaseValue);
-  }
-
-  function setupTemplateProxy(proxyContext, ref, slots) {
-    var computedPropsFromProxy = {};
-    var refForProxy;
-    var {
-      reversedProxies,
-      templateProperties,
-      externalSlots,
-      templateContextId,
-      proxyBrick
-    } = proxyContext;
-    if (ref && reversedProxies) {
-      refForProxy = {};
-      proxyBrick.proxyRefs.set(ref, refForProxy);
-
-      // Reversed proxies are used for expand storyboard before rendering page.
-      if (reversedProxies.properties.has(ref)) {
-        Object.assign(computedPropsFromProxy, Object.fromEntries(reversedProxies.properties.get(ref).flatMap(propRef => {
-          // `propValue` is computed.
-          var propValue = templateProperties === null || templateProperties === void 0 ? void 0 : templateProperties[propRef.$$reversedRef];
-          if (isTransformableProperty(propRef)) {
-            return Object.entries(preprocessTransformProperties({
-              [propRef.$$reversedRef]: propValue
-            }, propRef.refTransform));
-          }
-          if (isBasicProperty(propRef)) {
-            return [[propRef.refProperty, propValue]];
-          }
-          // Ignore Variable properties.
-          // And mergeable properties are processed later.
-          return [];
-        }).filter(propRef => propRef[1] !== undefined)));
-
-        // Brick properties can be merged multiple times.
-        if (reversedProxies.mergeBases.has(ref)) {
-          Object.assign(computedPropsFromProxy, Object.fromEntries(Array.from(reversedProxies.mergeBases.get(ref).entries()).map(_ref => {
-            var [mergeProperty, mergeBase] = _ref;
-            return [mergeProperty, propertyMergeAll(mergeBase, templateProperties !== null && templateProperties !== void 0 ? templateProperties : {})];
-          }).filter(item => item[1] !== undefined)));
-        }
-      }
+    var missingTplOrState = attemptToVisitTplOrState && !brickUtils.hasOwnProperty(runtimeContext, "tplContextId");
+    var missingData = attemptToVisitData && !brickUtils.hasOwnProperty(runtimeContext, "data");
+    var rawWithContext = Object.keys(runtimeContext).length > 0 ? {
+      [symbolForRaw]: raw,
+      [symbolForContext]: runtimeContext
+    } : raw;
 
-      // Use an approach like template-literal's quasis:
-      // `quasi0${0}quais1${1}quasi2...`
-      // Every quasi (indexed by `refPosition`) can be slotted with multiple bricks.
-      var quasisMap = new Map();
-      if (reversedProxies.slots.has(ref)) {
-        for (var item of reversedProxies.slots.get(ref)) {
-          var _item$refPosition, _externalSlots$item$$, _externalSlots$item$$2;
-          if (!quasisMap.has(item.refSlot)) {
-            var quasis = [];
-            // The size of quasis should be the existed slotted bricks' size plus one.
-            var size = brickUtils.hasOwnProperty(slots, item.refSlot) ? slots[item.refSlot].bricks.length + 1 : 1;
-            for (var i = 0; i < size; i += 1) {
-              quasis.push([]);
-            }
-            quasisMap.set(item.refSlot, quasis);
-          }
-          var expandableSlot = quasisMap.get(item.refSlot);
-          var refPosition = (_item$refPosition = item.refPosition) !== null && _item$refPosition !== void 0 ? _item$refPosition : -1;
-          expandableSlot[_.clamp(refPosition < 0 ? expandableSlot.length + refPosition : refPosition, 0, expandableSlot.length - 1)].push(...((_externalSlots$item$$ = externalSlots === null || externalSlots === void 0 ? void 0 : (_externalSlots$item$$2 = externalSlots[item.$$reversedRef]) === null || _externalSlots$item$$2 === void 0 ? void 0 : _externalSlots$item$$2.bricks) !== null && _externalSlots$item$$ !== void 0 ? _externalSlots$item$$ : []));
-        }
-      }
-      var _loop = function (slotName, _quasis) {
-        if (!brickUtils.hasOwnProperty(slots, slotName)) {
-          slots[slotName] = {
-            type: "bricks",
-            bricks: []
-          };
-        }
-        var slotConf = slots[slotName];
-        slotConf.bricks = _quasis.flatMap((bricks, index) => index < slotConf.bricks.length ? bricks.concat(slotConf.bricks[index]) : bricks);
-        if (slotConf.bricks.length === 0) {
-          delete slots[slotName];
-        }
-      };
-      for (var [slotName, _quasis] of quasisMap.entries()) {
-        _loop(slotName, _quasis);
-      }
+    // Since `EVENT`, `DATA`, `TPL` and `STATE` are provided in different context,
+    // whenever missing one of them, memorize the current context for later consuming.
+    if (missingEvent || missingData || missingTplOrState) {
+      return rawWithContext;
     }
-    return {
-      [symbolForComputedPropsFromProxy]: computedPropsFromProxy,
-      [symbolForRefForProxy]: refForProxy,
-      [symbolForTplContextId]: templateContextId
-    };
-  }
-
-  var _excluded$8 = ["properties", "slots"];
-  function setupUseBrickInTemplate(props, proxyContext) {
-    function walk(props) {
-      if (Array.isArray(props)) {
-        return props.map(walk);
+    if (attemptToVisitData) {
+      globalVariables.DATA = runtimeContext.data;
+    }
+    if (attemptToVisitTplOrState && runtimeContext.tplContextId) {
+      var tplContext = getCustomTemplateContext(runtimeContext.tplContextId);
+      if (attemptToVisitTpl) {
+        globalVariables.TPL = tplContext.getVariables();
       }
-      if (!brickUtils.isObject(props) || !isPlainObject(props)) {
-        return props;
+      if (attemptToVisitState) {
+        globalVariables.STATE = getDynamicReadOnlyProxy({
+          get(target, key) {
+            return tplContext.state.getValue(key);
+          },
+          ownKeys() {
+            return Array.from(tplContext.state.get().keys());
+          }
+        });
       }
-      return Object.fromEntries(Object.entries(props).map(_ref => {
-        var [key, value] = _ref;
-        return brickUtils.isObject(value) && key === "useBrick" ? Array.isArray(value) ? [key, value.map(setup)] : [key, setup(value)] : [key, walk(value)];
-      }).concat(Object.getOwnPropertySymbols(props).map(k => [k, props[k]])));
     }
-    function setup(item) {
-      var {
-          properties,
-          slots: originalSlots
-        } = item,
-        restConf = _objectWithoutProperties__default["default"](item, _excluded$8);
-      var slots = Object.fromEntries(Object.entries(originalSlots !== null && originalSlots !== void 0 ? originalSlots : {}).map(_ref2 => {
-        var _slotConf$bricks;
-        var [slotName, slotConf] = _ref2;
-        return [slotName, {
-          type: "bricks",
-          bricks: ((_slotConf$bricks = slotConf.bricks) !== null && _slotConf$bricks !== void 0 ? _slotConf$bricks : []).map(setup)
-        }];
-      }));
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, restConf), {}, {
-        properties: walk(properties),
-        slots
-      }, setupTemplateProxy(proxyContext, restConf.ref, slots));
+    if (attemptToVisitFormState && runtimeContext.formContextId) {
+      var formContext = getCustomFormContext(runtimeContext.formContextId);
+      globalVariables.FORM_STATE = getDynamicReadOnlyProxy({
+        get(target, key) {
+          return formContext.formState.getValue(key);
+        },
+        ownKeys() {
+          return Array.from(formContext.formState.get().keys());
+        }
+      });
     }
-    return walk(props);
-  }
-  function isPlainObject(object) {
-    return Object.prototype.toString.call(object) === "[object Object]";
-  }
+    var internalContext = _internalApiGetCurrentContext();
+    var mergedContext = {};
 
-  var computeRealValue = (value, context, injectDeep, internalOptions) => {
-    var preEvaluated = isPreEvaluated(value);
-    if (preEvaluated || typeof value === "string") {
-      // For `useBrick`, some fields such as `properties`/`transform`/`events`/`if`,
-      // are kept and to be evaluated later.
-      var lazy = (internalOptions === null || internalOptions === void 0 ? void 0 : internalOptions.$$lazyForUseBrick) && isLazyContentInUseBrick(internalOptions.$$stateOfUseBrick);
-      var result;
-      var dismissRecursiveMarkingInjected = lazy;
-      if (preEvaluated || brickUtils.isEvaluable(value)) {
-        var runtimeContext = {};
-        if (context) {
-          var keys = ["event", "tplContextId", "overrideApp", "appendI18nNamespace", "formContextId", "query", "match", "app", "segues"];
-          for (var key of keys) {
-            if (context[key]) {
-              runtimeContext[key] = context[key];
+    // Use runtime context over internal context.
+    // Internal context such as `match`, maybe change after `history.push`.
+    // So we prefer memoized runtime context.
+    for (var key of ["query", "match", "hash", "pathname", "app", "segues"]) {
+      mergedContext[key] = (brickUtils.hasOwnProperty(runtimeContext, key) ? runtimeContext : internalContext)[key];
+    }
+    var {
+      app: currentApp,
+      query,
+      match,
+      hash,
+      pathname,
+      segues
+    } = mergedContext;
+    var {
+      sys,
+      flags,
+      storyboardContext
+    } = internalContext;
+    var app = (_runtimeContext$overr = runtimeContext.overrideApp) !== null && _runtimeContext$overr !== void 0 ? _runtimeContext$overr : currentApp;
+    function getIndividualGlobal(variableName) {
+      switch (variableName) {
+        case "ALIAS":
+          return {
+            getUrl: getUrlByAliasFactory(app)
+          };
+        case "ANCHOR":
+          return hash ? hash.substr(1) : null;
+        case "APP":
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, _.cloneDeep(app)), {}, {
+            getMenu
+          });
+        case "CTX":
+          return getDynamicReadOnlyProxy({
+            get(target, key) {
+              var _item$brick$element;
+              var item = storyboardContext.get(key);
+              return !item ? item : item.type === "brick-property" ? (_item$brick$element = item.brick.element) === null || _item$brick$element === void 0 ? void 0 : _item$brick$element[item.prop] : item.value;
+            },
+            ownKeys() {
+              return Array.from(storyboardContext.keys());
             }
-          }
-          var simpleKeys = ["hash", "pathname"];
-          for (var _key of simpleKeys) {
-            if (brickUtils.hasOwnProperty(context, _key)) {
-              runtimeContext[_key] = context[_key];
+          });
+        case "FLAGS":
+          return getReadOnlyProxy(flags);
+        case "HASH":
+          return hash;
+        case "PATH_NAME":
+          return pathname;
+        case "INSTALLED_APPS":
+          return {
+            has: (appId, matchVersion) => getRuntime().hasInstalledApp(appId, matchVersion)
+          };
+        case "LOCAL_STORAGE":
+          return {
+            getItem: getItemFactory("local")
+          };
+        case "MISC":
+          return getRuntime().getMiscSettings();
+        case "PARAMS":
+          return new URLSearchParams(query);
+        case "PATH":
+          return getReadOnlyProxy(match.params);
+        case "PROCESSORS":
+          return getDynamicReadOnlyProxy({
+            get(target, key) {
+              var pkg = customProcessorRegistry.get(key);
+              if (!pkg) {
+                throw new Error("'PROCESSORS.".concat(key, "' is not registered! Have you installed the relevant brick package of '").concat(key.replace(/[A-Z]/g, m => "-".concat(m.toLowerCase())), "-NB'?"));
+              }
+              return getDynamicReadOnlyProxy({
+                get(t, k) {
+                  return pkg.get(k);
+                },
+                ownKeys() {
+                  return Array.from(pkg.keys());
+                }
+              });
+            },
+            ownKeys() {
+              return Array.from(customProcessorRegistry.keys());
             }
-          }
-        }
-        // The current runtime context is memoized even if the evaluation maybe lazy.
-        result = evaluate(value, runtimeContext, {
-          lazy
-        });
-        dismissRecursiveMarkingInjected = shouldDismissRecursiveMarkingInjected(value);
-      } else {
-        result = lazy ? value : brickUtils.inject(value, context);
-      }
-      if (!dismissRecursiveMarkingInjected) {
-        recursiveMarkAsInjected(result);
+          });
+        case "QUERY":
+          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.get(key)]));
+        case "QUERY_ARRAY":
+          return Object.fromEntries(Array.from(query.keys()).map(key => [key, query.getAll(key)]));
+        case "SEGUE":
+          return {
+            getUrl: getUrlBySegueFactory(app, segues)
+          };
+        case "SESSION_STORAGE":
+          return {
+            getItem: getItemFactory("session")
+          };
+        case "SYS":
+          return getReadOnlyProxy(sys);
+        case "MEDIA":
+          return getReadOnlyProxy(getMedia());
+        case "__WIDGET_FN__":
+          return widgetFunctions;
+        case "__WIDGET_IMG__":
+          return widgetImagesFactory;
+        case "__WIDGET_I18N__":
+          return widgetI18nFactory;
       }
-      return result;
     }
-    if (!(injectDeep && brickUtils.isObject(value)) || haveBeenInjected(value)) {
-      return value;
-    }
-    if (Array.isArray(value)) {
-      var nextOptions = getNextInternalOptions(internalOptions, true);
-      return value.map(v => computeRealValue(v, context, injectDeep, nextOptions));
+    for (var variableName of attemptToVisitGlobals) {
+      var variable = getIndividualGlobal(variableName);
+      if (variable !== undefined) {
+        globalVariables[variableName] = variable;
+      }
     }
-    return Object.fromEntries(Object.entries(value).map(_ref => {
-      var [k, v] = _ref;
-      return [computeRealValue(k, context, false), computeRealValue(v, context, injectDeep, getNextInternalOptions(internalOptions, false, k))];
-    }).concat(internalOptions !== null && internalOptions !== void 0 && internalOptions.ignoreSymbols ? [] : Object.getOwnPropertySymbols(value).map(k => [k, value[k]])));
-  };
-  function setProperties(bricks, properties, context, injectDeep) {
-    var realProps = computeRealProperties(properties, context, injectDeep);
-    if (context.tplContextId) {
-      realProps = setupUseBrickInTemplate(realProps, {
-        templateContextId: context.tplContextId
+    Object.assign(globalVariables, getGeneralGlobals(precooked.attemptToVisitGlobals, {
+      storyboardFunctions,
+      app,
+      appendI18nNamespace: runtimeContext.appendI18nNamespace
+    }));
+    try {
+      var result = brickUtils.cook(precooked.expression, precooked.source, {
+        globalVariables: supply(precooked.attemptToVisitGlobals, globalVariables)
       });
-    }
-    if (!Array.isArray(bricks)) {
-      bricks = [bricks];
-    }
-    bricks.forEach(brick => {
-      setRealProperties(brick, realProps);
-    });
-  }
-  function setRealProperties(brick, realProps, extractProps) {
-    for (var [propName, propValue] of Object.entries(realProps)) {
-      if (propName === "style" || propName === "dataset") {
-        for (var [k, v] of Object.entries(propValue)) {
-          brick[propName][k] = v;
-        }
-      } else if (propName === "innerHTML") {
-        // `innerHTML` is dangerous, use `textContent` instead.
-        // eslint-disable-next-line no-console
-        console.error("Please use `textContent` instead of `innerHTML`.");
-        brick.textContent = propValue;
-      } else {
-        if (extractProps) {
-          _.set(brick, propName, propValue);
-        } else {
-          brick[propName] = propValue;
-        }
+      var detail = {
+        raw,
+        context: globalVariables,
+        result
+      };
+      if (options.isReEvaluation) {
+        devtoolsHookEmit("re-evaluation", {
+          id: options.evaluationId,
+          detail
+        });
+      } else {
+        devtoolsHookEmit("evaluation", detail);
       }
-    }
-  }
-  function computeRealProperties(properties, context, injectDeep, trackingContextList) {
-    var result = {};
-    if (brickUtils.isObject(properties)) {
-      for (var [propName, propValue] of Object.entries(properties)) {
-        // Related: https://github.com/facebook/react/issues/11347
-        var realValue = computeRealValue(propValue, context, injectDeep, {
-          $$lazyForUseBrick: true,
-          $$stateOfUseBrick: propName === "useBrick" ? StateOfUseBrick.USE_BRICK : StateOfUseBrick.INITIAL
+      return result;
+    } catch (error) {
+      var _message = "".concat(error.message, ", in \"").concat(raw, "\"");
+      if (options.isReEvaluation) {
+        devtoolsHookEmit("re-evaluation", {
+          id: options.evaluationId,
+          detail: {
+            raw,
+            context: globalVariables
+          },
+          error: _message
         });
-        if (realValue !== undefined) {
-          // For `style` and `dataset`, only object is acceptable.
-          if (propName !== "style" && propName !== "dataset" || brickUtils.isObject(realValue)) {
-            result[propName] = realValue;
-          }
-        }
-        if (Array.isArray(trackingContextList)) {
-          var {
-            contextNames,
-            stateNames,
-            formStateNames
-          } = getTracks(propValue);
-          if (contextNames || stateNames || formStateNames) {
-            trackingContextList.push({
-              contextNames,
-              stateNames,
-              formStateNames,
-              propName,
-              propValue
-            });
-          }
-        }
+      } else {
+        var _errorConstructor = getCookErrorConstructor(error);
+        throw new _errorConstructor(_message);
       }
     }
-    return result;
-  }
-  function getNextInternalOptions(internalOptions, isArray, key) {
-    return internalOptions !== null && internalOptions !== void 0 && internalOptions.$$lazyForUseBrick ? _objectSpread__default["default"](_objectSpread__default["default"]({}, internalOptions), {}, {
-      $$stateOfUseBrick: getNextStateOfUseBrick(internalOptions.$$stateOfUseBrick, isArray, key)
-    }) : internalOptions;
   }
 
-  var _excluded$7 = ["children"],
-    _excluded2$2 = ["children"],
-    _excluded3 = ["items", "app"];
-  var symbolAppId = Symbol("appId");
-  var symbolMenuI18nNamespace = Symbol("menuI18nNamespace");
-  var symbolOverrideApp = Symbol("overrideApp");
-  var symbolShouldCache = Symbol("shouldCache");
-  // Caching menu requests to avoid flicker.
-  var menuCache = new Map();
-  var menuTitleCache = new Map();
-  var processMenuCache = new Map();
-  function constructMenu(_x, _x2, _x3) {
-    return _constructMenu.apply(this, arguments);
+  function isBasicProperty(propRef) {
+    return !!propRef.refProperty;
   }
-  function _constructMenu() {
-    _constructMenu = _asyncToGenerator__default["default"](function* (menuBar, context, kernel) {
-      var hasSubMenu = !!menuBar.subMenuId;
-      yield Promise.all([_asyncToGenerator__default["default"](function* () {
-        if (menuBar.menuId) {
-          var _menuBar$menu;
-          var defaultCollapsed = (_menuBar$menu = menuBar.menu) === null || _menuBar$menu === void 0 ? void 0 : _menuBar$menu.defaultCollapsed;
-          var menu = yield processMenu(menuBar.menuId, context, kernel, hasSubMenu);
-          if (!_.isNil(defaultCollapsed)) {
-            menu.defaultCollapsed = defaultCollapsed;
-          }
-          menuBar.menu = menu;
-        }
-      })(), _asyncToGenerator__default["default"](function* () {
-        if (hasSubMenu) {
-          menuBar.subMenu = yield processMenu(menuBar.subMenuId, context, kernel);
-        } else {
-          menuBar.subMenu = null;
-        }
-      })()]);
-    });
-    return _constructMenu.apply(this, arguments);
+  function isTransformableProperty(propRef) {
+    return !!propRef.refTransform;
   }
-  function preConstructMenus(_x4, _x5, _x6) {
-    return _preConstructMenus.apply(this, arguments);
+  function isMergeableProperty(propRef) {
+    return !!propRef.mergeProperty;
   }
-  function _preConstructMenus() {
-    _preConstructMenus = _asyncToGenerator__default["default"](function* (menus, context, kernel) {
-      var data = yield Promise.all(menus.map(menuId => processMenu(menuId, context, kernel, undefined, true)));
-      data.forEach((item, index) => processMenuCache.set(menus[index], item));
-    });
-    return _preConstructMenus.apply(this, arguments);
+  function isRefProperty(propRef) {
+    return !!propRef.ref;
   }
-  var getMenu = menuId => processMenuCache.get(menuId);
-  function fetchMenuById(_x7, _x8, _x9) {
-    return _fetchMenuById.apply(this, arguments);
+  function isVariableProperty(propRef) {
+    return !!propRef.asVariable;
   }
-  function _fetchMenuById() {
-    _fetchMenuById = _asyncToGenerator__default["default"](function* (menuId, kernel, isPreFetch) {
-      if (menuCache.has(menuId)) {
-        return menuCache.get(menuId);
-      }
-      var menuList = window.STANDALONE_MICRO_APPS ? yield kernel.getStandaloneMenus(menuId, isPreFetch) : kernel.getFeatureFlags()["three-level-menu-layout"] ? (yield InstalledMicroAppApi_getMenusInfo(menuId, {
-        menuObjectId: "EASYOPS_STORYBOARD_MENU"
-      })).menus : (yield InstanceApi_postSearch("EASYOPS_STORYBOARD_MENU", {
-        page: 1,
-        page_size: 200,
-        fields: {
-          menuId: true,
-          title: true,
-          icon: true,
-          link: true,
-          titleDataSource: true,
-          defaultCollapsed: true,
-          defaultCollapsedBreakpoint: true,
-          type: true,
-          injectMenuGroupId: true,
-          dynamicItems: true,
-          itemsResolve: true,
-          items: true,
-          i18n: true,
-          "items.children": true,
-          "app.appId": true
-        },
-        query: {
-          menuId: {
-            $eq: menuId
-          },
-          app: {
-            $size: {
-              $gt: 0
-            }
+
+  var customTemplateRegistry = new Map();
+  var appRegistered = new Set();
+  var symbolForComputedPropsFromProxy = Symbol.for("tpl.computedPropsFromProxy");
+  var symbolForRefForProxy = Symbol.for("tpl.refForProxy");
+  var symbolForTplContextId = Symbol.for("tpl.contextId");
+
+  function propertyMerge(conf, value, object) {
+    return propertyMergeAll(conf.$$mergeBase, Object.fromEntries(conf.$$mergeBase.proxies.map(proxy => [proxy.$$reversedRef, proxy === conf ? value : object[proxy.$$reversedRef]])));
+  }
+  function propertyMergeAll(mergeBase, object) {
+    if (mergeBase.mergeType === "array") {
+      return propertyMergeAllOfArray(mergeBase, object);
+    }
+    if (mergeBase.mergeType === "object") {
+      return propertyMergeAllOfObject(mergeBase, object);
+    }
+    // istanbul ignore next: should never reach
+    throw new TypeError("unsupported mergeType: \"".concat(mergeBase.mergeType, "\""));
+  }
+  function propertyMergeAllOfArray(_ref, object) {
+    var _$1, _proxy$mergeArgs;
+    var {
+      baseValue,
+      context,
+      proxies
+    } = _ref;
+    // Use an approach like template-literal's quasis:
+    // `quasi0${0}quais1${1}quasi2...`
+    // Every quasi can be merged with multiple items.
+    var computedBaseValue = Array.isArray(baseValue) ? computeRealValue(baseValue, context, true, {
+      $$lazyForUseBrick: true
+    }) : [];
+    var quasis = [];
+    var size = computedBaseValue.length + 1;
+    for (var i = 0; i < size; i += 1) {
+      quasis.push([]);
+    }
+    for (var proxy of proxies) {
+      var position = void 0;
+      switch (proxy.mergeMethod) {
+        case "append":
+          position = computedBaseValue.length;
+          break;
+        case "prepend":
+          position = 0;
+          break;
+        case "insertAt":
+          // Defaults to `-1`.
+          position = (_$1 = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _$1 !== void 0 ? _$1 : -1;
+          if (position < 0) {
+            // It's counted from the end if position is negative.
+            position += quasis.length;
           }
-        }
-      })).list;
-      var menuData = yield mergeMenu(menuList, kernel);
-      if (!menuData) {
-        throw new Error("Menu not found: ".concat(menuId));
+          position = _.clamp(position, 0, computedBaseValue.length);
+          break;
+        // istanbul ignore next: should never reach
+        default:
+          throw new TypeError("unsupported mergeMethod: \"".concat(proxy.mergeMethod, "\" for mergeType \"").concat(proxy.mergeType, "\""));
       }
-      reorderMenu(menuData);
-      menuData[symbolShouldCache] && menuCache.set(menuId, menuData);
-      return menuData;
-    });
-    return _fetchMenuById.apply(this, arguments);
-  }
-  function mergeMenu(_x10, _x11) {
-    return _mergeMenu.apply(this, arguments);
+      var patchValue = object[proxy.$$reversedRef];
+      if (!Array.isArray(patchValue)) {
+        patchValue = [];
+      }
+      quasis[position].push(...patchValue);
+    }
+    return quasis.flatMap((item, index) => index < computedBaseValue.length ? item.concat(computedBaseValue[index]) : item);
   }
-  function _mergeMenu() {
-    _mergeMenu = _asyncToGenerator__default["default"](function* (menuList, kernel) {
-      var mainMenu = menuList.find(menu => menu.type !== "inject");
-      if (!mainMenu) {
-        return undefined;
+  function propertyMergeAllOfObject(_ref2, object) {
+    var {
+      baseValue,
+      proxies,
+      context
+    } = _ref2;
+    var computedBaseValue = brickUtils.isObject(baseValue) ? computeRealValue(baseValue, context, true) : {};
+    return proxies.reduce((acc, proxy) => {
+      switch (proxy.mergeMethod) {
+        case "extend":
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, acc), object[proxy.$$reversedRef]);
+        // istanbul ignore next: should never reach
+        default:
+          throw new TypeError("unsupported mergeMethod: \"".concat(proxy.mergeMethod, "\" for mergeType \"").concat(proxy.mergeType, "\""));
       }
-      var validMenuList = [];
-      var injectWithMenus = new Map();
-      var menuWithI18n = new WeakMap();
-      for (var menu of menuList) {
-        if (menu.i18n) {
-          (function () {
-            var menuI18nNamespace = getI18nNamespace("menu", "".concat(menu.menuId, "~").concat(menu.app[0].appId, "+").concat(menu.instanceId));
-            // Support any language in `meta.i18n`.
-            Object.entries(menu.i18n).forEach(_ref6 => {
-              var [lang, resources] = _ref6;
-              i18next__default["default"].addResourceBundle(lang, menuI18nNamespace, resources);
-            });
-            menuWithI18n.set(menu, menuI18nNamespace);
-          })();
+    }, computedBaseValue);
+  }
+
+  function setupTemplateProxy(proxyContext, ref, slots) {
+    var computedPropsFromProxy = {};
+    var refForProxy;
+    var {
+      reversedProxies,
+      templateProperties,
+      externalSlots,
+      templateContextId,
+      proxyBrick
+    } = proxyContext;
+    if (ref && reversedProxies) {
+      refForProxy = {};
+      proxyBrick.proxyRefs.set(ref, refForProxy);
+
+      // Reversed proxies are used for expand storyboard before rendering page.
+      if (reversedProxies.properties.has(ref)) {
+        Object.assign(computedPropsFromProxy, Object.fromEntries(reversedProxies.properties.get(ref).flatMap(propRef => {
+          // `propValue` is computed.
+          var propValue = templateProperties === null || templateProperties === void 0 ? void 0 : templateProperties[propRef.$$reversedRef];
+          if (isTransformableProperty(propRef)) {
+            return Object.entries(preprocessTransformProperties({
+              [propRef.$$reversedRef]: propValue
+            }, propRef.refTransform));
+          }
+          if (isBasicProperty(propRef)) {
+            return [[propRef.refProperty, propValue]];
+          }
+          // Ignore Variable properties.
+          // And mergeable properties are processed later.
+          return [];
+        }).filter(propRef => propRef[1] !== undefined)));
+
+        // Brick properties can be merged multiple times.
+        if (reversedProxies.mergeBases.has(ref)) {
+          Object.assign(computedPropsFromProxy, Object.fromEntries(Array.from(reversedProxies.mergeBases.get(ref).entries()).map(_ref => {
+            var [mergeProperty, mergeBase] = _ref;
+            return [mergeProperty, propertyMergeAll(mergeBase, templateProperties !== null && templateProperties !== void 0 ? templateProperties : {})];
+          }).filter(item => item[1] !== undefined)));
         }
       }
-      var shouldCacheList = yield Promise.all(menuList.map(menu => loadDynamicMenuItems(menu, kernel, menuWithI18n)));
-      for (var _menu of menuList) {
-        var _menu$items;
-        if (((_menu$items = _menu.items) === null || _menu$items === void 0 ? void 0 : _menu$items.length) > 0) {
-          if (_menu.type === "inject" && _menu.injectMenuGroupId) {
-            var injectingMenus = injectWithMenus.get(_menu.injectMenuGroupId);
-            if (!injectingMenus) {
-              injectingMenus = [];
-              injectWithMenus.set(_menu.injectMenuGroupId, injectingMenus);
+
+      // Use an approach like template-literal's quasis:
+      // `quasi0${0}quais1${1}quasi2...`
+      // Every quasi (indexed by `refPosition`) can be slotted with multiple bricks.
+      var quasisMap = new Map();
+      if (reversedProxies.slots.has(ref)) {
+        for (var item of reversedProxies.slots.get(ref)) {
+          var _item$refPosition, _externalSlots$item$$, _externalSlots$item$$2;
+          if (!quasisMap.has(item.refSlot)) {
+            var quasis = [];
+            // The size of quasis should be the existed slotted bricks' size plus one.
+            var size = brickUtils.hasOwnProperty(slots, item.refSlot) ? slots[item.refSlot].bricks.length + 1 : 1;
+            for (var i = 0; i < size; i += 1) {
+              quasis.push([]);
             }
-            injectingMenus.push(_menu);
-          } else {
-            validMenuList.push(_menu);
+            quasisMap.set(item.refSlot, quasis);
           }
+          var expandableSlot = quasisMap.get(item.refSlot);
+          var refPosition = (_item$refPosition = item.refPosition) !== null && _item$refPosition !== void 0 ? _item$refPosition : -1;
+          expandableSlot[_.clamp(refPosition < 0 ? expandableSlot.length + refPosition : refPosition, 0, expandableSlot.length - 1)].push(...((_externalSlots$item$$ = externalSlots === null || externalSlots === void 0 ? void 0 : (_externalSlots$item$$2 = externalSlots[item.$$reversedRef]) === null || _externalSlots$item$$2 === void 0 ? void 0 : _externalSlots$item$$2.bricks) !== null && _externalSlots$item$$ !== void 0 ? _externalSlots$item$$ : []));
         }
       }
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, mainMenu), {}, {
-        items: validMenuList.flatMap(menu => processGroupInject(menu.items, menu, injectWithMenus, menuWithI18n)),
-        [symbolShouldCache]: shouldCacheList.every(Boolean),
-        [symbolMenuI18nNamespace]: menuWithI18n.get(mainMenu),
-        [symbolOverrideApp]: mainMenu.overrideApp
-      });
-    });
-    return _mergeMenu.apply(this, arguments);
-  }
-  function processGroupInject(items, menu, injectWithMenus, menuWithI18n) {
-    return items === null || items === void 0 ? void 0 : items.map(item => {
-      var _processGroupInject;
-      var foundInjectingMenus = item.groupId && injectWithMenus.get(item.groupId);
-      if (foundInjectingMenus) {
-        // Each menu to be injected with should be injected only once.
-        injectWithMenus.delete(item.groupId);
-      }
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
-        children: ((_processGroupInject = processGroupInject(item.children || item.items, menu, injectWithMenus, menuWithI18n)) !== null && _processGroupInject !== void 0 ? _processGroupInject : []).concat(foundInjectingMenus ? foundInjectingMenus.flatMap(injectingMenu => processGroupInject(injectingMenu.items, injectingMenu, injectWithMenus, menuWithI18n)) : []),
-        [symbolAppId]: menu.app[0].appId,
-        [symbolMenuI18nNamespace]: menuWithI18n.get(menu),
-        [symbolOverrideApp]: menu.overrideApp
-      });
-    });
-  }
-  function loadDynamicMenuItems(_x12, _x13, _x14) {
-    return _loadDynamicMenuItems.apply(this, arguments);
-  }
-  function _loadDynamicMenuItems() {
-    _loadDynamicMenuItems = _asyncToGenerator__default["default"](function* (menu, kernel, menuWithI18n) {
-      if (menu.dynamicItems && menu.itemsResolve) {
-        var _menu$itemsResolve;
-        var itemsConf = {};
-        var overrideAppId = menu.app[0].appId;
-        var context = _internalApiGetCurrentContext();
-        var newContext = context;
-        if (overrideAppId !== context.app.id && attemptToVisit(menu.itemsResolve, ["APP", "I18N"])) {
-          if (window.STANDALONE_MICRO_APPS) {
-            if (menu.overrideApp) {
-              menu.overrideApp.config = brickUtils.deepFreeze(_.merge({}, menu.overrideApp.defaultConfig, menu.overrideApp.userConfig));
-            }
-            newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
-              overrideApp: menu.overrideApp,
-              appendI18nNamespace: menuWithI18n.get(menu)
-            });
-          } else {
-            var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-            newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
-              overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
-              appendI18nNamespace: menuWithI18n.get(menu)
-            });
-          }
+      var _loop = function (slotName, _quasis) {
+        if (!brickUtils.hasOwnProperty(slots, slotName)) {
+          slots[slotName] = {
+            type: "bricks",
+            bricks: []
+          };
         }
-        var usedActions = brickUtils.scanPermissionActionsInAny(menu.itemsResolve);
-        yield validatePermissions(usedActions);
-        yield _internalApiGetResolver().resolveOne("reference", _objectSpread__default["default"]({
-          transform: "items",
-          transformMapArray: false
-        }, menu.itemsResolve), itemsConf, null, newContext);
-        menu.items = itemsConf.items;
-        if ((_menu$itemsResolve = menu.itemsResolve) !== null && _menu$itemsResolve !== void 0 && _menu$itemsResolve.args) {
-          var _menu$itemsResolve2;
-          return !attemptToVisit((_menu$itemsResolve2 = menu.itemsResolve) === null || _menu$itemsResolve2 === void 0 ? void 0 : _menu$itemsResolve2.args, ["QUERY", "PATH"]);
+        var slotConf = slots[slotName];
+        slotConf.bricks = _quasis.flatMap((bricks, index) => index < slotConf.bricks.length ? bricks.concat(slotConf.bricks[index]) : bricks);
+        if (slotConf.bricks.length === 0) {
+          delete slots[slotName];
         }
+      };
+      for (var [slotName, _quasis] of quasisMap.entries()) {
+        _loop(slotName, _quasis);
       }
-      return true;
-    });
-    return _loadDynamicMenuItems.apply(this, arguments);
-  }
-  function walkMenuItems(menuItems) {
-    return menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(
-    // `if` is already evaluated.
-    looseCheckIfOfComputed).map(item => {
-      var children = walkMenuItems(item.children || item.items);
-      return item.type === "group" ? {
-        type: "group",
-        childLayout: item.childLayout,
-        title: item.text || item.title,
-        items: children,
-        groupId: item.groupId,
-        groupFrom: item.groupFrom
-      } : children !== null && children !== void 0 && children.length ? {
-        type: "subMenu",
-        childLayout: item.childLayout,
-        title: item.text || item.title,
-        icon: item.icon,
-        items: children,
-        defaultExpanded: item.defaultExpanded
-      } : item;
-    });
-  }
-  function processMenu(_x15, _x16, _x17, _x18, _x19) {
-    return _processMenu.apply(this, arguments);
+    }
+    return {
+      [symbolForComputedPropsFromProxy]: computedPropsFromProxy,
+      [symbolForRefForProxy]: refForProxy,
+      [symbolForTplContextId]: templateContextId
+    };
   }
-  function _processMenu() {
-    _processMenu = _asyncToGenerator__default["default"](function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
-      var _yield$fetchMenuById = yield fetchMenuById(menuId, kernel, isPreFetch),
-        {
-          items,
-          app
-        } = _yield$fetchMenuById,
-        restMenuData = _objectWithoutProperties__default["default"](_yield$fetchMenuById, _excluded3);
-      var usedActions = brickUtils.scanPermissionActionsInAny([items, restMenuData]);
-      yield validatePermissions(usedActions);
-      var appsRequireI18nFulfilled = new Set();
-      var rootAppId = app[0].appId;
-      if (rootAppId !== context.app.id && !restMenuData[symbolMenuI18nNamespace]) {
-        appsRequireI18nFulfilled.add(rootAppId);
+
+  var _excluded$7 = ["properties", "slots"];
+  function setupUseBrickInTemplate(props, proxyContext) {
+    function walk(props) {
+      if (Array.isArray(props)) {
+        return props.map(walk);
       }
-      collectAppsRequireI18nFulfilled(items, context.app.id, appsRequireI18nFulfilled);
-      yield kernel.fulfilStoryboardI18n([...appsRequireI18nFulfilled]);
-      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
-        items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
-      });
-      return {
-        title: yield processMenuTitle(menuData),
-        icon: menuData.icon,
-        link: menuData.link,
-        menuItems: walkMenuItems(menuData.items),
-        defaultCollapsed: menuData.defaultCollapsed || hasSubMenu,
-        defaultCollapsedBreakpoint: menuData.defaultCollapsedBreakpoint
-      };
-    });
-    return _processMenu.apply(this, arguments);
-  }
-  function collectAppsRequireI18nFulfilled(items, contextAppId, appIds) {
-    function collect(items) {
-      for (var _ref of items) {
-        var {
-            children
-          } = _ref,
-          rest = _objectWithoutProperties__default["default"](_ref, _excluded$7);
-        var overrideAppId = rest[symbolAppId];
-        if (!rest[symbolMenuI18nNamespace] && overrideAppId !== contextAppId && !appIds.has(overrideAppId) && attemptToVisit(rest, ["I18N"])) {
-          appIds.add(overrideAppId);
-        }
-        children && collect(children);
+      if (!brickUtils.isObject(props) || !isPlainObject(props)) {
+        return props;
       }
+      return Object.fromEntries(Object.entries(props).map(_ref => {
+        var [key, value] = _ref;
+        return brickUtils.isObject(value) && key === "useBrick" ? Array.isArray(value) ? [key, value.map(setup)] : [key, setup(value)] : [key, walk(value)];
+      }).concat(Object.getOwnPropertySymbols(props).map(k => [k, props[k]])));
     }
-    collect(items);
-  }
-  function computeMenuItemsWithOverrideApp(items, context, kernel) {
-    return Promise.all(items.map( /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator__default["default"](function* (_ref2) {
-        var {
-            children
-          } = _ref2,
-          rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
-        return _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
-          children: children && (yield computeMenuItemsWithOverrideApp(children, context, kernel))
-        });
-      });
-      return function (_x20) {
-        return _ref3.apply(this, arguments);
-      };
-    }()));
+    function setup(item) {
+      var {
+          properties,
+          slots: originalSlots
+        } = item,
+        restConf = _objectWithoutProperties__default["default"](item, _excluded$7);
+      var slots = Object.fromEntries(Object.entries(originalSlots !== null && originalSlots !== void 0 ? originalSlots : {}).map(_ref2 => {
+        var _slotConf$bricks;
+        var [slotName, slotConf] = _ref2;
+        return [slotName, {
+          type: "bricks",
+          bricks: ((_slotConf$bricks = slotConf.bricks) !== null && _slotConf$bricks !== void 0 ? _slotConf$bricks : []).map(setup)
+        }];
+      }));
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, restConf), {}, {
+        properties: walk(properties),
+        slots
+      }, setupTemplateProxy(proxyContext, restConf.ref, slots));
+    }
+    return walk(props);
   }
-  function processMenuTitle(_x21) {
-    return _processMenuTitle.apply(this, arguments);
+  function isPlainObject(object) {
+    return Object.prototype.toString.call(object) === "[object Object]";
   }
-  function _processMenuTitle() {
-    _processMenuTitle = _asyncToGenerator__default["default"](function* (menuData) {
-      if (menuData.title || _.isEmpty(menuData.titleDataSource)) {
-        return menuData.title;
+
+  var computeRealValue = (value, context, injectDeep, internalOptions) => {
+    var preEvaluated = isPreEvaluated(value);
+    if (preEvaluated || typeof value === "string") {
+      // For `useBrick`, some fields such as `properties`/`transform`/`events`/`if`,
+      // are kept and to be evaluated later.
+      var lazy = (internalOptions === null || internalOptions === void 0 ? void 0 : internalOptions.$$lazyForUseBrick) && isLazyContentInUseBrick(internalOptions.$$stateOfUseBrick);
+      var result;
+      var dismissRecursiveMarkingInjected = lazy;
+      if (preEvaluated || brickUtils.isEvaluable(value)) {
+        var runtimeContext = {};
+        if (context) {
+          var keys = ["event", "tplContextId", "overrideApp", "appendI18nNamespace", "formContextId", "query", "match", "app", "segues"];
+          for (var key of keys) {
+            if (context[key]) {
+              runtimeContext[key] = context[key];
+            }
+          }
+          var simpleKeys = ["hash", "pathname"];
+          for (var _key of simpleKeys) {
+            if (brickUtils.hasOwnProperty(context, _key)) {
+              runtimeContext[_key] = context[_key];
+            }
+          }
+        }
+        // The current runtime context is memoized even if the evaluation maybe lazy.
+        result = evaluate(value, runtimeContext, {
+          lazy
+        });
+        dismissRecursiveMarkingInjected = shouldDismissRecursiveMarkingInjected(value);
+      } else {
+        result = lazy ? value : brickUtils.inject(value, context);
       }
-      var cacheKey = JSON.stringify(menuData.titleDataSource);
-      if (menuTitleCache.has(cacheKey)) {
-        return menuTitleCache.get(cacheKey);
+      if (!dismissRecursiveMarkingInjected) {
+        recursiveMarkAsInjected(result);
       }
-      var {
-        objectId,
-        instanceId,
-        attributeId
-      } = menuData.titleDataSource;
-      var attr = attributeId !== null && attributeId !== void 0 ? attributeId : "name";
-      var instanceData = yield InstanceApi_getDetail(objectId, instanceId, {
-        fields: attr
+      return result;
+    }
+    if (!(injectDeep && brickUtils.isObject(value)) || haveBeenInjected(value)) {
+      return value;
+    }
+    if (Array.isArray(value)) {
+      var nextOptions = getNextInternalOptions(internalOptions, true);
+      return value.map(v => computeRealValue(v, context, injectDeep, nextOptions));
+    }
+    return Object.fromEntries(Object.entries(value).map(_ref => {
+      var [k, v] = _ref;
+      return [computeRealValue(k, context, false), computeRealValue(v, context, injectDeep, getNextInternalOptions(internalOptions, false, k))];
+    }).concat(internalOptions !== null && internalOptions !== void 0 && internalOptions.ignoreSymbols ? [] : Object.getOwnPropertySymbols(value).map(k => [k, value[k]])));
+  };
+  function setProperties(bricks, properties, context, injectDeep) {
+    var realProps = computeRealProperties(properties, context, injectDeep);
+    if (context.tplContextId) {
+      realProps = setupUseBrickInTemplate(realProps, {
+        templateContextId: context.tplContextId
       });
-      var title;
-      if (attributeId === "#showKey" && Array.isArray(instanceData[attr])) {
-        var [primary, ...rest] = instanceData[attr];
-        title = rest.length > 0 ? "".concat(primary, "(").concat(rest.join(","), ")") : String(primary);
-      } else {
-        title = String(instanceData[attr]);
-      }
-      menuTitleCache.set(cacheKey, title);
-      return title;
-    });
-    return _processMenuTitle.apply(this, arguments);
-  }
-  function clearMenuTitleCache() {
-    menuTitleCache.clear();
-  }
-  function clearMenuCache() {
-    menuCache.clear();
-  }
-  function reorderMenu(menuData) {
-    menuData.items = reorderMenuItems(menuData.items);
-  }
-  function reorderMenuItems(list) {
-    return sortMenuItems(list).map(item => _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
-      children: reorderMenuItems(item.children)
-    }));
-  }
-  function sortMenuItems(list) {
-    return _.sortBy(list, item => {
-      var _item$sort;
-      return (_item$sort = item.sort) !== null && _item$sort !== void 0 ? _item$sort : -Infinity;
+    }
+    if (!Array.isArray(bricks)) {
+      bricks = [bricks];
+    }
+    bricks.forEach(brick => {
+      setRealProperties(brick, realProps);
     });
   }
-
-  /**
-   * If the menu contains evaluations which use `APP` or `I18N`,
-   * we have to override app in context when computing real values.
-   */
-  function attemptToVisit(data, globals) {
-    var memo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new WeakSet();
-    if (typeof data === "string") {
-      if (brickUtils.isEvaluable(data)) {
-        if (globals.some(key => data.includes(key))) {
-          var {
-            attemptToVisitGlobals
-          } = brickUtils.preevaluate(data);
-          return globals.some(key => attemptToVisitGlobals.has(key));
+  function setRealProperties(brick, realProps, extractProps) {
+    for (var [propName, propValue] of Object.entries(realProps)) {
+      if (propName === "style" || propName === "dataset") {
+        for (var [k, v] of Object.entries(propValue)) {
+          brick[propName][k] = v;
+        }
+      } else if (propName === "innerHTML") {
+        // `innerHTML` is dangerous, use `textContent` instead.
+        // eslint-disable-next-line no-console
+        console.error("Please use `textContent` instead of `innerHTML`.");
+        brick.textContent = propValue;
+      } else {
+        if (extractProps) {
+          _.set(brick, propName, propValue);
+        } else {
+          brick[propName] = propValue;
         }
-      } else if (globals.includes("APP")) {
-        return /\${\s*APP\s*\./.test(data);
-      }
-    } else if (brickUtils.isObject(data)) {
-      // Avoid call stack overflow.
-      // istanbul ignore next
-      if (memo.has(data)) {
-        return false;
       }
-      memo.add(data);
-      return (Array.isArray(data) ? data : Object.values(data)).some(item => attemptToVisit(item, globals, memo));
     }
-    return false;
   }
-  function computeRealValueWithOverrideApp(_x22, _x23, _x24, _x25) {
-    return _computeRealValueWithOverrideApp.apply(this, arguments);
-  }
-  function _computeRealValueWithOverrideApp() {
-    _computeRealValueWithOverrideApp = _asyncToGenerator__default["default"](function* (data, overrideAppId, context, kernel) {
-      if ("titleDataSource" in data && brickUtils.isObject(data.titleDataSource) && Object.entries(data.titleDataSource).every(_ref7 => {
-        var [key, value] = _ref7;
-        return value === null || value === "";
-      })) {
-        delete data.titleDataSource;
-      }
-      if ("if" in data && data.if === null) {
-        delete data.if;
-      }
-      if ("to" in data && data.to && !brickUtils.isEvaluable(data.to)) {
-        var yaml = pipes.pipes.yaml(data.to);
-        if (brickUtils.isObject(yaml) && ["pathname", "search", "hash"].some(key => brickUtils.hasOwnProperty(yaml, key))) {
-          data.to = yaml;
+  function computeRealProperties(properties, context, injectDeep, trackingContextList) {
+    var result = {};
+    if (brickUtils.isObject(properties)) {
+      for (var [propName, propValue] of Object.entries(properties)) {
+        // Related: https://github.com/facebook/react/issues/11347
+        var realValue = computeRealValue(propValue, context, injectDeep, {
+          $$lazyForUseBrick: true,
+          $$stateOfUseBrick: propName === "useBrick" ? StateOfUseBrick.USE_BRICK : StateOfUseBrick.INITIAL
+        });
+        if (realValue !== undefined) {
+          // For `style` and `dataset`, only object is acceptable.
+          if (propName !== "style" && propName !== "dataset" || brickUtils.isObject(realValue)) {
+            result[propName] = realValue;
+          }
         }
-      }
-      var newContext = context;
-      if (overrideAppId !== context.app.id && attemptToVisit(data, ["APP", "I18N", "IMG"])) {
-        if (window.STANDALONE_MICRO_APPS) {
-          if (data[symbolOverrideApp]) {
-            data[symbolOverrideApp].config = brickUtils.deepFreeze(_.merge({}, data[symbolOverrideApp].defaultConfig, data[symbolOverrideApp].userConfig));
+        if (Array.isArray(trackingContextList)) {
+          var {
+            contextNames,
+            stateNames,
+            formStateNames
+          } = getTracks(propValue);
+          if (contextNames || stateNames || formStateNames) {
+            trackingContextList.push({
+              contextNames,
+              stateNames,
+              formStateNames,
+              propName,
+              propValue
+            });
           }
-          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
-            overrideApp: data[symbolOverrideApp],
-            appendI18nNamespace: data[symbolMenuI18nNamespace]
-          });
-        } else {
-          var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
-            overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
-            appendI18nNamespace: data[symbolMenuI18nNamespace]
-          });
         }
       }
-      var processors = brickUtils.scanProcessorsInAny(data);
-      yield kernel.loadDynamicBricks([], processors);
-      yield kernel.router.waitForUsedContext(data);
-      return computeRealValue(data, newContext, true, {
-        ignoreSymbols: true
-      });
-    });
-    return _computeRealValueWithOverrideApp.apply(this, arguments);
+    }
+    return result;
+  }
+  function getNextInternalOptions(internalOptions, isArray, key) {
+    return internalOptions !== null && internalOptions !== void 0 && internalOptions.$$lazyForUseBrick ? _objectSpread__default["default"](_objectSpread__default["default"]({}, internalOptions), {}, {
+      $$stateOfUseBrick: getNextStateOfUseBrick(internalOptions.$$stateOfUseBrick, isArray, key)
+    }) : internalOptions;
+  }
+
+  var brickTemplateRegistry = new Map();
+  function registerBrickTemplate(name, factory) {
+    if (brickTemplateRegistry.has(name)) {
+      // eslint-disable-next-line no-console
+      console.error("Brick template of \"".concat(name, "\" already registered."));
+      return;
+    }
+    brickTemplateRegistry.set(name, factory);
   }
 
   var lazyBrickRegistry = new Map();
@@ -3653,10 +3653,39 @@
   }
 
   /* istanbul ignore next */
+  function _dev_only_debugDataValue(_x, _x2) {
+    return _dev_only_debugDataValue2.apply(this, arguments);
+  }
+
+  /* istanbul ignore next */
+  function _dev_only_debugDataValue2() {
+    _dev_only_debugDataValue2 = _asyncToGenerator__default["default"](function* (debugData, _ref3) {
+      var {
+        tplContextId
+      } = _ref3;
+      var runtimeContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+        tplContextId
+      });
+      if (debugData.value) {
+        return computeRealValue(debugData.value, runtimeContext, true);
+      }
+      var hasTransform = debugData.resolve.transform;
+      var result = {};
+      yield _internalApiGetResolver().resolveOne("reference", hasTransform ? debugData.resolve : _objectSpread__default["default"](_objectSpread__default["default"]({}, debugData.resolve), {}, {
+        transform: "value"
+      }), result, null, runtimeContext, {
+        cache: "reload"
+      });
+
+      // 跟 v3 的数据结构保持一致，有 transform 时返回完整定义，无 transform 时直接返回数据
+      return hasTransform ? result : result.value;
+    });
+    return _dev_only_debugDataValue2.apply(this, arguments);
+  }
   function _dev_only_updateFormPreviewSettings(appId, formId, settings) {
     kernel._dev_only_updateFormPreviewSettings(appId, formId, settings);
   }
-  function _dev_only_render(_x, _x2) {
+  function _dev_only_render(_x3, _x4) {
     return _dev_only_render2.apply(this, arguments);
   }
   function _dev_only_render2() {
@@ -14445,6 +14474,7 @@
     getAddedContracts: _dev_only_getAddedContracts,
     getContextValue: _dev_only_getContextValue,
     getAllContextValues: _dev_only_getAllContextValues,
+    debugDataValue: _dev_only_debugDataValue,
     render: _dev_only_render,
     setRealTimeDataInspectRoot,
     addRealTimeDataInspectHook