canvasengine 2.0.0-beta.19 → 2.0.0-beta.20

package/dist/index.js

@@ -99,7 +99,7 @@ function isFunction(val) {
   return {}.toString.call(val) === "[object Function]";
 }
 function isObject(val) {
-  return typeof val == "object" && val != null && !Array.isArray(val);
+  return typeof val == "object" && val != null && !Array.isArray(val) && val.constructor === Object;
 }
 function set(obj, path, value, onlyPlainObject = false) {
   if (Object(obj) !== obj) return obj;
@@ -1170,7 +1170,7 @@ function loop(itemsSubject, createElementFn) {
     let elements = [];
     let elementMap = /* @__PURE__ */ new Map();
     let isFirstSubscription = true;
-    const isArraySignal = (signal9) => Array.isArray(signal9());
+    const isArraySignal = (signal10) => Array.isArray(signal10());
     return new Observable((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
@@ -1499,6 +1499,7 @@ var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop",
 var Sound = class extends Directive {
   constructor() {
     super(...arguments);
+    this.sounds = [];
     this.eventsFn = [];
     this.maxVolume = 1;
     this.maxDistance = 100;
@@ -1509,20 +1510,28 @@ var Sound = class extends Directive {
     const { props } = element;
     const tick2 = props.context.tick;
     const propsSound = props.sound.value ?? props.sound;
+    if (!propsSound.src) {
+      return;
+    }
     const { src, autoplay, loop: loop2, volume, spatial } = propsSound;
-    this.sound = new Howl({
-      src,
-      autoplay,
-      loop: loop2,
-      volume
-    });
-    for (let event of EVENTS) {
-      if (!propsSound[event]) continue;
-      const fn = propsSound[event];
-      this.eventsFn.push(fn);
-      this.sound.on(event, fn);
+    const sources = Array.isArray(src) ? src : [src];
+    for (const source of sources) {
+      if (!source) continue;
+      const sound = new Howl({
+        src: source,
+        autoplay,
+        loop: loop2,
+        volume
+      });
+      for (let event of EVENTS) {
+        if (!propsSound[event]) continue;
+        const fn = propsSound[event];
+        this.eventsFn.push(fn);
+        sound.on(event, fn);
+      }
+      this.sounds.push(sound);
     }
-    if (spatial) {
+    if (spatial && this.sounds.length > 0) {
       const { soundListenerPosition } = props.context;
       if (!soundListenerPosition) {
         throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
@@ -1533,34 +1542,43 @@ var Sound = class extends Directive {
         const { x, y } = element.componentInstance;
         const distance = calculateDistance(x, y, listenerX(), listenerY());
         const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
-        this.sound.volume(volume2);
+        this.sounds.forEach((sound) => sound.volume(volume2));
       }).subscription;
     }
+    this.onUpdate(propsSound);
   }
   onUpdate(props) {
-    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props.value ?? props;
-    if (volume != void 0) this.sound.volume(volume);
-    if (loop2 != void 0) this.sound.loop(loop2);
-    if (mute != void 0) this.sound.mute(mute);
-    if (seek != void 0) this.sound.seek(seek);
-    if (playing != void 0) {
-      if (playing) this.sound.play();
-      else this.sound.pause();
-    }
+    const soundProps = props.value ?? props;
+    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = soundProps;
+    this.sounds.forEach((sound) => {
+      if (volume !== void 0) sound.volume(volume);
+      if (loop2 !== void 0) sound.loop(loop2);
+      if (mute !== void 0) sound.mute(mute);
+      if (seek !== void 0) sound.seek(seek);
+      if (playing !== void 0) {
+        if (playing) sound.play();
+        else sound.pause();
+      }
+      if (rate !== void 0) sound.rate(rate);
+    });
     if (spatial) {
       this.maxVolume = spatial.maxVolume ?? this.maxVolume;
       this.maxDistance = spatial.maxDistance ?? this.maxDistance;
     }
-    if (rate != void 0) this.sound.rate(rate);
   }
   onDestroy() {
-    this.sound.stop();
-    this.tickSubscription?.unsubscribe();
-    for (let event of EVENTS) {
-      if (this.eventsFn[event]) {
-        this.sound.off(event, this.eventsFn[event]);
+    this.sounds.forEach((sound) => {
+      sound.stop();
+      for (let event of EVENTS) {
+        const eventFn = this.eventsFn.find((fn) => fn === this.eventsFn[event]);
+        if (eventFn) {
+          sound.off(event, eventFn);
+        }
       }
-    }
+    });
+    this.sounds = [];
+    this.eventsFn = [];
+    this.tickSubscription?.unsubscribe();
   }
 };
 var SoundListenerPosition = class extends Directive {
@@ -1929,7 +1947,6 @@ import { Container as Container3 } from "pixi.js";
 
 // src/components/DisplayObject.ts
 import { signal as signal4 } from "@signe/reactive";
-import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
 
 // src/utils/functions.ts
@@ -1942,6 +1959,7 @@ function isPercent(value) {
 }
 
 // src/components/DisplayObject.ts
+import { BehaviorSubject } from "rxjs";
 var EVENTS2 = [
   "added",
   "childAdded",
@@ -2030,10 +2048,16 @@ function DisplayObject(extendClass) {
       this.layout = null;
       this.onBeforeDestroy = null;
       this.onAfterMount = null;
+      this.subjectInit = new BehaviorSubject(null);
+      this.disableLayout = false;
     }
     get deltaRatio() {
       return __privateGet(this, _canvasContext)?.scheduler?.tick.value.deltaRatio;
     }
+    get parentIsFlex() {
+      if (this.disableLayout) return false;
+      return this.parent?.isFlex;
+    }
     onInit(props) {
       this._id = props.id;
       for (let event of EVENTS2) {
@@ -2052,13 +2076,18 @@ function DisplayObject(extendClass) {
         this.layout = {};
         this.isFlex = true;
       }
+      this.subjectInit.next(this);
     }
     async onMount({ parent, props }, index) {
       __privateSet(this, _canvasContext, props.context);
       if (parent) {
         const instance = parent.componentInstance;
-        if (instance.isFlex && !this.layout) {
-          this.layout = {};
+        if (instance.isFlex && !this.layout && !this.disableLayout) {
+          try {
+            this.layout = {};
+          } catch (error2) {
+            console.warn("Failed to set layout:", error2);
+          }
         }
         if (index === void 0) {
           instance.addChild(this);
@@ -2137,19 +2166,9 @@ function DisplayObject(extendClass) {
       if (props.blendMode) this.blendMode = props.blendMode;
       if (props.filterArea) this.filterArea = props.filterArea;
       const currentFilters = this.filters || [];
-      if (props.shadow) {
-        let dropShadowFilter = currentFilters.find(
-          (filter) => filter instanceof DropShadowFilter
-        );
-        if (!dropShadowFilter) {
-          dropShadowFilter = new DropShadowFilter();
-          currentFilters.push(dropShadowFilter);
-        }
-        Object.assign(dropShadowFilter, props.shadow);
-      }
       if (props.blur) {
         let blurFilter = currentFilters.find(
-          (filter) => filter instanceof BlurFilter
+          (filter2) => filter2 instanceof BlurFilter
         );
         if (!blurFilter) {
           const options = typeof props.blur === "number" ? {
@@ -2167,7 +2186,7 @@ function DisplayObject(extendClass) {
         await this.onBeforeDestroy();
       }
       super.destroy();
-      if (this.onAfterDestroy) this.onAfterDestroy();
+      if (afterDestroy) afterDestroy();
     }
     setFlexDirection(direction) {
       this.layout = { flexDirection: direction };
@@ -2208,7 +2227,7 @@ function DisplayObject(extendClass) {
     }
     setX(x) {
       x = x + this.getWidth() * this._anchorPoints.x;
-      if (!this.parent.isFlex) {
+      if (!this.parentIsFlex) {
         this.x = x;
       } else {
         this.x = x;
@@ -2217,7 +2236,7 @@ function DisplayObject(extendClass) {
     }
     setY(y) {
       y = y + this.getHeight() * this._anchorPoints.y;
-      if (!this.parent.isFlex) {
+      if (!this.parentIsFlex) {
         this.y = y;
       } else {
         this.y = y;
@@ -2289,7 +2308,7 @@ function DisplayObject(extendClass) {
     }
     setWidth(width) {
       this.displayWidth.set(width);
-      if (!this.parent?.isFlex) {
+      if (!this.parentIsFlex) {
         this.width = width;
       } else {
         this.layout = { width };
@@ -2297,7 +2316,7 @@ function DisplayObject(extendClass) {
     }
     setHeight(height) {
       this.displayHeight.set(height);
-      if (!this.parent?.isFlex) {
+      if (!this.parentIsFlex) {
         this.height = height;
       } else {
         this.layout = { height };
@@ -2491,17 +2510,102 @@ var Container4 = (props) => {
 };
 
 // src/components/Graphic.ts
-import { effect as effect4 } from "@signe/reactive";
-import { Graphics as PixiGraphics } from "pixi.js";
+import { effect as effect4, isSignal as isSignal4, signal as signal6 } from "@signe/reactive";
+import { Assets, Graphics as PixiGraphics } from "pixi.js";
 var CanvasGraphics = class extends DisplayObject(PixiGraphics) {
-  onInit(props) {
-    super.onInit(props);
+  /**
+   * Initializes the graphics component with reactive width and height handling.
+   * 
+   * This method handles different types of width and height props:
+   * - **Numbers**: Direct pixel values
+   * - **Strings with %**: Percentage values that trigger flex layout and use layout box dimensions
+   * - **Signals**: Reactive values that update automatically
+   * 
+   * When percentage values are detected, the component:
+   * 1. Sets `display: 'flex'` to enable layout calculations
+   * 2. Listens to layout events to get computed dimensions
+   * 3. Updates internal width/height signals with layout box values
+   * 
+   * The draw function receives the reactive width and height signals as parameters.
+   * 
+   * @param props - Component properties including width, height, and draw function
+   * @example
+   * ```typescript
+   * // With pixel values
+   * Graphics({ width: 100, height: 50, draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * 
+   * // With percentage values (uses layout box)
+   * Graphics({ width: "50%", height: "100%", draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * 
+   * // With signals
+   * const width = signal(100);
+   * Graphics({ width, height: 50, draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * ```
+   */
+  async onInit(props) {
+    await super.onInit(props);
+  }
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Creates the reactive effect for drawing using the original signals from propObservables.
+   * @param {Element<DisplayObject>} element - The element being mounted with props and propObservables.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element, index) {
+    await super.onMount(element, index);
+    const { props, propObservables } = element;
+    const width = isSignal4(propObservables?.width) ? propObservables.width : signal6(props.width || 0);
+    const height = isSignal4(propObservables?.height) ? propObservables.height : signal6(props.height || 0);
+    this.width = width;
+    this.height = height;
+    const isWidthPercentage = isPercent(width());
+    const isHeightPercentage = isPercent(height());
     if (props.draw) {
       this.clearEffect = effect4(() => {
+        const w = width();
+        const h2 = height();
+        if (typeof w == "string" || typeof h2 == "string") {
+          return;
+        }
+        if (w == 0 || h2 == 0) {
+          return;
+        }
         this.clear();
-        props.draw?.(this);
+        props.draw?.(this, w, h2);
+        this.subjectInit.next(this);
       });
     }
+    this.on("layout", (event) => {
+      const layoutBox = event.computedLayout;
+      if (isWidthPercentage && isSignal4(width)) {
+        width.set(layoutBox.width);
+      }
+      if (isHeightPercentage && isSignal4(height)) {
+        height.set(layoutBox.height);
+      }
+    });
+  }
+  /**
+   * Called when component props are updated.
+   * Updates the internal width and height signals when props change.
+   * @param props - Updated properties
+   */
+  onUpdate(props) {
+    super.onUpdate(props);
+    if (props.width !== void 0 && this.width) {
+      if (isSignal4(props.width)) {
+        this.width = props.width;
+      } else {
+        this.width.set(props.width);
+      }
+    }
+    if (props.height !== void 0 && this.height) {
+      if (isSignal4(props.height)) {
+        this.height = props.height;
+      } else {
+        this.height.set(props.height);
+      }
+    }
   }
   /**
    * Called when the component is about to be destroyed.
@@ -2526,16 +2630,16 @@ function Graphics(props) {
   return createComponent("Graphics", props);
 }
 function Rect(props) {
-  const { width, height, color, borderRadius, border } = useProps(props, {
+  const { color, borderRadius, border } = useProps(props, {
     borderRadius: null,
     border: null
   });
   return Graphics({
-    draw: (g) => {
+    draw: (g, width, height) => {
       if (borderRadius()) {
-        g.roundRect(0, 0, width(), height(), borderRadius());
+        g.roundRect(0, 0, width, height, borderRadius());
       } else {
-        g.rect(0, 0, width(), height());
+        g.rect(0, 0, width, height);
       }
       if (border) {
         g.stroke(border);
@@ -2571,7 +2675,7 @@ function Ellipse(props) {
     border: null
   });
   return Graphics({
-    draw: (g) => drawShape(g, "ellipse", { width, height, color, border }),
+    draw: (g, gWidth, gHeight) => drawShape(g, "ellipse", { width: signal6(gWidth), height: signal6(gHeight), color, border }),
     ...props
   });
 }
@@ -2581,11 +2685,11 @@ function Triangle(props) {
     color: "#000"
   });
   return Graphics({
-    draw: (g) => {
-      g.moveTo(0, height());
-      g.lineTo(width() / 2, 0);
-      g.lineTo(width(), height());
-      g.lineTo(0, height());
+    draw: (g, gWidth, gHeight) => {
+      g.moveTo(0, gHeight);
+      g.lineTo(gWidth / 2, 0);
+      g.lineTo(gWidth, gHeight);
+      g.lineTo(0, gHeight);
       g.fill(color());
       if (border) {
         g.stroke(border);
@@ -2596,11 +2700,140 @@ function Triangle(props) {
 }
 function Svg(props) {
   return Graphics({
-    draw: (g) => g.svg(props.svg),
+    draw: async (g) => {
+      if (props.src) {
+        const svgData = await Assets.load({
+          src: props.src,
+          data: {
+            parseAsGraphicsContext: true
+          }
+        });
+        const graphics = new PixiGraphics(svgData);
+        g.context = graphics.context;
+      } else if (props.content) {
+        g.svg(props.content);
+      } else if (props.svg) {
+        g.svg(props.svg);
+      }
+    },
     ...props
   });
 }
 
+// src/components/Mesh.ts
+import { Mesh as PixiMesh, Geometry, Assets as Assets2 } from "pixi.js";
+var CanvasMesh = class extends DisplayObject(PixiMesh) {
+  /**
+   * Constructor for the CanvasMesh component.
+   * Initializes the PixiMesh with default geometry and shader to prevent errors.
+   * 
+   * @example
+   * ```typescript
+   * // This constructor is called internally by the engine
+   * const mesh = new CanvasMesh();
+   * ```
+   */
+  constructor() {
+    super({
+      geometry: new Geometry()
+    });
+  }
+  /**
+   * Initializes the mesh component with the provided properties.
+   * This method is called before onUpdate to set up initial state.
+   * 
+   * @param props - The initial properties
+   * @example
+   * ```typescript
+   * // This method is called internally when the component is created
+   * mesh.onInit({
+   *   geometry: myGeometry,
+   *   texture: "texture.png"
+   * });
+   * ```
+   */
+  onInit(props) {
+    super.onInit(props);
+    if (props.geometry) {
+      try {
+        this.geometry = props.geometry;
+      } catch (error2) {
+        console.warn("Failed to set geometry:", error2);
+      }
+    }
+    if (props.shader) {
+      this.shader = props.shader;
+    }
+  }
+  /**
+   * Updates the mesh component when properties change.
+   * Handles texture loading, shader updates, and other property changes.
+   * 
+   * @param props - The updated properties
+   * @example
+   * ```typescript
+   * // This method is called internally when props change
+   * mesh.onUpdate({
+   *   tint: 0x00ff00,
+   *   texture: "new-texture.png"
+   * });
+   * ```
+   */
+  async onUpdate(props) {
+    super.onUpdate(props);
+    if (props.geometry) {
+      try {
+        this.geometry = props.geometry;
+      } catch (error2) {
+        console.warn("Failed to update geometry:", error2);
+      }
+    }
+    if (props.shader) {
+      this.shader = props.shader;
+    }
+    if (props.texture) {
+      if (typeof props.texture === "string") {
+        this.texture = await Assets2.load(props.texture);
+      } else {
+        this.texture = props.texture;
+      }
+    } else if (props.image) {
+      this.texture = await Assets2.load(props.image);
+    }
+    if (props.tint !== void 0) {
+      this.tint = props.tint;
+    }
+    if (props.blendMode !== void 0) {
+      this.blendMode = props.blendMode;
+    }
+    if (props.roundPixels !== void 0) {
+      this.roundPixels = props.roundPixels;
+    }
+  }
+  /**
+   * Called when the component is about to be destroyed.
+   * Cleans up the draw effect subscription and calls the parent destroy method.
+   * 
+   * @param parent - The parent element
+   * @param afterDestroy - Callback function to execute after destruction
+   * @example
+   * ```typescript
+   * // This method is typically called by the engine internally
+   * await mesh.onDestroy(parentElement, () => console.log('Mesh destroyed'));
+   * ```
+   */
+  async onDestroy(parent, afterDestroy) {
+    const _afterDestroyCallback = async () => {
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+};
+registerComponent("Mesh", CanvasMesh);
+var Mesh = (props) => {
+  return createComponent("Mesh", props);
+};
+
 // src/engine/signal.ts
 var currentSubscriptionsTracker = null;
 var mountTracker = null;
@@ -2697,20 +2930,20 @@ function ParticlesEmitter(props) {
 
 // src/components/Sprite.ts
 import { Howl as Howl2 } from "howler";
-import { computed, effect as effect6, isSignal as isSignal4 } from "@signe/reactive";
+import { computed, effect as effect6, isSignal as isSignal5 } from "@signe/reactive";
 import {
-  Assets,
+  Assets as Assets3,
   Container as Container5,
   Sprite as PixiSprite,
   Rectangle as Rectangle2,
-  Texture as Texture2
+  Texture as Texture3
 } from "pixi.js";
 
 // src/engine/animation.ts
-import { effect as effect5, signal as signal6 } from "@signe/reactive";
+import { effect as effect5, signal as signal7 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal9) {
-  return signal9.animatedState !== void 0;
+function isAnimatedSignal(signal10) {
+  return signal10.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2719,8 +2952,8 @@ function animatedSignal(initialValue, options = {}) {
     end: initialValue
   };
   let animation;
-  const publicSignal = signal6(initialValue);
-  const privateSignal = signal6(state);
+  const publicSignal = signal7(initialValue);
+  const privateSignal = signal7(state);
   effect5(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
@@ -2796,11 +3029,19 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     this.subscriptionSheet = [];
     this.sheetParams = {};
     this.sheetCurrentAnimation = "stand" /* Stand */;
+    this.app = null;
     this.currentAnimationContainer = null;
   }
+  get renderer() {
+    return this.app?.renderer;
+  }
   async createTextures(options) {
     const { width, height, framesHeight, framesWidth, image, offset } = options;
-    const texture = await Assets.load(image);
+    if (!image || typeof image !== "string" || image.trim() === "") {
+      console.warn("Invalid image path provided to createTextures:", image);
+      return [];
+    }
+    const texture = await Assets3.load(image);
     const spriteWidth = options.spriteWidth;
     const spriteHeight = options.spriteHeight;
     const frames = [];
@@ -2822,7 +3063,7 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
           );
         }
         frames[i].push(
-          new Texture2({
+          new Texture3({
             source: texture.source,
             frame: new Rectangle2(rectX, rectY, spriteWidth, spriteHeight)
           })
@@ -2882,6 +3123,7 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     const { props, propObservables } = params;
     const tick2 = props.context.tick;
     const sheet = props.sheet ?? {};
+    this.app = props.context.app();
     if (sheet?.onFinish) {
       this.onFinish = sheet.onFinish;
     }
@@ -2895,7 +3137,7 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     if (sheet.params) {
       for (let key in propObservables?.sheet["params"]) {
         const value = propObservables?.sheet["params"][key];
-        if (isSignal4(value)) {
+        if (isSignal5(value)) {
           this.subscriptionSheet.push(
             value.observable.subscribe((value2) => {
               if (this.animations.size == 0) return;
@@ -2931,8 +3173,12 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
   async onUpdate(props) {
     super.onUpdate(props);
     const setTexture = async (image) => {
+      if (!image || typeof image !== "string" || image.trim() === "") {
+        console.warn("Invalid image path provided to setTexture:", image);
+        return null;
+      }
       const onProgress = this.fullProps.loader?.onProgress;
-      const texture = await Assets.load(image, (progress) => {
+      const texture = await Assets3.load(image, (progress) => {
         if (onProgress) onProgress(progress);
         if (progress == 1) {
           const onComplete = this.fullProps.loader?.onComplete;
@@ -2954,17 +3200,30 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     if (props.hitbox) this.hitbox = props.hitbox;
     if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
     else if (props.image && this.fullProps.rectangle === void 0) {
-      this.texture = await setTexture(this.fullProps.image);
+      const texture = await setTexture(this.fullProps.image);
+      if (texture) {
+        this.texture = texture;
+      }
     } else if (props.texture) {
-      this.texture = props.texture;
+      if (isElement(props.texture)) {
+        const textureInstance = props.texture.componentInstance;
+        textureInstance.subjectInit.subscribe((value) => {
+          console.log("a", value?.width);
+        });
+        this.texture = this.renderer?.generateTexture(props.texture.componentInstance);
+      } else {
+        this.texture = props.texture;
+      }
     }
     if (props.rectangle !== void 0) {
       const { x, y, width, height } = props.rectangle?.value ?? props.rectangle;
       const texture = await setTexture(this.fullProps.image);
-      this.texture = new Texture2({
-        source: texture.source,
-        frame: new Rectangle2(x, y, width, height)
-      });
+      if (texture) {
+        this.texture = new Texture3({
+          source: texture.source,
+          frame: new Rectangle2(x, y, width, height)
+        });
+      }
     }
   }
   async onDestroy(parent, afterDestroy) {
@@ -3108,7 +3367,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect7, signal as signal7 } from "@signe/reactive";
+import { effect as effect7, signal as signal8 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -3133,7 +3392,7 @@ function Video(props) {
     volumechange: null,
     waiting: null
   };
-  const video = signal7(null);
+  const video = signal8(null);
   const defineProps = useDefineProps(props);
   const { play, loop: loop2, muted } = defineProps({
     play: {
@@ -3203,12 +3462,12 @@ function Video(props) {
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect8, signal as signal8 } from "@signe/reactive";
+import { effect as effect8, signal as signal9 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal8({
+  const _signal = signal9({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0
@@ -3263,12 +3522,12 @@ var CanvasText = class extends DisplayObject(PixiText) {
   /**
    * 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 {Element<CanvasText>} element - The element being mounted with parent and props.
    * @param {number} [index] - The index of the component among its siblings.
    */
   async onMount(element, index) {
-    await super.onMount(element, index);
     const { props } = element;
+    await super.onMount(element, index);
     const tick2 = props.context.tick;
     if (props.text && props.typewriter) {
       this.fullText = props.text;
@@ -3276,7 +3535,7 @@ var CanvasText = class extends DisplayObject(PixiText) {
       this.currentIndex = 0;
       if (props.typewriter) {
         this.typewriterOptions = props.typewriter;
-        if (this.typewriterOptions.skip) {
+        if (this.typewriterOptions.skip && isTrigger(this.typewriterOptions.skip)) {
           on(this.typewriterOptions.skip, () => {
             this.skipTypewriter();
           });
@@ -3360,8 +3619,12 @@ var CanvasText = class extends DisplayObject(PixiText) {
    */
   async onDestroy(parent, afterDestroy) {
     const _afterDestroy = async () => {
-      this.subscriptionTick.unsubscribe();
-      afterDestroy();
+      if (this.subscriptionTick) {
+        this.subscriptionTick.unsubscribe();
+      }
+      if (afterDestroy) {
+        afterDestroy();
+      }
     };
     await super.onDestroy(parent, _afterDestroy);
   }
@@ -3372,12 +3635,12 @@ function Text(props) {
 }
 
 // src/components/TilingSprite.ts
-import { TilingSprite as PixiTilingSprite, Texture as Texture3 } from "pixi.js";
+import { TilingSprite as PixiTilingSprite, Texture as Texture4 } from "pixi.js";
 var CanvasTilingSprite = class extends DisplayObject(PixiTilingSprite) {
   onUpdate(props) {
     super.onUpdate(props);
     if (props.image) {
-      this.texture = Texture3.from(props.image);
+      this.texture = Texture4.from(props.image);
     }
     if (props.tileScale) {
       this.tileScale.set(props.tileScale.x, props.tileScale.y);
@@ -3540,7 +3803,7 @@ function Viewport(props) {
 }
 
 // src/components/NineSliceSprite.ts
-import { Assets as Assets2, NineSliceSprite as PixiNineSliceSprite } from "pixi.js";
+import { Assets as Assets4, NineSliceSprite as PixiNineSliceSprite } from "pixi.js";
 var CanvasNineSliceSprite = class extends DisplayObject(PixiNineSliceSprite) {
   constructor() {
     super({
@@ -3552,7 +3815,7 @@ var CanvasNineSliceSprite = class extends DisplayObject(PixiNineSliceSprite) {
     for (const [key, value] of Object.entries(props)) {
       if (value !== void 0) {
         if (key === "image") {
-          this.texture = await Assets2.load(value);
+          this.texture = await Assets4.load(value);
         } else if (key in this) {
           this[key] = value;
         }
@@ -3565,11 +3828,135 @@ function NineSliceSprite(props) {
   return createComponent("NineSliceSprite", props);
 }
 
+// src/components/DOMContainer.ts
+import { DOMContainer as PixiDOMContainer } from "pixi.js";
+var EVENTS4 = [
+  "click",
+  "mouseover",
+  "mouseout",
+  "mouseenter",
+  "mouseleave",
+  "mousemove",
+  "mouseup",
+  "mousedown",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "touchcancel",
+  "wheel",
+  "scroll",
+  "resize",
+  "focus",
+  "blur",
+  "change",
+  "input",
+  "submit",
+  "reset",
+  "keydown",
+  "keyup",
+  "keypress",
+  "contextmenu",
+  "drag",
+  "dragend",
+  "dragenter",
+  "dragleave",
+  "dragover",
+  "drop",
+  "dragstart",
+  "select",
+  "selectstart",
+  "selectend",
+  "selectall",
+  "selectnone"
+];
+var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
+  constructor() {
+    super(...arguments);
+    this.disableLayout = true;
+    this.eventListeners = /* @__PURE__ */ new Map();
+  }
+  onInit(props) {
+    super.onInit(props);
+    if (props.element === void 0) {
+      throw new Error("DOMContainer: element is required");
+    }
+    if (typeof props.element === "string") {
+      this.element = document.createElement(props.element);
+    } else {
+      this.element = props.element.value;
+    }
+    for (const event of EVENTS4) {
+      if (props.attrs?.[event]) {
+        const eventHandler = (e) => {
+          props.attrs[event]?.(e);
+        };
+        this.eventListeners.set(event, eventHandler);
+        this.element.addEventListener(event, eventHandler, false);
+      }
+    }
+  }
+  onUpdate(props) {
+    super.onUpdate(props);
+    for (const [key, value] of Object.entries(props.attrs || {})) {
+      if (key === "class") {
+        const classList = value.items || value.value || value;
+        this.element.className = "";
+        if (typeof classList === "string") {
+          this.element.className = classList;
+        } else if (Array.isArray(classList)) {
+          this.element.classList.add(...classList);
+        } else if (typeof classList === "object" && classList !== null) {
+          for (const [className, shouldAdd] of Object.entries(classList)) {
+            if (shouldAdd) {
+              this.element.classList.add(className);
+            }
+          }
+        }
+      } else if (key === "style") {
+        const styleValue = value.items || value.value || value;
+        if (typeof styleValue === "string") {
+          this.element.setAttribute("style", styleValue);
+        } else if (typeof styleValue === "object" && styleValue !== null) {
+          for (const [styleProp, styleVal] of Object.entries(styleValue)) {
+            if (styleVal !== null && styleVal !== void 0) {
+              this.element.style[styleProp] = styleVal;
+            }
+          }
+        }
+      } else if (!EVENTS4.includes(key)) {
+        this.element.setAttribute(key, value);
+      }
+    }
+    if (props.textContent) {
+      this.element.textContent = props.textContent;
+    }
+    if (props.sortableChildren !== void 0) {
+      this.sortableChildren = props.sortableChildren;
+    }
+  }
+  async onDestroy(parent, afterDestroy) {
+    if (this.element) {
+      for (const [event, handler] of this.eventListeners) {
+        this.element.removeEventListener(event, handler, false);
+      }
+      this.eventListeners.clear();
+    }
+    const _afterDestroyCallback = async () => {
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+};
+registerComponent("DOMContainer", CanvasDOMContainer);
+var DOMContainer = (props) => {
+  return createComponent("DOMContainer", props);
+};
+
 // src/engine/bootstrap.ts
 import "@pixi/layout";
-import { Application as Application2 } from "pixi.js";
+import { Application as Application3 } from "pixi.js";
 var bootstrapCanvas = async (rootElement, canvas) => {
-  const app = new Application2();
+  const app = new Application3();
   await app.init({
     resizeTo: rootElement,
     autoStart: false
@@ -3620,7 +4007,7 @@ var Easing = {
 };
 
 // src/utils/RadialGradient.ts
-import { Texture as Texture5, ImageSource, DOMAdapter, Matrix } from "pixi.js";
+import { Texture as Texture6, ImageSource, DOMAdapter, Matrix } from "pixi.js";
 var RadialGradient = class {
   /**
    * Creates a new RadialGradient instance
@@ -3682,7 +4069,7 @@ var RadialGradient = class {
     if (this.ctx && this.gradient) {
       this.ctx.fillStyle = this.gradient;
       this.ctx.fillRect(0, 0, defaultSize, defaultSize);
-      this.texture = new Texture5({
+      this.texture = new Texture6({
         source: new ImageSource({
           resource: this.canvas,
           addressModeU: "clamp-to-edge",
@@ -3716,6 +4103,7 @@ export {
   Canvas2 as Canvas,
   Circle,
   Container4 as Container,
+  DOMContainer,
   DisplayObject,
   EVENTS2 as EVENTS,
   Easing,
@@ -3723,12 +4111,14 @@ export {
   Graphics,
   Howl3 as Howl,
   Howler,
+  Mesh,
   NineSliceSprite,
   ParticlesEmitter,
   RadialGradient,
   Rect,
   Scene,
   Sprite2 as Sprite,
+  Svg,
   Text,
   TilingSprite,
   Triangle,
@@ -3752,7 +4142,6 @@ export {
   mountTracker,
   on,
   registerComponent,
-  Svg as svg,
   tick,
   trigger,
   useDefineProps,