@visactor/vrender 1.1.0-alpha.23 → 1.1.0-alpha.25

package/dist/index.js

@@ -169,7 +169,7 @@
       }
     }
 
-    var __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -338,7 +338,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
       }
       loadFont(name, source, descriptors) {
-        return __awaiter$8(this, void 0, void 0, function* () {
+        return __awaiter$7(this, void 0, void 0, function* () {
           return this._env || this.setEnv("browser"), this.envContribution.loadFont(name, source, descriptors);
         });
       }
@@ -724,14 +724,14 @@
     const isObjectLike = value => "object" == typeof value && null !== value;
     var isObjectLike$1 = isObjectLike;
 
-    const isPlainObject$3 = function (value) {
+    const isPlainObject$2 = function (value) {
       if (!isObjectLike$1(value) || !isType$1(value, "Object")) return !1;
       if (null === Object.getPrototypeOf(value)) return !0;
       let proto = value;
       for (; null !== Object.getPrototypeOf(proto);) proto = Object.getPrototypeOf(proto);
       return Object.getPrototypeOf(value) === proto;
     };
-    var isPlainObject$4 = isPlainObject$3;
+    var isPlainObject$3 = isPlainObject$2;
 
     const isUndefined = value => void 0 === value;
     var isUndefined$1 = isUndefined;
@@ -846,7 +846,7 @@
           const length = objValue.length;
           for (; ++index < length;) newValue[index] = objValue[index];
         }
-      } else isPlainObject$4(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
+      } else isPlainObject$3(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
       isCommon && baseMerge(newValue, srcValue, shallowArray, skipTargetArray), assignMergeValue(target, key, newValue);
     }
     function assignMergeValue(target, key, value) {
@@ -883,7 +883,7 @@
         for (let i = a.length - 1; i >= 0; i--) if (!isEqual(a[i], b[i], options)) return !1;
         return !0;
       }
-      if (!isPlainObject$4(a)) return !1;
+      if (!isPlainObject$3(a)) return !1;
       const ka = objectKeys(a),
         kb = objectKeys(b);
       if (ka.length !== kb.length) return !1;
@@ -2668,7 +2668,7 @@
     };
     const lowerCamelCaseToMiddle = str => str.replace(/([A-Z])/g, "-$1").toLowerCase();
 
-    var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -2718,6 +2718,7 @@
       constructor() {
         super(), this._uid = Generator.GenAutoIncrementId(), this._firstChild = null, this._lastChild = null, this.parent = null, this._count = 1;
       }
