modern-canvas 0.2.5 → 0.3.1

package/dist/index.mjs

@@ -3,6 +3,7 @@ import namesPlugin from 'colord/plugins/names';
 import { Path2D, CurvePath } from 'modern-path2d';
 import { getDefaultTransformStyle, getDefaultTextStyle } from 'modern-idoc';
 import { textDefaultStyle, Text } from 'modern-text';
+import { Align, Display, Direction, FlexDirection, Wrap, Justify, Overflow, PositionType, BoxSizing, loadYoga, Edge, Gutter } from 'yoga-layout/load';
 
 const PI = Math.PI;
 const PI_2 = PI * 2;
@@ -477,12 +478,12 @@ class CoreObject extends EventEmitter {
   _performUpdate() {
     if (!this._updating)
       return;
-    this._onUpdate(this._updatedProperties);
+    this._update(this._updatedProperties);
     this._updatedProperties = /* @__PURE__ */ new Map();
     this._updating = false;
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
-  _onUpdate(changed) {
+  _update(changed) {
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
   _updateProperty(key, value, oldValue, declaration) {
@@ -2198,13 +2199,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __defProp$O = Object.defineProperty;
+var __decorateClass$O = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$M(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2245,10 +2246,10 @@ class MainLoop extends CoreObject {
     }
   }
 }
-__decorateClass$M([
+__decorateClass$O([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$M([
+__decorateClass$O([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4392,13 +4393,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$L = (decorators, target, key, kind) => {
+var __defProp$N = Object.defineProperty;
+var __decorateClass$N = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$L(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4442,20 +4443,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$L([
+__decorateClass$N([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$L([
+__decorateClass$N([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$K = (decorators, target, key, kind) => {
+var __defProp$M = Object.defineProperty;
+var __decorateClass$M = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$K(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4499,20 +4500,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$K([
+__decorateClass$M([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$K([
+__decorateClass$M([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$J = Object.defineProperty;
-var __decorateClass$J = (decorators, target, key, kind) => {
+var __defProp$L = Object.defineProperty;
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$J(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4549,25 +4550,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4817,13 +4818,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$I = Object.defineProperty;
-var __decorateClass$I = (decorators, target, key, kind) => {
+var __defProp$K = Object.defineProperty;
+var __decorateClass$K = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$I(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 const style2DFilterDefault = {
@@ -5040,76 +5041,76 @@ class CanvasItemStyle extends Resource {
     return m;
   }
 }
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "backgroundColor");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "backgroundImage");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "filter");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "inherit" })
 ], CanvasItemStyle.prototype, "direction");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "boxShadow");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "maskImage");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 1 })
 ], CanvasItemStyle.prototype, "opacity");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderWidth");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderRadius");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "borderColor");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "borderStyle");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineWidth");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineOffset");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "outlineColor");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "outlineStyle");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "visibility");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "overflow");
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "auto" })
 ], CanvasItemStyle.prototype, "pointerEvents");
-const transformStyle = getDefaultTransformStyle();
-for (const key in transformStyle) {
-  defineProperty(CanvasItemStyle, key, { default: transformStyle[key] });
+const transformStyle$1 = getDefaultTransformStyle();
+for (const key in transformStyle$1) {
+  defineProperty(CanvasItemStyle, key, { default: transformStyle$1[key] });
 }
-const textStyle = getDefaultTextStyle();
-for (const key in textStyle) {
-  defineProperty(CanvasItemStyle, key, { default: textStyle[key] });
+const textStyle$1 = getDefaultTextStyle();
+for (const key in textStyle$1) {
+  defineProperty(CanvasItemStyle, key, { default: textStyle$1[key] });
 }
 
-var __defProp$H = Object.defineProperty;
-var __decorateClass$H = (decorators, target, key, kind) => {
+var __defProp$J = Object.defineProperty;
+var __decorateClass$J = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$H(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5235,32 +5236,32 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$H([
+__decorateClass$J([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$H([
+__decorateClass$J([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$H([
+__decorateClass$J([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
-var __defProp$G = Object.defineProperty;
-var __decorateClass$G = (decorators, target, key, kind) => {
+var __defProp$I = Object.defineProperty;
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$G(target, key, result);
+  if (result) __defProp$I(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5279,7 +5280,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$G([
+__decorateClass$I([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5437,13 +5438,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$F = Object.defineProperty;
-var __decorateClass$F = (decorators, target, key, kind) => {
+var __defProp$H = Object.defineProperty;
+var __decorateClass$H = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$F(target, key, result);
+  if (result) __defProp$H(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5687,10 +5688,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$F([
+__decorateClass$H([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$F([
+__decorateClass$H([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5860,18 +5861,25 @@ class CanvasContext extends Path2D {
   }
 }
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
+const tagUidMap = {};
+function getTagUid(tag) {
+  let uid = tagUidMap[tag] ?? 0;
+  uid++;
+  tagUidMap[tag] = uid;
+  return uid;
+}
 let Node = class extends CoreObject {
-  name = `${this.tag}:${String(this.instanceId)}`;
+  name = `${this.tag}:${getTagUid(this.tag)}`;
   mask;
   _readyed = false;
   constructor(properties, children = []) {
@@ -5882,7 +5890,8 @@ let Node = class extends CoreObject {
     this._onUnparented = this._onUnparented.bind(this);
     this._onReady = this._onReady.bind(this);
     this._onProcess = this._onProcess.bind(this);
-    this.setProperties(properties).append(children).on("treeEnter", this._onTreeEnter).on("treeExit", this._onTreeExit).on("parented", this._onParented).on("unparented", this._onUnparented).on("ready", this._onReady).on("process", this._onProcess);
+    this.setProperties(properties).append(children);
+    this.on("treeEnter", this._onTreeEnter).on("treeExit", this._onTreeExit).on("parented", this._onParented).on("unparented", this._onUnparented).on("ready", this._onReady).on("process", this._onProcess);
   }
   /** Name */
   getName() {
@@ -5915,12 +5924,12 @@ let Node = class extends CoreObject {
   setTree(tree) {
     const oldTree = this._tree;
     if (tree !== oldTree) {
+      if (oldTree) {
+        this.emit("treeExit", oldTree);
+      }
+      this._tree = tree;
       if (tree) {
-        this._tree = tree;
         this.emit("treeEnter", tree);
-      } else if (oldTree) {
-        this.emit("treeExit", oldTree);
-        this._tree = tree;
       }
       for (let len = this._children.length, i = 0; i < len; i++) {
         const node = this._children[i];
@@ -6069,7 +6078,7 @@ let Node = class extends CoreObject {
     if (this.mask instanceof Node) {
       if (!this.getNode("__$mask")) {
         this.mask.processMode = "disabled";
-        this.addChild(this.mask, "front");
+        this.appendChild(this.mask, "front");
       }
     } else {
       const mask = this.getNode("__$mask");
@@ -6135,42 +6144,41 @@ let Node = class extends CoreObject {
     this._parent.moveChild(sibling, this.getIndex(true) + 1);
     return this;
   }
-  append(...children) {
-    let nodes;
-    if (Array.isArray(children[0])) {
-      nodes = children[0];
+  append(...nodes) {
+    let _nodes;
+    if (Array.isArray(nodes[0])) {
+      _nodes = nodes[0];
     } else {
-      nodes = children;
+      _nodes = nodes;
     }
-    nodes.forEach((node) => {
-      this.addChild(node);
+    _nodes.forEach((node) => {
+      this.appendChild(node);
     });
-    return this;
   }
-  addChild(child, internalMode = child.internalMode) {
-    if (this.is(child) || child.hasParent()) {
-      return this;
+  appendChild(node, internalMode = node.internalMode) {
+    if (this.is(node) || node.hasParent()) {
+      return node;
     }
     switch (internalMode) {
       case "default":
       case "front": {
         const targetMode = internalMode === "default" ? "back" : "front";
-        const index = this._children.findIndex((child2) => child2.internalMode === targetMode);
+        const index = this._children.findIndex((node2) => node2.internalMode === targetMode);
         if (index > -1) {
-          this._children.splice(index, 0, child);
+          this._children.splice(index, 0, node);
         } else {
-          this._children.push(child);
+          this._children.push(node);
         }
         break;
       }
       case "back":
-        this._children.push(child);
+        this._children.push(node);
         break;
     }
-    child.internalMode = internalMode;
-    child.setParent(this);
-    this.emit("addChild", child);
-    return this;
+    node.internalMode = internalMode;
+    node.setParent(this);
+    this.emit("appendChild", node);
+    return node;
   }
   moveChild(child, toIndex, internalMode = child.internalMode) {
     if (this.is(child) || child.hasParent() && !this.is(child.parent)) {
@@ -6201,7 +6209,7 @@ let Node = class extends CoreObject {
           return false;
       }
     });
-    maxIndex = maxIndex > -1 ? minIndex + maxIndex : Math.max(0, this._children.length - 1);
+    maxIndex = maxIndex > -1 ? minIndex + maxIndex : Math.max(0, this._children.length);
     const newIndex = clamp(minIndex, toIndex > -1 ? toIndex : maxIndex, maxIndex);
     if (newIndex !== oldIndex) {
       if (oldIndex > -1) {
@@ -6216,7 +6224,7 @@ let Node = class extends CoreObject {
       if (oldIndex > -1) {
         this.emit("moveChild", child, newIndex, oldIndex);
       } else {
-        this.emit("addChild", child);
+        this.emit("appendChild", child);
       }
     }
     return this;
@@ -6228,7 +6236,7 @@ let Node = class extends CoreObject {
       child.setParent(undefined);
       this.emit("removeChild", child, index);
     }
-    return this;
+    return child;
   }
   removeChildren() {
     this.getChildren().forEach((child) => this.removeChild(child));
@@ -6288,37 +6296,37 @@ let Node = class extends CoreObject {
     const { tag, props, children } = JSON;
     const NodeClass = customNodes.get(tag) ?? Node;
     const node = new NodeClass(props);
-    children?.forEach((child) => node.addChild(this.parse(child)));
+    children?.forEach((child) => node.appendChild(this.parse(child)));
     return node;
   }
 };
-__decorateClass$E([
+__decorateClass$G([
   property()
 ], Node.prototype, "name", 2);
-__decorateClass$E([
+__decorateClass$G([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$E([
+__decorateClass$G([
   property({ default: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$E([
+__decorateClass$G([
   property({ default: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$E([
+__decorateClass$G([
   property({ default: "default" })
 ], Node.prototype, "internalMode", 2);
-Node = __decorateClass$E([
+Node = __decorateClass$G([
   customNode("Node")
 ], Node);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6377,27 +6385,27 @@ let TimelineNode = class extends Node {
     super._process(delta);
   }
 };
-__decorateClass$D([
+__decorateClass$F([
   property({ default: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$D([
+__decorateClass$F([
   property({ default: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$D([
+__decorateClass$F([
   property({ default: false })
 ], TimelineNode.prototype, "paused", 2);
-TimelineNode = __decorateClass$D([
+TimelineNode = __decorateClass$F([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6535,30 +6543,30 @@ let Viewport = class extends Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$C([
+Viewport = __decorateClass$E([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -6795,34 +6803,34 @@ let Effect = class extends TimelineNode {
     }
   }
 };
-__decorateClass$B([
+__decorateClass$D([
   protectedProperty()
 ], Effect.prototype, "material", 2);
-__decorateClass$B([
+__decorateClass$D([
   property()
 ], Effect.prototype, "effectMode", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: "" })
 ], Effect.prototype, "glsl", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: "" })
 ], Effect.prototype, "glslSrc", 2);
-Effect = __decorateClass$B([
+Effect = __decorateClass$D([
   customNode("Effect")
 ], Effect);
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
-var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
 const vertX = `attribute vec2 position;
 attribute vec2 uv;
 varying vec2 vUv[9];
@@ -6908,36 +6916,36 @@ let BlurEffect = class extends Effect {
     });
   }
 };
-__publicField$h(BlurEffect, "materialX", new Material({
+__publicField$i(BlurEffect, "materialX", new Material({
   vert: vertX,
   frag
 }));
-__publicField$h(BlurEffect, "materialY", new Material({
+__publicField$i(BlurEffect, "materialY", new Material({
   vert: vertY,
   frag
 }));
-__decorateClass$A([
+__decorateClass$C([
   property({ default: 8 })
 ], BlurEffect.prototype, "strength", 2);
-__decorateClass$A([
+__decorateClass$C([
   property({ default: 4 })
 ], BlurEffect.prototype, "quality", 2);
-BlurEffect = __decorateClass$A([
+BlurEffect = __decorateClass$C([
   customNode("BlurEffect")
 ], BlurEffect);
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
-var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
+var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
 let ColorAdjustEffect = class extends Effect {
   saturation = 1;
   contrast = 1;
@@ -6963,7 +6971,7 @@ let ColorAdjustEffect = class extends Effect {
     });
   }
 };
-__publicField$g(ColorAdjustEffect, "material", new Material({
+__publicField$h(ColorAdjustEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -6998,46 +7006,46 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$z([
+__decorateClass$B([
   property()
 ], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$z([
+ColorAdjustEffect = __decorateClass$B([
   customNode("ColorAdjustEffect")
 ], ColorAdjustEffect);
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
-var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
+var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
 let ColorFilterEffect = class extends Effect {
   _colorMatrix = new ColorMatrix();
   constructor(properties) {
@@ -7087,7 +7095,7 @@ let ColorFilterEffect = class extends Effect {
     });
   }
 };
-__publicField$f(ColorFilterEffect, "material", new Material({
+__publicField$g(ColorFilterEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7114,25 +7122,25 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$y([
+__decorateClass$A([
   property({ default: "" })
 ], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$y([
+ColorFilterEffect = __decorateClass$A([
   customNode("ColorFilterEffect")
 ], ColorFilterEffect);
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
-var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
+var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
 const MAX_COLORS$1 = 50;
 let ColorOverlayEffect = class extends Effect {
   colors = [];
@@ -7156,7 +7164,7 @@ let ColorOverlayEffect = class extends Effect {
     });
   }
 };
-__publicField$e(ColorOverlayEffect, "material", new Material({
+__publicField$f(ColorOverlayEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7203,28 +7211,28 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$x([
+__decorateClass$z([
   property()
 ], ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$x([
+__decorateClass$z([
   property()
 ], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$x([
+ColorOverlayEffect = __decorateClass$z([
   customNode("ColorOverlayEffect")
 ], ColorOverlayEffect);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
-var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
+var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
 let ColorRemoveEffect = class extends Effect {
   colors = [];
   epsilon = 0.5;
@@ -7253,7 +7261,7 @@ let ColorRemoveEffect = class extends Effect {
     });
   }
 };
-__publicField$d(ColorRemoveEffect, "material", new Material({
+__publicField$e(ColorRemoveEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7286,28 +7294,28 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$w([
+__decorateClass$y([
   property()
 ], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$w([
+__decorateClass$y([
   property()
 ], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$w([
+ColorRemoveEffect = __decorateClass$y([
   customNode("ColorRemoveEffect")
 ], ColorRemoveEffect);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
-var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
+var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
 const MAX_COLORS = 50;
 let ColorReplaceEffect = class extends Effect {
   colors = [];
@@ -7351,7 +7359,7 @@ let ColorReplaceEffect = class extends Effect {
     });
   }
 };
-__publicField$c(ColorReplaceEffect, "material", new Material({
+__publicField$d(ColorReplaceEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7391,28 +7399,28 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$v([
+__decorateClass$x([
   property()
 ], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$v([
+__decorateClass$x([
   property()
 ], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$v([
+ColorReplaceEffect = __decorateClass$x([
   customNode("ColorReplaceEffect")
 ], ColorReplaceEffect);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
-var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
+var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
 let EmbossEffect = class extends Effect {
   strength;
   constructor(strength = 5) {
@@ -7429,7 +7437,7 @@ let EmbossEffect = class extends Effect {
     });
   }
 };
-__publicField$b(EmbossEffect, "material", new Material({
+__publicField$c(EmbossEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7455,25 +7463,25 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$u([
+__decorateClass$w([
   property()
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$u([
+EmbossEffect = __decorateClass$w([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
-var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
+var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
 let GlitchEffect = class extends Effect {
   _canvas;
   _texture;
@@ -7547,7 +7555,7 @@ let GlitchEffect = class extends Effect {
     });
   }
 };
-__publicField$a(GlitchEffect, "material", new Material({
+__publicField$b(GlitchEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7652,49 +7660,49 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$t([
+GlitchEffect = __decorateClass$v([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
-var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
+var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
 let GodrayEffect = class extends Effect {
   angle = 30;
   gain = 0.5;
@@ -7719,7 +7727,7 @@ let GodrayEffect = class extends Effect {
     });
   }
 };
-__publicField$9(GodrayEffect, "material", new Material({
+__publicField$a(GodrayEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7853,40 +7861,40 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$s([
+GodrayEffect = __decorateClass$u([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
+var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
 let MaskEffect = class extends Effect {
   texture;
   constructor(properties, children = []) {
@@ -7924,7 +7932,7 @@ let MaskEffect = class extends Effect {
     }
   }
 };
-__publicField$8(MaskEffect, "material", new Material({
+__publicField$9(MaskEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7957,28 +7965,28 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$r([
+__decorateClass$t([
   protectedProperty()
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$r([
+__decorateClass$t([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$r([
+MaskEffect = __decorateClass$t([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
+var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
 let PixelateEffect = class extends Effect {
   size;
   constructor(size = 10) {
@@ -7995,7 +8003,7 @@ let PixelateEffect = class extends Effect {
     });
   }
 };
-__publicField$7(PixelateEffect, "material", new Material({
+__publicField$8(PixelateEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8032,25 +8040,25 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$q([
+__decorateClass$s([
   property()
 ], PixelateEffect.prototype, "size", 2);
-PixelateEffect = __decorateClass$q([
+PixelateEffect = __decorateClass$s([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
-var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
+var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
 let ShadowEffect = class extends Effect {
   blur = new BlurEffect();
   viewport3 = new Viewport();
@@ -8077,7 +8085,7 @@ let ShadowEffect = class extends Effect {
     });
   }
 };
-__publicField$6(ShadowEffect, "material", new Material({
+__publicField$7(ShadowEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8100,22 +8108,22 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-ShadowEffect = __decorateClass$p([
+ShadowEffect = __decorateClass$r([
   customNode("ShadowEffect")
 ], ShadowEffect);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
+var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
 let ZoomBlurEffect = class extends Effect {
   center;
   innerRadius = 20;
@@ -8134,7 +8142,7 @@ let ZoomBlurEffect = class extends Effect {
     });
   }
 };
-__publicField$5(ZoomBlurEffect, "material", new Material({
+__publicField$6(ZoomBlurEffect, "material", new Material({
   vert: `attribute vec2 position;
 attribute vec2 uv;
 varying vec2 vUv;
@@ -8218,30 +8226,30 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$o([
+ZoomBlurEffect = __decorateClass$q([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -8333,7 +8341,7 @@ let CanvasItem = class extends TimelineNode {
     if (this.style.boxShadow !== "none") {
       const node = this.getNode(nodePath);
       if (node) ; else {
-        this.addChild(new ShadowEffect(), "back");
+        this.appendChild(new ShadowEffect(), "back");
       }
     } else {
       const node = this.getNode(nodePath);
@@ -8350,7 +8358,7 @@ let CanvasItem = class extends TimelineNode {
       if (node) {
         node.src = maskImage;
       } else {
-        this.addChild(new MaskEffect({ src: maskImage }), "back");
+        this.appendChild(new MaskEffect({ src: maskImage }), "back");
       }
     } else {
       const node = this.getNode(nodePath);
@@ -8536,17 +8544,17 @@ let CanvasItem = class extends TimelineNode {
     };
   }
 };
-__decorateClass$n([
+__decorateClass$p([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$n([
+__decorateClass$p([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-CanvasItem = __decorateClass$n([
+CanvasItem = __decorateClass$p([
   customNode("CanvasItem")
 ], CanvasItem);
 
-class RenderStack extends Node {
+class RenderStack {
   currentCall;
   calls = [];
   createCall(renderable) {
@@ -8572,14 +8580,14 @@ class RenderStack extends Node {
   }
 }
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -8624,29 +8632,29 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$m([
+__decorateClass$o([
   property({ default: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$m([
+__decorateClass$o([
   property({ default: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$m([
+__decorateClass$o([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$m([
+__decorateClass$o([
   property({ default: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$m([
+Timeline = __decorateClass$o([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$l = (decorators, target, key, kind) => {
+var __defProp$n = Object.defineProperty;
+var __decorateClass$n = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$l(target, key, result);
+  if (result) __defProp$n(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -8707,21 +8715,21 @@ class SceneTree extends MainLoop {
     renderer.texture.unbind(texture);
   }
 }
-__decorateClass$l([
+__decorateClass$n([
   property({ default: false })
 ], SceneTree.prototype, "paused");
-__decorateClass$l([
+__decorateClass$n([
   property()
 ], SceneTree.prototype, "backgroundColor");
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 let Transition = class extends Effect {
@@ -8730,7 +8738,7 @@ let Transition = class extends Effect {
     this.setProperties(properties).append(children);
   }
 };
-Transition = __decorateClass$k([
+Transition = __decorateClass$m([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -8738,14 +8746,14 @@ Transition = __decorateClass$k([
   })
 ], Transition);
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -8886,18 +8894,18 @@ let Node2D = class extends CanvasItem {
     );
   }
 };
-Node2D = __decorateClass$j([
+Node2D = __decorateClass$l([
   customNode("Node2D")
 ], Node2D);
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 function proxy(options) {
@@ -8942,61 +8950,61 @@ let Graphics2D = class extends Node2D {
     return this;
   }
 };
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "lineCap", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "lineJoin", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "fillStyle", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "strokeStyle", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "lineWidth", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy()
 ], Graphics2D.prototype, "miterLimit", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "rect", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fillRect", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "strokeRect", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "roundRect", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "ellipse", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "arc", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "beginPath", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "moveTo", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "lineTo", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true })
 ], Graphics2D.prototype, "closePath", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fill", 2);
-__decorateClass$i([
+__decorateClass$k([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "stroke", 2);
-Graphics2D = __decorateClass$i([
+Graphics2D = __decorateClass$k([
   customNode("Graphics2D")
 ], Graphics2D);
 
@@ -9026,14 +9034,14 @@ class Image2DResource extends Resource {
   }
 }
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let Image2D = class extends Node2D {
@@ -9153,16 +9161,16 @@ let Image2D = class extends Node2D {
     }
   }
 };
-__decorateClass$h([
+__decorateClass$j([
   protectedProperty()
 ], Image2D.prototype, "resource", 2);
-__decorateClass$h([
+__decorateClass$j([
   property({ default: false })
 ], Image2D.prototype, "gif", 2);
-__decorateClass$h([
+__decorateClass$j([
   property({ default: "" })
 ], Image2D.prototype, "src", 2);
-Image2D = __decorateClass$h([
+Image2D = __decorateClass$j([
   customNode("Image2D")
 ], Image2D);
 
@@ -9180,14 +9188,14 @@ class TextureRect2D extends Node2D {
   }
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 let Lottie2D = class extends TextureRect2D {
@@ -9230,21 +9238,21 @@ let Lottie2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$g([
+__decorateClass$i([
   property({ default: "" })
 ], Lottie2D.prototype, "src", 2);
-Lottie2D = __decorateClass$g([
+Lottie2D = __decorateClass$i([
   customNode("Lottie2D")
 ], Lottie2D);
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 const textStyles = new Set(Object.keys(textDefaultStyle));
@@ -9345,7 +9353,7 @@ let Text2D = class extends TextureRect2D {
       result.paragraphs.forEach((p) => {
         p.fragments.forEach((f) => {
           f.characters.forEach((c) => {
-            this.addChild(
+            this.appendChild(
               new Text2D({
                 content: c.content,
                 style: {
@@ -9382,33 +9390,33 @@ let Text2D = class extends TextureRect2D {
     }
   }
 };
-__decorateClass$f([
+__decorateClass$h([
   property({ default: false })
 ], Text2D.prototype, "split", 2);
-__decorateClass$f([
+__decorateClass$h([
   property({ default: "" })
 ], Text2D.prototype, "content", 2);
-__decorateClass$f([
+__decorateClass$h([
   property()
 ], Text2D.prototype, "effects", 2);
-__decorateClass$f([
+__decorateClass$h([
   protectedProperty()
 ], Text2D.prototype, "measureDom", 2);
-__decorateClass$f([
+__decorateClass$h([
   protectedProperty()
 ], Text2D.prototype, "fonts", 2);
-Text2D = __decorateClass$f([
+Text2D = __decorateClass$h([
   customNode("Text2D")
 ], Text2D);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let Video2D = class extends TextureRect2D {
@@ -9461,21 +9469,21 @@ let Video2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$e([
+__decorateClass$g([
   property({ default: "" })
 ], Video2D.prototype, "src", 2);
-Video2D = __decorateClass$e([
+Video2D = __decorateClass$g([
   customNode("Video2D")
 ], Video2D);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -9794,19 +9802,19 @@ let Animation = class extends TimelineNode {
     });
   }
 };
-__decorateClass$d([
+__decorateClass$f([
   property({ default: "parent" })
 ], Animation.prototype, "effectMode", 2);
-__decorateClass$d([
+__decorateClass$f([
   property({ default: false })
 ], Animation.prototype, "loop", 2);
-__decorateClass$d([
+__decorateClass$f([
   property({ default: [] })
 ], Animation.prototype, "keyframes", 2);
-__decorateClass$d([
+__decorateClass$f([
   property()
 ], Animation.prototype, "easing", 2);
-Animation = __decorateClass$d([
+Animation = __decorateClass$f([
   customNode("Animation", {
     renderMode: "disabled",
     processMode: "pausable",
@@ -10689,18 +10697,18 @@ class WebAudio extends AudioPipeline {
   }
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
 let Audio = class extends TimelineNode {
   _sounds = [];
   /** PlatformAudio */
@@ -10904,8 +10912,8 @@ let Audio = class extends TimelineNode {
     }, 100);
   }
 };
-__publicField$4(Audio, "_soundPool", []);
-Audio = __decorateClass$c([
+__publicField$5(Audio, "_soundPool", []);
+Audio = __decorateClass$e([
   customNode("Audio")
 ], Audio);
 
@@ -10913,14 +10921,14 @@ class AudioSpectrum extends Node2D {
   //
 }
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let AudioWaveform = class extends Node2D {
@@ -11014,27 +11022,27 @@ let AudioWaveform = class extends Node2D {
     }
   }
 };
-__decorateClass$b([
+__decorateClass$d([
   property()
 ], AudioWaveform.prototype, "src", 2);
-__decorateClass$b([
+__decorateClass$d([
   property()
 ], AudioWaveform.prototype, "gap", 2);
-__decorateClass$b([
+__decorateClass$d([
   property()
 ], AudioWaveform.prototype, "color", 2);
-AudioWaveform = __decorateClass$b([
+AudioWaveform = __decorateClass$d([
   customNode("AudioWaveform")
 ], AudioWaveform);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let Control = class extends CanvasItem {
@@ -11094,18 +11102,18 @@ let Control = class extends CanvasItem {
     return new Rect2(left, top, width, height);
   }
 };
-Control = __decorateClass$a([
+Control = __decorateClass$c([
   customNode("Control")
 ], Control);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let Range = class extends Control {
@@ -11128,39 +11136,39 @@ let Range = class extends Control {
     }
   }
 };
-__decorateClass$9([
+__decorateClass$b([
   property({ default: false })
 ], Range.prototype, "allowGreater", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: false })
 ], Range.prototype, "allowLesser", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: 1 })
 ], Range.prototype, "page", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: 0 })
 ], Range.prototype, "minValue", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: 100 })
 ], Range.prototype, "maxValue", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: 0.01 })
 ], Range.prototype, "step", 2);
-__decorateClass$9([
+__decorateClass$b([
   property({ default: 0 })
 ], Range.prototype, "value", 2);
-Range = __decorateClass$9([
+Range = __decorateClass$b([
   customNode("Range")
 ], Range);
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let Ruler = class extends Control {
@@ -11311,45 +11319,45 @@ let Ruler = class extends Control {
     }
   }
 };
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 0 })
 ], Ruler.prototype, "offsetX", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 0 })
 ], Ruler.prototype, "offsetY", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 20 })
 ], Ruler.prototype, "thickness", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 3 })
 ], Ruler.prototype, "markHeight", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "color", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: "#f9f9fa" })
 ], Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "markColor", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 300 })
 ], Ruler.prototype, "gap", 2);
-__decorateClass$8([
+__decorateClass$a([
   property({ default: 1 })
 ], Ruler.prototype, "scale", 2);
-Ruler = __decorateClass$8([
+Ruler = __decorateClass$a([
   customNode("Ruler")
 ], Ruler);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let ScrollBar = class extends Range {
@@ -11391,21 +11399,21 @@ let ScrollBar = class extends Range {
     this.context.fill();
   }
 };
-__decorateClass$7([
+__decorateClass$9([
   property({ default: "vertical" })
 ], ScrollBar.prototype, "direction", 2);
-ScrollBar = __decorateClass$7([
+ScrollBar = __decorateClass$9([
   customNode("ScrollBar")
 ], ScrollBar);
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let XScrollBar = class extends ScrollBar {
@@ -11414,20 +11422,20 @@ let XScrollBar = class extends ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-XScrollBar = __decorateClass$6([
+XScrollBar = __decorateClass$8([
   customNode("XScrollBar", {
     direction: "horizontal"
   })
 ], XScrollBar);
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let YScrollBar = class extends ScrollBar {
@@ -11436,94 +11444,1089 @@ let YScrollBar = class extends ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-YScrollBar = __decorateClass$5([
+YScrollBar = __decorateClass$7([
   customNode("YScrollBar", {
     direction: "vertical"
   })
 ], YScrollBar);
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$6(target, key, result);
   return result;
 };
-let Scaler = class extends Node {
-  get target() {
-    if (this.parent?.style) {
-      return this.parent;
-    }
-    return undefined;
-  }
-  constructor(properties, children = []) {
+class ElementStyle extends Resource {
+  _backgroundColor = new Color();
+  constructor(properties) {
     super();
     this.setProperties(properties);
-    this.append(children);
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "value":
-      case "min":
-      case "max": {
-        this.value = clamp(this.minValue, this.value, this.maxValue);
-        this._updateScale();
+      case "backgroundColor":
+        this._backgroundColor.value = this.backgroundColor === "none" ? undefined : this.backgroundColor;
         break;
-      }
     }
   }
-  _updateScale() {
-    const target = this.target;
-    if (target) {
-      target.style.scaleX = this.value;
-      target.style.scaleY = this.value;
-      this.emit("updateScale", this.value);
-    }
+  canPointeEvents() {
+    return this.pointerEvents !== "none";
   }
-  _onWheel(e) {
-    const target = this.target;
-    if (!target)
-      return;
-    e.preventDefault();
-    const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
-    if (!isTouchPad && e.ctrlKey) {
-      e.preventDefault();
-      let distance = e.deltaY / (e.ctrlKey ? 1 : 100);
-      distance *= -0.015;
-      this.value += distance;
-    }
+  getComputedOpacity() {
+    return clamp(0, this.opacity, 1);
   }
-  _input(event, key) {
-    super._input(event, key);
-    switch (key) {
-      case "wheel":
-        this._onWheel(event);
-        break;
+  getComputedBackgroundColor() {
+    return this._backgroundColor;
+  }
+  async loadBackgroundImage() {
+    if (this.backgroundImage !== "none") {
+      return await assets.texture.load(this.backgroundImage);
     }
   }
-};
-__decorateClass$4([
-  property({ default: 1 })
-], Scaler.prototype, "value", 2);
-__decorateClass$4([
-  property({ default: 0.05 })
-], Scaler.prototype, "minValue", 2);
-__decorateClass$4([
-  property({ default: 10 })
-], Scaler.prototype, "maxValue", 2);
-Scaler = __decorateClass$4([
-  customNode("Scaler", {
-    processMode: "disabled",
-    renderMode: "disabled"
-  })
-], Scaler);
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+  getComputedTransformOrigin() {
+    const [originX, originY = originX] = this.transformOrigin.split(" ");
+    return [originX, originY].map((val) => {
+      val = val.trim();
+      switch (val) {
+        case "left":
+        case "top":
+          return 0;
+        case "center":
+          return 0.5;
+        case "right":
+        case "bottom":
+          return 1;
+        default:
+          return Number(val);
+      }
+    });
+  }
+  _defaultFilter = {
+    "brightness": 1,
+    "contrast": 1,
+    "grayscale": 0,
+    "hue-rotate": 0,
+    "invert": 0,
+    "opacity": 1,
+    "saturate": 1,
+    "sepia": 0
+  };
+  getComputedFilter() {
+    let filter = {};
+    if (this.filter === "none") {
+      return filter;
+    }
+    filter = parseCssFunctions(this.filter).reduce((filter2, { name, args }) => {
+      filter2[name] = args[0].normalizedIntValue;
+      return filter2;
+    }, filter);
+    Object.keys(this._defaultFilter).forEach((name) => {
+      filter[name] = filter[name] ?? this._defaultFilter[name];
+    });
+    return filter;
+  }
+  getComputedFilterColorMatrix() {
+    const m = new ColorMatrix();
+    const filter = this.getComputedFilter();
+    for (const name in filter) {
+      const value = filter[name];
+      switch (name) {
+        case "hue-rotate":
+          m.hueRotate(value * PI_2);
+          break;
+        case "saturate":
+          m.saturate(value);
+          break;
+        case "brightness":
+          m.brightness(value);
+          break;
+        case "contrast":
+          m.contrast(value);
+          break;
+        case "invert":
+          m.invert(value);
+          break;
+        case "sepia":
+          m.sepia(value);
+          break;
+        case "opacity":
+          m.opacity(value);
+          break;
+        case "grayscale":
+          m.grayscale(value);
+          break;
+      }
+    }
+    return m;
+  }
+}
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "backgroundColor");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "backgroundImage");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "filter");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "boxShadow");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "maskImage");
+__decorateClass$6([
+  property({ default: 1 })
+], ElementStyle.prototype, "opacity");
+__decorateClass$6([
+  property({ default: 0 })
+], ElementStyle.prototype, "borderRadius");
+__decorateClass$6([
+  property({ default: "#000000" })
+], ElementStyle.prototype, "borderColor");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "borderStyle");
+__decorateClass$6([
+  property({ default: 0 })
+], ElementStyle.prototype, "outlineWidth");
+__decorateClass$6([
+  property({ default: 0 })
+], ElementStyle.prototype, "outlineOffset");
+__decorateClass$6([
+  property({ default: "#000000" })
+], ElementStyle.prototype, "outlineColor");
+__decorateClass$6([
+  property({ default: "none" })
+], ElementStyle.prototype, "outlineStyle");
+__decorateClass$6([
+  property({ default: "visible" })
+], ElementStyle.prototype, "visibility");
+__decorateClass$6([
+  property({ default: "visible" })
+], ElementStyle.prototype, "overflow");
+__decorateClass$6([
+  property({ default: "auto" })
+], ElementStyle.prototype, "pointerEvents");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "alignContent");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "alignItems");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "alignSelf");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "borderTop");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "borderLeft");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "borderRight");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "borderBottom");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "borderWidth");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "border");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "direction");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "display");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flex");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flexBasis");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flexDirection");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flexGrow");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flexShrink");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "flexWrap");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "height");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "justifyContent");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "gap");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "marginTop");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "marginLeft");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "marginRight");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "marginBottom");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "margin");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "maxHeight");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "maxWidth");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "minHeight");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "minWidth");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "paddingTop");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "paddingLeft");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "paddingRight");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "paddingBottom");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "padding");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "top");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "bottom");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "left");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "right");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "position");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "boxSizing");
+__decorateClass$6([
+  property()
+], ElementStyle.prototype, "width");
+const transformStyle = getDefaultTransformStyle();
+for (const key in transformStyle) {
+  defineProperty(ElementStyle, key, { default: transformStyle[key] });
+}
+const textStyle = getDefaultTextStyle();
+for (const key in textStyle) {
+  defineProperty(ElementStyle, key, { default: textStyle[key] });
+}
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
+const alignMap = {
+  "auto": Align.Auto,
+  "flex-start": Align.FlexStart,
+  "center": Align.Center,
+  "flex-end": Align.FlexEnd,
+  "stretch": Align.Stretch,
+  "baseline": Align.Baseline,
+  "space-between": Align.SpaceBetween,
+  "space-around": Align.SpaceAround,
+  "space-evenly": Align.SpaceEvenly
+};
+const displayMap = {
+  none: Display.None,
+  flex: Display.Flex,
+  contents: Display.Contents
+};
+const directionMap = {
+  inherit: Direction.Inherit,
+  ltr: Direction.LTR,
+  rtl: Direction.RTL
+};
+const flexDirectionMap = {
+  "column": FlexDirection.Column,
+  "column-reverse": FlexDirection.ColumnReverse,
+  "row": FlexDirection.Row,
+  "row-reverse": FlexDirection.RowReverse
+};
+const flexWrapMap = {
+  "no-wrap": Wrap.NoWrap,
+  "wrap": Wrap.Wrap,
+  "Wrap-reverse": Wrap.WrapReverse
+};
+const justifyMap = {
+  "flex-start": Justify.FlexStart,
+  "center": Justify.Center,
+  "flex-end": Justify.FlexEnd,
+  "space-between": Justify.SpaceBetween,
+  "space-around": Justify.SpaceAround,
+  "space-evenly": Justify.SpaceEvenly
+};
+const overflowMap = {
+  visible: Overflow.Visible,
+  hidden: Overflow.Hidden,
+  scroll: Overflow.Scroll
+};
+const positionTypeMap = {
+  static: PositionType.Static,
+  relative: PositionType.Relative,
+  absolute: PositionType.Absolute
+};
+const boxSizingMap = {
+  "border-box": BoxSizing.BorderBox,
+  "content-box": BoxSizing.ContentBox
+};
+let Element = class extends Node {
+  static async loadLayoutEngine() {
+    this.layoutEngine = await loadYoga();
+  }
+  get style() {
+    return this._style;
+  }
+  set style(style) {
+    const cb = (...args) => {
+      this.emit("updateStyleProperty", ...args);
+      this._updateStyleProperty(args[0], args[1], args[2], args[3]);
+    };
+    style.on("updateProperty", cb);
+    this._style?.off("updateProperty", cb);
+    this._style = style;
+  }
+  _layout = Element.layoutEngine.Node.create();
+  transform = new Transform2D();
+  _parentTransformDirtyId;
+  opacity = 1;
+  visible = true;
+  _parentOpacity;
+  _parentVisible;
+  _modulate = new Color(4294967295);
+  _backgroundImage;
+  context = new CanvasContext();
+  _resetContext = true;
+  _redrawing = false;
+  _reflowing = false;
+  _repainting = false;
+  _originalBatchables = [];
+  _layoutedBatchables = [];
+  _batchables = [];
+  constructor(properties, children = []) {
+    super();
+    this._updateStyleProperty = this._updateStyleProperty.bind(this);
+    this.style = new ElementStyle();
+    this.setProperties(properties).append(children);
+  }
+  setProperties(properties) {
+    if (properties) {
+      const { style, ...restProperties } = properties;
+      style && this.style.setProperties(style);
+      super.setProperties(restProperties);
+    }
+    return this;
+  }
+  _parented(parent) {
+    super._parented(parent);
+    if (parent._layout && this._layout) {
+      parent._layout.insertChild(
+        this._layout,
+        parent._layout.getChildCount()
+      );
+    }
+  }
+  _unparented(oldParent) {
+    super._unparented(oldParent);
+    if (oldParent._layout && this._layout) {
+      oldParent._layout.removeChild(this._layout);
+    }
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "modulate":
+        this._modulate.value = value;
+        this.requestRepaint();
+        break;
+      case "blendMode":
+        return this.requestRepaint();
+    }
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    switch (key) {
+      /** layout */
+      case "alignContent":
+        this._layout.setAlignContent(alignMap[this.style.alignContent]);
+        break;
+      case "alignItems":
+        this._layout.setAlignItems(alignMap[this.style.alignItems]);
+        break;
+      case "alignSelf":
+        this._layout.setAlignSelf(alignMap[this.style.alignSelf]);
+        break;
+      case "aspectRatio":
+        this._layout.setAspectRatio(value);
+        break;
+      case "borderTop":
+        this._layout.setBorder(Edge.Top, this.style.borderWidth);
+        break;
+      case "borderBottom":
+        this._layout.setBorder(Edge.Bottom, this.style.borderWidth);
+        break;
+      case "borderLeft":
+        this._layout.setBorder(Edge.Left, this.style.borderWidth);
+        break;
+      case "borderRight":
+        this._layout.setBorder(Edge.Right, this.style.borderWidth);
+        break;
+      case "border":
+        this._layout.setBorder(Edge.All, this.style.borderWidth);
+        break;
+      case "direction":
+        this._layout.setDirection(directionMap[this.style.direction]);
+        break;
+      case "display":
+        this._layout.setDisplay(displayMap[this.style.display]);
+        break;
+      case "flex":
+        this._layout.setFlex(this.style.flex);
+        break;
+      case "flexBasis":
+        this._layout.setFlexBasis(this.style.flexBasis);
+        break;
+      case "flexDirection":
+        this._layout.setFlexDirection(flexDirectionMap[this.style.flexDirection]);
+        break;
+      case "flexGrow":
+        this._layout.setFlexGrow(this.style.flexGrow);
+        break;
+      case "flexShrink":
+        this._layout.setFlexShrink(this.style.flexShrink);
+        break;
+      case "flexWrap":
+        this._layout.setFlexWrap(flexWrapMap[this.style.flexWrap]);
+        break;
+      case "height":
+        this._layout.setHeight(this.style.height);
+        break;
+      case "justifyContent":
+        this._layout.setJustifyContent(justifyMap[this.style.justifyContent]);
+        break;
+      case "gap":
+        this._layout.setGap(Gutter.All, this.style.gap);
+        break;
+      case "marginTop":
+        this._layout.setMargin(Edge.Top, this.style.marginTop);
+        break;
+      case "marginBottom":
+        this._layout.setMargin(Edge.Top, this.style.marginBottom);
+        break;
+      case "marginLeft":
+        this._layout.setMargin(Edge.Left, this.style.marginLeft);
+        break;
+      case "marginRight":
+        this._layout.setMargin(Edge.Top, this.style.marginRight);
+        break;
+      case "margin":
+        this._layout.setMargin(Edge.All, this.style.margin);
+        break;
+      case "maxHeight":
+        this._layout.setMaxHeight(this.style.maxHeight);
+        break;
+      case "maxWidth":
+        this._layout.setMaxWidth(this.style.maxWidth);
+        break;
+      //   setDirtiedFunc(dirtiedFunc: DirtiedFunction | null): void;
+      //   setMeasureFunc(measureFunc: MeasureFunction | null): void;
+      case "minHeight":
+        this._layout.setMinHeight(this.style.minHeight);
+        break;
+      case "minWidth":
+        this._layout.setMinWidth(this.style.minWidth);
+        break;
+      case "overflow":
+        this._layout.setOverflow(overflowMap[this.style.overflow]);
+        break;
+      case "paddingTop":
+        this._layout.setPadding(Edge.Top, this.style.paddingTop);
+        break;
+      case "paddingBottom":
+        this._layout.setPadding(Edge.Bottom, this.style.paddingBottom);
+        break;
+      case "paddingLeft":
+        this._layout.setPadding(Edge.Left, this.style.paddingLeft);
+        break;
+      case "paddingRight":
+        this._layout.setPadding(Edge.Right, this.style.paddingRight);
+        break;
+      case "padding":
+        this._layout.setPadding(Edge.All, this.style.padding);
+        break;
+      case "top":
+        this._layout.setPosition(Edge.Top, this.style.top);
+        break;
+      case "bottom":
+        this._layout.setPosition(Edge.Bottom, this.style.bottom);
+        break;
+      case "left":
+        this._layout.setPosition(Edge.Left, this.style.left);
+        break;
+      case "right":
+        this._layout.setPosition(Edge.Right, this.style.right);
+        break;
+      case "position":
+        this._layout.setPositionType(positionTypeMap[this.style.position]);
+        break;
+      case "boxSizing":
+        this._layout.setBoxSizing(boxSizingMap[this.style.boxSizing]);
+        break;
+      case "width":
+        this._layout.setWidth(this.style.width);
+        break;
+      case "scaleX":
+      case "scaleY":
+      case "rotate":
+      case "transform":
+      case "transformOrigin":
+        this._updateTransform();
+        break;
+      /** draw */
+      case "backgroundColor":
+        this._updateBackgroundColor();
+        break;
+      case "backgroundImage":
+        this._updateBackgroundImage();
+        break;
+      case "opacity":
+        this._updateOpacity();
+        break;
+      case "visibility":
+        this._updateVisible();
+        break;
+      case "filter":
+        this.requestRepaint();
+        break;
+      case "boxShadow":
+        this._updateBoxShadow();
+        break;
+      case "maskImage":
+        this._updateMaskImage();
+        break;
+      case "borderRadius":
+        this.requestRedraw();
+        break;
+    }
+  }
+  _updateBoxShadow() {
+    const nodePath = "__$style.shadow";
+    if (this.style.boxShadow !== "none") {
+      const node = this.getNode(nodePath);
+      if (node) ; else {
+        this.appendChild(new ShadowEffect(), "back");
+      }
+    } else {
+      const node = this.getNode(nodePath);
+      if (node) {
+        this.removeChild(node);
+      }
+    }
+  }
+  _updateMaskImage() {
+    const nodePath = "__$style.maskImage";
+    const maskImage = this.style.maskImage;
+    if (maskImage && maskImage !== "none") {
+      const node = this.getNode(nodePath);
+      if (node) {
+        node.src = maskImage;
+      } else {
+        this.appendChild(new MaskEffect({ src: maskImage }), "back");
+      }
+    } else {
+      const node = this.getNode(nodePath);
+      if (node) {
+        this.removeChild(node);
+      }
+    }
+  }
+  _updateBackgroundColor() {
+    const backgroundColor = this.style.getComputedBackgroundColor();
+    if (this._originalBatchables.length) {
+      this.requestRepaint();
+    } else if (backgroundColor.a > 0) {
+      this.requestRedraw();
+    }
+  }
+  async _updateBackgroundImage() {
+    this._backgroundImage = await this.style.loadBackgroundImage();
+    this.requestRedraw();
+  }
+  _updateOpacity() {
+    const opacity = this.style.getComputedOpacity() * (this.getParent()?.opacity ?? 1);
+    if (this.opacity !== opacity) {
+      this.opacity = opacity;
+      this.requestRepaint();
+    }
+  }
+  _updateVisible() {
+    this.visible = this.style.visibility === "visible" && (this.getParent()?.visible ?? true);
+  }
+  _updateTransform() {
+    this.calculateLayout(undefined, undefined, Direction.LTR);
+    const layout = this._layout.getComputedLayout();
+    const { left, top, width, height } = layout;
+    const {
+      scaleX,
+      scaleY,
+      rotate
+    } = this.style;
+    const t3d = new Transform2D(false);
+    const t2d = new Transform2D(false).scale(scaleX, scaleY).translate(left, top).rotate(rotate * DEG_TO_RAD);
+    const _t3d = new Transform2D();
+    parseCssFunctions(
+      !this.style.transform || this.style.transform === "none" ? "" : this.style.transform,
+      { width, height }
+    ).forEach(({ name, args }) => {
+      const values = args.map((arg) => arg.normalizedIntValue);
+      _t3d.identity();
+      switch (name) {
+        case "translate":
+          _t3d.translate(values[0] * width, (values[1] ?? values[0]) * height);
+          break;
+        case "translateX":
+          _t3d.translateX(values[0] * width);
+          break;
+        case "translateY":
+          _t3d.translateY(values[0] * height);
+          break;
+        case "translateZ":
+          _t3d.translateZ(values[0]);
+          break;
+        case "translate3d":
+          _t3d.translate3d(
+            values[0] * width,
+            (values[1] ?? values[0]) * height,
+            values[2] ?? values[1] ?? values[0]
+          );
+          break;
+        case "scale":
+          _t3d.scale(values[0], values[1] ?? values[0]);
+          break;
+        case "scaleX":
+          _t3d.scaleX(values[0]);
+          break;
+        case "scaleY":
+          _t3d.scaleY(values[0]);
+          break;
+        case "scale3d":
+          _t3d.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
+          break;
+        case "rotate":
+          _t3d.rotate(values[0] * PI_2);
+          break;
+        case "rotateX":
+          _t3d.rotateX(values[0] * PI_2);
+          break;
+        case "rotateY":
+          _t3d.rotateY(values[0] * PI_2);
+          break;
+        case "rotateZ":
+          _t3d.rotateZ(values[0] * PI_2);
+          break;
+        case "rotate3d":
+          _t3d.rotate3d(
+            values[0] * PI_2,
+            (values[1] ?? values[0]) * PI_2,
+            (values[2] ?? values[1] ?? values[0]) * PI_2,
+            (values[3] ?? values[2] ?? values[1] ?? values[0]) * PI_2
+          );
+          break;
+        case "skew":
+          _t3d.skew(values[0], values[0] ?? values[1]);
+          break;
+        case "skewX":
+          _t3d.skewX(values[0]);
+          break;
+        case "skewY":
+          _t3d.skewY(values[0]);
+          break;
+        case "matrix":
+          _t3d.set(values);
+          break;
+      }
+      t3d.multiply(_t3d);
+    });
+    t2d.update();
+    t3d.update();
+    const t2dArr = t2d.toArray();
+    const t3dArr = t3d.toArray();
+    const t3dT2dArr = [
+      t3dArr[0] * t2dArr[0] + t3dArr[3] * t2dArr[1],
+      t3dArr[1] * t2dArr[0] + t3dArr[4] * t2dArr[1],
+      t3dArr[2] * t2dArr[0] + t3dArr[5] * t2dArr[1] + t2dArr[2],
+      t3dArr[0] * t2dArr[3] + t3dArr[3] * t2dArr[4],
+      t3dArr[1] * t2dArr[3] + t3dArr[4] * t2dArr[4],
+      t3dArr[2] * t2dArr[3] + t3dArr[5] * t2dArr[4] + t2dArr[5],
+      0,
+      0,
+      1
+    ];
+    const [originX, originY] = this.style.getComputedTransformOrigin();
+    const offsetX = originX * width;
+    const offsetY = originY * height;
+    t3dT2dArr[2] += t3dT2dArr[0] * -offsetX + t3dT2dArr[1] * -offsetY + offsetX;
+    t3dT2dArr[5] += t3dT2dArr[3] * -offsetX + t3dT2dArr[4] * -offsetY + offsetY;
+    const parent = this.getParent();
+    const parentTransform = parent?.transform;
+    this._parentTransformDirtyId = parentTransform?.dirtyId;
+    let transform;
+    if (parentTransform) {
+      const pt = parentTransform.toArray();
+      transform = [
+        t3dT2dArr[0] * pt[0] + t3dT2dArr[3] * pt[1],
+        t3dT2dArr[1] * pt[0] + t3dT2dArr[4] * pt[1],
+        t3dT2dArr[2] * pt[0] + t3dT2dArr[5] * pt[1] + pt[2],
+        t3dT2dArr[0] * pt[3] + t3dT2dArr[3] * pt[4],
+        t3dT2dArr[1] * pt[3] + t3dT2dArr[4] * pt[4],
+        t3dT2dArr[2] * pt[3] + t3dT2dArr[5] * pt[4] + pt[5],
+        0,
+        0,
+        1
+      ];
+    } else {
+      transform = t3dT2dArr;
+    }
+    this.transform.set(transform);
+    this._updateOverflow();
+    this.requestRedraw();
+  }
+  getRect() {
+    const [a, c, tx, b, d, ty] = this.transform.toArray();
+    const width = this._layout.getComputedWidth() ?? 0;
+    const height = this._layout.getComputedHeight() ?? 0;
+    return new Rect2(
+      tx,
+      ty,
+      a * width + c * height,
+      b * width + d * height
+    );
+  }
+  _updateOverflow() {
+    if (this.style.overflow === "hidden") {
+      const rect = this.getRect();
+      this.mask = {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      };
+    } else {
+      this.mask = undefined;
+    }
+  }
+  show() {
+    this.style.visibility = "visible";
+  }
+  hide() {
+    this.style.visibility = "hidden";
+  }
+  isVisibleInTree() {
+    return this.opacity > 0 && this.visible;
+  }
+  canRender() {
+    return super.canRender() && this.isVisibleInTree();
+  }
+  requestRedraw() {
+    this._redrawing = true;
+  }
+  requestReflow() {
+    this._reflowing = true;
+  }
+  requestRepaint() {
+    this._repainting = true;
+  }
+  _process(delta) {
+    const parent = this.getParent();
+    if (this._parentVisible !== parent?.visible) {
+      this._parentVisible = parent?.visible;
+      this._updateVisible();
+    }
+    if (this._parentOpacity !== parent?.opacity) {
+      this._parentOpacity = parent?.opacity;
+      this._updateOpacity();
+    }
+    if (this._layout.hasNewLayout() || parent?.transform?.dirtyId !== this._parentTransformDirtyId) {
+      this._layout.markLayoutSeen();
+      this._updateTransform();
+    }
+    super._process(delta);
+  }
+  _transformVertices(vertices) {
+    const [a, c, tx, b, d, ty] = this.transform.toArray();
+    const newVertices = vertices.slice();
+    for (let len = vertices.length, i = 0; i < len; i += 2) {
+      const x = vertices[i];
+      const y = vertices[i + 1];
+      newVertices[i] = a * x + c * y + tx;
+      newVertices[i + 1] = b * x + d * y + ty;
+    }
+    return newVertices;
+  }
+  _draw() {
+    this._drawBackground();
+    this._drawContent();
+    this._drawBorder();
+    this._drawOutline();
+  }
+  _drawBackground() {
+    const texture = this._backgroundImage;
+    if (texture?.valid) {
+      this.context.fillStyle = texture;
+      this.context.textureTransform = new Transform2D().scale(
+        this._layout.getComputedWidth() / texture.width,
+        this._layout.getComputedHeight() / texture.height
+      );
+      this._fillBoundingRect();
+    }
+  }
+  _drawContent() {
+    this._fillBoundingRect();
+  }
+  _drawBorder() {
+    if (this.style.borderWidth && this.style.borderStyle !== "none") {
+      this.context.lineWidth = this.style.borderWidth;
+      this.context.strokeStyle = this.style.borderColor;
+      this._strokeBoundingRect();
+    }
+  }
+  _drawOutline() {
+    if (this.style.outlineWidth && this.style.outlineColor !== "none") {
+      this.context.lineWidth = this.style.outlineWidth;
+      this.context.strokeStyle = this.style.outlineColor;
+      this._strokeBoundingRect();
+    }
+  }
+  _drawBoundingRect() {
+    const { borderRadius } = this.style;
+    const width = this._layout.getComputedWidth();
+    const height = this._layout.getComputedHeight();
+    if (width && height) {
+      if (borderRadius) {
+        this.context.roundRect(0, 0, width, height, borderRadius);
+      } else {
+        this.context.rect(0, 0, width, height);
+      }
+    }
+  }
+  _fillBoundingRect() {
+    this._drawBoundingRect();
+    this.context.fill();
+  }
+  _strokeBoundingRect() {
+    this._drawBoundingRect();
+    this.context.stroke();
+  }
+  _relayout(batchables) {
+    return this._reflow(batchables);
+  }
+  _reflow(batchables) {
+    return this._repaint(
+      batchables.map((batchable) => {
+        return {
+          ...batchable,
+          vertices: this._transformVertices(batchable.vertices)
+        };
+      })
+    );
+  }
+  _repaint(batchables) {
+    const colorMatrix = this.style.getComputedFilterColorMatrix();
+    return batchables.map((batchable) => {
+      return {
+        ...batchable,
+        backgroundColor: this.style.getComputedBackgroundColor().abgr,
+        modulate: this._modulate.toArgb(this.opacity, true),
+        colorMatrix: colorMatrix.toMatrix4().toArray(true),
+        colorMatrixOffset: colorMatrix.toVector4().toArray(),
+        blendMode: this.blendMode
+      };
+    });
+  }
+  calculateLayout(width, height, direction) {
+    const parent = this.getParent();
+    if (parent?.calculateLayout) {
+      parent.calculateLayout(width, height, direction);
+    } else {
+      this._layout.calculateLayout(width, height, direction);
+    }
+  }
+  _render(renderer) {
+    let batchables;
+    if (this._redrawing) {
+      this.emit("draw");
+      this._draw();
+      this._originalBatchables = this.context.toBatchables();
+      this._layoutedBatchables = this._relayout(this._originalBatchables);
+      batchables = this._layoutedBatchables;
+      if (this._resetContext) {
+        this.context.reset();
+      }
+    } else if (this._reflowing) {
+      this._layoutedBatchables = this._reflow(this._originalBatchables);
+      batchables = this._layoutedBatchables;
+    } else if (this._repainting) {
+      batchables = this._repaint(this._layoutedBatchables);
+    }
+    if (batchables) {
+      this._batchables = batchables;
+      this._redrawing = false;
+      this._reflowing = false;
+      this._repainting = false;
+    }
+    this._batchables.forEach((batchable) => {
+      batchable.texture?.upload(renderer);
+      renderer.batch2D.render({
+        ...batchable,
+        texture: batchable.texture?._glTexture(renderer)
+      });
+    });
+    super._render(renderer);
+  }
+  toJSON() {
+    const json = super.toJSON();
+    return {
+      ...json,
+      props: {
+        style: this.style.toJSON(),
+        ...json.props
+      }
+    };
+  }
+};
+__publicField$4(Element, "layoutEngine");
+__decorateClass$5([
+  property()
+], Element.prototype, "modulate", 2);
+__decorateClass$5([
+  property()
+], Element.prototype, "blendMode", 2);
+Element = __decorateClass$5([
+  customNode("Element")
+], Element);
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+let Scaler = class extends Node {
+  get target() {
+    if (this.parent?.style) {
+      return this.parent;
+    }
+    return undefined;
+  }
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties);
+    this.append(children);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "value":
+      case "min":
+      case "max": {
+        this.value = clamp(this.minValue, this.value, this.maxValue);
+        this._updateScale();
+        break;
+      }
+    }
+  }
+  _updateScale() {
+    const target = this.target;
+    if (target) {
+      target.style.scaleX = this.value;
+      target.style.scaleY = this.value;
+      this.emit("updateScale", this.value);
+    }
+  }
+  _onWheel(e) {
+    const target = this.target;
+    if (!target)
+      return;
+    e.preventDefault();
+    const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
+    if (!isTouchPad && e.ctrlKey) {
+      e.preventDefault();
+      let distance = e.deltaY / (e.ctrlKey ? 1 : 100);
+      distance *= -0.015;
+      this.value += distance;
+    }
+  }
+  _input(event, key) {
+    super._input(event, key);
+    switch (key) {
+      case "wheel":
+        this._onWheel(event);
+        break;
+    }
+  }
+};
+__decorateClass$4([
+  property({ default: 1 })
+], Scaler.prototype, "value", 2);
+__decorateClass$4([
+  property({ default: 0.05 })
+], Scaler.prototype, "minValue", 2);
+__decorateClass$4([
+  property({ default: 10 })
+], Scaler.prototype, "maxValue", 2);
+Scaler = __decorateClass$4([
+  customNode("Scaler", {
+    processMode: "disabled",
+    renderMode: "disabled"
+  })
+], Scaler);
+
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$3 = (decorators, target, key, kind) => {
   var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$3(target, key) : target;
@@ -12214,8 +13217,7 @@ class Assets {
 }
 const assets = new Assets().use(new FontLoader()).use(new GifLoader()).use(new JsonLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
 
-class CanvasEditor extends Control {
-  name = "CanvasEditor";
+class CanvasItemEditor extends Control {
   hover = new Node2D({
     name: "hover",
     internalMode: "back",
@@ -12248,22 +13250,7 @@ class CanvasEditor extends Control {
     internalMode: "back"
   }).on("updateScale", (scale) => {
     this.ruler.scale = scale;
-    const scrollHeight = this.drawboard.style.height * scale;
-    const scrollWidth = this.drawboard.style.width * scale;
-    if (scrollHeight > this.style.height) {
-      this.yScrollBar.style.visibility = "visible";
-      this.yScrollBar.maxValue = scrollHeight;
-      this.yScrollBar.page = this.style.height;
-    } else {
-      this.yScrollBar.style.visibility = "hidden";
-    }
-    if (scrollWidth > this.style.width) {
-      this.xScrollBar.style.visibility = "visible";
-      this.xScrollBar.maxValue = scrollWidth;
-      this.xScrollBar.page = this.style.width;
-    } else {
-      this.xScrollBar.style.visibility = "hidden";
-    }
+    this._updateScrollbars();
   });
   xScrollBar = new XScrollBar({
     internalMode: "back",
@@ -12287,20 +13274,20 @@ class CanvasEditor extends Control {
       pointerEvents: "none",
       boxShadow: "2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
     }
-  }).append(
+  }, [
     this.scaler
-  );
+  ]);
   ruler = new Ruler({
     name: "ruler",
     offsetX: 100,
     offsetY: 100
-  }).append(
+  }, [
     this.drawboard,
     this.hover,
     this.selectionRect,
     this.xScrollBar,
     this.yScrollBar
-  );
+  ]);
   _pointerStart;
   _pointerOffset;
   selected;
@@ -12386,6 +13373,25 @@ class CanvasEditor extends Control {
       this.hover.style.visibility = "hidden";
     }
   }
+  _updateScrollbars() {
+    const scale = this.ruler.scale;
+    const scrollHeight = this.drawboard.style.height * scale;
+    const scrollWidth = this.drawboard.style.width * scale;
+    if (scrollHeight > this.style.height) {
+      this.yScrollBar.style.visibility = "visible";
+      this.yScrollBar.maxValue = scrollHeight;
+      this.yScrollBar.page = this.style.height;
+    } else {
+      this.yScrollBar.style.visibility = "hidden";
+    }
+    if (scrollWidth > this.style.width) {
+      this.xScrollBar.style.visibility = "visible";
+      this.xScrollBar.maxValue = scrollWidth;
+      this.xScrollBar.page = this.style.width;
+    } else {
+      this.xScrollBar.style.visibility = "hidden";
+    }
+  }
 }
 
 const defaultOptions = {
@@ -12579,9 +13585,9 @@ async function performRender(options) {
   engine.resize(width, height);
   (Array.isArray(data) ? data : [data]).forEach((v) => {
     if (v instanceof Node) {
-      root.addChild(v);
+      root.appendChild(v);
     } else {
-      root.addChild(Node.parse(v));
+      root.appendChild(Node.parse(v));
     }
   });
   await engine.waitUntilLoad();
@@ -12594,4 +13600,4 @@ async function render(options) {
   });
 }
 
-export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasEditor, CanvasItem, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasItem, CanvasItemEditor, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Element, ElementStyle, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };