modern-canvas 0.5.1 → 0.6.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineProperty, property, getDeclarations, parseColor, RawWeakMap as RawWeakMap$1, isGradient, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
+import { defineProperty, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
@@ -6,26 +6,24 @@ import { Text, textDefaultStyle } from 'modern-text';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 
 const customNodes = /* @__PURE__ */ new Map();
-function customNode(tag, defaultProperties) {
+function customNode(name, defaultProperties) {
   return function(constructor) {
-    Object.defineProperty(constructor.prototype, "tag", {
-      value: tag,
+    Object.defineProperty(constructor.prototype, "is", {
+      value: name,
       enumerable: true,
       configurable: true
     });
     if (defaultProperties) {
       Object.keys(defaultProperties).forEach((key) => {
-        defineProperty(constructor, key, { default: defaultProperties[key] });
+        defineProperty(constructor.prototype, key, {
+          fallback: defaultProperties[key]
+        });
       });
     }
-    customNodes.set(tag, constructor);
+    customNodes.set(name, constructor);
   };
 }
 
-function protectedProperty(options) {
-  return property({ ...options, protected: true });
-}
-
 function createNode(tag = "node", options = {}) {
   const Klass = customNodes.get(tag);
   if (!Klass) {
@@ -204,15 +202,50 @@ class EventEmitter {
   }
 }
 
-let UID$1 = 0;
+let IID = 0;
 class CoreObject extends EventEmitter {
-  instanceId = ++UID$1;
-  _defaultProperties;
+  instanceId = ++IID;
+  _customPropertyAccessor;
+  _properties = /* @__PURE__ */ new Map();
   _updatedProperties = /* @__PURE__ */ new Map();
   _changedProperties = /* @__PURE__ */ new Set();
   _updatingPromise = Promise.resolve();
   _updating = false;
-  is(target) {
+  useCustomPropertyAccessor(accessor) {
+    this._customPropertyAccessor = accessor;
+    this.getPropertyDeclarations().forEach((declaration, key) => {
+      const newValue = accessor.get(key, () => void 0);
+      const oldValue = this._properties.get(key);
+      if (newValue === void 0) {
+        if (oldValue !== void 0) {
+          accessor.set(key, oldValue);
+        }
+      } else if (newValue !== oldValue) {
+        this._properties.set(key, newValue);
+        this._updateProperty(key, newValue, oldValue, declaration);
+        this.emit("updateProperty", key, newValue, oldValue, declaration);
+      }
+    });
+    return this;
+  }
+  getter(key, context) {
+    if (context.declaration.protected) {
+      return this[context.internalKey];
+    } else {
+      return this._customPropertyAccessor ? this._customPropertyAccessor.get(key, () => this._properties.get(key)) : this._properties.get(key);
+    }
+  }
+  setter(key, value, context) {
+    if (context.declaration.protected) {
+      this[context.internalKey] = value;
+    } else {
+      if (this._customPropertyAccessor) {
+        this._customPropertyAccessor.set(key, value);
+      }
+      this._properties.set(key, value);
+    }
+  }
+  equal(target) {
     return Boolean(target && this.instanceId === target.instanceId);
   }
   async _enqueueUpdate() {
@@ -247,17 +280,6 @@ class CoreObject extends EventEmitter {
   getPropertyDeclaration(key) {
     return this.getPropertyDeclarations().get(key);
   }
-  getDefaultProperties() {
-    if (!this._defaultProperties) {
-      this._defaultProperties = {};
-      for (const [name, property] of this.getPropertyDeclarations()) {
-        if (!property.protected && !property.alias) {
-          this._defaultProperties[name] = typeof property.default === "function" ? property.default() : property.default;
-        }
-      }
-    }
-    return this._defaultProperties;
-  }
   getProperty(key) {
     return this[key];
   }
@@ -286,10 +308,16 @@ class CoreObject extends EventEmitter {
   }
   resetProperties() {
     for (const [name, property] of this.getPropertyDeclarations()) {
-      this.setProperty(name, property.default);
+      this.setProperty(
+        name,
+        typeof property.fallback === "function" ? property.fallback() : property.fallback
+      );
     }
     return this;
   }
+  onUpdateProperty(key, newValue, oldValue, declaration) {
+    this.requestUpdate(key, newValue, oldValue, declaration);
+  }
   requestUpdate(key, newValue, oldValue, declaration) {
     if (key !== void 0) {
       if (!Object.is(newValue, oldValue)) {
@@ -306,11 +334,12 @@ class CoreObject extends EventEmitter {
       this._updatingPromise = this._enqueueUpdate();
     }
   }
-  toJSON() {
+  toPropsJSON() {
     const json = {};
-    const properties = this.getProperties(Array.from(this._changedProperties));
-    for (const key in properties) {
-      const value = properties[key];
+    this._properties.forEach((value, key) => {
+      if (value === void 0) {
+        return;
+      }
       if (value && typeof value === "object") {
         if ("toJSON" in value && typeof value.toJSON === "function") {
           json[key] = value.toJSON();
@@ -320,9 +349,12 @@ class CoreObject extends EventEmitter {
       } else {
         json[key] = value;
       }
-    }
+    });
     return json;
   }
+  toJSON() {
+    return this.toPropsJSON();
+  }
   clone() {
     return new this.constructor(this.toJSON());
   }
@@ -2115,13 +2147,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$R = Object.defineProperty;
-var __decorateClass$Y = (decorators, target, key, kind) => {
+var __defProp$Q = 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$R(target, key, result);
+  if (result) __defProp$Q(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2164,11 +2196,11 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$Y([
-  property({ default: 24 })
+__decorateClass$X([
+  property({ fallback: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$Y([
-  property({ default: 1 })
+__decorateClass$X([
+  property({ fallback: 1 })
 ], MainLoop.prototype, "speed");
 
 class Renderer {
@@ -4469,13 +4501,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$Q = Object.defineProperty;
-var __decorateClass$X = (decorators, target, key, kind) => {
+var __defProp$P = 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$Q(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4519,20 +4551,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$X([
-  protectedProperty({ default: null })
+__decorateClass$W([
+  property({ protected: true, default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$X([
-  protectedProperty({ default: false })
+__decorateClass$W([
+  property({ protected: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$P = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __defProp$O = 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$P(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4576,26 +4608,23 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$W([
-  protectedProperty({ default: null })
+__decorateClass$V([
+  property({ protected: true, default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$W([
-  protectedProperty({ default: false })
+__decorateClass$V([
+  property({ protected: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$O = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __defProp$N = 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$O(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
-  stride;
-  offset;
-  divisor;
   needsUpload = false;
   constructor(options) {
     super();
@@ -4626,26 +4655,26 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$V([
-  protectedProperty()
+__decorateClass$U([
+  property({ protected: true })
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$V([
-  protectedProperty({ default: 0 })
+__decorateClass$U([
+  property({ fallback: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$V([
-  protectedProperty({ default: false })
+__decorateClass$U([
+  property({ fallback: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$V([
-  protectedProperty({ default: "float" })
+__decorateClass$U([
+  property({ fallback: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$V([
-  protectedProperty()
+__decorateClass$U([
+  property()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$V([
-  protectedProperty()
+__decorateClass$U([
+  property()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$V([
-  protectedProperty()
+__decorateClass$U([
+  property()
 ], VertexAttribute.prototype, "divisor");
 
 class QuadGeometry extends Geometry {
@@ -4888,13 +4917,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$N = Object.defineProperty;
-var __decorateClass$U = (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$N(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5020,23 +5049,23 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$U([
-  protectedProperty()
+__decorateClass$T([
+  property({ protected: true })
 ], Texture2D.prototype, "source");
-__decorateClass$U([
-  property({ default: 0 })
+__decorateClass$T([
+  property({ fallback: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$U([
-  property({ default: 0 })
+__decorateClass$T([
+  property({ fallback: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$U([
-  property({ default: "linear" })
+__decorateClass$T([
+  property({ fallback: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$U([
-  property({ default: "clamp_to_edge" })
+__decorateClass$T([
+  property({ fallback: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$U([
-  property({ default: 1 })
+__decorateClass$T([
+  property({ fallback: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
 class AnimatedTexture extends Resource {
@@ -5065,13 +5094,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$T = (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$M(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5090,8 +5119,8 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$T([
-  property({ default: 2 })
+__decorateClass$S([
+  property()
 ], CanvasTexture.prototype, "pixelRatio");
 
 class ColorTexture extends Texture2D {
@@ -5110,6 +5139,8 @@ class GradientTexture extends Texture2D {
     return isGradient(value);
   }
   static linearGradient(linearGradient, width, height) {
+    width = width || 1;
+    height = height || 1;
     const canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
@@ -5293,13 +5324,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$S = (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$L(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5543,11 +5574,11 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$S([
-  protectedProperty({ default: true })
+__decorateClass$R([
+  property({ protected: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$S([
-  protectedProperty({ default: 0 })
+__decorateClass$R([
+  property({ protected: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
 
@@ -5605,22 +5636,22 @@ class Children extends Array {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (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$K(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
-const tagUidMap = {};
-function getTagUid(tag) {
-  let uid = tagUidMap[tag] ?? 0;
-  uid++;
-  tagUidMap[tag] = uid;
-  return uid;
+const iidMap = {};
+function getNodeIid(key) {
+  let iid = iidMap[key] ?? 0;
+  iid++;
+  iidMap[key] = iid;
+  return iid;
 }
 let Node = class extends CoreObject {
   _readyed = false;
@@ -5633,7 +5664,7 @@ let Node = class extends CoreObject {
     this._onReady = this._onReady.bind(this);
     this._onProcess = this._onProcess.bind(this);
     this.setProperties({
-      name: `${this.tag}:${getTagUid(this.tag)}`,
+      name: `${this.is}:${getNodeIid(this.is)}`,
       ...properties
     }).append(nodes);
     this.on("treeEnter", this._onTreeEnter).on("treeExit", this._onTreeExit).on("parented", this._onParented).on("unparented", this._onUnparented).on("ready", this._onReady).on("process", this._onProcess);
@@ -5683,7 +5714,7 @@ let Node = class extends CoreObject {
   }
   setTree(tree) {
     const oldTree = this._tree;
-    if (!tree?.is(oldTree)) {
+    if (!tree?.equal(oldTree)) {
       if (oldTree) {
         this.emit("treeExit", oldTree);
       }
@@ -5723,7 +5754,7 @@ let Node = class extends CoreObject {
     return this._parent;
   }
   setParent(parent) {
-    if (!this._parent?.is(parent)) {
+    if (!this._parent?.equal(parent)) {
       const oldParent = this._parent;
       if (oldParent) {
         this.emit("unparented", oldParent);
@@ -5899,7 +5930,7 @@ let Node = class extends CoreObject {
     this.getNode(path)?.remove();
   }
   addSibling(sibling) {
-    if (this.is(sibling) || !this.hasParent() || sibling.hasParent()) {
+    if (this.equal(sibling) || !this.hasParent() || sibling.hasParent()) {
       return this;
     }
     sibling.internalMode = this.internalMode;
@@ -5951,14 +5982,14 @@ let Node = class extends CoreObject {
     });
   }
   insertBefore(node, child) {
-    if (!child.hasParent() || !this.is(child.parent)) {
+    if (!child.hasParent() || !this.equal(child.parent)) {
       return node;
     }
     this.moveChild(node, child.getIndex());
     return node;
   }
   appendChild(node, internalMode = node.internalMode) {
-    if (this.is(node) || node.hasParent()) {
+    if (this.equal(node) || node.hasParent()) {
       return node;
     }
     switch (internalMode) {
@@ -5978,7 +6009,7 @@ let Node = class extends CoreObject {
     return node;
   }
   moveChild(node, toIndex, internalMode = node.internalMode) {
-    if (this.is(node) || node.hasParent() && !this.is(node.parent)) {
+    if (this.equal(node) || node.hasParent() && !this.equal(node.parent)) {
       return this;
     }
     const fromArray = this._children.getInternal(node.internalMode);
@@ -6005,7 +6036,7 @@ let Node = class extends CoreObject {
   }
   removeChild(child) {
     const index = child.getIndex();
-    if (this.is(child.parent) && index > -1) {
+    if (this.equal(child.parent) && index > -1) {
       this._children.getInternal(child.internalMode).splice(index, 1);
       child.setParent(void 0);
       this.emit("removeChild", child, index);
@@ -6063,61 +6094,64 @@ let Node = class extends CoreObject {
   }
   clone() {
     return new this.constructor(
-      this.toJSON().props,
+      this.toPropsJSON(),
       this._children.internal
     );
   }
   toJSON() {
     return {
-      tag: this.tag,
-      props: super.toJSON(),
+      ...super.toJSON(),
+      is: this.is,
       children: [...this._children.map((child) => child.toJSON())]
     };
   }
-  static parse(JSON) {
-    if (Array.isArray(JSON)) {
-      return JSON.map((val) => this.parse(val));
+  static parse(value) {
+    if (Array.isArray(value)) {
+      return value.map((val) => this.parse(val));
     }
-    const { tag, props, children } = JSON;
-    const NodeClass = customNodes.get(tag) ?? Node;
-    const node = new NodeClass(props);
+    const { is, props, children } = value;
+    const Class = customNodes.get(is) ?? Node;
+    const node = new Class(props);
     children?.forEach((child) => node.appendChild(this.parse(child)));
     return node;
   }
 };
-__decorateClass$R([
-  property()
+__decorateClass$Q([
+  property({ fallback: idGenerator() })
+], Node.prototype, "id", 2);
+__decorateClass$Q([
+  property({ fallback: idGenerator() })
 ], Node.prototype, "name", 2);
-__decorateClass$R([
-  property()
-], Node.prototype, "mask", 2);
-__decorateClass$R([
-  property({ default: "inherit" })
+__decorateClass$Q([
+  property({ fallback: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$R([
-  property({ default: "default" })
+__decorateClass$Q([
+  property({ fallback: "default" })
 ], Node.prototype, "processSortMode", 2);
-__decorateClass$R([
-  property({ default: "inherit" })
+__decorateClass$Q([
+  property({ fallback: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$R([
-  property({ default: "default" })
+__decorateClass$Q([
+  property({ fallback: "default" })
 ], Node.prototype, "internalMode", 2);
-__decorateClass$R([
+__decorateClass$Q([
   property({ default: () => ({}) })
 ], Node.prototype, "meta", 2);
-Node = __decorateClass$R([
+__decorateClass$Q([
+  property({ protected: true })
+], Node.prototype, "mask", 2);
+Node = __decorateClass$Q([
   customNode("Node")
 ], Node);
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (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$J(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6177,30 +6211,30 @@ let TimelineNode = class extends Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$Q([
-  property({ default: 0 })
+__decorateClass$P([
+  property({ fallback: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$Q([
-  property({ default: 0 })
+__decorateClass$P([
+  property({ fallback: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$Q([
-  property({ default: false })
+__decorateClass$P([
+  property({ fallback: false })
 ], TimelineNode.prototype, "paused", 2);
-__decorateClass$Q([
-  protectedProperty()
+__decorateClass$P([
+  property({ protected: true, fallback: false })
 ], TimelineNode.prototype, "insideTimeRange", 2);
-TimelineNode = __decorateClass$Q([
+TimelineNode = __decorateClass$P([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (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$I(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6209,15 +6243,15 @@ let Viewport = class extends Node {
     this.flipY = flipY;
     this._projection.flipY(flipY);
   }
-  get valid() {
-    return Boolean(this.width && this.height);
-  }
   _projection = new Projection2D();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new ViewportTexture(), needsUpload: false },
     { texture: new ViewportTexture(), needsUpload: false }
   ];
+  get valid() {
+    return Boolean(this.width && this.height);
+  }
   get framebuffer() {
     return this._framebuffers[this._framebufferIndex];
   }
@@ -6338,33 +6372,34 @@ let Viewport = class extends Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$P([
-  property({ default: 0 })
+__decorateClass$O([
+  property({ fallback: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$P([
-  property({ default: 0 })
+__decorateClass$O([
+  property({ fallback: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$P([
-  property({ default: 0 })
+__decorateClass$O([
+  property({ fallback: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$P([
-  property({ default: 0 })
+__decorateClass$O([
+  property({ fallback: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$P([
+Viewport = __decorateClass$O([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (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$H(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
+  material;
   get _effectMode() {
     return this.effectMode ?? "parent";
   }
@@ -6441,10 +6476,10 @@ let Effect = class extends TimelineNode {
       return;
     switch (this._effectMode) {
       case "transition":
-        if (node.is(this._previousSibling)) {
+        if (node.equal(this._previousSibling)) {
           this._previousSibling = void 0;
           renderStack.push(this);
-        } else if (node.is(this._nextSibling)) {
+        } else if (node.equal(this._nextSibling)) {
           this._nextSibling = void 0;
           renderStack.push(this);
         }
@@ -6462,7 +6497,7 @@ let Effect = class extends TimelineNode {
     let start;
     let end;
     calls.forEach((call, index) => {
-      if (call.renderable.is(this._parent) || call.renderable.parent?.is(this._parent)) {
+      if (call.renderable.equal(this._parent) || call.renderable.parent?.equal(this._parent)) {
         start = start ?? index;
         end = index;
       }
@@ -6602,31 +6637,31 @@ let Effect = class extends TimelineNode {
     }
   }
 };
-__decorateClass$O([
-  protectedProperty()
+__decorateClass$N([
+  property({ protected: true })
 ], Effect.prototype, "material", 2);
-__decorateClass$O([
+__decorateClass$N([
   property()
 ], Effect.prototype, "effectMode", 2);
-__decorateClass$O([
-  property({ default: "" })
+__decorateClass$N([
+  property()
 ], Effect.prototype, "glsl", 2);
-__decorateClass$O([
-  property({ default: "" })
+__decorateClass$N([
+  property()
 ], Effect.prototype, "glslSrc", 2);
-Effect = __decorateClass$O([
+Effect = __decorateClass$N([
   customNode("Effect")
 ], Effect);
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$M = (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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
@@ -6686,43 +6721,43 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$N([
-  property({ default: 1 })
+__decorateClass$M([
+  property()
 ], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$N([
+ColorAdjustEffect = __decorateClass$M([
   customNode("ColorAdjustEffect")
 ], ColorAdjustEffect);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
@@ -6802,22 +6837,22 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$M([
+__decorateClass$L([
   property()
 ], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$M([
+ColorFilterEffect = __decorateClass$L([
   customNode("ColorFilterEffect")
 ], ColorFilterEffect);
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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$E(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
@@ -6893,25 +6928,25 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$L([
-  property({ default: () => [] })
+__decorateClass$K([
+  property()
 ], ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$L([
-  property({ default: 0.5 })
+__decorateClass$K([
+  property()
 ], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$L([
+ColorOverlayEffect = __decorateClass$K([
   customNode("ColorOverlayEffect")
 ], ColorOverlayEffect);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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$D(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
@@ -6978,25 +7013,25 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$K([
-  property({ default: () => [] })
+__decorateClass$J([
+  property()
 ], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$K([
-  property({ default: 0.5 })
+__decorateClass$J([
+  property()
 ], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$K([
+ColorRemoveEffect = __decorateClass$J([
   customNode("ColorRemoveEffect")
 ], ColorRemoveEffect);
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (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$C(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
@@ -7085,13 +7120,13 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$J([
-  property({ default: [] })
+__decorateClass$I([
+  property()
 ], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$J([
-  property({ default: 0.05 })
+__decorateClass$I([
+  property()
 ], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$J([
+ColorReplaceEffect = __decorateClass$I([
   customNode("ColorReplaceEffect")
 ], ColorReplaceEffect);
 
@@ -7246,14 +7281,14 @@ class CanvasContext extends Path2D {
   }
 }
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+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$B(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -7271,7 +7306,7 @@ let CanvasItem = class extends TimelineNode {
   // Batch render
   context = new CanvasContext();
   _resetContext = true;
-  _redrawing = false;
+  _redrawing = true;
   _relayouting = false;
   _repainting = false;
   _originalBatchables = [];
@@ -7340,16 +7375,16 @@ let CanvasItem = class extends TimelineNode {
     this.emit("draw");
   }
   _redraw() {
-    this._tree?.log(this.name, "redrawing");
+    this._tree?.log(this.name, "drawing");
     this._draw();
     return this.context.toBatchables();
   }
   _relayout(batchables) {
-    this._tree?.log(this.name, "relayouting");
+    this._tree?.log(this.name, "layouting");
     return batchables;
   }
   _repaint(batchables) {
-    this._tree?.log(this.name, "repainting");
+    this._tree?.log(this.name, "painting");
     return batchables.map((batchable) => {
       return {
         ...batchable,
@@ -7415,19 +7450,19 @@ let CanvasItem = class extends TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$I([
+__decorateClass$H([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$I([
+__decorateClass$H([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$I([
-  protectedProperty({ default: true })
+__decorateClass$H([
+  property({ protected: true, fallback: true })
 ], CanvasItem.prototype, "visible", 2);
-__decorateClass$I([
-  protectedProperty({ default: 1 })
+__decorateClass$H([
+  property({ protected: true, fallback: 1 })
 ], CanvasItem.prototype, "opacity", 2);
-CanvasItem = __decorateClass$I([
+CanvasItem = __decorateClass$H([
   customNode("CanvasItem")
 ], CanvasItem);
 
@@ -7457,14 +7492,14 @@ class RenderStack {
   }
 }
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+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$A(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -7509,29 +7544,29 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$H([
-  property({ default: 0 })
+__decorateClass$G([
+  property({ fallback: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$H([
-  property({ default: 0 })
+__decorateClass$G([
+  property({ fallback: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$H([
-  property({ default: Number.MAX_SAFE_INTEGER })
+__decorateClass$G([
+  property({ fallback: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$H([
-  property({ default: false })
+__decorateClass$G([
+  property({ fallback: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$H([
+Timeline = __decorateClass$G([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$z = Object.defineProperty;
-var __decorateClass$G = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$F = (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$z(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7539,6 +7574,7 @@ class SceneTree extends MainLoop {
   renderStack = new RenderStack();
   root = new Viewport(true).setTree(this);
   timeline;
+  nodes = /* @__PURE__ */ new Map();
   _backgroundColor = new Color();
   _currentViewport;
   getCurrentViewport() {
@@ -7604,19 +7640,19 @@ class SceneTree extends MainLoop {
     this.input.removeEventListeners();
   }
 }
-__decorateClass$G([
-  property({ default: false })
+__decorateClass$F([
+  property({ fallback: false })
 ], SceneTree.prototype, "processPaused");
-__decorateClass$G([
+__decorateClass$F([
   property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$G([
-  protectedProperty({ default: false })
+__decorateClass$F([
+  property({ protected: true, fallback: false })
 ], SceneTree.prototype, "debug");
 
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (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 = (decorator(result)) || result;
@@ -7628,7 +7664,7 @@ let Transition = class extends Effect {
     this.setProperties(properties).append(children);
   }
 };
-Transition = __decorateClass$F([
+Transition = __decorateClass$E([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7636,15 +7672,15 @@ Transition = __decorateClass$F([
   })
 ], Transition);
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$y(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$w(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$D = (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$y(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -7750,25 +7786,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$E([
+__decorateClass$D([
   property({ default: 4 })
 ], GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$E([
+__decorateClass$D([
   property({ default: 3 })
 ], GaussianBlurEffect.prototype, "quality", 2);
-GaussianBlurEffect = __decorateClass$E([
+GaussianBlurEffect = __decorateClass$D([
   customNode("GaussianBlurEffect")
 ], GaussianBlurEffect);
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$x(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$v(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$C = (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$x(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -7832,34 +7868,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$D([
-  property({ default: 0 })
+__decorateClass$C([
+  property()
 ], DropShadowEffect.prototype, "color", 2);
-__decorateClass$D([
-  property({ default: 4 })
+__decorateClass$C([
+  property()
 ], DropShadowEffect.prototype, "blur", 2);
-__decorateClass$D([
-  property({ default: 4 })
+__decorateClass$C([
+  property()
 ], DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$D([
-  property({ default: 4 })
+__decorateClass$C([
+  property()
 ], DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$D([
-  property({ default: false })
+__decorateClass$C([
+  property()
 ], DropShadowEffect.prototype, "shadowOnly", 2);
-DropShadowEffect = __decorateClass$D([
+DropShadowEffect = __decorateClass$C([
   customNode("DropShadowEffect")
 ], DropShadowEffect);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$w(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$u(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$B = (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$w(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -7904,22 +7940,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$C([
-  property({ default: 5 })
+__decorateClass$B([
+  property()
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$C([
+EmbossEffect = __decorateClass$B([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$v(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$t(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$A = (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$v(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8093,46 +8129,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$B([
-  property({ default: 10 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$B([
-  property({ default: 512 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$B([
-  property({ default: 100 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$B([
-  property({ default: 0 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$B([
-  property({ default: 2 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$B([
-  property({ default: 0 })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$B([
-  property({ default: [2, 2] })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$B([
-  property({ default: [-10, 4] })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$B([
-  property({ default: [10, -4] })
+__decorateClass$A([
+  property()
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$B([
+GlitchEffect = __decorateClass$A([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$u(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$s(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$z = (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$u(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8310,39 +8346,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$A([
-  property({ default: 0 })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "time", 2);
-__decorateClass$A([
-  property({ default: 30 })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$A([
-  property({ default: 0.5 })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$A([
-  property({ default: 2.5 })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$A([
-  property({ default: true })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$A([
-  property({ default: () => [0, 0] })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$A([
-  property({ default: 1 })
+__decorateClass$z([
+  property()
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$A([
+GodrayEffect = __decorateClass$z([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (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$t(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8373,7 +8409,6 @@ void main(void) {
     gl_FragColor = color;
 }`;
 let KawaseBlurEffect = class extends Effect {
-  material;
   _kernels = [0];
   constructor(properties, children = []) {
     super();
@@ -8433,33 +8468,32 @@ void main() {
     });
   }
 };
-__decorateClass$z([
-  property({ default: 4 })
+__decorateClass$y([
+  property()
 ], KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$z([
-  property({ default: 3 })
+__decorateClass$y([
+  property()
 ], KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$z([
-  property({ default: [1, 1] })
+__decorateClass$y([
+  property()
 ], KawaseBlurEffect.prototype, "pixelSize", 2);
-KawaseBlurEffect = __decorateClass$z([
+KawaseBlurEffect = __decorateClass$y([
   customNode("KawaseBlurEffect")
 ], KawaseBlurEffect);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$x = (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$s(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
 let MaskEffect = class extends Effect {
-  texture;
   constructor(properties, children = []) {
     super();
     this.setProperties(properties).append(children);
@@ -8543,25 +8577,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$y([
-  protectedProperty()
+__decorateClass$x([
+  property({ protected: true })
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$y([
+MaskEffect = __decorateClass$x([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$w = (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$r(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -8601,7 +8635,6 @@ void main(void) {
     gl_FragColor = contentColor + outlineColor;
 }`;
 let OutlineEffect = class extends Effect {
-  material;
   static getAngleStep(quality) {
     return Number.parseFloat(
       (Math.PI * 2 / Math.max(
@@ -8649,40 +8682,40 @@ void main() {
 };
 __publicField$7(OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$x([
-  property({ default: 0 })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "color", 2);
-__decorateClass$x([
-  property({ default: 1 })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "width", 2);
-__decorateClass$x([
-  property({ default: "solid" })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "style", 2);
-__decorateClass$x([
+__decorateClass$w([
   property()
 ], OutlineEffect.prototype, "image", 2);
-__decorateClass$x([
-  property({ default: 1 })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "opacity", 2);
-__decorateClass$x([
-  property({ default: 0.1 })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "quality", 2);
-__decorateClass$x([
-  property({ default: false })
+__decorateClass$w([
+  property()
 ], OutlineEffect.prototype, "knockout", 2);
-OutlineEffect = __decorateClass$x([
+OutlineEffect = __decorateClass$w([
   customNode("OutlineEffect")
 ], OutlineEffect);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (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$q(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -8738,22 +8771,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$w([
-  property({ default: 10 })
+__decorateClass$v([
+  property()
 ], PixelateEffect.prototype, "strength", 2);
-PixelateEffect = __decorateClass$w([
+PixelateEffect = __decorateClass$v([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$p(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$n(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$u = (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$p(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -8866,29 +8899,29 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$v([
+__decorateClass$u([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$v([
-  property({ default: 20 })
+__decorateClass$u([
+  property()
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$v([
-  property({ default: -1 })
+__decorateClass$u([
+  property()
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$v([
-  property({ default: 0.1 })
+__decorateClass$u([
+  property()
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$v([
+ZoomBlurEffect = __decorateClass$u([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$o = Object.defineProperty;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __defProp$n = 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$o(target, key, result);
+  if (result) __defProp$n(target, key, result);
   return result;
 };
 class BaseElement2DFill extends CoreObject {
@@ -8933,6 +8966,7 @@ class BaseElement2DFill extends CoreObject {
         this.parent.size.height
       );
     } else if (!isNone(this.image)) {
+      this.parent.tree?.log(`load image ${this.image}`);
       return await assets.texture.load(this.image);
     } else {
       return void 0;
@@ -8995,47 +9029,47 @@ class BaseElement2DFill extends CoreObject {
     });
   }
 }
-__decorateClass$u([
-  property({ default: true })
+__decorateClass$t([
+  property({ fallback: true })
 ], BaseElement2DFill.prototype, "enabled");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "color");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "image");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "linearGradient");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "radialGradient");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "cropRect");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "stretchRect");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "dpi");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$u([
+__decorateClass$t([
   property()
 ], BaseElement2DFill.prototype, "opacity");
 
-var __defProp$n = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$m = 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$n(target, key, result);
+  if (result) __defProp$m(target, key, result);
   return result;
 };
 class BaseElement2DBackground extends BaseElement2DFill {
@@ -9045,17 +9079,17 @@ class BaseElement2DBackground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$t([
+__decorateClass$s([
   property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
-var __defProp$m = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$l = 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$m(target, key, result);
+  if (result) __defProp$l(target, key, result);
   return result;
 };
 class BaseElement2DForeground extends BaseElement2DFill {
@@ -9065,17 +9099,17 @@ class BaseElement2DForeground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$s([
+__decorateClass$r([
   property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$r = (decorators, target, key, kind) => {
+var __defProp$k = 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$l(target, key, result);
+  if (result) __defProp$k(target, key, result);
   return result;
 };
 class BaseElement2DOutline extends BaseElement2DFill {
@@ -9108,26 +9142,23 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.stroke({ disableWrapMode });
   }
 }
-__decorateClass$r([
-  property({ default: true })
-], BaseElement2DOutline.prototype, "enabled");
-__decorateClass$r([
-  property({ default: 0 })
+__decorateClass$q([
+  property({ fallback: "#00000000" })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$r([
-  property({ default: 0 })
+__decorateClass$q([
+  property({ fallback: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$r([
-  property({ default: "solid" })
+__decorateClass$q([
+  property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
 
-var __defProp$k = Object.defineProperty;
-var __decorateClass$q = (decorators, target, key, kind) => {
+var __defProp$j = 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$k(target, key, result);
+  if (result) __defProp$j(target, key, result);
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
@@ -9167,29 +9198,29 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$q([
-  property({ default: true })
+__decorateClass$p([
+  property({ fallback: true })
 ], BaseElement2DShadow.prototype, "enabled");
-__decorateClass$q([
-  property({ default: "#000000" })
+__decorateClass$p([
+  property({ fallback: "#000000FF" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$q([
-  property({ default: 0 })
+__decorateClass$p([
+  property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$q([
-  property({ default: 0 })
+__decorateClass$p([
+  property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$q([
-  property({ default: 0 })
+__decorateClass$p([
+  property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
-var __defProp$j = Object.defineProperty;
-var __decorateClass$p = (decorators, target, key, kind) => {
+var __defProp$i = 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$j(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 class BaseElement2DShape extends CoreObject {
@@ -9264,19 +9295,19 @@ class BaseElement2DShape extends CoreObject {
     }
   }
 }
-__decorateClass$p([
-  property({ default: true })
+__decorateClass$o([
+  property({ fallback: true })
 ], BaseElement2DShape.prototype, "enabled");
-__decorateClass$p([
+__decorateClass$o([
   property()
 ], BaseElement2DShape.prototype, "preset");
-__decorateClass$p([
+__decorateClass$o([
   property()
 ], BaseElement2DShape.prototype, "svg");
-__decorateClass$p([
+__decorateClass$o([
   property()
 ], BaseElement2DShape.prototype, "viewBox");
-__decorateClass$p([
+__decorateClass$o([
   property({ default: () => [] })
 ], BaseElement2DShape.prototype, "paths");
 
@@ -9287,23 +9318,18 @@ class BaseElement2DStyle extends Resource {
   }
 }
 const defaultStyles$1 = getDefaultStyle();
-delete defaultStyles$1.top;
-delete defaultStyles$1.left;
-delete defaultStyles$1.width;
-delete defaultStyles$1.height;
 for (const key in defaultStyles$1) {
-  defineProperty(BaseElement2DStyle, key, {
-    default: defaultStyles$1[key]
-  });
+  const fallback = defaultStyles$1[key];
+  defineProperty(BaseElement2DStyle.prototype, key, { fallback });
 }
 
-var __defProp$i = Object.defineProperty;
-var __decorateClass$o = (decorators, target, key, kind) => {
+var __defProp$h = 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$i(target, key, result);
+  if (result) __defProp$h(target, key, result);
   return result;
 };
 class BaseElement2DText extends CoreObject {
@@ -9312,7 +9338,6 @@ class BaseElement2DText extends CoreObject {
     this.parent = parent;
   }
   base = new Text();
-  texture = new CanvasTexture();
   measureResult;
   setProperties(properties) {
     return super.setProperties(
@@ -9351,55 +9376,49 @@ class BaseElement2DText extends CoreObject {
   }
   canDraw() {
     return Boolean(
-      this.enabled && !/^\s*$/.test(this.base.toString()) && this.texture?.valid
+      this.enabled && !/^\s*$/.test(this.base.toString())
     );
   }
   draw() {
-    this.base.render({
-      pixelRatio: this.texture.pixelRatio,
-      view: this.texture.source
-    });
-    this.texture.requestUpload();
-    const textWidth = this.measureResult?.boundingBox.width ?? this.parent.size.width;
-    const textHeight = this.measureResult?.boundingBox.height ?? this.parent.size.height;
     const ctx = this.parent.context;
-    ctx.fillStyle = this.texture;
-    ctx.uvTransform = new Transform2D().scale(1 / textWidth, 1 / textHeight);
-    ctx.vertTransform = () => {
-      const parent = this.parent;
-      const origin = parent.getTransformOrigin();
-      return new Transform2D().translate(-origin.x, -origin.y).scale(
-        parent.globalScale.x > 0 ? 1 : -1,
-        parent.globalScale.y > 0 ? 1 : -1
-      ).translate(origin.x, origin.y);
-    };
-    ctx.fill();
+    this.base.update();
+    this.base.paragraphs.forEach((p) => {
+      p.fragments.forEach((f) => {
+        f.characters.forEach((c) => {
+          ctx.fillStyle = c.computedStyle.color;
+          ctx.addPath(c.path);
+          ctx.style.fillRule = "evenodd";
+          ctx.closePath();
+          ctx.fill();
+        });
+      });
+    });
   }
 }
-__decorateClass$o([
-  property({ default: true })
+__decorateClass$n([
+  property({ fallback: true })
 ], BaseElement2DText.prototype, "enabled");
-__decorateClass$o([
-  property({ alias: "base.content" })
+__decorateClass$n([
+  property({ alias: "base.content", fallback: () => [] })
 ], BaseElement2DText.prototype, "content");
-__decorateClass$o([
+__decorateClass$n([
   property({ alias: "base.effects" })
 ], BaseElement2DText.prototype, "effects");
-__decorateClass$o([
-  protectedProperty({ alias: "base.measureDOM" })
+__decorateClass$n([
+  property({ protected: true, alias: "base.measureDOM" })
 ], BaseElement2DText.prototype, "measureDOM");
-__decorateClass$o([
-  protectedProperty({ alias: "base.fonts" })
+__decorateClass$n([
+  property({ protected: true, alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (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$h(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -9501,19 +9520,19 @@ let Node2D = class extends CanvasItem {
     }
   }
 };
-__decorateClass$n([
-  protectedProperty({ default: 0 })
+__decorateClass$m([
+  property({ protected: true, fallback: 0 })
 ], Node2D.prototype, "rotation", 2);
-__decorateClass$n([
-  protectedProperty({ default: 0 })
+__decorateClass$m([
+  property({ protected: true, fallback: 0 })
 ], Node2D.prototype, "globalRotation", 2);
-Node2D = __decorateClass$n([
+Node2D = __decorateClass$m([
   customNode("Node2D")
 ], Node2D);
 
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (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])
       result = (decorator(result)) || result;
@@ -9613,8 +9632,7 @@ let BaseElement2D = class extends Node2D {
     }
     return this;
   }
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  _updateStyleProperty(key, value, oldValue, declaration) {
+  _updateStyleProperty(key, value, _oldValue, _declaration) {
     switch (key) {
       case "width":
       case "height":
@@ -9763,28 +9781,27 @@ let BaseElement2D = class extends Node2D {
       this._text.updateMeasure();
     }
     if (this._background.canDraw()) {
-      this._tree?.log(this.name, "draw background");
+      this._tree?.log(this.name, "background drawing");
       this._shape.drawRect();
       this._background.draw();
     }
     if (this._fill.canDraw()) {
-      this._tree?.log(this.name, "draw fill");
+      this._tree?.log(this.name, "fill drawing");
       this._shape.draw();
       this._fill.draw();
     }
     if (this._outline.canDraw()) {
-      this._tree?.log(this.name, "draw outline");
+      this._tree?.log(this.name, "outline drawing");
       this._shape.draw();
       this._outline.draw();
     }
     if (this._foreground.canDraw()) {
-      this._tree?.log(this.name, "draw foreground");
+      this._tree?.log(this.name, "foreground drawing");
       this._shape.drawRect();
       this._foreground.draw();
     }
     if (this._text.canDraw()) {
-      this._tree?.log(this.name, "draw text");
-      this._shape.drawRect();
+      this._tree?.log(this.name, "text drawing");
       this._text.draw();
     }
     this._drawContent();
@@ -9839,24 +9856,22 @@ let BaseElement2D = class extends Node2D {
     }
   }
   toJSON() {
-    const json = super.toJSON();
     return {
-      ...json,
-      props: {
-        ...json.props,
-        style: this.style.toJSON(),
-        background: this.background.toJSON(),
-        shape: this.shape.toJSON(),
-        fill: this.fill.toJSON(),
-        outline: this.outline.toJSON(),
-        text: this.text.toJSON(),
-        foreground: this.foreground.toJSON(),
-        shadow: this.shadow.toJSON()
-      }
+      is: this.is,
+      ...this.toPropsJSON(),
+      children: [...this._children.map((child) => child.toJSON())],
+      style: this.style.toJSON(),
+      background: this.background.toJSON(),
+      shape: this.shape.toJSON(),
+      fill: this.fill.toJSON(),
+      outline: this.outline.toJSON(),
+      text: this.text.toJSON(),
+      foreground: this.foreground.toJSON(),
+      shadow: this.shadow.toJSON()
     };
   }
 };
-BaseElement2D = __decorateClass$m([
+BaseElement2D = __decorateClass$l([
   customNode("BaseElement2D")
 ], BaseElement2D);
 
@@ -9873,12 +9888,12 @@ const defaultStyles = {
   height: 0
 };
 for (const key in defaultStyles) {
-  defineProperty(Element2DStyle, key, { default: defaultStyles[key] });
+  defineProperty(Element2DStyle.prototype, key, { fallback: defaultStyles[key] });
 }
 
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (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 = (decorator(result)) || result;
@@ -9920,7 +9935,7 @@ let Element2D = class extends BaseElement2D {
     }
   }
 };
-Element2D = __decorateClass$l([
+Element2D = __decorateClass$k([
   customNode("Element2D")
 ], Element2D);
 
@@ -10172,9 +10187,9 @@ class FlexLayout {
   }
 }
 
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (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 = (decorator(result)) || result;
@@ -10251,120 +10266,10 @@ let FlexElement2D = class extends BaseElement2D {
     }
   }
 };
-FlexElement2D = __decorateClass$k([
+FlexElement2D = __decorateClass$j([
   customNode("FlexElement2D")
 ], FlexElement2D);
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (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$g(target, key, result);
-  return result;
-};
-function proxy(options) {
-  return function(target, name) {
-    Object.defineProperty(target.constructor.prototype, name, {
-      get() {
-        if (options?.method) {
-          return (...args) => {
-            this.context[name].call(this.context, ...args);
-            options.redraw && this.requestRedraw();
-            return target;
-          };
-        }
-        return this.context[name];
-      },
-      set(value) {
-        this.context[name] = value;
-      },
-      configurable: true,
-      enumerable: true
-    });
-  };
-}
-let Graphics2D = class extends Node2D {
-  _resetContext = false;
-  lineCap;
-  lineJoin;
-  fillStyle;
-  strokeStyle;
-  lineWidth;
-  miterLimit;
-  drawCircle(x, y, radius) {
-    this.arc(x + radius, y + radius, radius, 0, PI_2);
-    this.fill();
-    return this;
-  }
-  drawEllipse(x, y, width, height) {
-    const rx = width / 2;
-    const ry = height / 2;
-    this.ellipse(x + rx, y + ry, rx, ry, 0, 0, PI_2);
-    this.fill();
-    return this;
-  }
-};
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "lineCap", 2);
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "lineJoin", 2);
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "fillStyle", 2);
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "strokeStyle", 2);
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "lineWidth", 2);
-__decorateClass$j([
-  proxy()
-], Graphics2D.prototype, "miterLimit", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "rect", 2);
-__decorateClass$j([
-  proxy({ method: true, redraw: true })
-], Graphics2D.prototype, "fillRect", 2);
-__decorateClass$j([
-  proxy({ method: true, redraw: true })
-], Graphics2D.prototype, "strokeRect", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "roundRect", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "ellipse", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "arc", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "beginPath", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "moveTo", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "lineTo", 2);
-__decorateClass$j([
-  proxy({ method: true })
-], Graphics2D.prototype, "closePath", 2);
-__decorateClass$j([
-  proxy({ method: true, redraw: true })
-], Graphics2D.prototype, "fill", 2);
-__decorateClass$j([
-  proxy({ method: true, redraw: true })
-], Graphics2D.prototype, "stroke", 2);
-Graphics2D = __decorateClass$j([
-  customNode("Graphics2D")
-], Graphics2D);
-
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
 var __decorateClass$i = (decorators, target, key, kind) => {
@@ -10376,7 +10281,6 @@ var __decorateClass$i = (decorators, target, key, kind) => {
   return result;
 };
 let Image2D = class extends Element2D {
-  texture;
   get currentFrameTexture() {
     return this.texture?.frames[this._frameIndex]?.texture;
   }
@@ -10510,16 +10414,16 @@ let Image2D = class extends Element2D {
   }
 };
 __decorateClass$i([
-  protectedProperty()
+  property({ protected: true })
 ], Image2D.prototype, "texture", 2);
 __decorateClass$i([
-  property({ default: "" })
+  property({ fallback: "" })
 ], Image2D.prototype, "src", 2);
 __decorateClass$i([
   property()
 ], Image2D.prototype, "srcRect", 2);
 __decorateClass$i([
-  property({ default: false })
+  property({ fallback: false })
 ], Image2D.prototype, "gif", 2);
 Image2D = __decorateClass$i([
   customNode("Image2D")
@@ -10596,7 +10500,7 @@ let Lottie2D = class extends TextureRect2D {
   }
 };
 __decorateClass$h([
-  property({ default: "" })
+  property({ fallback: "" })
 ], Lottie2D.prototype, "src", 2);
 Lottie2D = __decorateClass$h([
   customNode("Lottie2D")
@@ -10760,7 +10664,7 @@ let Text2D = class extends TextureRect2D {
   }
 };
 __decorateClass$g([
-  property({ default: false })
+  property({ fallback: false })
 ], Text2D.prototype, "split", 2);
 __decorateClass$g([
   property({ alias: "base.content" })
@@ -10769,10 +10673,10 @@ __decorateClass$g([
   property({ alias: "base.effects" })
 ], Text2D.prototype, "effects", 2);
 __decorateClass$g([
-  protectedProperty({ alias: "base.measureDOM" })
+  property({ protected: true, alias: "base.measureDOM" })
 ], Text2D.prototype, "measureDOM", 2);
 __decorateClass$g([
-  protectedProperty({ alias: "base.fonts" })
+  property({ protected: true, alias: "base.fonts" })
 ], Text2D.prototype, "fonts", 2);
 Text2D = __decorateClass$g([
   customNode("Text2D")
@@ -10831,7 +10735,7 @@ class TransformRect2D extends Element2D {
   }
 }
 __decorateClass$f([
-  property({ default: 6 })
+  property({ fallback: 6 })
 ], TransformRect2D.prototype, "handleSize");
 
 var __defProp$b = Object.defineProperty;
@@ -10895,7 +10799,7 @@ let Video2D = class extends TextureRect2D {
   }
 };
 __decorateClass$e([
-  property({ default: "" })
+  property({ fallback: "" })
 ], Video2D.prototype, "src", 2);
 Video2D = __decorateClass$e([
   customNode("Video2D")
@@ -10969,7 +10873,6 @@ const timingFunctions = {
   easeInOut
 };
 let Animation = class extends TimelineNode {
-  easing;
   _keyframes = [];
   _isFirstUpdatePosition = false;
   _cachedProps = new RawWeakMap$1();
@@ -11229,13 +11132,13 @@ let Animation = class extends TimelineNode {
   }
 };
 __decorateClass$d([
-  property({ default: "parent" })
+  property()
 ], Animation.prototype, "effectMode", 2);
 __decorateClass$d([
-  property({ default: false })
+  property()
 ], Animation.prototype, "loop", 2);
 __decorateClass$d([
-  property({ default: () => [] })
+  property()
 ], Animation.prototype, "keyframes", 2);
 __decorateClass$d([
   property()
@@ -12358,9 +12261,6 @@ var __decorateClass$b = (decorators, target, key, kind) => {
   return result;
 };
 let AudioWaveform = class extends Element2D {
-  src;
-  gap = 0;
-  color = "#000000";
   _audioBuffer;
   _src = IN_BROWSER ? new Texture2D(document.createElement("canvas")) : void 0;
   _needsUpdateTexture = false;
@@ -12545,25 +12445,25 @@ let Range = class extends Control {
   }
 };
 __decorateClass$9([
-  property({ default: false })
+  property({ fallback: false })
 ], Range.prototype, "allowGreater", 2);
 __decorateClass$9([
-  property({ default: false })
+  property({ fallback: false })
 ], Range.prototype, "allowLesser", 2);
 __decorateClass$9([
-  property({ default: 1 })
+  property({ fallback: 1 })
 ], Range.prototype, "page", 2);
 __decorateClass$9([
-  property({ default: 0 })
+  property({ fallback: 0 })
 ], Range.prototype, "minValue", 2);
 __decorateClass$9([
-  property({ default: 100 })
+  property({ fallback: 100 })
 ], Range.prototype, "maxValue", 2);
 __decorateClass$9([
-  property({ default: 0.01 })
+  property({ fallback: 0.01 })
 ], Range.prototype, "step", 2);
 __decorateClass$9([
-  property({ default: 0 })
+  property({ fallback: 0 })
 ], Range.prototype, "value", 2);
 Range = __decorateClass$9([
   customNode("Range")
@@ -12725,31 +12625,31 @@ let Ruler = class extends Control {
   }
 };
 __decorateClass$8([
-  property({ default: 0 })
+  property({ fallback: 0 })
 ], Ruler.prototype, "offsetX", 2);
 __decorateClass$8([
-  property({ default: 0 })
+  property({ fallback: 0 })
 ], Ruler.prototype, "offsetY", 2);
 __decorateClass$8([
-  property({ default: 20 })
+  property({ fallback: 20 })
 ], Ruler.prototype, "thickness", 2);
 __decorateClass$8([
-  property({ default: 3 })
+  property({ fallback: 3 })
 ], Ruler.prototype, "markHeight", 2);
 __decorateClass$8([
-  property({ default: "#b2b6bc" })
+  property({ fallback: "#b2b6bc" })
 ], Ruler.prototype, "color", 2);
 __decorateClass$8([
-  property({ default: "#f9f9fa" })
+  property({ fallback: "#f9f9fa" })
 ], Ruler.prototype, "markBackgroundColor", 2);
 __decorateClass$8([
-  property({ default: "#b2b6bc" })
+  property({ fallback: "#b2b6bc" })
 ], Ruler.prototype, "markColor", 2);
 __decorateClass$8([
-  property({ default: 300 })
+  property({ fallback: 300 })
 ], Ruler.prototype, "gap", 2);
 __decorateClass$8([
-  property({ default: 1 })
+  property({ fallback: 1 })
 ], Ruler.prototype, "gapScale", 2);
 Ruler = __decorateClass$8([
   customNode("Ruler")
@@ -12822,7 +12722,7 @@ let ScrollBar = class extends Range {
   }
 };
 __decorateClass$7([
-  property({ default: "vertical" })
+  property({ fallback: "vertical" })
 ], ScrollBar.prototype, "direction", 2);
 ScrollBar = __decorateClass$7([
   customNode("ScrollBar")
@@ -12933,13 +12833,13 @@ let Scaler = class extends Node {
   }
 };
 __decorateClass$4([
-  property({ default: 1 })
+  property()
 ], Scaler.prototype, "value", 2);
 __decorateClass$4([
-  property({ default: 0.05 })
+  property()
 ], Scaler.prototype, "minValue", 2);
 __decorateClass$4([
-  property({ default: 10 })
+  property()
 ], Scaler.prototype, "maxValue", 2);
 Scaler = __decorateClass$4([
   customNode("Scaler", {
@@ -14079,4 +13979,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, protectedProperty, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };