canvasengine 2.0.0-beta.16 → 2.0.0-beta.17

package/dist/index.js

@@ -10,7 +10,6 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
 // src/engine/directive.ts
 var directives = {};
@@ -990,13 +989,14 @@ function destroyElement(element) {
   if (!element) {
     return;
   }
-  element.propSubscriptions.forEach((sub) => sub.unsubscribe());
-  element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
-  element.effectUnmounts.forEach((fn) => fn?.());
   for (let name in element.directives) {
     element.directives[name].onDestroy?.(element);
   }
-  element.componentInstance.onDestroy?.(element.parent);
+  element.componentInstance.onDestroy(element.parent, () => {
+    element.propSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectUnmounts.forEach((fn) => fn?.());
+  });
 }
 function createComponent(tag, props) {
   if (!components[tag]) {
@@ -1480,7 +1480,7 @@ var ViewportFollow = class extends Directive {
           radius: options.radius()
         });
       }
-    } else {
+    } else if (viewportFollow === null) {
       viewport.plugins.remove("follow");
     }
   }
@@ -1924,14 +1924,24 @@ export * from "@signe/reactive";
 import { Howler } from "howler";
 
 // src/components/Canvas.ts
-import { effect as effect4, signal as signal5 } from "@signe/reactive";
-import { Container as Container3, autoDetectRenderer } from "pixi.js";
-import { loadYoga } from "yoga-layout";
+import { effect as effect3, signal as signal5 } from "@signe/reactive";
+import { Container as Container3 } from "pixi.js";
 
 // src/components/DisplayObject.ts
-import { effect as effect3, signal as signal4 } from "@signe/reactive";
+import { signal as signal4 } from "@signe/reactive";
 import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
