@next-core/brick-kit 2.192.0 → 2.193.1

package/dist/index.esm.js

@@ -3,16 +3,16 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator$3 from '@babel/runtime/helpers/asyncToGenerator';
-import _, { escapeRegExp, set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, isEmpty, merge, sortBy, orderBy, pick, isObject as isObject$1, uniq, omit, findLastIndex, noop, isString as isString$1 } from 'lodash';
-import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, isTrackAll, trackAll, trackContext, trackState, trackFormState, transformAndInject, transform, scanPermissionActionsInStoryboard, precookFunction, cook, collectContextUsage, deferResolveContextConcurrently, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedFormState, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, scanPermissionActionsInAny, deepFreeze, scanProcessorsInAny, matchPath, asyncProcessBrick, createProviderClass, removeDeadConditionsInTpl, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, snippetEvaluate, scanCustomApisInStoryboard, prefetchScript, scanBricksInBrickConf, loadScript, scanAppGetMenuInAny, scanInstalledAppsInStoryboard, removeDeadConditions, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
+import _, { escapeRegExp, set, get, difference, identity, uniqueId, isNil, isEmpty, merge, sortBy, cloneDeep, clamp, orderBy, pick, isObject as isObject$1, uniq, omit, findLastIndex, noop, isString as isString$1 } from 'lodash';
+import { toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, isTrackAll, trackAll, trackContext, trackState, trackFormState, transformAndInject, transform, JsonStorage, scanPermissionActionsInStoryboard, precookFunction, cook, collectContextUsage, deferResolveContextConcurrently, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedFormState, trackUsedState, trackUsedContext, scanPermissionActionsInAny, deepFreeze, scanProcessorsInAny, preevaluate, shouldAllowRecursiveEvaluations, inject, matchPath, asyncProcessBrick, createProviderClass, removeDeadConditionsInTpl, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, snippetEvaluate, scanCustomApisInStoryboard, prefetchScript, scanBricksInBrickConf, loadScript, scanAppGetMenuInAny, scanInstalledAppsInStoryboard, removeDeadConditions, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
+import moment from 'moment';
+import { pipes } from '@next-core/pipes';
+import i18next, { getFixedT } from 'i18next';
 import React, { useState, useEffect, useMemo, useContext, createContext, useRef, useReducer, useCallback } from 'react';
 import { http, HttpResponseError, HttpAbortError, HttpFetchError } from '@next-core/brick-http';
+import { userAnalytics, apiAnalyzer } from '@next-core/easyops-analytics';
 import { Modal, message, Empty, ConfigProvider } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import i18next, { getFixedT } from 'i18next';
-import moment from 'moment';
-import { pipes } from '@next-core/pipes';
-import { userAnalytics, apiAnalyzer } from '@next-core/easyops-analytics';
 import yaml from 'js-yaml';
 import { loadBricksImperatively, loadProcessorsImperatively } from '@next-core/loader';
 import { withTranslation } from 'react-i18next';
@@ -291,999 +291,885 @@ var assertValidOperator = op => {
   }
 };
 
-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({}, 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 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(_).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(...arguments);
+      }, Object.fromEntries(Object.entries(moment).filter(entry => !shouldOmitInMoment.has(entry[0]))));
+    case "PIPES":
+      return 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 = toPath(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] = useState(getCurrentTheme());
-  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 (!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(_objectSpread({}, 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 (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 (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] = useState(getCurrentMode());
-  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" ? isEvaluable(value) : isPreEvaluated(value)) {
+    var raw = typeof value === "string" ? value : getPreEvaluatedRaw(value);
+    if (isTrackAll(raw)) {
+      var result = trackAll(raw);
+      if (result) {
+        contextNames = result.context;
+        stateNames = result.state;
+        formStateNames = result.formState;
       }
-      _next(undefined);
-    });
+    } else {
+      contextNames = trackContext(raw);
+      stateNames = trackState(raw);
+      formStateNames = 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 || 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 ? transformAndInject(to, data, _internalApiGetCurrentContext()) : transform(to, data);
     }
-  }
-  return target;
+    if (!dismissRecursiveMarkingInjected) {
+      recursiveMarkAsInjected(result);
+    }
+    return result;
+  }
+  if (!isObject(to) || haveBeenInjected(to)) {
+    return to;
+  }
+  if (Array.isArray(to)) {
+    var nextOptions = getNextDoTransformOptions(options, true);
+    return to.map(item => doTransform(data, item, nextOptions));
+  }
+  return Object.fromEntries(
+  // Get both string and symbol keys.
+  Object.entries(to).map(_ref => {
+    var [k, v] = _ref;
+    if (Array.isArray(options === null || options === void 0 ? void 0 : options.trackingContextList) && (typeof v === "string" ? isEvaluable(v) : isPreEvaluated(v))) {
+      var raw;
+      if (typeof v === "string") {
+        raw = v;
+      } else {
+        raw = getPreEvaluatedRaw(v);
+        addDataToPreEvaluated(v, data);
+      }
+      var {
+        contextNames,
+        stateNames,
+        formStateNames
+      } = getTracks(raw);
+      if (contextNames || stateNames || formStateNames) {
+        options.trackingContextList.push({
+          contextNames,
+          stateNames,
+          formStateNames,
+          propName: k,
+          propValue: v
+        });
+      }
+    }
+    return [k, doTransform(data, v, getNextDoTransformOptions(options, false, k))];
+  }).concat(Object.getOwnPropertySymbols(to).map(k => [k, to[k]])));
 }
 
-/**
- * @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 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);
-  };
-}();
+/** @internal */
+function reTransformForDevtools(transformationId, data, to, from, mapArray, allowInject) {
+  try {
+    preprocessTransformProperties(data, to, from, mapArray, {
+      isReTransformation: true,
+      transformationId,
+      allowInject
+    });
+  } catch (error) {
+    devtoolsHookEmit("re-transformation", {
+      id: transformationId,
+      error: error.message,
+      detail: {
+        transform: to,
+        data,
+        options: {
+          from,
+          mapArray,
+          allowInject
+        }
+      }
+    });
+  }
+}
 
-/**
- * @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 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);
+/** @internal */
+function preprocessTransformProperties(data, to, from, mapArray, options) {
+  var props = {};
+  var processedData = from ? get(data, from) : data;
+  if (Array.isArray(to)) {
+    for (var item of to) {
+      pipeableTransform(props, processedData, item.to, item.from, item.mapArray, {
+        allowInject: options === null || options === void 0 ? void 0 : options.allowInject
+      });
+    }
+  } else {
+    pipeableTransform(props, processedData, to, undefined, mapArray, {
+      allowInject: options === null || options === void 0 ? void 0 : options.allowInject
+    });
+  }
+  var detail = {
+    transform: to,
+    data,
+    options: {
+      from,
+      mapArray,
+      allowInject: options === null || options === void 0 ? void 0 : options.allowInject
+    },
+    result: props
   };
-}();
-
-/**
- * @description 获取菜单信息
- * @endpoint GET /api/v1/micro-app/menus/:menuId
- */
-var InstalledMicroAppApi_getMenusInfo = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (menuId, params, options) {
-    return (/**! @contract easyops.api.micro_app.installed_micro_app.GetMenusInfo@1.0.0 */(yield http.get("api/gateway/micro_app.installed_micro_app.GetMenusInfo/api/v1/micro-app/menus/".concat(menuId), _objectSpread(_objectSpread({}, options), {}, {
-        params
-      }))).data
-    );
-  });
-  return function InstalledMicroAppApi_getMenusInfo(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
+  if (options !== null && options !== void 0 && options.isReTransformation) {
+    devtoolsHookEmit("re-transformation", {
+      id: options.transformationId,
+      detail
+    });
+  } else {
+    devtoolsHookEmit("transformation", detail);
+  }
+  return props;
+}
+function pipeableTransform(props, data, to, from, mapArray, options) {
+  if (!to) {
+    // Do nothing if `to` is falsy.
+    return;
+  }
+  var fromData = from ? get(data, from) : data;
+  var isArray = Array.isArray(fromData);
+  if (!isArray && mapArray === true) {
+    isArray = true;
+    fromData = [fromData];
+  } else if (isArray && mapArray === false) {
+    isArray = false;
+  }
+  if (typeof to === "string") {
+    props[to] = fromData;
+    return;
+  }
+  var _loop = function (transformedPropName, transformTo) {
+    // If `fromData` is an array, mapping it's items.
+    props[transformedPropName] = isArray ? fromData.map(item => doTransform(item, transformTo, options)) : doTransform(fromData, transformTo, options);
   };
-}();
+  for (var [transformedPropName, transformTo] of Object.entries(to)) {
+    _loop(transformedPropName, transformTo);
+  }
+}
 
