modern-canvas 0.9.5 → 0.9.6

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const modernIdoc = require('modern-idoc');
+const modernFont = require('modern-font');
 const colord = require('colord');
 const namesPlugin = require('colord/plugins/names');
 const modernPath2d = require('modern-path2d');
@@ -871,6 +872,10 @@ class Input extends modernIdoc.Observable {
       this.setCursor(this.event.cursor);
     }
   };
+  destroy() {
+    this.removeEventListeners();
+    super.destroy();
+  }
 }
 
 let IID = 0;
@@ -2092,13 +2097,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$Q = Object.defineProperty;
-var __decorateClass$Z = (decorators, target, key, kind) => {
+var __defProp$T = Object.defineProperty;
+var __decorateClass$$ = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$Q(target, key, result);
+  if (result) __defProp$T(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2111,9 +2116,10 @@ class MainLoop extends CoreObject {
   get spf() {
     return this.fps ? Math.floor(1e3 / this.fps) : 0;
   }
-  constructor() {
+  constructor(properties) {
     super();
-    this._onNextTick = this._onNextTick.bind(this);
+    this._onTicker = this._onTicker.bind(this);
+    this.setProperties(properties);
   }
   start(process) {
     if (!this._starting) {
@@ -2123,16 +2129,16 @@ class MainLoop extends CoreObject {
       }
       this._startedProcess = process;
       this.on("process", process);
-      Ticker.on(this._onNextTick, { sort: 0 });
+      Ticker.on(this._onTicker, { sort: 0 });
     }
   }
   stop() {
     if (this._starting) {
       this._starting = false;
-      Ticker.off(this._onNextTick, { sort: 0 });
+      Ticker.off(this._onTicker, { sort: 0 });
     }
   }
-  _onNextTick() {
+  _onTicker() {
     const elapsed = Ticker.elapsed * this.speed;
     const time = this._nextDeltaTime -= elapsed;
     if (time <= 0) {
@@ -2141,22 +2147,40 @@ class MainLoop extends CoreObject {
     }
   }
   destroy() {
-    super.destroy();
     this.stop();
+    super.destroy();
   }
 }
-__decorateClass$Z([
+__decorateClass$$([
   modernIdoc.property({ fallback: 60 })
 ], MainLoop.prototype, "fps");
-__decorateClass$Z([
+__decorateClass$$([
   modernIdoc.property({ fallback: 1 })
 ], MainLoop.prototype, "speed");
 
-class Renderer {
-  view;
-  pixelRatio = DEVICE_PIXEL_RATIO;
+var __defProp$S = Object.defineProperty;
+var __decorateClass$_ = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$S(target, key, result);
+  return result;
+};
+class Renderer extends modernIdoc.Reactivable {
   screen = { x: 0, y: 0, width: 0, height: 0 };
   related = new RawWeakMap();
+  _updateProperty(key, newValue, oldValue) {
+    super._updateProperty(key, newValue, oldValue);
+    switch (key) {
+      case "view":
+      case "pixelRatio":
+        if (this.view) {
+          this.view.dataset.pixelRatio = String(this.pixelRatio);
+        }
+        break;
+    }
+  }
   getRelated(source, createFn) {
     let related = this.related.get(source);
     if (related)
@@ -2180,7 +2204,16 @@ class Renderer {
       this.view.style.height = `${height}px`;
     }
   }
+  destroy() {
+    super.destroy();
+  }
 }
+__decorateClass$_([
+  modernIdoc.property({ fallback: DEVICE_PIXEL_RATIO })
+], Renderer.prototype, "pixelRatio");
+__decorateClass$_([
+  modernIdoc.property({ internal: true })
+], Renderer.prototype, "view");
 
 var WebGLBlendMode = /* @__PURE__ */ ((WebGLBlendMode2) => {
   WebGLBlendMode2["NORMAL"] = "normal";
@@ -2887,8 +2920,7 @@ class WebGLFramebufferModule extends WebGLModule {
       throw new Error("Unable to create framebuffer");
     }
     if (options) {
-      this.bind(framebuffer);
-      this.update(options);
+      this.update(framebuffer, options);
     }
     return framebuffer;
   }
@@ -2898,11 +2930,15 @@ class WebGLFramebufferModule extends WebGLModule {
         width: 0,
         height: 0,
         mipLevel: 0,
+        msaa: false,
         stencil: false,
         depth: false,
         depthTexture: null,
         colorTextures: [],
-        multisample: 0
+        multisample: 4,
+        stencilBuffer: null,
+        msaaRenderBuffers: [],
+        framebuffer: null
       };
     });
   }
@@ -2922,6 +2958,7 @@ class WebGLFramebufferModule extends WebGLModule {
     if (!("drawBuffers" in gl)) {
       count = Math.min(count, 1);
     }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     for (let i = 0; i < count; i++) {
       const texture = meta.colorTextures[i];
       this._renderer.texture.bind({
@@ -2944,6 +2981,36 @@ class WebGLFramebufferModule extends WebGLModule {
         meta.colorTextures.map((_, i) => gl.COLOR_ATTACHMENT0 + i)
       );
     }
+    if (meta.msaa) {
+      if (!meta.framebuffer) {
+        const gl2 = this._renderer.gl;
+        meta.framebuffer = gl2.createFramebuffer();
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, meta.framebuffer);
+        meta.colorTextures.forEach((_, i) => {
+          meta.msaaRenderBuffers[i] = gl2.createRenderbuffer();
+        });
+      }
+      gl.bindFramebuffer(gl.FRAMEBUFFER, meta.framebuffer);
+      meta.colorTextures.forEach((texture, i) => {
+        this._renderer.texture.bind({ value: texture, location: 0 });
+        const msaaRenderBuffer = meta.msaaRenderBuffers[i];
+        gl.bindRenderbuffer(gl.RENDERBUFFER, msaaRenderBuffer);
+        gl.renderbufferStorageMultisample(
+          gl.RENDERBUFFER,
+          4,
+          gl.RGBA8,
+          // TODO
+          meta.width * this._renderer.pixelRatio,
+          meta.height * this._renderer.pixelRatio
+        );
+        gl.framebufferRenderbuffer(
+          gl.FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0 + i,
+          gl.RENDERBUFFER,
+          msaaRenderBuffer
+        );
+      });
+    }
     if (meta.depthTexture && (this._renderer.version > 1 || this._renderer.extensions.depthTexture)) {
       this._renderer.texture.bind({
         location: 0,
@@ -2964,7 +3031,7 @@ class WebGLFramebufferModule extends WebGLModule {
       meta.stencilBuffer ??= gl.createRenderbuffer();
       gl.bindRenderbuffer(gl.RENDERBUFFER, meta.stencilBuffer);
       const { attachment, format } = this._getAttachmentAndFormat(meta);
-      if (meta.msaaBuffer) {
+      if (meta.msaa) {
         gl.renderbufferStorageMultisample(
           gl.RENDERBUFFER,
           meta.multisample,
@@ -3012,7 +3079,7 @@ class WebGLFramebufferModule extends WebGLModule {
     if (meta.stencil) {
       const { format } = this._getAttachmentAndFormat(meta);
       gl.bindRenderbuffer(gl.RENDERBUFFER, meta.stencil);
-      if (meta.msaaBuffer) {
+      if (meta.msaa) {
         gl.renderbufferStorageMultisample(
           gl.RENDERBUFFER,
           meta.multisample,
@@ -3024,30 +3091,6 @@ class WebGLFramebufferModule extends WebGLModule {
         gl.renderbufferStorage(gl.RENDERBUFFER, format, meta.width, meta.height);
       }
     }
-    let count = meta.colorTextures.length;
-    if (!gl.drawBuffers) {
-      count = Math.min(count, 1);
-    }
-    for (let i = 0; i < count; i++) {
-      const texture = meta.colorTextures[i];
-      this._renderer.texture.update(texture, {
-        value: {
-          pixels: null,
-          width: meta.width,
-          height: meta.height
-        }
-      });
-      if (i === 0 && meta.msaaBuffer) {
-        gl.bindRenderbuffer(gl.RENDERBUFFER, meta.msaaBuffer);
-        gl.renderbufferStorageMultisample(
-          gl.RENDERBUFFER,
-          meta.multisample,
-          gl.RGBA,
-          meta.width,
-          meta.height
-        );
-      }
-    }
     if (meta.depthTexture) {
       this._renderer.texture.update(meta.depthTexture, {
         value: {
@@ -3058,19 +3101,65 @@ class WebGLFramebufferModule extends WebGLModule {
       });
     }
   }
+  finishRenderPass(framebuffer) {
+    const meta = this.getMeta(framebuffer);
+    if (!meta.msaa || !meta.framebuffer)
+      return;
+    const gl = this._renderer.gl;
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer);
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, meta.framebuffer);
+    const width = meta.width * this._renderer.pixelRatio;
+    const height = meta.height * this._renderer.pixelRatio;
+    gl.blitFramebuffer(
+      0,
+      0,
+      width,
+      height,
+      0,
+      0,
+      width,
+      height,
+      gl.COLOR_BUFFER_BIT,
+      gl.NEAREST
+    );
+    gl.bindFramebuffer(gl.FRAMEBUFFER, meta.framebuffer);
+  }
+  copyToTexture(framebuffer, texture) {
+    const gl = this._renderer.gl;
+    const meta = this.getMeta(framebuffer);
+    this.finishRenderPass(framebuffer);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    this._renderer.texture.bind({
+      value: texture,
+      location: 0
+    });
+    gl.copyTexSubImage2D(
+      gl.TEXTURE_2D,
+      0,
+      0,
+      0,
+      0,
+      0,
+      meta.width,
+      meta.height
+    );
+  }
   bind(framebuffer) {
     const gl = this._renderer.gl;
+    const meta = framebuffer ? this.getMeta(framebuffer) : void 0;
     const value = framebuffer;
     const oldValue = this.boundFramebuffer;
     const changed = {
       value: oldValue !== value
     };
     if (changed.value) {
-      gl.bindFramebuffer(gl.FRAMEBUFFER, value);
+      gl.bindFramebuffer(
+        gl.FRAMEBUFFER,
+        meta?.msaa && meta.framebuffer ? meta.framebuffer : value
+      );
       this.boundFramebuffer = value;
     }
-    if (value) {
-      const meta = this.getMeta(value);
+    if (meta) {
       for (let i = 0; i < meta.colorTextures.length; i++) {
         this._renderer.texture.unbind(meta.colorTextures[i]);
       }
@@ -3118,7 +3207,7 @@ class WebGLFramebufferModule extends WebGLModule {
       attachment = gl.STENCIL_ATTACHMENT;
       format = gl.STENCIL_INDEX8;
     }
-    if (meta.msaaBuffer) {
+    if (meta.msaa) {
       gl.renderbufferStorageMultisample(
         gl.RENDERBUFFER,
         meta.multisample,
@@ -4197,6 +4286,7 @@ class WebGLRenderer extends Renderer {
     this.view?.removeEventListener("webglcontextlost", this._onContextLost, false);
     this.view?.removeEventListener("webglcontextrestored", this._onContextRestored, false);
     this.extensions.loseContext?.loseContext();
+    super.destroy();
   }
   toPixels(x = 0, y = 0, width = this.gl.drawingBufferWidth, height = this.gl.drawingBufferHeight) {
     const length = width * height * 4;
@@ -4321,13 +4411,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$P = Object.defineProperty;
-var __decorateClass$Y = (decorators, target, key, kind) => {
+var __defProp$R = Object.defineProperty;
+var __decorateClass$Z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$P(target, key, result);
+  if (result) __defProp$R(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4371,20 +4461,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$Y([
+__decorateClass$Z([
   modernIdoc.property({ internal: true, fallback: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$Y([
+__decorateClass$Z([
   modernIdoc.property({ internal: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$O = Object.defineProperty;
-var __decorateClass$X = (decorators, target, key, kind) => {
+var __defProp$Q = Object.defineProperty;
+var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$O(target, key, result);
+  if (result) __defProp$Q(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4428,20 +4518,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$X([
+__decorateClass$Y([
   modernIdoc.property({ internal: true, default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$X([
+__decorateClass$Y([
   modernIdoc.property({ internal: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$N = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __defProp$P = Object.defineProperty;
+var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4475,25 +4565,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ internal: true })
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ fallback: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ fallback: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ fallback: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4737,13 +4827,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __defProp$O = Object.defineProperty;
+var __decorateClass$W = (decorators, target, key, kind) => {
   var result = void 0 ;
   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 Texture2D extends Resource {
@@ -4799,7 +4889,9 @@ class Texture2D extends Resource {
   /** @internal */
   _glTexture(renderer, options) {
     return renderer.getRelated(this, () => {
-      return renderer.texture.create(this._glTextureOptions(renderer, options));
+      return renderer.texture.create(
+        this._glTextureOptions(renderer, options)
+      );
     });
   }
   _updateProperty(key, value, oldValue) {
@@ -4869,27 +4961,31 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ internal: true })
 ], Texture2D.prototype, "source");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ fallback: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ fallback: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ fallback: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ fallback: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ fallback: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
 class AnimatedTexture extends Resource {
   frames;
+  frameIndex = 0;
+  get currentFrame() {
+    return this.frames[this.frameIndex];
+  }
   constructor(source) {
     super();
     let frames;
@@ -4914,13 +5010,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$U = (decorators, target, key, kind) => {
+var __defProp$N = Object.defineProperty;
+var __decorateClass$V = (decorators, target, key, kind) => {
   var result = void 0 ;
   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 CanvasTexture extends Texture2D {
@@ -4939,7 +5035,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue);
   }
 }
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property({ fallback: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5161,13 +5257,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$T = (decorators, target, key, kind) => {
+var __defProp$M = Object.defineProperty;
+var __decorateClass$U = (decorators, target, key, kind) => {
   var result = void 0 ;
   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;
 };
 function resolveOptions(options) {
@@ -5411,10 +5507,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ internal: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ internal: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5663,14 +5759,14 @@ class Children {
   }
 }
 
-var __defProp$J = Object.defineProperty;
+var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$S = (decorators, target, key, kind) => {
+var __decorateClass$T = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$J(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 const iidMap = {};
@@ -6179,45 +6275,45 @@ exports.Node = class Node extends CoreObject {
     return node;
   }
 };
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ fallback: modernIdoc.idGenerator() })
 ], exports.Node.prototype, "id", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ fallback: modernIdoc.idGenerator() })
 ], exports.Node.prototype, "name", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ default: () => ({}) })
 ], exports.Node.prototype, "meta", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true, fallback: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "inputMode", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true, fallback: "default" })
 ], exports.Node.prototype, "internalMode", 2);
-__decorateClass$S([
+__decorateClass$T([
   modernIdoc.property({ internal: true })
 ], exports.Node.prototype, "mask", 2);
-exports.Node = __decorateClass$S([
+exports.Node = __decorateClass$T([
   customNode("Node")
 ], exports.Node);
 
-var __defProp$I = Object.defineProperty;
+var __defProp$K = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
+var __decorateClass$S = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$I(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6277,30 +6373,30 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ fallback: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ fallback: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ fallback: false })
 ], exports.TimelineNode.prototype, "paused", 2);
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ internal: true, fallback: false })
 ], exports.TimelineNode.prototype, "insideTimeRange", 2);
-exports.TimelineNode = __decorateClass$R([
+exports.TimelineNode = __decorateClass$S([
   customNode("TimelineNode")
 ], exports.TimelineNode);
 
-var __defProp$H = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
+var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$H(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -6394,10 +6490,11 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   }
   _repaint(batchables) {
     this.log(this.name, "painting");
+    const globalOpacity = this.globalOpacity;
     return batchables.map((batchable) => {
       return {
         ...batchable,
-        modulate: this._modulate.toInt8Array(),
+        modulate: this._modulate.toInt8Array().map((v) => v * globalOpacity),
         blendMode: this.blendMode
       };
     });
@@ -6452,30 +6549,30 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property()
 ], exports.CanvasItem.prototype, "modulate", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ internal: true, fallback: true })
 ], exports.CanvasItem.prototype, "visible", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ internal: true, fallback: 1 })
 ], exports.CanvasItem.prototype, "opacity", 2);
-exports.CanvasItem = __decorateClass$Q([
+exports.CanvasItem = __decorateClass$R([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
-var __defProp$G = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
+var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$G(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -6517,6 +6614,7 @@ exports.Viewport = class Viewport extends exports.Node {
     return {
       width,
       height,
+      msaa: this.msaa,
       colorTextures: [this.texture._glTexture(renderer)]
     };
   }
@@ -6543,6 +6641,9 @@ exports.Viewport = class Viewport extends exports.Node {
         this.projection.resize(this.width, this.height);
         this.emit("updateRect");
         break;
+      case "msaa":
+        this.requestUpload();
+        break;
     }
   }
   requestUpload() {
@@ -6622,30 +6723,33 @@ exports.Viewport = class Viewport extends exports.Node {
     return this.canvasTransform.apply(globalPos, newPos);
   }
 };
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$P([
+__decorateClass$Q([
+  modernIdoc.property({ internal: true, fallback: false })
+], exports.Viewport.prototype, "msaa", 2);
+exports.Viewport = __decorateClass$Q([
   customNode("Viewport")
 ], exports.Viewport);
 
-var __defProp$F = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
+var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$F(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 exports.Effect = class Effect extends exports.TimelineNode {
@@ -6887,19 +6991,19 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
 };
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ internal: true })
 ], exports.Effect.prototype, "material", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property()
 ], exports.Effect.prototype, "effectMode", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: "" })
 ], exports.Effect.prototype, "glsl", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: "" })
 ], exports.Effect.prototype, "glslSrc", 2);
-exports.Effect = __decorateClass$O([
+exports.Effect = __decorateClass$P([
   customNode("Effect")
 ], exports.Effect);
 
@@ -6929,14 +7033,14 @@ class RenderStack {
   }
 }
 
-var __defProp$E = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
+var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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;
 };
 exports.Timeline = class Timeline extends exports.Node {
@@ -6981,52 +7085,54 @@ exports.Timeline = class Timeline extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property({ fallback: 0 })
 ], exports.Timeline.prototype, "startTime", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property({ fallback: 0 })
 ], exports.Timeline.prototype, "currentTime", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property({ fallback: Number.MAX_SAFE_INTEGER })
 ], exports.Timeline.prototype, "endTime", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property({ fallback: false })
 ], exports.Timeline.prototype, "loop", 2);
-exports.Timeline = __decorateClass$N([
+exports.Timeline = __decorateClass$O([
   customNode("Timeline")
 ], exports.Timeline);
 
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 exports.Window = class Window extends exports.Viewport {
-  //
 };
-exports.Window = __decorateClass$M([
+__decorateClass$N([
+  modernIdoc.property({ fallback: false })
+], exports.Window.prototype, "msaa", 2);
+exports.Window = __decorateClass$N([
   customNode("Window")
 ], exports.Window);
 
-var __defProp$D = Object.defineProperty;
-var __decorateClass$L = (decorators, target, key, kind) => {
+var __defProp$E = Object.defineProperty;
+var __decorateClass$M = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$D(target, key, result);
+  if (result) __defProp$E(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
-  fonts;
   input = new Input();
   renderStack = new RenderStack();
   root = new exports.Window(true).setTree(this);
-  timeline;
   _backgroundColor = new Color();
   _currentViewport;
   getCurrentViewport() {
@@ -7035,9 +7141,9 @@ class SceneTree extends MainLoop {
   setCurrentViewport(viewport) {
     this._currentViewport = viewport;
   }
-  constructor(timeline = new exports.Timeline()) {
+  constructor(properties) {
     super();
-    this.timeline = timeline.setTree(this);
+    this.setProperties(properties);
   }
   _updateProperty(key, value, oldValue) {
     super._updateProperty(key, value, oldValue);
@@ -7045,6 +7151,9 @@ class SceneTree extends MainLoop {
       case "backgroundColor":
         this._backgroundColor.value = value;
         break;
+      case "timeline":
+        this.timeline.setTree(this);
+        break;
     }
   }
   log(...args) {
@@ -7065,8 +7174,14 @@ class SceneTree extends MainLoop {
     this.emit("rendered");
   }
   _renderScreen(renderer) {
+    if (this.root.msaa) {
+      renderer.framebuffer.finishRenderPass(
+        this.root._glFramebuffer(renderer)
+      );
+    }
     renderer.state.reset();
     renderer.framebuffer.bind(null);
+    renderer.gl.bindFramebuffer(renderer.gl.FRAMEBUFFER, null);
     renderer.viewport.bind({
       x: 0,
       y: 0,
@@ -7086,23 +7201,29 @@ class SceneTree extends MainLoop {
     renderer.texture.unbind(texture);
   }
   destroy() {
-    super.destroy();
     this.root.destroy();
-    this.input.removeEventListeners();
+    this.input.destroy();
+    super.destroy();
   }
 }
-__decorateClass$L([
-  modernIdoc.property({ internal: true, fallback: false })
-], SceneTree.prototype, "processPaused");
-__decorateClass$L([
+__decorateClass$M([
   modernIdoc.property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$L([
+__decorateClass$M([
   modernIdoc.property({ internal: true, fallback: false })
 ], SceneTree.prototype, "debug");
+__decorateClass$M([
+  modernIdoc.property({ internal: true, fallback: false })
+], SceneTree.prototype, "processPaused");
+__decorateClass$M([
+  modernIdoc.property({ internal: true, fallback: modernFont.fonts })
+], SceneTree.prototype, "fonts");
+__decorateClass$M([
+  modernIdoc.property({ internal: true, default: () => new exports.Timeline() })
+], SceneTree.prototype, "timeline");
 
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -7115,7 +7236,7 @@ exports.Transition = class Transition extends exports.Effect {
     this.setProperties(properties).append(children);
   }
 };
-exports.Transition = __decorateClass$K([
+exports.Transition = __decorateClass$L([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7123,14 +7244,14 @@ exports.Transition = __decorateClass$K([
   })
 ], exports.Transition);
 
-var __defProp$C = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
+var __decorateClass$K = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$C(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7234,24 +7355,24 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     return this.globalTransform.apply(localPos, newPos);
   }
 };
-__decorateClass$J([
+__decorateClass$K([
   modernIdoc.property({ internal: true, fallback: 0 })
 ], exports.Node2D.prototype, "rotation", 2);
-__decorateClass$J([
+__decorateClass$K([
   modernIdoc.property({ internal: true, fallback: 0 })
 ], exports.Node2D.prototype, "globalRotation", 2);
-exports.Node2D = __decorateClass$J([
+exports.Node2D = __decorateClass$K([
   customNode("Node2D")
 ], exports.Node2D);
 
-var __defProp$B = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
+var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$B(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 exports.Camera2D = class Camera2D extends exports.Node2D {
@@ -7364,13 +7485,13 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
     return viewport.toCanvasScreen(globalPos, newPos);
   }
 };
-__decorateClass$I([
+__decorateClass$J([
   modernIdoc.property({ internal: true, fallback: false })
 ], exports.Camera2D.prototype, "spaceKey", 2);
-__decorateClass$I([
+__decorateClass$J([
   modernIdoc.property({ internal: true, fallback: false })
 ], exports.Camera2D.prototype, "grabbing", 2);
-exports.Camera2D = __decorateClass$I([
+exports.Camera2D = __decorateClass$J([
   customNode("Camera2D", {
     processMode: "disabled",
     renderMode: "disabled"
@@ -7523,15 +7644,15 @@ function parseCSSTransformOrigin(transformOrigin) {
   });
 }
 
-var __defProp$A = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$H = (decorators, target, key, kind) => {
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$A(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
@@ -7591,43 +7712,43 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
-exports.ColorAdjustEffect = __decorateClass$H([
+exports.ColorAdjustEffect = __decorateClass$I([
   customNode("ColorAdjustEffect")
 ], exports.ColorAdjustEffect);
 
-var __defProp$z = Object.defineProperty;
+var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$G = (decorators, target, key, kind) => {
+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$H = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$z(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
@@ -7707,22 +7828,22 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$G([
+__decorateClass$H([
   modernIdoc.property()
 ], exports.ColorFilterEffect.prototype, "filter", 2);
-exports.ColorFilterEffect = __decorateClass$G([
+exports.ColorFilterEffect = __decorateClass$H([
   customNode("ColorFilterEffect")
 ], exports.ColorFilterEffect);
 
-var __defProp$y = Object.defineProperty;
+var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$F = (decorators, target, key, kind) => {
+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$G = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$y(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
@@ -7798,25 +7919,25 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$F([
+__decorateClass$G([
   modernIdoc.property({ default: () => [] })
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$F([
+__decorateClass$G([
   modernIdoc.property({ fallback: 0.5 })
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
-exports.ColorOverlayEffect = __decorateClass$F([
+exports.ColorOverlayEffect = __decorateClass$G([
   customNode("ColorOverlayEffect")
 ], exports.ColorOverlayEffect);
 
-var __defProp$x = Object.defineProperty;
+var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$E = (decorators, target, key, kind) => {
+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$F = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$x(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
@@ -7883,25 +8004,25 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$E([
+__decorateClass$F([
   modernIdoc.property({ default: () => [] })
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$E([
+__decorateClass$F([
   modernIdoc.property({ fallback: 0.5 })
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
-exports.ColorRemoveEffect = __decorateClass$E([
+exports.ColorRemoveEffect = __decorateClass$F([
   customNode("ColorRemoveEffect")
 ], exports.ColorRemoveEffect);
 
-var __defProp$w = Object.defineProperty;
+var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$D = (decorators, target, key, kind) => {
+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$E = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$w(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
@@ -7990,25 +8111,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$D([
+__decorateClass$E([
   modernIdoc.property({ default: () => [] })
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$D([
+__decorateClass$E([
   modernIdoc.property({ fallback: 0.05 })
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
-exports.ColorReplaceEffect = __decorateClass$D([
+exports.ColorReplaceEffect = __decorateClass$E([
   customNode("ColorReplaceEffect")
 ], exports.ColorReplaceEffect);
 
-var __defProp$v = Object.defineProperty;
+var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
+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$D = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$v(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -8114,25 +8235,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property({ fallback: 4 })
 ], exports.GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property({ fallback: 3 })
 ], exports.GaussianBlurEffect.prototype, "quality", 2);
-exports.GaussianBlurEffect = __decorateClass$C([
+exports.GaussianBlurEffect = __decorateClass$D([
   customNode("GaussianBlurEffect")
 ], exports.GaussianBlurEffect);
 
-var __defProp$u = Object.defineProperty;
+var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
+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$C = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$u(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -8196,34 +8317,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property({ fallback: "#000000FF" })
 ], exports.DropShadowEffect.prototype, "color", 2);
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "blur", 2);
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property({ fallback: false })
 ], exports.DropShadowEffect.prototype, "shadowOnly", 2);
-exports.DropShadowEffect = __decorateClass$B([
+exports.DropShadowEffect = __decorateClass$C([
   customNode("DropShadowEffect")
 ], exports.DropShadowEffect);
 
-var __defProp$t = Object.defineProperty;
+var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
+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$B = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$t(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -8268,22 +8389,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property({ fallback: 5 })
 ], exports.EmbossEffect.prototype, "strength", 2);
-exports.EmbossEffect = __decorateClass$A([
+exports.EmbossEffect = __decorateClass$B([
   customNode("EmbossEffect")
 ], exports.EmbossEffect);
 
-var __defProp$s = Object.defineProperty;
+var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
+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$A = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$s(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8457,46 +8578,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 10 })
 ], exports.GlitchEffect.prototype, "slices", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 512 })
 ], exports.GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 100 })
 ], exports.GlitchEffect.prototype, "offset", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 0 })
 ], exports.GlitchEffect.prototype, "direction", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 2 })
 ], exports.GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ fallback: 0 })
 ], exports.GlitchEffect.prototype, "seed", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ default: () => [2, 2] })
 ], exports.GlitchEffect.prototype, "red", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ default: () => [-10, 4] })
 ], exports.GlitchEffect.prototype, "green", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property({ default: () => [10, -4] })
 ], exports.GlitchEffect.prototype, "blue", 2);
-exports.GlitchEffect = __decorateClass$z([
+exports.GlitchEffect = __decorateClass$A([
   customNode("GlitchEffect")
 ], exports.GlitchEffect);
 
-var __defProp$r = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
+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$z = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$r(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8674,39 +8795,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: 0 })
 ], exports.GodrayEffect.prototype, "time", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: 30 })
 ], exports.GodrayEffect.prototype, "angle", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: 0.5 })
 ], exports.GodrayEffect.prototype, "gain", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: 2.5 })
 ], exports.GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: true })
 ], exports.GodrayEffect.prototype, "parallel", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ default: () => [0, 0] })
 ], exports.GodrayEffect.prototype, "center", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property({ fallback: 1 })
 ], exports.GodrayEffect.prototype, "alpha", 2);
-exports.GodrayEffect = __decorateClass$y([
+exports.GodrayEffect = __decorateClass$z([
   customNode("GodrayEffect")
 ], exports.GodrayEffect);
 
-var __defProp$q = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$q(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8796,28 +8917,28 @@ void main() {
     });
   }
 };
-__decorateClass$x([
+__decorateClass$y([
   modernIdoc.property({ fallback: 4 })
 ], exports.KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$x([
+__decorateClass$y([
   modernIdoc.property({ fallback: 3 })
 ], exports.KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$x([
+__decorateClass$y([
   modernIdoc.property({ default: () => [1, 1] })
 ], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
-exports.KawaseBlurEffect = __decorateClass$x([
+exports.KawaseBlurEffect = __decorateClass$y([
   customNode("KawaseBlurEffect")
 ], exports.KawaseBlurEffect);
 
-var __defProp$p = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$x = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$p(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -8905,25 +9026,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property({ internal: true })
 ], exports.MaskEffect.prototype, "texture", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property({ fallback: "" })
 ], exports.MaskEffect.prototype, "src", 2);
-exports.MaskEffect = __decorateClass$w([
+exports.MaskEffect = __decorateClass$x([
   customNode("MaskEffect")
 ], exports.MaskEffect);
 
-var __defProp$o = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$w = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$o(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -9010,40 +9131,40 @@ void main() {
 };
 __publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: "#000000ff" })
 ], exports.OutlineEffect.prototype, "color", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: 1 })
 ], exports.OutlineEffect.prototype, "width", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: "solid" })
 ], exports.OutlineEffect.prototype, "style", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "image", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: 1 })
 ], exports.OutlineEffect.prototype, "opacity", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: 0.1 })
 ], exports.OutlineEffect.prototype, "quality", 2);
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property({ fallback: false })
 ], exports.OutlineEffect.prototype, "knockout", 2);
-exports.OutlineEffect = __decorateClass$v([
+exports.OutlineEffect = __decorateClass$w([
   customNode("OutlineEffect")
 ], exports.OutlineEffect);
 
-var __defProp$n = Object.defineProperty;
+var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$n(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -9099,22 +9220,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$u([
+__decorateClass$v([
   modernIdoc.property({ fallback: 10 })
 ], exports.PixelateEffect.prototype, "strength", 2);
-exports.PixelateEffect = __decorateClass$u([
+exports.PixelateEffect = __decorateClass$v([
   customNode("PixelateEffect")
 ], exports.PixelateEffect);
 
-var __defProp$m = Object.defineProperty;
+var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$m(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -9227,19 +9348,19 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property({ fallback: 20 })
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property({ fallback: -1 })
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property({ fallback: 0.1 })
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
-exports.ZoomBlurEffect = __decorateClass$t([
+exports.ZoomBlurEffect = __decorateClass$u([
   customNode("ZoomBlurEffect")
 ], exports.ZoomBlurEffect);
 
@@ -9287,13 +9408,13 @@ function getDrawOptions(fill, box) {
   return { disableWrapMode, uvTransform };
 }
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$m = Object.defineProperty;
+var __decorateClass$t = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$m(target, key, result);
   return result;
 };
 class BaseElement2DFill extends CoreObject {
@@ -9302,6 +9423,7 @@ class BaseElement2DFill extends CoreObject {
     this.parent = parent;
   }
   _texture;
+  _animatedTexture;
   _setProperties(properties) {
     return super.setProperties(properties);
   }
@@ -9332,25 +9454,27 @@ class BaseElement2DFill extends CoreObject {
   }
   async loadTexture() {
     if (this.linearGradient || this.radialGradient) {
-      return new GradientTexture(
+      this._texture = new GradientTexture(
         this.linearGradient ?? this.radialGradient,
         this.parent.size.width,
         this.parent.size.height
       );
     } else if (!modernIdoc.isNone(this.image)) {
       this.parent.tree?.log(`load image ${this.image}`);
-      return await assets.texture.load(this.image);
-    } else {
-      return void 0;
+      if (this.image.split("?")[0].endsWith(".gif")) {
+        this._animatedTexture = await assets.gif.load(this.image);
+      } else {
+        this._texture = await assets.texture.load(this.image);
+      }
     }
   }
   async _updateTexture() {
-    this._texture = await this.loadTexture();
+    await this.loadTexture();
     this.parent.requestRedraw();
   }
   canDraw() {
     return Boolean(
-      this.enabled && (this._texture || this.color)
+      this.enabled && (this._texture || this._animatedTexture || this.color)
     );
   }
   draw() {
@@ -9363,53 +9487,84 @@ class BaseElement2DFill extends CoreObject {
       }
     );
     ctx.uvTransform = uvTransform;
-    ctx.fillStyle = this._texture ?? this.color;
+    ctx.fillStyle = this._animatedTexture?.currentFrame.texture ?? this._texture ?? this.color;
     ctx.fill({
       disableWrapMode
     });
   }
+  _getFrameCurrentTime() {
+    const duration = this._animatedTexture?.duration ?? 0;
+    if (!duration)
+      return 0;
+    const currentTime = this.parent._currentTime;
+    if (currentTime < 0)
+      return 0;
+    return currentTime % duration;
+  }
+  updateFrameIndex() {
+    if (!this._animatedTexture)
+      return this;
+    const currentTime = this._getFrameCurrentTime();
+    const frames = this._animatedTexture.frames;
+    const len = frames.length;
+    if (len <= 1 && this._animatedTexture.frameIndex === 0)
+      return this;
+    let index = len - 1;
+    for (let time = 0, i = 0; i < len; i++) {
+      time += frames[i].duration ?? 0;
+      if (time >= currentTime) {
+        index = i;
+        break;
+      }
+    }
+    if (this._animatedTexture.frameIndex !== index) {
+      this._animatedTexture.frameIndex = index;
+      this.parent.requestRedraw();
+    }
+    return this;
+  }
 }
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DFill.prototype, "enabled");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "color");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "image");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "linearGradient");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "radialGradient");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "cropRect");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "stretchRect");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "dpi");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "opacity");
 
-var __defProp$k = Object.defineProperty;
-var __decorateClass$r = (decorators, target, key, kind) => {
+var __defProp$l = Object.defineProperty;
+var __decorateClass$s = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$l(target, key, result);
   return result;
 };
 class BaseElement2DBackground extends BaseElement2DFill {
@@ -9427,17 +9582,17 @@ class BaseElement2DBackground extends BaseElement2DFill {
     }
   }
 }
-__decorateClass$r([
+__decorateClass$s([
   modernIdoc.property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
-var __defProp$j = Object.defineProperty;
-var __decorateClass$q = (decorators, target, key, kind) => {
+var __defProp$k = Object.defineProperty;
+var __decorateClass$r = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$k(target, key, result);
   return result;
 };
 class BaseElement2DForeground extends BaseElement2DFill {
@@ -9455,17 +9610,17 @@ class BaseElement2DForeground extends BaseElement2DFill {
     }
   }
 }
-__decorateClass$q([
+__decorateClass$r([
   modernIdoc.property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
-var __defProp$i = Object.defineProperty;
-var __decorateClass$p = (decorators, target, key, kind) => {
+var __defProp$j = Object.defineProperty;
+var __decorateClass$q = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$j(target, key, result);
   return result;
 };
 class BaseElement2DOutline extends BaseElement2DFill {
@@ -9508,29 +9663,29 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.stroke({ disableWrapMode });
   }
 }
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: "#00000000" })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: "butt" })
 ], BaseElement2DOutline.prototype, "lineCap");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: "miter" })
 ], BaseElement2DOutline.prototype, "lineJoin");
 
-var __defProp$h = Object.defineProperty;
-var __decorateClass$o = (decorators, target, key, kind) => {
+var __defProp$i = Object.defineProperty;
+var __decorateClass$p = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$i(target, key, result);
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
@@ -9570,29 +9725,29 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DShadow.prototype, "enabled");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: "#000000FF" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
-var __defProp$g = Object.defineProperty;
-var __decorateClass$n = (decorators, target, key, kind) => {
+var __defProp$h = Object.defineProperty;
+var __decorateClass$o = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$h(target, key, result);
   return result;
 };
 class BaseElement2DShape extends CoreObject {
@@ -9667,19 +9822,19 @@ class BaseElement2DShape extends CoreObject {
     }
   }
 }
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DShape.prototype, "enabled");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "preset");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "svg");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "viewBox");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "paths");
 
@@ -9695,13 +9850,13 @@ for (const key in defaultStyles$1) {
   modernIdoc.defineProperty(BaseElement2DStyle, key, { fallback });
 }
 
-var __defProp$f = Object.defineProperty;
-var __decorateClass$m = (decorators, target, key, kind) => {
+var __defProp$g = Object.defineProperty;
+var __decorateClass$n = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$g(target, key, result);
   return result;
 };
 class BaseElement2DText extends CoreObject {
@@ -9881,38 +10036,43 @@ class BaseElement2DText extends CoreObject {
               ctx.stroke();
             }
           }
+        } else {
+          ctx.addPath(path);
+          ctx.style = { ...path.style };
+          ctx.vertTransform = this._getVertTransform();
+          ctx.fill();
         }
       });
     });
   }
 }
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DText.prototype, "enabled");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ fallback: () => [] })
 ], BaseElement2DText.prototype, "content");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ alias: "parent.style.json" })
 ], BaseElement2DText.prototype, "style");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property()
 ], BaseElement2DText.prototype, "effects");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property()
 ], BaseElement2DText.prototype, "fill");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property()
 ], BaseElement2DText.prototype, "outline");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ alias: "base.measureDom" })
 ], BaseElement2DText.prototype, "measureDom");
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
+var __decorateClass$m = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -10080,6 +10240,13 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
         break;
     }
   }
+  _process(delta) {
+    this.foreground.updateFrameIndex();
+    this.fill.updateFrameIndex();
+    this.outline.updateFrameIndex();
+    this.background.updateFrameIndex();
+    super._process(delta);
+  }
   _updateMaskImage() {
     const nodePath = "__$style.maskImage";
     const maskImage = this.style.maskImage;
@@ -10325,7 +10492,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     });
   }
 };
-exports.BaseElement2D = __decorateClass$l([
+exports.BaseElement2D = __decorateClass$m([
   customNode("BaseElement2D")
 ], exports.BaseElement2D);
 
@@ -10353,7 +10520,7 @@ class FlexElement2DStyle extends BaseElement2DStyle {
 }
 
 var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
+var __decorateClass$l = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -10405,7 +10572,7 @@ exports.Element2D = class Element2D extends exports.BaseElement2D {
     }
   }
 };
-exports.Element2D = __decorateClass$k([
+exports.Element2D = __decorateClass$l([
   customNode("Element2D")
 ], exports.Element2D);
 
@@ -10716,7 +10883,7 @@ class FlexLayout {
 }
 
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
+var __decorateClass$k = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -10794,18 +10961,18 @@ exports.FlexElement2D = class FlexElement2D extends exports.BaseElement2D {
     }
   }
 };
-exports.FlexElement2D = __decorateClass$j([
+exports.FlexElement2D = __decorateClass$k([
   customNode("FlexElement2D")
 ], exports.FlexElement2D);
 
-var __defProp$e = Object.defineProperty;
+var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
+var __decorateClass$j = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 exports.Image2D = class Image2D extends exports.Element2D {
@@ -10941,19 +11108,19 @@ exports.Image2D = class Image2D extends exports.Element2D {
     });
   }
 };
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ internal: true })
 ], exports.Image2D.prototype, "texture", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ fallback: "" })
 ], exports.Image2D.prototype, "src", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property()
 ], exports.Image2D.prototype, "srcRect", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ fallback: false })
 ], exports.Image2D.prototype, "gif", 2);
-exports.Image2D = __decorateClass$i([
+exports.Image2D = __decorateClass$j([
   customNode("Image2D")
 ], exports.Image2D);
 
@@ -10977,14 +11144,14 @@ class TextureRect2D extends exports.Element2D {
   }
 }
 
-var __defProp$d = Object.defineProperty;
+var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
+var __decorateClass$i = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 exports.Lottie2D = class Lottie2D extends TextureRect2D {
@@ -11027,20 +11194,20 @@ exports.Lottie2D = class Lottie2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$h([
+__decorateClass$i([
   modernIdoc.property({ fallback: "" })
 ], exports.Lottie2D.prototype, "src", 2);
-exports.Lottie2D = __decorateClass$h([
+exports.Lottie2D = __decorateClass$i([
   customNode("Lottie2D")
 ], exports.Lottie2D);
 
-var __defProp$c = Object.defineProperty;
-var __decorateClass$g = (decorators, target, key, kind) => {
+var __defProp$d = Object.defineProperty;
+var __decorateClass$h = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$c(target, key, result);
+  if (result) __defProp$d(target, key, result);
   return result;
 };
 class TransformRect2D extends exports.Element2D {
@@ -11086,18 +11253,18 @@ class TransformRect2D extends exports.Element2D {
     this._drawEllipse(width, height / 2);
   }
 }
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ fallback: 6 })
 ], TransformRect2D.prototype, "handleSize");
 
-var __defProp$b = Object.defineProperty;
+var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
+var __decorateClass$g = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 exports.Video2D = class Video2D extends TextureRect2D {
@@ -11150,21 +11317,21 @@ exports.Video2D = class Video2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$f([
+__decorateClass$g([
   modernIdoc.property({ fallback: "" })
 ], exports.Video2D.prototype, "src", 2);
-exports.Video2D = __decorateClass$f([
+exports.Video2D = __decorateClass$g([
   customNode("Video2D")
 ], exports.Video2D);
 
-var __defProp$a = Object.defineProperty;
+var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
+var __decorateClass$f = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -11483,19 +11650,19 @@ exports.Animation = class Animation extends exports.TimelineNode {
     });
   }
 };
-__decorateClass$e([
+__decorateClass$f([
   modernIdoc.property({ fallback: "parent" })
 ], exports.Animation.prototype, "effectMode", 2);
-__decorateClass$e([
+__decorateClass$f([
   modernIdoc.property({ fallback: false })
 ], exports.Animation.prototype, "loop", 2);
-__decorateClass$e([
+__decorateClass$f([
   modernIdoc.property({ default: () => [] })
 ], exports.Animation.prototype, "keyframes", 2);
-__decorateClass$e([
+__decorateClass$f([
   modernIdoc.property()
 ], exports.Animation.prototype, "easing", 2);
-exports.Animation = __decorateClass$e([
+exports.Animation = __decorateClass$f([
   customNode("Animation", {
     renderMode: "disabled",
     processMode: "pausable",
@@ -12376,10 +12543,10 @@ class WebAudio extends AudioPipeline {
   }
 }
 
-var __defProp$9 = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$d = (decorators, target, key, kind) => {
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$e = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -12591,7 +12758,7 @@ exports.Audio = class Audio extends exports.TimelineNode {
   }
 };
 __publicField$4(exports.Audio, "_soundPool", []);
-exports.Audio = __decorateClass$d([
+exports.Audio = __decorateClass$e([
   customNode("Audio")
 ], exports.Audio);
 
@@ -12599,14 +12766,14 @@ class AudioSpectrum extends exports.Node2D {
   //
 }
 
-var __defProp$8 = Object.defineProperty;
+var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
+var __decorateClass$d = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
@@ -12697,21 +12864,21 @@ exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
     }
   }
 };
-__decorateClass$c([
+__decorateClass$d([
   modernIdoc.property()
 ], exports.AudioWaveform.prototype, "src", 2);
-__decorateClass$c([
+__decorateClass$d([
   modernIdoc.property({ fallback: 0 })
 ], exports.AudioWaveform.prototype, "gap", 2);
-__decorateClass$c([
+__decorateClass$d([
   modernIdoc.property({ fallback: "#000000" })
 ], exports.AudioWaveform.prototype, "color", 2);
-exports.AudioWaveform = __decorateClass$c([
+exports.AudioWaveform = __decorateClass$d([
   customNode("AudioWaveform")
 ], exports.AudioWaveform);
 
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
+var __decorateClass$c = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -12759,18 +12926,18 @@ exports.Control = class Control extends exports.Element2D {
   _guiInput(event, key) {
   }
 };
-exports.Control = __decorateClass$b([
+exports.Control = __decorateClass$c([
   customNode("Control")
 ], exports.Control);
 
-var __defProp$7 = Object.defineProperty;
+var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
+var __decorateClass$b = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 exports.Range = class Range extends exports.Control {
@@ -12793,39 +12960,39 @@ exports.Range = class Range extends exports.Control {
     }
   }
 };
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: false })
 ], exports.Range.prototype, "allowGreater", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: false })
 ], exports.Range.prototype, "allowLesser", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: 1 })
 ], exports.Range.prototype, "page", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: 0 })
 ], exports.Range.prototype, "minValue", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: 100 })
 ], exports.Range.prototype, "maxValue", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: 0.01 })
 ], exports.Range.prototype, "step", 2);
-__decorateClass$a([
+__decorateClass$b([
   modernIdoc.property({ fallback: 0 })
 ], exports.Range.prototype, "value", 2);
-exports.Range = __decorateClass$a([
+exports.Range = __decorateClass$b([
   customNode("Range")
 ], exports.Range);
 
-var __defProp$6 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
+var __decorateClass$a = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 exports.Ruler = class Ruler extends exports.Control {
@@ -12973,45 +13140,45 @@ exports.Ruler = class Ruler extends exports.Control {
     }
   }
 };
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 0 })
 ], exports.Ruler.prototype, "offsetX", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 0 })
 ], exports.Ruler.prototype, "offsetY", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 20 })
 ], exports.Ruler.prototype, "thickness", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 3 })
 ], exports.Ruler.prototype, "markHeight", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: "#b2b6bc" })
 ], exports.Ruler.prototype, "color", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: "#f9f9fa" })
 ], exports.Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: "#b2b6bc" })
 ], exports.Ruler.prototype, "markColor", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 300 })
 ], exports.Ruler.prototype, "gap", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 1 })
 ], exports.Ruler.prototype, "gapScale", 2);