+
+// src/utils/functions.ts
+function isPercent(value) {
+  if (!value) return false;
+  if (typeof value === "string") {
+    return value.endsWith("%");
+  }
+  return false;
+}
+
+// src/components/DisplayObject.ts
 var EVENTS2 = [
   "added",
   "childAdded",
@@ -2003,28 +2013,23 @@ var EVENTS2 = [
   "wheelcapture"
 ];
 function DisplayObject(extendClass) {
-  var _canvasContext, _DisplayObject_instances, flexRender_fn, setAlign_fn, setEdgeSize_fn, _a;
+  var _canvasContext, _a;
   return _a = class extends extendClass {
     constructor() {
       super(...arguments);
-      __privateAdd(this, _DisplayObject_instances);
       __privateAdd(this, _canvasContext, null);
       this.isFlex = false;
       this.fullProps = {};
       this.isMounted = false;
-      this._anchorPoints = new ObservablePoint(
-        { _onUpdate: () => {
-        } },
-        0,
-        0
-      );
+      this._anchorPoints = new ObservablePoint({ _onUpdate: () => {
+      } }, 0, 0);
       this.isCustomAnchor = false;
       this.displayWidth = signal4(0);
       this.displayHeight = signal4(0);
       this.overrideProps = [];
-    }
-    get yoga() {
-      return __privateGet(this, _canvasContext)?.Yoga;
+      this.layout = null;
+      this.onBeforeDestroy = null;
+      this.onAfterMount = null;
     }
     get deltaRatio() {
       return __privateGet(this, _canvasContext)?.scheduler?.tick.value.deltaRatio;
@@ -2037,63 +2042,34 @@ function DisplayObject(extendClass) {
           this.on(event, props[event]);
         }
       }
+      if (props.onBeforeDestroy || props["on-before-destroy"]) {
+        this.onBeforeDestroy = props.onBeforeDestroy || props["on-before-destroy"];
+      }
+      if (props.onAfterMount || props["on-after-mount"]) {
+        this.onAfterMount = props.onAfterMount || props["on-after-mount"];
+      }
+      if (props.justifyContent || props.alignItems || props.flexDirection || props.flexWrap || props.alignContent || props.display == "flex" || isPercent(props.width) || isPercent(props.height) || props.isRoot) {
+        this.layout = {};
+        this.isFlex = true;
+      }
     }
-    onMount({ parent, props }, index) {
+    async onMount({ parent, props }, index) {
       __privateSet(this, _canvasContext, props.context);
-      this.node = this.yoga.Node.create();
       if (parent) {
         const instance = parent.componentInstance;
+        if (instance.isFlex && !this.layout) {
+          this.layout = {};
+        }
         if (index === void 0) {
           instance.addChild(this);
         } else {
           instance.addChildAt(this, index);
         }
-        if (instance.layer) this.parentLayer = instance.layer;
         this.isMounted = true;
-        this.effectSize(props.width, props.height);
         this.onUpdate(props);
-        this.parent.node.insertChild(
-          this.node,
-          this.parent.node.getChildCount()
-        );
-        if (parent.props.flexDirection) {
-          this.parent.node.calculateLayout();
-          for (let child of this.parent.children) {
-            const { left, top } = child.getComputedLayout();
-            child.x = left;
-            child.y = top;
-          }
-        }
-      }
-    }
-    effectSize(width, height) {
-      const handleSize = (size, setter, parentSize) => {
-        if (typeof size === "string" && size.endsWith("%")) {
-          effect3(() => {
-            setter(parentSize() * (parseInt(size) / 100));
-            if (this.isFlex) {
-              this.applyFlexLayout();
-            }
-          });
-        } else {
-          setter(+size);
+        if (this.onAfterMount) {
+          await this.onAfterMount();
         }
-      };
-      if (width != void 0)
-        handleSize(width, this.setWidth.bind(this), this.parent.displayWidth);
-      if (height != void 0)
-        handleSize(
-          height,
-          this.setHeight.bind(this),
-          this.parent.displayHeight
-        );
-    }
-    applyFlexLayout() {
-      this.calculateLayout();
-      for (let child of this.children) {
-        const { left, top } = child.node.getComputedLayout();
-        child.x = left;
-        child.y = top;
       }
     }
     onUpdate(props) {
@@ -2109,6 +2085,28 @@ function DisplayObject(extendClass) {
       if (props.anchor !== void 0 && !this.isCustomAnchor) {
         setObservablePoint(this.anchor, props.anchor);
       }
+      if (props.width !== void 0) this.setWidth(props.width);
+      if (props.height !== void 0) this.setHeight(props.height);
+      if (props.minWidth !== void 0) this.setMinWidth(props.minWidth);
+      if (props.minHeight !== void 0) this.setMinHeight(props.minHeight);
+      if (props.maxWidth !== void 0) this.setMaxWidth(props.maxWidth);
+      if (props.maxHeight !== void 0) this.setMaxHeight(props.maxHeight);
+      if (props.aspectRatio !== void 0)
+        this.setAspectRatio(props.aspectRatio);
+      if (props.flexGrow !== void 0) this.setFlexGrow(props.flexGrow);
+      if (props.flexShrink !== void 0) this.setFlexShrink(props.flexShrink);
+      if (props.flexBasis !== void 0) this.setFlexBasis(props.flexBasis);
+      if (props.rowGap !== void 0) this.setRowGap(props.rowGap);
+      if (props.columnGap !== void 0) this.setColumnGap(props.columnGap);
+      if (props.top !== void 0) this.setTop(props.top);
+      if (props.left !== void 0) this.setLeft(props.left);
+      if (props.right !== void 0) this.setRight(props.right);
+      if (props.bottom !== void 0) this.setBottom(props.bottom);
+      if (props.objectFit !== void 0) this.setObjectFit(props.objectFit);
+      if (props.objectPosition !== void 0)
+        this.setObjectPosition(props.objectPosition);
+      if (props.transformOrigin !== void 0)
+        this.setTransformOrigin(props.transformOrigin);
       if (props.skew !== void 0) setObservablePoint(this.skew, props.skew);
       if (props.tint) this.tint = props.tint;
       if (props.rotation !== void 0) this.rotation = props.rotation;
@@ -2163,109 +2161,147 @@ function DisplayObject(extendClass) {
         Object.assign(blurFilter, props.blur);
       }
       this.filters = currentFilters;
-      __privateMethod(this, _DisplayObject_instances, flexRender_fn).call(this, props);
     }
-    onDestroy() {
+    async onDestroy(parent, afterDestroy) {
+      if (this.onBeforeDestroy) {
+        await this.onBeforeDestroy();
+      }
       super.destroy();
-      this.node?.freeRecursive();
-    }
-    getComputedLayout() {
-      return this.node.getComputedLayout();
-    }
-    applyComputedLayout() {
-      const layout = this.getComputedLayout();
-      this.x = layout.left;
-      this.y = layout.top;
-    }
-    calculateLayout() {
-      this.node.calculateLayout();
+      if (this.onAfterDestroy) this.onAfterDestroy();
     }
     setFlexDirection(direction) {
-      const mapping = {
-        row: this.yoga.FLEX_DIRECTION_ROW,
-        column: this.yoga.FLEX_DIRECTION_COLUMN,
-        "row-reverse": this.yoga.FLEX_DIRECTION_ROW_REVERSE,
-        "column-reverse": this.yoga.FLEX_DIRECTION_COLUMN_REVERSE
-      };
-      this.node.setFlexDirection(mapping[direction]);
+      this.layout = { flexDirection: direction };
     }
     setFlexWrap(wrap) {
-      const mapping = {
-        wrap: this.yoga.WRAP_WRAP,
-        nowrap: this.yoga.WRAP_NO_WRAP,
-        "wrap-reverse": this.yoga.WRAP_WRAP_REVERSE
-      };
-      this.node.setFlexWrap(mapping[wrap]);
+      this.layout = { flexWrap: wrap };
     }
     setAlignContent(align) {
-      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignContent", align);
+      this.layout = { alignContent: align };
     }
     setAlignSelf(align) {
-      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignSelf", align);
+      this.layout = { alignSelf: align };
     }
     setAlignItems(align) {
-      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignItems", align);
+      this.layout = { alignItems: align };
     }
     setJustifyContent(justifyContent) {
-      const mapping = {
-        "flex-start": this.yoga.JUSTIFY_FLEX_START,
-        "flex-end": this.yoga.JUSTIFY_FLEX_END,
-        center: this.yoga.JUSTIFY_CENTER,
-        "space-between": this.yoga.JUSTIFY_SPACE_BETWEEN,
-        "space-around": this.yoga.JUSTIFY_SPACE_AROUND
-      };
-      this.node.setJustifyContent(mapping[justifyContent]);
+      this.layout = { justifyContent };
     }
     setPosition(position) {
-      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setPosition", position);
+      if (position instanceof Array) {
+        if (position.length === 2) {
+          this.layout = {
+            positionY: position[0],
+            positionX: position[1]
+          };
+        } else if (position.length === 4) {
+          this.layout = {
+            positionTop: position[0],
+            positionRight: position[1],
+            positionBottom: position[2],
+            positionLeft: position[3]
+          };
+        }
+      } else {
+        this.layout = { position };
+      }
     }
     setX(x) {
       x = x + this.getWidth() * this._anchorPoints.x;
       if (!this.parent.isFlex) {
         this.x = x;
+      } else {
+        this.x = x;
+        this.layout = { x };
       }
-      this.node.setPosition(this.yoga.EDGE_LEFT, x);
     }
     setY(y) {
       y = y + this.getHeight() * this._anchorPoints.y;
       if (!this.parent.isFlex) {
         this.y = y;
+      } else {
+        this.y = y;
+        this.layout = { y };
       }
-      this.node.setPosition(this.yoga.EDGE_TOP, y);
     }
     setPadding(padding) {
-      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setPadding", padding);
+      if (padding instanceof Array) {
+        if (padding.length === 2) {
+          this.layout = {
+            paddingVertical: padding[0],
+            paddingHorizontal: padding[1]
+          };
+        } else if (padding.length === 4) {
+          this.layout = {
+            paddingTop: padding[0],
+            paddingRight: padding[1],
+            paddingBottom: padding[2],
+            paddingLeft: padding[3]
+          };
+        }
+      } else {
+        this.layout = { padding };
+      }
     }
     setMargin(margin) {
-      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setMargin", margin);
+      if (margin instanceof Array) {
+        if (margin.length === 2) {
+          this.layout = {
+            marginVertical: margin[0],
+            marginHorizontal: margin[1]
+          };
+        } else if (margin.length === 4) {
+          this.layout = {
+            marginTop: margin[0],
+            marginRight: margin[1],
+            marginBottom: margin[2],
+            marginLeft: margin[3]
+          };
+        }
+      } else {
+        this.layout = { margin };
+      }
     }
     setGap(gap) {
-      this.node.setGap(this.yoga.GAP_ALL, +gap);
+      this.layout = { gap };
     }
     setBorder(border) {
-      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setBorder", border);
+      if (border instanceof Array) {
+        if (border.length === 2) {
+          this.layout = {
+            borderVertical: border[0],
+            borderHorizontal: border[1]
+          };
+        } else if (border.length === 4) {
+          this.layout = {
+            borderTop: border[0],
+            borderRight: border[1],
+            borderBottom: border[2],
+            borderLeft: border[3]
+          };
+        }
+      } else {
+        this.layout = { border };
+      }
     }
     setPositionType(positionType) {
-      const mapping = {
-        relative: this.yoga.POSITION_TYPE_RELATIVE,
-        absolute: this.yoga.POSITION_TYPE_ABSOLUTE
-      };
-      this.node.setPositionType(mapping[positionType]);
-    }
-    calculateBounds() {
-      super.calculateBounds();
-      if (!this._geometry) return;
-      const bounds = this._geometry.bounds;
-      const width = Math.abs(bounds.minX - bounds.maxX);
-      const height = Math.abs(bounds.minY - bounds.maxY);
+      this.layout = { position: positionType };
     }
     setWidth(width) {
       this.displayWidth.set(width);
-      this.node?.setWidth(width);
+      if (!this.parent?.isFlex) {
+        this.width = width;
+      } else {
+        this.layout = { width };
+      }
     }
     setHeight(height) {
       this.displayHeight.set(height);
-      this.node?.setHeight(height);
+      if (!this.parent?.isFlex) {
+        this.height = height;
+      } else {
+        this.layout = { height };
+      }
     }
     getWidth() {
       return this.displayWidth();
@@ -2273,41 +2309,64 @@ function DisplayObject(extendClass) {
     getHeight() {
       return this.displayHeight();
     }
-  }, _canvasContext = new WeakMap(), _DisplayObject_instances = new WeakSet(), flexRender_fn = function(props) {
-    if (!this.parent) return;
-    if (props.flexDirection || props.justifyContent) {
-      this.isFlex = true;
-      this.applyFlexLayout();
-    }
-  }, setAlign_fn = function(methodName, align) {
-    const mapping = {
-      auto: this.yoga.ALIGN_AUTO,
-      "flex-start": this.yoga.ALIGN_FLEX_START,
-      "flex-end": this.yoga.ALIGN_FLEX_END,
-      center: this.yoga.ALIGN_CENTER,
-      stretch: this.yoga.ALIGN_STRETCH,
-      baseline: this.yoga.ALIGN_BASELINE,
-      "space-between": this.yoga.ALIGN_SPACE_BETWEEN,
-      "space-around": this.yoga.ALIGN_SPACE_AROUND
-    };
-    const method = this.node[methodName].bind(this.node);
-    method(mapping[align]);
-  }, setEdgeSize_fn = function(methodName, size) {
-    const method = this.node[methodName].bind(this.node);
-    if (size instanceof Array) {
-      if (size.length === 2) {
-        method(this.yoga.EDGE_VERTICAL, size[0]);
-        method(this.yoga.EDGE_HORIZONTAL, size[1]);
-      } else if (size.length === 4) {
-        method(this.yoga.EDGE_TOP, size[0]);
-        method(this.yoga.EDGE_RIGHT, size[1]);
-        method(this.yoga.EDGE_BOTTOM, size[2]);
-        method(this.yoga.EDGE_LEFT, size[3]);
-      }
-    } else {
-      method(this.yoga.EDGE_ALL, size);
+    // Min/Max constraints
+    setMinWidth(minWidth) {
+      this.layout = { minWidth };
+    }
+    setMinHeight(minHeight) {
+      this.layout = { minHeight };
+    }
+    setMaxWidth(maxWidth) {
+      this.layout = { maxWidth };
+    }
+    setMaxHeight(maxHeight) {
+      this.layout = { maxHeight };
+    }
+    // Aspect ratio
+    setAspectRatio(aspectRatio) {
+      this.layout = { aspectRatio };
+    }
+    // Flex properties
+    setFlexGrow(flexGrow) {
+      this.layout = { flexGrow };
+    }
+    setFlexShrink(flexShrink) {
+      this.layout = { flexShrink };
     }
-  }, _a;
+    setFlexBasis(flexBasis) {
+      this.layout = { flexBasis };
+    }
+    // Gap properties
+    setRowGap(rowGap) {
+      this.layout = { rowGap };
+    }
+    setColumnGap(columnGap) {
+      this.layout = { columnGap };
+    }
+    // Position insets
+    setTop(top) {
+      this.layout = { top };
+    }
+    setLeft(left) {
+      this.layout = { left };
+    }
+    setRight(right) {
+      this.layout = { right };
+    }
+    setBottom(bottom) {
+      this.layout = { bottom };
+    }
+    // Object properties
+    setObjectFit(objectFit) {
+      this.layout = { objectFit };
+    }
+    setObjectPosition(objectPosition) {
+      this.layout = { objectPosition };
+    }
+    setTransformOrigin(transformOrigin) {
+      this.layout = { transformOrigin };
+    }
+  }, _canvasContext = new WeakMap(), _a;
 }
 
 // src/components/Canvas.ts
@@ -2315,25 +2374,18 @@ registerComponent("Canvas", class Canvas extends DisplayObject(Container3) {
 });
 var Canvas2 = async (props = {}) => {
   let { cursorStyles, width, height, class: className } = useProps(props);
-  const Yoga = await loadYoga();
   if (!props.width) width = signal5(800);
   if (!props.height) height = signal5(600);
-  const renderer = await autoDetectRenderer({
-    ...props,
-    width: width?.(),
-    height: height?.()
-  });
   const canvasSize = signal5({
-    width: renderer.width,
-    height: renderer.height
+    width: 0,
+    height: 0
   });
   props.isRoot = true;
   const options = {
     ...props,
     context: {
-      Yoga,
-      renderer,
-      canvasSize
+      canvasSize,
+      app: signal5(null)
     },
     width: width?.(),
     height: height?.()
@@ -2347,48 +2399,57 @@ var Canvas2 = async (props = {}) => {
     });
   }
   const canvasElement = createComponent("Canvas", options);
-  canvasElement.render = (rootElement) => {
+  canvasElement.render = (rootElement, app) => {
+    if (!app) {
+      return;
+    }
+    const renderer = app.renderer;
     const canvasEl = renderer.view.canvas;
     globalThis.__PIXI_STAGE__ = canvasElement.componentInstance;
     globalThis.__PIXI_RENDERER__ = renderer;
     if (props.tickStart !== false) canvasElement.directives.tick.start();
-    effect4(() => {
+    effect3(() => {
       canvasElement.propObservables.tick();
       renderer.render(canvasElement.componentInstance);
     });
+    app.stage = canvasElement.componentInstance;
+    app.stage.layout = {
+      width: app.screen.width,
+      height: app.screen.height,
+      justifyContent: props.justifyContent,
+      alignItems: props.alignItems
+    };
+    canvasSize.set({ width: app.screen.width, height: app.screen.height });
+    app.renderer.on("resize", (width2, height2) => {
+      canvasSize.set({ width: width2, height: height2 });
+      if (app.stage.layout) {
+        app.stage.layout = {
+          width: width2,
+          height: height2
+        };
+      }
+    });
+    if (props.tickStart !== false) canvasElement.directives.tick.start();
+    app.ticker.add(() => {
+      canvasElement.propObservables.tick();
+    });
     if (cursorStyles) {
-      effect4(() => {
+      effect3(() => {
         renderer.events.cursorStyles = cursorStyles();
       });
     }
     if (className) {
-      effect4(() => {
+      effect3(() => {
         canvasEl.classList.add(className());
       });
     }
-    const resizeCanvas = async () => {
-      let w, h2;
-      if (width?.() === "100%" && height?.() === "100%") {
-        const parent = canvasEl.parentElement;
-        w = parent ? parent.clientWidth : window.innerWidth;
-        h2 = parent ? parent.clientHeight : window.innerHeight;
-      } else {
-        w = width?.() ?? canvasEl.offsetWidth;
-        h2 = height?.() ?? canvasEl.offsetHeight;
-      }
-      renderer.resize(w, h2);
-      canvasSize.set({ width: w, height: h2 });
-      canvasElement.componentInstance.setWidth(w);
-      canvasElement.componentInstance.setHeight(h2);
-    };
-    window.addEventListener("resize", resizeCanvas);
     const existingCanvas = rootElement.querySelector("canvas");
     if (existingCanvas) {
       rootElement.replaceChild(canvasEl, existingCanvas);
     } else {
       rootElement.appendChild(canvasEl);
     }
-    resizeCanvas();
+    options.context.app.set(app);
   };
   return canvasElement;
 };
@@ -2413,8 +2474,8 @@ var CanvasContainer = class extends DisplayObject(PixiContainer) {
       this.sortableChildren = props.sortableChildren;
     }
   }
-  onMount(args) {
-    super.onMount(args);
+  async onMount(args) {
+    await super.onMount(args);
     const { componentInstance, props } = args;
     const { pixiChildren } = props;
     if (pixiChildren) {
@@ -2430,21 +2491,34 @@ var Container4 = (props) => {
 };
 
 // src/components/Graphic.ts
-import { effect as effect5 } from "@signe/reactive";
+import { effect as effect4 } from "@signe/reactive";
 import { Graphics as PixiGraphics } from "pixi.js";
 var CanvasGraphics = class extends DisplayObject(PixiGraphics) {
   onInit(props) {
     super.onInit(props);
     if (props.draw) {
-      this.clearEffect = effect5(() => {
+      this.clearEffect = effect4(() => {
         this.clear();
         props.draw?.(this);
       });
     }
   }
-  onDestroy() {
-    this.clearEffect.subscription.unsubscribe();
-    super.onDestroy();
+  /**
+   * Called when the component is about to be destroyed.
+   * This method should be overridden by subclasses to perform any cleanup.
+   * It ensures that the clearEffect subscription is unsubscribed before calling the original afterDestroy callback.
+   * @param parent The parent element.
+   * @param afterDestroy A callback function to be executed after the component's own destruction logic.
+   * @example
+   * // This method is typically called by the engine internally.
+   * // await component.onDestroy(parentElement, () => console.log('Component destroyed'));
+   */
+  async onDestroy(parent, afterDestroy) {
+    const _afterDestroyCallback = async () => {
+      this.clearEffect.subscription.unsubscribe();
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
   }
 };
 registerComponent("Graphics", CanvasGraphics);
@@ -2592,8 +2666,8 @@ var CanvasParticlesEmitter = class extends CanvasContainer {
     super(...arguments);
     this.elapsed = Date.now();
   }
-  onMount(params) {
-    super.onMount(params);
+  async onMount(params) {
+    await super.onMount(params);
     const { props } = params;
     const tick2 = props.context.tick;
     this.emitter = new particles.Emitter(this, props.config);
@@ -2606,11 +2680,14 @@ var CanvasParticlesEmitter = class extends CanvasContainer {
   }
   onUpdate(props) {
   }
-  onDestroy() {
-    super.onDestroy();
-    this.emitter?.destroy();
-    this.emitter = null;
-    this.subscriptionTick.unsubscribe();
+  async onDestroy(parent, afterDestroy) {
+    const _afterDestroy = async () => {
+      this.emitter?.destroy();
+      this.emitter = null;
+      this.subscriptionTick.unsubscribe();
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroy);
   }
 };
 registerComponent("ParticlesEmitter", CanvasParticlesEmitter);
@@ -2620,7 +2697,7 @@ function ParticlesEmitter(props) {
 
 // src/components/Sprite.ts
 import { Howl as Howl2 } from "howler";
-import { computed, effect as effect7, isSignal as isSignal4 } from "@signe/reactive";
+import { computed, effect as effect6, isSignal as isSignal4 } from "@signe/reactive";
 import {
   Assets,
   Container as Container5,
@@ -2630,7 +2707,7 @@ import {
 } from "pixi.js";
 
 // src/engine/animation.ts
-import { effect as effect6, signal as signal6 } from "@signe/reactive";
+import { effect as effect5, signal as signal6 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
 function isAnimatedSignal(signal9) {
   return signal9.animatedState !== void 0;
@@ -2644,7 +2721,7 @@ function animatedSignal(initialValue, options = {}) {
   let animation;
   const publicSignal = signal6(initialValue);
   const privateSignal = signal6(state);
-  effect6(() => {
+  effect5(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
   });
@@ -2839,7 +2916,7 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
       const isMovingY = isAnimatedSignal(ySignal) && ySignal.animatedState().current !== ySignal.animatedState().end;
       return isMovingX || isMovingY;
     });
-    effect7(() => {
+    effect6(() => {
       const _isMoving = isMoving();
       if (!this.isMounted) return;
       if (_isMoving) {
@@ -2847,7 +2924,7 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
       } else {
         this.sheetCurrentAnimation = "stand" /* Stand */;
       }
-      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
     super.onMount(params);
   }
@@ -2890,8 +2967,8 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
       });
     }
   }
-  onDestroy() {
-    super.onDestroy();
+  async onDestroy(parent, afterDestroy) {
+    await super.onDestroy(parent);
     this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
     this.subscriptionTick.unsubscribe();
     if (this.currentAnimationContainer && this.parent instanceof Container5) {
@@ -3031,7 +3108,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect8, signal as signal7 } from "@signe/reactive";
+import { effect as effect7, signal as signal7 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -3072,7 +3149,7 @@ function Video(props) {
       default: false
     }
   });
-  effect8(() => {
+  effect7(() => {
     const _video = video();
     const state = play();
     if (_video && state !== void 0) {
@@ -3126,7 +3203,7 @@ function Video(props) {
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect9, signal as signal8 } from "@signe/reactive";
+import { effect as effect8, signal as signal8 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
@@ -3161,7 +3238,7 @@ function on(triggerSignal, callback) {
   if (!isTrigger(triggerSignal)) {
     throw new Error("In 'on(arg)' must have a trigger signal type");
   }
-  effect9(() => {
+  effect8(() => {
     const result = triggerSignal.listen();
     if (result?.seed.value) {
       const ret = callback(result?.seed.config);
@@ -3183,9 +3260,15 @@ var CanvasText = class extends DisplayObject(PixiText) {
     this._wordWrapWidth = 0;
     this.typewriterOptions = {};
   }
-  onMount(args) {
-    super.onMount(args);
-    const { props } = args;
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Initializes the typewriter effect if configured.
+   * @param {Element<CanvasText>} element - The element being mounted. Its `props` property (of type TextProps) contains component properties and context.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element, index) {
+    await super.onMount(element, index);
+    const { props } = element;
     const tick2 = props.context.tick;
     if (props.text && props.typewriter) {
       this.fullText = props.text;
@@ -3269,9 +3352,18 @@ var CanvasText = class extends DisplayObject(PixiText) {
     this.text = this.fullText;
     this.currentIndex = this.fullText.length;
   }
-  onDestroy() {
-    super.onDestroy();
-    this.subscriptionTick.unsubscribe();
+  /**
+   * Called when the component is about to be destroyed.
+   * Unsubscribes from the tick observable.
+   * @param {Element<any>} parent - The parent element.
+   * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
+   */
+  async onDestroy(parent, afterDestroy) {
+    const _afterDestroy = async () => {
+      this.subscriptionTick.unsubscribe();
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroy);
   }
 };
 registerComponent("Text", CanvasText);
@@ -3308,7 +3400,7 @@ function TilingSprite(props) {
 
 // src/components/Viewport.ts
 import { Viewport as PixiViewport } from "pixi-viewport";
-import { effect as effect10 } from "@signe/reactive";
+import { effect as effect9 } from "@signe/reactive";
 var EVENTS3 = [
   "bounce-x-end",
   "bounce-x-start",
@@ -3352,24 +3444,36 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
       if (props[event]) this.on(event, props[event]);
     }
   }
-  onMount(element) {
-    super.onMount(element);
-    const { tick: tick2, renderer, canvasSize } = element.props.context;
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Initializes viewport settings and subscriptions.
+   * @param {Element<CanvasViewport>} element - The element being mounted. Its `props` property (of type ViewportProps) contains component properties and context.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element, index) {
+    await super.onMount(element, index);
+    const { props } = element;
+    const { tick: tick2, app, canvasSize } = props.context;
     let isDragging = false;
-    effect10(() => {
+    effect9(() => {
       this.screenWidth = canvasSize().width;
       this.screenHeight = canvasSize().height;
     });
-    renderer.events.domElement.addEventListener(
-      "wheel",
-      this.input.wheelFunction
-    );
-    this.options.events = renderer.events;
+    effect9(() => {
+      const _app = app();
+      if (!_app) return;
+      const renderer = _app.renderer;
+      renderer.events.domElement.addEventListener(
+        "wheel",
+        this.input.wheelFunction
+      );
+      this.options.events = renderer.events;
+    });
     this.tickSubscription = tick2.observable.subscribe(({ value }) => {
       this.update(value.timestamp);
     });
     element.props.context.viewport = this;
-    this.updateViewportSettings(element.props);
+    this.updateViewportSettings(props);
   }
   onUpdate(props) {
     super.onUpdate(props);
@@ -3416,9 +3520,18 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
       }
     }
   }
-  onDestroy() {
-    super.onDestroy();
-    this.tickSubscription.unsubscribe();
+  /**
+   * Called when the component is about to be destroyed.
+   * Unsubscribes from the tick observable.
+   * @param {Element<any>} parent - The parent element.
+   * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
+   */
+  async onDestroy(parent, afterDestroy) {
+    const _afterDestroy = async () => {
+      this.tickSubscription.unsubscribe();
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroy);
   }
 };
 registerComponent("Viewport", CanvasViewport);
@@ -3453,13 +3566,23 @@ function NineSliceSprite(props) {
 }
 
 // src/engine/bootstrap.ts
+import "@pixi/layout";
+import { Application as Application2 } from "pixi.js";
 var bootstrapCanvas = async (rootElement, canvas) => {
+  const app = new Application2();
+  await app.init({
+    resizeTo: rootElement,
+    autoStart: false
+  });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != "Canvas") {
     throw new Error("Canvas is required");
   }
-  canvasElement.render(rootElement);
-  return canvasElement;
+  canvasElement.render(rootElement, app);
+  return {
+    canvasElement,
+    app
+  };
 };
 
 // src/utils/Ease.ts