-/** 微应用的i18n信息 */
+/** @internal */
+function transformIntermediateData(data, to, from, mapArray) {
+  var intermediateData = from ? get(data, from) : data;
+  if (!to) {
+    return intermediateData;
+  }
+  return transformProperties({}, intermediateData, to, undefined, mapArray);
+}
+function getNextDoTransformOptions(options, isArray, key) {
+  var _options$$$stateOfUse;
+  return options ? _objectSpread(_objectSpread({}, options), {}, {
+    // Collect tracking context in first level only.
+    trackingContextList: undefined,
+    $$stateOfUseBrick: options.$$lazyForUseBrick ? getNextStateOfUseBrick((_options$$$stateOfUse = options.$$stateOfUseBrick) !== null && _options$$$stateOfUse !== void 0 ? _options$$$stateOfUse : StateOfUseBrick.INITIAL, isArray, key) : undefined
+  }) : options;
+}
 
-/**
- * @description 获取微应用的i18n数据
- * @endpoint GET /api/v1/micro-app/i18n
- */
-var InstalledMicroAppApi_getI18NData = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (params, options) {
-    return (/**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */(yield http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread(_objectSpread({}, options), {}, {
-        params
-      }))).data
-    );
-  });
-  return function InstalledMicroAppApi_getI18NData(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
+var MESSAGE_SOURCE_PANEL = "brick-next-devtools-panel";
+var EVALUATION_EDIT = "devtools-evaluation-edit";
+var TRANSFORMATION_EDIT = "devtools-transformation-edit";
+var FRAME_ACTIVE_CHANGE = "devtools-frame-active-change";
+var PANEL_CHANGE = "devtools-panel-change";
+var frameIsActive = true;
+var selectedPanel;
 
-/**
- * @description 校验系统权限
- * @endpoint POST /api/micro_app/v1/permission/validate
- */
-var PermissionApi_validatePermissions = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (data, options) {
-    return (/**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */(yield 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);
+/* istanbul ignore next */
+function devtoolsHookEmit(type, payload) {
+  var devtools = getDevHook();
+  if (!devtools || !(type === "evaluation" ? frameIsActive && (!selectedPanel || selectedPanel === "Evaluations") : type === "transformation" ? frameIsActive && (!selectedPanel || selectedPanel === "Transformations") : true)) {
+    // Ignore messages if current devtools panel is not relevant.
+    return;
+  }
+  var emit = () => {
+    var _devtools$emit;
+    (_devtools$emit = devtools.emit) === null || _devtools$emit === void 0 ? void 0 : _devtools$emit.call(devtools, {
+      type,
+      payload
+    });
   };
-}();
 
-function supply(attemptToVisitGlobals, providedGlobalVariables, mock) {
-  var globalVariables = _objectSpread({}, 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;
-      }
-    }
+  // Try to emit only in idle time.
+  if (typeof window.requestIdleCallback === "function") {
+    window.requestIdleCallback(emit);
+  } else {
+    setTimeout(emit, 0);
   }
-  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(_).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(...arguments);
-      }, Object.fromEntries(Object.entries(moment).filter(entry => !shouldOmitInMoment.has(entry[0]))));
-    case "PIPES":
-      return 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 = toPath(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 (!hasOwnProperty(segues, segueId)) {
-      // eslint-disable-next-line no-console
-      throw new Error("Segue not found: ".concat(segueId));
+function listenDevtoolsEagerly() {
+  window.addEventListener("message", _ref => {
+    var {
+      data
+    } = _ref;
+    if ((data === null || data === void 0 ? void 0 : data.source) !== MESSAGE_SOURCE_PANEL) {
+      return;
     }
-    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;
+    var payload = data.payload;
+    switch (payload === null || payload === void 0 ? void 0 : payload.type) {
+      case FRAME_ACTIVE_CHANGE:
+        {
+          frameIsActive = payload.active;
+          break;
         }
-        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, "/"));
+      case PANEL_CHANGE:
+        {
+          selectedPanel = payload.panel;
+          break;
         }
-        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);
+function listenDevtools() {
+  window.addEventListener("message", _ref2 => {
+    var {
+      data
+    } = _ref2;
+    if ((data === null || data === void 0 ? void 0 : data.source) !== MESSAGE_SOURCE_PANEL) {
+      return;
     }
-  };
-}
-
-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 (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);
+    var payload = data.payload;
+    switch (payload === null || payload === void 0 ? void 0 : payload.type) {
+      case EVALUATION_EDIT:
+        {
+          var {
+            raw,
+            context,
+            id
+          } = payload;
+          evaluate(raw, {
+            data: context.data,
+            event: restoreDehydrated(context.event)
+          }, {
+            isReEvaluation: true,
+            evaluationId: id
+          });
+          break;
+        }
+      case TRANSFORMATION_EDIT:
+        {
+          var {
+            data: _data,
+            transform,
+            id: _id,
+            options: {
+              from,
+              mapArray,
+              allowInject
+            }
+          } = payload;
+          reTransformForDevtools(_id, _data, transform, from, mapArray, allowInject);
+          break;
         }
-      }
     }
-  }
+  });
 }