+      onParentSharedStateTreeChanged(_stage, _layer) {}
       forEachChildren(cb, reverse = !1) {
         if (reverse) {
           let child = this._lastChild,
@@ -2736,7 +2737,7 @@
         }
       }
       forEachChildrenAsync(cb, reverse = !1) {
-        return __awaiter$7(this, void 0, void 0, function* () {
+        return __awaiter$6(this, void 0, void 0, function* () {
           if (reverse) {
             let child = this._lastChild,
               i = 0;
@@ -5202,6 +5203,7 @@
       cornerRadius: 0,
       padRadius: 0,
       padAngle: 0,
+      clipRange: 1,
       cap: !1,
       forceShowCap: !1
     });
@@ -6292,7 +6294,7 @@
       return str.startsWith("<");
     }
 
-    var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -6321,7 +6323,7 @@
       group.incrementalAppendChild(graphic);
     }
     function waitForAllSubLayers(stage) {
-      return __awaiter$6(this, void 0, void 0, function* () {
+      return __awaiter$5(this, void 0, void 0, function* () {
         const promiseList = [],
           layers = stage.getChildren();
         yield new Promise(resolve => {
@@ -7903,8 +7905,8 @@
       return conicalCanvas.width = imageData.width, conicalCanvas.height = imageData.height, conicalCtx.putImageData(imageData, 0, 0), pattern = context.createPattern(conicalCanvas, "no-repeat"), pattern && ConicalPatternStore.Set(stops, x, y, startAngle, endAngle, pattern, width, height), pattern;
     }
 
-    const FULL_DEFINITION_KEYS$1 = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
-    function isPlainObject$2(value) {
+    const FULL_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
+    function isPlainObject$1(value) {
       return null != value && "object" == typeof value && !Array.isArray(value);
     }
     function normalizePatch(value) {
@@ -7950,12 +7952,11 @@
           priority: 0,
           patch: void 0
         };
-        if ((isPlainObject$2(value) ? Object.keys(value) : []).some(key => FULL_DEFINITION_KEYS$1.has(key))) {
+        if ((isPlainObject$1(value) ? Object.keys(value) : []).some(key => FULL_DEFINITION_KEYS.has(key))) {
           const definition = value;
           return {
             name: null !== (_a = definition.name) && void 0 !== _a ? _a : name,
             priority: null !== (_b = definition.priority) && void 0 !== _b ? _b : 0,
-            rank: definition.rank,
             patch: normalizePatch(definition.patch),
             resolver: definition.resolver,
             declaredAffectedKeys: definition.declaredAffectedKeys,
@@ -7975,281 +7976,40 @@
           rawRelationMap.set(name, new Set(definition[relation]));
         }), compiled.forEach((definition, origin) => {
           const closure = new Set(),
-            walk = (stateName, stack) => {
+            walk = (stateName, visiting) => {
               const nextStates = rawRelationMap.get(stateName);
               nextStates && nextStates.size && nextStates.forEach(nextState => {
-                nextState !== origin ? stack.includes(nextState) ? console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(" -> ")} -> ${nextState}`) : closure.has(nextState) || (closure.add(nextState), walk(nextState, stack.concat(nextState))) : console.warn(`[StateDefinitionCompiler] circular ${relation} relation detected: ${stack.join(" -> ")} -> ${origin}`);
+                nextState === origin || visiting.has(nextState) || closure.has(nextState) || (closure.add(nextState), visiting.add(nextState), walk(nextState, visiting), visiting.delete(nextState));
               });
             };
-          walk(origin, [origin]), definition[relation] = closure;
+          walk(origin, new Set([origin])), definition[relation] = closure;
         });
       }
     }
 
-    var UpdateCategory;
-    !function (UpdateCategory) {
-      UpdateCategory[UpdateCategory.NONE = 0] = "NONE", UpdateCategory[UpdateCategory.PAINT = 1] = "PAINT", UpdateCategory[UpdateCategory.SHAPE = 2] = "SHAPE", UpdateCategory[UpdateCategory.BOUNDS = 4] = "BOUNDS", UpdateCategory[UpdateCategory.TRANSFORM = 8] = "TRANSFORM", UpdateCategory[UpdateCategory.LAYOUT = 16] = "LAYOUT", UpdateCategory[UpdateCategory.PICK = 32] = "PICK";
-    }(UpdateCategory || (UpdateCategory = {}));
-    const ATTRIBUTE_CATEGORY = {
-      fill: UpdateCategory.PAINT,
-      opacity: UpdateCategory.PAINT,
-      fillOpacity: UpdateCategory.PAINT,
-      strokeOpacity: UpdateCategory.PAINT,
-      lineDash: UpdateCategory.PAINT,
-      lineDashOffset: UpdateCategory.PAINT,
-      lineCap: UpdateCategory.PAINT,
-      lineJoin: UpdateCategory.PAINT,
-      miterLimit: UpdateCategory.PAINT,
-      shadowColor: UpdateCategory.PAINT,
-      x: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      y: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      scaleX: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      scaleY: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      angle: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      anchor: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      anchor3d: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      postMatrix: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
-      layout: UpdateCategory.LAYOUT,
-      zIndex: UpdateCategory.PAINT,
-      visible: UpdateCategory.PAINT | UpdateCategory.PICK,
-      lineWidth: UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.PICK,
-      width: UpdateCategory.SHAPE | UpdateCategory.BOUNDS,
-      height: UpdateCategory.SHAPE | UpdateCategory.BOUNDS
-    };
-    const ATTRIBUTE_DELTA_CLASSIFIER = {
-      stroke: (prev, next) => (null != prev && !1 !== prev) !== (null != next && !1 !== next) ? UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK : UpdateCategory.PAINT,
-      shadowBlur: (prev, next) => {
-        const prevBlur = Number(null != prev ? prev : 0),
-          nextBlur = Number(null != next ? next : 0);
-        return prevBlur !== nextBlur && (prevBlur > 0 || nextBlur > 0) ? UpdateCategory.PAINT | UpdateCategory.BOUNDS : UpdateCategory.PAINT;
-      }
-    };
-    function classifyAttributeDelta(key, prev, next) {
-      var _a;
-      const dynamicClassifier = ATTRIBUTE_DELTA_CLASSIFIER[key];
-      return dynamicClassifier ? dynamicClassifier(prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
-    }
-    function classifyAffectedKeyConservatively(key) {
-      var _a;
-      return "stroke" === key ? UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK : "shadowBlur" === key ? UpdateCategory.PAINT | UpdateCategory.BOUNDS : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
-    }
-    function classifyAffectedKeys(keys) {
-      let category = UpdateCategory.NONE;
-      for (const key of keys) category |= classifyAffectedKeyConservatively(key);
-      return category;
-    }
-
-    const STAGE_PERF_MONITOR = Symbol("vrender.statePerfMonitor");
-    function createReasonBreakdown() {
-      return {
-        config_disabled: 0,
-        context_disabled: 0,
-        non_batch_operation: 0,
-        mixed_update_category: 0,
-        resolver_unstable_keys: 0,
-        graphic_unavailable: 0
-      };
-    }
-    function createEmptyStatePerfSnapshot() {
-      return {
-        counters: {
-          stateCommits: 0,
-          sharedRefreshCommits: 0,
-          deferredJobsCreated: 0,
-          deferredJobsCompleted: 0,
-          deferredJobsCancelled: 0,
-          deferredJobsCoalesced: 0,
-          deferredGraphicsCommitted: 0,
-          deferredBudgetYields: 0,
-          deferredIneligibleGraphics: 0
-        },
-        deferredIneligibleByReason: createReasonBreakdown(),
-        categoryBreakdown: {
-          paint: 0,
-          transform: 0,
-          shape: 0,
-          bounds: 0,
-          layout: 0,
-          pick: 0
-        },
-        refresh: {
-          queuedGraphics: 0,
-          flushedGraphics: 0,
-          ensureFreshCalls: 0,
-          renderScheduled: 0
-        },
-        resolver: {
-          cacheHits: 0,
-          cacheMisses: 0,
-          invalidations: 0
-        },
-        cost: {
-          resolverTotalMs: 0,
-          resolverMaxMs: 0,
-          patchTotalMs: 0,
-          patchMaxMs: 0,
-          sharedRefreshTotalMs: 0,
-          sharedRefreshMaxMs: 0,
-          batchSliceTotalMs: 0,
-          batchSliceMaxMs: 0
-        },
-        allocationHints: {
-          patchObjectsCreated: 0,
-          batchEntriesCreated: 0,
-          refreshQueuePushes: 0
-        },
-        batch: {
-          pendingJobs: 0,
-          maxPendingJobs: 0,
-          maxGraphicsInJob: 0,
-          maxFrameSliceCost: 0
-        },
-        events: []
-      };
-    }
-    function cloneSnapshot(snapshot) {
-      return {
-        counters: Object.assign({}, snapshot.counters),
-        deferredIneligibleByReason: Object.assign({}, snapshot.deferredIneligibleByReason),
-        categoryBreakdown: Object.assign({}, snapshot.categoryBreakdown),
-        refresh: Object.assign({}, snapshot.refresh),
-        resolver: Object.assign({}, snapshot.resolver),
-        cost: Object.assign({}, snapshot.cost),
-        allocationHints: Object.assign({}, snapshot.allocationHints),
-        batch: Object.assign({}, snapshot.batch),
-        events: snapshot.events ? snapshot.events.slice() : []
-      };
-    }
-    function isDeferredStateContextConfig(value) {
-      return !!value && (Object.prototype.hasOwnProperty.call(value, "deferred") || Object.prototype.hasOwnProperty.call(value, "localEnabled"));
-    }
-    function normalizeDeferredStateOwnerConfig(value) {
-      if (value) return isDeferredStateContextConfig(value) ? value : {
-        deferred: value
-      };
-    }
-    function normalizeDeferredStateConfig(config) {
-      var _a, _b, _c;
-      return {
-        enabled: null !== (_a = null == config ? void 0 : config.enabled) && void 0 !== _a && _a,
-        frameBudget: null !== (_b = null == config ? void 0 : config.frameBudget) && void 0 !== _b ? _b : 8,
-        maxGraphicsPerFrame: null !== (_c = null == config ? void 0 : config.maxGraphicsPerFrame) && void 0 !== _c ? _c : 100
-      };
-    }
-    function fingerprintDeferredStateConfig(config) {
-      return `${config.enabled ? 1 : 0}:${config.frameBudget}:${config.maxGraphicsPerFrame}`;
-    }
-    class StatePerfMonitor {
-      constructor(configSource) {
-        this.configSource = configSource, this.snapshot = createEmptyStatePerfSnapshot();
-      }
-      setConfig(config) {
-        this.configSource = config;
-      }
-      getSnapshot() {
-        return cloneSnapshot(this.snapshot);
-      }
-      reset() {
-        const next = createEmptyStatePerfSnapshot();
-        Object.assign(this.snapshot.counters, next.counters), Object.assign(this.snapshot.deferredIneligibleByReason, next.deferredIneligibleByReason), Object.assign(this.snapshot.categoryBreakdown, next.categoryBreakdown), Object.assign(this.snapshot.refresh, next.refresh), Object.assign(this.snapshot.resolver, next.resolver), Object.assign(this.snapshot.cost, next.cost), Object.assign(this.snapshot.allocationHints, next.allocationHints), Object.assign(this.snapshot.batch, next.batch), this.snapshot.events = [];
-      }
-      incrementCounter(key, delta = 1) {
-        this.isEnabled() && (this.snapshot.counters[key] += delta);
-      }
-      recordDeferredIneligible(reason, delta = 1) {
-        this.isEnabled() && (this.snapshot.deferredIneligibleByReason[reason] += delta, this.snapshot.counters.deferredIneligibleGraphics += delta, this.recordEvent("deferred-ineligible", {
-          reason: reason,
-          count: delta
-        }));
-      }
-      recordCategory(category) {
-        this.isEnabled() && (category & UpdateCategory.PAINT && (this.snapshot.categoryBreakdown.paint += 1), category & UpdateCategory.TRANSFORM && (this.snapshot.categoryBreakdown.transform += 1), category & UpdateCategory.SHAPE && (this.snapshot.categoryBreakdown.shape += 1), category & UpdateCategory.BOUNDS && (this.snapshot.categoryBreakdown.bounds += 1), category & UpdateCategory.LAYOUT && (this.snapshot.categoryBreakdown.layout += 1), category & UpdateCategory.PICK && (this.snapshot.categoryBreakdown.pick += 1));
-      }
-      recordRefresh(key, delta = 1) {
-        this.isEnabled() && (this.snapshot.refresh[key] += delta);
-      }
-      recordResolver(key, delta = 1) {
-        this.isEnabled() && (this.snapshot.resolver[key] += delta);
-      }
-      recordCost(kind, durationMs) {
-        if (this.isEnabled()) {
-          if ("resolver" === kind) return this.snapshot.cost.resolverTotalMs += durationMs, void (this.snapshot.cost.resolverMaxMs = Math.max(this.snapshot.cost.resolverMaxMs, durationMs));
-          if ("patch" === kind) return this.snapshot.cost.patchTotalMs += durationMs, void (this.snapshot.cost.patchMaxMs = Math.max(this.snapshot.cost.patchMaxMs, durationMs));
-          if ("sharedRefresh" === kind) return this.snapshot.cost.sharedRefreshTotalMs += durationMs, void (this.snapshot.cost.sharedRefreshMaxMs = Math.max(this.snapshot.cost.sharedRefreshMaxMs, durationMs));
-          this.snapshot.cost.batchSliceTotalMs += durationMs, this.snapshot.cost.batchSliceMaxMs = Math.max(this.snapshot.cost.batchSliceMaxMs, durationMs), this.snapshot.batch.maxFrameSliceCost = Math.max(this.snapshot.batch.maxFrameSliceCost, durationMs);
-        }
-      }
-      recordAllocation(key, delta = 1) {
-        this.isEnabled() && (this.snapshot.allocationHints[key] += delta);
-      }
-      updateBatchPending(pendingJobs) {
-        this.isEnabled() && (this.snapshot.batch.pendingJobs = pendingJobs, this.snapshot.batch.maxPendingJobs = Math.max(this.snapshot.batch.maxPendingJobs, pendingJobs));
-      }
-      updateMaxGraphicsInJob(count) {
-        this.isEnabled() && (this.snapshot.batch.maxGraphicsInJob = Math.max(this.snapshot.batch.maxGraphicsInJob, count));
-      }
-      recordEvent(type, detail) {
-        var _a, _b, _c;
-        if (!this.shouldRecordEvents()) return;
-        const events = null !== (_a = this.snapshot.events) && void 0 !== _a ? _a : this.snapshot.events = [];
-        events.push({
-          type: type,
-          at: Date.now(),
-          detail: detail
-        });
-        const max = null !== (_c = null === (_b = this.getConfig()) || void 0 === _b ? void 0 : _b.maxEventRecords) && void 0 !== _c ? _c : 100;
-        events.length > max && events.splice(0, events.length - max);
-      }
-      isEnabled() {
-        var _a;
-        return !0 === (null === (_a = this.getConfig()) || void 0 === _a ? void 0 : _a.enabled);
-      }
-      shouldRecordEvents() {
-        const config = this.getConfig();
-        return !!(null == config ? void 0 : config.enabled) && !!config.recordEvents;
-      }
-      getConfig() {
-        return "function" == typeof this.configSource ? this.configSource() : this.configSource;
-      }
-    }
-    function ensureStageStatePerfMonitor(stage) {
-      const stageAny = stage;
-      return stageAny[STAGE_PERF_MONITOR] || (stageAny[STAGE_PERF_MONITOR] = new StatePerfMonitor(() => stage.statePerfConfig)), stageAny[STAGE_PERF_MONITOR];
-    }
-    function getStageStatePerfMonitor(stage) {
-      if (stage) return stage[STAGE_PERF_MONITOR];
-    }
-    function getActiveStageStatePerfMonitor(stage) {
-      var _a;
-      if (!stage) return;
-      const current = getStageStatePerfMonitor(stage);
-      return current || (!0 === (null === (_a = stage.statePerfConfig) || void 0 === _a ? void 0 : _a.enabled) ? ensureStageStatePerfMonitor(stage) : void 0);
-    }
-
-    function isPlainObject$1(value) {
+    function isPlainObject(value) {
       return null != value && "object" == typeof value && !Array.isArray(value);
     }
-    function cloneValue$1(value) {
-      if (!isPlainObject$1(value)) return value;
+    function cloneValue(value) {
+      if (!isPlainObject(value)) return value;
       const clone = {};
       return Object.keys(value).forEach(key => {
-        clone[key] = cloneValue$1(value[key]);
+        clone[key] = cloneValue(value[key]);
       }), clone;
     }
-    function deepMerge$1(base, value) {
+    function deepMerge(base, value) {
       var _a;
-      const result = null !== (_a = cloneValue$1(base)) && void 0 !== _a ? _a : {};
+      const result = null !== (_a = cloneValue(base)) && void 0 !== _a ? _a : {};
       return Object.keys(value).forEach(key => {
         const nextValue = value[key],
           previousValue = result[key];
-        isPlainObject$1(previousValue) && isPlainObject$1(nextValue) ? result[key] = deepMerge$1(previousValue, nextValue) : result[key] = cloneValue$1(nextValue);
+        isPlainObject(previousValue) && isPlainObject(nextValue) ? result[key] = deepMerge(previousValue, nextValue) : result[key] = cloneValue(nextValue);
       }), result;
     }
-    const FULL_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]);
     class StateEngine {
       constructor(options) {
         var _a;
-        this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache = new Map(), this.resolverCacheKey = "", this.resolverCacheValid = !1, this.baseAttributes = {}, this.compiledDefinitions = options.compiledDefinitions, this.stateSort = options.stateSort, this.stateProxy = options.stateProxy, this.stateProxyEligibility = options.stateProxyEligibility, this.states = options.states, this.mergeMode = null !== (_a = options.mergeMode) && void 0 !== _a ? _a : "shallow";
+        this._activeStates = [], this._effectiveStates = [], this._suppressed = [], this._resolvedPatch = {}, this.resolverPatchCache = new Map(), this.resolverCacheKey = "", this.resolverCacheValid = !1, this.baseAttributes = {}, this.compiledDefinitions = options.compiledDefinitions, this.stateSort = options.stateSort, this.mergeMode = null !== (_a = options.mergeMode) && void 0 !== _a ? _a : "shallow";
       }
       get activeStates() {
         return this._activeStates;
@@ -8319,23 +8079,11 @@
         };
       }
       invalidateResolverCache() {
-        var _a, _b;
-        this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
+        this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1;
       }
       hasState(stateName) {
         return !!this._activeStates.length && (null == stateName || this._activeStates.includes(stateName));
       }
-      getCompatPatch(stateName) {
-        var _a, _b, _c;
-        const targetStates = this._activeStates.length ? this._activeStates : this._effectiveStates,
-          canUseStateProxy = this.canUseStateProxy(stateName),
-          proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, targetStates) : void 0;
-        if (this.stateProxy && canUseStateProxy) return null != proxyPatch ? proxyPatch : void 0;
-        const value = null === (_b = this.states) || void 0 === _b ? void 0 : _b[stateName];
-        if (null == value) return;
-        if (!isPlainObject$1(value)) return value;
-        return Object.keys(value).some(key => FULL_DEFINITION_KEYS.has(key)) ? cloneValue$1(null !== (_c = value.patch) && void 0 !== _c ? _c : void 0) : value;
-      }
       sortStates(states) {
         const withDefinition = [],
           withoutDefinition = [];
@@ -8366,68 +8114,33 @@
         };
       }
       recomputePatch(effectiveStates) {
-        var _a;
-        const perfMonitor = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
-          patchStart = perfMonitor ? performance.now() : 0;
-        let resolverCost = 0;
         const cacheKey = effectiveStates.join(","),
-          nextPatch = {};
-        if (null == perfMonitor || perfMonitor.recordAllocation("patchObjectsCreated"), this.resolverCacheValid && this.resolverCacheKey === cacheKey ? effectiveStates.forEach(stateName => {
-          var _a;
-          const canUseStateProxy = this.canUseStateProxy(stateName),
-            proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, effectiveStates) : void 0;
-          if (this.stateProxy && canUseStateProxy) return void (null != proxyPatch && this.mergeInto(nextPatch, proxyPatch));
-          const definition = this.compiledDefinitions.get(stateName);
-          if (definition) {
-            if (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver) {
-              const cachedPatch = this.resolverPatchCache.get(stateName);
-              cachedPatch && (null == perfMonitor || perfMonitor.recordResolver("cacheHits"), this.mergeInto(nextPatch, cachedPatch));
-            }
-          } else {
-            const compatPatch = this.getCompatPatch(stateName);
-            compatPatch && this.mergeInto(nextPatch, compatPatch);
-          }
-        }) : (this.resolverPatchCache.clear(), this.resolverCacheKey = cacheKey, effectiveStates.forEach(stateName => {
+          nextPatch = {},
+          useResolverCache = this.resolverCacheValid && this.resolverCacheKey === cacheKey;
+        useResolverCache || (this.resolverPatchCache.clear(), this.resolverCacheKey = cacheKey), effectiveStates.forEach(stateName => {
           var _a;
-          const canUseStateProxy = this.canUseStateProxy(stateName),
-            proxyPatch = canUseStateProxy ? null === (_a = this.stateProxy) || void 0 === _a ? void 0 : _a.call(this, stateName, effectiveStates) : void 0;
-          if (this.stateProxy && canUseStateProxy) return void (null != proxyPatch && this.mergeInto(nextPatch, proxyPatch));
           const definition = this.compiledDefinitions.get(stateName);
-          if (definition) {
-            if (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver && definition.resolver) {
-              null == perfMonitor || perfMonitor.recordResolver("cacheMisses");
-              const resolverStart = perfMonitor ? performance.now() : 0,
-                resolverPatch = definition.resolver({
-                  graphic: this.graphic,
-                  activeStates: this._activeStates,
-                  effectiveStates: this._effectiveStates,
-                  baseAttributes: this.baseAttributes,
-                  resolvedPatch: nextPatch
-                });
-              if (perfMonitor) {
-                const duration = performance.now() - resolverStart;
-                resolverCost += duration, perfMonitor.recordCost("resolver", duration);
-              }
-              resolverPatch && (this.resolverPatchCache.set(stateName, resolverPatch), this.mergeInto(nextPatch, resolverPatch));
-            }
-          } else {
-            const compatPatch = this.getCompatPatch(stateName);
-            compatPatch && this.mergeInto(nextPatch, compatPatch);
+          if (definition && (definition.patch && this.mergeInto(nextPatch, definition.patch), definition.hasResolver)) {
+            const resolverPatch = useResolverCache ? this.resolverPatchCache.get(stateName) : null === (_a = definition.resolver) || void 0 === _a ? void 0 : _a.call(definition, {
+              graphic: this.graphic,
+              activeStates: this._activeStates,
+              effectiveStates: this._effectiveStates,
+              baseAttributes: this.baseAttributes,
+              resolvedPatch: nextPatch
+            });
+            resolverPatch && (useResolverCache || this.resolverPatchCache.set(stateName, resolverPatch), this.mergeInto(nextPatch, resolverPatch));
           }
-        }), this.resolverCacheValid = !0), this._resolvedPatch = nextPatch, perfMonitor) {
-          const totalCost = performance.now() - patchStart;
-          perfMonitor.recordCost("patch", Math.max(0, totalCost - resolverCost));
-        }
+        }), useResolverCache || (this.resolverCacheValid = !0), this._resolvedPatch = nextPatch;
       }
       mergeInto(target, patch) {
         "deep" !== this.mergeMode ? Object.keys(patch).forEach(key => {
-          target[key] = cloneValue$1(patch[key]);
+          target[key] = cloneValue(patch[key]);
         }) : Object.keys(patch).forEach(key => {
           var _a;
           const nextValue = patch[key],
             previousValue = target[key],
             baseValue = null === (_a = this.baseAttributes) || void 0 === _a ? void 0 : _a[key];
-          isPlainObject$1(previousValue) && isPlainObject$1(nextValue) ? target[key] = deepMerge$1(previousValue, nextValue) : !isPlainObject$1(previousValue) && isPlainObject$1(baseValue) && isPlainObject$1(nextValue) ? target[key] = deepMerge$1(baseValue, nextValue) : target[key] = cloneValue$1(nextValue);
+          isPlainObject(previousValue) && isPlainObject(nextValue) ? target[key] = deepMerge(previousValue, nextValue) : !isPlainObject(previousValue) && isPlainObject(baseValue) && isPlainObject(nextValue) ? target[key] = deepMerge(baseValue, nextValue) : target[key] = cloneValue(nextValue);
         });
       }
       sameArray(left, right) {
@@ -8435,186 +8148,50 @@
         for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return !1;
         return !0;
       }
-      canUseStateProxy(stateName) {
-        return !!this.stateProxy && (!this.stateProxyEligibility || this.stateProxyEligibility(stateName));
-      }
     }
 
-    class StateModel {
-      constructor(options = {}) {
-        var _a;
-        this.exclusiveGroupMap = new Map(), this.exclusiveGroups = new Map(), this.states = options.states, this.currentStates = options.currentStates ? [...options.currentStates] : void 0, this.stateSort = options.stateSort, this.stateProxy = options.stateProxy, this.stateEngine = options.stateEngine, this.stateEngine && options.currentStates && !this.sameStates(this.stateEngine.activeStates, options.currentStates) && this.stateEngine.applyStates(options.currentStates);
-        const exclusiveGroups = null !== (_a = options.exclusiveGroups) && void 0 !== _a ? _a : {};
-        for (const groupName in exclusiveGroups) Object.prototype.hasOwnProperty.call(exclusiveGroups, groupName) && this.registerExclusiveGroup(groupName, exclusiveGroups[groupName]);
-      }
-      getCurrentStates() {
-        return this.currentStates ? [...this.currentStates] : [];
-      }
-      hasState(stateName) {
-        return this.stateEngine ? this.stateEngine.hasState(stateName) : !(!this.currentStates || !this.currentStates.length) && (null == stateName || this.currentStates.includes(stateName));
-      }
-      getState(stateName) {
-        var _a;
-        return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
-      }
-      useStates(states) {
-        var _a;
-        if (this.stateEngine) {
-          const result = this.stateEngine.applyStates(states);
-          return this.currentStates = [...result.activeStates], {
-            changed: result.changed,
-            states: [...result.activeStates],
-            effectiveStates: [...result.effectiveStates]
-          };
-        }
-        if (!states.length) return this.clearStates();
-        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : [],
-          changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName),
-          nextStates = this.sortStates(states);
-        return changed && (this.currentStates = nextStates), {
-          changed: changed,
-          states: changed ? [...nextStates] : [...previousStates]
-        };
-      }
-      clearStates() {
-        if (this.stateEngine) {
-          const result = this.stateEngine.clearStates();
-          return this.currentStates = [], {
-            changed: result.changed,
-            states: [],
-            effectiveStates: []
-          };
-        }
-        const changed = this.hasState();
-        return this.currentStates = [], {
-          changed: changed,
-          states: []
-        };
-      }
-      addState(stateName, keepCurrentStates) {
-        var _a;
-        if (this.stateEngine) {
-          const result = this.stateEngine.addState(stateName, keepCurrentStates);
-          return this.currentStates = [...result.activeStates], {
-            changed: result.changed,
-            states: [...result.activeStates],
-            effectiveStates: [...result.effectiveStates]
-          };
-        }
-        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return {
-          changed: !1,
-          states: this.getCurrentStates()
-        };
-        const nextStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
-        return this.useStates(nextStates);
-      }
-      removeState(stateName) {
-        if (this.stateEngine) {
-          const result = this.stateEngine.removeState(stateName);
-          return this.currentStates = [...result.activeStates], {
-            changed: result.changed,
-            states: [...result.activeStates],
-            effectiveStates: [...result.effectiveStates]
-          };
-        }
-        if (!this.currentStates) return {
-          changed: !1,
-          states: []
-        };
-        const filter = Array.isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
-          nextStates = this.currentStates.filter(filter);
-        return nextStates.length === this.currentStates.length ? {
-          changed: !1,
-          states: this.getCurrentStates()
-        } : this.useStates(nextStates);
-      }
-      toggleState(stateName) {
-        if (this.stateEngine) {
-          const result = this.stateEngine.toggleState(stateName);
-          return this.currentStates = [...result.activeStates], {
-            changed: result.changed,
-            states: [...result.activeStates],
-            effectiveStates: [...result.effectiveStates]
-          };
-        }
-        if (this.hasState(stateName)) return this.removeState(stateName);
-        const nextStates = this.currentStates ? this.currentStates.slice() : [];
-        return nextStates.includes(stateName) || nextStates.push(stateName), this.useStates(nextStates);
-      }
-      sortStates(states) {
-        return this.stateEngine ? [...this.stateEngine.activeStates] : this.stateSort ? [...states].sort(this.stateSort) : [...states];
-      }
-      registerExclusiveGroup(groupName, states) {
-        const uniqueStates = Array.from(new Set(states));
-        this.exclusiveGroups.set(groupName, uniqueStates), uniqueStates.forEach(stateName => this.exclusiveGroupMap.set(stateName, groupName));
-      }
-      getExclusiveGroup(stateName) {
-        return this.exclusiveGroupMap.get(stateName);
-      }
-      getMutuallyExclusiveStates(stateName) {
-        var _a;
-        const groupName = this.getExclusiveGroup(stateName);
-        return groupName ? (null !== (_a = this.exclusiveGroups.get(groupName)) && void 0 !== _a ? _a : []).filter(name => name !== stateName) : [];
-      }
-      isMutuallyExclusive(stateA, stateB) {
-        const groupName = this.getExclusiveGroup(stateA);
-        return !!groupName && groupName === this.getExclusiveGroup(stateB) && stateA !== stateB;
-      }
-      get effectiveStates() {
-        var _a, _b, _c;
-        return null !== (_c = null !== (_b = null === (_a = this.stateEngine) || void 0 === _a ? void 0 : _a.effectiveStates) && void 0 !== _b ? _b : this.currentStates) && void 0 !== _c ? _c : [];
-      }
-      get resolvedPatch() {
-        var _a;
-        return null === (_a = this.stateEngine) || void 0 === _a ? void 0 : _a.resolvedPatch;
-      }
-      sameStates(left, right) {
-        if (left.length !== right.length) return !1;
-        for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return !1;
-        return !0;
-      }
-    }
-
-    function isPlainObject(value) {
-      return null != value && "object" == typeof value && !Array.isArray(value);
-    }
-    function cloneValue(value) {
-      if (!isPlainObject(value)) return value;
-      const clone = {};
-      for (const key in value) Object.prototype.hasOwnProperty.call(value, key) && (clone[key] = cloneValue(value[key]));
-      return clone;
-    }
-    function deepMerge(base, value) {
-      const result = cloneValue(base) || {};
-      for (const key in value) {
-        if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
-        const nextValue = value[key],
-          previousValue = result[key];
-        isPlainObject(previousValue) && isPlainObject(nextValue) ? result[key] = deepMerge(previousValue, nextValue) : result[key] = cloneValue(nextValue);
-      }
-      return result;
-    }
-    class StateStyleResolver {
-      constructor(options = {}) {
-        this.options = options;
-      }
-      resolve(normalAttrs, states, stateProxy, currentStates, stateSort) {
-        var _a;
-        const mergeMode = null !== (_a = this.options.mergeMode) && void 0 !== _a ? _a : "shallow",
-          sortedStates = stateSort ? currentStates.slice().sort(stateSort) : currentStates.slice(),
-          resolvedAttrs = {};
-        return sortedStates.forEach(stateName => {
-          const attrs = stateProxy ? stateProxy(stateName, sortedStates) : null == states ? void 0 : states[stateName];
-          if (null != attrs) for (const key in attrs) {
-            if (!Object.prototype.hasOwnProperty.call(attrs, key)) continue;
-            const nextValue = attrs[key];
-            if ("deep" === mergeMode && isPlainObject(nextValue) && (isPlainObject(resolvedAttrs[key]) || isPlainObject(normalAttrs[key]))) {
-              const baseValue = isPlainObject(resolvedAttrs[key]) ? resolvedAttrs[key] : isPlainObject(normalAttrs[key]) ? normalAttrs[key] : {};
-              resolvedAttrs[key] = deepMerge(baseValue, nextValue);
-            } else resolvedAttrs[key] = cloneValue(nextValue);
-          }
-        }), resolvedAttrs;
+    var UpdateCategory;
+    !function (UpdateCategory) {
+      UpdateCategory[UpdateCategory.NONE = 0] = "NONE", UpdateCategory[UpdateCategory.PAINT = 1] = "PAINT", UpdateCategory[UpdateCategory.SHAPE = 2] = "SHAPE", UpdateCategory[UpdateCategory.BOUNDS = 4] = "BOUNDS", UpdateCategory[UpdateCategory.TRANSFORM = 8] = "TRANSFORM", UpdateCategory[UpdateCategory.LAYOUT = 16] = "LAYOUT", UpdateCategory[UpdateCategory.PICK = 32] = "PICK";
+    }(UpdateCategory || (UpdateCategory = {}));
+    const ATTRIBUTE_CATEGORY = {
+      fill: UpdateCategory.PAINT,
+      opacity: UpdateCategory.PAINT,
+      fillOpacity: UpdateCategory.PAINT,
+      strokeOpacity: UpdateCategory.PAINT,
+      lineDash: UpdateCategory.PAINT,
+      lineDashOffset: UpdateCategory.PAINT,
+      lineCap: UpdateCategory.PAINT,
+      lineJoin: UpdateCategory.PAINT,
+      miterLimit: UpdateCategory.PAINT,
+      shadowColor: UpdateCategory.PAINT,
+      x: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      y: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      scaleX: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      scaleY: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      angle: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      anchor: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      anchor3d: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      postMatrix: UpdateCategory.TRANSFORM | UpdateCategory.BOUNDS,
+      layout: UpdateCategory.LAYOUT,
+      zIndex: UpdateCategory.PAINT,
+      visible: UpdateCategory.PAINT | UpdateCategory.PICK,
+      lineWidth: UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.PICK,
+      width: UpdateCategory.SHAPE | UpdateCategory.BOUNDS,
+      height: UpdateCategory.SHAPE | UpdateCategory.BOUNDS
+    };
+    const ATTRIBUTE_DELTA_CLASSIFIER = {
+      stroke: (prev, next) => (null != prev && !1 !== prev) !== (null != next && !1 !== next) ? UpdateCategory.PAINT | UpdateCategory.BOUNDS | UpdateCategory.PICK : UpdateCategory.PAINT,
+      shadowBlur: (prev, next) => {
+        const prevBlur = Number(null != prev ? prev : 0),
+          nextBlur = Number(null != next ? next : 0);
+        return prevBlur !== nextBlur && (prevBlur > 0 || nextBlur > 0) ? UpdateCategory.PAINT | UpdateCategory.BOUNDS : UpdateCategory.PAINT;
       }
+    };
+    function classifyAttributeDelta(key, prev, next) {
+      var _a;
+      const dynamicClassifier = ATTRIBUTE_DELTA_CLASSIFIER[key];
+      return dynamicClassifier ? dynamicClassifier(prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
     }
 
     function hasOwnKeys(value) {
@@ -8624,25 +8201,22 @@
       return config ? Array.isArray(config) ? config.reduce((acc, key) => (acc[key] = 1, acc), {}) : Object.keys(config).reduce((acc, key) => (config[key] && (acc[key] = 1), acc), {}) : {};
     }
     class StateTransitionOrchestrator {
-      analyzeTransition(_currentAttrs, targetAttrs, stateNames, hasAnimation, options = {}) {
+      analyzeTransition(targetAttrs, hasAnimation, options = {}) {
         var _a, _b;
         const plan = {
-          stateNames: stateNames,
           targetAttrs: Object.assign({}, targetAttrs),
           animateAttrs: {},
-          jumpAttrs: {},
           noAnimateAttrs: {}
         };
         if (!hasAnimation) return plan;
         const noWorkAnimateAttr = Object.assign(Object.assign({}, null !== (_a = options.noWorkAnimateAttr) && void 0 !== _a ? _a : {}), normalizeNoAnimateAttrConfig(null === (_b = options.animateConfig) || void 0 === _b ? void 0 : _b.noAnimateAttrs)),
           isClear = !0 === options.isClear,
-          getDefaultAttribute = options.getDefaultAttribute,
+          readDefaultAttribute = options.getDefaultAttribute,
           shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
           assignTransitionAttr = (key, value) => {
-            if (noWorkAnimateAttr[key]) return plan.jumpAttrs[key] = value, void (plan.noAnimateAttrs[key] = value);
-            if (isClear && void 0 === value) {
+            if (noWorkAnimateAttr[key]) plan.noAnimateAttrs[key] = value;else if (isClear && void 0 === value) {
               if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
-              plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+              plan.animateAttrs[key] = readDefaultAttribute(key);
             } else plan.animateAttrs[key] = value;
           };
         for (const key in targetAttrs) {
@@ -8678,13 +8252,13 @@
           type: exports.AttributeUpdateType.STATE
         }), plan;
       }
-      applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-        var _a, _b, _c, _d;
-        const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
-          noWorkAnimateAttr: null === (_a = graphic.getNoWorkAnimateAttr) || void 0 === _a ? void 0 : _a.call(graphic),
+      applyClearTransition(graphic, targetAttrs, hasAnimation, options = {}) {
+        var _a;
+        const plan = this.analyzeTransition(targetAttrs, hasAnimation, {
+          noWorkAnimateAttr: graphic.getNoWorkAnimateAttr(),
           isClear: !0,
-          getDefaultAttribute: null === (_b = graphic.getDefaultAttribute) || void 0 === _b ? void 0 : _b.bind(graphic),
-          shouldSkipDefaultAttribute: null !== (_c = options.shouldSkipDefaultAttribute) && void 0 !== _c ? _c : null === (_d = graphic.shouldSkipStateTransitionDefaultAttribute) || void 0 === _d ? void 0 : _d.bind(graphic),
+          getDefaultAttribute: graphic.getDefaultAttribute.bind(graphic),
+          shouldSkipDefaultAttribute: null !== (_a = options.shouldSkipDefaultAttribute) && void 0 !== _a ? _a : graphic.shouldSkipStateTransitionDefaultAttribute.bind(graphic),
           animateConfig: options.animateConfig,
           extraAnimateAttrs: options.extraAnimateAttrs
         });
@@ -8693,23 +8267,11 @@
     }
 
     const compiler = new StateDefinitionCompiler();
-    function copyDefinitions(definitions) {
-      return definitions ? Object.assign({}, definitions) : {};
-    }
     function buildEffectiveSourceDefinitions(parentScope, localStateDefinitions, themeStateDefinitions) {
-      const merged = copyDefinitions(parentScope ? parentScope.effectiveSourceDefinitions : themeStateDefinitions);
-      return localStateDefinitions && Object.keys(localStateDefinitions).forEach(stateName => {
-        merged[stateName] = localStateDefinitions[stateName];
-      }), merged;
-    }
-    function initializeScope(scope, revision = 0) {
-      var _a;
-      const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
-      return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision = revision, scope.dirty = !1, scope;
+      return Object.assign({}, parentScope ? parentScope.effectiveSourceDefinitions : themeStateDefinitions, localStateDefinitions);
     }
     function createRootSharedStateScope(stage, themeStateDefinitions) {
-      return initializeScope({
-        ownerKind: "root",
+      return rebuildSharedStateScope({
         ownerStage: stage,
         themeStateDefinitions: themeStateDefinitions,
         effectiveSourceDefinitions: {},
@@ -8720,9 +8282,7 @@
       }, 0);
     }
     function createGroupSharedStateScope(group, parentScope, localStateDefinitions) {
-      return initializeScope({
-        ownerKind: "group",
-        ownerGroup: group,
+      return rebuildSharedStateScope({
         ownerStage: group.stage,
         parentScope: parentScope,
         localStateDefinitions: localStateDefinitions,
@@ -8742,14 +8302,13 @@
     function setRootSharedStateScopeThemeDefinitions(scope, themeStateDefinitions) {
       return scope.themeStateDefinitions !== themeStateDefinitions && (scope.themeStateDefinitions = themeStateDefinitions, rebuildSharedStateScope(scope), !0);
     }
-    function rebuildSharedStateScope(scope) {
+    function rebuildSharedStateScope(scope, revision = scope.revision + 1) {
       var _a;
       const effectiveSourceDefinitions = buildEffectiveSourceDefinitions(scope.parentScope, scope.localStateDefinitions, scope.themeStateDefinitions);
-      return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision += 1, scope.dirty = !1, scope;
+      return scope.effectiveSourceDefinitions = effectiveSourceDefinitions, scope.effectiveCompiledDefinitions = compiler.compile(effectiveSourceDefinitions), scope.parentRevisionAtBuild = null === (_a = scope.parentScope) || void 0 === _a ? void 0 : _a.revision, scope.revision = revision, scope.dirty = !1, scope;
     }
     function ensureSharedStateScopeFresh(scope) {
-      var _a;
-      if (scope) return null === (_a = getActiveStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
+      if (scope) return scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
     }
     function collectSharedStateScopeChain(scope) {
       const chain = [];
@@ -8759,43 +8318,27 @@
     }
 
     function scheduleStageSharedStateRefresh(stage) {
-      var _a;
-      stage && "released" !== stage.releaseStatus && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
+      stage && "released" !== stage.releaseStatus && stage.renderNextFrame();
     }
     function enqueueGraphicSharedStateRefresh(stage, graphic) {
       var _a;
       if (!stage) return;
-      const pending = null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set();
-      if (!pending.has(graphic)) {
-        pending.add(graphic);
-        const perfMonitor = getActiveStageStatePerfMonitor(stage);
-        null == perfMonitor || perfMonitor.recordRefresh("queuedGraphics"), null == perfMonitor || perfMonitor.recordAllocation("refreshQueuePushes");
-      }
+      (null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set()).add(graphic);
     }
     function markScopeActiveDescendantsDirty(scope, stage) {
-      let marked = !1;
-      scope.subtreeActiveDescendants.forEach(graphic => {
+      scope.subtreeActiveDescendants.size && (scope.subtreeActiveDescendants.forEach(graphic => {
         var _a;
         graphic.sharedStateDirty = !0;
-        enqueueGraphicSharedStateRefresh(null !== (_a = null != stage ? stage : graphic.stage) && void 0 !== _a ? _a : scope.ownerStage, graphic), marked = !0;
-      }), marked && scheduleStageSharedStateRefresh(null != stage ? stage : scope.ownerStage);
+        enqueueGraphicSharedStateRefresh(null !== (_a = null != stage ? stage : graphic.stage) && void 0 !== _a ? _a : scope.ownerStage, graphic);
+      }), scheduleStageSharedStateRefresh(null != stage ? stage : scope.ownerStage));
     }
     function flushStageSharedStateRefresh(stage) {
       const pending = stage._pendingSharedStateRefreshGraphics;
       if (!pending || !pending.size) return;
-      const perfMonitor = getActiveStageStatePerfMonitor(stage),
-        start = perfMonitor ? performance.now() : 0,
-        graphics = Array.from(pending.values());
-      pending.clear(), null == perfMonitor || perfMonitor.recordRefresh("flushedGraphics", graphics.length), graphics.forEach(graphic => {
-        if ("released" === graphic.releaseStatus) return;
-        if (graphic.stage !== stage) return;
-        if (!graphic.sharedStateDirty) return;
-        const refresh = graphic.refreshSharedStateBeforeRender;
-        "function" == typeof refresh && (refresh.call(graphic), null == perfMonitor || perfMonitor.incrementCounter("sharedRefreshCommits"));
-      }), perfMonitor && (perfMonitor.recordCost("sharedRefresh", performance.now() - start), perfMonitor.recordEvent("shared-refresh-flush", {
-        stageId: stage._uid,
-        flushedGraphics: graphics.length
-      }));
+      const graphics = Array.from(pending.values());
+      pending.clear(), graphics.forEach(graphic => {
+        "released" !== graphic.releaseStatus && graphic.stage === stage && graphic.sharedStateDirty && graphic.refreshSharedStateBeforeRender();
+      });
     }
 
     const _tempBounds$1 = new AABBBounds(),
@@ -8806,7 +8349,6 @@
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
       tempConstantAngleKey = ["angle"],
       builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
-      FULL_STATE_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]),
       point = new Point(),
       EMPTY_STATE_NAMES = [],
       BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT | UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.TRANSFORM | UpdateCategory.LAYOUT;
@@ -8922,11 +8464,6 @@
       getAttributes() {
         return this.attribute;
       }
-      getStateStyleResolver(mergeMode) {
-        return "deep" === mergeMode ? (this.deepStateStyleResolver || (this.deepStateStyleResolver = new StateStyleResolver({
-          mergeMode: "deep"
-        })), this.deepStateStyleResolver) : (this.stateStyleResolver || (this.stateStyleResolver = new StateStyleResolver()), this.stateStyleResolver);
-      }
       getStateTransitionOrchestrator() {
         return this.stateTransitionOrchestrator || (this.stateTransitionOrchestrator = new StateTransitionOrchestrator()), this.stateTransitionOrchestrator;
       }
@@ -8942,7 +8479,7 @@
       syncSharedStateScopeBindingFromTree(markDirty = !0) {
         var _a;
         const nextScope = this.resolveBoundSharedStateScope();
-        return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
+        return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
       }
       syncSharedStateScopeBindingOnTreeChange(markDirty = !0) {
         var _a, _b;
@@ -8981,7 +8518,7 @@
       }
       getLocalStatesVersion() {
         var _a, _b;
-        return this.localStateDefinitionsSource !== this.states && (this.localStateDefinitionsSource = this.states, this.localFallbackVersion = (null !== (_a = this.localFallbackVersion) && void 0 !== _a ? _a : 0) + 1), null !== (_b = this.localFallbackVersion) && void 0 !== _b ? _b : 0;
+        return this.localStateDefinitionsSource !== this.states && (this.localStateDefinitionsSource = this.states, this.localStateDefinitionsVersion = (null !== (_a = this.localStateDefinitionsVersion) && void 0 !== _a ? _a : 0) + 1), null !== (_b = this.localStateDefinitionsVersion) && void 0 !== _b ? _b : 0;
       }
       resolveEffectiveCompiledDefinitions() {
         this.syncSharedStateScopeBindingFromTree(!1);
@@ -8990,49 +8527,24 @@
         const hasStates = !!this.states && Object.keys(this.states).length > 0;
         if (!boundScope) {
           if (!hasStates) return {
-            compiledDefinitions: void 0,
-            stateProxyModeKey: "none"
+            compiledDefinitions: void 0
           };
           const cacheKey = `local:${this.getLocalStatesVersion()}`;
           return this.compiledStateDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.compiledStateDefinitions = new StateDefinitionCompiler().compile(this.states), this.compiledStateDefinitionsCacheKey = cacheKey), {
-            compiledDefinitions: this.compiledStateDefinitions,
-            stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
+            compiledDefinitions: this.compiledStateDefinitions
           };
         }
-        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions,
-          sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none",
-          sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
-        if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
-          compiledDefinitions: sharedCompiledDefinitions,
-          stateProxyModeKey: sharedStateProxyModeKey,
-          stateProxyEligibility: sharedStateProxyEligibility
-        };
-        const localStates = this.states,
-          missingLocalStateDefinitions = {},
-          missingStateNames = [];
-        if (Object.keys(localStates).forEach(stateName => {
-          sharedCompiledDefinitions.has(stateName) || (missingLocalStateDefinitions[stateName] = localStates[stateName], missingStateNames.push(stateName));
-        }), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, {
-          compiledDefinitions: sharedCompiledDefinitions,
-          stateProxyModeKey: sharedStateProxyModeKey,
-          stateProxyEligibility: sharedStateProxyEligibility
-        };
-        const localStatesVersion = this.getLocalStatesVersion(),
-          stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none",
-          cacheKey = `shared:${boundScope.revision}:fallback:${localStatesVersion}:${stateProxyModeKey}`;
-        return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = new StateDefinitionCompiler().compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), this.compiledStateDefinitionsCacheKey = cacheKey), {
-          compiledDefinitions: this.localFallbackCompiledDefinitions,
-          stateProxyModeKey: stateProxyModeKey,
-          stateProxyEligibility: sharedStateProxyEligibility
+        return {
+          compiledDefinitions: boundScope.effectiveCompiledDefinitions
         };
       }
       recomputeCurrentStatePatch() {
         var _a, _b;
         if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)) return this.effectiveStates = [], this.resolvedStatePatch = void 0, void this.syncSharedStateActiveRegistrations();
         const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
-          transition = this.createStateModel(stateResolveBaseAttrs).useStates(this.currentStates),
+          transition = this.resolveUseStatesTransition(this.currentStates, stateResolveBaseAttrs),
           effectiveStates = null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
-          resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+          resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
         this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
       }
       buildStaticAttributeSnapshot() {
@@ -9096,12 +8608,7 @@
         return nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category | nextCategory;
       }
       submitUpdateByCategory(category, forceUpdateTag = !1) {
-        var _a;
         if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), void this.addUpdateLayoutTag();
-        if (category !== UpdateCategory.NONE) {
-          const stage = this.stage;
-          stage && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordCategory(category));
-        }
         (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
       }
       submitUpdateByDelta(delta, forceUpdateTag = !1) {
@@ -9640,103 +9147,94 @@
         var _a;
         return null === (_a = this.stateEngine) || void 0 === _a || _a.setResolveContext(this, stateResolveBaseAttrs), stateResolveBaseAttrs;
       }
-      createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+      ensureStateEngine(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
         const {
-          compiledDefinitions: compiledDefinitions,
-          stateProxyEligibility: stateProxyEligibility,
-          stateProxyModeKey: stateProxyModeKey
+          compiledDefinitions: compiledDefinitions
         } = this.resolveEffectiveCompiledDefinitions();
-        return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateProxy === this.stateProxy && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode && this.stateEngineStateProxyModeKey === stateProxyModeKey || (this.stateEngine = new StateEngine({
+        return this.compiledStateDefinitions = compiledDefinitions, compiledDefinitions ? this.stateEngine && this.stateEngineCompiledDefinitions === compiledDefinitions && this.stateEngineStateSort === this.stateSort && this.stateEngineMergeMode === this.stateMergeMode || (this.stateEngine = new StateEngine({
           compiledDefinitions: compiledDefinitions,
           stateSort: this.stateSort,
-          stateProxy: this.stateProxy,
-          stateProxyEligibility: stateProxyEligibility,
-          states: this.states,
           mergeMode: this.stateMergeMode
-        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), this.syncStateResolveContext(stateResolveBaseAttrs), new StateModel({
-          states: this.states,
-          currentStates: this.currentStates,
-          stateSort: this.stateSort,
-          stateProxy: this.stateProxy,
-          stateEngine: this.stateEngine
-        });
+        }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0), this.syncStateResolveContext(stateResolveBaseAttrs), this.stateEngine && this.currentStates && !this.sameStateNames(this.stateEngine.activeStates, this.currentStates) && this.stateEngine.applyStates(this.currentStates), this.stateEngine;
       }
-      resolveSimpleLocalStateTransition(states, previousStates) {
+      toGraphicStateTransition(result) {
+        return {
+          changed: result.changed,
+          states: [...result.activeStates],
+          effectiveStates: [...result.effectiveStates]
+        };
+      }
+      sortLocalStates(states) {
+        return this.stateSort ? [...states].sort(this.stateSort) : [...states];
+      }
+      resolveLocalUseStatesTransition(states) {
         var _a;
-        if (!this.states || this.stateProxy || this.stateSort || "deep" === this.stateMergeMode || this.parent || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope) || this.boundSharedStateScope) return null;
-        if (1 === states.length) {
-          const stateName = states[0],
-            hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName),
-            nextStates = [stateName],
-            changed = !this.sameStateNames(previousStates, nextStates),
-            resolvedStateAttrs = {};
-          if (hasDefinition) {
-            const attrs = this.states[stateName];
-            if (null != attrs) {
-              if (!isPlainObjectValue(attrs)) return null;
-              const keys = Object.keys(attrs);
-              for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-                const key = keys[keyIndex];
-                if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
-                const attrValue = attrs[key];
-                resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
-              }
-            }
-          }
-          return {
-            changed: changed,
-            states: nextStates,
-            effectiveStates: nextStates,
-            resolvedStateAttrs: resolvedStateAttrs
-          };
-        }
-        const uniqueStates = Array.from(new Set(states)),
-          withDefinition = [],
-          withoutDefinition = [];
-        for (let i = 0; i < uniqueStates.length; i++) {
-          const stateName = uniqueStates[i];
-          Object.prototype.hasOwnProperty.call(this.states, stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
-        }
-        withDefinition.sort((left, right) => left.localeCompare(right));
-        const nextStates = withDefinition.concat(withoutDefinition),
-          changed = !this.sameStateNames(previousStates, nextStates),
-          resolvedStateAttrs = {};
-        for (let i = 0; i < nextStates.length; i++) {
-          const stateName = nextStates[i];
-          if (!Object.prototype.hasOwnProperty.call(this.states, stateName)) continue;
-          const attrs = this.states[stateName];
-          if (null == attrs) continue;
-          if (!isPlainObjectValue(attrs)) return null;
-          const keys = Object.keys(attrs);
-          for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-            const key = keys[keyIndex];
-            if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
-            const attrValue = attrs[key];
-            resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
-          }
-        }
+        if (!states.length) return this.resolveLocalClearStatesTransition();
+        const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+          changed = previousStates.length !== states.length || states.some((stateName, index) => previousStates[index] !== stateName),
+          nextStates = this.sortLocalStates(states);
         return {
           changed: changed,
-          states: nextStates,
-          effectiveStates: nextStates,
-          resolvedStateAttrs: resolvedStateAttrs
+          states: changed ? nextStates : [...previousStates]
         };
       }
-      resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = !1) {
-        var _a, _b;
-        let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
-        const isSimpleLocalTransition = !!transition;
-        let resolvedStateAttrs;
-        if (transition) resolvedStateAttrs = transition.resolvedStateAttrs;else {
-          const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
-            stateModel = this.createStateModel(stateResolveBaseAttrs);
-          forceResolverRefresh && (null === (_a = this.stateEngine) || void 0 === _a || _a.invalidateResolverCache()), transition = stateModel.useStates(states), resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-        }
+      resolveLocalClearStatesTransition() {
+        return {
+          changed: this.hasState(),
+          states: []
+        };
+      }
+      resolveUseStatesTransition(states, stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        const stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        return stateEngine ? this.toGraphicStateTransition(stateEngine.applyStates(states)) : this.resolveLocalUseStatesTransition(states);
+      }
+      resolveClearStatesTransition() {
+        const stateEngine = this.ensureStateEngine();
+        return stateEngine ? this.toGraphicStateTransition(stateEngine.clearStates()) : this.resolveLocalClearStatesTransition();
+      }
+      resolveAddStateTransition(stateName, keepCurrentStates) {
+        var _a;
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.addState(stateName, keepCurrentStates));
+        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return {
+          changed: !1,
+          states: [...this.currentStates]
+        };
+        const nextStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
+        return this.resolveLocalUseStatesTransition(nextStates);
+      }
+      resolveRemoveStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.removeState(stateName));
+        if (!this.currentStates) return {
+          changed: !1,
+          states: []
+        };
+        const filter = Array.isArray(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
+          nextStates = this.currentStates.filter(filter);
+        return nextStates.length === this.currentStates.length ? {
+          changed: !1,
+          states: [...this.currentStates]
+        } : this.resolveLocalUseStatesTransition(nextStates);
+      }
+      resolveToggleStateTransition(stateName) {
+        const stateEngine = this.ensureStateEngine();
+        if (stateEngine) return this.toGraphicStateTransition(stateEngine.toggleState(stateName));
+        if (this.hasState(stateName)) return this.resolveRemoveStateTransition(stateName);
+        const nextStates = this.currentStates ? this.currentStates.slice() : [];
+        return nextStates.push(stateName), this.resolveLocalUseStatesTransition(nextStates);
+      }
+      resolveGraphicStateTransition(states, forceResolverRefresh = !1) {
+        var _a;
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
+          stateEngine = this.ensureStateEngine(stateResolveBaseAttrs);
+        forceResolverRefresh && (null == stateEngine || stateEngine.invalidateResolverCache());
+        const transition = stateEngine ? this.toGraphicStateTransition(stateEngine.applyStates(states)) : this.resolveLocalUseStatesTransition(states),
+          resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : {};
         return {
           transition: transition,
-          effectiveStates: null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
-          resolvedStateAttrs: resolvedStateAttrs,
-          isSimpleLocalTransition: isSimpleLocalTransition
+          effectiveStates: null !== (_a = transition.effectiveStates) && void 0 !== _a ? _a : transition.states,
+          resolvedStateAttrs: resolvedStateAttrs
         };
       }
       normalizeSetStatesOptions(options) {
@@ -9767,24 +9265,14 @@
           {
             transition: transition,
             effectiveStates: effectiveStates,
-            resolvedStateAttrs: resolvedStateAttrs,
-            isSimpleLocalTransition: isSimpleLocalTransition
-          } = this.resolveGraphicStateTransition(states, previousStates, !0),
+            resolvedStateAttrs: resolvedStateAttrs
+          } = this.resolveGraphicStateTransition(states, !0),
           patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
-        if ((!patchChanged || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) && (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged)) {
-          if (this.stage) {
-            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-            null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-              graphicId: this._uid,
-              targetStates: [...transition.states]
-            });
-          }
-          hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-            type: exports.AttributeUpdateType.STATE
-          }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-            type: exports.AttributeUpdateType.STATE
-          }), this.emitStateUpdateEvent());
-        }
+        patchChanged && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) || (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged && (hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+          type: exports.AttributeUpdateType.STATE
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+          type: exports.AttributeUpdateType.STATE
+        }), this.emitStateUpdateEvent())));
       }
       resolveStateAnimateConfig(animateConfig) {
         var _a, _b, _c;
@@ -9797,8 +9285,8 @@
             extraAnimateAttrs: extraAnimateAttrs,
             shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
           } : void 0;
-        if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
-        const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
+        if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, transitionOptions);
+        const plan = this.getStateTransitionOrchestrator().analyzeTransition(attrs, hasAnimation, {
           noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
           animateConfig: resolvedAnimateConfig,
           extraAnimateAttrs: extraAnimateAttrs,
@@ -9822,43 +9310,29 @@
           animate.stateNames && stateAnimates.push(animate);
         }), stateAnimates.forEach(animate => animate.stop(type));
       }
-      getNormalAttribute(key) {
-        var _a, _b;
-        const value = this.attribute[key];
-        return this.hasAnyTrackedAnimate() ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
-      }
       clearStates(hasAnimation) {
         var _a, _b, _c;
         const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
           previousResolvedStatePatch = this.resolvedStatePatch,
-          transition = this.createStateModel().clearStates();
+          transition = this.resolveClearStatesTransition();
         if (!transition.changed && 0 === previousStates.length) return this.currentStates = [], this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, void this.clearSharedStateActiveRegistrations();
         const resolvedStateAttrs = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
-        if (!transition.changed || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0)) {
-          if (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), this.stage) {
-            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-            null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-              graphicId: this._uid,
-              targetStates: []
-            });
-          }
-          hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-            type: exports.AttributeUpdateType.STATE
-          }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
-            type: exports.AttributeUpdateType.STATE
-          }), this.emitStateUpdateEvent());
-        }
+        transition.changed && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0) || (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+          type: exports.AttributeUpdateType.STATE
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+          type: exports.AttributeUpdateType.STATE
+        }), this.emitStateUpdateEvent()));
       }
       removeState(stateName, hasAnimation) {
-        const transition = this.createStateModel().removeState(stateName);
+        const transition = this.resolveRemoveStateTransition(stateName);
         transition.changed && this.useStates(transition.states, hasAnimation);
       }
       toggleState(stateName, hasAnimation) {
-        const transition = this.createStateModel().toggleState(stateName);
+        const transition = this.resolveToggleStateTransition(stateName);
         transition.changed && this.useStates(transition.states, hasAnimation);
       }
       addState(stateName, keepCurrentStates, hasAnimation) {
-        const transition = this.createStateModel().addState(stateName, keepCurrentStates);
+        const transition = this.resolveAddStateTransition(stateName, keepCurrentStates);
         transition.changed && this.useStates(transition.states, hasAnimation);
       }
       setStates(states, options) {
@@ -9886,29 +9360,18 @@
           {
             transition: transition,
             effectiveStates: effectiveStates,
-            resolvedStateAttrs: resolvedStateAttrs,
-            isSimpleLocalTransition: isSimpleLocalTransition
-          } = this.resolveGraphicStateTransition(states, previousStates);
-        if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) {
-          if (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stage) {
-            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
-            null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
-              graphicId: this._uid,
-              targetStates: [...transition.states]
-            });
-          }
-          hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
-            type: exports.AttributeUpdateType.STATE
-          }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
-            type: exports.AttributeUpdateType.STATE
-          }), this.emitStateUpdateEvent());
-        }
+            resolvedStateAttrs: resolvedStateAttrs
+          } = this.resolveGraphicStateTransition(states);
+        !transition.changed && this.sameStateNames(previousStates, transition.states) || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+          type: exports.AttributeUpdateType.STATE
+        }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+          type: exports.AttributeUpdateType.STATE
+        }), this.emitStateUpdateEvent()));
       }
       invalidateResolver() {
         var _a, _b;
         if (!this.stateEngine || !(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.compiledStateDefinitions) return;
-        this.syncStateResolveContext();
-        this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 0) + 1, this.stateEngine.invalidateResolverCache();
+        this.syncStateResolveContext(), this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 0) + 1, this.stateEngine.invalidateResolverCache();
         const transition = this.stateEngine.applyStates(this.currentStates),
           resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);
         this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
@@ -10049,7 +9512,7 @@
       }
       detachStageForRelease() {
         var _a, _b, _c;
-        (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
+        (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
       }
       setStageToShadowRoot(stage, layer) {
         this.shadowRoot && this.shadowRoot.setStage(stage, layer);
@@ -11562,15 +11025,11 @@
         const previousStates = this.currentStates ? this.currentStates.slice() : [];
         if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
         this.stopStateAnimates(), this.stateSort && (states = states.sort(this.stateSort));
-        const stateAttrs = {},
-          subAttrs = this.subGraphic.map(() => ({}));
+        const stateAttrs = {};
         states.forEach(stateName => {
-          var _a;
           const attrs = this.glyphStateProxy ? this.glyphStateProxy(stateName, states) : this.glyphStates[stateName];
-          attrs && (Object.assign(stateAttrs, attrs.attributes), (null === (_a = attrs.subAttributes) || void 0 === _a ? void 0 : _a.length) && subAttrs.forEach((subAttrs, index) => {
-            Object.assign(subAttrs, attrs.subAttributes[index]);
-          }));
-        }), this.beforeStateUpdate(stateAttrs, previousStates, states, hasAnimation, !1) && (this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation));
+          attrs && Object.assign(stateAttrs, attrs.attributes);
+        }), this.beforeStateUpdate(stateAttrs, previousStates, states, hasAnimation, !1) && (this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation));
       }
       clearStates(hasAnimation) {
         this.stopStateAnimates();
@@ -11579,7 +11038,6 @@
           if (!this.beforeStateUpdate(this.normalAttrs, previousStates, [], hasAnimation, !0)) return;
           this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0);
         } else this.currentStates = [];
-        this.normalAttrs = null;
       }
       clone() {
         const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -12831,7 +12289,7 @@
       return new Area(attributes);
     }
 
-    const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap", ...GRAPHIC_UPDATE_TAG_KEY];
+    const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "clipRange", "cap", ...GRAPHIC_UPDATE_TAG_KEY];
     class Arc extends Graphic {
       constructor(params) {
         super(params), this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
@@ -12875,11 +12333,12 @@
           endAngle = arcTheme.endAngle
         } = this.attribute;
         const {
-            cap = arcTheme.cap
+            cap = arcTheme.cap,
+            clipRange = arcTheme.clipRange
           } = this.attribute,
-          sign = endAngle - startAngle >= 0 ? 1 : -1,
-          deltaAngle = endAngle - startAngle;
-        if (startAngle = clampAngleByRadian(startAngle), endAngle = startAngle + deltaAngle, cap && abs(deltaAngle) < pi2 - epsilon) {
+          sign = endAngle - startAngle >= 0 ? 1 : -1;
+        let deltaAngle = endAngle - startAngle;
+        if (deltaAngle *= Math.max(0, Math.min(clipRange, 1)), startAngle = clampAngleByRadian(startAngle), endAngle = startAngle + deltaAngle, cap && abs(deltaAngle) > epsilon && abs(deltaAngle) < pi2 - epsilon) {
           let startCap = 1,
             endCap = 1;
           cap.length && (startCap = Number(cap[0]), endCap = Number(cap[1]));
@@ -13169,7 +12628,7 @@
     }(exports.GroupUpdateAABBBoundsMode || (exports.GroupUpdateAABBBoundsMode = {}));
     class Group extends Graphic {
       constructor(params) {
-        super(params), this.type = "group", this.parent = null, this.isContainer = !0, this._hasSharedStateDefinitions = !1, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = exports.UpdateTag.UPDATE_BOUNDS;
+        super(params), this.type = "group", this.parent = null, this.isContainer = !0, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = exports.UpdateTag.UPDATE_BOUNDS;
       }
       get sharedStateDefinitions() {
         return this._sharedStateDefinitions;
@@ -13177,7 +12636,7 @@
       set sharedStateDefinitions(value) {
         if (this._sharedStateDefinitions === value) return;
         const previousScope = this.sharedStateScope;
-        this._sharedStateDefinitions = value, this._hasSharedStateDefinitions = !!value && Object.keys(value).length > 0, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
+        this._sharedStateDefinitions = value, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
       }
       setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -13281,17 +12740,17 @@
       }
       incrementalAppendChild(node) {
         const data = super.appendChild(node);
-        return data && (!this.stage || data.stage === this.stage && data.layer === this.layer ? data.onParentSharedStateTreeChanged && data.onParentSharedStateTreeChanged(this.stage, this.layer) : data.setStage(this.stage, this.layer)), this.addUpdateBoundTag(), this.getGraphicService().onAddIncremental(node, this, this.stage), data;
+        return data && this.syncChildSharedStateTreeBinding(data), this.addUpdateBoundTag(), this.getGraphicService().onAddIncremental(node, this, this.stage), data;
       }
       incrementalClearChild() {
         super.removeAllChild(), this.addUpdateBoundTag(), this.getGraphicService().onClearIncremental(this, this.stage);
       }
       _updateChildToStage(child) {
-        return child && (!this.stage || child.stage === this.stage && child.layer === this.layer ? child.onParentSharedStateTreeChanged && child.onParentSharedStateTreeChanged(this.stage, this.layer) : child.setStage(this.stage, this.layer)), this.addUpdateBoundTag(), child;
+        return child && this.syncChildSharedStateTreeBinding(child), this.addUpdateBoundTag(), child;
       }
       appendChild(node, addStage = !0) {
         const data = super.appendChild(node);
-        return data && (addStage && this.stage && (data.stage !== this.stage || data.layer !== this.layer) ? data.setStage(this.stage, this.layer) : data.onParentSharedStateTreeChanged && data.onParentSharedStateTreeChanged(this.stage, this.layer)), this.addUpdateBoundTag(), data;
+        return data && addStage && this.syncChildSharedStateTreeBinding(data), this.addUpdateBoundTag(), data;
       }
       insertBefore(newNode, referenceNode) {
         return this._updateChildToStage(super.insertBefore(newNode, referenceNode));
@@ -13303,9 +12762,8 @@
         return this._updateChildToStage(super.insertInto(newNode, idx));
       }
       removeChild(child, highPerformance = !1) {
-        var _a;
         const data = super.removeChild(child);
-        return data ? highPerformance ? (null === (_a = child.detachStageForRelease) || void 0 === _a || _a.call(child), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
+        return data ? highPerformance ? (child.detachStageForRelease(), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
       }
       removeAllChild(deep = !1) {
         const children = this.children.slice();
@@ -13318,14 +12776,10 @@
       setStage(stage, layer) {
         var _a, _b, _c, _d, _e, _f;
         const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
-          needsSharedStateTreeSync = this._hasSharedStateDefinitions || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
-        if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.forEachChildren(item => {
-          item.setStage(stage, this.layer);
-        });
+          needsSharedStateTreeSync = this.hasSharedStateDefinitions() || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
+        if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.notifyChildrenSharedStateTreeChanged();
         const layerChanged = this.layer !== layer;
-        layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.forEachChildren(item => {
-          item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
-        });
+        layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.notifyChildrenSharedStateTreeChanged();
       }
       addUpdatePositionTag() {
         super.addUpdatePositionTag(), this.forEachChildren(g => {
@@ -13372,24 +12826,26 @@
       }
       detachStageForRelease() {
         super.detachStageForRelease(), this.sharedStateScope = void 0, this.forEachChildren(item => {
-          var _a;
-          null === (_a = item.detachStageForRelease) || void 0 === _a || _a.call(item);
+          item.detachStageForRelease();
         });
       }
       ensureSharedStateScopeBound() {
         var _a, _b, _c;
         if (!this.hasSharedStateDefinitions()) return void (this.sharedStateScope = void 0);
         const parentScope = null !== (_b = null === (_a = this.parent) || void 0 === _a ? void 0 : _a.sharedStateScope) && void 0 !== _b ? _b : null === (_c = this.stage) || void 0 === _c ? void 0 : _c.rootSharedStateScope;
-        this.sharedStateScope ? (this.sharedStateScope.ownerGroup = this, this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
+        this.sharedStateScope ? (this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
       }
       hasSharedStateDefinitions() {
-        return this._hasSharedStateDefinitions;
+        return !!this._sharedStateDefinitions && Object.keys(this._sharedStateDefinitions).length > 0;
       }
       notifyChildrenSharedStateTreeChanged() {
         this.forEachChildren(item => {
-          item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(this.stage, this.layer);
+          this.syncChildSharedStateTreeBinding(item);
         });
       }
+      syncChildSharedStateTreeBinding(child) {
+        child.onParentSharedStateTreeChanged(this.stage, this.layer);
+      }
       onParentSharedStateTreeChanged(stage, layer) {
         var _a;
         this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)), this.notifyChildrenSharedStateTreeChanged()) : this.setStage(stage, layer);
@@ -14304,7 +13760,7 @@
       }
     }
 
-    var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -14374,7 +13830,7 @@
       } else graphic.forEachChildren(cb, reverse);
     }
     function foreachAsync(graphic, defaultZIndex, cb, reverse = !1) {
-      return __awaiter$5(this, void 0, void 0, function* () {
+      return __awaiter$4(this, void 0, void 0, function* () {
         yield graphic.forEachChildrenAsync(cb, reverse);
       });
     }
@@ -14947,9 +14403,6 @@
       register(key, renderer) {
         this.entries.set(key, renderer), this.cache.delete(key);
       }
-      registerMany(entries) {
-        for (const [key, renderer] of entries) this.register(key, renderer);
-      }
       get(key) {
         if (this.cache.has(key)) return this.cache.get(key);
         const entry = this.entries.get(key);
@@ -14972,9 +14425,6 @@
       register(key, picker) {
         this.entries.set(key, picker);
       }
-      registerMany(entries) {
-        for (const [key, picker] of entries) this.register(key, picker);
-      }
       get(key) {
         return this.entries.get(key);
       }
@@ -15016,9 +14466,6 @@
         const current = null !== (_a = this.entries.get(key)) && void 0 !== _a ? _a : [];
         current.push(contribution), this.entries.set(key, current);
       }
-      registerMany(entries) {
-        for (const [key, contribution] of entries) this.register(key, contribution);
-      }
       get(key) {
         var _a;
         return [...(null !== (_a = this.entries.get(key)) && void 0 !== _a ? _a : [])];
@@ -15036,8 +14483,8 @@
     };
     class DefaultPluginService {
       constructor(autoEnablePlugins = EMPTY_AUTO_ENABLE_PROVIDER, deps = {}) {
-        var _a, _b, _c;
-        this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !1, this.pluginRegistry = null !== (_a = deps.pluginRegistry) && void 0 !== _a ? _a : new PluginRegistry(), this.autoEnablePlugins = null !== (_c = null !== (_b = deps.autoEnablePlugins) && void 0 !== _b ? _b : this.autoEnablePlugins) && void 0 !== _c ? _c : EMPTY_AUTO_ENABLE_PROVIDER;
+        var _a;
+        this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !1, this.pluginRegistry = null !== (_a = deps.pluginRegistry) && void 0 !== _a ? _a : new PluginRegistry();
       }
       active(stage, params) {
         this.stage = stage, this.actived = !0;
@@ -15186,29 +14633,28 @@
     class DirtyBoundsPlugin {
       constructor() {
         this.name = "DirtyBoundsPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.dirtyBoundsHooksRegistered = !1, this.handlePaintOnlyUpdate = graphic => {
-          var _a, _b, _c, _d;
+          var _a;
           const stage = this.pluginService.stage;
           if (!stage || stage !== graphic.stage || !stage.renderCount) return;
           const owner = null !== (_a = graphic.glyphHost) && void 0 !== _a ? _a : graphic;
           if (!(owner._updateTag & exports.UpdateTag.UPDATE_PAINT) || owner._updateTag & exports.UpdateTag.UPDATE_BOUNDS) return;
           const ownerBounds = this.ensurePaintDirtyBoundsCache(owner);
-          ownerBounds && !ownerBounds.empty() && stage.dirty(ownerBounds), null === (_b = owner.clearUpdatePaintTag) || void 0 === _b || _b.call(owner);
+          ownerBounds && !ownerBounds.empty() && stage.dirty(ownerBounds), owner.clearUpdatePaintTag();
           const shadowRoot = owner.shadowRoot;
           if (!shadowRoot) return;
           const shadowBounds = this.ensurePaintDirtyBoundsCache(shadowRoot);
-          shadowBounds && !shadowBounds.empty() && stage.dirty(shadowBounds), null === (_d = (_c = shadowRoot).clearUpdatePaintTag) || void 0 === _d || _d.call(_c);
+          shadowBounds && !shadowBounds.empty() && stage.dirty(shadowBounds), shadowRoot.clearUpdatePaintTag();
         };
       }
       ensurePaintDirtyBoundsCache(graphic) {
-        var _a, _b;
+        var _a;
         const owner = graphic;
-        owner._AABBBounds && "function" == typeof owner._AABBBounds.empty && !owner._AABBBounds.empty() || "function" != typeof owner.doUpdateAABBBounds || owner.doUpdateAABBBounds("imprecise" === (null === (_a = owner.attribute) || void 0 === _a ? void 0 : _a.boundsMode));
-        return owner._globalAABBBounds && "function" == typeof owner._globalAABBBounds.empty && !owner._globalAABBBounds.empty() || "function" != typeof owner.tryUpdateGlobalAABBBounds || owner.tryUpdateGlobalAABBBounds(), null !== (_b = owner._globalAABBBounds) && void 0 !== _b ? _b : owner.globalAABBBounds;
+        return owner._AABBBounds.empty() && owner.doUpdateAABBBounds("imprecise" === (null === (_a = owner.attribute) || void 0 === _a ? void 0 : _a.boundsMode)), owner._globalAABBBounds && !owner._globalAABBBounds.empty() || owner.tryUpdateGlobalAABBBounds(), owner._globalAABBBounds;
       }
       getRemoveDirtyBounds(graphic) {
         var _a;
         const cachedBounds = (null !== (_a = graphic.glyphHost) && void 0 !== _a ? _a : graphic)._globalAABBBounds;
-        if (cachedBounds && "function" == typeof cachedBounds.empty && !cachedBounds.empty()) return cachedBounds;
+        if (cachedBounds && !cachedBounds.empty()) return cachedBounds;
       }
       registerDirtyBoundsHooks(stage) {
         this.dirtyBoundsHooksRegistered || (stage.graphicService.hooks.onAttributeUpdate.tap(this.key, this.handlePaintOnlyUpdate), stage.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
@@ -15261,256 +14707,6 @@
       return isBrowserEnv() ? "browser" : "node";
     }
 
-    var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-      return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) {
-          try {
-            step(generator.next(value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function rejected(value) {
-          try {
-            step(generator.throw(value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function step(result) {
-          var value;
-          result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
-            resolve(value);
-          })).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-      });
-    };
-    function isRenderableGraphic(graphic) {
-      return !!graphic.stage && "released" !== graphic.releaseStatus;
-    }
-    function createTargetStatesKey(targetStates) {
-      return targetStates.length ? targetStates.join("|") : "__clear__";
-    }
-    function createIntentKey(contextOwnerId, configFingerprint, targetStatesKey) {
-      return `${contextOwnerId}:${configFingerprint}:${targetStatesKey}`;
-    }
-    function hasMeaningfulDeferredConfig(config) {
-      const normalized = normalizeDeferredStateOwnerConfig(config);
-      return !!normalized && (null != normalized.localEnabled || null != normalized.deferred);
-    }
-    function getGraphicCompiledDefinitions(graphic) {
-      const graphicAny = graphic;
-      if ("function" == typeof graphicAny.resolveEffectiveCompiledDefinitions) {
-        const result = graphicAny.resolveEffectiveCompiledDefinitions();
-        return {
-          compiledDefinitions: result.compiledDefinitions,
-          stateProxyEligibility: result.stateProxyEligibility
-        };
-      }
-      return {};
-    }
-    function getCurrentStateNames(graphic) {
-      var _a, _b;
-      return null !== (_b = null === (_a = graphic.currentStates) || void 0 === _a ? void 0 : _a.slice()) && void 0 !== _b ? _b : [];
-    }
-    class StateBatchScheduler {
-      constructor(stage, perfMonitor) {
-        this.stage = stage, this.perfMonitor = perfMonitor, this.jobsByIntentKey = new Map(), this.pendingIntentByGraphic = new Map(), this.nextJobId = 1, this.runningJobs = new Map();
-      }
-      schedule(graphics, targetStates) {
-        const batchOperation = graphics.length > 1;
-        graphics.forEach(graphic => {
-          const eligibility = this.resolveEligibility(graphic, targetStates, batchOperation, !0);
-          if ("reason" in eligibility) return this.removeGraphicFromPending(graphic), void ("graphic_unavailable" !== eligibility.reason && this.commitSynchronously(graphic, targetStates));
-          this.enqueueDeferredIntent(graphic, targetStates, eligibility.context, eligibility.targetStatesKey);
-        });
-      }
-      release() {
-        var _a;
-        this.jobsByIntentKey.forEach(job => {
-          job.status = "cancelled";
-        }), this.jobsByIntentKey.clear(), this.pendingIntentByGraphic.clear(), this.runningJobs.clear(), null === (_a = this.perfMonitor) || void 0 === _a || _a.updateBatchPending(0);
-      }
-      resolveEligibility(graphic, targetStates, batchOperation, recordObservability) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!isRenderableGraphic(graphic)) return recordObservability && (null === (_a = this.perfMonitor) || void 0 === _a || _a.recordDeferredIneligible("graphic_unavailable")), {
-          eligible: !1,
-          reason: "graphic_unavailable"
-        };
-        if (!batchOperation) return recordObservability && (null === (_b = this.perfMonitor) || void 0 === _b || _b.recordDeferredIneligible("non_batch_operation")), {
-          eligible: !1,
-          reason: "non_batch_operation"
-        };
-        const context = this.resolveDeferredContext(graphic);
-        if (!context) return recordObservability && (null === (_c = this.perfMonitor) || void 0 === _c || _c.recordDeferredIneligible("graphic_unavailable")), {
-          eligible: !1,
-          reason: "graphic_unavailable"
-        };
-        if (!context.config.enabled) {
-          const normalizedOwnerConfig = normalizeDeferredStateOwnerConfig(context.contextOwner.deferredStateConfig),
-            reason = !1 === (null == normalizedOwnerConfig ? void 0 : normalizedOwnerConfig.localEnabled) ? "context_disabled" : "config_disabled";
-          return recordObservability && (null === (_d = this.perfMonitor) || void 0 === _d || _d.recordDeferredIneligible(reason)), {
-            eligible: !1,
-            reason: reason
-          };
-        }
-        const classification = this.classifyGraphicTargetStates(graphic, targetStates);
-        return classification.reason ? (recordObservability && (null === (_e = this.perfMonitor) || void 0 === _e || _e.recordDeferredIneligible(classification.reason)), {
-          eligible: !1,
-          reason: classification.reason
-        }) : classification.category !== UpdateCategory.PAINT ? (recordObservability && (null === (_f = this.perfMonitor) || void 0 === _f || _f.recordDeferredIneligible("mixed_update_category")), {
-          eligible: !1,
-          reason: "mixed_update_category"
-        }) : {
-          eligible: !0,
-          context: context,
-          targetStatesKey: createTargetStatesKey(targetStates)
-        };
-      }
-      resolveDeferredContext(graphic) {
-        var _a;
-        const stage = graphic.stage;
-        if (!stage) return;
-        let owner = stage,
-          config = normalizeDeferredStateConfig(void 0);
-        const ownerConfigs = [stage],
-          parents = [];
-        let parent = graphic.parent;
-        for (; parent && parent !== stage;) parents.push(parent), parent = parent.parent;
-        parents.reverse().forEach(current => ownerConfigs.push(current)), ownerConfigs.forEach(current => {
-          const deferredStateConfig = normalizeDeferredStateOwnerConfig(current.deferredStateConfig);
-          deferredStateConfig && (deferredStateConfig.deferred && (config = Object.assign(Object.assign({}, config), deferredStateConfig.deferred)), null != deferredStateConfig.localEnabled && (config.enabled = deferredStateConfig.localEnabled), hasMeaningfulDeferredConfig(current.deferredStateConfig) && (owner = current));
-        });
-        const normalized = normalizeDeferredStateConfig(config);
-        return {
-          contextOwner: owner,
-          contextOwnerId: null !== (_a = owner._uid) && void 0 !== _a ? _a : 0,
-          config: normalized,
-          configFingerprint: fingerprintDeferredStateConfig(normalized)
-        };
-      }
-      classifyGraphicTargetStates(graphic, targetStates) {
-        const {
-            compiledDefinitions: compiledDefinitions,
-            stateProxyEligibility: stateProxyEligibility
-          } = getGraphicCompiledDefinitions(graphic),
-          candidateStates = Array.from(new Set([...getCurrentStateNames(graphic), ...targetStates]));
-        let category = UpdateCategory.NONE;
-        return candidateStates.forEach(stateName => {
-          if (null == stateProxyEligibility ? void 0 : stateProxyEligibility(stateName)) return void (category = UpdateCategory.NONE);
-          const definition = null == compiledDefinitions ? void 0 : compiledDefinitions.get(stateName);
-          definition && (definition.hasResolver && 0 === definition.affectedKeys.size ? category = UpdateCategory.NONE : category |= classifyAffectedKeys(definition.affectedKeys));
-        }), candidateStates.some(stateName => null == stateProxyEligibility ? void 0 : stateProxyEligibility(stateName)) || candidateStates.some(stateName => {
-          const definition = null == compiledDefinitions ? void 0 : compiledDefinitions.get(stateName);
-          return !!(null == definition ? void 0 : definition.hasResolver) && 0 === definition.affectedKeys.size;
-        }) ? {
-          category: UpdateCategory.NONE,
-          reason: "resolver_unstable_keys"
-        } : {
-          category: category === UpdateCategory.NONE ? UpdateCategory.PAINT : category
-        };
-      }
-      enqueueDeferredIntent(graphic, targetStates, context, targetStatesKey) {
-        var _a, _b, _c, _d, _e, _f;
-        const nextIntentKey = createIntentKey(context.contextOwnerId, context.configFingerprint, targetStatesKey),
-          prevIntentKey = this.pendingIntentByGraphic.get(graphic);
-        if (prevIntentKey === nextIntentKey) return void (null === (_a = this.perfMonitor) || void 0 === _a || _a.incrementCounter("deferredJobsCoalesced"));
-        prevIntentKey && this.removeGraphicFromIntentJob(graphic, prevIntentKey);
-        let job = this.jobsByIntentKey.get(nextIntentKey);
-        job ? null === (_d = this.perfMonitor) || void 0 === _d || _d.incrementCounter("deferredJobsCoalesced") : (job = {
-          id: this.nextJobId++,
-          kind: "apply_states",
-          intentKey: nextIntentKey,
-          status: "pending",
-          targetStates: [...targetStates],
-          targetStatesKey: targetStatesKey,
-          pendingGraphics: new Set(),
-          orderedGraphics: [],
-          config: context.config,
-          contextOwner: context.contextOwner,
-          contextOwnerId: context.contextOwnerId,
-          configFingerprint: context.configFingerprint,
-          createdAt: Date.now(),
-          processedCount: 0
-        }, this.jobsByIntentKey.set(nextIntentKey, job), null === (_b = this.perfMonitor) || void 0 === _b || _b.incrementCounter("deferredJobsCreated"), null === (_c = this.perfMonitor) || void 0 === _c || _c.updateBatchPending(this.jobsByIntentKey.size)), job.pendingGraphics.has(graphic) || (job.pendingGraphics.add(graphic), job.orderedGraphics.push(graphic), this.pendingIntentByGraphic.set(graphic, nextIntentKey), null === (_e = this.perfMonitor) || void 0 === _e || _e.recordAllocation("batchEntriesCreated"), null === (_f = this.perfMonitor) || void 0 === _f || _f.updateMaxGraphicsInJob(job.pendingGraphics.size)), this.ensureJobRunning(job);
-      }
-      removeGraphicFromPending(graphic) {
-        const prevIntentKey = this.pendingIntentByGraphic.get(graphic);
-        prevIntentKey && this.removeGraphicFromIntentJob(graphic, prevIntentKey);
-      }
-      removeGraphicFromIntentJob(graphic, intentKey) {
-        var _a, _b, _c;
-        const job = this.jobsByIntentKey.get(intentKey);
-        job ? (job.pendingGraphics.delete(graphic), this.pendingIntentByGraphic.get(graphic) === intentKey && this.pendingIntentByGraphic.delete(graphic), 0 === job.pendingGraphics.size && "completed" !== job.status && (job.status = "cancelled", this.jobsByIntentKey.delete(intentKey), null === (_a = this.perfMonitor) || void 0 === _a || _a.incrementCounter("deferredJobsCancelled"), null === (_b = this.perfMonitor) || void 0 === _b || _b.recordEvent("deferred-job-cancel", {
-          intentKey: intentKey,
-          jobId: job.id
-        }), null === (_c = this.perfMonitor) || void 0 === _c || _c.updateBatchPending(this.jobsByIntentKey.size))) : this.pendingIntentByGraphic.delete(graphic);
-      }
-      ensureJobRunning(job) {
-        if (this.runningJobs.has(job.intentKey)) return;
-        const runner = this.runJob(job).then(() => {
-          this.runningJobs.delete(job.intentKey);
-        }, () => {
-          this.runningJobs.delete(job.intentKey);
-        });
-        this.runningJobs.set(job.intentKey, runner);
-      }
-      runJob(job) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return __awaiter$4(this, void 0, void 0, function* () {
-          if ("cancelled" === job.status) return;
-          if (yield this.waitForNextFrame(), "cancelled" === job.status) return;
-          job.status = "running", null === (_a = this.perfMonitor) || void 0 === _a || _a.recordEvent("deferred-job-start", {
-            intentKey: job.intentKey,
-            jobId: job.id
-          });
-          let index = 0,
-            frameStart = performance.now(),
-            processedInFrame = 0,
-            committedInSlice = 0;
-          for (; index < job.orderedGraphics.length;) {
-            if ("cancelled" === job.status) return;
-            processedInFrame > 0 && (processedInFrame >= job.config.maxGraphicsPerFrame || performance.now() - frameStart >= job.config.frameBudget) && (null === (_b = this.perfMonitor) || void 0 === _b || _b.incrementCounter("deferredBudgetYields"), null === (_c = this.perfMonitor) || void 0 === _c || _c.recordCost("batchSlice", performance.now() - frameStart), null === (_d = this.perfMonitor) || void 0 === _d || _d.recordEvent("deferred-job-yield", {
-              intentKey: job.intentKey,
-              jobId: job.id,
-              processedInFrame: processedInFrame
-            }), committedInSlice > 0 && this.stage.renderNextFrame(), yield this.waitForNextFrame(), frameStart = performance.now(), processedInFrame = 0, committedInSlice = 0);
-            const graphic = job.orderedGraphics[index++];
-            if (!job.pendingGraphics.has(graphic)) continue;
-            if (!isRenderableGraphic(graphic)) {
-              job.pendingGraphics.delete(graphic), this.pendingIntentByGraphic.get(graphic) === job.intentKey && this.pendingIntentByGraphic.delete(graphic);
-              continue;
-            }
-            if (this.pendingIntentByGraphic.get(graphic) !== job.intentKey) {
-              job.pendingGraphics.delete(graphic);
-              continue;
-            }
-            const nextEligibility = this.resolveEligibility(graphic, job.targetStates, !0, !1);
-            if (!nextEligibility.eligible) {
-              job.pendingGraphics.delete(graphic), this.pendingIntentByGraphic.delete(graphic), this.commitSynchronously(graphic, job.targetStates);
-              continue;
-            }
-            createIntentKey(nextEligibility.context.contextOwnerId, nextEligibility.context.configFingerprint, nextEligibility.targetStatesKey) === job.intentKey ? (this.commitSynchronously(graphic, job.targetStates), job.pendingGraphics.delete(graphic), this.pendingIntentByGraphic.delete(graphic), job.processedCount += 1, processedInFrame += 1, committedInSlice += 1, null === (_e = this.perfMonitor) || void 0 === _e || _e.incrementCounter("deferredGraphicsCommitted")) : (job.pendingGraphics.delete(graphic), this.pendingIntentByGraphic.delete(graphic), this.enqueueDeferredIntent(graphic, job.targetStates, nextEligibility.context, nextEligibility.targetStatesKey));
-          }
-          processedInFrame > 0 && (null === (_f = this.perfMonitor) || void 0 === _f || _f.recordCost("batchSlice", performance.now() - frameStart), this.stage.renderNextFrame()), 0 === job.pendingGraphics.size && this.jobsByIntentKey.get(job.intentKey) === job && (job.status = "completed", this.jobsByIntentKey.delete(job.intentKey), null === (_g = this.perfMonitor) || void 0 === _g || _g.incrementCounter("deferredJobsCompleted"), null === (_h = this.perfMonitor) || void 0 === _h || _h.recordEvent("deferred-job-complete", {
-            intentKey: job.intentKey,
-            jobId: job.id,
-            processedCount: job.processedCount
-          }), null === (_j = this.perfMonitor) || void 0 === _j || _j.updateBatchPending(this.jobsByIntentKey.size));
-        });
-      }
-      waitForNextFrame() {
-        const stageGlobal = this.stage.global;
-        return (null == stageGlobal ? void 0 : stageGlobal.getSpecifiedPerformanceRAF) ? stageGlobal.getSpecifiedPerformanceRAF(this.stage.rafId).wait() : new Promise(resolve => {
-          null == stageGlobal || stageGlobal.getSpecifiedRequestAnimationFrame(this.stage.rafId)(() => resolve());
-        });
-      }
-      commitSynchronously(graphic, targetStates) {
-        isRenderableGraphic(graphic) && (targetStates.length ? graphic.useStates(targetStates, !1) : graphic.clearStates(!1));
-      }
-    }
-
     const DefaultConfig = {
       WIDTH: 500,
       HEIGHT: 500,
@@ -15627,10 +14823,9 @@
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.theme.onStateDefinitionsChange = () => {
           var _a;
-          const definitions = null === (_a = this.theme) || void 0 === _a ? void 0 : _a.stateDefinitions;
-          if (!definitions || !Object.keys(definitions).length) return void (this.rootSharedStateScope && (setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, definitions), markScopeActiveDescendantsDirty(this.rootSharedStateScope, this)));
-          const rootScope = this.ensureRootSharedStateScope(definitions);
-          setRootSharedStateScopeThemeDefinitions(rootScope, definitions), markScopeActiveDescendantsDirty(rootScope, this);
+          const definitions = null === (_a = this.theme) || void 0 === _a ? void 0 : _a.stateDefinitions,
+            rootScope = definitions && Object.keys(definitions).length ? this.ensureRootSharedStateScope(definitions) : this.rootSharedStateScope;
+          rootScope && (setRootSharedStateScopeThemeDefinitions(rootScope, definitions), markScopeActiveDescendantsDirty(rootScope, this));
         }, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
@@ -15898,18 +15093,6 @@
       ensureRootSharedStateScope(themeStateDefinitions) {
         return this.rootSharedStateScope ? (this.rootSharedStateScope.ownerStage = this, this.rootSharedStateScope) : (this.rootSharedStateScope = createRootSharedStateScope(this, themeStateDefinitions), this.rootSharedStateScope);
       }
-      getStateBatchScheduler() {
-        return this._stateBatchScheduler || (this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this))), this._stateBatchScheduler;
-      }
-      scheduleStateBatch(graphics, targetStates) {
-        this.getStateBatchScheduler().schedule(graphics, targetStates);
-      }
-      getStatePerfSnapshot() {
-        return ensureStageStatePerfMonitor(this).getSnapshot();
-      }
-      resetStatePerfSnapshot() {
-        ensureStageStatePerfMonitor(this).reset();
-      }
       _doRenderInThisFrame() {
         if ("released" === this.releaseStatus) return;
         this.startAnimate();
@@ -15985,12 +15168,12 @@
         throw new Error("暂不支持");
       }
       release() {
-        var _a, _b, _d, _e;
-        null === (_a = this._stateBatchScheduler) || void 0 === _a || _a.release(), super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
+        var _a, _b, _d;
+        super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), null === (_b = this._ticker) || void 0 === _b || _b.remTimeline(null == this ? void 0 : this.timeline), null === (_d = this._ticker) || void 0 === _d || _d.removeListener("tick", this.afterTickCb), this.params.ticker || null === (_e = this._ticker) || void 0 === _e || _e.release(), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.params.ticker || null === (_d = this._ticker) || void 0 === _d || _d.release(), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -20386,24 +19569,16 @@
         this.context.release();
       }
     }
-    function createBrowserApp$1(options = {}) {
+    function createBrowserApp(options = {}) {
       return new BrowserEntry(options);
     }
 
-    class NodeEntry extends BrowserEntry {
-      constructor(options = {}) {
-        super(options);
-      }
-    }
+    class NodeEntry extends BrowserEntry {}
     function createNodeApp$1(options = {}) {
       return new NodeEntry(options);
     }
 
-    class MiniappEntry extends BrowserEntry {
-      constructor(options = {}) {
-        super(options);
-      }
-    }
+    class MiniappEntry extends BrowserEntry {}
     function createMiniappApp$1(options = {}) {
       return new MiniappEntry(options);
     }
@@ -21196,7 +20371,7 @@
       };
     }
 
-    var __rest$g = undefined && undefined.__rest || function (s, e) {
+    var __rest$f = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -21294,7 +20469,7 @@
             {
               textConfig = []
             } = _a,
-            rest = __rest$g(_a, ["textConfig"]);
+            rest = __rest$f(_a, ["textConfig"]);
           if ("Backspace" === ev.type && !textConfig.length) return;
           let str = ev.data;
           this.isComposing || "Backspace" === ev.type || str || (str = "\n"), this.selectionStartCursorIdx > this.cursorIndex && ([this.cursorIndex, this.selectionStartCursorIdx] = [this.selectionStartCursorIdx, this.cursorIndex]);
@@ -22316,77 +21491,82 @@
       return instance;
     }
 
-    let loadArcModule = !1;
+    function isBindingContextLoaded(loadedContexts, context) {
+      const key = "object" == typeof context && null !== context || "function" == typeof context ? context : loadedContexts;
+      return !!loadedContexts.has(key) || (loadedContexts.add(key), !1);
+    }
+
+    const loadedArcModuleContexts = new WeakSet();
     function bindArcRenderModule({
       bind: bind
     }) {
-      loadArcModule || (loadArcModule = !0, bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ArcRenderContribution));
+      isBindingContextLoaded(loadedArcModuleContexts, bind) || (bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ArcRenderContribution));
     }
     const arcModule = bindArcRenderModule;
 
-    let loadRectModule = !1;
+    const loadedRectModuleContexts = new WeakSet();
     function bindRectRenderModule({
       bind: bind
     }) {
-      loadRectModule || (loadRectModule = !0, bind(DefaultCanvasRectRender).toDynamicValue(({
+      isBindingContextLoaded(loadedRectModuleContexts, bind) || (bind(DefaultCanvasRectRender).toDynamicValue(({
         container: container
       }) => new DefaultCanvasRectRender(createContributionProvider$1(RectRenderContribution, container))).inSingletonScope(), bind(RectRender).toService(DefaultCanvasRectRender), bind(GraphicRender).toService(RectRender), bind(SplitRectAfterRenderContribution).toSelf(), bind(SplitRectBeforeRenderContribution).toSelf(), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, RectRenderContribution));
     }
     const rectModule = bindRectRenderModule;
 
-    let loadLineModule = !1;
+    const loadedLineModuleContexts = new WeakSet();
     function bindLineRenderModule({
       bind: bind
     }) {
-      loadLineModule || (loadLineModule = !0, bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender));
+      isBindingContextLoaded(loadedLineModuleContexts, bind) || (bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender));
     }
     const lineModule = bindLineRenderModule;
 
-    let loadAreaModule = !1;
+    const loadedAreaModuleContexts = new WeakSet();
     function bindAreaRenderModule({
       bind: bind
     }) {
-      loadAreaModule || (loadAreaModule = !0, bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope());
+      isBindingContextLoaded(loadedAreaModuleContexts, bind) || (bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope());
     }
     const areaModule = bindAreaRenderModule;
 
-    let loadSymbolModule = !1;
+    const loadedSymbolModuleContexts = new WeakSet();
     function bindSymbolRenderModule({
       bind: bind
     }) {
-      loadSymbolModule || (loadSymbolModule = !0, bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, SymbolRenderContribution));
+      isBindingContextLoaded(loadedSymbolModuleContexts, bind) || (bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, SymbolRenderContribution));
     }
     const symbolModule = bindSymbolRenderModule;
 
-    let loadCircleModule = !1;
+    const loadedCircleModuleContexts = new WeakSet();
     function bindCircleRenderModule({
       bind: bind
     }) {
-      loadCircleModule || (loadCircleModule = !0, bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bind(CircleRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, CircleRenderContribution));
+      isBindingContextLoaded(loadedCircleModuleContexts, bind) || (bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bind(CircleRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, CircleRenderContribution));
     }
     const circleModule = bindCircleRenderModule;
 
-    let loadTextModule = !1;
+    const loadedTextModuleContexts = new WeakSet();
     function bindTextRenderModule({
       bind: bind
     }) {
-      loadTextModule || (loadTextModule = !0, bind(TextRender).to(DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, TextRenderContribution));
+      isBindingContextLoaded(loadedTextModuleContexts, bind) || (bind(TextRender).to(DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, TextRenderContribution));
     }
     const textModule = bindTextRenderModule;
 
-    let loadPathModule = !1;
+    const loadedPathModuleContexts = new WeakSet();
     function bindPathRenderModule({
       bind: bind
     }) {
-      loadPathModule || (loadPathModule = !0, bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PathRenderContribution));
+      isBindingContextLoaded(loadedPathModuleContexts, bind) || (bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PathRenderContribution));
     }
     const pathModule = bindPathRenderModule;
 
-    let loadPolygonModule = !1;
+    const loadedPolygonModuleContexts = new WeakSet();
     function bindPolygonRenderModule({
       bind: bind
     }) {
-      loadPolygonModule || (loadPolygonModule = !0, bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
+      isBindingContextLoaded(loadedPolygonModuleContexts, bind) || (bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
     }
     const polygonModule = bindPolygonRenderModule;
 
@@ -22427,11 +21607,11 @@
       }
     }
 
-    let loadStarModule = !1;
+    const loadedStarModuleContexts = new WeakSet();
     function bindStarRenderModule({
       bind: bind
     }) {
-      loadStarModule || (loadStarModule = !0, bind(DefaultCanvasStarRender).toDynamicValue(({
+      isBindingContextLoaded(loadedStarModuleContexts, bind) || (bind(DefaultCanvasStarRender).toDynamicValue(({
         container: container
       }) => new DefaultCanvasStarRender(createContributionProvider$1(StarRenderContribution, container))).inSingletonScope(), bind(StarRender).toService(DefaultCanvasStarRender), bind(GraphicRender).toService(StarRender));
     }
@@ -22464,11 +21644,11 @@
       }
     }
 
-    let loadGlyphModule = !1;
+    const loadedGlyphModuleContexts = new WeakSet();
     function bindGlyphRenderModule({
       bind: bind
     }) {
-      loadGlyphModule || (loadGlyphModule = !0, bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender));
+      isBindingContextLoaded(loadedGlyphModuleContexts, bind) || (bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender));
     }
     const glyphModule = bindGlyphRenderModule;
 
@@ -22524,19 +21704,19 @@
       }
     }
 
-    let loadRichtextModule = !1;
+    const loadedRichtextModuleContexts = new WeakSet();
     function bindRichtextRenderModule({
       bind: bind
     }) {
-      loadRichtextModule || (loadRichtextModule = !0, bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope(), bind(GraphicRender).toService(RichTextRender));
+      isBindingContextLoaded(loadedRichtextModuleContexts, bind) || (bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope(), bind(GraphicRender).toService(RichTextRender));
     }
     const richtextModule = bindRichtextRenderModule;
 
-    let loadImageModule = !1;
+    const loadedImageModuleContexts = new WeakSet();
     function bindImageRenderModule({
       bind: bind
     }) {
-      loadImageModule || (loadImageModule = !0, bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ImageRenderContribution));
+      isBindingContextLoaded(loadedImageModuleContexts, bind) || (bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ImageRenderContribution));
     }
     const imageModule = bindImageRenderModule;
 
@@ -22663,11 +21843,11 @@
       }
     }
 
-    let loadRect3dModule = !1;
+    const loadedRect3dModuleContexts = new WeakSet();
     function bindRect3dRenderModule({
       bind: bind
     }) {
-      loadRect3dModule || (loadRect3dModule = !0, bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender));
+      isBindingContextLoaded(loadedRect3dModuleContexts, bind) || (bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender));
     }
     const rect3dModule = bindRect3dRenderModule;
 
@@ -22792,11 +21972,11 @@
       }
     }
 
-    let loadArc3dModule = !1;
+    const loadedArc3dModuleContexts = new WeakSet();
     function bindArc3dRenderModule({
       bind: bind
     }) {
-      loadArc3dModule || (loadArc3dModule = !0, bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender));
+      isBindingContextLoaded(loadedArc3dModuleContexts, bind) || (bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender));
     }
     const arc3dModule = bindArc3dRenderModule;
 
@@ -22831,11 +22011,11 @@
       }
     }
 
-    let loadPyramid3dModule = !1;
+    const loadedPyramid3dModuleContexts = new WeakSet();
     function bindPyramid3dRenderModule({
       bind: bind
     }) {
-      loadPyramid3dModule || (loadPyramid3dModule = !0, bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope(), bind(GraphicRender).toService(Pyramid3dRender));
+      isBindingContextLoaded(loadedPyramid3dModuleContexts, bind) || (bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope(), bind(GraphicRender).toService(Pyramid3dRender));
     }
     const pyramid3dModule = bindPyramid3dRenderModule;
 
@@ -23800,11 +22980,11 @@
         configureRuntimeApplicationForApp: configureRuntimeApplicationForApp,
         container: container,
         cornerTangents: cornerTangents,
-        createApp: createBrowserApp$1,
+        createApp: createBrowserApp,
         createArc: createArc,
         createArc3d: createArc3d,
         createArea: createArea,
-        createBrowserApp: createBrowserApp$1,
+        createBrowserApp: createBrowserApp,
         createCanvasEventTransformer: createCanvasEventTransformer,
         createCircle: createCircle,
         createColor: createColor,
@@ -31547,7 +30727,7 @@
       }, params);
     };
 
-    var __rest$f = undefined && undefined.__rest || function (s, e) {
+    var __rest$e = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -31563,21 +30743,20 @@
     function jsx(type, config, ...children) {
       const _a = config || {},
         {
-          key: key,
           name: name,
           id: id,
           attribute: attribute,
-          stateProxy: stateProxy,
+          states: states,
           animation: animation,
           timeline: timeline
         } = _a,
-        props = __rest$f(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
+        props = __rest$e(_a, ["name", "id", "attribute", "states", "animation", "timeline"]);
       let c = type;
       isString$1(type) && (c = graphicCreator$1[type]);
       const childrenList = [];
       children.length && flatten(1 === children.length ? children[0] : children, childrenList);
       const g = "Group" === c.name ? new c(attribute) : c(config);
-      if (parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), name && (g.name = name), isArray$1(animation)) {
+      if (parseToGraphic$1(g, childrenList, props), name && (g.name = name), id && (g.id = id), states && (g.states = states), isArray$1(animation)) {
         const animate = g.animate();
         timeline && animate.setTimeline(timeline), animation.forEach(item => {
           animate[item[0]](...item.slice(1));
@@ -31613,7 +30792,7 @@
         {
           attribute: attribute,
           children: children,
-          stateProxy: stateProxy,
+          states: states,
           id: id,
           name: name
         } = dom.props,
@@ -31621,7 +30800,7 @@
           attribute: attribute
         }),
         out = parseToGraphic(g, dom.props, children);
-      return out || (stateProxy && (g.stateProxy = stateProxy), g.id = id, g.name = name, parseChildren(children, g), g);
+      return out || (g.id = id, g.name = name, states && (g.states = states), parseChildren(children, g), g);
     }
     function parseChildren(children, g) {
       isArray$1(children) ? children.forEach(item => {
@@ -33022,187 +32201,6 @@
       loadLottieModule || (loadLottieModule = !0, container.bind(DefaultCanvasLottieRender).toDynamicValue(() => new DefaultCanvasLottieRender(createContributionProvider(RectRenderContribution, container))).inSingletonScope(), container.bind(GraphicRender).toService(DefaultCanvasLottieRender));
     }
 
-    var VRenderKitsRuntime = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        BrowserEnvContribution: BrowserEnvContribution,
-        CanvasArc3dPicker: CanvasArc3dPicker,
-        CanvasArcPicker: CanvasArcPicker,
-        CanvasAreaPicker: CanvasAreaPicker,
-        CanvasCirclePicker: CanvasCirclePicker,
-        CanvasGifImagePicker: CanvasGifImagePicker,
-        CanvasGlyphPicker: CanvasGlyphPicker,
-        CanvasGroupPicker: CanvasGroupPicker,
-        CanvasImagePicker: CanvasImagePicker,
-        CanvasLinePicker: CanvasLinePicker,
-        CanvasLottiePicker: CanvasLottiePicker,
-        CanvasPathPicker: CanvasPathPicker,
-        CanvasPickerContribution: CanvasPickerContribution,
-        CanvasPolygonPicker: CanvasPolygonPicker,
-        CanvasPyramid3dPicker: CanvasPyramid3dPicker,
-        CanvasRect3dPicker: CanvasRect3dPicker,
-        CanvasRectPicker: CanvasRectPicker,
-        CanvasRichTextPicker: CanvasRichTextPicker,
-        CanvasStarPicker: CanvasStarPicker,
-        CanvasSymbolPicker: CanvasSymbolPicker,
-        CanvasTextPicker: CanvasTextPicker,
-        DragNDrop: DragNDrop,
-        Fragment: Fragment,
-        Gesture: Gesture,
-        GifImage: GifImage,
-        Lottie: Lottie,
-        MathArcPicker: MathArcPicker,
-        MathAreaPicker: MathAreaPicker,
-        MathCirclePicker: MathCirclePicker,
-        MathGlyphPicker: MathGlyphPicker,
-        MathImagePicker: MathImagePicker,
-        MathLinePicker: MathLinePicker,
-        MathPathPicker: MathPathPicker,
-        MathPickerContribution: MathPickerContribution,
-        MathPolygonPicker: MathPolygonPicker,
-        MathRectPicker: MathRectPicker,
-        MathRichTextPicker: MathRichTextPicker,
-        MathSymbolPicker: MathSymbolPicker,
-        MathTextPicker: MathTextPicker,
-        REACT_TO_CANOPUS_EVENTS: REACT_TO_CANOPUS_EVENTS,
-        REACT_TO_CANOPUS_EVENTS_LIST: REACT_TO_CANOPUS_EVENTS_LIST,
-        VArc: VArc,
-        VArc3d: VArc3d,
-        VArea: VArea,
-        VCircle: VCircle,
-        VGlyph: VGlyph,
-        VGroup: VGroup,
-        VImage: VImage,
-        VLine: VLine,
-        VPath: VPath,
-        VPolygon: VPolygon,
-        VPyramid3d: VPyramid3d,
-        VRect: VRect,
-        VRect3d: VRect3d,
-        VRichText: VRichText,
-        VSymbol: VSymbol,
-        VText: VText,
-        _registerArc: _registerArc,
-        alternatingWave: alternatingWave,
-        bindArc3dCanvasPickerContribution: bindArc3dCanvasPickerContribution,
-        bindArcCanvasPickerContribution: bindArcCanvasPickerContribution,
-        bindArcMathPickerContribution: bindArcMathPickerContribution,
-        bindAreaCanvasPickerContribution: bindAreaCanvasPickerContribution,
-        bindAreaMathPickerContribution: bindAreaMathPickerContribution,
-        bindBrowserEnv: bindBrowserEnv,
-        bindCircleCanvasPickerContribution: bindCircleCanvasPickerContribution,
-        bindCircleMathPickerContribution: bindCircleMathPickerContribution,
-        bindFeishuEnv: bindFeishuEnv,
-        bindGifImageCanvasPickerContribution: bindGifImageCanvasPickerContribution,
-        bindGifImageRenderContribution: bindGifImageRenderContribution,
-        bindGlyphCanvasPickerContribution: bindGlyphCanvasPickerContribution,
-        bindGlyphMathPickerContribution: bindGlyphMathPickerContribution,
-        bindHarmonyEnv: bindHarmonyEnv,
-        bindImageCanvasPickerContribution: bindImageCanvasPickerContribution,
-        bindImageMathPickerContribution: bindImageMathPickerContribution,
-        bindLineCanvasPickerContribution: bindLineCanvasPickerContribution,
-        bindLineMathPickerContribution: bindLineMathPickerContribution,
-        bindLottieCanvasPickerContribution: bindLottieCanvasPickerContribution,
-        bindLottieRenderContribution: bindLottieRenderContribution,
-        bindLynxEnv: bindLynxEnv,
-        bindMathPicker: bindMathPicker,
-        bindNodeEnv: bindNodeEnv,
-        bindPathCanvasPickerContribution: bindPathCanvasPickerContribution,
-        bindPathMathPickerContribution: bindPathMathPickerContribution,
-        bindPolygonCanvasPickerContribution: bindPolygonCanvasPickerContribution,
-        bindPolygonMathPickerContribution: bindPolygonMathPickerContribution,
-        bindPyramid3dCanvasPickerContribution: bindPyramid3dCanvasPickerContribution,
-        bindRect3dCanvasPickerContribution: bindRect3dCanvasPickerContribution,
-        bindRectCanvasPickerContribution: bindRectCanvasPickerContribution,
-        bindRectMathPickerContribution: bindRectMathPickerContribution,
-        bindRichTextMathPickerContribution: bindRichTextMathPickerContribution,
-        bindRichtextCanvasPickerContribution: bindRichtextCanvasPickerContribution,
-        bindSymbolCanvasPickerContribution: bindSymbolCanvasPickerContribution,
-        bindSymbolMathPickerContribution: bindSymbolMathPickerContribution,
-        bindTTEnv: bindTTEnv,
-        bindTaroEnv: bindTaroEnv,
-        bindTextCanvasPickerContribution: bindTextCanvasPickerContribution,
-        bindTextMathPickerContribution: bindTextMathPickerContribution,
-        bindWxEnv: bindWxEnv,
-        centerToCorner: centerToCorner,
-        columnCenterToEdge: columnCenterToEdge,
-        columnEdgeToCenter: columnEdgeToCenter,
-        columnLeftToRight: columnLeftToRight,
-        columnRightToLeft: columnRightToLeft,
-        cornerToCenter: cornerToCenter,
-        createGifImage: createGifImage,
-        createImageElement: createImageElement$1,
-        createLottie: createLottie,
-        decodeReactDom: decodeReactDom,
-        diagonalCenterToEdge: diagonalCenterToEdge,
-        diagonalTopLeftToBottomRight: diagonalTopLeftToBottomRight,
-        initAllEnv: initAllEnv,
-        initBrowserEnv: initBrowserEnv,
-        initFeishuEnv: initFeishuEnv,
-        initHarmonyEnv: initHarmonyEnv,
-        initLynxEnv: initLynxEnv,
-        initNodeEnv: initNodeEnv,
-        initTTEnv: initTTEnv,
-        initTaroEnv: initTaroEnv,
-        initWxEnv: initWxEnv,
-        installBrowserEnvToApp: installBrowserEnvToApp,
-        installBrowserPickersToApp: installBrowserPickersToApp,
-        installDefaultGraphicsToApp: installDefaultGraphicsToApp,
-        installFeishuEnvToApp: installFeishuEnvToApp,
-        installHarmonyEnvToApp: installHarmonyEnvToApp,
-        installLynxEnvToApp: installLynxEnvToApp,
-        installMathPickersToApp: installMathPickersToApp,
-        installNodeEnvToApp: installNodeEnvToApp,
-        installNodePickersToApp: installNodePickersToApp,
-        installTTEnvToApp: installTTEnvToApp,
-        installTaroEnvToApp: installTaroEnvToApp,
-        installWxEnvToApp: installWxEnvToApp,
-        jsx: jsx,
-        loadAllEnv: loadAllEnv,
-        loadAllModule: loadAllModule,
-        loadBrowserEnv: loadBrowserEnv,
-        loadFeishuEnv: loadFeishuEnv,
-        loadHarmonyEnv: loadHarmonyEnv,
-        loadLynxEnv: loadLynxEnv,
-        loadMathPicker: loadMathPicker,
-        loadNodeEnv: loadNodeEnv,
-        loadTTEnv: loadTTEnv,
-        loadTaroEnv: loadTaroEnv,
-        loadWxEnv: loadWxEnv,
-        particleEffect: particleEffect,
-        pulseWave: pulseWave,
-        randomOpacity: randomOpacity,
-        registerArc: registerArc,
-        registerArc3d: registerArc3d,
-        registerArea: registerArea,
-        registerCircle: registerCircle,
-        registerGifGraphic: registerGifGraphic,
-        registerGifImage: registerGifImage,
-        registerGlyph: registerGlyph,
-        registerGroup: registerGroup,
-        registerImage: registerImage,
-        registerLine: registerLine,
-        registerPath: registerPath,
-        registerPolygon: registerPolygon,
-        registerPyramid3d: registerPyramid3d,
-        registerRect: registerRect,
-        registerRect3d: registerRect3d,
-        registerRichtext: registerRichtext,
-        registerShadowRoot: registerShadowRoot,
-        registerStar: registerStar,
-        registerSymbol: registerSymbol,
-        registerText: registerText,
-        registerWrapText: registerWrapText,
-        rippleEffect: rippleEffect,
-        rotationScan: rotationScan,
-        roughModule: roughModule,
-        rowBottomToTop: rowBottomToTop,
-        rowCenterToEdge: rowCenterToEdge,
-        rowEdgeToCenter: rowEdgeToCenter,
-        rowTopToBottom: rowTopToBottom,
-        snakeWave: snakeWave,
-        spiralEffect: spiralEffect
-    });
-
     class Easing {
       constructor() {}
       static linear(t) {
@@ -33437,11 +32435,10 @@
     }
     function prepareAnimationFrameAttribute(target) {
       const transientTarget = target;
-      return transientTarget.attribute || (transientTarget.attribute = {}), transientTarget.attribute === transientTarget.baseAttributes && "function" == typeof transientTarget.detachAttributeFromBaseAttributes && transientTarget.detachAttributeFromBaseAttributes(), transientTarget.attributeMayContainTransientAttrs = !0, transientTarget.attribute;
+      return transientTarget.attribute || (transientTarget.attribute = {}), transientTarget.attribute === transientTarget.baseAttributes && transientTarget.detachAttributeFromBaseAttributes(), transientTarget.attributeMayContainTransientAttrs = !0, transientTarget.attribute;
     }
     function commitAnimationFrameAttribute(target) {
-      var _a, _b;
-      null === (_b = (_a = target).onAttributeUpdate) || void 0 === _b || _b.call(_a, animateUpdateContext);
+      target.onAttributeUpdate(animateUpdateContext);
     }
     function applyAnimationFrameAttributes(target, attributes) {
       if (!attributes) return;
@@ -33458,11 +32455,9 @@
       commitAnimationFrameAttribute(target);
     }
     function applyAnimationTransientAttributes(target, attributes, type = exports.AttributeUpdateType.ANIMATE_UPDATE) {
-      var _a;
       if (!attributes) return;
-      const context = getAnimationContext(type),
-        transientTarget = target;
-      "function" != typeof transientTarget.applyAnimationTransientAttributes ? "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context) : transientTarget.applyAnimationTransientAttributes(attributes, !1, context);
+      const context = getAnimationContext(type);
+      target.applyAnimationTransientAttributes(attributes, !1, context);
     }
     function applyAppearStartAttributes(target, attributes) {
       applyAnimationTransientAttributes(target, attributes, exports.AttributeUpdateType.ANIMATE_BIND);
@@ -33477,8 +32472,7 @@
       constructor(type, props, duration, easing) {
         var _a;
         this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
-          var _a, _b, _c, _d, _e, _f;
-          null === (_b = (_a = this.target).addUpdateShapeAndBoundsTag) || void 0 === _b || _b.call(_a), null === (_d = (_c = this.target).addUpdatePositionTag) || void 0 === _d || _d.call(_c), null === (_f = (_e = this.target).onAttributeUpdate) || void 0 === _f || _f.call(_e, {
+          this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag(), this.target.onAttributeUpdate({
             type: exports.AttributeUpdateType.ANIMATE_UPDATE
           });
         }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : null !== (_a = Easing[easing]) && void 0 !== _a ? _a : Easing.linear : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
@@ -33551,15 +32545,10 @@
         }
       }
       tryPreventConflict() {
-        var _a, _b;
         const animate = this.animate,
           target = this.target,
-          forEachTrackedAnimate = null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
-            var _a;
-            null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
-          },
           propKeys = this.propKeys;
-        forEachTrackedAnimate(a => {
+        target.forEachTrackedAnimate(a => {
           if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
           const fromProps = a.getStartProps();
           let conflictKeys = null;
@@ -33786,19 +32775,13 @@
         super(from, to, duration, easing, params), this.from = null != from ? from : {};
       }
       applyTransientFromAttributes() {
-        var _a, _b;
-        const target = this.target;
-        "function" != typeof target.applyTransientAttributes ? (Object.assign(null !== (_a = target.attribute) && void 0 !== _a ? _a : {}, this.from), null === (_b = target.onAttributeUpdate) || void 0 === _b || _b.call(target, {
-          type: exports.AttributeUpdateType.ANIMATE_START
-        })) : target.applyTransientAttributes(this.from, !1, {
-          type: exports.AttributeUpdateType.ANIMATE_START
-        });
+        applyAnimationTransientAttributes(this.target, this.from, exports.AttributeUpdateType.ANIMATE_START);
       }
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind(), Object.keys(this.from).forEach(key => {
           null == this.props[key] && (this.props[key] = this.target.getGraphicAttribute(key));
-        }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && (null === (_c = (_b = this.target).applyFinalAttributeToAttribute) || void 0 === _c || _c.call(_b)), !1 !== (null === (_e = null === (_d = this.params) || void 0 === _d ? void 0 : _d.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.applyTransientFromAttributes();
+        }), "appear" === (null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.animationState) && this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = null === (_b = this.params) || void 0 === _b ? void 0 : _b.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.applyTransientFromAttributes();
       }
       onFirstRun() {
         this.from = Object.assign(Object.assign({}, this.getLastProps()), this.from);
@@ -33859,8 +32842,8 @@
       bind(target) {
         this.target = target;
         const trackerTarget = this.target;
-        return "function" == typeof trackerTarget.detachAttributeFromBaseAttributes && trackerTarget.detachAttributeFromBaseAttributes(), "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
-          this.stop(), this.__skipRestoreStaticAttributeOnRemove || "function" != typeof trackerTarget.restoreStaticAttribute || trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
+        return trackerTarget.detachAttributeFromBaseAttributes(), trackerTarget.trackAnimate(this), this.onRemove(() => {
+          this.stop(), this.__skipRestoreStaticAttributeOnRemove || trackerTarget.restoreStaticAttribute(), trackerTarget.untrackAnimate(this.id);
         }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
       }
       to(props, duration = 300, easing = "linear") {
@@ -33997,8 +32980,7 @@
         if (nextTime < this._startTime) return void (this.currentTime = nextTime);
         if (nextTime >= this._startTime + this._totalDuration) {
           null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = exports.AnimateStatus.END;
-          const trackerTarget = this.target;
-          return "function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
+          return this.target.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
         }
         this.status = exports.AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
         let cycleTime = nextTime - this._startTime,
@@ -34690,9 +33672,8 @@
       }
       syncFinalAttrsFromContext(graphic) {
         var _a;
-        const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs,
-          setFinalAttributes = graphic.setFinalAttributes;
-        finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(graphic, finalAttrs);
+        const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs;
+        finalAttrs && graphic.setFinalAttributes(finalAttrs);
       }
       executeItem(params, graphic, index = 0, count = 1) {
         if (Array.isArray(params)) {
@@ -34945,8 +33926,7 @@
 
     class AnimateExtension {
       visitTrackedAnimates(cb) {
-        const target = this;
-        "function" != typeof target.forEachTrackedAnimate ? target.animates && target.animates.forEach(cb) : target.forEachTrackedAnimate(cb);
+        this.forEachTrackedAnimate(cb);
       }
       getAttributes(final = !1) {
         return final && this.finalAttribute ? this.finalAttribute : this.attribute;
@@ -34982,15 +33962,12 @@
       applyFinalAttributeToAttribute() {
         const finalAttribute = this.getFinalAttribute();
         if (!finalAttribute) return;
-        const target = this;
-        "function" != typeof target.setAttributesAndPreventAnimate ? console.warn("[AnimateExtension] applyFinalAttributeToAttribute requires target.setAttributesAndPreventAnimate() to avoid committing finalAttribute into base attributes.") : target.setAttributesAndPreventAnimate(finalAttribute, !1, {
+        this.setAttributesAndPreventAnimate(finalAttribute, !1, {
           type: exports.AttributeUpdateType.ANIMATE_BIND
         });
       }
       restoreStaticAttribute() {
-        const target = this;
-        if ("function" != typeof target._restoreAttributeFromStaticTruth) return "function" == typeof target.onStop ? (console.warn("[AnimateExtension] restoreStaticAttribute is using deprecated target.onStop(); implement _restoreAttributeFromStaticTruth() for explicit transient restore semantics."), void target.onStop()) : void console.warn("[AnimateExtension] restoreStaticAttribute requires target._restoreAttributeFromStaticTruth() or an equivalent transient restore path.");
-        target._restoreAttributeFromStaticTruth({
+        this._restoreAttributeFromStaticTruth({
           type: exports.AttributeUpdateType.ANIMATE_END
         });
       }
@@ -35663,7 +34640,7 @@
       var _a;
       const commitTarget = target,
         contextFinalAttrs = null === (_a = commitTarget.context) || void 0 === _a ? void 0 : _a.finalAttrs,
-        finalAttribute = "function" == typeof commitTarget.getFinalAttribute ? commitTarget.getFinalAttribute() : commitTarget.finalAttribute;
+        finalAttribute = commitTarget.getFinalAttribute();
       let commitAttrs = null;
       for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
@@ -35672,9 +34649,8 @@
       return commitAttrs;
     }
     function commitAnimationStaticAttrs(target, keys, animate, fallbackAttrs) {
-      var _a, _b;
       const commitAttrs = buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs);
-      return !!commitAttrs && (null === (_b = (_a = target).setFinalAttributes) || void 0 === _b || _b.call(_a, commitAttrs), target.setAttributes(commitAttrs, !1, {
+      return !!commitAttrs && (target.setFinalAttributes(commitAttrs), target.setAttributes(commitAttrs, !1, {
         type: exports.AttributeUpdateType.ANIMATE_END
       }), !0);
     }
@@ -35785,7 +34761,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const attrs = this.target.getFinalAttribute(),
           fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
@@ -35794,7 +34770,7 @@
         this.keys.forEach(key => {
           var _a, _b, _c;
           to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_c = null !== (_b = from[key]) && void 0 !== _b ? _b : fromAttrs[key]) && void 0 !== _c ? _c : 0;
-        }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+        }), this.target.applyFinalAttributeToAttribute(), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attrs = {};
@@ -35846,8 +34822,7 @@
         super.onBind(), this.propKeys = ["x", "y", "z", "alpha", "zIndex"];
       }
       onFirstRun() {
-        var _a, _b;
-        super.onFirstRun(), null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a);
+        super.onFirstRun(), this.target.applyFinalAttributeToAttribute();
       }
       onStart() {
         var _a, _b;
@@ -35856,7 +34831,7 @@
             center: center,
             r: r
           } = "function" == typeof this.params ? this.params() : this.params,
-          source = null !== (_a = this.target.finalAttribute) && void 0 !== _a ? _a : this.target.attribute,
+          source = null !== (_a = this.target.getFinalAttribute()) && void 0 !== _a ? _a : this.target.attribute,
           startX = source.x,
           startY = source.y,
           startZ = null !== (_b = source.z) && void 0 !== _b ? _b : 0,
@@ -36055,14 +35030,14 @@
     }
     class GrowAngleIn extends GrowAngleBase {
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
             to: to
           } = growAngleIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs), this.determineUpdateFunction();
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs), this.determineUpdateFunction();
       }
     }
     class GrowAngleOut extends GrowAngleBase {
@@ -36205,14 +35180,14 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
             to: to
           } = growCenterIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -36310,14 +35285,14 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
             to: to
           } = growHeightIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -36421,13 +35396,13 @@
     }
     class GrowPointsIn extends GworPointsBase {
       onBind() {
-        var _a, _b, _c;
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
           } = growPointsIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -36483,13 +35458,13 @@
       };
     class GrowPointsXIn extends GworPointsBase {
       onBind() {
-        var _a, _b, _c;
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
           } = growPointsXIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -36545,13 +35520,13 @@
       };
     class GrowPointsYIn extends GworPointsBase {
       onBind() {
-        var _a, _b, _c;
+        var _a;
         if (super.onBind(), ["area", "line", "polygon"].includes(this.target.type)) {
           const {
             from: from,
             to: to
           } = growPointsYIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -36656,14 +35631,14 @@
     }
     class GrowRadiusIn extends GrowPointsBase {
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
             to: to
           } = growRadiusIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
     }
     class GrowRadiusOut extends GrowPointsBase {
@@ -36778,14 +35753,14 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
             to: to
           } = growWidthIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -37549,36 +36524,40 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         let from, to;
         super.onBind();
         const attrs = this.target.getFinalAttribute(),
-          fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {};
-        switch (null === (_b = this.params) || void 0 === _b ? void 0 : _b.direction) {
+          fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {},
+          options = null === (_b = this.params) || void 0 === _b ? void 0 : _b.options,
+          direction = null !== (_d = null === (_c = this.params) || void 0 === _c ? void 0 : _c.direction) && void 0 !== _d ? _d : null == options ? void 0 : options.direction,
+          fromScaleX = null !== (_j = null !== (_g = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.fromScaleX) && void 0 !== _f ? _f : null == options ? void 0 : options.fromScaleX) && void 0 !== _g ? _g : null === (_h = this.params) || void 0 === _h ? void 0 : _h.fromScale) && void 0 !== _j ? _j : null == options ? void 0 : options.fromScale,
+          fromScaleY = null !== (_p = null !== (_m = null !== (_l = null === (_k = this.params) || void 0 === _k ? void 0 : _k.fromScaleY) && void 0 !== _l ? _l : null == options ? void 0 : options.fromScaleY) && void 0 !== _m ? _m : null === (_o = this.params) || void 0 === _o ? void 0 : _o.fromScale) && void 0 !== _p ? _p : null == options ? void 0 : options.fromScale;
+        switch (direction) {
           case "x":
             from = {
-              scaleX: null !== (_c = fromAttrs.scaleX) && void 0 !== _c ? _c : 0
+              scaleX: null !== (_q = null != fromScaleX ? fromScaleX : fromAttrs.scaleX) && void 0 !== _q ? _q : 0
             }, to = {
-              scaleX: null !== (_d = null == attrs ? void 0 : attrs.scaleX) && void 0 !== _d ? _d : 1
+              scaleX: null !== (_r = null == attrs ? void 0 : attrs.scaleX) && void 0 !== _r ? _r : 1
             }, this._updateFunction = this.updateX;
             break;
           case "y":
             from = {
-              scaleY: null !== (_e = fromAttrs.scaleY) && void 0 !== _e ? _e : 0
+              scaleY: null !== (_s = null != fromScaleY ? fromScaleY : fromAttrs.scaleY) && void 0 !== _s ? _s : 0
             }, to = {
-              scaleY: null !== (_f = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _f ? _f : 1
+              scaleY: null !== (_t = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _t ? _t : 1
             }, this._updateFunction = this.updateY;
             break;
           default:
             from = {
-              scaleX: null !== (_g = fromAttrs.scaleX) && void 0 !== _g ? _g : 0,
-              scaleY: null !== (_h = fromAttrs.scaleY) && void 0 !== _h ? _h : 0
+              scaleX: null !== (_u = null != fromScaleX ? fromScaleX : fromAttrs.scaleX) && void 0 !== _u ? _u : 0,
+              scaleY: null !== (_v = null != fromScaleY ? fromScaleY : fromAttrs.scaleY) && void 0 !== _v ? _v : 0
             }, to = {
-              scaleX: null !== (_j = null == attrs ? void 0 : attrs.scaleX) && void 0 !== _j ? _j : 1,
-              scaleY: null !== (_k = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _k ? _k : 1
+              scaleX: null !== (_w = null == attrs ? void 0 : attrs.scaleX) && void 0 !== _w ? _w : 1,
+              scaleY: null !== (_x = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _x ? _x : 1
             }, this._updateFunction = this.updateXY;
         }
-        null === (_m = (_l = this.target).applyFinalAttributeToAttribute) || void 0 === _m || _m.call(_l), this.props = to, this.from = from, this.to = to, !1 !== (null === (_o = this.params.controlOptions) || void 0 === _o ? void 0 : _o.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+        this.target.applyFinalAttributeToAttribute(), this.props = to, this.from = from, this.to = to, !1 !== (null === (_y = this.params.controlOptions) || void 0 === _y ? void 0 : _y.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -38145,9 +37124,7 @@
         const {
           options: options
         } = this.params;
-        diffAttrs = filterExcludedChannels(diffAttrs, null == options ? void 0 : options.excludeChannels), this.props = diffAttrs;
-        const consumeTransientFromAttrs = this.target.consumeTransientFromAttrsBeforePreventAnimate;
-        this.updateFromAttrs = "function" == typeof consumeTransientFromAttrs ? consumeTransientFromAttrs.call(this.target, diffAttrs) : null, this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]), this.clipPathSyncDisabled = !this.clipPathSyncKeys.length, this.syncParentClipPathToTarget();
+        diffAttrs = filterExcludedChannels(diffAttrs, null == options ? void 0 : options.excludeChannels), this.props = diffAttrs, this.updateFromAttrs = this.target.consumeTransientFromAttrsBeforePreventAnimate(diffAttrs), this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]), this.clipPathSyncDisabled = !this.clipPathSyncKeys.length, this.syncParentClipPathToTarget();
       }
       trySyncStartProps() {
         const updateFromAttrs = this.updateFromAttrs;
@@ -38165,7 +37142,7 @@
         this.runInterpolateUpdate(this.fromProps, this.props, easedRatio), this.syncParentClipPathToTarget(), this.onUpdate(end, easedRatio, out);
       }
       syncParentClipPathToTarget() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (this.clipPathSyncDisabled) return;
         const target = this.target,
           parent = target.parent,
@@ -38176,20 +37153,19 @@
         const clipGraphic = path[childIndex];
         if (!(null == clipGraphic ? void 0 : clipGraphic.attribute) || clipGraphic.type !== target.type || !this.isClipPathStaticTarget(clipGraphic)) return;
         const syncAttrs = this.buildClipPathTransientAttrs(clipGraphic);
-        syncAttrs && (applyAnimationFrameAttributes(clipGraphic, syncAttrs), null === (_c = clipGraphic.addUpdatePositionTag) || void 0 === _c || _c.call(clipGraphic), null === (_d = clipGraphic.addUpdateShapeAndBoundsTag) || void 0 === _d || _d.call(clipGraphic));
+        syncAttrs && (applyAnimationFrameAttributes(clipGraphic, syncAttrs), clipGraphic.addUpdatePositionTag(), clipGraphic.addUpdateShapeAndBoundsTag());
       }
       getClipPathSyncChildIndex(parent) {
-        var _a;
         if (this.clipPathSyncParent === parent && this.clipPathSyncChildIndex >= 0) return this.clipPathSyncChildIndex;
         const target = this.target;
         let childIndex = -1;
-        return null === (_a = parent.forEachChildren) || void 0 === _a || _a.call(parent, (child, index) => child === target && (childIndex = index, !0)), this.clipPathSyncParent = parent, this.clipPathSyncChildIndex = childIndex, childIndex;
+        return parent.forEachChildren((child, index) => child === target && (childIndex = index, !0)), this.clipPathSyncParent = parent, this.clipPathSyncChildIndex = childIndex, childIndex;
       }
       isClipPathStaticTarget(clipGraphic) {
         var _a, _b;
         const target = this.target,
           targetFinalAttrs = this.getTargetFinalAttrs(),
-          clipGraphicFinalAttrs = "function" == typeof clipGraphic.getFinalAttribute ? clipGraphic.getFinalAttribute() : clipGraphic.finalAttribute,
+          clipGraphicFinalAttrs = clipGraphic.getFinalAttribute(),
           clipFinalAttrs = null !== (_a = null != clipGraphicFinalAttrs ? clipGraphicFinalAttrs : clipGraphic.baseAttributes) && void 0 !== _a ? _a : clipGraphic.attribute,
           keys = null !== (_b = this.clipPathSyncKeys) && void 0 !== _b ? _b : [];
         return !!(keys.length && targetFinalAttrs && clipFinalAttrs) && keys.every(key => {
@@ -38200,7 +37176,7 @@
       getTargetFinalAttrs() {
         var _a, _b, _c;
         const target = this.target;
-        return null !== (_c = null !== (_b = null === (_a = target.context) || void 0 === _a ? void 0 : _a.finalAttrs) && void 0 !== _b ? _b : "function" == typeof target.getFinalAttribute ? target.getFinalAttribute() : target.finalAttribute) && void 0 !== _c ? _c : null;
+        return null !== (_c = null !== (_b = null === (_a = target.context) || void 0 === _a ? void 0 : _a.finalAttrs) && void 0 !== _b ? _b : target.getFinalAttribute()) && void 0 !== _c ? _c : null;
       }
       isSameClipPathValue(a, b) {
         return "number" == typeof a && "number" == typeof b ? Math.abs(a - b) < 1e-8 : a === b;
@@ -38328,13 +37304,13 @@
     }
     class MoveIn extends MoveBase {
       onBind() {
-        var _a, _b, _c;
+        var _a;
         super.onBind();
         const {
           from: from,
           to: to
         } = moveIn(this.target, this.params.options, this.params);
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class MoveOut extends MoveBase {
@@ -38387,13 +37363,13 @@
     }
     class RotateIn extends RotateBase {
       onBind() {
-        var _a, _b, _c;
+        var _a;
         super.onBind();
         const {
           from: from,
           to: to
         } = rotateIn(this.target, this.params.options);
-        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
+        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class RotateOut extends RotateBase {
@@ -39900,7 +38876,7 @@
           [key]: value
         }, this.attribute, key, context);
         if (params) return this._setAttributes(params, forceUpdateTag);
-        isPlainObject$4(this.attribute[key]) && isPlainObject$4(value) && !isFunction$1(this.attribute[key]) && !isFunction$1(value) ? merge(this.attribute[key], value) : this.attribute[key] = value, this._skipRenderAttributes.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
+        isPlainObject$3(this.attribute[key]) && isPlainObject$3(value) && !isFunction$1(this.attribute[key]) && !isFunction$1(value) ? merge(this.attribute[key], value) : this.attribute[key] = value, this._skipRenderAttributes.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }
       setAttributes(params, forceUpdateTag, context) {
         return params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this._setAttributes(params, forceUpdateTag);
@@ -39913,7 +38889,7 @@
         isNil$1(keys) && (keys = Object.keys(params));
         for (let i = 0; i < keys.length; i++) {
           const key = keys[i];
-          !isPlainObject$4(this.attribute[key]) || isFunction$1(this.attribute[key]) || isFunction$1(params[key]) ? this.attribute[key] = params[key] : merge(this.attribute[key], params[key]);
+          !isPlainObject$3(this.attribute[key]) || isFunction$1(this.attribute[key]) || isFunction$1(params[key]) ? this.attribute[key] = params[key] : merge(this.attribute[key], params[key]);
         }
       }
       bindEvents() {}
@@ -40698,7 +39674,7 @@
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
     }
 
-    var __rest$e = undefined && undefined.__rest || function (s, e) {
+    var __rest$d = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -40752,7 +39728,7 @@
         const {
             visible: shapeVisible
           } = shape,
-          shapeStyle = __rest$e(shape, ["visible"]);
+          shapeStyle = __rest$d(shape, ["visible"]);
         if (isBoolean$1(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
             maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
@@ -40853,7 +39829,7 @@
         const {
             visible: bgVisible
           } = panel,
-          backgroundStyle = __rest$e(panel, ["visible"]);
+          backgroundStyle = __rest$d(panel, ["visible"]);
         if (visible && isBoolean$1(bgVisible)) {
           const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
             visible: bgVisible && !!text,
@@ -40935,7 +39911,7 @@
       merge(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
-    var __rest$d = undefined && undefined.__rest || function (s, e) {
+    var __rest$c = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -41044,7 +40020,7 @@
             visible: bgVisible,
             square: square
           } = panel,
-          backgroundStyle = __rest$d(panel, ["visible", "square"]);
+          backgroundStyle = __rest$c(panel, ["visible", "square"]);
         if (square) {
           const maxWH = max(popTipWidth, poptipHeight);
           popTipWidth = maxWH;
@@ -43025,7 +42001,7 @@
       registerGroup(), registerPath();
     }
 
-    var __rest$c = undefined && undefined.__rest || function (s, e) {
+    var __rest$b = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -43132,7 +42108,7 @@
             style: style,
             state: state
           } = _a,
-          restLineAttrs = __rest$c(_a, ["startSymbol", "endSymbol", "style", "state"]),
+          restLineAttrs = __rest$b(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
             startSymbol: startSymbol,
             endSymbol: endSymbol,
@@ -43173,7 +42149,7 @@
             state = {},
             maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$c(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+          restAttrs = __rest$b(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -43275,7 +42251,7 @@
             text: textContent = "",
             maxWidth: maxWidth
           } = _c,
-          restAttrs = __rest$c(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
+          restAttrs = __rest$b(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
           point = this.getTickCoord(0);
         "bottom" === orient || "top" === orient ? point.x = position : point.y = position;
         let tickLength = 0;
@@ -43647,7 +42623,7 @@
       });
     }
 
-    var __rest$b = undefined && undefined.__rest || function (s, e) {
+    var __rest$a = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -43706,7 +42682,7 @@
             background: background,
             state = {}
           } = _d,
-          restAttrs = __rest$b(_d, ["space", "textStyle", "shape", "background", "state"]);
+          restAttrs = __rest$a(_d, ["space", "textStyle", "shape", "background", "state"]);
         let titlePoint = center,
           labelHeight = 0;
         (null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.visible) && !1 === this.attribute.label.inside && (labelHeight = get$1(this.attribute.label, "style.fontSize", 12) + get$1(this.attribute.label, "space", 4));
@@ -43973,7 +42949,7 @@
       for (let i = 0; i < domain.length; i++) {
         const v = domain[i],
           str = labelFormatter ? labelFormatter(v) : `${v}`;
-        if (isPlainObject$4(str)) {
+        if (isPlainObject$3(str)) {
           labelBoundsList = void 0;
           break;
         }
@@ -45265,15 +44241,6 @@
       return "left" === align ? 0 : "right" === align ? 1 : .5;
     }
 
-    var __rest$a = undefined && undefined.__rest || function (s, e) {
-      var t = {};
-      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-      if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
-        var i = 0;
-        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-      }
-      return t;
-    };
     class LabelUpdate extends AComponentAnimate {
       onBind() {
         const animator = createComponentAnimator(this.target);
@@ -45289,8 +44256,8 @@
           } = this.params,
           diff = {};
         for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
-        const rest = __rest$a(diff, ["text"]);
-        animator.animate(prevText, {
+        const rest = Object.assign({}, diff);
+        delete rest.text, animator.animate(prevText, {
           type: "to",
           to: rest,
           duration: duration,
@@ -48752,6 +47719,10 @@
       }
     }
 
+    function getSegmentLineGraphics(segment) {
+      var _a;
+      return segment ? [...(null !== (_a = segment.lines) && void 0 !== _a ? _a : []), segment.line].filter(Boolean) : [];
+    }
     function graphicFadeIn(graphic, delay, duration, easing) {
       var _a, _b, _c, _d, _e;
       if (!graphic) return;
@@ -48770,7 +47741,7 @@
       }, duration, easing);
     }
     function segmentFadeIn(segment, delay, duration, easing) {
-      segment && (graphicFadeIn(segment.startSymbol, delay, duration, easing), segment.lines.forEach(line => graphicFadeIn(line, delay, duration, easing)), graphicFadeIn(segment.line, delay, duration, easing), graphicFadeIn(segment.endSymbol, delay, duration, easing));
+      segment && (graphicFadeIn(segment.startSymbol, delay, duration, easing), getSegmentLineGraphics(segment).forEach(line => graphicFadeIn(line, delay, duration, easing)), graphicFadeIn(segment.endSymbol, delay, duration, easing));
     }
     function tagFadeIn(tag, delay, duration, easing) {
       tag && (graphicFadeIn(tag.getTextShape(), delay, duration, easing), graphicFadeIn(tag.getBgRect(), delay, duration, easing));
@@ -48789,7 +47760,7 @@
       }, duration, easing));
     }
     function segmentFadeOut(segment, delay, duration, easing) {
-      segment && (graphicFadeOut(segment.startSymbol, delay, duration, easing), segment.lines.forEach(line => graphicFadeOut(line, delay, duration, easing)), graphicFadeOut(segment.line, delay, duration, easing), graphicFadeOut(segment.endSymbol, delay, duration, easing));
+      segment && (graphicFadeOut(segment.startSymbol, delay, duration, easing), getSegmentLineGraphics(segment).forEach(line => graphicFadeOut(line, delay, duration, easing)), graphicFadeOut(segment.endSymbol, delay, duration, easing));
     }
     function tagFadeOut(tag, delay, duration, easing) {
       tag && (graphicFadeOut(tag.getTextShape(), delay, duration, easing), graphicFadeOut(tag.getBgRect(), delay, duration, easing));
@@ -48800,12 +47771,14 @@
         lineDuration = .7 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing), line.lines.forEach(line => commitUpdateAnimationTarget(line, {
+      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
+      const lines = getSegmentLineGraphics(line);
+      lines.forEach(line => commitUpdateAnimationTarget(line, {
         clipRange: 1
       }, {
         clipRange: 0
-      })), line.lines.forEach((l, index) => {
-        const stepDuration = lineDuration / line.lines.length;
+      })), lines.forEach((l, index) => {
+        const stepDuration = lineDuration / lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
         }, stepDuration, easing);
@@ -48862,12 +47835,14 @@
         decorativeDuration = .05 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing), itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, {
+      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
+      const lines = getSegmentLineGraphics(itemLine);
+      lines.forEach(line => commitUpdateAnimationTarget(line, {
         clipRange: 1
       }, {
         clipRange: 0
-      })), itemLine.lines.forEach((l, index) => {
-        const stepDuration = lineDuration / itemLine.lines.length;
+      })), lines.forEach((l, index) => {
+        const stepDuration = lineDuration / lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
         }, stepDuration, easing);
@@ -55879,48 +54854,6 @@
     };
 
     const BOOTSTRAP_STATE = Symbol.for('vrender.bootstrap.state');
-    const installBrowserEnvToAppWithParams = installBrowserEnvToApp;
-    const installNodeEnvToAppWithParams = installNodeEnvToApp;
-    const runtimeKits = VRenderKitsRuntime;
-    const miniEnvBootstraps = {
-        taro: { installEnv: runtimeKits.installTaroEnvToApp, loadEnv: runtimeKits.loadTaroEnv },
-        feishu: { installEnv: runtimeKits.installFeishuEnvToApp, loadEnv: runtimeKits.loadFeishuEnv },
-        tt: { installEnv: runtimeKits.installTTEnvToApp, loadEnv: runtimeKits.loadTTEnv },
-        wx: { installEnv: runtimeKits.installWxEnvToApp, loadEnv: runtimeKits.loadWxEnv },
-        lynx: { installEnv: runtimeKits.installLynxEnvToApp, loadEnv: runtimeKits.loadLynxEnv },
-        harmony: { installEnv: runtimeKits.installHarmonyEnvToApp, loadEnv: runtimeKits.loadHarmonyEnv }
-    };
-    const pluginRegistrations = [
-        registerFlexLayoutPlugin,
-        registerViewTransform3dPlugin,
-        registerHtmlAttributePlugin,
-        registerReactAttributePlugin,
-        registerDirectionalLight,
-        registerOrthoCamera
-    ];
-    const animationRegistrations = [registerCustomAnimate, registerAnimate];
-    const legacyGraphicRegistrations = [
-        registerArc,
-        registerArc3d,
-        registerArea,
-        registerCircle,
-        registerGlyph,
-        registerGifImage,
-        registerGroup,
-        registerImage,
-        registerLine,
-        registerPath,
-        registerPolygon,
-        registerPyramid3d,
-        registerRect,
-        registerRect3d,
-        registerRichtext,
-        registerShadowRoot,
-        registerSymbol,
-        registerText,
-        registerWrapText,
-        registerStar
-    ];
     function ensureBootstrap(target, key) {
         var _a;
         const state = (_a = target[BOOTSTRAP_STATE]) !== null && _a !== void 0 ? _a : new Set();
@@ -55931,10 +54864,6 @@
         state.add(key);
         return true;
     }
-    function registerDefaultPipeline() {
-        pluginRegistrations.forEach(register => register());
-        animationRegistrations.forEach(register => register());
-    }
     function createBootstrapEntryKey(entry, prefix) {
         var _a, _b, _c, _d;
         const type = (_a = entry === null || entry === void 0 ? void 0 : entry.type) !== null && _a !== void 0 ? _a : 'unknown';
@@ -55978,6 +54907,52 @@
             app.registry.picker.register(key, picker);
         });
     }
+
+    const installBrowserEnvToAppWithParams = installBrowserEnvToApp;
+    const installNodeEnvToAppWithParams = installNodeEnvToApp;
+    const miniEnvBootstraps = {
+        taro: { installEnv: installTaroEnvToApp, loadEnv: loadTaroEnv },
+        feishu: { installEnv: installFeishuEnvToApp, loadEnv: loadFeishuEnv },
+        tt: { installEnv: installTTEnvToApp, loadEnv: loadTTEnv },
+        wx: { installEnv: installWxEnvToApp, loadEnv: loadWxEnv },
+        lynx: { installEnv: installLynxEnvToApp, loadEnv: loadLynxEnv },
+        harmony: { installEnv: installHarmonyEnvToApp, loadEnv: loadHarmonyEnv }
+    };
+    const pluginRegistrations = [
+        registerFlexLayoutPlugin,
+        registerViewTransform3dPlugin,
+        registerHtmlAttributePlugin,
+        registerReactAttributePlugin,
+        registerDirectionalLight,
+        registerOrthoCamera
+    ];
+    const animationRegistrations = [registerCustomAnimate, registerAnimate];
+    const legacyGraphicRegistrations = [
+        registerArc,
+        registerArc3d,
+        registerArea,
+        registerCircle,
+        registerGlyph,
+        registerGifImage,
+        registerGroup,
+        registerImage,
+        registerLine,
+        registerPath,
+        registerPolygon,
+        registerPyramid3d,
+        registerRect,
+        registerRect3d,
+        registerRichtext,
+        registerShadowRoot,
+        registerSymbol,
+        registerText,
+        registerWrapText,
+        registerStar
+    ];
+    function registerDefaultPipeline() {
+        pluginRegistrations.forEach(register => register());
+        animationRegistrations.forEach(register => register());
+    }
     function bootstrapVRenderBrowserApp(app, envParams) {
         const target = app;
         if (!ensureBootstrap(target, 'browser')) {
@@ -56033,7 +55008,7 @@
         const bootstrap = miniEnvBootstraps[env];
         bootstrap.installEnv(app, envParams);
         installDefaultGraphicsToApp(app);
-        runtimeKits.installMathPickersToApp(app);
+        installMathPickersToApp(app);
         bootstrap.loadEnv();
         legacyGraphicRegistrations.forEach(register => register());
         syncLegacyRenderersToApp(app);
@@ -56079,7 +55054,6 @@
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    const { createBrowserApp } = VRenderCore;
     function createBrowserVRenderApp(options = {}) {
         const { envParams } = options, entryOptions = __rest(options, ["envParams"]);
         return bootstrapVRenderBrowserApp(createBrowserApp(entryOptions), envParams);
@@ -56115,8 +55089,8 @@
         return bootstrapVRenderNodeApp(createNodeApp(entryOptions), envParams);
     }
 
-    const SHARED_APP_REGISTRY_KEY = Symbol.for('visactor.vrender.sharedAppRegistry');
     const DEFAULT_SHARED_APP_KEY = 'default';
+    const SHARED_APP_REGISTRY_KEY = Symbol.for('visactor.vrender.sharedAppRegistry');
     function getSharedAppRegistry() {
         var _a;
         const target = globalThis;
@@ -56156,36 +55130,8 @@
         removeSharedAppRecord(env, key, record);
         record.releaseApp();
     }
-    function createAppForSharedEnv(options) {
-        const { env } = options;
-        const entryOptions = Object.assign({}, options);
-        delete entryOptions.env;
-        delete entryOptions.key;
-        if (env === 'browser') {
-            return createBrowserVRenderApp(entryOptions);
-        }
-        if (env === 'node') {
-            return createNodeVRenderApp(entryOptions);
-        }
-        if (env === 'taro') {
-            return createTaroVRenderApp(entryOptions);
-        }
-        if (env === 'feishu') {
-            return createFeishuVRenderApp(entryOptions);
-        }
-        if (env === 'tt') {
-            return createTTVRenderApp(entryOptions);
-        }
-        if (env === 'wx') {
-            return createWxVRenderApp(entryOptions);
-        }
-        if (env === 'lynx') {
-            return createLynxVRenderApp(entryOptions);
-        }
-        return createHarmonyVRenderApp(entryOptions);
-    }
-    function createSharedAppRecord(env, key, options) {
-        const app = createAppForSharedEnv(options);
+    function createSharedAppRecord(env, key, options, createApp) {
+        const app = createApp(options);
         const originalRelease = app.release.bind(app);
         const record = {
             app,
@@ -56196,45 +55142,45 @@
         app.release = () => releaseSharedAppRecord(env, key, record);
         return record;
     }
-    function createSharedAppHandle(env, key, record) {
+    function createSharedAppHandle(registryEnv, handleEnv, key, record) {
         let released = false;
         return {
             app: record.app,
-            env,
+            env: handleEnv,
             key,
             release() {
                 if (released) {
                     return;
                 }
                 released = true;
-                const envRegistry = getSharedAppEnvRegistry(env, false);
+                const envRegistry = getSharedAppEnvRegistry(registryEnv, false);
                 if ((envRegistry === null || envRegistry === void 0 ? void 0 : envRegistry.get(key)) !== record || record.released) {
                     return;
                 }
                 record.refCount -= 1;
                 if (record.refCount <= 0) {
-                    releaseSharedAppRecord(env, key, record);
+                    releaseSharedAppRecord(registryEnv, key, record);
                 }
             }
         };
     }
-    function acquireSharedVRenderApp(options) {
+    function acquireSharedApp(registryEnv, options, createApp, handleEnv = registryEnv) {
         var _a;
         const key = (_a = options.key) !== null && _a !== void 0 ? _a : DEFAULT_SHARED_APP_KEY;
-        const envRegistry = getOrCreateSharedAppEnvRegistry(options.env);
+        const envRegistry = getOrCreateSharedAppEnvRegistry(registryEnv);
         let record = envRegistry.get(key);
         if (record === null || record === void 0 ? void 0 : record.app.released) {
-            releaseSharedAppRecord(options.env, key, record);
+            releaseSharedAppRecord(registryEnv, key, record);
             record = undefined;
         }
         if (!record) {
-            record = createSharedAppRecord(options.env, key, options);
+            record = createSharedAppRecord(registryEnv, key, options, createApp);
             envRegistry.set(key, record);
         }
         record.refCount += 1;
-        return createSharedAppHandle(options.env, key, record);
+        return createSharedAppHandle(registryEnv, handleEnv, key, record);
     }
-    function getSharedVRenderApp(env, key = DEFAULT_SHARED_APP_KEY) {
+    function getSharedApp(env, key = DEFAULT_SHARED_APP_KEY) {
         var _a;
         const record = (_a = getSharedAppEnvRegistry(env, false)) === null || _a === void 0 ? void 0 : _a.get(key);
         if (!record || record.released || record.app.released) {
@@ -56242,7 +55188,7 @@
         }
         return record.app;
     }
-    function releaseSharedVRenderApp(env, key = DEFAULT_SHARED_APP_KEY) {
+    function releaseSharedApp(env, key = DEFAULT_SHARED_APP_KEY) {
         var _a;
         const record = (_a = getSharedAppEnvRegistry(env, false)) === null || _a === void 0 ? void 0 : _a.get(key);
         if (record) {
@@ -56250,6 +55196,44 @@
         }
     }
 
+    function createAppForSharedEnv(options) {
+        const { env } = options;
+        const entryOptions = Object.assign({}, options);
+        delete entryOptions.env;
+        delete entryOptions.key;
+        if (env === 'browser') {
+            return createBrowserVRenderApp(entryOptions);
+        }
+        if (env === 'node') {
+            return createNodeVRenderApp(entryOptions);
+        }
+        if (env === 'taro') {
+            return createTaroVRenderApp(entryOptions);
+        }
+        if (env === 'feishu') {
+            return createFeishuVRenderApp(entryOptions);
+        }
+        if (env === 'tt') {
+            return createTTVRenderApp(entryOptions);
+        }
+        if (env === 'wx') {
+            return createWxVRenderApp(entryOptions);
+        }
+        if (env === 'lynx') {
+            return createLynxVRenderApp(entryOptions);
+        }
+        return createHarmonyVRenderApp(entryOptions);
+    }
+    function acquireSharedVRenderApp(options) {
+        return acquireSharedApp(options.env, options, createAppForSharedEnv, options.env);
+    }
+    function getSharedVRenderApp(env, key = DEFAULT_SHARED_APP_KEY) {
+        return getSharedApp(env, key);
+    }
+    function releaseSharedVRenderApp(env, key = DEFAULT_SHARED_APP_KEY) {
+        releaseSharedApp(env, key);
+    }
+
     let browserApp;
     let nodeApp;
     function resolveLegacyApp() {
@@ -56264,7 +55248,7 @@
         return resolveLegacyApp().createStage(params);
     }
 
-    const version = "1.1.0-alpha.23";
+    const version = "1.1.0-alpha.25";
 
     exports.AComponentAnimate = AComponentAnimate;
     exports.ACustomAnimate = ACustomAnimate;
@@ -56845,11 +55829,11 @@
     exports.convertDomainToTickData = convertDomainToTickData;
     exports.cornerTangents = cornerTangents;
     exports.cornerToCenter = cornerToCenter;
-    exports.createApp = createBrowserApp$1;
+    exports.createApp = createBrowserApp;
     exports.createArc = createArc;
     exports.createArc3d = createArc3d;
     exports.createArea = createArea;
-    exports.createBrowserApp = createBrowserApp$1;
+    exports.createBrowserApp = createBrowserApp;
     exports.createBrowserVRenderApp = createBrowserVRenderApp;
     exports.createCanvasEventTransformer = createCanvasEventTransformer;
     exports.createCircle = createCircle;