-exports.Ruler = __decorateClass$9([
+exports.Ruler = __decorateClass$a([
   customNode("Ruler")
 ], exports.Ruler);
 
-var __defProp$5 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
+var __decorateClass$9 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 exports.ScrollBar = class ScrollBar extends exports.Range {
@@ -13070,15 +13237,15 @@ exports.ScrollBar = class ScrollBar extends exports.Range {
     return false;
   }
 };
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: "vertical" })
 ], exports.ScrollBar.prototype, "direction", 2);
-exports.ScrollBar = __decorateClass$8([
+exports.ScrollBar = __decorateClass$9([
   customNode("ScrollBar")
 ], exports.ScrollBar);
 
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
+var __decorateClass$8 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13091,14 +13258,14 @@ exports.XScrollBar = class XScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.XScrollBar = __decorateClass$7([
+exports.XScrollBar = __decorateClass$8([
   customNode("XScrollBar", {
     direction: "horizontal"
   })
 ], exports.XScrollBar);
 
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
+var __decorateClass$7 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13111,20 +13278,20 @@ exports.YScrollBar = class YScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.YScrollBar = __decorateClass$6([
+exports.YScrollBar = __decorateClass$7([
   customNode("YScrollBar", {
     direction: "vertical"
   })
 ], exports.YScrollBar);
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
+var __decorateClass$6 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : 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$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 exports.Scaler = class Scaler extends exports.Node {
@@ -13185,32 +13352,32 @@ exports.Scaler = class Scaler extends exports.Node {
     }
   }
 };
-__decorateClass$5([
+__decorateClass$6([
   modernIdoc.property({ default: 1 })
 ], exports.Scaler.prototype, "translateX", 2);
-__decorateClass$5([
+__decorateClass$6([
   modernIdoc.property({ default: 1 })
 ], exports.Scaler.prototype, "translateY", 2);
-__decorateClass$5([
+__decorateClass$6([
   modernIdoc.property({ default: 1 })
 ], exports.Scaler.prototype, "scale", 2);
-__decorateClass$5([
+__decorateClass$6([
   modernIdoc.property({ default: 0.05 })
 ], exports.Scaler.prototype, "minScale", 2);
-__decorateClass$5([
+__decorateClass$6([
   modernIdoc.property({ default: 10 })
 ], exports.Scaler.prototype, "maxScale", 2);
-exports.Scaler = __decorateClass$5([
+exports.Scaler = __decorateClass$6([
   customNode("Scaler", {
     processMode: "disabled",
     renderMode: "disabled"
   })
 ], exports.Scaler);
 
-var __defProp$3 = Object.defineProperty;
+var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = 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$4 = (decorators, target, key, kind) => {
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$5 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13299,14 +13466,14 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-exports.KawaseTransition = __decorateClass$4([
+exports.KawaseTransition = __decorateClass$5([
   customNode("KawaseTransition")
 ], exports.KawaseTransition);
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$3 = (decorators, target, key, kind) => {
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$4 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13352,14 +13519,14 @@ void main() {
   gl_FragColor = mix(src2Color, src1Color, mixPercent);
 }`
 }));
-exports.LeftEraseTransition = __decorateClass$3([
+exports.LeftEraseTransition = __decorateClass$4([
   customNode("LeftEraseTransition")
 ], exports.LeftEraseTransition);
 
-var __defProp$1 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$2 = (decorators, target, key, kind) => {
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$3 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13459,14 +13626,14 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-exports.TiltShiftTransition = __decorateClass$2([
+exports.TiltShiftTransition = __decorateClass$3([
   customNode("TiltShiftTransition")
 ], exports.TiltShiftTransition);
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$1 = (decorators, target, key, kind) => {
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$2 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -13553,7 +13720,7 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-exports.TwistTransition = __decorateClass$1([
+exports.TwistTransition = __decorateClass$2([
   customNode("TwistTransition")
 ], exports.TwistTransition);
 
@@ -13918,7 +14085,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());
 
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -14127,10 +14294,19 @@ exports.CanvasItemEditor = class CanvasItemEditor extends exports.Control {
     }
   }
 };
-exports.CanvasItemEditor = __decorateClass([
+exports.CanvasItemEditor = __decorateClass$1([
   customNode("CanvasItemEditor")
 ], exports.CanvasItemEditor);
 
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
 const defaultOptions = {
   alpha: true,
   stencil: true,
@@ -14162,9 +14338,6 @@ class Engine extends SceneTree {
   set pixelRatio(val) {
     this.renderer.pixelRatio = val;
     this.resize(this.width, this.height);
-    if (this.view) {
-      this.view.dataset.pixelRatio = String(val);
-    }
   }
   _resizeObserver = SUPPORTS_RESIZE_OBSERVER ? new ResizeObserver((entries) => {
     const entry = entries[0];
@@ -14173,36 +14346,30 @@ class Engine extends SceneTree {
       this.resize(width, height);
     }
   }) : void 0;
-  constructor(options = {}) {
+  constructor(properties = {}) {
     const {
-      debug = false,
       view,
       width,
       height,
       pixelRatio = DEVICE_PIXEL_RATIO,
-      backgroundColor = 0,
-      fonts,
-      autoResize,
-      autoStart,
-      timeline,
-      ...glOptions
-    } = options;
-    super(timeline);
-    this.debug = debug;
+      autoResize
+    } = properties;
+    super();
     this.renderer = new WebGLRenderer(view, {
-      ...defaultOptions,
-      ...glOptions
+      alpha: defaultOptions.alpha ?? properties.alpha,
+      stencil: defaultOptions.stencil ?? properties.stencil,
+      antialias: defaultOptions.antialias ?? properties.antialias,
+      premultipliedAlpha: defaultOptions.premultipliedAlpha ?? properties.premultipliedAlpha,
+      preserveDrawingBuffer: defaultOptions.preserveDrawingBuffer ?? properties.preserveDrawingBuffer,
+      powerPreference: defaultOptions.powerPreference ?? properties.powerPreference
     });
     this._setupInput();
     this.pixelRatio = pixelRatio;
-    this.backgroundColor = backgroundColor;
-    this.fonts = fonts;
     if (autoResize) {
       if (!view && this.renderer.view) {
         this.renderer.view.style.width = "100%";
         this.renderer.view.style.height = "100%";
       }
-      this.enableAutoResize(autoResize);
     } else {
       this.resize(
         width || this.gl.drawingBufferWidth || this.view?.clientWidth || 200,
@@ -14210,7 +14377,26 @@ class Engine extends SceneTree {
         !view
       );
     }
-    autoStart && this.start();
+    this.setProperties(properties);
+  }
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
+    switch (key) {
+      case "autoResize":
+        if (this.view) {
+          if (this.autoResize) {
+            this._resizeObserver?.observe(this.view);
+          } else {
+            this._resizeObserver?.unobserve(this.view);
+          }
+        }
+        break;
+      case "autoStart":
+        if (this.autoStart) {
+          this.start();
+        }
+        break;
+    }
   }
   _setupInput() {
     if (this.view) {
@@ -14233,16 +14419,6 @@ class Engine extends SceneTree {
     }
     return this;
   }
-  enableAutoResize(enable = true) {
-    if (this.view) {
-      if (enable) {
-        this._resizeObserver?.observe(this.view);
-      } else {
-        this._resizeObserver?.unobserve(this.view);
-      }
-    }
-    return this;
-  }
   resize(width, height, updateCss = false) {
     this.renderer.resize(width, height, updateCss);
     this.root.width = width;
@@ -14275,11 +14451,6 @@ class Engine extends SceneTree {
       this._render(this.renderer);
     });
   }
-  destroy() {
-    super.destroy();
-    this.enableAutoResize(false);
-    this.renderer.destroy();
-  }
   toPixels() {
     return this.renderer.toPixels();
   }
@@ -14322,7 +14493,21 @@ class Engine extends SceneTree {
     }
     return canvas2;
   }
+  destroy() {
+    this._resizeObserver?.disconnect();
+    this.renderer.destroy();
+    super.destroy();
+  }
 }
+__decorateClass([
+  modernIdoc.property({ alias: "root.msaa" })
+], Engine.prototype, "msaa");
+__decorateClass([
+  modernIdoc.property({ fallback: false })
+], Engine.prototype, "autoResize");
+__decorateClass([
+  modernIdoc.property({ fallback: false })
+], Engine.prototype, "autoStart");
 
 let engine;
 const queue = [];