-function haveBeenInjected(object) {
-  return injected.has(object);
+function getDevHook() {
+  return window.__BRICK_NEXT_DEVTOOLS_HOOK__;
 }
-function resetAllInjected() {
-  injected = new WeakSet();
+function restoreDehydrated(value) {
+  var _getDevHook$restoreDe, _getDevHook;
+  return (_getDevHook$restoreDe = (_getDevHook = getDevHook()) === null || _getDevHook === void 0 ? void 0 : _getDevHook.restoreDehydrated(value)) !== null && _getDevHook$restoreDe !== void 0 ? _getDevHook$restoreDe : value;
 }
-function cloneDeepWithInjectedMark(value) {
-  if (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;
+
+function getItemFactory(storageType) {
+  return function (name) {
+    var storage = storageType === "local" ? localStorage : sessionStorage;
+    return JSON.parse(storage.getItem(name));
+  };
 }
 
-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;
+var locale$7 = {
+  [K.REQUEST_FAILED]: "Request Failed",
+  [K.MODAL_OK]: "Ok",
+  [K.MODAL_CANCEL]: "Cancel",
+  [K.SOMETHING_WENT_WRONG]: "Something went wrong!",
+  [K.LOGIN_TIMEOUT_MESSAGE]: "You haven't logged in or your login session has expired. Login right now?",
+  [K.NETWORK_ERROR]: "Network error, please check your network.",
+  [K.PAGE_NOT_FOUND]: "Page not found, please check the URL",
+  [K.APP_NOT_FOUND]: "App not found, maybe the URL is wrong or you don't have permission to access",
+  [K.LICENSE_EXPIRED]: "The license authorization has expired, please contact the platform administrator",
+  [K.NO_PERMISSION]: "Unauthorized access, unable to retrieve the required resources for this page",
+  [K.OTHER_ERROR]: "Oops! Something went wrong",
+  [K.GO_BACK_PREVIOUS_PAGE]: "Go back to previous page",
+  [K.GO_BACK_HOME_PAGE]: "Back to home page",
+  [K.LOGIN_CHANGED]: "You have logged in as another account, click OK to refresh the page.",
+  [K.LOGOUT_APPLIED]: "Your account has been logged out, click OK to refresh the page."
+};
+var en = locale$7;
+
+var locale$6 = {
+  [K.REQUEST_FAILED]: "请求失败",
+  [K.MODAL_OK]: "确认",
+  [K.MODAL_CANCEL]: "取消",
+  [K.SOMETHING_WENT_WRONG]: "出现了一些问题！",
+  [K.LOGIN_TIMEOUT_MESSAGE]: "您还未登录或登录信息已过期，现在重新登录？",
+  [K.NETWORK_ERROR]: "网络错误，请检查您的网络连接。",
+  [K.PAGE_NOT_FOUND]: "请求的页面未找到，请确认 URL 是否正确",
+  [K.APP_NOT_FOUND]: "请求的微应用无法找到, 可能是 URL 错误或者无权限访问",
+  [K.LICENSE_EXPIRED]: "License 授权失效，请联系平台管理员",
+  [K.NO_PERMISSION]: "没有权限，无法获取页面所需要的资源",
+  [K.OTHER_ERROR]: "糟糕！页面出现了一些问题",
+  [K.GO_BACK_PREVIOUS_PAGE]: "回到上一页",
+  [K.GO_BACK_HOME_PAGE]: "回到首页",
+  [K.LOGIN_CHANGED]: "您已经登录另一个账号，点击确定刷新页面。",
+  [K.LOGOUT_APPLIED]: "您的账号已经登出，点击确定刷新页面。"
+};
+var zh = locale$6;
+
+/** @internal */
+var initI18n = () => {
+  i18next.addResourceBundle("en", NS_BRICK_KIT, en);
+  i18next.addResourceBundle("zh", NS_BRICK_KIT, zh);
+};
+
+/** @internal */
+function getI18nNamespace(type, id) {
+  return "$".concat(type, "-").concat(id);
 }
-function getNextStateOfUseBrick(state, isArray, key) {
-  if (isLazyContentInUseBrick(state)) {
-    return state;
+
+function registerWidgetI18n(widgetId, i18n) {
+  var ns = getI18nNamespace("widget", widgetId);
+  Object.entries(i18n).forEach(_ref => {
+    var [lang, resources] = _ref;
+    i18next.addResourceBundle(lang, ns, resources);
+  });
+}
+function widgetI18nFactory(widgetId) {
+  return getFixedT(null, getI18nNamespace("widget", widgetId));
+}
+
+function i18nText(data) {
+  var _i18next$language;
+  if (!data) {
+    return;
   }
-  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;
+  var language = (_i18next$language = i18next.language) !== null && _i18next$language !== void 0 ? _i18next$language : "zh-CN";
+  // First, make a perfect match.
+  if (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 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];
     }
   }
-  return StateOfUseBrick.INITIAL;
 }
 
-function getTracks(value) {
-  var contextNames = false;
-  var stateNames = false;
-  var formStateNames = false;
-  if (typeof value === "string" ? isEvaluable(value) : isPreEvaluated(value)) {
-    var raw = typeof value === "string" ? value : getPreEvaluatedRaw(value);
-    if (isTrackAll(raw)) {
-      var result = trackAll(raw);
-      if (result) {
-        contextNames = result.context;
-        stateNames = result.state;
-        formStateNames = result.formState;
-      }
-    } else {
-      contextNames = trackContext(raw);
-      stateNames = trackState(raw);
-      formStateNames = trackFormState(raw);
-    }
+// Themes.
+var DEFAULT_THEME = "light";
+var theme = DEFAULT_THEME;
+var storage = new 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));
   }
-  return {
-    contextNames,
-    stateNames,
-    formStateNames
-  };
+  theme = value;
 }
-
-/** @internal */
-function transformElementProperties(element, data, to, from, mapArray) {
-  var result = preprocessTransformProperties(data, to, from, mapArray);
-  setRealProperties(element, result, true);
+function getTheme() {
+  return theme;
 }
-
-/** @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);
+function getCurrentTheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyTheme(value) {
+  if (value) {
+    setTheme(value);
+  } else {
+    value = getTheme();
   }
-  return props;
+  if (value !== getCurrentTheme()) {
+    document.documentElement.dataset.theme = value;
+    window.dispatchEvent(new CustomEvent("theme.change", {
+      detail: value
+    }));
+  }
+}
+function useCurrentTheme() {
+  var [currentTheme, setCurrentTheme] = useState(getCurrentTheme());
+  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(_objectSpread({}, 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 || {};
 }
 
-/** @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 || 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 ? transformAndInject(to, data, _internalApiGetCurrentContext()) : transform(to, data);
-    }
-    if (!dismissRecursiveMarkingInjected) {
-      recursiveMarkAsInjected(result);
-    }
-    return result;
-  }
-  if (!isObject(to) || haveBeenInjected(to)) {
-    return to;
-  }
-  if (Array.isArray(to)) {
-    var nextOptions = getNextDoTransformOptions(options, true);
-    return to.map(item => doTransform(data, item, nextOptions));
+// Modes.
+var DEFAULT_MODE = "default";
+var mode = DEFAULT_MODE;
+function setMode(value) {
+  if (value !== "dashboard" && value !== "default") {
+    throw new Error("Unsupported mode: ".concat(value));
   }
-  return Object.fromEntries(
-  // Get both string and symbol keys.
-  Object.entries(to).map(_ref => {
-    var [k, v] = _ref;
-    if (Array.isArray(options === null || options === void 0 ? void 0 : options.trackingContextList) && (typeof v === "string" ? isEvaluable(v) : isPreEvaluated(v))) {
-      var raw;
-      if (typeof v === "string") {
-        raw = v;
-      } else {
-        raw = getPreEvaluatedRaw(v);
-        addDataToPreEvaluated(v, data);
-      }
-      var {
-        contextNames,
-        stateNames,
-        formStateNames
-      } = getTracks(raw);
-      if (contextNames || stateNames || formStateNames) {
-        options.trackingContextList.push({
-          contextNames,
-          stateNames,
-          formStateNames,
-          propName: k,
-          propValue: v
-        });
-      }
-    }
-    return [k, doTransform(data, v, getNextDoTransformOptions(options, false, k))];
-  }).concat(Object.getOwnPropertySymbols(to).map(k => [k, to[k]])));
+  mode = value;
 }
-
-/** @internal */
-function reTransformForDevtools(transformationId, data, to, from, mapArray, allowInject) {
-  try {
-    preprocessTransformProperties(data, to, from, mapArray, {
-      isReTransformation: true,
-      transformationId,
-      allowInject
-    });
-  } catch (error) {
-    devtoolsHookEmit("re-transformation", {
-      id: transformationId,
-      error: error.message,
-      detail: {
-        transform: to,
-        data,
-        options: {
-          from,
-          mapArray,
-          allowInject
-        }
-      }
-    });
-  }
+function getMode() {
+  return mode;
 }
-
-/** @internal */
-function preprocessTransformProperties(data, to, from, mapArray, options) {
-  var props = {};
-  var processedData = from ? get(data, from) : data;
-  if (Array.isArray(to)) {
-    for (var item of to) {
-      pipeableTransform(props, processedData, item.to, item.from, item.mapArray, {
-        allowInject: options === null || options === void 0 ? void 0 : options.allowInject
-      });
-    }
-  } else {
-    pipeableTransform(props, processedData, to, undefined, mapArray, {
-      allowInject: options === null || options === void 0 ? void 0 : options.allowInject
-    });
-  }
-  var detail = {
-    transform: to,
-    data,
-    options: {
-      from,
-      mapArray,
-      allowInject: options === null || options === void 0 ? void 0 : options.allowInject
-    },
-    result: props
-  };
-  if (options !== null && options !== void 0 && options.isReTransformation) {
-    devtoolsHookEmit("re-transformation", {
-      id: options.transformationId,
-      detail
-    });
-  } else {
-    devtoolsHookEmit("transformation", detail);
-  }
-  return props;
+function getCurrentMode() {
+  return document.documentElement.dataset.mode;
 }
-function pipeableTransform(props, data, to, from, mapArray, options) {
-  if (!to) {
-    // Do nothing if `to` is falsy.
-    return;
-  }
-  var fromData = from ? get(data, from) : data;
-  var isArray = Array.isArray(fromData);
-  if (!isArray && mapArray === true) {
-    isArray = true;
-    fromData = [fromData];
-  } else if (isArray && mapArray === false) {
-    isArray = false;
-  }
-  if (typeof to === "string") {
-    props[to] = fromData;
-    return;
+function applyMode(value) {
+  if (value) {
+    setMode(value);
+  } else {
+    value = getMode();
   }
-  var _loop = function (transformedPropName, transformTo) {
-    // If `fromData` is an array, mapping it's items.
-    props[transformedPropName] = isArray ? fromData.map(item => doTransform(item, transformTo, options)) : doTransform(fromData, transformTo, options);
-  };
-  for (var [transformedPropName, transformTo] of Object.entries(to)) {
-    _loop(transformedPropName, transformTo);
+  if (value !== getCurrentMode()) {
+    document.documentElement.dataset.mode = value;
+    window.dispatchEvent(new CustomEvent("mode.change", {
+      detail: value
+    }));
   }
 }
-
-/** @internal */
-function transformIntermediateData(data, to, from, mapArray) {
-  var intermediateData = from ? get(data, from) : data;
-  if (!to) {
-    return intermediateData;
-  }
-  return transformProperties({}, intermediateData, to, undefined, mapArray);
+function useCurrentMode() {
+  var [currentMode, setCurrentMode] = useState(getCurrentMode());
+  useEffect(() => {
+    var listenToModeChange = event => {
+      setCurrentMode(event.detail);
+    };
+    window.addEventListener("mode.change", listenToModeChange);
+    return () => {
+      window.removeEventListener("mode.change", listenToModeChange);
+    };
+  }, []);
+  return currentMode;
 }
-function getNextDoTransformOptions(options, isArray, key) {
-  var _options$$$stateOfUse;
-  return options ? _objectSpread(_objectSpread({}, options), {}, {
-    // Collect tracking context in first level only.
-    trackingContextList: undefined,
-    $$stateOfUseBrick: options.$$lazyForUseBrick ? getNextStateOfUseBrick((_options$$$stateOfUse = options.$$stateOfUseBrick) !== null && _options$$$stateOfUse !== void 0 ? _options$$$stateOfUse : StateOfUseBrick.INITIAL, isArray, key) : undefined
-  }) : options;
+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)) || "";
 }
 
-var MESSAGE_SOURCE_PANEL = "brick-next-devtools-panel";
-var EVALUATION_EDIT = "devtools-evaluation-edit";
-var TRANSFORMATION_EDIT = "devtools-transformation-edit";
-var FRAME_ACTIVE_CHANGE = "devtools-frame-active-change";
-var PANEL_CHANGE = "devtools-panel-change";
-var frameIsActive = true;
-var selectedPanel;
+/**
+ * @description 获取菜单信息
+ * @endpoint GET /api/v1/micro-app/menus/:menuId
+ */
+var InstalledMicroAppApi_getMenusInfo = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$3(function* (menuId, params, options) {
+    return (/**! @contract easyops.api.micro_app.installed_micro_app.GetMenusInfo@1.0.0 */(yield http.get("api/gateway/micro_app.installed_micro_app.GetMenusInfo/api/v1/micro-app/menus/".concat(menuId), _objectSpread(_objectSpread({}, options), {}, {
+        params
+      }))).data
+    );
+  });
+  return function InstalledMicroAppApi_getMenusInfo(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
-/* istanbul ignore next */
-function devtoolsHookEmit(type, payload) {
-  var devtools = getDevHook();
-  if (!devtools || !(type === "evaluation" ? frameIsActive && (!selectedPanel || selectedPanel === "Evaluations") : type === "transformation" ? frameIsActive && (!selectedPanel || selectedPanel === "Transformations") : true)) {
-    // Ignore messages if current devtools panel is not relevant.
-    return;
-  }
-  var emit = () => {
-    var _devtools$emit;
-    (_devtools$emit = devtools.emit) === null || _devtools$emit === void 0 ? void 0 : _devtools$emit.call(devtools, {
-      type,
-      payload
-    });
+/** 微应用的i18n信息 */
+
+/**
+ * @description 获取微应用的i18n数据
+ * @endpoint GET /api/v1/micro-app/i18n
+ */
+var InstalledMicroAppApi_getI18NData = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$3(function* (params, options) {
+    return (/**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */(yield http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread(_objectSpread({}, options), {}, {
+        params
+      }))).data
+    );
+  });
+  return function InstalledMicroAppApi_getI18NData(_x, _x2) {
+    return _ref.apply(this, arguments);
   };
+}();
 
-  // Try to emit only in idle time.
-  if (typeof window.requestIdleCallback === "function") {
-    window.requestIdleCallback(emit);
-  } else {
-    setTimeout(emit, 0);
-  }
-}
-function listenDevtoolsEagerly() {
-  window.addEventListener("message", _ref => {
-    var {
-      data
-    } = _ref;
-    if ((data === null || data === void 0 ? void 0 : data.source) !== MESSAGE_SOURCE_PANEL) {
-      return;
-    }
-    var payload = data.payload;
-    switch (payload === null || payload === void 0 ? void 0 : payload.type) {
-      case FRAME_ACTIVE_CHANGE:
-        {
-          frameIsActive = payload.active;
-          break;
-        }
-      case PANEL_CHANGE:
-        {
-          selectedPanel = payload.panel;
-          break;
-        }
-    }
-  });
-}
-function listenDevtools() {
-  window.addEventListener("message", _ref2 => {
-    var {
-      data
-    } = _ref2;
-    if ((data === null || data === void 0 ? void 0 : data.source) !== MESSAGE_SOURCE_PANEL) {
-      return;
-    }
-    var payload = data.payload;
-    switch (payload === null || payload === void 0 ? void 0 : payload.type) {
-      case EVALUATION_EDIT:
-        {
-          var {
-            raw,
-            context,
-            id
-          } = payload;
-          evaluate(raw, {
-            data: context.data,
-            event: restoreDehydrated(context.event)
-          }, {
-            isReEvaluation: true,
-            evaluationId: id
-          });
-          break;
-        }
-      case TRANSFORMATION_EDIT:
-        {
-          var {
-            data: _data,
-            transform,
-            id: _id,
-            options: {
-              from,
-              mapArray,
-              allowInject
-            }
-          } = payload;
-          reTransformForDevtools(_id, _data, transform, from, mapArray, allowInject);
-          break;
-        }
-    }
+/**
+ * @description 校验系统权限
+ * @endpoint POST /api/micro_app/v1/permission/validate
+ */
+var PermissionApi_validatePermissions = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$3(function* (data, options) {
+    return (/**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */(yield http.post("api/gateway/micro_app.permission.ValidatePermissions/api/micro_app/v1/permission/validate", data, options)).data
+    );
   });
-}
-function getDevHook() {
-  return window.__BRICK_NEXT_DEVTOOLS_HOOK__;
-}
-function restoreDehydrated(value) {
-  var _getDevHook$restoreDe, _getDevHook;
-  return (_getDevHook$restoreDe = (_getDevHook = getDevHook()) === null || _getDevHook === void 0 ? void 0 : _getDevHook.restoreDehydrated(value)) !== null && _getDevHook$restoreDe !== void 0 ? _getDevHook$restoreDe : value;
-}
-
-function getItemFactory(storageType) {
-  return function (name) {
-    var storage = storageType === "local" ? localStorage : sessionStorage;
-    return JSON.parse(storage.getItem(name));
+  return function PermissionApi_validatePermissions(_x, _x2) {
+    return _ref.apply(this, arguments);
   };
-}
-
-var locale$7 = {
-  [K.REQUEST_FAILED]: "Request Failed",
-  [K.MODAL_OK]: "Ok",
-  [K.MODAL_CANCEL]: "Cancel",
-  [K.SOMETHING_WENT_WRONG]: "Something went wrong!",
-  [K.LOGIN_TIMEOUT_MESSAGE]: "You haven't logged in or your login session has expired. Login right now?",
-  [K.NETWORK_ERROR]: "Network error, please check your network.",
-  [K.PAGE_NOT_FOUND]: "Page not found, please check the URL",
-  [K.APP_NOT_FOUND]: "App not found, maybe the URL is wrong or you don't have permission to access",
-  [K.LICENSE_EXPIRED]: "The license authorization has expired, please contact the platform administrator",
-  [K.NO_PERMISSION]: "Unauthorized access, unable to retrieve the required resources for this page",
-  [K.OTHER_ERROR]: "Oops! Something went wrong",
-  [K.GO_BACK_PREVIOUS_PAGE]: "Go back to previous page",
-  [K.GO_BACK_HOME_PAGE]: "Back to home page",
-  [K.LOGIN_CHANGED]: "You have logged in as another account, click OK to refresh the page.",
-  [K.LOGOUT_APPLIED]: "Your account has been logged out, click OK to refresh the page."
-};
-var en = locale$7;
-
-var locale$6 = {
-  [K.REQUEST_FAILED]: "请求失败",
-  [K.MODAL_OK]: "确认",
-  [K.MODAL_CANCEL]: "取消",
-  [K.SOMETHING_WENT_WRONG]: "出现了一些问题！",
-  [K.LOGIN_TIMEOUT_MESSAGE]: "您还未登录或登录信息已过期，现在重新登录？",
-  [K.NETWORK_ERROR]: "网络错误，请检查您的网络连接。",
-  [K.PAGE_NOT_FOUND]: "请求的页面未找到，请确认 URL 是否正确",
-  [K.APP_NOT_FOUND]: "请求的微应用无法找到, 可能是 URL 错误或者无权限访问",
-  [K.LICENSE_EXPIRED]: "License 授权失效，请联系平台管理员",
-  [K.NO_PERMISSION]: "没有权限，无法获取页面所需要的资源",
-  [K.OTHER_ERROR]: "糟糕！页面出现了一些问题",
-  [K.GO_BACK_PREVIOUS_PAGE]: "回到上一页",
-  [K.GO_BACK_HOME_PAGE]: "回到首页",
-  [K.LOGIN_CHANGED]: "您已经登录另一个账号，点击确定刷新页面。",
-  [K.LOGOUT_APPLIED]: "您的账号已经登出，点击确定刷新页面。"
-};
-var zh = locale$6;
-
-/** @internal */
-var initI18n = () => {
-  i18next.addResourceBundle("en", NS_BRICK_KIT, en);
-  i18next.addResourceBundle("zh", NS_BRICK_KIT, zh);
-};
-
-/** @internal */
-function getI18nNamespace(type, id) {
-  return "$".concat(type, "-").concat(id);
-}
-
-function registerWidgetI18n(widgetId, i18n) {
-  var ns = getI18nNamespace("widget", widgetId);
-  Object.entries(i18n).forEach(_ref => {
-    var [lang, resources] = _ref;
-    i18next.addResourceBundle(lang, ns, resources);
-  });
-}
-function widgetI18nFactory(widgetId) {
-  return getFixedT(null, getI18nNamespace("widget", widgetId));
-}
-
-function i18nText(data) {
-  var _i18next$language;
-  if (!data) {
-    return;
-  }
-  var language = (_i18next$language = i18next.language) !== null && _i18next$language !== void 0 ? _i18next$language : "zh-CN";
-  // First, make a perfect match.
-  if (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 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];
-    }
-  }
-}
+}();
 
 var auth = {};
 
@@ -2348,1122 +2234,1236 @@ function getCustomContextTriggerListByLifecycle(lifecycle) {
   return [...tplContextMap.values()].map(tplContext => tplContext.state.getContextTriggerSetByLifecycle(lifecycle)).filter(trigger => trigger.length > 0).flat(1);
 }
 
-var MediaBreakpoint;
-(function (MediaBreakpoint) {
-  MediaBreakpoint["xLarge"] = "xLarge";
-  MediaBreakpoint["large"] = "large";
-  MediaBreakpoint["medium"] = "medium";
-  MediaBreakpoint["small"] = "small";
-  MediaBreakpoint["xSmall"] = "xSmall";
-})(MediaBreakpoint || (MediaBreakpoint = {}));
-var mediaBreakpointMinWidthMap = new Map([[MediaBreakpoint.xLarge, "1920px"], [MediaBreakpoint.large, "1600px"], [MediaBreakpoint.medium, "1280px"], [MediaBreakpoint.small, "1024px"], [MediaBreakpoint.xSmall, 0]]);
-var mediaEventTarget = new EventTarget$1();
-var breakpointMatchesMap = {};
-var MEDIA = {};
-function handleMatchesChange(data, breakpoint) {
-  var changed = false;
-  breakpointMatchesMap[breakpoint] = data.matches;
-  for (var [_breakpoint] of mediaBreakpointMinWidthMap) {
-    if (breakpointMatchesMap[_breakpoint] && MEDIA.breakpoint !== _breakpoint) {
-      MEDIA.breakpoint = _breakpoint;
-      changed = true;
-      break;
-    }
+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 (changed) {
-    mediaEventTarget.dispatchEvent(new CustomEvent("change", {
-      detail: MEDIA
-    }));
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
   }
 }
-mediaBreakpointMinWidthMap.forEach((minWidth, breakpoint) => {
-  var mediaQueryList = window.matchMedia("(min-width: ".concat(minWidth, ")"));
-  handleMatchesChange(mediaQueryList, breakpoint);
-  if (mediaQueryList.addEventListener) {
-    mediaQueryList.addEventListener("change", event => {
-      handleMatchesChange(event, breakpoint);
+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 {
-    mediaQueryList.addListener(event => {
-      handleMatchesChange(event, breakpoint);
+    obj[key] = value;
+  }
+  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);
   }
-});
-var getMedia = () => MEDIA;
-
-var FormContextMap = new Map();
-class CustomFormContext {
-  constructor(renderId) {
-    _defineProperty$1(this, "formState", void 0);
-    _defineProperty$1(this, "id", uniqueId("form-ctx-"));
-    FormContextMap.set(this.id, this);
-    this.formState = new StoryboardContextWrapper(undefined, this.id, renderId);
-  }
+  return keys;
 }
-function getCustomFormContext(formContextId) {
-  return FormContextMap.get(formContextId);
+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;
 }
 
-var symbolForRaw = Symbol.for("pre.evaluated.raw");
-var symbolForContext = Symbol.for("pre.evaluated.context");
-function isPreEvaluated(raw) {
-  return !!(raw !== null && raw !== void 0 && raw[symbolForRaw]);
+/**
+ * @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 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 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 getPreEvaluatedRaw(pre) {
-  return pre[symbolForRaw];
+function _constructMenu() {
+  _constructMenu = _asyncToGenerator$3(function* (menuBar, context, kernel) {
+    var hasSubMenu = !!menuBar.subMenuId;
+    yield Promise.all([_asyncToGenerator$3(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$3(function* () {
+      if (hasSubMenu) {
+        menuBar.subMenu = yield processMenu(menuBar.subMenuId, context, kernel);
+      } else {
+        menuBar.subMenu = null;
+      }
+    })()]);
+  });
+  return _constructMenu.apply(this, arguments);
 }
-function addDataToPreEvaluated(pre, data) {
-  pre[symbolForContext].data = data;
+function preConstructMenus(_x4, _x5, _x6) {
+  return _preConstructMenus.apply(this, arguments);
 }
-function shouldDismissRecursiveMarkingInjected(raw) {
-  if (typeof raw === "string") {
-    return shouldAllowRecursiveEvaluations(raw);
-  }
-  return shouldAllowRecursiveEvaluations(raw[symbolForRaw]);
+function _preConstructMenus() {
+  _preConstructMenus = _asyncToGenerator$3(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 possibleErrorConstructs = new WeakSet([SyntaxError, TypeError, ReferenceError]);
-function getCookErrorConstructor(error) {
-  return possibleErrorConstructs.has(error.constructor) ? error.constructor : TypeError;
+var getMenu = menuId => processMenuCache.get(menuId);
+function fetchMenuById(_x7, _x8, _x9) {
+  return _fetchMenuById.apply(this, arguments);
 }
-
-// `raw` should always be asserted to `isEvaluable` or `isPreEvaluated`.
-function evaluate(raw) {
-  var _runtimeContext$overr;
-  var runtimeContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (options.isReEvaluation && !(typeof raw === "string" && isEvaluable(raw))) {
-    devtoolsHookEmit("re-evaluation", {
-      id: options.evaluationId,
-      detail: {
-        raw,
-        context: {}
-      },
-      error: "Invalid evaluation code"
-    });
-    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(_objectSpread({}, raw[symbolForContext]), runtimeContext);
-    raw = raw[symbolForRaw];
-  }
-
-  // A `SyntaxError` maybe thrown.
-  var precooked;
-  try {
-    precooked = 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 (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 && !hasOwnProperty(runtimeContext, "tplContextId");
-  var missingData = attemptToVisitData && !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();
+function _fetchMenuById() {
+  _fetchMenuById = _asyncToGenerator$3(function* (menuId, kernel, isPreFetch) {
+    if (menuCache.has(menuId)) {
+      return menuCache.get(menuId);
     }
-    if (attemptToVisitState) {
-      globalVariables.STATE = getDynamicReadOnlyProxy({
-        get(target, key) {
-          return tplContext.state.getValue(key);
+    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
         },
-        ownKeys() {
-          return Array.from(tplContext.state.get().keys());
+        app: {
+          $size: {
+            $gt: 0
+          }
         }
-      });
+      }
+    })).list;
+    var menuData = yield mergeMenu(menuList, kernel);
+    if (!menuData) {
+      throw new Error("Menu not found: ".concat(menuId));
     }
-  }
-  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());
+    reorderMenu(menuData);
+    menuData[symbolShouldCache] && menuCache.set(menuId, menuData);
+    return menuData;
+  });
+  return _fetchMenuById.apply(this, arguments);
+}
+function mergeMenu(_x10, _x11) {
+  return _mergeMenu.apply(this, arguments);
+}
+function _mergeMenu() {
+  _mergeMenu = _asyncToGenerator$3(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.addResourceBundle(lang, menuI18nNamespace, resources);
+          });
+          menuWithI18n.set(menu, menuI18nNamespace);
+        })();
+      }
+    }
+    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 _objectSpread(_objectSpread({}, 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(_objectSpread({}, 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$3(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 = deepFreeze(merge({}, menu.overrideApp.defaultConfig, menu.overrideApp.userConfig));
+          }
+          newContext = _objectSpread(_objectSpread({}, context), {}, {
+            overrideApp: menu.overrideApp,
+            appendI18nNamespace: menuWithI18n.get(menu)
+          });
+        } else {
+          var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+          newContext = _objectSpread(_objectSpread({}, context), {}, {
+            overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
+            appendI18nNamespace: menuWithI18n.get(menu)
+          });
+        }
+      }
+      var usedActions = scanPermissionActionsInAny(menu.itemsResolve);
+      yield validatePermissions(usedActions);
+      yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
+        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"]);
+      }
+    }
+    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);
+}
+function _processMenu() {
+  _processMenu = _asyncToGenerator$3(function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
+    var _yield$fetchMenuById = yield fetchMenuById(menuId, kernel, isPreFetch),
+      {
+        items,
+        app
+      } = _yield$fetchMenuById,
+      restMenuData = _objectWithoutProperties(_yield$fetchMenuById, _excluded3);
+    var usedActions = 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);
+    }
+    collectAppsRequireI18nFulfilled(items, context.app.id, appsRequireI18nFulfilled);
+    yield kernel.fulfilStoryboardI18n([...appsRequireI18nFulfilled]);
+    var menuData = _objectSpread(_objectSpread({}, 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(_ref, _excluded$8);
+      var overrideAppId = rest[symbolAppId];
+      if (!rest[symbolMenuI18nNamespace] && overrideAppId !== contextAppId && !appIds.has(overrideAppId) && attemptToVisit(rest, ["I18N"])) {
+        appIds.add(overrideAppId);
+      }
+      children && collect(children);
+    }
+  }
+  collect(items);
+}
+function computeMenuItemsWithOverrideApp(items, context, kernel) {
+  return Promise.all(items.map( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator$3(function* (_ref2) {
+      var {
+          children
+        } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded2$2);
+      return _objectSpread(_objectSpread({}, 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$3(function* (menuData) {
+    if (menuData.title || isEmpty(menuData.titleDataSource)) {
+      return menuData.title;
+    }
+    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(_objectSpread({}, 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 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 (isEvaluable(data)) {
+      if (globals.some(key => data.includes(key))) {
+        var {
+          attemptToVisitGlobals
+        } = preevaluate(data);
+        return globals.some(key => attemptToVisitGlobals.has(key));
+      }
+    } else if (globals.includes("APP")) {
+      return /\${\s*APP\s*\./.test(data);
+    }
+  } else if (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$3(function* (data, overrideAppId, context, kernel) {
+    if ("titleDataSource" in data && 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 && !isEvaluable(data.to)) {
+      var yaml = pipes.yaml(data.to);
+      if (isObject(yaml) && ["pathname", "search", "hash"].some(key => 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 = deepFreeze(merge({}, data[symbolOverrideApp].defaultConfig, data[symbolOverrideApp].userConfig));
+        }
+        newContext = _objectSpread(_objectSpread({}, context), {}, {
+          overrideApp: data[symbolOverrideApp],
+          appendI18nNamespace: data[symbolMenuI18nNamespace]
+        });
+      } else {
+        var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+        newContext = _objectSpread(_objectSpread({}, context), {}, {
+          overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
+          appendI18nNamespace: data[symbolMenuI18nNamespace]
+        });
       }
+    }
+    var processors = 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;
+(function (MediaBreakpoint) {
+  MediaBreakpoint["xLarge"] = "xLarge";
+  MediaBreakpoint["large"] = "large";
+  MediaBreakpoint["medium"] = "medium";
+  MediaBreakpoint["small"] = "small";
+  MediaBreakpoint["xSmall"] = "xSmall";
+})(MediaBreakpoint || (MediaBreakpoint = {}));
+var mediaBreakpointMinWidthMap = new Map([[MediaBreakpoint.xLarge, "1920px"], [MediaBreakpoint.large, "1600px"], [MediaBreakpoint.medium, "1280px"], [MediaBreakpoint.small, "1024px"], [MediaBreakpoint.xSmall, 0]]);
+var mediaEventTarget = new EventTarget$1();
+var breakpointMatchesMap = {};
+var MEDIA = {};
+function handleMatchesChange(data, breakpoint) {
+  var changed = false;
+  breakpointMatchesMap[breakpoint] = data.matches;
+  for (var [_breakpoint] of mediaBreakpointMinWidthMap) {
+    if (breakpointMatchesMap[_breakpoint] && MEDIA.breakpoint !== _breakpoint) {
+      MEDIA.breakpoint = _breakpoint;
+      changed = true;
+      break;
+    }
+  }
+  if (changed) {
+    mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+      detail: MEDIA
+    }));
+  }
+}
+mediaBreakpointMinWidthMap.forEach((minWidth, breakpoint) => {
+  var mediaQueryList = window.matchMedia("(min-width: ".concat(minWidth, ")"));
+  handleMatchesChange(mediaQueryList, breakpoint);
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", event => {
+      handleMatchesChange(event, breakpoint);
+    });
+  } else {
+    mediaQueryList.addListener(event => {
+      handleMatchesChange(event, breakpoint);
     });
   }
-  var internalContext = _internalApiGetCurrentContext();
-  var mergedContext = {};
+});
+var getMedia = () => MEDIA;
 
-  // 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] = (hasOwnProperty(runtimeContext, key) ? runtimeContext : internalContext)[key];
+var FormContextMap = new Map();
+class CustomFormContext {
+  constructor(renderId) {
+    _defineProperty$1(this, "formState", void 0);
+    _defineProperty$1(this, "id", uniqueId("form-ctx-"));
+    FormContextMap.set(this.id, this);
+    this.formState = new StoryboardContextWrapper(undefined, this.id, renderId);
   }
-  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(_objectSpread({}, 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;
-    }
+}
+function getCustomFormContext(formContextId) {
+  return FormContextMap.get(formContextId);
+}
+
+var symbolForRaw = Symbol.for("pre.evaluated.raw");
+var symbolForContext = Symbol.for("pre.evaluated.context");
+function isPreEvaluated(raw) {
+  return !!(raw !== null && raw !== void 0 && raw[symbolForRaw]);
+}
+function getPreEvaluatedRaw(pre) {
+  return pre[symbolForRaw];
+}
+function addDataToPreEvaluated(pre, data) {
+  pre[symbolForContext].data = data;
+}
+function shouldDismissRecursiveMarkingInjected(raw) {
+  if (typeof raw === "string") {
+    return shouldAllowRecursiveEvaluations(raw);
   }
-  for (var variableName of attemptToVisitGlobals) {
-    var variable = getIndividualGlobal(variableName);
-    if (variable !== undefined) {
-      globalVariables[variableName] = variable;
-    }
+  return shouldAllowRecursiveEvaluations(raw[symbolForRaw]);
+}
+var possibleErrorConstructs = new WeakSet([SyntaxError, TypeError, ReferenceError]);
+function getCookErrorConstructor(error) {
+  return possibleErrorConstructs.has(error.constructor) ? error.constructor : TypeError;
+}
+
+// `raw` should always be asserted to `isEvaluable` or `isPreEvaluated`.
+function evaluate(raw) {
+  var _runtimeContext$overr;
+  var runtimeContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (options.isReEvaluation && !(typeof raw === "string" && isEvaluable(raw))) {
+    devtoolsHookEmit("re-evaluation", {
+      id: options.evaluationId,
+      detail: {
+        raw,
+        context: {}
+      },
+      error: "Invalid evaluation code"
+    });
+    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(_objectSpread({}, 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 = 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 = 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 _, _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 = (_ = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _ !== void 0 ? _ : -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 (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 = isObject(baseValue) ? computeRealValue(baseValue, context, true) : {};
-  return proxies.reduce((acc, proxy) => {
-    switch (proxy.mergeMethod) {
-      case "extend":
-        return _objectSpread(_objectSpread({}, 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 && !hasOwnProperty(runtimeContext, "tplContextId");
+  var missingData = attemptToVisitData && !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 = 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 (!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 (!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 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(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(_objectSpread({}, 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 || 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] = (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(_objectSpread({}, 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 (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 : 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 && 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 = 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;
+    var detail = {
+      raw,
+      context: globalVariables,
+      result
+    };
+    if (options.isReEvaluation) {
+      devtoolsHookEmit("re-evaluation", {
+        id: options.evaluationId,
+        detail
+      });
+    } else {
+      devtoolsHookEmit("evaluation", detail);
+    }
+    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
+      });
     } else {
-      if (extractProps) {
-        set(brick, propName, propValue);
-      } else {
-        brick[propName] = propValue;
-      }
+      var _errorConstructor = getCookErrorConstructor(error);
+      throw new _errorConstructor(_message);
     }
   }
 }
-function computeRealProperties(properties, context, injectDeep, trackingContextList) {
-  var result = {};
-  if (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" || 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
-          });
-        }
-      }
-    }
-  }
-  return result;
+
+function isBasicProperty(propRef) {
+  return !!propRef.refProperty;
 }
-function getNextInternalOptions(internalOptions, isArray, key) {
-  return internalOptions !== null && internalOptions !== void 0 && internalOptions.$$lazyForUseBrick ? _objectSpread(_objectSpread({}, internalOptions), {}, {
-    $$stateOfUseBrick: getNextStateOfUseBrick(internalOptions.$$stateOfUseBrick, isArray, key)
-  }) : internalOptions;
+function isTransformableProperty(propRef) {
+  return !!propRef.refTransform;
 }
-
-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 isMergeableProperty(propRef) {
+  return !!propRef.mergeProperty;
 }
-function _constructMenu() {
-  _constructMenu = _asyncToGenerator$3(function* (menuBar, context, kernel) {
-    var hasSubMenu = !!menuBar.subMenuId;
-    yield Promise.all([_asyncToGenerator$3(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$3(function* () {
-      if (hasSubMenu) {
-        menuBar.subMenu = yield processMenu(menuBar.subMenuId, context, kernel);
-      } else {
-        menuBar.subMenu = null;
-      }
-    })()]);
-  });
-  return _constructMenu.apply(this, arguments);
+function isRefProperty(propRef) {
+  return !!propRef.ref;
 }
-function preConstructMenus(_x4, _x5, _x6) {
-  return _preConstructMenus.apply(this, arguments);
+function isVariableProperty(propRef) {
+  return !!propRef.asVariable;
 }
-function _preConstructMenus() {
-  _preConstructMenus = _asyncToGenerator$3(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 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]])));
 }
-var getMenu = menuId => processMenuCache.get(menuId);
-function fetchMenuById(_x7, _x8, _x9) {
-  return _fetchMenuById.apply(this, arguments);
+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 _fetchMenuById() {
-  _fetchMenuById = _asyncToGenerator$3(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
-          }
+function propertyMergeAllOfArray(_ref, object) {
+  var _, _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 = (_ = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _ !== void 0 ? _ : -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$3(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 = isObject(baseValue) ? computeRealValue(baseValue, context, true) : {};
+  return proxies.reduce((acc, proxy) => {
+    switch (proxy.mergeMethod) {
+      case "extend":
+        return _objectSpread(_objectSpread({}, 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.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 = 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(_objectSpread({}, 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(_objectSpread({}, 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$3(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 = deepFreeze(merge({}, menu.overrideApp.defaultConfig, menu.overrideApp.userConfig));
-          }
-          newContext = _objectSpread(_objectSpread({}, context), {}, {
-            overrideApp: menu.overrideApp,
-            appendI18nNamespace: menuWithI18n.get(menu)
-          });
-        } else {
-          var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-          newContext = _objectSpread(_objectSpread({}, context), {}, {
-            overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
-            appendI18nNamespace: menuWithI18n.get(menu)
-          });
-        }
+    var _loop = function (slotName, _quasis) {
+      if (!hasOwnProperty(slots, slotName)) {
+        slots[slotName] = {
+          type: "bricks",
+          bricks: []
+        };
       }
-      var usedActions = scanPermissionActionsInAny(menu.itemsResolve);
-      yield validatePermissions(usedActions);
-      yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
-        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$3(function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
-    var _yield$fetchMenuById = yield fetchMenuById(menuId, kernel, isPreFetch),
-      {
-        items,
-        app
-      } = _yield$fetchMenuById,
-      restMenuData = _objectWithoutProperties(_yield$fetchMenuById, _excluded3);
-    var usedActions = 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(_objectSpread({}, 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(_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 (!isObject(props) || !isPlainObject(props)) {
+      return props;
     }
+    return Object.fromEntries(Object.entries(props).map(_ref => {
+      var [key, value] = _ref;
+      return 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$3(function* (_ref2) {
-      var {
-          children
-        } = _ref2,
-        rest = _objectWithoutProperties(_ref2, _excluded2$2);
-      return _objectSpread(_objectSpread({}, 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(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(_objectSpread({}, 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$3(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 || 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 (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 : 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 && 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(_objectSpread({}, 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 (isEvaluable(data)) {
-      if (globals.some(key => data.includes(key))) {
-        var {
-          attemptToVisitGlobals
-        } = 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 (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$3(function* (data, overrideAppId, context, kernel) {
-    if ("titleDataSource" in data && 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 && !isEvaluable(data.to)) {
-      var yaml = pipes.yaml(data.to);
-      if (isObject(yaml) && ["pathname", "search", "hash"].some(key => hasOwnProperty(yaml, key))) {
-        data.to = yaml;
+function computeRealProperties(properties, context, injectDeep, trackingContextList) {
+  var result = {};
+  if (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" || 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 = 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(_objectSpread({}, context), {}, {
-          overrideApp: data[symbolOverrideApp],
-          appendI18nNamespace: data[symbolMenuI18nNamespace]
-        });
-      } else {
-        var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-        newContext = _objectSpread(_objectSpread({}, context), {}, {
-          overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
-          appendI18nNamespace: data[symbolMenuI18nNamespace]
-        });
       }
     }
-    var processors = 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(_objectSpread({}, 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();
@@ -3655,10 +3655,39 @@ function _dev_only_getAllContextValues(_ref2) {
 }
 
 /* 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$3(function* (debugData, _ref3) {
+    var {
+      tplContextId
+    } = _ref3;
+    var runtimeContext = _objectSpread(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
+      tplContextId
+    });
+    if (debugData.resolve) {
+      var hasTransform = debugData.resolve.transform;
+      var result = {};
+      yield _internalApiGetResolver().resolveOne("reference", hasTransform ? debugData.resolve : _objectSpread(_objectSpread({}, debugData.resolve), {}, {
+        transform: "value"
+      }), result, null, runtimeContext, {
+        cache: "reload"
+      });
+
+      // 跟 v3 的数据结构保持一致，有 transform 时返回完整定义，无 transform 时直接返回数据
+      return hasTransform ? result : result.value;
+    }
+    return computeRealValue(debugData.value, runtimeContext, true);
+  });
+  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() {
@@ -5993,6 +6022,7 @@ var ContractApi_searchSingleContract = /*#__PURE__*/function () {
 
 var contractsMap = new Map();
 var widgetContractMap = new Map();
+var debugContractMap = new Map();
 var addContract = (contracts, map) => {
   contracts === null || contracts === void 0 ? void 0 : contracts.forEach(contract => {
     map.set("".concat(contract.namespaceId, ".").concat(contract.name), contract);
@@ -6007,8 +6037,14 @@ function collectWidgetContract(contracts) {
 function clearCollectWidgetContract() {
   widgetContractMap.clear();
 }
+function collectDebugContract(contracts) {
+  addContract(contracts, debugContractMap);
+}
+function clearDebugContract() {
+  debugContractMap.clear();
+}
 function getContract(name) {
-  return contractsMap.get(name) || widgetContractMap.get(name);
+  return contractsMap.get(name) || widgetContractMap.get(name) || debugContractMap.get(name);
 }
 
 var remoteContractCache = new Map();
@@ -14447,6 +14483,7 @@ var developHelper = {
   getAddedContracts: _dev_only_getAddedContracts,
   getContextValue: _dev_only_getContextValue,
   getAllContextValues: _dev_only_getAllContextValues,
+  debugDataValue: _dev_only_debugDataValue,
   render: _dev_only_render,
   setRealTimeDataInspectRoot,
   addRealTimeDataInspectHook
@@ -15087,5 +15124,5 @@ function constructEventListener(handler) {
   });
 }
 
-export { BrickAsComponent, BrickAsComponentFactory, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ForwardRefSingleBrickAsComponentFactory, ModalElement, SingleBrickAsComponent, SingleBrickAsComponentFactory, StoryboardFunctionRegistryFactory, UpdatingElement, WebsocketMessageRequest, WebsocketMessageResponse, abortController, applyTheme, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, constructEventListener, createHistory, createRuntime, createWebSocket, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRealValue, getRuntime, getRuntimeMisc, getWebSocket, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf$1 as looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
+export { BrickAsComponent, BrickAsComponentFactory, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ForwardRefSingleBrickAsComponentFactory, ModalElement, SingleBrickAsComponent, SingleBrickAsComponentFactory, StoryboardFunctionRegistryFactory, UpdatingElement, WebsocketMessageRequest, WebsocketMessageResponse, abortController, applyTheme, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, clearDebugContract, collectDebugContract, constructEventListener, createHistory, createRuntime, createWebSocket, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRealValue, getRuntime, getRuntimeMisc, getWebSocket, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf$1 as looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
 //# sourceMappingURL=index.esm.js.map