@easy-editor/core 1.0.1 → 1.0.3

package/dist/index.js

@@ -77,6 +77,9 @@ const isPluginEventName = eventName => {
   const eventSegments = eventName.split(':');
   return eventSegments.length > 1 && eventSegments[0].length > 0;
 };
+const isRemoteComponent = schema => {
+  return !!(schema.npm && schema.npm.package && schema.npm.package !== 'builtin');
+};
 
 const levels = {
   debug: -1,
@@ -718,7 +721,7 @@ const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwy
 
 let nanoid = (size = 21) => {
   let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array(size));
+  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
   while (size--) {
     id += urlAlphabet[bytes[size] & 63];
   }
@@ -970,12 +973,12 @@ function _applyDecs2311(e, t, n, r, o, i) {
           t[4](this, e);
         }
       } : P[F] = v, l || _setFunctionName(P[F], r, E ? "" : F)) : l || (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) {
-        if ((c = y[+s][r]) && 7 != (c ^ o)) throw Error("Decorating two elements with the same name (" + P[F].name + ") is not supported yet");
+        if ((c = y[+s][r]) && 7 !== (c ^ o)) throw Error("Decorating two elements with the same name (" + P[F].name + ") is not supported yet");
         y[+s][r] = o < 3 ? 1 : o;
       }
     }
     for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) {
-      var T = b(h[O], "A decorator", "be", !0),
+      var T = b(h[O], "A decorator", "be", true),
         z = n ? h[O - 1] : void 0,
         A = {},
         H = {
@@ -984,7 +987,7 @@ function _applyDecs2311(e, t, n, r, o, i) {
           metadata: a,
           addInitializer: function (e, t) {
             if (e.v) throw new TypeError("attempted to call addInitializer after decoration was finished");
-            b(t, "An initializer", "be", !0), i.push(t);
+            b(t, "An initializer", "be", true), i.push(t);
           }.bind(null, A)
         };
       if (w) c = T.call(z, N, H), A.v = 1, b(c, "class decorators", "return") && (N = c);else if (H.static = s, H.private = f, c = H.access = {
@@ -1008,8 +1011,8 @@ function _applyDecs2311(e, t, n, r, o, i) {
   }
   function w(e) {
     return m(e, d, {
-      configurable: !0,
-      enumerable: !0,
+      configurable: true,
+      enumerable: true,
       value: a
     });
   }
@@ -1055,7 +1058,7 @@ function _toPrimitive$1(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -1323,12 +1326,12 @@ function _arrayLikeToArray(r, a) {
 function _defineProperties(e, r) {
   for (var t = 0; t < r.length; t++) {
     var o = r[t];
-    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
   }
 }
 function _createClass(e, r, t) {
   return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-    writable: !1
+    writable: false
   }), e;
 }
 function _createForOfIteratorHelperLoose(r, e) {
@@ -1339,9 +1342,9 @@ function _createForOfIteratorHelperLoose(r, e) {
     var o = 0;
     return function () {
       return o >= r.length ? {
-        done: !0
+        done: true
       } : {
-        done: !1,
+        done: false,
         value: r[o++]
       };
     };
@@ -1515,15 +1518,9 @@ function createAtom(name, onBecomeObservedHandler, onBecomeUnobservedHandler) {
   }
   return atom;
 }
-function identityComparer(a, b) {
-  return a === b;
-}
 function structuralComparer(a, b) {
   return deepEqual(a, b);
 }
-function shallowComparer(a, b) {
-  return deepEqual(a, b, 1);
-}
 function defaultComparer(a, b) {
   if (Object.is) {
     return Object.is(a, b);
@@ -1531,11 +1528,8 @@ function defaultComparer(a, b) {
   return a === b ? a !== 0 || 1 / a === 1 / b : a !== a && b !== b;
 }
 var comparer = {
-  identity: identityComparer,
   structural: structuralComparer,
-  "default": defaultComparer,
-  shallow: shallowComparer
-};
+  "default": defaultComparer};
 function deepEnhancer(v, _, name) {
   if (isObservable(v)) {
     return v;
@@ -1926,7 +1920,8 @@ function make_$5(adm, key, descriptor, source) {
     return computed.make_(adm, key, descriptor, source);
   }
   if (descriptor.set) {
-    var set = createAction(key.toString(), descriptor.set);
+    var set = isAction(descriptor.set) ? descriptor.set
+    : createAction(key.toString(), descriptor.set);
     if (source === adm.target_) {
       return adm.defineProperty_(key, {
         configurable: globalState.safeDescriptors ? adm.isPlainObject_ : true,
@@ -2247,12 +2242,13 @@ var ObservableValue = /*#__PURE__*/function (_Atom) {
     _this.equals = equals;
     _this.value_ = enhancer(value, undefined, name_);
     if (process.env.NODE_ENV !== "production" && notifySpy && isSpyEnabled()) {
+      var _this$value_;
       spyReport({
         type: CREATE,
         object: _this,
         observableKind: "value",
         debugObjectName: _this.name_,
-        newValue: "" + _this.value_
+        newValue: "" + ((_this$value_ = _this.value_) == null ? void 0 : _this$value_.toString())
       });
     }
     return _this;
@@ -2406,7 +2402,7 @@ var ComputedValue = /*#__PURE__*/function () {
       });
     }
   }
-  ;
+;
   _proto.get = function get() {
     if (this.isComputing) {
       die(32, this.name_, this.derivation);
@@ -3102,6 +3098,9 @@ var Reaction = /*#__PURE__*/function () {
     };
     abortSignal == null || abortSignal.addEventListener == null || abortSignal.addEventListener("abort", dispose);
     dispose[$mobx] = this;
+    if ("dispose" in Symbol && typeof Symbol.dispose === "symbol") {
+      dispose[Symbol.dispose] = dispose;
+    }
     return dispose;
   };
   _proto.toString = function toString() {
@@ -4663,6 +4662,7 @@ var ObservableSet = /*#__PURE__*/function () {
       if (!change) {
         return this;
       }
+      value = change.newValue;
     }
     if (!this.has(value)) {
       transaction(function () {
@@ -4734,19 +4734,18 @@ var ObservableSet = /*#__PURE__*/function () {
     return this.data_.has(this.dehanceValue_(value));
   };
   _proto.entries = function entries() {
-    var nextIndex = 0;
-    var keys = Array.from(this.keys());
-    var values = Array.from(this.values());
+    var values = this.values();
     return makeIterableForSet({
       next: function next() {
-        var index = nextIndex;
-        nextIndex += 1;
-        return index < values.length ? {
-          value: [keys[index], values[index]],
-          done: false
+        var _values$next = values.next(),
+          value = _values$next.value,
+          done = _values$next.done;
+        return !done ? {
+          value: [value, value],
+          done: done
         } : {
           value: undefined,
-          done: true
+          done: done
         };
       }
     });
@@ -4757,16 +4756,18 @@ var ObservableSet = /*#__PURE__*/function () {
   _proto.values = function values() {
     this.atom_.reportObserved();
     var self = this;
-    var nextIndex = 0;
-    var observableValues = Array.from(this.data_.values());
+    var values = this.data_.values();
     return makeIterableForSet({
       next: function next() {
-        return nextIndex < observableValues.length ? {
-          value: self.dehanceValue_(observableValues[nextIndex++]),
-          done: false
+        var _values$next2 = values.next(),
+          value = _values$next2.value,
+          done = _values$next2.done;
+        return !done ? {
+          value: self.dehanceValue_(value),
+          done: done
         } : {
           value: undefined,
-          done: true
+          done: done
         };
       }
     });
@@ -4982,7 +4983,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
       }, this.defaultAnnotation_, proxyTrap);
     }
   }
-  ;
+;
   _proto.has_ = function has_(key) {
     if (!globalState.trackingDerivation) {
       return key in this.target_;
@@ -5088,7 +5089,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     return true;
   }
-  ;
+;
   _proto.defineObservableProperty_ = function defineObservableProperty_(key, value, enhancer, proxyTrap) {
     if (proxyTrap === void 0) {
       proxyTrap = false;
@@ -5134,7 +5135,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     return true;
   }
-  ;
+;
   _proto.defineComputedProperty_ = function defineComputedProperty_(key, options, proxyTrap) {
     if (proxyTrap === void 0) {
       proxyTrap = false;
@@ -5644,13 +5645,12 @@ function eq(a, b, depth, aStack, bStack) {
     }
   } else {
     var keys = Object.keys(a);
-    var key;
-    length = keys.length;
-    if (Object.keys(b).length !== length) {
+    var _length = keys.length;
+    if (Object.keys(b).length !== _length) {
       return false;
     }
-    while (length--) {
-      key = keys[length];
+    for (var i = 0; i < _length; i++) {
+      var key = keys[i];
       if (!(hasProp(b, key) && eq(a[key], b[key], depth - 1, aStack, bStack))) {
         return false;
       }
@@ -5702,6 +5702,25 @@ if (typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
   });
 }
 
+let AssetLevel = /*#__PURE__*/function (AssetLevel) {
+  AssetLevel[AssetLevel["Environment"] = 1] = "Environment";
+  AssetLevel[AssetLevel["Library"] = 2] = "Library";
+  AssetLevel[AssetLevel["Theme"] = 3] = "Theme";
+  AssetLevel[AssetLevel["Runtime"] = 4] = "Runtime";
+  AssetLevel[AssetLevel["Components"] = 5] = "Components";
+  AssetLevel[AssetLevel["App"] = 6] = "App";
+  return AssetLevel;
+}({});
+const AssetLevels = [AssetLevel.Environment, AssetLevel.Library, AssetLevel.Theme, AssetLevel.Runtime, AssetLevel.Components, AssetLevel.App];
+let AssetType = /*#__PURE__*/function (AssetType) {
+  AssetType["JSUrl"] = "jsUrl";
+  AssetType["CSSUrl"] = "cssUrl";
+  AssetType["CSSText"] = "cssText";
+  AssetType["JSText"] = "jsText";
+  AssetType["Bundle"] = "bundle";
+  return AssetType;
+}({});
+
 let TRANSFORM_STAGE = /*#__PURE__*/function (TRANSFORM_STAGE) {
   TRANSFORM_STAGE["RENDER"] = "render";
   TRANSFORM_STAGE["SERIALIZE"] = "serialize";
@@ -5920,6 +5939,228 @@ class Session {
   }
 }
 
+let _initProto$l, _init_type, _init_extra_type, _itemsDecs$1, _init_items, _init_extra_items;
+const EXTRA_KEY_PREFIX = '___';
+const getConvertedExtraKey = key => {
+  if (!key) {
+    return '';
+  }
+  let _key = key;
+  if (key.indexOf('.') > 0) {
+    _key = key.split('.')[0];
+  }
+  return EXTRA_KEY_PREFIX + _key + EXTRA_KEY_PREFIX + key.slice(_key.length);
+};
+const getOriginalExtraKey = key => {
+  return key.replace(new RegExp(`${EXTRA_KEY_PREFIX}`, 'g'), '');
+};
+const isExtraKey = key => {
+  return key.startsWith(EXTRA_KEY_PREFIX);
+};
+class Props {
+  static {
+    [_init_type, _init_extra_type, _init_items, _init_extra_items, _initProto$l] = _applyDecs2311(this, [], [[observable, 1, "type"], [_itemsDecs$1, 17, "items"], [computed, 3, "maps"], [computed, 3, "size"], [action, 2, "import"], [action, 2, "purge"], [action, 2, "add"]]).e;
+  }
+  id = (_initProto$l(this), uniqueId('props'));
+  path = [];
+  getNode() {
+    return this.owner;
+  }
+  get props() {
+    return this;
+  }
+  getProps() {
+    return this.props;
+  }
+  #A = _init_type(this, 'map');
+  get type() {
+    return this.#A;
+  }
+  set type(v) {
+    this.#A = v;
+  }
+  #B = (_init_extra_type(this), _init_items(this, []));
+  get items() {
+    return this.#B;
+  }
+  set items(v) {
+    this.#B = v;
+  }
+  get maps() {
+    const maps = new Map();
+    if (this.items.length > 0) {
+      this.items.forEach(prop => {
+        if (prop.key) {
+          maps.set(prop.key, prop);
+        }
+      });
+    }
+    return maps;
+  }
+  get size() {
+    return this.items.length;
+  }
+  constructor(owner, props, extras) {
+    this.owner = owner;
+    if (props != null) {
+      this.items = Object.keys(props).map(key => new Prop(this, key, props[key]));
+    }
+    if (extras) {
+      Object.keys(extras).forEach(key => {
+        this.items.push(new Prop(this, getConvertedExtraKey(key), extras[key]));
+      });
+    }
+  }
+  import(props, extras) {
+    const originItems = this.items;
+    if (props != null) {
+      this.type = 'map';
+      this.items = Object.keys(props).map(key => new Prop(this, key, props[key]));
+    } else {
+      this.type = 'map';
+      this.items = [];
+    }
+    if (extras) {
+      Object.keys(extras).forEach(key => {
+        this.items.push(new Prop(this, getConvertedExtraKey(key), extras[key]));
+      });
+    }
+    originItems.forEach(item => item.purge());
+  }
+  export(stage = TRANSFORM_STAGE.SAVE) {
+    if (this.items.length < 1) {
+      return {};
+    }
+    const props = {};
+    const extras = {};
+    this.items.forEach(item => {
+      const key = item.key;
+      if (key == null || item.isUnset()) return;
+      const value = item.export(stage);
+      if (value != null) {
+        if (typeof key === 'string' && isExtraKey(key)) {
+          extras[getOriginalExtraKey(key)] = value;
+        } else {
+          props[key] = value;
+        }
+      }
+    });
+    return {
+      props,
+      extras
+    };
+  }
+  merge(value, extras) {
+    Object.keys(value).forEach(key => {
+      this.query(key, true).setValue(value[key]);
+      this.query(key, true).initItems();
+    });
+    if (extras) {
+      Object.keys(extras).forEach(key => {
+        this.query(getConvertedExtraKey(key), true).setValue(extras[key]);
+        this.query(getConvertedExtraKey(key), true).initItems();
+      });
+    }
+  }
+  purged = (_init_extra_items(this), false);
+  purge() {
+    if (this.purged) {
+      return;
+    }
+    this.purged = true;
+    for (const item of this.items) {
+      item.purge();
+    }
+  }
+  get(path, createIfNone = false) {
+    const {
+      entry,
+      nest
+    } = splitPath(path);
+    let prop = this.maps.get(entry);
+    if (!prop && createIfNone) {
+      prop = this.add(entry, UNSET$1);
+    }
+    if (prop) {
+      return nest ? prop.get(nest, createIfNone) : prop;
+    }
+    return null;
+  }
+  query(path, createIfNone = true) {
+    return this.get(path, createIfNone);
+  }
+  getProp(path, createIfNone = true) {
+    return this.query(path, createIfNone) || null;
+  }
+  getPropValue(path) {
+    return this.getProp(path, false)?.value;
+  }
+  setPropValue(path, value) {
+    this.getProp(path, true).setValue(value);
+  }
+  delete(prop) {
+    const index = this.items.indexOf(prop);
+    if (index > -1) {
+      this.items.splice(index, 1);
+      prop.purge();
+    }
+  }
+  deleteKey(key) {
+    this.items = this.items.filter((item, i) => {
+      if (item.key === key) {
+        item.purge();
+        this.items.splice(i, 1);
+        return false;
+      }
+      return true;
+    });
+  }
+  add(key, value) {
+    const prop = new Prop(this, key, value);
+    this.items.push(prop);
+    return prop;
+  }
+  has(key) {
+    return this.maps.has(key);
+  }
+  forEach(fn) {
+    for (const item of this.items) {
+      fn(item, item.key);
+    }
+  }
+  map(fn) {
+    return this.items.map(item => {
+      return fn(item, item.key);
+    });
+  }
+  filter(fn) {
+    return this.items.filter(item => {
+      return fn(item, item.key);
+    });
+  }
+  [(_itemsDecs$1 = [observable, observable.shallow], Symbol.iterator)]() {
+    let index = 0;
+    const {
+      items
+    } = this;
+    const length = items.length || 0;
+    return {
+      next() {
+        if (index < length) {
+          return {
+            value: items[index++],
+            done: false
+          };
+        }
+        return {
+          value: undefined,
+          done: true
+        };
+      }
+    };
+  }
+}
+
 const propertyNameRequiresQuotes = propertyName => {
   try {
     const context = {
@@ -6082,8 +6323,8 @@ const valueToSource = (value, {
   }
 };
 
-let _initProto$i, _keyDecs, _init_key, _init_extra_key, _valueDecs, _init__value, _init_extra__value, _typeDecs, _init__type, _init_extra__type, _itemsDecs$1, _init__items, _init_extra__items, _mapsDecs, _init__maps, _init_extra__maps, _purgedDecs, _init_purged, _init_extra_purged;
-const UNSET = Symbol.for('unset');
+let _initProto$k, _keyDecs, _init_key, _init_extra_key, _valueDecs, _init__value, _init_extra__value, _typeDecs, _init__type, _init_extra__type, _itemsDecs, _init__items, _init_extra__items, _mapsDecs, _init__maps, _init_extra__maps, _purgedDecs, _init_purged, _init_extra_purged;
+const UNSET$1 = Symbol.for('unset');
 const isJSExpression = data => {
   if (!isObject$1(data)) {
     return false;
@@ -6098,9 +6339,9 @@ function isJSFunction(data) {
 }
 class Prop {
   static {
-    [_init_key, _init_extra_key, _init__value, _init_extra__value, _init__type, _init_extra__type, _init__items, _init_extra__items, _init__maps, _init_extra__maps, _init_purged, _init_extra_purged, _initProto$i] = _applyDecs2311(this, [], [[_keyDecs, 17, "key"], [_valueDecs, 17, "_value"], [computed, 3, "value"], [computed, 3, "code"], [_typeDecs, 17, "_type"], [_itemsDecs$1, 17, "_items"], [_mapsDecs, 17, "_maps"], [computed, 3, "items"], [computed, 3, "maps"], [action, 2, "initItems"], [_purgedDecs, 17, "purged"], [action, 2, "purge"], [action, 2, "remove"], [action, 2, "dispose"], [action, 2, "unset"], [action, 2, "setValue"], [action, 2, "set"], [action, 2, "delete"], [action, 2, "add"], [action, 2, "getPropValue"], [action, 2, "setPropValue"], [action, 2, "clearPropValue"], [action, 2, "forEach"], [action, 2, "map"]]).e;
+    [_init_key, _init_extra_key, _init__value, _init_extra__value, _init__type, _init_extra__type, _init__items, _init_extra__items, _init__maps, _init_extra__maps, _init_purged, _init_extra_purged, _initProto$k] = _applyDecs2311(this, [], [[_keyDecs, 17, "key"], [_valueDecs, 17, "_value"], [computed, 3, "value"], [computed, 3, "code"], [_typeDecs, 17, "_type"], [_itemsDecs, 17, "_items"], [_mapsDecs, 17, "_maps"], [computed, 3, "items"], [computed, 3, "maps"], [action, 2, "initItems"], [_purgedDecs, 17, "purged"], [action, 2, "purge"], [action, 2, "remove"], [action, 2, "dispose"], [action, 2, "unset"], [action, 2, "setValue"], [action, 2, "set"], [action, 2, "delete"], [action, 2, "add"], [action, 2, "getPropValue"], [action, 2, "setPropValue"], [action, 2, "clearPropValue"], [action, 2, "forEach"], [action, 2, "map"]]).e;
   }
-  isProp = (_initProto$i(this), true);
+  isProp = (_initProto$k(this), true);
   id = uniqueId('prop');
   #A = _init_key(this);
   get key() {
@@ -6116,7 +6357,7 @@ class Prop {
   getProps() {
     return this.props;
   }
-  #B = _init__value(this, UNSET);
+  #B = _init__value(this, UNSET$1);
   get _value() {
     return this.#B;
   }
@@ -6199,13 +6440,13 @@ class Prop {
   get size() {
     return this.items?.length || 0;
   }
-  constructor(parent, key, value = UNSET) {
+  constructor(parent, key, value = UNSET$1) {
     this.parent = parent;
     _init_extra_purged(this);
     this.owner = parent.owner;
     this.props = parent.props;
     this.key = key;
-    if (value !== UNSET) {
+    if (value !== UNSET$1) {
       this.setValue(value);
     }
     this.initItems();
@@ -6416,7 +6657,7 @@ class Prop {
       return nest ? prop.get(nest, createIfNone) : prop;
     }
     if (createIfNone) {
-      prop = new Prop(this, entry, UNSET);
+      prop = new Prop(this, entry, UNSET$1);
       this.set(entry, prop, true);
       if (nest) {
         return prop.get(nest, true);
@@ -6546,7 +6787,7 @@ class Prop {
       return isMap ? fn(item, item.key) : fn(item, index);
     });
   }
-  [(_keyDecs = [observable, observable.ref], _valueDecs = [observable, observable.ref], _typeDecs = [observable, observable.ref], _itemsDecs$1 = [observable, observable.shallow], _mapsDecs = [observable, observable.shallow], _purgedDecs = [observable, observable.ref], Symbol.iterator)]() {
+  [(_keyDecs = [observable, observable.ref], _valueDecs = [observable, observable.ref], _typeDecs = [observable, observable.ref], _itemsDecs = [observable, observable.shallow], _mapsDecs = [observable, observable.shallow], _purgedDecs = [observable, observable.ref], Symbol.iterator)]() {
     let index = 0;
     const {
       items
@@ -6599,239 +6840,17 @@ function isValidArrayIndex(key, limit = -1) {
   return n >= 0 && Math.floor(n) === n && Number.isFinite(n) && (limit < 0 || n < limit);
 }
 
-let _initProto$h, _init_type, _init_extra_type, _itemsDecs, _init_items, _init_extra_items;
-const EXTRA_KEY_PREFIX = '___';
-const getConvertedExtraKey = key => {
-  if (!key) {
-    return '';
+let _initProto$j, _init_children, _init_extra_children;
+let NODE_CHILDREN_EVENT = /*#__PURE__*/function (NODE_CHILDREN_EVENT) {
+  NODE_CHILDREN_EVENT["CHANGE"] = "nodeChildren:change";
+  NODE_CHILDREN_EVENT["INSERT"] = "nodeChildren:insert";
+  return NODE_CHILDREN_EVENT;
+}({});
+class NodeChildren {
+  static {
+    [_init_children, _init_extra_children, _initProto$j] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "children"], [computed, 3, "size"], [action, 2, "import"], [action, 2, "remove"], [action, 2, "purge"], [action, 2, "internalUnlinkChild"], [action, 2, "internalDelete"], [action, 2, "internalInsert"], [action, 2, "mergeChildren"]]).e;
   }
-  let _key = key;
-  if (key.indexOf('.') > 0) {
-    _key = key.split('.')[0];
-  }
-  return EXTRA_KEY_PREFIX + _key + EXTRA_KEY_PREFIX + key.slice(_key.length);
-};
-const getOriginalExtraKey = key => {
-  return key.replace(new RegExp(`${EXTRA_KEY_PREFIX}`, 'g'), '');
-};
-const isExtraKey = key => {
-  return key.startsWith(EXTRA_KEY_PREFIX);
-};
-class Props {
-  static {
-    [_init_type, _init_extra_type, _init_items, _init_extra_items, _initProto$h] = _applyDecs2311(this, [], [[observable, 1, "type"], [_itemsDecs, 17, "items"], [computed, 3, "maps"], [computed, 3, "size"], [action, 2, "import"], [action, 2, "purge"], [action, 2, "add"]]).e;
-  }
-  id = (_initProto$h(this), uniqueId('props'));
-  path = [];
-  getNode() {
-    return this.owner;
-  }
-  get props() {
-    return this;
-  }
-  getProps() {
-    return this.props;
-  }
-  #A = _init_type(this, 'map');
-  get type() {
-    return this.#A;
-  }
-  set type(v) {
-    this.#A = v;
-  }
-  #B = (_init_extra_type(this), _init_items(this, []));
-  get items() {
-    return this.#B;
-  }
-  set items(v) {
-    this.#B = v;
-  }
-  get maps() {
-    const maps = new Map();
-    if (this.items.length > 0) {
-      this.items.forEach(prop => {
-        if (prop.key) {
-          maps.set(prop.key, prop);
-        }
-      });
-    }
-    return maps;
-  }
-  get size() {
-    return this.items.length;
-  }
-  constructor(owner, props, extras) {
-    this.owner = owner;
-    if (props != null) {
-      this.items = Object.keys(props).map(key => new Prop(this, key, props[key]));
-    }
-    if (extras) {
-      Object.keys(extras).forEach(key => {
-        this.items.push(new Prop(this, getConvertedExtraKey(key), extras[key]));
-      });
-    }
-  }
-  import(props, extras) {
-    const originItems = this.items;
-    if (props != null) {
-      this.type = 'map';
-      this.items = Object.keys(props).map(key => new Prop(this, key, props[key]));
-    } else {
-      this.type = 'map';
-      this.items = [];
-    }
-    if (extras) {
-      Object.keys(extras).forEach(key => {
-        this.items.push(new Prop(this, getConvertedExtraKey(key), extras[key]));
-      });
-    }
-    originItems.forEach(item => item.purge());
-  }
-  export(stage = TRANSFORM_STAGE.SAVE) {
-    if (this.items.length < 1) {
-      return {};
-    }
-    const props = {};
-    const extras = {};
-    this.items.forEach(item => {
-      const key = item.key;
-      if (key == null || item.isUnset()) return;
-      const value = item.export(stage);
-      if (value != null) {
-        if (typeof key === 'string' && isExtraKey(key)) {
-          extras[getOriginalExtraKey(key)] = value;
-        } else {
-          props[key] = value;
-        }
-      }
-    });
-    return {
-      props,
-      extras
-    };
-  }
-  merge(value, extras) {
-    Object.keys(value).forEach(key => {
-      this.query(key, true).setValue(value[key]);
-      this.query(key, true).initItems();
-    });
-    if (extras) {
-      Object.keys(extras).forEach(key => {
-        this.query(getConvertedExtraKey(key), true).setValue(extras[key]);
-        this.query(getConvertedExtraKey(key), true).initItems();
-      });
-    }
-  }
-  purged = (_init_extra_items(this), false);
-  purge() {
-    if (this.purged) {
-      return;
-    }
-    this.purged = true;
-    for (const item of this.items) {
-      item.purge();
-    }
-  }
-  get(path, createIfNone = false) {
-    const {
-      entry,
-      nest
-    } = splitPath(path);
-    let prop = this.maps.get(entry);
-    if (!prop && createIfNone) {
-      prop = this.add(entry, UNSET);
-    }
-    if (prop) {
-      return nest ? prop.get(nest, createIfNone) : prop;
-    }
-    return null;
-  }
-  query(path, createIfNone = true) {
-    return this.get(path, createIfNone);
-  }
-  getProp(path, createIfNone = true) {
-    return this.query(path, createIfNone) || null;
-  }
-  getPropValue(path) {
-    return this.getProp(path, false)?.value;
-  }
-  setPropValue(path, value) {
-    this.getProp(path, true).setValue(value);
-  }
-  delete(prop) {
-    const index = this.items.indexOf(prop);
-    if (index > -1) {
-      this.items.splice(index, 1);
-      prop.purge();
-    }
-  }
-  deleteKey(key) {
-    this.items = this.items.filter((item, i) => {
-      if (item.key === key) {
-        item.purge();
-        this.items.splice(i, 1);
-        return false;
-      }
-      return true;
-    });
-  }
-  add(key, value) {
-    const prop = new Prop(this, key, value);
-    this.items.push(prop);
-    return prop;
-  }
-  has(key) {
-    return this.maps.has(key);
-  }
-  forEach(fn) {
-    for (const item of this.items) {
-      fn(item, item.key);
-    }
-  }
-  map(fn) {
-    return this.items.map(item => {
-      return fn(item, item.key);
-    });
-  }
-  filter(fn) {
-    return this.items.filter(item => {
-      return fn(item, item.key);
-    });
-  }
-  [(_itemsDecs = [observable, observable.shallow], Symbol.iterator)]() {
-    let index = 0;
-    const {
-      items
-    } = this;
-    const length = items.length || 0;
-    return {
-      next() {
-        if (index < length) {
-          return {
-            value: items[index++],
-            done: false
-          };
-        }
-        return {
-          value: undefined,
-          done: true
-        };
-      }
-    };
-  }
-}
-
-let _initProto$g, _init_children, _init_extra_children;
-let NODE_CHILDREN_EVENT = /*#__PURE__*/function (NODE_CHILDREN_EVENT) {
-  NODE_CHILDREN_EVENT["CHANGE"] = "nodeChildren:change";
-  NODE_CHILDREN_EVENT["INSERT"] = "nodeChildren:insert";
-  return NODE_CHILDREN_EVENT;
-}({});
-class NodeChildren {
-  static {
-    [_init_children, _init_extra_children, _initProto$g] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "children"], [computed, 3, "size"], [action, 2, "import"], [action, 2, "remove"], [action, 2, "purge"], [action, 2, "internalUnlinkChild"], [action, 2, "internalDelete"], [action, 2, "internalInsert"], [action, 2, "mergeChildren"]]).e;
-  }
-  emitter = (_initProto$g(this), createEventBus('NodeChildren'));
+  emitter = (_initProto$j(this), createEventBus('NodeChildren'));
   getNode() {
     return this.owner;
   }
@@ -7097,7 +7116,7 @@ class NodeChildren {
   }
 }
 
-let _initProto$f, _init__parent, _init_extra__parent;
+let _initProto$i, _init__parent, _init_extra__parent;
 let NODE_EVENT = /*#__PURE__*/function (NODE_EVENT) {
   NODE_EVENT["ADD"] = "node:add";
   NODE_EVENT["REMOVE"] = "node:remove";
@@ -7108,9 +7127,9 @@ let NODE_EVENT = /*#__PURE__*/function (NODE_EVENT) {
 }({});
 let Node$1 = class Node {
   static {
-    [_init__parent, _init_extra__parent, _initProto$f] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_parent"], [computed, 3, "index"], [computed, 3, "zLevel"], [computed, 3, "title"], [computed, 3, "isLinked"], [action, 2, "remove"], [computed, 3, "componentMeta"], [computed, 3, "propsData"]]).e;
+    [_init__parent, _init_extra__parent, _initProto$i] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_parent"], [computed, 3, "index"], [computed, 3, "zLevel"], [computed, 3, "title"], [action, 2, "refreshSettingEntry"], [computed, 3, "isLinked"], [action, 2, "remove"], [computed, 3, "componentMeta"], [computed, 3, "propsData"]]).e;
   }
-  emitter = (_initProto$f(this), createEventBus('Node'));
+  emitter = (_initProto$i(this), createEventBus('Node'));
   isNode = true;
   #A = _init__parent(this, null);
   get _parent() {
@@ -7162,6 +7181,17 @@ let Node$1 = class Node {
     this._settingEntry = this.document.designer.createSettingEntry([this]);
     return this._settingEntry;
   }
+  refreshSettingEntry() {
+    if (this._settingEntry) {
+      this._settingEntry.purge();
+      this._settingEntry = undefined;
+    }
+    const {
+      settingsManager
+    } = this.document.designer;
+    settingsManager._sessionId = '';
+    settingsManager.setup([this]);
+  }
   constructor(document, Schema) {
     this.document = document;
     const {
@@ -7173,10 +7203,10 @@ let Node$1 = class Node {
     } = Schema;
     this.id = id || uniqueId('node');
     this.componentName = componentName;
-    this._children = new NodeChildren(this, this.initialChildren(children));
     this.props = new Props(this, props, extras);
     this.props.merge(this.upgradeProps(this.initProps(props || {})), this.upgradeProps(extras));
     this.initBuiltinProps();
+    this._children = new NodeChildren(this, this.initialChildren(children));
     this.onVisibleChange(visible => {
       this.document.designer.postEvent(DESIGNER_EVENT.NODE_VISIBLE_CHANGE, this, visible);
     });
@@ -7502,8 +7532,28 @@ let Node$1 = class Node {
     }
     return false;
   }
+  get isRemote() {
+    return this.isRemoteComponent();
+  }
+  get materialUsageKey() {
+    if (this.isRemote) {
+      const version = this.getExtraPropValue('npm.version');
+      return `${this.componentName}@${version}`;
+    }
+    return this.componentName;
+  }
+  isRemoteComponent() {
+    const npm = this.getExtraPropValue('npm');
+    return isRemoteComponent({
+      npm
+    });
+  }
   get componentMeta() {
-    return this.document.getComponentMeta(this.componentName);
+    let componentName = this.componentName;
+    if (this.isRemote) {
+      componentName = this.materialUsageKey;
+    }
+    return this.document.getComponentMeta(componentName);
   }
   get propsData() {
     return this.props.export(TRANSFORM_STAGE.SERIALIZE).props || null;
@@ -7747,7 +7797,7 @@ const ensureNode = (node, document) => {
   return nodeInstance;
 };
 
-let _initProto$e, _init__opened, _init_extra__opened, _init__suspended$1, _init_extra__suspended$1, _init_nodes, _init_extra_nodes, _init__dropLocation, _init_extra__dropLocation;
+let _initProto$h, _init__opened, _init_extra__opened, _init__suspended$1, _init_extra__suspended$1, _init_nodes, _init_extra_nodes, _init__dropLocation, _init_extra__dropLocation;
 let DOCUMENT_EVENT = /*#__PURE__*/function (DOCUMENT_EVENT) {
   DOCUMENT_EVENT["ADD"] = "document:add";
   DOCUMENT_EVENT["REMOVE"] = "document:remove";
@@ -7757,9 +7807,9 @@ let DOCUMENT_EVENT = /*#__PURE__*/function (DOCUMENT_EVENT) {
 }({});
 class Document {
   static {
-    [_init__opened, _init_extra__opened, _init__suspended$1, _init_extra__suspended$1, _init_nodes, _init_extra_nodes, _init__dropLocation, _init_extra__dropLocation, _initProto$e] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_opened"], [[observable, observable.ref], 17, "_suspended"], [[observable, observable.shallow], 17, "nodes"], [[observable, observable.ref], 17, "_dropLocation"], [action, 4, "dropLocation"], [action, 2, "import"], [action, 2, "remove"], [action, 2, "purge"], [action, 2, "createNode"], [action, 2, "internalRemoveNode"], [action, 2, "unlinkNode"], [action, 2, "setSuspense"], [action, 2, "open"], [action, 2, "close"]]).e;
+    [_init__opened, _init_extra__opened, _init__suspended$1, _init_extra__suspended$1, _init_nodes, _init_extra_nodes, _init__dropLocation, _init_extra__dropLocation, _initProto$h] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_opened"], [[observable, observable.ref], 17, "_suspended"], [[observable, observable.shallow], 17, "nodes"], [[observable, observable.ref], 17, "_dropLocation"], [action, 4, "dropLocation"], [action, 2, "import"], [action, 2, "remove"], [action, 2, "purge"], [action, 2, "createNode"], [action, 2, "internalRemoveNode"], [action, 2, "unlinkNode"], [action, 2, "setSuspense"], [action, 2, "open"], [action, 2, "close"]]).e;
   }
-  isDocument = (_initProto$e(this), true);
+  isDocument = (_initProto$h(this), true);
   emitter = createEventBus('Document');
   #A = _init__opened(this, false);
   get _opened() {
@@ -7877,6 +7927,11 @@ class Document {
     this.project.removeDocument(this);
   }
   purge() {
+    for (const node of this.nodes) {
+      if (node.componentName) {
+        this.designer.materials.decrementUsage(node.materialUsageKey);
+      }
+    }
     this.rootNode?.purge();
     this.nodes.clear();
     this._nodesMap.clear();
@@ -7887,6 +7942,7 @@ class Document {
       schema.id = undefined;
     }
     let node = null;
+    let isNewNode = false;
     if (schema?.id) {
       node = this.getNode(schema.id);
       if (node && node.componentName === schema.componentName) {
@@ -7900,10 +7956,14 @@ class Document {
     }
     if (!node) {
       node = new Node$1(this, schema);
+      isNewNode = true;
     }
     this.nodes.add(node);
     this._nodesMap.set(node.id, node);
     this.emitter.emit(NODE_EVENT.ADD, node);
+    if (isNewNode && node.componentName) {
+      this.designer.materials.incrementUsage(node.materialUsageKey);
+    }
     return node;
   }
   getNode(id) {
@@ -7938,6 +7998,9 @@ class Document {
     node.remove(true, useMutator);
   }
   unlinkNode(node) {
+    if (node.componentName) {
+      this.designer.materials.decrementUsage(node.materialUsageKey);
+    }
     this.nodes.delete(node);
     this._nodesMap.delete(node.id);
   }
@@ -8005,21 +8068,36 @@ class Document {
       const {
         componentName
       } = node || {};
-      if (!existedMap[componentName]) {
-        existedMap[componentName] = true;
-        componentsMap.push({
-          devMode: 'lowCode',
-          componentName
-        });
+      if (!existedMap[node.materialUsageKey]) {
+        existedMap[node.materialUsageKey] = true;
+        if (node.componentMeta?.npm?.package) {
+          componentsMap.push({
+            ...node.componentMeta.npm,
+            componentName
+          });
+        } else {
+          componentsMap.push({
+            devMode: 'lowCode',
+            componentName
+          });
+        }
       }
     }
     if (Array.isArray(extraComps)) {
       extraComps.forEach(componentName => {
         if (componentName && !existedMap[componentName]) {
-          componentsMap.push({
-            devMode: 'lowCode',
-            componentName
-          });
+          const meta = this.getComponentMeta(componentName);
+          if (meta?.npm?.package) {
+            componentsMap.push({
+              ...meta?.npm,
+              componentName
+            });
+          } else {
+            componentsMap.push({
+              devMode: 'lowCode',
+              componentName
+            });
+          }
         }
       });
     }
@@ -8059,7 +8137,7 @@ function isDocument(obj) {
   return obj && obj.isDocument;
 }
 
-let _initProto$d, _init_documents, _init_extra_documents, _init__config, _init_extra__config;
+let _initProto$g, _init_documents, _init_extra_documents, _init__config, _init_extra__config;
 const logger$5 = createLogger('Project');
 let PROJECT_EVENT = /*#__PURE__*/function (PROJECT_EVENT) {
   PROJECT_EVENT["RENDERER_READY"] = "renderer:ready";
@@ -8068,9 +8146,9 @@ let PROJECT_EVENT = /*#__PURE__*/function (PROJECT_EVENT) {
 }({});
 class Project {
   static {
-    [_init_documents, _init_extra_documents, _init__config, _init_extra__config, _initProto$d] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "documents"], [computed, 3, "currentDocument"], [observable, 1, "_config"], [computed, 3, "config"], [action, 2, "load"], [action, 2, "unload"], [action, 2, "createDocument"], [action, 2, "removeDocument"]]).e;
+    [_init_documents, _init_extra_documents, _init__config, _init_extra__config, _initProto$g] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "documents"], [computed, 3, "currentDocument"], [observable, 1, "_config"], [computed, 3, "config"], [action, 2, "load"], [action, 2, "unload"], [action, 2, "createDocument"], [action, 2, "removeDocument"]]).e;
   }
-  emitter = (_initProto$d(this), createEventBus('Project'));
+  emitter = (_initProto$g(this), createEventBus('Project'));
   data = {
     version: '0.0.1',
     componentsMap: [],
@@ -8124,8 +8202,7 @@ class Project {
       if (Array.isArray(curComponentsMap)) {
         curComponentsMap.forEach(item => {
           const found = componentsMap.find(eItem => {
-            if (isProCodeComponentType(eItem) && isProCodeComponentType(item) &&
-            eItem.componentName === item.componentName) {
+            if (isProCodeComponentType(eItem) && isProCodeComponentType(item) && eItem.package === item.package && eItem.version === item.version && eItem.componentName === item.componentName) {
               return true;
             } else if (isLowCodeComponentType(eItem) && eItem.componentName === item.componentName) {
               return true;
@@ -8335,16 +8412,16 @@ class ActiveTracker {
   }
 }
 
-let _initProto$c, _init__enable, _init_extra__enable, _init__current, _init_extra__current;
+let _initProto$f, _init__enable, _init_extra__enable, _init__current, _init_extra__current;
 let DETECTING_EVENT = /*#__PURE__*/function (DETECTING_EVENT) {
   DETECTING_EVENT["CHANGE"] = "detecting:change";
   return DETECTING_EVENT;
 }({});
 class Detecting {
   static {
-    [_init__enable, _init_extra__enable, _init__current, _init_extra__current, _initProto$c] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_enable"], [action, 4, "enable"], [[observable, observable.ref], 17, "_current"], [action, 2, "capture"], [action, 2, "release"], [action, 2, "leave"]]).e;
+    [_init__enable, _init_extra__enable, _init__current, _init_extra__current, _initProto$f] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_enable"], [action, 4, "enable"], [[observable, observable.ref], 17, "_current"], [action, 2, "capture"], [action, 2, "release"], [action, 2, "leave"]]).e;
   }
-  emitter = (_initProto$c(this), createEventBus('Detecting'));
+  emitter = (_initProto$f(this), createEventBus('Detecting'));
   #A = _init__enable(this, true);
   get _enable() {
     return this.#A;
@@ -8400,6 +8477,77 @@ class Detecting {
   }
 }
 
+const isSimulatorRenderer = obj => {
+  return obj && obj.isSimulatorRenderer;
+};
+
+let _init__data, _init_extra__data;
+const UNSET = Symbol('unset');
+class ResourceConsumer {
+  static {
+    [_init__data, _init_extra__data] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_data"]]).e;
+  }
+  emitter = createEventBus('ResourceConsumer');
+  #A = _init__data(this, UNSET);
+  get _data() {
+    return this.#A;
+  }
+  set _data(v) {
+    this.#A = v;
+  }
+  _providing = void _init_extra__data(this);
+  _firstConsumed = false;
+  constructor(provider, consumer) {
+    this.consumer = consumer;
+    this._providing = autorun(() => {
+      this._data = provider();
+    });
+  }
+  consume(consumerOrRenderer) {
+    if (this._consuming) {
+      return;
+    }
+    let consumer;
+    if (isSimulatorRenderer(consumerOrRenderer)) {
+      if (!this.consumer) {
+        return;
+      }
+      const rendererConsumer = this.consumer;
+      consumer = data => rendererConsumer(consumerOrRenderer, data);
+    } else {
+      consumer = consumerOrRenderer;
+    }
+    this._consuming = autorun(async () => {
+      if (this._data === UNSET) {
+        return;
+      }
+      await consumer(this._data);
+      if (this.resolveFirst) {
+        this.resolveFirst();
+      } else {
+        this._firstConsumed = true;
+      }
+    });
+  }
+  dispose() {
+    if (this._providing) {
+      this._providing();
+    }
+    if (this._consuming) {
+      this._consuming();
+    }
+    this.emitter.removeAllListeners();
+  }
+  waitFirstConsume() {
+    if (this._firstConsumed) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      this.resolveFirst = resolve;
+    });
+  }
+}
+
 class ScrollTarget {
   get left() {
     return 'scrollX' in this.target ? this.target.scrollX : this.target.scrollLeft;
@@ -8561,13 +8709,13 @@ class Scroller {
   }
 }
 
-let _initProto$b, _init_rect, _init_extra_rect, _init__scale, _init_extra__scale, _init__contentWidth, _init_extra__contentWidth, _init__contentHeight, _init_extra__contentHeight, _init__scrollX, _init_extra__scrollX, _init__scrollY, _init_extra__scrollY, _init__scrolling, _init_extra__scrolling;
+let _initProto$e, _init_rect, _init_extra_rect, _init__scale, _init_extra__scale, _init__contentWidth, _init_extra__contentWidth, _init__contentHeight, _init_extra__contentHeight, _init__scrollX, _init_extra__scrollX, _init__scrollY, _init_extra__scrollY, _init__scrolling, _init_extra__scrolling;
 const AutoFit = '100%';
 class Viewport {
   static {
-    [_init_rect, _init_extra_rect, _init__scale, _init_extra__scale, _init__contentWidth, _init_extra__contentWidth, _init__contentHeight, _init_extra__contentHeight, _init__scrollX, _init_extra__scrollX, _init__scrollY, _init_extra__scrollY, _init__scrolling, _init_extra__scrolling, _initProto$b] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "rect"], [action, 2, "touch"], [computed, 3, "height"], [computed, 3, "width"], [[observable, observable.ref], 17, "_scale"], [computed, 3, "scale"], [action, 4, "scale"], [[observable, observable.ref], 17, "_contentWidth"], [[observable, observable.ref], 17, "_contentHeight"], [computed, 3, "contentHeight"], [computed, 3, "contentWidth"], [[observable, observable.ref], 17, "_scrollX"], [[observable, observable.ref], 17, "_scrollY"], [observable, 1, "_scrolling"]]).e;
+    [_init_rect, _init_extra_rect, _init__scale, _init_extra__scale, _init__contentWidth, _init_extra__contentWidth, _init__contentHeight, _init_extra__contentHeight, _init__scrollX, _init_extra__scrollX, _init__scrollY, _init_extra__scrollY, _init__scrolling, _init_extra__scrolling, _initProto$e] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "rect"], [action, 2, "touch"], [computed, 3, "height"], [computed, 3, "width"], [[observable, observable.ref], 17, "_scale"], [computed, 3, "scale"], [action, 4, "scale"], [[observable, observable.ref], 17, "_contentWidth"], [[observable, observable.ref], 17, "_contentHeight"], [computed, 3, "contentHeight"], [computed, 3, "contentWidth"], [[observable, observable.ref], 17, "_scrollX"], [[observable, observable.ref], 17, "_scrollY"], [observable, 1, "_scrolling"]]).e;
   }
-  #A = (_initProto$b(this), _init_rect(this));
+  #A = (_initProto$e(this), _init_rect(this));
   get rect() {
     return this.#A;
   }
@@ -8757,12 +8905,12 @@ class Viewport {
   }
 }
 
-let _initProto$a, _init__props, _init_extra__props, _init__contentWindow, _init_extra__contentWindow, _init__contentDocument, _init_extra__contentDocument, _init__appHelper, _init_extra__appHelper, _init_instancesMap, _init_extra_instancesMap;
+let _initProto$d, _init__props, _init_extra__props, _init__contentWindow, _init_extra__contentWindow, _init__contentDocument, _init_extra__contentDocument, _init__appHelper, _init_extra__appHelper, _init_instancesMap, _init_extra_instancesMap;
 class Simulator {
   static {
-    [_init__props, _init_extra__props, _init__contentWindow, _init_extra__contentWindow, _init__contentDocument, _init_extra__contentDocument, _init__appHelper, _init_extra__appHelper, _init_instancesMap, _init_extra_instancesMap, _initProto$a] = _applyDecs2311(this, [], [[computed, 3, "renderEnv"], [computed, 3, "device"], [computed, 3, "locale"], [computed, 3, "deviceClassName"], [computed, 3, "designMode"], [computed, 3, "dataSourceEngine"], [computed, 3, "deviceStyle"], [computed, 3, "componentsMap"], [[observable, observable.ref], 17, "_props"], [[observable, observable.ref], 17, "_contentWindow"], [[observable, observable.ref], 17, "_contentDocument"], [[observable, observable.ref], 17, "_appHelper"], [observable, 1, "instancesMap"], [action, 2, "setProps"], [action, 2, "set"], [action, 2, "purge"], [action, 2, "mountContentFrame"], [action, 2, "setInstance"]]).e;
+    [_init__props, _init_extra__props, _init__contentWindow, _init_extra__contentWindow, _init__contentDocument, _init_extra__contentDocument, _init__appHelper, _init_extra__appHelper, _init_instancesMap, _init_extra_instancesMap, _initProto$d] = _applyDecs2311(this, [], [[computed, 3, "renderEnv"], [computed, 3, "device"], [computed, 3, "locale"], [computed, 3, "deviceClassName"], [computed, 3, "designMode"], [computed, 3, "dataSourceEngine"], [computed, 3, "componentsAsset"], [computed, 3, "deviceStyle"], [computed, 3, "componentsMap"], [[observable, observable.ref], 17, "_props"], [[observable, observable.ref], 17, "_contentWindow"], [[observable, observable.ref], 17, "_contentDocument"], [[observable, observable.ref], 17, "_appHelper"], [observable, 1, "instancesMap"], [action, 2, "setProps"], [action, 2, "set"], [action, 2, "purge"], [action, 2, "mountContentFrame"], [action, 2, "setInstance"]]).e;
   }
-  emitter = (_initProto$a(this), createEventBus('Simulator'));
+  emitter = (_initProto$d(this), createEventBus('Simulator'));
   isSimulator = true;
   autoRender = true;
   get editor() {
@@ -8784,7 +8932,7 @@ class Simulator {
     return this.get('designMode') || 'design';
   }
   get dataSourceEngine() {
-    return this.get('dataSourceEngine');
+    return config.get('dataSourceEngine');
   }
   get enableStrictNotFoundMode() {
     return config.get('enableStrictNotFoundMode') ?? false;
@@ -8798,6 +8946,9 @@ class Simulator {
   get faultComponent() {
     return config.get('faultComponent') ?? null;
   }
+  get componentsAsset() {
+    return this.get('componentsAsset');
+  }
   get deviceStyle() {
     return this.get('deviceStyle');
   }
@@ -8901,7 +9052,7 @@ class Simulator {
   rerender() {
     this.renderer?.rerender?.();
   }
-  mountContentFrame(iframe) {
+  async mountContentFrame(iframe) {
     if (!iframe || this.iframe === iframe) {
       return;
     }
@@ -8967,10 +9118,11 @@ class Simulator {
       if (onMouseDownHook) {
         onMouseDownHook(downEvent, node);
       }
-      const isLeftButton = downEvent.which === 1 || downEvent.button === 0;
+      const isLeftButton = downEvent.button === 0;
       const checkSelect = e => {
         doc.removeEventListener('mouseup', checkSelect, true);
-        if (!isShaken(downEvent, e)) {
+        const isLeftButtonSelect = e.button === 0;
+        if (!isShaken(downEvent, e) && isLeftButtonSelect) {
           const {
             id
           } = node;
@@ -9320,6 +9472,9 @@ class Simulator {
   handleAccept({
     container
   }, e) {
+    const {
+      dragObject
+    } = e;
     const document = this.project.currentDocument;
     const {
       rootNode
@@ -9347,16 +9502,12 @@ const getMatched = (elements, selector) => {
       if (!firstQueried) {
         firstQueried = elem.querySelector(selector);
       }
-    }
-  }
-  return firstQueried;
-};
-
-const isSimulatorRenderer = obj => {
-  return obj && obj.isSimulatorRenderer;
+    }
+  }
+  return firstQueried;
 };
 
-let _initProto$9, _init__activeSensor, _init_extra__activeSensor, _init__dragging, _init_extra__dragging;
+let _initProto$c, _init__activeSensor, _init_extra__activeSensor, _init__dragging, _init_extra__dragging;
 let DRAGON_EVENT = /*#__PURE__*/function (DRAGON_EVENT) {
   DRAGON_EVENT["DRAGSTART"] = "dragon:dragstart";
   DRAGON_EVENT["DRAG"] = "dragon:drag";
@@ -9411,9 +9562,9 @@ const getSourceSensor = dragObject => {
 };
 class Dragon {
   static {
-    [_init__activeSensor, _init_extra__activeSensor, _init__dragging, _init_extra__dragging, _initProto$9] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_activeSensor"], [[observable, observable.ref], 17, "_dragging"], [action, 2, "boost"], [action, 2, "addSensor"], [action, 2, "removeSensor"]]).e;
+    [_init__activeSensor, _init_extra__activeSensor, _init__dragging, _init_extra__dragging, _initProto$c] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_activeSensor"], [[observable, observable.ref], 17, "_dragging"], [action, 2, "boost"], [action, 2, "addSensor"], [action, 2, "removeSensor"]]).e;
   }
-  emitter = (_initProto$9(this), createEventBus('Dragon'));
+  emitter = (_initProto$c(this), createEventBus('Dragon'));
   sensors = [];
   #A = _init__activeSensor(this);
   get _activeSensor() {
@@ -9765,12 +9916,12 @@ class DropLocation {
   }
 }
 
-let _initProto$8, _init__height, _init_extra__height, _init__width, _init_extra__width, _init__left, _init_extra__left, _init__top, _init_extra__top, _init__right, _init_extra__right, _init__bottom, _init_extra__bottom, _init_hasOffset, _init_extra_hasOffset;
+let _initProto$b, _init__height, _init_extra__height, _init__width, _init_extra__width, _init__left, _init_extra__left, _init__top, _init_extra__top, _init__right, _init_extra__right, _init__bottom, _init_extra__bottom, _init_hasOffset, _init_extra_hasOffset;
 class OffsetObserver {
   static {
-    [_init__height, _init_extra__height, _init__width, _init_extra__width, _init__left, _init_extra__left, _init__top, _init_extra__top, _init__right, _init_extra__right, _init__bottom, _init_extra__bottom, _init_hasOffset, _init_extra_hasOffset, _initProto$8] = _applyDecs2311(this, [], [[observable, 1, "_height"], [observable, 1, "_width"], [observable, 1, "_left"], [observable, 1, "_top"], [observable, 1, "_right"], [observable, 1, "_bottom"], [computed, 3, "height"], [computed, 3, "width"], [computed, 3, "top"], [computed, 3, "left"], [computed, 3, "bottom"], [computed, 3, "right"], [observable, 1, "hasOffset"], [computed, 3, "offsetLeft"], [computed, 3, "offsetTop"], [computed, 3, "offsetHeight"], [computed, 3, "offsetWidth"], [computed, 3, "scale"]]).e;
+    [_init__height, _init_extra__height, _init__width, _init_extra__width, _init__left, _init_extra__left, _init__top, _init_extra__top, _init__right, _init_extra__right, _init__bottom, _init_extra__bottom, _init_hasOffset, _init_extra_hasOffset, _initProto$b] = _applyDecs2311(this, [], [[observable, 1, "_height"], [observable, 1, "_width"], [observable, 1, "_left"], [observable, 1, "_top"], [observable, 1, "_right"], [observable, 1, "_bottom"], [computed, 3, "height"], [computed, 3, "width"], [computed, 3, "top"], [computed, 3, "left"], [computed, 3, "bottom"], [computed, 3, "right"], [observable, 1, "hasOffset"], [computed, 3, "offsetLeft"], [computed, 3, "offsetTop"], [computed, 3, "offsetHeight"], [computed, 3, "offsetWidth"], [computed, 3, "scale"]]).e;
   }
-  id = (_initProto$8(this), uniqueId('oobx'));
+  id = (_initProto$b(this), uniqueId('oobx'));
   #A = _init__height(this, 0);
   get _height() {
     return this.#A;
@@ -9917,7 +10068,7 @@ class OffsetObserver {
           });
         });
       }
-      this.pid = requestIdleCallback(compute);
+      this.pid = requestAnimationFrame(compute);
       pid = this.pid;
     };
     this.compute = compute;
@@ -9933,7 +10084,7 @@ class OffsetObserver {
   }
   purge() {
     if (this.pid) {
-      cancelIdleCallback(this.pid);
+      cancelAnimationFrame(this.pid);
     }
     this.pid = undefined;
   }
@@ -9948,16 +10099,16 @@ function createOffsetObserver(nodeInstance) {
   return new OffsetObserver(nodeInstance);
 }
 
-let _initProto$7, _init__selected, _init_extra__selected;
+let _initProto$a, _init__selected, _init_extra__selected;
 let SELECTION_EVENT = /*#__PURE__*/function (SELECTION_EVENT) {
   SELECTION_EVENT["CHANGE"] = "selection:change";
   return SELECTION_EVENT;
 }({});
 class Selection {
   static {
-    [_init__selected, _init_extra__selected, _initProto$7] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "_selected"], [action, 2, "select"], [action, 2, "selectAll"], [action, 2, "clear"], [action, 2, "tidy"], [action, 2, "add"], [action, 2, "remove"]]).e;
+    [_init__selected, _init_extra__selected, _initProto$a] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "_selected"], [action, 2, "select"], [action, 2, "selectAll"], [action, 2, "clear"], [action, 2, "tidy"], [action, 2, "add"], [action, 2, "remove"]]).e;
   }
-  emitter = (_initProto$7(this), createEventBus('Selection'));
+  emitter = (_initProto$a(this), createEventBus('Selection'));
   #A = _init__selected(this, []);
   get _selected() {
     return this.#A;
@@ -10088,12 +10239,12 @@ class Selection {
   }
 }
 
-let _initProto$6, _init__name, _init_extra__name;
+let _initProto$9, _init__name, _init_extra__name;
 class SettingPropEntry {
   static {
-    [_init__name, _init_extra__name, _initProto$6] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_name"], [computed, 3, "path"], [computed, 3, "valueState"]]).e;
+    [_init__name, _init_extra__name, _initProto$9] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_name"], [computed, 3, "path"], [computed, 3, "valueState"]]).e;
   }
-  editor = void _initProto$6(this);
+  editor = void _initProto$9(this);
   id = uniqueId('entry');
   emitter = createEventBus('SettingPropEntry');
   #A = _init__name(this);
@@ -10341,7 +10492,7 @@ class SettingPropEntry {
   }
 }
 
-let _initProto$5, _init__expanded, _init_extra__expanded;
+let _initProto$8, _init__expanded, _init_extra__expanded;
 let PropValueChangedType = /*#__PURE__*/function (PropValueChangedType) {
   PropValueChangedType["SET_VALUE"] = "SET_VALUE";
   PropValueChangedType["SUB_VALUE_CHANGE"] = "SUB_VALUE_CHANGE";
@@ -10360,9 +10511,9 @@ function getSettingFieldCollectorKey(parent, config) {
 }
 class SettingField extends SettingPropEntry {
   static {
-    [_init__expanded, _init_extra__expanded, _initProto$5] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_expanded"], [computed, 3, "setter"], [action, 2, "setValue"], [action, 2, "setHotValue"]], 0, void 0, SettingPropEntry).e;
+    [_init__expanded, _init_extra__expanded, _initProto$8] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_expanded"], [computed, 3, "setter"], [action, 2, "setValue"], [action, 2, "setHotValue"]], 0, void 0, SettingPropEntry).e;
   }
-  isSettingField = (_initProto$5(this), true);
+  isSettingField = (_initProto$8(this), true);
   get title() {
     return this._title || this.name;
   }
@@ -10508,12 +10659,12 @@ class SettingField extends SettingPropEntry {
 const isSettingField = obj => obj && obj.isSettingField;
 const isDynamicSetter = obj => typeof obj === 'function';
 
-let _initProto$4, _init__settings, _init_extra__settings;
+let _initProto$7, _init__settings, _init_extra__settings;
 class SettingsManager {
   static {
-    [_init__settings, _init_extra__settings, _initProto$4] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_settings"], [computed, 3, "length"], [computed, 3, "componentMeta"], [computed, 3, "settings"], [action, 2, "setup"]]).e;
+    [_init__settings, _init_extra__settings, _initProto$7] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_settings"], [computed, 3, "length"], [computed, 3, "componentMeta"], [computed, 3, "settings"], [action, 2, "setup"]]).e;
   }
-  _sessionId = (_initProto$4(this), '');
+  _sessionId = (_initProto$7(this), '');
   #A = _init__settings(this);
   get _settings() {
     return this.#A;
@@ -10557,6 +10708,11 @@ class SettingsManager {
     }
     this._sessionId = sessionId;
     if (nodes.length < 1) {
+      const rootNode = this.designer?.project.currentDocument?.rootNode;
+      if (rootNode) {
+        this._settings = rootNode.settingEntry;
+        return;
+      }
       this._settings = undefined;
       return;
     }
@@ -10601,6 +10757,9 @@ class SettingTopEntry {
   get isLocked() {
     return this.first.locked;
   }
+  get isHidden() {
+    return this.first.hidden;
+  }
   get isMultiple() {
     return this.nodes.length > 1;
   }
@@ -10723,7 +10882,7 @@ const isPurgeable = obj => {
   return obj && obj.purge;
 };
 
-let _initProto$3, _init__simulatorProps, _init_extra__simulatorProps, _init__suspended, _init_extra__suspended;
+let _initProto$6, _init__simulatorProps, _init_extra__simulatorProps, _init__suspended, _init_extra__suspended;
 const logger$4 = createLogger('Designer');
 let DESIGNER_EVENT = /*#__PURE__*/function (DESIGNER_EVENT) {
   DESIGNER_EVENT["MOUNT"] = "designer:mount";
@@ -10751,9 +10910,9 @@ let DESIGNER_EVENT = /*#__PURE__*/function (DESIGNER_EVENT) {
 }({});
 class Designer {
   static {
-    [_init__simulatorProps, _init_extra__simulatorProps, _init__suspended, _init_extra__suspended, _initProto$3] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_simulatorProps"], [[observable, observable.ref], 17, "_suspended"], [computed, 3, "simulatorProps"], [computed, 3, "projectSimulatorProps"]]).e;
+    [_init__simulatorProps, _init_extra__simulatorProps, _init__suspended, _init_extra__suspended, _initProto$6] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_simulatorProps"], [[observable, observable.ref], 17, "_suspended"], [computed, 3, "simulatorProps"], [computed, 3, "projectSimulatorProps"]]).e;
   }
-  emitter = (_initProto$3(this), createEventBus('Designer'));
+  emitter = (_initProto$6(this), createEventBus('Designer'));
   activeTracker = new ActiveTracker();
   get materials() {
     return this.editor.get('materials');
@@ -11023,6 +11182,12 @@ let COMPONENT_META_EVENT = /*#__PURE__*/function (COMPONENT_META_EVENT) {
 class ComponentMeta {
   isComponentMeta = true;
   emitter = createEventBus('ComponentMeta');
+  get npm() {
+    return this._npm;
+  }
+  set npm(_npm) {
+    this.setNpm(_npm);
+  }
   get componentName() {
     return this._componentName;
   }
@@ -11054,11 +11219,18 @@ class ComponentMeta {
     this.designer = designer;
     this.parseMetadata(metadata);
   }
+  setNpm(info) {
+    if (!this._npm) {
+      this._npm = info;
+    }
+  }
   parseMetadata(metadata) {
     const {
-      componentName
+      componentName,
+      npm
     } = metadata;
     this._metadata = metadata;
+    this._npm = npm || this._npm;
     this._componentName = componentName;
     const {
       title,
@@ -11094,94 +11266,292 @@ class ComponentMeta {
       this.emitter.off(COMPONENT_META_EVENT.CHANGE, fn);
     };
   }
+  dispose() {
+    this.emitter.removeAllListeners();
+  }
+  isRemoteMaterial() {
+    try {
+      return !!(this.npm && this.npm.package && this.npm.package !== 'builtin');
+    } catch (error) {
+      console.warn(`[ComponentMeta] Failed to check if component "${this.componentName}" is remote material:`, error);
+      return false;
+    }
+  }
 }
 function isComponentMeta(obj) {
   return obj && obj.isComponentMeta;
 }
 
-let _initProto$2, _init__componentMetasMap, _init_extra__componentMetasMap;
-class Materials {
+let MaterialStatus = /*#__PURE__*/function (MaterialStatus) {
+  MaterialStatus["LOADING"] = "loading";
+  MaterialStatus["REGISTERED"] = "registered";
+  MaterialStatus["ACTIVE"] = "active";
+  MaterialStatus["UNLOADING"] = "unloading";
+  MaterialStatus["ERROR"] = "error";
+  return MaterialStatus;
+}({});
+let MaterialSource = /*#__PURE__*/function (MaterialSource) {
+  MaterialSource["BUILTIN"] = "builtin";
+  MaterialSource["REMOTE"] = "remote";
+  MaterialSource["DEBUG"] = "debug";
+  return MaterialSource;
+}({});
+let RegistryEventType = /*#__PURE__*/function (RegistryEventType) {
+  RegistryEventType["REGISTERED"] = "registered";
+  RegistryEventType["UPDATED"] = "updated";
+  RegistryEventType["UNLOADED"] = "unloaded";
+  RegistryEventType["STATUS_CHANGED"] = "status_changed";
+  RegistryEventType["USAGE_CHANGED"] = "usage_changed";
+  RegistryEventType["ERROR"] = "error";
+  return RegistryEventType;
+}({});
+
+let _initProto$5, _init_entries, _init_extra_entries, _init_pendingEntries, _init_extra_pendingEntries, _init__version, _init_extra__version;
+const COMPONENT_NAME_REGEX = /^[A-Za-z_$][A-Za-z0-9_$.@]*$/;
+const MAX_COMPONENT_NAME_LENGTH = 255;
+class MaterialRegistry {
   static {
-    [_init__componentMetasMap, _init_extra__componentMetasMap, _initProto$2] = _applyDecs2311(this, [], [[[observable, observable.ref], 17, "_componentMetasMap"], [action, 2, "createComponentMeta"], [computed, 3, "componentMetasMap"], [computed, 3, "componentsMap"]]).e;
+    [_init_entries, _init_extra_entries, _init_pendingEntries, _init_extra_pendingEntries, _init__version, _init_extra__version, _initProto$5] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "entries"], [[observable, observable.shallow], 17, "pendingEntries"], [observable, 1, "_version"], [action, 2, "register"], [action, 2, "unload"], [action, 2, "getOrCreate"], [action, 2, "incrementUsage"], [action, 2, "decrementUsage"], [action, 2, "refresh"], [computed, 3, "componentMetasMap"], [computed, 3, "componentsMap"], [action, 2, "dispose"]]).e;
   }
-  #A = (_initProto$2(this), _init__componentMetasMap(this, new Map()));
-  get _componentMetasMap() {
+  #A = (_initProto$5(this), _init_entries(this, new Map()));
+  get entries() {
     return this.#A;
   }
-  set _componentMetasMap(v) {
+  set entries(v) {
     this.#A = v;
   }
-  _lostComponentMetasMap = (_init_extra__componentMetasMap(this), new Map());
-  get designer() {
-    return this.editor.get('designer');
+  #B = (_init_extra_entries(this), _init_pendingEntries(this, new Map()));
+  get pendingEntries() {
+    return this.#B;
   }
-  constructor(editor) {
-    this.editor = editor;
+  set pendingEntries(v) {
+    this.#B = v;
   }
-  buildComponentMetasMap = metas => {
-    for (const meta of metas) {
-      this.createComponentMeta(meta);
+  #C = (_init_extra_pendingEntries(this), _init__version(this, 0));
+  get _version() {
+    return this.#C;
+  }
+  set _version(v) {
+    this.#C = v;
+  }
+  listeners = (_init_extra__version(this), new Set());
+  disposed = false;
+  constructor(designer) {
+    this.designer = designer;
+  }
+  get version() {
+    return this._version;
+  }
+  validateComponentName(name) {
+    if (!name || typeof name !== 'string') {
+      return false;
     }
-  };
-  createComponentMeta(data) {
-    const key = data.componentName;
-    if (!key) {
-      return null;
+    if (name.length > MAX_COMPONENT_NAME_LENGTH) {
+      return false;
     }
-    let meta = this._componentMetasMap.get(key);
-    if (meta) {
-      meta.setMetadata(data);
-      this._componentMetasMap.set(key, meta);
+    return COMPONENT_NAME_REGEX.test(name);
+  }
+  emit(event) {
+    const fullEvent = {
+      ...event,
+      timestamp: Date.now()
+    };
+    this.listeners.forEach(listener => {
+      try {
+        listener(fullEvent);
+      } catch (error) {
+        console.error('[MaterialRegistry] Event listener error:', error);
+      }
+    });
+  }
+  createEntry(componentName, meta, options = {}) {
+    return {
+      componentName,
+      status: options.component ? MaterialStatus.ACTIVE : MaterialStatus.REGISTERED,
+      source: options.source ?? MaterialSource.BUILTIN,
+      meta,
+      component: options.component,
+      version: options.version,
+      loadedAt: Date.now(),
+      lastAccessedAt: Date.now(),
+      usageCount: 0
+    };
+  }
+  register(metadata, options = {}) {
+    const componentName = metadata.componentName;
+    if (!this.validateComponentName(componentName)) {
+      console.warn(`[MaterialRegistry] Invalid component name: "${componentName}"`);
+      throw new Error(`Invalid component name: "${componentName}"`);
+    }
+    let entry = this.entries.get(componentName);
+    let isNew = false;
+    if (entry) {
+      if (!options.override) {
+        entry.meta.setMetadata(metadata);
+        entry.lastAccessedAt = Date.now();
+        if (options.component) {
+          entry.component = options.component;
+          entry.status = MaterialStatus.ACTIVE;
+        }
+      } else {
+        entry.meta = new ComponentMeta(this.designer, metadata);
+        entry.component = options.component;
+        entry.status = options.component ? MaterialStatus.ACTIVE : MaterialStatus.REGISTERED;
+        entry.lastAccessedAt = Date.now();
+      }
     } else {
-      meta = this._lostComponentMetasMap.get(key);
-      if (meta) {
-        meta.setMetadata(data);
-        this._lostComponentMetasMap.delete(key);
+      const pendingEntry = this.pendingEntries.get(componentName);
+      if (pendingEntry) {
+        pendingEntry.meta.setMetadata(metadata);
+        pendingEntry.status = options.component ? MaterialStatus.ACTIVE : MaterialStatus.REGISTERED;
+        pendingEntry.component = options.component;
+        pendingEntry.source = options.source ?? MaterialSource.BUILTIN;
+        pendingEntry.version = options.version;
+        pendingEntry.lastAccessedAt = Date.now();
+        entry = pendingEntry;
+        this.pendingEntries.delete(componentName);
+        isNew = true;
       } else {
-        meta = new ComponentMeta(this.designer, data);
+        const meta = new ComponentMeta(this.designer, metadata);
+        entry = this.createEntry(componentName, meta, options);
+        isNew = true;
       }
-      this._componentMetasMap.set(key, meta);
+      this.entries.set(componentName, entry);
     }
-    return meta;
+    this.emit({
+      type: isNew ? RegistryEventType.REGISTERED : RegistryEventType.UPDATED,
+      componentName,
+      entry
+    });
+    return entry.meta;
   }
-  getComponentMeta(componentName, generateMetadata) {
-    if (this._componentMetasMap.has(componentName)) {
-      return this._componentMetasMap.get(componentName);
+  async unload(componentName, options = {}) {
+    const entry = this.entries.get(componentName);
+    if (!entry) {
+      console.warn(`[MaterialRegistry] Component not found: "${componentName}"`);
+      return false;
+    }
+    if (!options.force && entry.usageCount > 0) {
+      console.warn(`[MaterialRegistry] Cannot unload "${componentName}": ${entry.usageCount} instances in use`);
+      return false;
+    }
+    entry.status = MaterialStatus.UNLOADING;
+    this.emit({
+      type: RegistryEventType.STATUS_CHANGED,
+      componentName,
+      entry,
+      previousStatus: MaterialStatus.ACTIVE
+    });
+    if (entry.meta.dispose) {
+      entry.meta.dispose();
+    }
+    this.entries.delete(componentName);
+    this.emit({
+      type: RegistryEventType.UNLOADED,
+      componentName
+    });
+    this.refresh();
+    return true;
+  }
+  get(componentName) {
+    const entry = this.entries.get(componentName);
+    if (entry) {
+      entry.lastAccessedAt = Date.now();
+    }
+    return entry;
+  }
+  getOrCreate(componentName, generateMetadata) {
+    const entry = this.entries.get(componentName);
+    if (entry) {
+      entry.lastAccessedAt = Date.now();
+      return entry.meta;
     }
-    if (this._lostComponentMetasMap.has(componentName)) {
-      return this._lostComponentMetasMap.get(componentName);
+    const pendingEntry = this.pendingEntries.get(componentName);
+    if (pendingEntry) {
+      pendingEntry.lastAccessedAt = Date.now();
+      return pendingEntry.meta;
     }
-    const meta = new ComponentMeta(this.designer, {
+    const metadata = {
       componentName,
       ...(generateMetadata ? generateMetadata() : null)
+    };
+    const meta = new ComponentMeta(this.designer, metadata);
+    const newEntry = this.createEntry(componentName, meta, {
+      source: MaterialSource.BUILTIN
     });
-    this._lostComponentMetasMap.set(componentName, meta);
+    newEntry.status = MaterialStatus.LOADING;
+    this.pendingEntries.set(componentName, newEntry);
     return meta;
   }
-  getComponentSnippets() {
-    return Array.from(this._componentMetasMap.values()).flatMap(meta => meta.snippets);
+  has(componentName) {
+    return this.entries.has(componentName);
+  }
+  incrementUsage(componentName) {
+    const entry = this.entries.get(componentName) || this.pendingEntries.get(componentName);
+    if (entry) {
+      entry.usageCount++;
+      this.emit({
+        type: RegistryEventType.USAGE_CHANGED,
+        componentName,
+        entry
+      });
+    }
   }
-  getComponentMetasMap() {
-    return this._componentMetasMap;
+  decrementUsage(componentName) {
+    const entry = this.entries.get(componentName) || this.pendingEntries.get(componentName);
+    if (entry && entry.usageCount > 0) {
+      entry.usageCount--;
+      this.emit({
+        type: RegistryEventType.USAGE_CHANGED,
+        componentName,
+        entry
+      });
+    }
+  }
+  canUnload(componentName) {
+    const entry = this.entries.get(componentName);
+    if (!entry) {
+      return false;
+    }
+    return entry.usageCount === 0;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getAll() {
+    return new Map(this.entries);
+  }
+  getBySource(source) {
+    const result = [];
+    this.entries.forEach(entry => {
+      if (entry.source === source) {
+        result.push(entry);
+      }
+    });
+    return result;
+  }
+  refresh() {
+    this._version++;
+    this.entries = new Map(this.entries);
   }
   get componentMetasMap() {
     const maps = {};
-    this._componentMetasMap.forEach((config, key) => {
-      const metaData = config.getMetadata();
-      maps[key] = metaData;
+    this.entries.forEach((entry, key) => {
+      maps[key] = entry.meta.getMetadata();
     });
     return maps;
   }
   get componentsMap() {
     const maps = {};
-    this._componentMetasMap.forEach((config, key) => {
-      const metaData = config.getMetadata();
-      if (metaData.devMode === 'lowCode') {
-        maps[key] = metaData.schema;
+    this.entries.forEach((entry, key) => {
+      const metadata = entry.meta.getMetadata();
+      if (metadata.devMode === 'lowCode') {
+        maps[key] = metadata.schema;
       } else {
-        const {
-          view
-        } = config.advanced;
+        const view = entry.meta.advanced?.view ?? entry.component;
         if (view) {
           maps[key] = view;
         }
@@ -11189,12 +11559,127 @@ class Materials {
     });
     return maps;
   }
+  getComponentSnippets() {
+    const snippets = [];
+    this.entries.forEach(entry => {
+      const metaSnippets = entry.meta.snippets;
+      if (metaSnippets) {
+        snippets.push(...metaSnippets);
+      }
+    });
+    return snippets;
+  }
+  dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    this.entries.forEach(entry => {
+      if (entry.meta.dispose) {
+        entry.meta.dispose();
+      }
+    });
+    this.pendingEntries.forEach(entry => {
+      if (entry.meta.dispose) {
+        entry.meta.dispose();
+      }
+    });
+    this.entries.clear();
+    this.pendingEntries.clear();
+    this.listeners.clear();
+  }
+}
+
+let _initProto$4;
+class Materials {
+  static {
+    [_initProto$4] = _applyDecs2311(this, [], [[action, 2, "createComponentMeta"], [action, 2, "removeComponentMeta"], [computed, 3, "componentMetasMap"], [computed, 3, "componentsMap"]]).e;
+  }
+  _registry = (_initProto$4(this), null);
+  get designer() {
+    return this.editor.get('designer');
+  }
+  get registry() {
+    if (!this._registry) {
+      this._registry = new MaterialRegistry(this.designer);
+    }
+    return this._registry;
+  }
+  get version() {
+    return this.registry.version;
+  }
+  constructor(editor) {
+    this.editor = editor;
+  }
+  buildComponentMetasMap = metas => {
+    for (const meta of metas) {
+      this.createComponentMeta(meta);
+    }
+  };
+  createComponentMeta(data, options) {
+    const key = data.componentName;
+    if (!key) {
+      return null;
+    }
+    return this.registry.register(data, {
+      source: MaterialSource.BUILTIN,
+      ...options
+    });
+  }
+  removeComponentMeta(componentName) {
+    if (!componentName) {
+      return false;
+    }
+    const entry = this.registry.get(componentName);
+    if (!entry) {
+      return false;
+    }
+    if (entry.usageCount > 0) {
+      console.warn(`[Materials] Removing "${componentName}" with ${entry.usageCount} instances in use. ` + 'This may cause rendering errors. Consider using registry.unload() with force option.');
+    }
+    this.registry.unload(componentName, {
+      force: true
+    });
+    return true;
+  }
+  getComponentMeta(componentName, generateMetadata) {
+    return this.registry.getOrCreate(componentName, generateMetadata);
+  }
+  getComponentSnippets() {
+    return this.registry.getComponentSnippets();
+  }
+  getComponentMetasMap() {
+    const map = new Map();
+    this.registry.getAll().forEach((entry, key) => {
+      map.set(key, entry.meta);
+    });
+    return map;
+  }
+  get componentMetasMap() {
+    return this.registry.componentMetasMap;
+  }
+  get componentsMap() {
+    return this.registry.componentsMap;
+  }
   refreshComponentMetasMap() {
-    this._componentMetasMap = new Map(this._componentMetasMap);
+    this.registry.refresh();
+  }
+  incrementUsage(componentName) {
+    this.registry.incrementUsage(componentName);
+  }
+  decrementUsage(componentName) {
+    this.registry.decrementUsage(componentName);
+  }
+  canUnload(componentName) {
+    return this.registry.canUnload(componentName);
   }
   isComponentMeta(obj) {
     return isComponentMeta(obj);
   }
+  dispose() {
+    this._registry?.dispose();
+    this._registry = null;
+  }
 }
 
 class PluginContext {
@@ -11469,11 +11954,11 @@ class PluginRuntime {
     if (!this._inited) {
       this.logger.warn('Could not call toProxy before init');
     }
-    const exports = this.config.exports?.();
+    const exports$1 = this.config.exports?.();
     return new Proxy(this, {
       get(target, prop, receiver) {
-        if ({}.hasOwnProperty.call(exports, prop)) {
-          return exports?.[prop];
+        if ({}.hasOwnProperty.call(exports$1, prop)) {
+          return exports$1?.[prop];
         }
         return Reflect.get(target, prop, receiver);
       }
@@ -11711,6 +12196,287 @@ const isRegisterOptions = opts => {
   return opts && ('autoInit' in opts || 'override' in opts);
 };
 
+let RemoteLoadErrorType = /*#__PURE__*/function (RemoteLoadErrorType) {
+  RemoteLoadErrorType["NETWORK_ERROR"] = "NETWORK_ERROR";
+  RemoteLoadErrorType["PACKAGE_NOT_FOUND"] = "PACKAGE_NOT_FOUND";
+  RemoteLoadErrorType["VERSION_NOT_FOUND"] = "VERSION_NOT_FOUND";
+  RemoteLoadErrorType["SCRIPT_LOAD_FAILED"] = "SCRIPT_LOAD_FAILED";
+  RemoteLoadErrorType["CSS_LOAD_FAILED"] = "CSS_LOAD_FAILED";
+  RemoteLoadErrorType["GLOBAL_NOT_FOUND"] = "GLOBAL_NOT_FOUND";
+  RemoteLoadErrorType["METADATA_INVALID"] = "METADATA_INVALID";
+  RemoteLoadErrorType["CDN_ALL_FAILED"] = "CDN_ALL_FAILED";
+  RemoteLoadErrorType["TIMEOUT"] = "TIMEOUT";
+  return RemoteLoadErrorType;
+}({});
+const ERROR_MESSAGES = {
+  [RemoteLoadErrorType.NETWORK_ERROR]: () => '网络连接失败，请检查您的网络设置',
+  [RemoteLoadErrorType.PACKAGE_NOT_FOUND]: (name, type) => `${type === 'material' ? '物料包' : '设置器包'} "${name}" 不存在`,
+  [RemoteLoadErrorType.VERSION_NOT_FOUND]: () => '指定的版本不存在',
+  [RemoteLoadErrorType.SCRIPT_LOAD_FAILED]: (_, type) => `${type === 'material' ? '物料' : '设置器'}脚本加载失败`,
+  [RemoteLoadErrorType.CSS_LOAD_FAILED]: () => '样式加载失败',
+  [RemoteLoadErrorType.GLOBAL_NOT_FOUND]: (_, type) => `${type === 'material' ? '物料' : '设置器'}格式不正确`,
+  [RemoteLoadErrorType.METADATA_INVALID]: () => '元数据格式错误',
+  [RemoteLoadErrorType.CDN_ALL_FAILED]: () => '所有 CDN 加载失败',
+  [RemoteLoadErrorType.TIMEOUT]: () => '加载超时'
+};
+class RemoteLoadError extends Error {
+  name = 'RemoteLoadError';
+  constructor(
+  type,
+  resourceName,
+  resourceType,
+  message,
+  originalError) {
+    super(message);
+    this.type = type;
+    this.resourceName = resourceName;
+    this.resourceType = resourceType;
+    this.originalError = originalError;
+    Object.setPrototypeOf(this, RemoteLoadError.prototype);
+  }
+  toUserMessage() {
+    const getMessage = ERROR_MESSAGES[this.type];
+    return getMessage?.(this.resourceName, this.resourceType) || `加载失败: ${this.message}`;
+  }
+  static create(type, resourceName, resourceType, message, originalError) {
+    const defaultMessage = ERROR_MESSAGES[type]?.(resourceName, resourceType) || type;
+    return new RemoteLoadError(type, resourceName, resourceType, message || defaultMessage, originalError);
+  }
+}
+
+let LoadingStatus = /*#__PURE__*/function (LoadingStatus) {
+  LoadingStatus["IDLE"] = "idle";
+  LoadingStatus["LOADING"] = "loading";
+  LoadingStatus["LOADED"] = "loaded";
+  LoadingStatus["ERROR"] = "error";
+  return LoadingStatus;
+}({});
+const DEFAULT_TIMEOUT = 30000;
+
+let _initProto$3, _init_states, _init_extra_states;
+class LoadingStateManager {
+  static {
+    [_init_states, _init_extra_states, _initProto$3] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "states"], [computed, 3, "isLoading"], [computed, 3, "loadingResources"], [computed, 3, "errors"], [computed, 3, "loadedResources"], [action, 2, "updateState"], [action, 2, "startLoading"], [action, 2, "updateProgress"], [action, 2, "markLoaded"], [action, 2, "markError"], [action, 2, "clearState"], [action, 2, "clearAll"]]).e;
+  }
+  #A = (_initProto$3(this), _init_states(this, new Map()));
+  get states() {
+    return this.#A;
+  }
+  set states(v) {
+    this.#A = v;
+  }
+  listeners = (_init_extra_states(this), new Set());
+  get isLoading() {
+    for (const state of this.states.values()) {
+      if (state.status === LoadingStatus.LOADING) {
+        return true;
+      }
+    }
+    return false;
+  }
+  get loadingResources() {
+    return Array.from(this.states.values()).filter(s => s.status === LoadingStatus.LOADING);
+  }
+  get errors() {
+    return Array.from(this.states.values()).filter(s => s.status === LoadingStatus.ERROR);
+  }
+  get loadedResources() {
+    return Array.from(this.states.values()).filter(s => s.status === LoadingStatus.LOADED);
+  }
+  isTypeLoading(type) {
+    for (const state of this.states.values()) {
+      if (state.type === type && state.status === LoadingStatus.LOADING) {
+        return true;
+      }
+    }
+    return false;
+  }
+  getState(key) {
+    return this.states.get(key);
+  }
+  updateState(key, state) {
+    const existing = this.states.get(key);
+    if (existing) {
+      this.states.set(key, {
+        ...existing,
+        ...state
+      });
+    } else {
+      this.states.set(key, {
+        type: 'material',
+        name: key,
+        status: LoadingStatus.IDLE,
+        ...state
+      });
+    }
+    this.notifyListeners();
+  }
+  startLoading(key, type, name) {
+    this.states.set(key, {
+      type,
+      name,
+      status: LoadingStatus.LOADING,
+      progress: 0
+    });
+    this.notifyListeners();
+  }
+  updateProgress(key, progress) {
+    const state = this.states.get(key);
+    if (state) {
+      this.states.set(key, {
+        ...state,
+        progress: Math.min(100, Math.max(0, progress))
+      });
+      this.notifyListeners();
+    }
+  }
+  markLoaded(key) {
+    const state = this.states.get(key);
+    if (state) {
+      this.states.set(key, {
+        ...state,
+        status: LoadingStatus.LOADED,
+        progress: 100,
+        loadedAt: Date.now()
+      });
+      this.notifyListeners();
+    }
+  }
+  markError(key, error) {
+    const state = this.states.get(key);
+    if (state) {
+      this.states.set(key, {
+        ...state,
+        status: LoadingStatus.ERROR,
+        error
+      });
+      this.notifyListeners();
+    }
+  }
+  clearState(key) {
+    this.states.delete(key);
+    this.notifyListeners();
+  }
+  clearAll() {
+    this.states.clear();
+    this.notifyListeners();
+  }
+  async waitForAll(timeout = 30000) {
+    return this.waitFor(() => !this.isLoading, timeout);
+  }
+  async waitForType(type, timeout = 30000) {
+    return this.waitFor(() => !this.isTypeLoading(type), timeout);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  waitFor(condition, timeout) {
+    return new Promise((resolve, reject) => {
+      if (condition()) {
+        resolve();
+        return;
+      }
+      const timeoutId = setTimeout(() => {
+        unsubscribe();
+        reject(new Error(`Wait timeout after ${timeout}ms`));
+      }, timeout);
+      const unsubscribe = this.subscribe(() => {
+        if (condition()) {
+          clearTimeout(timeoutId);
+          unsubscribe();
+          resolve();
+        }
+      });
+    });
+  }
+  notifyListeners() {
+    for (const listener of this.listeners) {
+      try {
+        listener(this.states);
+      } catch (error) {
+        console.error('[LoadingStateManager] Listener error:', error);
+      }
+    }
+  }
+}
+const loadingState = new LoadingStateManager();
+
+let _initProto$2, _init_materials, _init_extra_materials, _init_setters, _init_extra_setters;
+class ResourceRegistry {
+  static {
+    [_init_materials, _init_extra_materials, _init_setters, _init_extra_setters, _initProto$2] = _applyDecs2311(this, [], [[[observable, observable.shallow], 17, "materials"], [[observable, observable.shallow], 17, "setters"], [computed, 3, "materialCount"], [computed, 3, "setterCount"], [action, 2, "register"], [action, 2, "unload"], [action, 2, "clearType"], [action, 2, "clearAll"]]).e;
+  }
+  constructor() {
+    _init_extra_setters(this);
+  }
+  #A = (_initProto$2(this), _init_materials(this, new Map()));
+  get materials() {
+    return this.#A;
+  }
+  set materials(v) {
+    this.#A = v;
+  }
+  #B = (_init_extra_materials(this), _init_setters(this, new Map()));
+  get setters() {
+    return this.#B;
+  }
+  set setters(v) {
+    this.#B = v;
+  }
+  get materialCount() {
+    return this.materials.size;
+  }
+  get setterCount() {
+    return this.setters.size;
+  }
+  register(resource) {
+    const map = this.getMap(resource.type);
+    map.set(resource.name, resource);
+  }
+  get(type, name) {
+    const map = this.getMap(type);
+    return map.get(name);
+  }
+  has(type, name) {
+    const map = this.getMap(type);
+    return map.has(name);
+  }
+  unload(type, name) {
+    const map = this.getMap(type);
+    return map.delete(name);
+  }
+  getAll(type) {
+    if (type === 'material') {
+      return Array.from(this.materials.values());
+    }
+    if (type === 'setter') {
+      return Array.from(this.setters.values());
+    }
+    return [...Array.from(this.materials.values()), ...Array.from(this.setters.values())];
+  }
+  getMaterialNames() {
+    return Array.from(this.materials.keys());
+  }
+  getSetterNames() {
+    return Array.from(this.setters.keys());
+  }
+  clearType(type) {
+    const map = this.getMap(type);
+    map.clear();
+  }
+  clearAll() {
+    this.materials.clear();
+    this.setters.clear();
+  }
+  getMap(type) {
+    return type === 'material' ? this.materials : this.setters;
+  }
+}
+const resourceRegistry = new ResourceRegistry();
+
 let _initProto$1;
 const logger$2 = createLogger('Setters');
 class Setters {
@@ -12066,8 +12832,8 @@ const destroy = async () => {
   logger.info('Engine destruction successfully');
 };
 
-const version = '1.0.1';
+const version = '1.0.2';
 config.set('VERSION', version);
 console.log(`%c EasyEditor %c v${version} `, 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #5584ff; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;');
 
-export { AutoFit, COMPONENT_META_EVENT, ComponentMeta, Config, DESIGNER_EVENT, DETECTING_EVENT, DOCUMENT_EVENT, DRAGON_EVENT, Designer, Detecting, Document, DragObject, DragObjectType, Dragon, DropLocation, EDITOR_EVENT, Event, EventBus, GLOBAL_EVENT, HISTORY_EVENT, History, Hotkey, LocationDetailType, Logger, MOBX_EXTEND_SYMBOL, Materials, MobxExtendType, NODE_CHILDREN_EVENT, NODE_EVENT, Node$1 as Node, NodeChildren, OffsetObserver, PROJECT_EVENT, PluginContext, PluginRuntime, Plugins, PositionNO, Project, Prop, PropValueChangedType, Props, SELECTION_EVENT, Selection, Session, Setters, SettingField, SettingPropEntry, SettingTopEntry, SettingsManager, Simulator, TRANSFORM_STAGE, UNSET, Viewport, addMobxExtendProperty, clipboard, cloneDeep, commonEvent, comparePosition, config, contains, createEventBus, createLogger, createOffsetObserver, destroy, ensureNode, event, extend, generateSessionId, getClosestClickableNode, getClosestNode, getConvertedExtraKey, getEvent, getOriginalExtraKey, getSourceSensor, getWindow, getZLevelTop, hotkey, init, insertChild, insertChildren, isComponentMeta, isDOMNodeVisible, isDocument, isDocumentNode, isDragAnyObject, isDragEvent, isDragNodeDataObject, isDragNodeObject, isDynamicSetter, isElementNode, isExtraKey, isInvalidPoint, isJSExpression, isJSFunction, isLocateEvent, isLocationChildrenDetail, isLocationData, isLowCodeComponentType, isMobxExtendProperty, isNode, isNodeSchema, isObject$1 as isObject, isPlainObject$1 as isPlainObject, isPluginEventName, isProCodeComponentType, isProp, isPurgeable, isRegisterOptions, isSameAs, isSetterConfig, isSettingField, isShaken, isSimulator, isSimulatorRenderer, isTextNode, isValidArrayIndex, logger, makeEventsHandler, materials, mobxExtendAction, mobxExtendComputed, mobxExtendComputedGetter, mobxExtendComputedGetterSetter, mobxExtendObservable, mobxExtendObservableRef, mobxExtendObservableShallow, plugins, project, setShaken, setters, splitPath, uniqueId, version };
+export { AssetLevel, AssetLevels, AssetType, AutoFit, COMPONENT_META_EVENT, ComponentMeta, Config, DEFAULT_TIMEOUT, DESIGNER_EVENT, DETECTING_EVENT, DOCUMENT_EVENT, DRAGON_EVENT, Designer, Detecting, Document, DragObject, DragObjectType, Dragon, DropLocation, EDITOR_EVENT, Event, EventBus, GLOBAL_EVENT, HISTORY_EVENT, History, Hotkey, LoadingStateManager, LoadingStatus, LocationDetailType, Logger, MOBX_EXTEND_SYMBOL, MaterialRegistry, MaterialSource, MaterialStatus, Materials, MobxExtendType, NODE_CHILDREN_EVENT, NODE_EVENT, Node$1 as Node, NodeChildren, OffsetObserver, PROJECT_EVENT, PluginContext, PluginRuntime, Plugins, PositionNO, Project, Prop, PropValueChangedType, Props, RegistryEventType, RemoteLoadError, RemoteLoadErrorType, ResourceRegistry, SELECTION_EVENT, Selection, Session, Setters, SettingField, SettingPropEntry, SettingTopEntry, SettingsManager, Simulator, TRANSFORM_STAGE, UNSET$1 as UNSET, Viewport, addMobxExtendProperty, clipboard, cloneDeep, commonEvent, comparePosition, config, contains, createEventBus, createLogger, createOffsetObserver, destroy, ensureNode, event, extend, generateSessionId, getClosestClickableNode, getClosestNode, getConvertedExtraKey, getEvent, getOriginalExtraKey, getSourceSensor, getWindow, getZLevelTop, hotkey, init, insertChild, insertChildren, isComponentMeta, isDOMNodeVisible, isDocument, isDocumentNode, isDragAnyObject, isDragEvent, isDragNodeDataObject, isDragNodeObject, isDynamicSetter, isElementNode, isExtraKey, isInvalidPoint, isJSExpression, isJSFunction, isLocateEvent, isLocationChildrenDetail, isLocationData, isLowCodeComponentType, isMobxExtendProperty, isNode, isNodeSchema, isObject$1 as isObject, isPlainObject$1 as isPlainObject, isPluginEventName, isProCodeComponentType, isProp, isPurgeable, isRegisterOptions, isRemoteComponent, isSameAs, isSetterConfig, isSettingField, isShaken, isSimulator, isSimulatorRenderer, isTextNode, isValidArrayIndex, loadingState, logger, makeEventsHandler, materials, mobxExtendAction, mobxExtendComputed, mobxExtendComputedGetter, mobxExtendComputedGetterSetter, mobxExtendObservable, mobxExtendObservableRef, mobxExtendObservableShallow, plugins, project, resourceRegistry, setShaken, setters, splitPath, uniqueId, version };