canvasengine 2.0.0-beta.23 → 2.0.0-beta.24

package/dist/index.js

@@ -1,4259 +1,2 @@
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-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);
-
-// src/engine/directive.ts
-var directives = {};
-var Directive = class {
-};
-function registerDirective(name, directive) {
-  directives[name] = directive;
-}
-function applyDirective(element, directiveName) {
-  if (!directives[directiveName]) {
-    return null;
-  }
-  const directive = new directives[directiveName]();
-  directive.onInit?.(element);
-  return directive;
-}
-
-// src/engine/utils.ts
-var utils_exports = {};
-__export(utils_exports, {
-  arrayEquals: () => arrayEquals,
-  calculateDistance: () => calculateDistance,
-  error: () => error,
-  fps2ms: () => fps2ms,
-  get: () => get,
-  isBrowser: () => isBrowser,
-  isFunction: () => isFunction,
-  isObject: () => isObject,
-  isObservable: () => isObservable,
-  isPromise: () => isPromise,
-  log: () => log,
-  preciseNow: () => preciseNow,
-  set: () => set,
-  setObservablePoint: () => setObservablePoint
-});
-import { Observable } from "rxjs";
-function isBrowser() {
-  return typeof window !== "undefined";
-}
-function preciseNow() {
-  return typeof performance !== "undefined" ? performance.now() : Date.now();
-}
-function fps2ms(fps) {
-  return 1e3 / fps;
-}
-function isPromise(value) {
-  return value && value instanceof Promise;
-}
-function arrayEquals(a, b) {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const v = a[i];
-    const bv = b[i];
-    if (typeof v === "object" && v !== null) {
-      if (typeof bv !== "object" || bv === null) return false;
-      if (Array.isArray(v)) {
-        if (!Array.isArray(bv) || !arrayEquals(v, bv)) return false;
-      } else if (!objectEquals(v, bv)) {
-        return false;
-      }
-    } else if (v !== bv) {
-      return false;
-    }
-  }
-  return true;
-}
-function objectEquals(a, b) {
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (let key of keysA) {
-    if (!b.hasOwnProperty(key)) return false;
-    if (!deepEquals(a[key], b[key])) return false;
-  }
-  return true;
-}
-function deepEquals(a, b) {
-  if (a === b) return true;
-  if (typeof a !== typeof b) return false;
-  if (typeof a === "object" && a !== null) {
-    if (Array.isArray(a)) {
-      return Array.isArray(b) && arrayEquals(a, b);
-    }
-    return objectEquals(a, b);
-  }
-  return false;
-}
-function isFunction(val) {
-  return {}.toString.call(val) === "[object Function]";
-}
-function isObject(val) {
-  return typeof val == "object" && val != null && !Array.isArray(val) && val.constructor === Object;
-}
-function isObservable(val) {
-  return val instanceof Observable;
-}
-function set(obj, path, value, onlyPlainObject = false) {
-  if (Object(obj) !== obj) return obj;
-  if (typeof path === "string") {
-    path = path.split(".");
-  }
-  let len = path.length;
-  if (!len) return obj;
-  let current = obj;
-  for (let i = 0; i < len - 1; i++) {
-    let segment = path[i];
-    let nextSegment = path[i + 1];
-    let isNextNumeric = !isNaN(Number(nextSegment)) && isFinite(Number(nextSegment));
-    if (!current[segment] || typeof current[segment] !== "object") {
-      current[segment] = isNextNumeric && !onlyPlainObject ? [] : {};
-    }
-    current = current[segment];
-  }
-  current[path[len - 1]] = value;
-  return obj;
-}
-function get(obj, path) {
-  const keys = path.split(".");
-  let current = obj;
-  for (let key of keys) {
-    if (current[key] === void 0) {
-      return void 0;
-    }
-    current = current[key];
-  }
-  return current;
-}
-function log(text) {
-  console.log(text);
-}
-function error(text) {
-  console.error(text);
-}
-function setObservablePoint(observablePoint, point) {
-  if (typeof point === "number") {
-    observablePoint.set(point);
-  } else if (Array.isArray(point)) {
-    observablePoint.set(point[0], point[1]);
-  } else {
-    observablePoint.set(point.x, point.y);
-  }
-}
-function calculateDistance(x1, y1, x2, y2) {
-  const dx = x1 - x2;
-  const dy = y1 - y2;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-
-// src/directives/KeyboardControls.ts
-var keyCodeTable = {
-  3: "break",
-  8: "backspace",
-  // backspace / delete
-  9: "tab",
-  12: "clear",
-  13: "enter",
-  16: "shift",
-  17: "ctrl",
-  18: "alt",
-  19: "pause/break",
-  20: "caps lock",
-  27: "escape",
-  28: "conversion",
-  29: "non-conversion",
-  32: "space",
-  33: "page up",
-  34: "page down",
-  35: "end",
-  36: "home",
-  37: "left",
-  38: "up",
-  39: "right",
-  40: "down",
-  41: "select",
-  42: "print",
-  43: "execute",
-  44: "Print Screen",
-  45: "insert",
-  46: "delete",
-  48: "n0",
-  49: "n1",
-  50: "n2",
-  51: "n3",
-  52: "n4",
-  53: "n5",
-  54: "n6",
-  55: "n7",
-  56: "n8",
-  57: "n9",
-  58: ":",
-  59: "semicolon (firefox), equals",
-  60: "<",
-  61: "equals (firefox)",
-  63: "\xDF",
-  64: "@",
-  65: "a",
-  66: "b",
-  67: "c",
-  68: "d",
-  69: "e",
-  70: "f",
-  71: "g",
-  72: "h",
-  73: "i",
-  74: "j",
-  75: "k",
-  76: "l",
-  77: "m",
-  78: "n",
-  79: "o",
-  80: "p",
-  81: "q",
-  82: "r",
-  83: "s",
-  84: "t",
-  85: "u",
-  86: "v",
-  87: "w",
-  88: "x",
-  89: "y",
-  90: "z",
-  91: "Windows Key / Left \u2318 / Chromebook Search key",
-  92: "right window key",
-  93: "Windows Menu / Right \u2318",
-  96: "numpad 0",
-  97: "numpad 1",
-  98: "numpad 2",
-  99: "numpad 3",
-  100: "numpad 4",
-  101: "numpad 5",
-  102: "numpad 6",
-  103: "numpad 7",
-  104: "numpad 8",
-  105: "numpad 9",
-  106: "multiply",
-  107: "add",
-  108: "numpad period (firefox)",
-  109: "subtract",
-  110: "decimal point",
-  111: "divide",
-  112: "f1",
-  113: "f2",
-  114: "f3",
-  115: "f4",
-  116: "f5",
-  117: "f6",
-  118: "f7",
-  119: "f8",
-  120: "f9",
-  121: "f10",
-  122: "f11",
-  123: "f12",
-  124: "f13",
-  125: "f14",
-  126: "f15",
-  127: "f16",
-  128: "f17",
-  129: "f18",
-  130: "f19",
-  131: "f20",
-  132: "f21",
-  133: "f22",
-  134: "f23",
-  135: "f24",
-  144: "num lock",
-  145: "scroll lock",
-  160: "^",
-  161: "!",
-  163: "#",
-  164: "$",
-  165: "\xF9",
-  166: "page backward",
-  167: "page forward",
-  169: "closing paren (AZERTY)",
-  170: "*",
-  171: "~ + * key",
-  173: "minus (firefox), mute/unmute",
-  174: "decrease volume level",
-  175: "increase volume level",
-  176: "next",
-  177: "previous",
-  178: "stop",
-  179: "play/pause",
-  180: "e-mail",
-  181: "mute/unmute (firefox)",
-  182: "decrease volume level (firefox)",
-  183: "increase volume level (firefox)",
-  186: "semi-colon / \xF1",
-  187: "equal sign",
-  188: "comma",
-  189: "dash",
-  190: "period",
-  191: "forward slash / \xE7",
-  192: "grave accent / \xF1 / \xE6",
-  193: "?, / or \xB0",
-  194: "numpad period (chrome)",
-  219: "open bracket",
-  220: "back slash",
-  221: "close bracket / \xE5",
-  222: "single quote / \xF8",
-  223: "`",
-  224: "left or right \u2318 key (firefox)",
-  225: "altgr",
-  226: "< /git >",
-  230: "GNOME Compose Key",
-  231: "\xE7",
-  233: "XF86Forward",
-  234: "XF86Back",
-  240: "alphanumeric",
-  242: "hiragana/katakana",
-  243: "half-width/full-width",
-  244: "kanji",
-  255: "toggle touchpad"
-};
-var inverse = (obj) => {
-  const newObj = {};
-  for (let key in obj) {
-    const val = obj[key];
-    newObj[val] = key;
-  }
-  return newObj;
-};
-var inverseKeyCodeTable = inverse(keyCodeTable);
-var KeyboardControls = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.keyState = {};
-    this.boundKeys = {};
-    this.stop = false;
-    this.lastKeyPressed = null;
-    this._controlsOptions = {};
-    // TODO: This should be dynamic
-    this.serverFps = 60;
-    this.directionState = {
-      up: false,
-      down: false,
-      left: false,
-      right: false
-    };
-  }
-  onInit(element) {
-    const value = element.props.controls.value ?? element.props.controls;
-    if (!value) return;
-    this.setupListeners();
-    this.setInputs(value);
-    this.interval = setInterval(() => {
-      this.preStep();
-    }, fps2ms(this.serverFps ?? 60));
-  }
-  onMount(element) {
-  }
-  onUpdate(props) {
-    this.setInputs(props);
-  }
-  onDestroy() {
-    clearInterval(this.interval);
-    document.removeEventListener("keydown", (e) => {
-      this.onKeyChange(e, true);
-    });
-    document.removeEventListener("keyup", (e) => {
-      this.onKeyChange(e, false);
-    });
-  }
-  /** @internal */
-  preStep() {
-    if (this.stop) return;
-    const direction = this.getDirection();
-    if (direction !== "none") {
-      const directionControl = this.boundKeys[direction];
-      if (directionControl) {
-        const { keyDown } = directionControl.options;
-        if (keyDown) {
-          this.applyInput(direction);
-        }
-      }
-    } else {
-      const boundKeys = Object.keys(this.boundKeys);
-      for (let keyName of boundKeys) {
-        this.applyInput(keyName);
-      }
-    }
-  }
-  applyInput(keyName) {
-    const keyState = this.keyState[keyName];
-    if (!keyState) return;
-    const { isDown, count } = keyState;
-    if (isDown) {
-      const { repeat, keyDown } = this.boundKeys[keyName].options;
-      if (repeat || count == 0) {
-        let parameters = this.boundKeys[keyName].parameters;
-        if (typeof parameters === "function") {
-          parameters = parameters();
-        }
-        if (keyDown) {
-          keyDown(this.boundKeys[keyName]);
-        }
-        this.keyState[keyName].count++;
-      }
-    }
-  }
-  setupListeners() {
-    document.addEventListener("keydown", (e) => {
-      this.onKeyChange(e, true);
-    });
-    document.addEventListener("keyup", (e) => {
-      this.onKeyChange(e, false);
-    });
-  }
-  bindKey(keys, actionName, options, parameters) {
-    if (!Array.isArray(keys)) keys = [keys];
-    const keyOptions = Object.assign({
-      repeat: false
-    }, options);
-    keys.forEach((keyName) => {
-      this.boundKeys[keyName] = { actionName, options: keyOptions, parameters };
-    });
-  }
-  applyKeyDown(name) {
-    const code = inverseKeyCodeTable[name];
-    const e = new Event("keydown");
-    e.keyCode = code;
-    this.onKeyChange(e, true);
-  }
-  applyKeyUp(name) {
-    const code = inverseKeyCodeTable[name];
-    const e = new Event("keyup");
-    e.keyCode = code;
-    this.onKeyChange(e, false);
-  }
-  applyKeyPress(name) {
-    return new Promise((resolve) => {
-      this.applyKeyDown(name);
-      setTimeout(() => {
-        this.applyKeyUp(name);
-        resolve();
-      }, 200);
-    });
-  }
-  onKeyChange(e, isDown) {
-    e = e || window.event;
-    const keyName = keyCodeTable[e.keyCode];
-    if (keyName && this.boundKeys[keyName]) {
-      if (this.keyState[keyName] == null) {
-        this.keyState[keyName] = {
-          count: 0,
-          isDown: true
-        };
-      }
-      this.keyState[keyName].isDown = isDown;
-      if (!isDown) {
-        this.keyState[keyName].count = 0;
-        const { keyUp } = this.boundKeys[keyName].options;
-        if (keyUp) {
-          keyUp(this.boundKeys[keyName]);
-        }
-      }
-      this.lastKeyPressed = isDown ? e.keyCode : null;
-    }
-    if (keyName) {
-      this.updateDirectionState(keyName, isDown);
-    }
-  }
-  updateDirectionState(keyName, isDown) {
-    switch (keyName) {
-      case "up":
-        this.directionState.up = isDown;
-        break;
-      case "down":
-        this.directionState.down = isDown;
-        break;
-      case "left":
-        this.directionState.left = isDown;
-        break;
-      case "right":
-        this.directionState.right = isDown;
-        break;
-    }
-  }
-  getDirection() {
-    const { up, down, left, right } = this.directionState;
-    if (up && left) return "up_left";
-    if (up && right) return "up_right";
-    if (down && left) return "down_left";
-    if (down && right) return "down_right";
-    if (up) return "up";
-    if (down) return "down";
-    if (left) return "left";
-    if (right) return "right";
-    return "none";
-  }
-  /**
-       * From the name of the entry, we retrieve the control information
-       * 
-       * ```ts 
-       * import { Input, inject, KeyboardControls } from '@rpgjs/client'
-       * 
-       * const controls = inject(KeyboardControls)
-       * controls.getControl(Input.Enter)
-  
-       * if (control) {
-       *    console.log(control.actionName) // action
-       * }
-       * ```
-       * @title Get Control
-       * @method getControl(inputName)
-       * @param {string} inputName
-       * @returns { { actionName: string, options: any } | undefined }
-       * @memberof KeyboardControls
-       */
-  getControl(inputName) {
-    return this.boundKeys[inputName];
-  }
-  /**
-   * Returns all controls
-   * 
-   * @method getControls()
-   * @since 4.2.0
-   * @returns { { [key: string]: BoundKey } }
-   * @memberof KeyboardControls
-   */
-  getControls() {
-    return this.boundKeys;
-  }
-  /**
-   * Triggers an input according to the name of the control
-   * 
-   * ```ts 
-   * import { Control, inject, KeyboardControls } from '@rpgjs/client'
-   * 
-   * const controls = inject(KeyboardControls)
-   * controls.applyControl(Control.Action)
-   * ```
-   * 
-   * You can put a second parameter or indicate on whether the key is pressed or released
-   * 
-   * ```ts 
-   * import { Control, inject, KeyboardControls } from '@rpgjs/client'
-   * 
-   * const controls = inject(KeyboardControls)
-   * controls.applyControl(Control.Up, true) // keydown
-   * controls.applyControl(Control.Up, false) // keyup
-   * ```
-   * @title Apply Control
-   * @method applyControl(controlName,isDown)
-   * @param {string} controlName
-   * @param {boolean} [isDown]
-   * @returns {Promise<void>}
-   * @memberof KeyboardControls
-   */
-  async applyControl(controlName, isDown) {
-    const control = this._controlsOptions[controlName];
-    if (control) {
-      const input = Array.isArray(control.bind) ? control.bind[0] : control.bind;
-      if (isDown === void 0) {
-        await this.applyKeyPress(input);
-      } else if (isDown) {
-        this.applyKeyDown(input);
-      } else {
-        this.applyKeyUp(input);
-      }
-    }
-  }
-  /**
-   * Stop listening to the inputs. Pressing a key won't do anything
-   * 
-   * @title Stop Inputs
-   * @method stopInputs()
-   * @returns {void}
-   * @memberof KeyboardControls
-   */
-  stopInputs() {
-    this.stop = true;
-  }
-  /**
-   * Listen to the inputs again
-   * 
-   * @title Listen Inputs
-   * @method listenInputs()
-   * @returns {void}
-   * @memberof KeyboardControls
-   */
-  listenInputs() {
-    this.stop = false;
-    this.keyState = {};
-  }
-  /**
-       * Assign custom inputs to the scene
-       * 
-       * The object is the following:
-       * 
-       * * the key of the object is the name of the control. Either it is existing controls (Up, Dow, Left, Right, Action, Back) or customized controls
-       * * The value is an object representing control information:
-       *      * repeat {boolean} The key can be held down to repeat the action. (false by default)
-       *      * bind {string | string[]} To which key is linked the control
-       *      * method {Function} Function to be triggered. If you do not set this property, the name of the control is sent directly to the server.
-       *      * delay {object|number} (since v3.2.0) Indicates how long (in milliseconds) the player can press the key again to perform the action
-       *          * delay.duration
-       *          * delay.otherControls {string | string[]} Indicates the other controls that will also have the delay at the same time
-       * 
-       * ```ts 
-       * import { Control, Input, inject, KeyboardControls } from '@rpgjs/client'
-       * 
-       * const controls = inject(KeyboardControls)
-       * controls.setInputs({
-              [Control.Up]: {
-                  repeat: true,
-                  bind: Input.Up
-              },
-              [Control.Down]: {
-                  repeat: true,
-                  bind: Input.Down
-              },
-              [Control.Right]: {
-                  repeat: true,
-                  bind: Input.Right
-              },
-              [Control.Left]: {
-                  repeat: true,
-                  bind: Input.Left
-              },
-              [Control.Action]: {
-                  bind: [Input.Space, Input.Enter]
-              },
-              [Control.Back]: {
-                  bind: Input.Escape
-              },
-  
-              // The myscustom1 control is sent to the server when the A key is pressed.
-              mycustom1: {
-                  bind: Input.A
-              },
-  
-              // the myAction method is executed when the B key is pressed
-              mycustom2: {
-                  bind: Input.B,
-                  method({ actionName }) {
-                      console.log('cool', actionName)
-                  }
-              },
-  
-              // The player can redo the action after 400ms
-              mycustom3: {
-                  bind: Input.C,
-                  delay: 400 // ms
-              },
-  
-              // The player can redo the action (mycustom4) and the directions after 400ms
-              mycustom4: {
-                  bind: Input.C,
-                  delay: {
-                      duration: 400,
-                      otherControls: [Control.Up, Control.Down, Control.Left, Control.Right]
-                  }
-              }
-          })
-       * 
-       * ```
-       * @enum {string} Control 
-       * 
-       * Control.Up | up
-       * Control.Down | down
-       * Control.Left | left
-       * Control.Right | right
-       * Control.Action | action
-       * Control.Back | back
-       * 
-       * @enum {string} Mouse Event 
-       * 
-       * click | Click
-       * dblclick | Double Click
-       * mousedown | Mouse Down
-       * mouseup | Mouse Up
-       * mouseover | Mouse Over
-       * mousemove | Mouse Move
-       * mouseout | Mouse Out
-       * contextmenu | Context Menu
-       * 
-       * 
-       * @enum {string} Input 
-       * 
-       * break | Pause
-      * backspace | Backspace / Delete
-      * tab | Tab
-      * clear | Clear
-      * enter | Enter
-      * shift | Shift
-      * ctrl | Control
-      * alt | Alt
-      * pause/break | Pause / Break
-      * caps lock | Caps Lock
-      * escape | Escape
-      * conversion | Conversion
-      * non-conversion | Non-conversion
-      * space | Space
-      * page up | Page Up
-      * page down | Page Down
-      * end | End
-      * home | Home
-      * left | Left Arrow
-      * up | Up Arrow
-      * right | Right Arrow
-      * down | Down Arrow
-      * select | Select
-      * print | Print
-      * execute | Execute
-      * Print Screen | Print Screen
-      * insert | Insert
-      * delete | Delete
-      * n0 | 0
-      * n1 | 1
-      * n2 | 2
-      * n3 | 3
-      * n4 | 4
-      * n5 | 5
-      * n6 | 6
-      * n7 | 7
-      * n8 | 8
-      * n9 | 9
-      * : | Colon
-      * semicolon (firefox), equals | Semicolon (Firefox), Equals
-      * < | Less Than
-      * equals (firefox) | Equals (Firefox)
-      * ß | Eszett
-      * @ | At
-      * a | A
-      * b | B
-      * c | C
-      * d | D
-      * e | E
-      * f | F
-      * g | G
-      * h | H
-      * i | I
-      * j | J
-      * k | K
-      * l | L
-      * m | M
-      * n | N
-      * o | O
-      * p | P
-      * q | Q
-      * r | R
-      * s | S
-      * t | T
-      * u | U
-      * v | V
-      * w | W
-      * x | X
-      * y | Y
-      * z | Z
-      * Windows Key / Left ⌘ / Chromebook Search key | Windows Key / Left Command ⌘ / Chromebook Search Key
-      * right window key | Right Windows Key
-      * Windows Menu / Right ⌘ | Windows Menu / Right Command ⌘
-      * numpad 0 | Numpad 0
-      * numpad 1 | Numpad 1
-      * numpad 2 | Numpad 2
-      * numpad 3 | Numpad 3
-      * numpad 4 | Numpad 4
-      * numpad 5 | Numpad 5
-      * numpad 6 | Numpad 6
-      * numpad 7 | Numpad 7
-      * numpad 8 | Numpad 8
-      * numpad 9 | Numpad 9
-      * multiply | Multiply
-      * add | Add
-      * numpad period (firefox) | Numpad Period (Firefox)
-      * subtract | Subtract
-      * decimal point | Decimal Point
-      * divide | Divide
-      * f1 | F1
-      * f2 | F2
-      * f3 | F3
-      * f4 | F4
-      * f5 | F5
-      * f6 | F6
-      * f7 | F7
-      * f8 | F8
-      * f9 | F9
-      * f10 | F10
-      * f11 | F11
-      * f12 | F12
-      * f13 | F13
-      * f14 | F14
-      * f15 | F15
-      * f16 | F16
-      * f17 | F17
-      * f18 | F18
-      * f19 | F19
-      * f20 | F20
-      * f21 | F21
-      * f22 | F22
-      * f23 | F23
-      * f24 | F24
-      * num lock | Num Lock
-      * scroll lock | Scroll Lock
-      * ^ | Caret
-      * ! | Exclamation Point
-      * # | Hash
-      * $ | Dollar Sign
-      * ù | Grave Accent U
-      * page backward | Page Backward
-      * page forward | Page Forward
-      * closing paren (AZERTY) | Closing Parenthesis (AZERTY)
-      * * | Asterisk
-      * ~ + * key | Tilde + Asterisk Key
-      * minus (firefox), mute/unmute | Minus (Firefox), Mute/Unmute
-      * decrease volume level | Decrease Volume Level
-      * increase volume level | Increase Volume Level
-      * next | Next
-      * previous | Previous
-      * stop | Stop
-      * play/pause | Play/Pause
-      * e-mail | Email
-      * mute/unmute (firefox) | Mute/Unmute (Firefox)
-      * decrease volume level (firefox) | Decrease Volume Level (Firefox)
-      * increase volume level (firefox) | Increase Volume Level (Firefox)
-      * semi-colon / ñ | Semicolon / ñ
-      * equal sign | Equal Sign
-      * comma | Comma
-      * dash | Dash
-      * period | Period
-      * forward slash / ç | Forward Slash / ç
-      * grave accent / ñ / æ | Grave Accent / ñ / æ
-      * ?, / or ° | ?, / or °
-      * numpad period (chrome) | Numpad Period (Chrome)
-      * open bracket | Open Bracket
-      * back slash | Backslash
-      * close bracket / å | Close Bracket / å
-      * single quote / ø | Single Quote / ø
-      * \` | Backtick
-      * left or right ⌘ key (firefox) | Left or Right Command Key (Firefox)
-      * altgr | AltGr
-      * < /git > | < /git >
-      * GNOME Compose Key | GNOME Compose Key
-      * ç | ç
-      * XF86Forward | XF86Forward
-      * XF86Back | XF86Back
-      * alphanumeric | Alphanumeric
-      * hiragana/katakana | Hiragana/Katakana
-      * half-width/full-width | Half-Width/Full-Width
-      * kanji | Kanji
-      * toggle touchpad | Toggle Touchpad
-       * 
-       * @title Set Inputs
-       * @method setInputs(inputs)
-       * @param {object} inputs
-       * @memberof KeyboardControls
-       */
-  setInputs(inputs) {
-    if (!inputs) return;
-    this.boundKeys = {};
-    let inputsTransformed = {};
-    for (let control in inputs) {
-      const option = inputs[control];
-      const { bind } = option;
-      let inputsKey = bind;
-      if (!Array.isArray(inputsKey)) {
-        inputsKey = [bind];
-      }
-      for (let input of inputsKey) {
-        this.bindKey(input, control, option);
-      }
-    }
-    this._controlsOptions = inputs;
-  }
-  get options() {
-    return this._controlsOptions;
-  }
-};
-registerDirective("controls", KeyboardControls);
-
-// src/directives/Scheduler.ts
-var Scheduler = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.fps = 60;
-    this.deltaTime = 0;
-    this.frame = 0;
-    this.timestamp = 0;
-    this.requestedDelay = 0;
-    this.lastTimestamp = 0;
-    this._stop = false;
-  }
-  onInit(element) {
-    this.tick = element.propObservables?.tick;
-  }
-  onDestroy() {
-  }
-  onMount(element) {
-  }
-  onUpdate(props) {
-  }
-  nextTick(timestamp) {
-    this.lastTimestamp = this.lastTimestamp || this.timestamp;
-    this.deltaTime = preciseNow() - this.timestamp;
-    this.timestamp = timestamp;
-    this.tick.set({
-      timestamp: this.timestamp,
-      deltaTime: this.deltaTime,
-      frame: this.frame,
-      deltaRatio: ~~this.deltaTime / ~~fps2ms(this.fps)
-    });
-    this.lastTimestamp = this.timestamp;
-    this.frame++;
-  }
-  /**
-   * start the schedule
-   * @return {Scheduler} returns this scheduler instance
-   */
-  start(options = {}) {
-    if (options.maxFps) this.maxFps = options.maxFps;
-    if (options.fps) this.fps = options.fps;
-    if (options.delay) this.requestedDelay = options.delay;
-    const requestAnimationFrame = (fn) => {
-      if (isBrowser()) {
-        window.requestAnimationFrame(fn.bind(this));
-      } else {
-        setTimeout(() => {
-          this.requestedDelay = 0;
-          fn(preciseNow());
-        }, fps2ms(this.fps) + this.requestedDelay);
-      }
-    };
-    if (!this.maxFps) {
-      const loop2 = (timestamp) => {
-        requestAnimationFrame(loop2);
-        this.nextTick(timestamp);
-      };
-      requestAnimationFrame(loop2);
-    } else {
-      const msInterval = fps2ms(this.maxFps);
-      let now = preciseNow();
-      let then = preciseNow();
-      const loop2 = (timestamp) => {
-        if (this._stop) return;
-        requestAnimationFrame(loop2);
-        now = preciseNow();
-        const elapsed = now - then;
-        if (elapsed > msInterval) {
-          then = now - elapsed % msInterval;
-          this.nextTick(timestamp);
-        }
-      };
-      requestAnimationFrame(loop2);
-    }
-    return this;
-  }
-  stop() {
-    this._stop = true;
-  }
-};
-registerDirective("tick", Scheduler);
-
-// src/hooks/useProps.ts
-import { isSignal as isSignal2, signal as signal2 } from "@signe/reactive";
-
-// src/engine/reactive.ts
-import { isComputed, isSignal, signal } from "@signe/reactive";
-import {
-  Observable as Observable2,
-  Subject,
-  defer,
-  from,
-  map,
-  of,
-  share
-} from "rxjs";
-var components = {};
-var isElement = (value) => {
-  return value && typeof value === "object" && "tag" in value && "props" in value && "componentInstance" in value;
-};
-var isPrimitive = (value) => {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0;
-};
-function registerComponent(name, component) {
-  components[name] = component;
-}
-function destroyElement(element) {
-  if (Array.isArray(element)) {
-    element.forEach((e) => destroyElement(e));
-    return;
-  }
-  if (!element) {
-    return;
-  }
-  if (element.props?.children) {
-    for (let child of element.props.children) {
-      destroyElement(child);
-    }
-  }
-  for (let name in element.directives) {
-    element.directives[name].onDestroy?.(element);
-  }
-  if (element.componentInstance && element.componentInstance.onDestroy) {
-    element.componentInstance.onDestroy(element.parent, () => {
-      element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
-      element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
-      element.effectUnmounts?.forEach((fn) => fn?.());
-    });
-  } else {
-    element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
-    element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
-    element.effectUnmounts?.forEach((fn) => fn?.());
-  }
-}
-function createComponent(tag, props) {
-  if (!components[tag]) {
-    throw new Error(`Component ${tag} is not registered`);
-  }
-  const instance = new components[tag]();
-  const element = {
-    tag,
-    props: {},
-    componentInstance: instance,
-    propSubscriptions: [],
-    propObservables: props,
-    parent: null,
-    directives: {},
-    effectUnmounts: [],
-    effectSubscriptions: [],
-    effectMounts: [],
-    destroy() {
-      destroyElement(this);
-    },
-    allElements: new Subject()
-  };
-  if (props) {
-    const recursiveProps = (props2, path = "") => {
-      const _set = (path2, key, value) => {
-        if (path2 == "") {
-          element.props[key] = value;
-          return;
-        }
-        set(element.props, path2 + "." + key, value);
-      };
-      Object.entries(props2).forEach(([key, value]) => {
-        if (isSignal(value)) {
-          const _value = value;
-          if ("dependencies" in _value && _value.dependencies.size == 0) {
-            _set(path, key, _value());
-            return;
-          }
-          element.propSubscriptions.push(
-            _value.observable.subscribe((value2) => {
-              _set(path, key, value2);
-              if (element.directives[key]) {
-                element.directives[key].onUpdate?.(value2, element);
-              }
-              if (key == "tick") {
-                return;
-              }
-              instance.onUpdate?.(
-                path == "" ? {
-                  [key]: value2
-                } : set({}, path + "." + key, value2)
-              );
-            })
-          );
-        } else {
-          if (isObject(value) && key != "context" && !isElement(value)) {
-            recursiveProps(value, (path ? path + "." : "") + key);
-          } else {
-            _set(path, key, value);
-          }
-        }
-      });
-    };
-    recursiveProps(props);
-  }
-  instance.onInit?.(element.props);
-  const elementsListen = new Subject();
-  if (props?.isRoot) {
-    element.allElements = elementsListen;
-    element.props.context.rootElement = element;
-    element.componentInstance.onMount?.(element);
-    propagateContext(element);
-  }
-  if (props) {
-    for (let key in props) {
-      const directive = applyDirective(element, key);
-      if (directive) element.directives[key] = directive;
-    }
-  }
-  function onMount(parent, element2, index) {
-    element2.props.context = parent.props.context;
-    element2.parent = parent;
-    element2.componentInstance.onMount?.(element2, index);
-    for (let name in element2.directives) {
-      element2.directives[name].onMount?.(element2);
-    }
-    element2.effectMounts.forEach((fn) => {
-      element2.effectUnmounts.push(fn(element2));
-    });
-  }
-  ;
-  async function propagateContext(element2) {
-    if (element2.props.attach) {
-      const isReactiveAttach = isSignal(element2.propObservables?.attach);
-      if (!isReactiveAttach) {
-        element2.props.children.push(element2.props.attach);
-      } else {
-        await new Promise((resolve) => {
-          let lastElement = null;
-          element2.propSubscriptions.push(element2.propObservables.attach.observable.subscribe(async (args) => {
-            const value = args?.value ?? args;
-            if (!value) {
-              throw new Error(`attach in ${element2.tag} is undefined or null, add a component`);
-            }
-            if (lastElement) {
-              destroyElement(lastElement);
-            }
-            lastElement = value;
-            await createElement(element2, value);
-            resolve(void 0);
-          }));
-        });
-      }
-    }
-    if (!element2.props.children) {
-      return;
-    }
-    for (let child of element2.props.children) {
-      if (!child) continue;
-      await createElement(element2, child);
-    }
-  }
-  ;
-  async function createElement(parent, child) {
-    if (isPromise(child)) {
-      child = await child;
-    }
-    if (child instanceof Observable2) {
-      child.subscribe(
-        ({
-          elements: comp,
-          prev
-        }) => {
-          const components2 = comp.filter((c) => c !== null);
-          if (prev) {
-            components2.forEach((c) => {
-              const index = parent.props.children.indexOf(prev.props.key);
-              onMount(parent, c, index + 1);
-              propagateContext(c);
-            });
-            return;
-          }
-          components2.forEach((component) => {
-            if (!Array.isArray(component)) {
-              onMount(parent, component);
-              propagateContext(component);
-            } else {
-              component.forEach((comp2) => {
-                onMount(parent, comp2);
-                propagateContext(comp2);
-              });
-            }
-          });
-          elementsListen.next(void 0);
-        }
-      );
-    } else {
-      onMount(parent, child);
-      await propagateContext(child);
-    }
-  }
-  return element;
-}
-function loop(itemsSubject, createElementFn) {
-  if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
-    itemsSubject = signal(itemsSubject());
-  } else if (!isSignal(itemsSubject)) {
-    itemsSubject = signal(itemsSubject);
-  }
-  return defer(() => {
-    let elements = [];
-    let elementMap = /* @__PURE__ */ new Map();
-    let isFirstSubscription = true;
-    const isArraySignal = (signal10) => Array.isArray(signal10());
-    return new Observable2((subscriber) => {
-      const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
-        if (isFirstSubscription) {
-          isFirstSubscription = false;
-          elements.forEach((el) => el.destroy());
-          elements = [];
-          elementMap.clear();
-          const items = itemsSubject();
-          if (items) {
-            items.forEach((item, index) => {
-              const element = createElementFn(item, index);
-              if (element) {
-                elements.push(element);
-                elementMap.set(index, element);
-              }
-            });
-          }
-          subscriber.next({
-            elements: [...elements]
-          });
-          return;
-        }
-        if (change.type === "init" || change.type === "reset") {
-          elements.forEach((el) => el.destroy());
-          elements = [];
-          elementMap.clear();
-          const items = itemsSubject();
-          if (items) {
-            items.forEach((item, index) => {
-              const element = createElementFn(item, index);
-              if (element) {
-                elements.push(element);
-                elementMap.set(index, element);
-              }
-            });
-          }
-        } else if (change.type === "add" && change.index !== void 0) {
-          const newElements = change.items.map((item, i) => {
-            const element = createElementFn(item, change.index + i);
-            if (element) {
-              elementMap.set(change.index + i, element);
-            }
-            return element;
-          }).filter((el) => el !== null);
-          elements.splice(change.index, 0, ...newElements);
-        } else if (change.type === "remove" && change.index !== void 0) {
-          const removed = elements.splice(change.index, 1);
-          removed.forEach((el) => {
-            el.destroy();
-            elementMap.delete(change.index);
-          });
-        } else if (change.type === "update" && change.index !== void 0 && change.items.length === 1) {
-          const index = change.index;
-          const newItem = change.items[0];
-          if (index >= elements.length || elements[index] === void 0 || !elementMap.has(index)) {
-            const newElement = createElementFn(newItem, index);
-            if (newElement) {
-              elements.splice(index, 0, newElement);
-              elementMap.set(index, newElement);
-            } else {
-              console.warn(`Element creation returned null for index ${index} during add-like update.`);
-            }
-          } else {
-            const oldElement = elements[index];
-            oldElement.destroy();
-            const newElement = createElementFn(newItem, index);
-            if (newElement) {
-              elements[index] = newElement;
-              elementMap.set(index, newElement);
-            } else {
-              elements.splice(index, 1);
-              elementMap.delete(index);
-            }
-          }
-        }
-        subscriber.next({
-          elements: [...elements]
-          // Create a new array to ensure change detection
-        });
-      }) : itemsSubject.observable.subscribe((change) => {
-        const key = change.key;
-        if (isFirstSubscription) {
-          isFirstSubscription = false;
-          elements.forEach((el) => el.destroy());
-          elements = [];
-          elementMap.clear();
-          const items = itemsSubject();
-          if (items) {
-            Object.entries(items).forEach(([key2, value]) => {
-              const element = createElementFn(value, key2);
-              if (element) {
-                elements.push(element);
-                elementMap.set(key2, element);
-              }
-            });
-          }
-          subscriber.next({
-            elements: [...elements]
-          });
-          return;
-        }
-        if (change.type === "init" || change.type === "reset") {
-          elements.forEach((el) => el.destroy());
-          elements = [];
-          elementMap.clear();
-          const items = itemsSubject();
-          if (items) {
-            Object.entries(items).forEach(([key2, value]) => {
-              const element = createElementFn(value, key2);
-              if (element) {
-                elements.push(element);
-                elementMap.set(key2, element);
-              }
-            });
-          }
-        } else if (change.type === "add" && change.key && change.value !== void 0) {
-          const element = createElementFn(change.value, key);
-          if (element) {
-            elements.push(element);
-            elementMap.set(key, element);
-          }
-        } else if (change.type === "remove" && change.key) {
-          const index = elements.findIndex((el) => elementMap.get(key) === el);
-          if (index !== -1) {
-            const [removed] = elements.splice(index, 1);
-            removed.destroy();
-            elementMap.delete(key);
-          }
-        } else if (change.type === "update" && change.key && change.value !== void 0) {
-          const index = elements.findIndex((el) => elementMap.get(key) === el);
-          if (index !== -1) {
-            const oldElement = elements[index];
-            oldElement.destroy();
-            const newElement = createElementFn(change.value, key);
-            if (newElement) {
-              elements[index] = newElement;
-              elementMap.set(key, newElement);
-            }
-          }
-        }
-        subscriber.next({
-          elements: [...elements]
-          // Create a new array to ensure change detection
-        });
-      });
-      return subscription;
-    });
-  });
-}
-function cond(condition, createElementFn) {
-  let element = null;
-  if (isSignal(condition)) {
-    const signalCondition = condition;
-    return new Observable2((subscriber) => {
-      return signalCondition.observable.subscribe((bool) => {
-        if (bool) {
-          let _el = createElementFn();
-          if (isPromise(_el)) {
-            from(_el).subscribe((el) => {
-              element = el;
-              subscriber.next({
-                type: "init",
-                elements: [el]
-              });
-            });
-          } else {
-            element = _el;
-            subscriber.next({
-              type: "init",
-              elements: [element]
-            });
-          }
-        } else if (element) {
-          destroyElement(element);
-          subscriber.next({
-            elements: []
-          });
-        } else {
-          subscriber.next({
-            elements: []
-          });
-        }
-      });
-    }).pipe(share());
-  } else {
-    if (condition) {
-      let _el = createElementFn();
-      if (isPromise(_el)) {
-        return from(_el).pipe(
-          map((el) => ({
-            type: "init",
-            elements: [el]
-          }))
-        );
-      }
-      return of({
-        type: "init",
-        elements: [_el]
-      });
-    }
-    return of({
-      elements: []
-    });
-  }
-}
-
-// src/hooks/useProps.ts
-var useProps = (props, defaults = {}) => {
-  if (isSignal2(props)) {
-    return props();
-  }
-  const obj = {};
-  for (let key in props) {
-    const value = props[key];
-    obj[key] = isPrimitive(value) ? signal2(value) : value;
-  }
-  for (let key in defaults) {
-    if (!(key in obj)) {
-      obj[key] = isPrimitive(defaults[key]) ? signal2(defaults[key]) : defaults[key];
-    }
-  }
-  return obj;
-};
-var useDefineProps = (props) => {
-  return (schema) => {
-    const rawProps = isSignal2(props) ? props() : props;
-    const validatedProps = {};
-    for (const key in schema) {
-      const propConfig = schema[key];
-      const value = rawProps[key];
-      let validatedValue;
-      if (typeof propConfig === "function") {
-        validateType(key, value, [propConfig]);
-        validatedValue = value;
-      } else if (Array.isArray(propConfig)) {
-        validateType(key, value, propConfig);
-        validatedValue = value;
-      } else if (propConfig && typeof propConfig === "object") {
-        if (propConfig.required && value === void 0) {
-          throw new Error(`Missing required prop: ${key}`);
-        }
-        if (propConfig.type) {
-          const types = Array.isArray(propConfig.type) ? propConfig.type : [propConfig.type];
-          validateType(key, value, types);
-        }
-        if (propConfig.validator && !propConfig.validator(value, rawProps)) {
-          throw new Error(`Invalid prop: custom validation failed for prop "${key}"`);
-        }
-        if (value === void 0 && "default" in propConfig) {
-          validatedValue = typeof propConfig.default === "function" ? propConfig.default(rawProps) : propConfig.default;
-        } else {
-          validatedValue = value;
-        }
-      }
-      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal2(validatedValue);
-    }
-    return {
-      ...useProps(rawProps),
-      ...validatedProps
-    };
-  };
-};
-function validateType(key, value, types) {
-  if (value === void 0 || value === null) return;
-  const valueToCheck = isSignal2(value) ? value() : value;
-  const valid = types.some((type) => {
-    if (type === Number) return typeof valueToCheck === "number";
-    if (type === String) return typeof valueToCheck === "string";
-    if (type === Boolean) return typeof valueToCheck === "boolean";
-    if (type === Function) return typeof valueToCheck === "function";
-    if (type === Object) return typeof valueToCheck === "object";
-    if (type === Array) return Array.isArray(valueToCheck);
-    if (type === null) return valueToCheck === null;
-    return valueToCheck instanceof type;
-  });
-  if (!valid) {
-    throw new Error(
-      `Invalid prop: type check failed for prop "${key}". Expected ${types.map((t) => t.name).join(" or ")}`
-    );
-  }
-}
-
-// src/directives/ViewportFollow.ts
-var ViewportFollow = class extends Directive {
-  onInit(element) {
-  }
-  onMount(element) {
-    this.onUpdate(element.props.viewportFollow, element);
-  }
-  onUpdate(viewportFollow, element) {
-    const { viewport } = element.props.context;
-    if (!viewport) {
-      throw error("ViewportFollow directive requires a Viewport component to be mounted in the same context");
-    }
-    if (viewportFollow) {
-      if (viewportFollow === true) {
-        viewport.follow(element.componentInstance);
-      } else {
-        const options = useProps(viewportFollow, {
-          speed: void 0,
-          acceleration: void 0,
-          radius: void 0
-        });
-        viewport.follow(element.componentInstance, {
-          speed: options.speed(),
-          acceleration: options.acceleration(),
-          radius: options.radius()
-        });
-      }
-    } else if (viewportFollow === null) {
-      viewport.plugins.remove("follow");
-    }
-  }
-  onDestroy(element) {
-    const { viewportFollow } = element.props;
-    const { viewport } = element.props.context;
-    if (viewportFollow) viewport.plugins.remove("follow");
-  }
-};
-registerDirective("viewportFollow", ViewportFollow);
-
-// src/directives/Sound.ts
-import { effect } from "@signe/reactive";
-import { Howl } from "howler";
-var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop", "mute", "volume", "rate", "seek", "fade", "unlock"];
-var Sound = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.sounds = [];
-    this.eventsFn = [];
-    this.maxVolume = 1;
-    this.maxDistance = 100;
-  }
-  onInit(element) {
-  }
-  onMount(element) {
-    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;
-    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 && this.sounds.length > 0) {
-      const { soundListenerPosition } = props.context;
-      if (!soundListenerPosition) {
-        throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
-      }
-      const { x: listenerX, y: listenerY } = soundListenerPosition;
-      this.tickSubscription = effect(() => {
-        tick2();
-        const { x, y } = element.componentInstance;
-        const distance = calculateDistance(x, y, listenerX(), listenerY());
-        const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
-        this.sounds.forEach((sound) => sound.volume(volume2));
-      }).subscription;
-    }
-    this.onUpdate(propsSound);
-  }
-  onUpdate(props) {
-    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;
-    }
-  }
-  onDestroy() {
-    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 {
-  onMount(element) {
-    element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition;
-  }
-  onInit(element) {
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
-};
-registerDirective("sound", Sound);
-registerDirective("soundListenerPosition", SoundListenerPosition);
-
-// src/directives/Drag.ts
-import { effect as effect2, isComputed as isComputed2, isSignal as isSignal3 } from "@signe/reactive";
-import { Rectangle, Point } from "pixi.js";
-import { snap } from "popmotion";
-
-// src/hooks/addContext.ts
-var addContext = (element, key, value) => {
-  element.props.context = {
-    ...element.props.context ?? {},
-    [key]: value
-  };
-};
-
-// src/directives/Drag.ts
-var Drop = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.elementRef = null;
-  }
-  onInit(element) {
-    this.elementRef = element;
-  }
-  onMount(element) {
-    addContext(element, "drop", element);
-  }
-  onUpdate() {
-  }
-  onDestroy() {
-    this.elementRef = null;
-  }
-};
-var Drag = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.elementRef = null;
-    this.stageRef = null;
-    this.offsetInParent = new Point();
-    this.isDragging = false;
-    this.viewport = null;
-    this.animationFrameId = null;
-    this.lastPointerPosition = new Point();
-    this.pressedKeys = /* @__PURE__ */ new Set();
-    this.pointerIsDown = false;
-    this.onDragMoveHandler = () => {
-    };
-    this.onDragEndHandler = () => {
-    };
-    this.onDragStartHandler = () => {
-    };
-    this.onKeyDownHandler = () => {
-    };
-    this.onKeyUpHandler = () => {
-    };
-    this.subscriptions = [];
-  }
-  onInit(element) {
-    this.elementRef = element;
-    this.onDragMoveHandler = this.onDragMove.bind(this);
-    this.onDragEndHandler = this.onDragEnd.bind(this);
-    this.onDragStartHandler = this.onPointerDown.bind(this);
-    this.onKeyDownHandler = this.onKeyDown.bind(this);
-    this.onKeyUpHandler = this.onKeyUp.bind(this);
-  }
-  onMount(element) {
-    const { rootElement, canvasSize, viewport, tick: tick2 } = element.props.context;
-    const instance = element.componentInstance;
-    const dragProps = this.dragProps;
-    const haveNotProps = Object.keys(dragProps).length === 0;
-    if (haveNotProps) {
-      this.onDestroy();
-      return;
-    }
-    if (!instance) return;
-    this.stageRef = rootElement.componentInstance;
-    if (!this.stageRef) return;
-    this.viewport = viewport;
-    instance.eventMode = "static";
-    this.stageRef.eventMode = "static";
-    const _effect = effect2(() => {
-      if (this.stageRef) {
-        this.stageRef.hitArea = new Rectangle(0, 0, canvasSize().width, canvasSize().height);
-      }
-    });
-    instance.on("pointerdown", this.onDragStartHandler);
-    this.stageRef.on("pointerup", this.onDragEndHandler);
-    this.stageRef.on("pointerupoutside", this.onDragEndHandler);
-    const keysToPress = dragProps.keyToPress ? dragProps.keyToPress : [];
-    window.addEventListener("keydown", this.onKeyDownHandler);
-    window.addEventListener("keyup", this.onKeyUpHandler);
-    this.subscriptions = [
-      tick2.observable.subscribe(() => {
-        if (this.isDragging && this.viewport) {
-          this.updateViewportPosition(this.lastPointerPosition);
-        }
-      }),
-      _effect.subscription
-    ];
-  }
-  get dragProps() {
-    const drag = this.elementRef?.props.drag;
-    const options = useProps(drag?.value ?? drag, {
-      snap: 0,
-      viewport: {},
-      direction: "all",
-      keyToPress: []
-    });
-    options.viewport = useProps(options.viewport, {
-      edgeThreshold: 300,
-      maxSpeed: 40
-    });
-    return options;
-  }
-  get axis() {
-    const direction = this.dragProps.direction();
-    const axis = {
-      x: true,
-      y: true
-    };
-    if (direction === "x") {
-      axis.y = false;
-    }
-    if (direction === "y") {
-      axis.x = false;
-    }
-    return axis;
-  }
-  /**
-   * Updates element position when dragging and starts continuous viewport movement
-   * @param event The pointer event that triggered the drag move
-   */
-  onDragMove(event) {
-    if (!this.isDragging || !this.elementRef?.componentInstance || !this.elementRef.componentInstance.parent) return;
-    const instance = this.elementRef.componentInstance;
-    const parent = instance.parent;
-    const dragProps = this.dragProps;
-    const propObservables = this.elementRef.propObservables;
-    const snapTo = snap(dragProps?.snap() ?? 0);
-    dragProps?.move?.(event);
-    const currentParentLocalPointer = parent.toLocal(event.global);
-    const newX = currentParentLocalPointer.x - this.offsetInParent.x;
-    const newY = currentParentLocalPointer.y - this.offsetInParent.y;
-    if (dragProps?.snap()) {
-      instance.position.x = snapTo(newX);
-      instance.position.y = snapTo(newY);
-    } else {
-      if (this.axis.x) instance.position.x = newX;
-      if (this.axis.y) instance.position.y = newY;
-    }
-    this.lastPointerPosition.copyFrom(event.global);
-    const { x: xProp, y: yProp } = propObservables;
-    const updatePosition = (prop, value) => {
-      if (isComputed2(prop)) {
-        prop.dependencies.forEach((dependency) => {
-          dependency.set(value);
-        });
-      } else if (isSignal3(prop)) {
-        prop.set(value);
-      }
-    };
-    if (xProp !== void 0) updatePosition(xProp, instance.position.x);
-    if (yProp !== void 0) updatePosition(yProp, instance.position.y);
-  }
-  /**
-   * Moves the viewport if the dragged element is near screen edges
-   * @param globalPosition The global pointer position
-   */
-  updateViewportPosition(globalPosition) {
-    if (!this.viewport || !this.elementRef) return;
-    const dragProps = this.dragProps;
-    const edgeThreshold = dragProps?.viewport?.edgeThreshold();
-    const maxSpeed = dragProps?.viewport?.maxSpeed();
-    const screenLeft = 0;
-    const screenRight = this.viewport.screenWidth;
-    const screenTop = 0;
-    const screenBottom = this.viewport.screenHeight;
-    const instance = this.elementRef.componentInstance;
-    const distanceFromLeft = globalPosition.x - screenLeft;
-    const distanceFromRight = screenRight - globalPosition.x;
-    const distanceFromTop = globalPosition.y - screenTop;
-    const distanceFromBottom = screenBottom - globalPosition.y;
-    let moveX = 0;
-    let moveY = 0;
-    if (distanceFromLeft < edgeThreshold) {
-      const velocity = maxSpeed * (1 - distanceFromLeft / edgeThreshold);
-      moveX = -velocity;
-    } else if (distanceFromRight < edgeThreshold) {
-      const velocity = maxSpeed * (1 - distanceFromRight / edgeThreshold);
-      moveX = velocity;
-    }
-    if (distanceFromTop < edgeThreshold) {
-      const velocity = maxSpeed * (1 - distanceFromTop / edgeThreshold);
-      moveY = -velocity;
-    } else if (distanceFromBottom < edgeThreshold) {
-      const velocity = maxSpeed * (1 - distanceFromBottom / edgeThreshold);
-      moveY = velocity;
-    }
-    if (moveX !== 0 || moveY !== 0) {
-      const lastViewValue = this.viewport.center;
-      this.viewport.moveCenter(
-        this.viewport.center.x + moveX,
-        this.viewport.center.y + moveY
-      );
-      if (this.axis.x && lastViewValue.x !== this.viewport.center.x) {
-        instance.position.x += moveX;
-      }
-      if (this.axis.y && lastViewValue.y !== this.viewport.center.y) {
-        instance.position.y += moveY;
-      }
-    }
-  }
-  /**
-   * Handles drag end event and stops viewport movement
-   */
-  onDragEnd() {
-    this.pointerIsDown = false;
-    if (!this.isDragging) return;
-    const dragProps = this.dragProps;
-    this.isDragging = false;
-    dragProps?.end?.();
-    if (this.stageRef) {
-      this.stageRef.off("pointermove", this.onDragMoveHandler);
-    }
-  }
-  onKeyDown(event) {
-    this.pressedKeys.add(event.code);
-    this.pressedKeys.add(event.key.toLowerCase());
-    if (this.pointerIsDown && !this.isDragging && this.areRequiredKeysPressed()) {
-      this.startDrag();
-    }
-  }
-  onKeyUp(event) {
-    this.pressedKeys.delete(event.code);
-    this.pressedKeys.delete(event.key.toLowerCase());
-    if (this.isDragging && !this.areRequiredKeysPressed()) {
-      this.onDragEnd();
-    }
-  }
-  areRequiredKeysPressed() {
-    const keyToPress = this.dragProps.keyToPress ? this.dragProps.keyToPress : [];
-    if (!keyToPress || keyToPress.length === 0) {
-      return true;
-    }
-    return keyToPress.some((key) => {
-      if (this.pressedKeys.has(key)) {
-        return true;
-      }
-      if (key.toLowerCase() === "space") {
-        return this.pressedKeys.has("Space") || this.pressedKeys.has(" ");
-      }
-      if (key.toLowerCase() === "shift") {
-        return this.pressedKeys.has("ShiftLeft") || this.pressedKeys.has("ShiftRight");
-      }
-      if (key.toLowerCase() === "control" || key.toLowerCase() === "ctrl") {
-        return this.pressedKeys.has("ControlLeft") || this.pressedKeys.has("ControlRight");
-      }
-      if (key.toLowerCase() === "alt") {
-        return this.pressedKeys.has("AltLeft") || this.pressedKeys.has("AltRight");
-      }
-      return false;
-    });
-  }
-  onPointerDown(event) {
-    if (!this.elementRef?.componentInstance || !this.stageRef || !this.elementRef.componentInstance.parent) return;
-    this.pointerIsDown = true;
-    const instance = this.elementRef.componentInstance;
-    const parent = instance.parent;
-    const parentLocalPointer = parent.toLocal(event.global);
-    this.offsetInParent.x = parentLocalPointer.x - instance.position.x;
-    this.offsetInParent.y = parentLocalPointer.y - instance.position.y;
-    this.lastPointerPosition.copyFrom(event.global);
-    if (this.areRequiredKeysPressed()) {
-      this.startDrag();
-    }
-  }
-  startDrag() {
-    if (this.isDragging || !this.stageRef) return;
-    this.isDragging = true;
-    const dragProps = this.dragProps;
-    dragProps?.start?.();
-    this.stageRef.on("pointermove", this.onDragMoveHandler);
-  }
-  onUpdate(props) {
-    if (props.type && props.type === "reset") {
-      this.onDestroy();
-      this.onMount(this.elementRef);
-    }
-  }
-  onDestroy() {
-    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-    const instance = this.elementRef?.componentInstance;
-    if (instance) {
-      instance.off("pointerdown", this.onDragStartHandler);
-    }
-    if (this.stageRef) {
-      this.stageRef.off("pointermove", this.onDragMoveHandler);
-      this.stageRef.off("pointerup", this.onDragEndHandler);
-      this.stageRef.off("pointerupoutside", this.onDragEndHandler);
-    }
-    window.removeEventListener("keydown", this.onKeyDownHandler);
-    window.removeEventListener("keyup", this.onKeyUpHandler);
-    this.stageRef = null;
-    this.viewport = null;
-    this.pressedKeys.clear();
-    this.pointerIsDown = false;
-  }
-};
-registerDirective("drag", Drag);
-registerDirective("drop", Drop);
-
-// src/directives/Transition.ts
-import { DisplacementFilter, Sprite, Texture, WRAP_MODES } from "pixi.js";
-import { animate } from "popmotion";
-var Transition = class extends Directive {
-  onInit(element) {
-  }
-  onMount(element) {
-    const { image } = element.props.transition;
-    const displacementSprite = new Sprite(Texture.from(image));
-    displacementSprite.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
-    const displacementFilter = new DisplacementFilter(displacementSprite);
-    const instance = element.componentInstance;
-    instance.filters = [displacementFilter];
-    instance.addChild(displacementSprite);
-    setTimeout(() => {
-      animate({
-        from: 0,
-        to: 1,
-        duration: 500,
-        onUpdate: (progress) => {
-          displacementFilter.scale.x = progress;
-          displacementFilter.scale.y = progress;
-        }
-      });
-    }, 5e3);
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
-};
-registerDirective("transition", Transition);
-
-// src/index.ts
-export * from "@signe/reactive";
-import { Howler } from "howler";
-
-// src/components/Canvas.ts
-import { effect as effect3, signal as signal5 } from "@signe/reactive";
-import { Container as Container3 } from "pixi.js";
-
-// src/components/DisplayObject.ts
-import { signal as signal4 } from "@signe/reactive";
-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
-import { BehaviorSubject } from "rxjs";
-var EVENTS2 = [
-  "added",
-  "childAdded",
-  "childRemoved",
-  "click",
-  "clickcapture",
-  "destroyed",
-  "globalmousemove",
-  "globalpointermove",
-  "globaltouchmove",
-  "mousedown",
-  "mousedowncapture",
-  "mouseenter",
-  "mouseentercapture",
-  "mouseleave",
-  "mouseleavecapture",
-  "mousemove",
-  "mousemovecapture",
-  "mouseout",
-  "mouseoutcapture",
-  "mouseover",
-  "mouseovercapture",
-  "mouseup",
-  "mouseupcapture",
-  "mouseupoutside",
-  "mouseupoutsidecapture",
-  "pointercancel",
-  "pointercancelcapture",
-  "pointerdown",
-  "pointerdowncapture",
-  "pointerenter",
-  "pointerentercapture",
-  "pointerleave",
-  "pointerleavecapture",
-  "pointermove",
-  "pointermovecapture",
-  "pointerout",
-  "pointeroutcapture",
-  "pointerover",
-  "pointerovercapture",
-  "pointertap",
-  "pointertapcapture",
-  "pointerup",
-  "pointerupcapture",
-  "pointerupoutside",
-  "pointerupoutsidecapture",
-  "removed",
-  "rightclick",
-  "rightclickcapture",
-  "rightdown",
-  "rightdowncapture",
-  "rightup",
-  "rightupcapture",
-  "rightupoutside",
-  "rightupoutsidecapture",
-  "tap",
-  "tapcapture",
-  "touchcancel",
-  "touchcancelcapture",
-  "touchend",
-  "touchendcapture",
-  "touchendoutside",
-  "touchendoutsidecapture",
-  "touchmove",
-  "touchmovecapture",
-  "touchstart",
-  "touchstartcapture",
-  "wheel",
-  "wheelcapture"
-];
-function DisplayObject(extendClass) {
-  var _canvasContext, _a;
-  return _a = class extends extendClass {
-    constructor() {
-      super(...arguments);
-      __privateAdd(this, _canvasContext, null);
-      this.isFlex = false;
-      this.fullProps = {};
-      this.isMounted = false;
-      this._anchorPoints = new ObservablePoint({ _onUpdate: () => {
-      } }, 0, 0);
-      this.isCustomAnchor = false;
-      this.displayWidth = signal4(0);
-      this.displayHeight = signal4(0);
-      this.overrideProps = [];
-      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) {
-        if (props[event] && !this.overrideProps.includes(event)) {
-          this.eventMode = "static";
-          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;
-      }
-      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.disableLayout) {
-          try {
-            this.layout = {};
-          } catch (error2) {
-            console.warn("Failed to set layout:", error2);
-          }
-        }
-        if (index === void 0) {
-          instance.addChild(this);
-        } else {
-          instance.addChildAt(this, index);
-        }
-        this.isMounted = true;
-        this.onUpdate(props);
-        if (this.onAfterMount) {
-          await this.onAfterMount();
-        }
-      }
-    }
-    onUpdate(props) {
-      this.fullProps = {
-        ...this.fullProps,
-        ...props
-      };
-      if (!__privateGet(this, _canvasContext) || !this.parent) return;
-      if (props.x !== void 0) this.setX(props.x);
-      if (props.y !== void 0) this.setY(props.y);
-      if (props.scale !== void 0)
-        setObservablePoint(this.scale, props.scale);
-      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;
-      if (props.angle !== void 0) this.angle = props.angle;
-      if (props.zIndex !== void 0) this.zIndex = props.zIndex;
-      if (props.roundPixels !== void 0) this.roundPixels = props.roundPixels;
-      if (props.cursor) this.cursor = props.cursor;
-      if (props.visible !== void 0) this.visible = props.visible;
-      if (props.alpha !== void 0) this.alpha = props.alpha;
-      if (props.pivot) setObservablePoint(this.pivot, props.pivot);
-      if (props.flexDirection) this.setFlexDirection(props.flexDirection);
-      if (props.flexWrap) this.setFlexWrap(props.flexWrap);
-      if (props.justifyContent) this.setJustifyContent(props.justifyContent);
-      if (props.alignItems) this.setAlignItems(props.alignItems);
-      if (props.alignContent) this.setAlignContent(props.alignContent);
-      if (props.alignSelf) this.setAlignSelf(props.alignSelf);
-      if (props.margin) this.setMargin(props.margin);
-      if (props.padding) this.setPadding(props.padding);
-      if (props.gap) this.setGap(props.gap);
-      if (props.border) this.setBorder(props.border);
-      if (props.positionType) this.setPositionType(props.positionType);
-      if (props.filters) this.filters = props.filters;
-      if (props.maskOf) {
-        if (isElement(props.maskOf)) {
-          props.maskOf.componentInstance.mask = this;
-        }
-      }
-      if (props.blendMode) this.blendMode = props.blendMode;
-      if (props.filterArea) this.filterArea = props.filterArea;
-      const currentFilters = this.filters || [];
-      if (props.blur) {
-        let blurFilter = currentFilters.find(
-          (filter2) => filter2 instanceof BlurFilter
-        );
-        if (!blurFilter) {
-          const options = typeof props.blur === "number" ? {
-            strength: props.blur
-          } : props.blur;
-          blurFilter = new BlurFilter(options);
-          currentFilters.push(blurFilter);
-        }
-        Object.assign(blurFilter, props.blur);
-      }
-      this.filters = currentFilters;
-    }
-    async onDestroy(parent, afterDestroy) {
-      if (this.onBeforeDestroy) {
-        await this.onBeforeDestroy();
-      }
-      super.destroy();
-      if (afterDestroy) afterDestroy();
-    }
-    setFlexDirection(direction) {
-      this.layout = { flexDirection: direction };
-    }
-    setFlexWrap(wrap) {
-      this.layout = { flexWrap: wrap };
-    }
-    setAlignContent(align) {
-      this.layout = { alignContent: align };
-    }
-    setAlignSelf(align) {
-      this.layout = { alignSelf: align };
-    }
-    setAlignItems(align) {
-      this.layout = { alignItems: align };
-    }
-    setJustifyContent(justifyContent) {
-      this.layout = { justifyContent };
-    }
-    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.parentIsFlex) {
-        this.x = x;
-      } else {
-        this.x = x;
-        this.layout = { x };
-      }
-    }
-    setY(y) {
-      y = y + this.getHeight() * this._anchorPoints.y;
-      if (!this.parentIsFlex) {
-        this.y = y;
-      } else {
-        this.y = y;
-        this.layout = { y };
-      }
-    }
-    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) {
-      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.layout = { gap };
-    }
-    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) {
-      this.layout = { position: positionType };
-    }
-    setWidth(width) {
-      this.displayWidth.set(width);
-      if (!this.parentIsFlex) {
-        this.width = width;
-      } else {
-        this.layout = { width };
-      }
-    }
-    setHeight(height) {
-      this.displayHeight.set(height);
-      if (!this.parentIsFlex) {
-        this.height = height;
-      } else {
-        this.layout = { height };
-      }
-    }
-    getWidth() {
-      return this.displayWidth();
-    }
-    getHeight() {
-      return this.displayHeight();
-    }
-    // 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 };
-    }
-    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
-registerComponent("Canvas", class Canvas extends DisplayObject(Container3) {
-});
-var Canvas2 = async (props = {}) => {
-  let { cursorStyles, width, height, class: className } = useProps(props);
-  if (!props.width) width = signal5(800);
-  if (!props.height) height = signal5(600);
-  const canvasSize = signal5({
-    width: 0,
-    height: 0
-  });
-  props.isRoot = true;
-  const options = {
-    ...props,
-    context: {
-      canvasSize,
-      app: signal5(null)
-    },
-    width: width?.(),
-    height: height?.()
-  };
-  if (!props.tick) {
-    options.context.tick = options.tick = signal5({
-      timestamp: 0,
-      deltaTime: 0,
-      frame: 0,
-      deltaRatio: 1
-    });
-  }
-  const canvasElement = createComponent("Canvas", options);
-  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();
-    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) {
-      effect3(() => {
-        renderer.events.cursorStyles = cursorStyles();
-      });
-    }
-    if (className) {
-      effect3(() => {
-        canvasEl.classList.add(className());
-      });
-    }
-    const existingCanvas = rootElement.querySelector("canvas");
-    if (existingCanvas) {
-      rootElement.replaceChild(canvasEl, existingCanvas);
-    } else {
-      rootElement.appendChild(canvasEl);
-    }
-    options.context.app.set(app);
-  };
-  return canvasElement;
-};
-
-// src/components/Container.ts
-import { Container as PixiContainer } from "pixi.js";
-var CanvasContainer = class extends DisplayObject(PixiContainer) {
-  constructor() {
-    super(...arguments);
-    this.isCustomAnchor = true;
-  }
-  onUpdate(props) {
-    if (props.anchor) {
-      setObservablePoint(this._anchorPoints, props.anchor);
-      props.pivot = [
-        this.getWidth() * this._anchorPoints.x,
-        this.getHeight() * this._anchorPoints.y
-      ];
-    }
-    super.onUpdate(props);
-    if (props.sortableChildren != void 0) {
-      this.sortableChildren = props.sortableChildren;
-    }
-  }
-  async onMount(args) {
-    await super.onMount(args);
-    const { componentInstance, props } = args;
-    const { pixiChildren } = props;
-    if (pixiChildren) {
-      pixiChildren.forEach((child) => {
-        componentInstance.addChild(child);
-      });
-    }
-  }
-};
-registerComponent("Container", CanvasContainer);
-var Container4 = (props) => {
-  return createComponent("Container", props);
-};
-
-// src/components/Graphic.ts
-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) {
-  /**
-   * 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, 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.
-   * 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);
-function Graphics(props) {
-  return createComponent("Graphics", props);
-}
-function Rect(props) {
-  const { color, borderRadius, border } = useProps(props, {
-    borderRadius: null,
-    border: null
-  });
-  return Graphics({
-    draw: (g, width, height) => {
-      if (borderRadius()) {
-        g.roundRect(0, 0, width, height, borderRadius());
-      } else {
-        g.rect(0, 0, width, height);
-      }
-      if (border) {
-        g.stroke(border);
-      }
-      g.fill(color());
-    },
-    ...props
-  });
-}
-function drawShape(g, shape, props) {
-  const { color, border } = props;
-  if ("radius" in props) {
-    g.circle(0, 0, props.radius());
-  } else {
-    g.ellipse(0, 0, props.width() / 2, props.height() / 2);
-  }
-  if (border()) {
-    g.stroke(border());
-  }
-  g.fill(color());
-}
-function Circle(props) {
-  const { radius, color, border } = useProps(props, {
-    border: null
-  });
-  return Graphics({
-    draw: (g) => drawShape(g, "circle", { radius, color, border }),
-    ...props
-  });
-}
-function Ellipse(props) {
-  const { width, height, color, border } = useProps(props, {
-    border: null
-  });
-  return Graphics({
-    draw: (g, gWidth, gHeight) => drawShape(g, "ellipse", { width: signal6(gWidth), height: signal6(gHeight), color, border }),
-    ...props
-  });
-}
-function Triangle(props) {
-  const { width, height, color, border } = useProps(props, {
-    border: null,
-    color: "#000"
-  });
-  return Graphics({
-    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);
-      }
-    },
-    ...props
-  });
-}
-function Svg(props) {
-  return Graphics({
-    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;
-function mount(fn) {
-  mountTracker?.(fn);
-}
-function tick(fn) {
-  mount((el) => {
-    const { context } = el.props;
-    let subscription;
-    if (context.tick) {
-      subscription = context.tick.observable.subscribe(({ value }) => {
-        fn(value, el);
-      });
-    }
-    return () => {
-      subscription?.unsubscribe();
-    };
-  });
-}
-function h(componentFunction, props = {}, ...children) {
-  const allSubscriptions = /* @__PURE__ */ new Set();
-  const allMounts = /* @__PURE__ */ new Set();
-  currentSubscriptionsTracker = (subscription) => {
-    allSubscriptions.add(subscription);
-  };
-  mountTracker = (fn) => {
-    allMounts.add(fn);
-  };
-  if (children[0] instanceof Array) {
-    children = children[0];
-  }
-  let component = componentFunction({ ...props, children });
-  if (!component) {
-    component = {};
-  }
-  component.effectSubscriptions = Array.from(allSubscriptions);
-  component.effectMounts = [
-    ...Array.from(allMounts),
-    ...component.effectMounts ?? []
-  ];
-  if (component instanceof Promise) {
-    component.then((component2) => {
-      if (component2.props.isRoot) {
-        allMounts.forEach((fn) => fn(component2));
-      }
-    });
-  }
-  currentSubscriptionsTracker = null;
-  mountTracker = null;
-  return component;
-}
-
-// src/components/Scene.ts
-function Scene(props) {
-  return h(Container4);
-}
-
-// src/components/ParticleEmitter.ts
-import * as particles from "@barvynkoa/particle-emitter";
-var CanvasParticlesEmitter = class extends CanvasContainer {
-  constructor() {
-    super(...arguments);
-    this.elapsed = Date.now();
-  }
-  async onMount(params) {
-    await super.onMount(params);
-    const { props } = params;
-    const tick2 = props.context.tick;
-    this.emitter = new particles.Emitter(this, props.config);
-    this.subscriptionTick = tick2.observable.subscribe((value) => {
-      if (!this.emitter) return;
-      const now = Date.now();
-      this.emitter.update((now - this.elapsed) * 1e-3);
-      this.elapsed = now;
-    });
-  }
-  onUpdate(props) {
-  }
-  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);
-function ParticlesEmitter(props) {
-  return createComponent("ParticlesEmitter", props);
-}
-
-// src/components/Sprite.ts
-import { Howl as Howl2 } from "howler";
-import { computed, effect as effect6, isSignal as isSignal5 } from "@signe/reactive";
-import {
-  Assets as Assets3,
-  Container as Container5,
-  Sprite as PixiSprite,
-  Rectangle as Rectangle2,
-  Texture as Texture3
-} from "pixi.js";
-
-// src/engine/animation.ts
-import { effect as effect5, signal as signal7 } from "@signe/reactive";
-import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal10) {
-  return signal10.animatedState !== void 0;
-}
-function animatedSignal(initialValue, options = {}) {
-  const state = {
-    current: initialValue,
-    start: initialValue,
-    end: initialValue
-  };
-  let animation;
-  const publicSignal = signal7(initialValue);
-  const privateSignal = signal7(state);
-  effect5(() => {
-    const currentState = privateSignal();
-    publicSignal.set(currentState.current);
-  });
-  function animatedSignal2(newValue, animationConfig = {}) {
-    if (newValue === void 0) {
-      return privateSignal();
-    }
-    const prevState = privateSignal();
-    const newState = {
-      current: prevState.current,
-      start: prevState.current,
-      end: newValue
-    };
-    privateSignal.set(newState);
-    if (animation) {
-      animation.stop();
-    }
-    animation = animatePopmotion({
-      // TODO
-      duration: 20,
-      ...options,
-      ...animationConfig,
-      from: prevState.current,
-      to: newValue,
-      onUpdate: (value) => {
-        privateSignal.update((s) => ({ ...s, current: value }));
-        if (options.onUpdate) {
-          options.onUpdate(value);
-        }
-      }
-    });
-  }
-  const fn = function() {
-    return privateSignal().current;
-  };
-  for (const key in publicSignal) {
-    fn[key] = publicSignal[key];
-  }
-  fn.animatedState = privateSignal;
-  fn.update = (updater) => {
-    animatedSignal2(updater(privateSignal().current));
-  };
-  fn.set = async (newValue, animationConfig = {}) => {
-    return new Promise((resolve) => {
-      animatedSignal2(newValue, {
-        ...animationConfig,
-        onComplete: resolve
-      });
-    });
-  };
-  return fn;
-}
-async function animatedSequence(sequence) {
-  for (const item of sequence) {
-    if (Array.isArray(item)) {
-      await Promise.all(item.map((fn) => fn()));
-    } else {
-      await item();
-    }
-  }
-}
-
-// src/components/Sprite.ts
-var log2 = console.log;
-var CanvasSprite = class extends DisplayObject(PixiSprite) {
-  constructor() {
-    super(...arguments);
-    this.currentAnimation = null;
-    this.time = 0;
-    this.frameIndex = 0;
-    this.animations = /* @__PURE__ */ new Map();
-    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;
-    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 = [];
-    const offsetX = offset && offset.x || 0;
-    const offsetY = offset && offset.y || 0;
-    for (let i = 0; i < framesHeight; i++) {
-      frames[i] = [];
-      for (let j = 0; j < framesWidth; j++) {
-        const rectX = j * spriteWidth + offsetX;
-        const rectY = i * spriteHeight + offsetY;
-        if (rectY > height) {
-          throw log2(
-            `Warning, there is a problem with the height of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the height of the image.`
-          );
-        }
-        if (rectX > width) {
-          throw log2(
-            `Warning, there is a problem with the width of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the width of the image.`
-          );
-        }
-        frames[i].push(
-          new Texture3({
-            source: texture.source,
-            frame: new Rectangle2(rectX, rectY, spriteWidth, spriteHeight)
-          })
-        );
-      }
-    }
-    return frames;
-  }
-  async createAnimations() {
-    const { textures } = this.spritesheet;
-    if (!textures) {
-      return;
-    }
-    for (let animationName in textures) {
-      const props = [
-        "width",
-        "height",
-        "framesHeight",
-        "framesWidth",
-        "rectWidth",
-        "rectHeight",
-        "offset",
-        "image",
-        "sound"
-      ];
-      const parentObj = props.reduce(
-        (prev, val) => ({ ...prev, [val]: this.spritesheet[val] }),
-        {}
-      );
-      const optionsTextures = {
-        ...parentObj,
-        ...textures[animationName]
-      };
-      const {
-        rectWidth,
-        width = 0,
-        framesWidth = 1,
-        rectHeight,
-        height = 0,
-        framesHeight = 1
-      } = optionsTextures;
-      optionsTextures.spriteWidth = rectWidth ? rectWidth : width / framesWidth;
-      optionsTextures.spriteHeight = rectHeight ? rectHeight : height / framesHeight;
-      this.animations.set(animationName, {
-        frames: await this.createTextures(
-          optionsTextures
-        ),
-        name: animationName,
-        animations: textures[animationName].animations,
-        params: [],
-        data: optionsTextures,
-        sprites: []
-      });
-    }
-  }
-  async onMount(params) {
-    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;
-    }
-    this.subscriptionTick = tick2.observable.subscribe((value) => {
-      this.update(value);
-    });
-    if (props.sheet?.definition) {
-      this.spritesheet = props.sheet.definition;
-      await this.createAnimations();
-    }
-    if (sheet.params) {
-      for (let key in propObservables?.sheet["params"]) {
-        const value = propObservables?.sheet["params"][key];
-        if (isSignal5(value)) {
-          this.subscriptionSheet.push(
-            value.observable.subscribe((value2) => {
-              if (this.animations.size == 0) return;
-              this.play(this.sheetCurrentAnimation, [{ [key]: value2 }]);
-            })
-          );
-        } else {
-          this.play(this.sheetCurrentAnimation, [{ [key]: value }]);
-        }
-      }
-    }
-    const isMoving = computed(() => {
-      const { x, y } = propObservables ?? {};
-      if (!x || !y) return false;
-      const xSignal = x;
-      const ySignal = y;
-      const isMovingX = isAnimatedSignal(xSignal) && xSignal.animatedState().current !== xSignal.animatedState().end;
-      const isMovingY = isAnimatedSignal(ySignal) && ySignal.animatedState().current !== ySignal.animatedState().end;
-      return isMovingX || isMovingY;
-    });
-    effect6(() => {
-      const _isMoving = isMoving();
-      if (!this.isMounted) return;
-      if (_isMoving) {
-        this.sheetCurrentAnimation = "walk" /* Walk */;
-      } else {
-        this.sheetCurrentAnimation = "stand" /* Stand */;
-      }
-      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
-    });
-    super.onMount(params);
-  }
-  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 Assets3.load(image, (progress) => {
-        if (onProgress) onProgress(progress);
-        if (progress == 1) {
-          const onComplete = this.fullProps.loader?.onComplete;
-          if (onComplete) {
-            setTimeout(() => {
-              onComplete(texture);
-            });
-          }
-        }
-      });
-      return texture;
-    };
-    const sheet = props.sheet;
-    if (sheet?.params) this.sheetParams = sheet?.params;
-    if (sheet?.playing && this.isMounted) {
-      this.sheetCurrentAnimation = sheet?.playing;
-      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
-    }
-    if (props.hitbox) this.hitbox = props.hitbox;
-    if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
-    else if (props.image && this.fullProps.rectangle === void 0) {
-      const texture = await setTexture(this.fullProps.image);
-      if (texture) {
-        this.texture = texture;
-      }
-    } else if (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);
-      if (texture) {
-        this.texture = new Texture3({
-          source: texture.source,
-          frame: new Rectangle2(x, y, width, height)
-        });
-      }
-    }
-  }
-  async onDestroy(parent, afterDestroy) {
-    await super.onDestroy(parent);
-    this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
-    this.subscriptionTick.unsubscribe();
-    if (this.currentAnimationContainer && this.parent instanceof Container5) {
-      this.parent.removeChild(this.currentAnimationContainer);
-    }
-  }
-  has(name) {
-    return this.animations.has(name);
-  }
-  get(name) {
-    return this.animations.get(name);
-  }
-  isPlaying(name) {
-    if (!name) return !!this.currentAnimation;
-    if (this.currentAnimation == null) return false;
-    return this.currentAnimation.name == name;
-  }
-  stop() {
-    this.currentAnimation = null;
-    this.destroy();
-  }
-  play(name, params = []) {
-    const animParams = this.currentAnimation?.params;
-    if (this.isPlaying(name) && arrayEquals(params, animParams || [])) return;
-    const animation = this.get(name);
-    if (!animation) {
-      throw new Error(
-        `Impossible to play the ${name} animation because it doesn't exist on the "${this.id}" spritesheet`
-      );
-    }
-    const cloneParams = structuredClone(params);
-    this.removeChildren();
-    animation.sprites = [];
-    this.currentAnimation = animation;
-    this.currentAnimation.params = cloneParams;
-    this.time = 0;
-    this.frameIndex = 0;
-    let animations = animation.animations;
-    animations = isFunction(animations) ? animations(...cloneParams) : animations;
-    this.currentAnimationContainer = new Container5();
-    for (let container of animations) {
-      const sprite = new PixiSprite();
-      for (let frame of container) {
-        this.currentAnimation.sprites.push(frame);
-      }
-      this.currentAnimationContainer.addChild(sprite);
-    }
-    const sound = this.currentAnimation.data.sound;
-    if (sound) {
-      new Howl2({
-        src: sound,
-        autoplay: true,
-        loop: false,
-        volume: 1
-      });
-    }
-    this.update({
-      deltaRatio: 1
-    });
-  }
-  update({ deltaRatio }) {
-    if (!this.isPlaying() || !this.currentAnimation || !this.currentAnimationContainer)
-      return;
-    const self = this;
-    const { frames, sprites, data } = this.currentAnimation;
-    let frame = sprites[this.frameIndex];
-    const nextFrame = sprites[this.frameIndex + 1];
-    for (let _sprite of this.currentAnimationContainer.children) {
-      let applyTransformValue = function(prop, alias) {
-        const optionProp = alias || prop;
-        const val = getVal(optionProp);
-        if (val !== void 0) {
-          self[prop] = val;
-        }
-      };
-      const sprite = _sprite;
-      if (!frame || frame.frameY == void 0 || frame.frameX == void 0) {
-        continue;
-      }
-      this.texture = frames[frame.frameY][frame.frameX];
-      const getVal = (prop) => {
-        return frame[prop] ?? data[prop] ?? this.spritesheet[prop];
-      };
-      const applyTransform = (prop) => {
-        const val = getVal(prop);
-        if (val) {
-          this[prop].set(...val);
-        }
-      };
-      if (this.applyTransform) {
-        frame = {
-          ...frame,
-          ...this.applyTransform(frame, data, this.spritesheet)
-        };
-      }
-      const realSize = getVal("spriteRealSize");
-      const heightOfSprite = typeof realSize == "number" ? realSize : realSize?.height;
-      const widthOfSprite = typeof realSize == "number" ? realSize : realSize?.width;
-      const applyAnchorBySize = () => {
-        if (heightOfSprite && this.hitbox) {
-          const { spriteWidth, spriteHeight } = data;
-          const w = (spriteWidth - this.hitbox.w) / 2 / spriteWidth;
-          const gap = (spriteHeight - heightOfSprite) / 2;
-          const h2 = (spriteHeight - this.hitbox.h - gap) / spriteHeight;
-          this.anchor.set(w, h2);
-        }
-      };
-      if (frame.sound) {
-      }
-      applyAnchorBySize();
-      applyTransform("anchor");
-      applyTransform("scale");
-      applyTransform("skew");
-      applyTransform("pivot");
-      applyTransformValue("alpha", "opacity");
-      applyTransformValue("x");
-      applyTransformValue("y");
-      applyTransformValue("angle");
-      applyTransformValue("rotation");
-      applyTransformValue("visible");
-    }
-    if (!nextFrame) {
-      this.time = 0;
-      this.frameIndex = 0;
-      if (this.onFinish && sprites.length > 1) this.onFinish();
-      return;
-    }
-    this.time += deltaRatio ?? 1;
-    if (this.time >= nextFrame.time) {
-      this.frameIndex++;
-    }
-  }
-};
-registerComponent("Sprite", CanvasSprite);
-var Sprite2 = (props) => {
-  return createComponent("Sprite", props);
-};
-
-// src/components/Video.ts
-import { effect as effect7, signal as signal8 } from "@signe/reactive";
-function Video(props) {
-  const eventsMap = {
-    audioprocess: null,
-    canplay: null,
-    canplaythrough: null,
-    complete: null,
-    durationchange: null,
-    emptied: null,
-    ended: null,
-    loadeddata: null,
-    loadedmetadata: null,
-    pause: null,
-    play: null,
-    playing: null,
-    progress: null,
-    ratechange: null,
-    seeked: null,
-    seeking: null,
-    stalled: null,
-    suspend: null,
-    timeupdate: null,
-    volumechange: null,
-    waiting: null
-  };
-  const video = signal8(null);
-  const defineProps = useDefineProps(props);
-  const { play, loop: loop2, muted } = defineProps({
-    play: {
-      type: Boolean,
-      default: true
-    },
-    loop: {
-      type: Boolean,
-      default: false
-    },
-    muted: {
-      type: Boolean,
-      default: false
-    }
-  });
-  effect7(() => {
-    const _video = video();
-    const state = play();
-    if (_video && state !== void 0) {
-      if (state) {
-        _video.play();
-      } else {
-        _video.pause();
-      }
-    }
-    if (_video && loop2()) {
-      _video.loop = loop2();
-    }
-    if (_video && muted()) {
-      _video.muted = muted();
-    }
-  });
-  mount(() => {
-    return () => {
-      for (let event in eventsMap) {
-        if (eventsMap[event]) {
-          video().removeEventListener(event, eventsMap[event]);
-        }
-      }
-    };
-  });
-  return h(Sprite2, {
-    ...props,
-    image: props.src,
-    loader: {
-      onComplete: (texture) => {
-        const source = texture.source.resource;
-        video.set(source);
-        if (props?.loader?.onComplete) {
-          props.loader.onComplete(texture);
-        }
-        for (let event in eventsMap) {
-          if (props[event]) {
-            const cb = (ev) => {
-              props[event](ev);
-            };
-            eventsMap[event] = cb;
-            source.addEventListener(event, cb);
-          }
-        }
-      }
-    }
-  });
-}
-
-// src/components/Text.ts
-import { Text as PixiText } from "pixi.js";
-
-// src/engine/trigger.ts
-import { effect as effect8, signal as signal9 } from "@signe/reactive";
-function isTrigger(arg) {
-  return arg?.start && arg?.listen;
-}
-function trigger(globalConfig) {
-  const _signal = signal9({
-    config: globalConfig,
-    value: 0,
-    resolve: (value) => void 0
-  });
-  return {
-    start: (config) => {
-      return new Promise((resolve) => {
-        _signal.set({
-          config: {
-            ...globalConfig,
-            ...config
-          },
-          resolve,
-          value: Math.random()
-        });
-      });
-    },
-    listen: () => {
-      return {
-        config: globalConfig,
-        seed: _signal()
-      };
-    }
-  };
-}
-function on(triggerSignal, callback) {
-  if (!isTrigger(triggerSignal)) {
-    throw new Error("In 'on(arg)' must have a trigger signal type");
-  }
-  effect8(() => {
-    const result = triggerSignal.listen();
-    if (result?.seed.value) {
-      const ret = callback(result?.seed.config);
-      if (ret && typeof ret.then === "function") {
-        ret.then(result?.seed.resolve);
-      }
-    }
-  });
-}
-
-// src/components/Text.ts
-var CanvasText = class extends DisplayObject(PixiText) {
-  constructor() {
-    super(...arguments);
-    this.fullText = "";
-    this.currentIndex = 0;
-    this.typewriterSpeed = 1;
-    // Default speed
-    this._wordWrapWidth = 0;
-    this.typewriterOptions = {};
-  }
-  /**
-   * Called when the component is mounted to the scene graph.
-   * Initializes the typewriter effect if configured.
-   * @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) {
-    const { props } = element;
-    await super.onMount(element, index);
-    const tick2 = props.context.tick;
-    if (props.text && props.typewriter) {
-      this.fullText = props.text;
-      this.text = "";
-      this.currentIndex = 0;
-      if (props.typewriter) {
-        this.typewriterOptions = props.typewriter;
-        if (this.typewriterOptions.skip && isTrigger(this.typewriterOptions.skip)) {
-          on(this.typewriterOptions.skip, () => {
-            this.skipTypewriter();
-          });
-        }
-      }
-    }
-    this.subscriptionTick = tick2.observable.subscribe(() => {
-      if (props.typewriter) {
-        this.typewriterEffect();
-      }
-    });
-  }
-  onUpdate(props) {
-    super.onUpdate(props);
-    if (props.typewriter) {
-      if (props.typewriter) {
-        this.typewriterOptions = props.typewriter;
-      }
-    }
-    if (props.text !== void 0) {
-      this.text = "" + props.text;
-    }
-    if (props.text !== void 0 && props.text !== this.fullText && this.fullProps.typewriter) {
-      this.text = "";
-      this.currentIndex = 0;
-      this.fullText = props.text;
-    }
-    if (props.style) {
-      for (const key in props.style) {
-        this.style[key] = props.style[key];
-      }
-      if (props.style.wordWrapWidth) {
-        this._wordWrapWidth = props.style.wordWrapWidth;
-      }
-    }
-    if (props.color) {
-      this.style.fill = props.color;
-    }
-    if (props.size) {
-      this.style.fontSize = props.size;
-    }
-    if (props.fontFamily) {
-      this.style.fontFamily = props.fontFamily;
-    }
-    if (this._wordWrapWidth) {
-      this.setWidth(this._wordWrapWidth);
-    } else {
-      this.setWidth(this.width);
-    }
-    this.setHeight(this.height);
-  }
-  get onCompleteCallback() {
-    return this.typewriterOptions.onComplete;
-  }
-  typewriterEffect() {
-    if (this.currentIndex < this.fullText.length) {
-      const nextIndex = Math.min(
-        this.currentIndex + (this.typewriterOptions.speed ?? 1),
-        this.fullText.length
-      );
-      this.text = this.fullText.slice(0, nextIndex);
-      this.currentIndex = nextIndex;
-      if (this.currentIndex === this.fullText.length && this.onCompleteCallback) {
-        this.onCompleteCallback();
-      }
-    }
-  }
-  // Add a method to skip the typewriter effect
-  skipTypewriter() {
-    if (this.skipSignal) {
-      this.skipSignal();
-    }
-    this.text = this.fullText;
-    this.currentIndex = this.fullText.length;
-  }
-  /**
-   * 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 () => {
-      if (this.subscriptionTick) {
-        this.subscriptionTick.unsubscribe();
-      }
-      if (afterDestroy) {
-        afterDestroy();
-      }
-    };
-    await super.onDestroy(parent, _afterDestroy);
-  }
-};
-registerComponent("Text", CanvasText);
-function Text(props) {
-  return createComponent("Text", props);
-}
-
-// src/components/TilingSprite.ts
-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 = Texture4.from(props.image);
-    }
-    if (props.tileScale) {
-      this.tileScale.set(props.tileScale.x, props.tileScale.y);
-    }
-    if (props.tilePosition) {
-      this.tilePosition.set(props.tilePosition.x, props.tilePosition.y);
-    }
-    if (props.width !== void 0) {
-      this.width = props.width;
-    }
-    if (props.height !== void 0) {
-      this.height = props.height;
-    }
-  }
-};
-registerComponent("TilingSprite", CanvasTilingSprite);
-function TilingSprite(props) {
-  return createComponent("TilingSprite", props);
-}
-
-// src/components/Viewport.ts
-import { Viewport as PixiViewport } from "pixi-viewport";
-import { effect as effect9 } from "@signe/reactive";
-var EVENTS3 = [
-  "bounce-x-end",
-  "bounce-x-start",
-  "bounce-y-end",
-  "bounce-y-start",
-  "clicked",
-  "drag-end",
-  "drag-start",
-  "frame-end",
-  "mouse-edge-end",
-  "mouse-edge-start",
-  "moved",
-  "moved-end",
-  "pinch-end",
-  "pinch-start",
-  "snap-end",
-  "snap-start",
-  "snap-zoom-end",
-  "snap-zoom-start",
-  "wheel-scroll",
-  "zoomed",
-  "zoomed-end"
-];
-var CanvasViewport = class extends DisplayObject(PixiViewport) {
-  constructor() {
-    const defaultOptions = {
-      noTicker: true,
-      events: {
-        domElement: {
-          addEventListener: () => {
-          }
-        }
-      }
-    };
-    super(defaultOptions);
-    this.overrideProps = ["wheel"];
-  }
-  onInit(props) {
-    super.onInit(props);
-    for (let event of EVENTS3) {
-      if (props[event]) this.on(event, props[event]);
-    }
-  }
-  /**
-   * 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;
-    effect9(() => {
-      this.screenWidth = canvasSize().width;
-      this.screenHeight = canvasSize().height;
-    });
-    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(props);
-  }
-  onUpdate(props) {
-    super.onUpdate(props);
-    this.updateViewportSettings(props);
-  }
-  updateViewportSettings(props) {
-    if (props.screenWidth !== void 0) {
-      this.screenWidth = props.screenWidth;
-    }
-    if (props.screenHeight !== void 0) {
-      this.screenHeight = props.screenHeight;
-    }
-    if (props.worldWidth !== void 0) {
-      this.worldWidth = props.worldWidth;
-    }
-    if (props.worldHeight !== void 0) {
-      this.worldHeight = props.worldHeight;
-    }
-    if (props.drag) {
-      this.drag(props.drag);
-    }
-    if (props.clamp) {
-      this.clamp(props.clamp.value ?? props.clamp);
-    }
-    if (props.wheel) {
-      if (props.wheel === true) {
-        this.wheel();
-      } else {
-        this.wheel(props.wheel);
-      }
-    }
-    if (props.decelerate) {
-      if (props.decelerate === true) {
-        this.decelerate();
-      } else {
-        this.decelerate(props.decelerate);
-      }
-    }
-    if (props.pinch) {
-      if (props.pinch === true) {
-        this.pinch();
-      } else {
-        this.pinch(props.pinch);
-      }
-    }
-  }
-  /**
-   * 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);
-function Viewport(props) {
-  return createComponent("Viewport", props);
-}
-
-// src/components/NineSliceSprite.ts
-import { Assets as Assets4, NineSliceSprite as PixiNineSliceSprite } from "pixi.js";
-var CanvasNineSliceSprite = class extends DisplayObject(PixiNineSliceSprite) {
-  constructor() {
-    super({
-      width: 0,
-      height: 0
-    });
-  }
-  async onUpdate(props) {
-    for (const [key, value] of Object.entries(props)) {
-      if (value !== void 0) {
-        if (key === "image") {
-          this.texture = await Assets4.load(value);
-        } else if (key in this) {
-          this[key] = value;
-        }
-      }
-    }
-  }
-};
-registerComponent("NineSliceSprite", CanvasNineSliceSprite);
-function NineSliceSprite(props) {
-  return createComponent("NineSliceSprite", props);
-}
-
-// src/components/DOMContainer.ts
-import { DOMContainer as PixiDOMContainer } from "pixi.js";
-
-// src/components/DOMElement.ts
-import { isSignal as isSignal6 } from "@signe/reactive";
-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 CanvasDOMElement = class {
-  constructor() {
-    this.eventListeners = /* @__PURE__ */ new Map();
-    this.onBeforeDestroy = null;
-    this.valueSignal = null;
-    this.isFormElementType = false;
-  }
-  /**
-   * Checks if the element is a form element that supports the value attribute
-   * @param elementType - The element type string from props
-   * @returns true if the element is a form element with value support
-   */
-  isFormElement(elementType) {
-    const formElements = ["input", "textarea", "select"];
-    return formElements.includes(elementType.toLowerCase());
-  }
-  onInit(props) {
-    if (typeof props.element === "string") {
-      this.element = document.createElement(props.element);
-      this.isFormElementType = this.isFormElement(props.element);
-    } else {
-      this.element = props.element.value;
-      this.isFormElementType = this.isFormElement(this.element.tagName);
-    }
-    if (props.onBeforeDestroy || props["on-before-destroy"]) {
-      this.onBeforeDestroy = props.onBeforeDestroy || props["on-before-destroy"];
-    }
-    for (const event of EVENTS4) {
-      if (props.attrs?.[event]) {
-        const eventHandler = (e) => {
-          if (event === "submit" && this.element.tagName.toLowerCase() === "form") {
-            e.preventDefault();
-            const formData = new FormData(this.element);
-            const formObject = {};
-            formData.forEach((value, key) => {
-              if (formObject[key]) {
-                if (Array.isArray(formObject[key])) {
-                  formObject[key].push(value);
-                } else {
-                  formObject[key] = [formObject[key], value];
-                }
-              } else {
-                formObject[key] = value;
-              }
-            });
-            props.attrs[event]?.(e, formObject);
-          } else {
-            props.attrs[event]?.(e);
-          }
-        };
-        this.eventListeners.set(event, eventHandler);
-        this.element.addEventListener(event, eventHandler, false);
-      }
-    }
-    if (props.children) {
-      for (const child of props.children) {
-        if (isObservable(child)) {
-          child.subscribe(({ elements }) => {
-            for (const element of elements) {
-              this.element.appendChild(element.componentInstance.element);
-            }
-          });
-        } else {
-          this.element.appendChild(child.componentInstance.element);
-        }
-      }
-    }
-    this.onUpdate(props);
-  }
-  onMount(context) {
-    const props = context.propObservables;
-    const attrs = props.attrs;
-    if (this.isFormElementType && attrs?.value && isSignal6(attrs.value)) {
-      this.valueSignal = attrs.value;
-      this.element.value = this.valueSignal();
-      const inputHandler = (e) => {
-        const target = e.target;
-        this.valueSignal.set(target.value);
-      };
-      this.eventListeners.set("input", inputHandler);
-      this.element.addEventListener("input", inputHandler, false);
-    }
-  }
-  onUpdate(props) {
-    if (!this.element) return;
-    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 (key === "value" && this.isFormElementType) {
-        if (isSignal6(value)) {
-          const currentValue = this.element.value;
-          const signalValue = value();
-          if (currentValue !== signalValue) {
-            this.element.value = signalValue;
-          }
-        } else {
-          this.element.value = value;
-        }
-      } else if (!EVENTS4.includes(key)) {
-        this.element.setAttribute(key, value);
-      }
-    }
-    if (props.textContent) {
-      this.element.textContent = props.textContent;
-    }
-  }
-  async onDestroy(parent, afterDestroy) {
-    if (this.element) {
-      if (this.onBeforeDestroy) {
-        await this.onBeforeDestroy();
-      }
-      for (const [event, handler] of this.eventListeners) {
-        this.element.removeEventListener(event, handler, false);
-      }
-      this.eventListeners.clear();
-      this.element.remove();
-      if (afterDestroy) {
-        afterDestroy();
-      }
-    }
-  }
-};
-registerComponent("DOMElement", CanvasDOMElement);
-var DOMElement = (props) => {
-  return createComponent("DOMElement", props);
-};
-
-// src/components/DOMContainer.ts
-var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
-  constructor() {
-    super(...arguments);
-    this.disableLayout = true;
-  }
-  onInit(props) {
-    const div = h(DOMElement, { element: "div" }, props.children);
-    this.element = div.componentInstance.element;
-  }
-};
-registerComponent("DOMContainer", CanvasDOMContainer);
-var DOMContainer = (props) => {
-  return createComponent("DOMContainer", props);
-};
-
-// src/engine/bootstrap.ts
-import "@pixi/layout";
-import { Application as Application3 } from "pixi.js";
-var bootstrapCanvas = async (rootElement, canvas, options) => {
-  const app = new Application3();
-  await app.init({
-    resizeTo: rootElement,
-    autoStart: false,
-    ...options ?? {}
-  });
-  const canvasElement = await h(canvas);
-  if (canvasElement.tag != "Canvas") {
-    throw new Error("Canvas is required");
-  }
-  canvasElement.render(rootElement, app);
-  const { backgroundColor } = useProps(canvasElement.props, {
-    backgroundColor: "black"
-  });
-  app.renderer.background.color = backgroundColor();
-  return {
-    canvasElement,
-    app
-  };
-};
-
-// src/utils/Ease.ts
-import {
-  linear,
-  easeIn,
-  easeInOut,
-  easeOut,
-  circIn,
-  circInOut,
-  circOut,
-  backIn,
-  backInOut,
-  backOut,
-  anticipate,
-  bounceIn,
-  bounceInOut,
-  bounceOut
-} from "popmotion";
-var Easing = {
-  linear,
-  easeIn,
-  easeInOut,
-  easeOut,
-  circIn,
-  circInOut,
-  circOut,
-  backIn,
-  backInOut,
-  backOut,
-  anticipate,
-  bounceIn,
-  bounceInOut,
-  bounceOut
-};
-
-// src/utils/RadialGradient.ts
-import { Texture as Texture6, ImageSource, DOMAdapter, Matrix } from "pixi.js";
-var RadialGradient = class {
-  /**
-   * Creates a new RadialGradient instance
-   * @param x0 - The x-coordinate of the starting circle
-   * @param y0 - The y-coordinate of the starting circle
-   * @param x1 - The x-coordinate of the ending circle
-   * @param y1 - The y-coordinate of the ending circle
-   * @param x2 - The x-coordinate for gradient transformation
-   * @param y2 - The y-coordinate for gradient transformation
-   * @param focalPoint - The focal point of the gradient (0-1), defaults to 0
-   */
-  constructor(x0, y0, x1, y1, x2, y2, focalPoint = 0) {
-    this.x0 = x0;
-    this.y0 = y0;
-    this.x1 = x1;
-    this.y1 = y1;
-    this.x2 = x2;
-    this.y2 = y2;
-    this.focalPoint = focalPoint;
-    this.gradient = null;
-    this.texture = null;
-    this.size = 600;
-    this.size = x0;
-    const halfSize = this.size * 0.5;
-    this.canvas = DOMAdapter.get().createCanvas();
-    this.canvas.width = this.size;
-    this.canvas.height = this.size;
-    this.ctx = this.canvas.getContext("2d");
-    if (this.ctx) {
-      this.gradient = this.ctx.createRadialGradient(
-        halfSize * (1 - focalPoint),
-        halfSize,
-        0,
-        halfSize,
-        halfSize,
-        halfSize - 0.5
-      );
-    }
-  }
-  /**
-   * Adds a color stop to the gradient
-   * @param offset - The position of the color stop (0-1)
-   * @param color - The color value (any valid CSS color string)
-   */
-  addColorStop(offset, color) {
-    if (this.gradient) {
-      this.gradient.addColorStop(offset, color);
-    }
-  }
-  /**
-   * Renders the gradient and returns the texture with its transformation matrix
-   * @param options - Render options
-   * @param options.translate - Optional translation coordinates
-   * @returns Object containing the texture and transformation matrix
-   */
-  render({ translate } = {}) {
-    const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
-    const defaultSize = this.size;
-    if (this.ctx && this.gradient) {
-      this.ctx.fillStyle = this.gradient;
-      this.ctx.fillRect(0, 0, defaultSize, defaultSize);
-      this.texture = new Texture6({
-        source: new ImageSource({
-          resource: this.canvas,
-          addressModeU: "clamp-to-edge",
-          addressModeV: "clamp-to-edge"
-        })
-      });
-      const m = new Matrix();
-      const dx = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
-      const dy = Math.sqrt((x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0));
-      const angle = Math.atan2(y1 - y0, x1 - x0);
-      const scaleX = dx / defaultSize;
-      const scaleY = dy / defaultSize;
-      m.rotate(-angle);
-      m.scale(scaleX, scaleY);
-      if (translate) {
-        m.translate(translate.x, translate.y);
-      }
-      this.transform = m;
-    }
-    return {
-      texture: this.texture,
-      matrix: this.transform
-    };
-  }
-};
-
-// src/index.ts
-import { isObservable as isObservable2 } from "rxjs";
-import * as Howl3 from "howler";
-export {
-  Canvas2 as Canvas,
-  Circle,
-  Container4 as Container,
-  DOMContainer,
-  DOMElement,
-  DisplayObject,
-  EVENTS2 as EVENTS,
-  Easing,
-  Ellipse,
-  Graphics,
-  Howl3 as Howl,
-  Howler,
-  Mesh,
-  NineSliceSprite,
-  ParticlesEmitter,
-  RadialGradient,
-  Rect,
-  Scene,
-  Sprite2 as Sprite,
-  Svg,
-  Text,
-  TilingSprite,
-  Triangle,
-  utils_exports as Utils,
-  Video,
-  Viewport,
-  animatedSequence,
-  animatedSignal,
-  bootstrapCanvas,
-  cond,
-  createComponent,
-  currentSubscriptionsTracker,
-  h,
-  isAnimatedSignal,
-  isElement,
-  isObservable2 as isObservable,
-  isPrimitive,
-  isTrigger,
-  loop,
-  mount,
-  mountTracker,
-  on,
-  registerComponent,
-  tick,
-  trigger,
-  useDefineProps,
-  useProps
-};
+var dt=Object.defineProperty;var Fe=r=>{throw TypeError(r)};var ht=(r,n)=>{for(var e in n)dt(r,e,{get:n[e],enumerable:!0})};var Re=(r,n,e)=>n.has(r)||Fe("Cannot "+e);var q=(r,n,e)=>(Re(r,n,"read from private field"),e?e.call(r):n.get(r)),He=(r,n,e)=>n.has(r)?Fe("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(r):n.set(r,e),Le=(r,n,e,i)=>(Re(r,n,"write to private field"),i?i.call(r,e):n.set(r,e),e);var G={},x=class{};function S(r,n){G[r]=n}function je(r,n){if(!G[n])return null;let e=new G[n];return e.onInit?.(r),e}var Q={};ht(Q,{arrayEquals:()=>H,calculateDistance:()=>J,error:()=>L,fps2ms:()=>D,get:()=>gt,isBrowser:()=>I,isFunction:()=>X,isObject:()=>Y,isObservable:()=>$,isPromise:()=>R,log:()=>bt,preciseNow:()=>k,set:()=>B,setObservablePoint:()=>C});import{Observable as pt}from"rxjs";function I(){return typeof window<"u"}function k(){return typeof performance<"u"?performance.now():Date.now()}function D(r){return 1e3/r}function R(r){return r&&r instanceof Promise}function H(r,n){if(r.length!==n.length)return!1;for(let e=0;e<r.length;e++){let i=r[e],s=n[e];if(typeof i=="object"&&i!==null){if(typeof s!="object"||s===null)return!1;if(Array.isArray(i)){if(!Array.isArray(s)||!H(i,s))return!1}else if(!We(i,s))return!1}else if(i!==s)return!1}return!0}function We(r,n){let e=Object.keys(r),i=Object.keys(n);if(e.length!==i.length)return!1;for(let s of e)if(!n.hasOwnProperty(s)||!yt(r[s],n[s]))return!1;return!0}function yt(r,n){return r===n?!0:typeof r!=typeof n?!1:typeof r=="object"&&r!==null?Array.isArray(r)?Array.isArray(n)&&H(r,n):We(r,n):!1}function X(r){return{}.toString.call(r)==="[object Function]"}function Y(r){return typeof r=="object"&&r!=null&&!Array.isArray(r)&&r.constructor===Object}function $(r){return r instanceof pt}function B(r,n,e,i=!1){if(Object(r)!==r)return r;typeof n=="string"&&(n=n.split("."));let s=n.length;if(!s)return r;let t=r;for(let a=0;a<s-1;a++){let l=n[a],o=n[a+1],c=!isNaN(Number(o))&&isFinite(Number(o));(!t[l]||typeof t[l]!="object")&&(t[l]=c&&!i?[]:{}),t=t[l]}return t[n[s-1]]=e,r}function gt(r,n){let e=n.split("."),i=r;for(let s of e){if(i[s]===void 0)return;i=i[s]}return i}function bt(r){console.log(r)}function L(r){console.error(r)}function C(r,n){typeof n=="number"?r.set(n):Array.isArray(n)?r.set(n[0],n[1]):r.set(n.x,n.y)}function J(r,n,e,i){let s=r-e,t=n-i;return Math.sqrt(s*s+t*t)}var Ue={3:"break",8:"backspace",9:"tab",12:"clear",13:"enter",16:"shift",17:"ctrl",18:"alt",19:"pause/break",20:"caps lock",27:"escape",28:"conversion",29:"non-conversion",32:"space",33:"page up",34:"page down",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",41:"select",42:"print",43:"execute",44:"Print Screen",45:"insert",46:"delete",48:"n0",49:"n1",50:"n2",51:"n3",52:"n4",53:"n5",54:"n6",55:"n7",56:"n8",57:"n9",58:":",59:"semicolon (firefox), equals",60:"<",61:"equals (firefox)",63:"\xDF",64:"@",65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j",75:"k",76:"l",77:"m",78:"n",79:"o",80:"p",81:"q",82:"r",83:"s",84:"t",85:"u",86:"v",87:"w",88:"x",89:"y",90:"z",91:"Windows Key / Left \u2318 / Chromebook Search key",92:"right window key",93:"Windows Menu / Right \u2318",96:"numpad 0",97:"numpad 1",98:"numpad 2",99:"numpad 3",100:"numpad 4",101:"numpad 5",102:"numpad 6",103:"numpad 7",104:"numpad 8",105:"numpad 9",106:"multiply",107:"add",108:"numpad period (firefox)",109:"subtract",110:"decimal point",111:"divide",112:"f1",113:"f2",114:"f3",115:"f4",116:"f5",117:"f6",118:"f7",119:"f8",120:"f9",121:"f10",122:"f11",123:"f12",124:"f13",125:"f14",126:"f15",127:"f16",128:"f17",129:"f18",130:"f19",131:"f20",132:"f21",133:"f22",134:"f23",135:"f24",144:"num lock",145:"scroll lock",160:"^",161:"!",163:"#",164:"$",165:"\xF9",166:"page backward",167:"page forward",169:"closing paren (AZERTY)",170:"*",171:"~ + * key",173:"minus (firefox), mute/unmute",174:"decrease volume level",175:"increase volume level",176:"next",177:"previous",178:"stop",179:"play/pause",180:"e-mail",181:"mute/unmute (firefox)",182:"decrease volume level (firefox)",183:"increase volume level (firefox)",186:"semi-colon / \xF1",187:"equal sign",188:"comma",189:"dash",190:"period",191:"forward slash / \xE7",192:"grave accent / \xF1 / \xE6",193:"?, / or \xB0",194:"numpad period (chrome)",219:"open bracket",220:"back slash",221:"close bracket / \xE5",222:"single quote / \xF8",223:"`",224:"left or right \u2318 key (firefox)",225:"altgr",226:"< /git >",230:"GNOME Compose Key",231:"\xE7",233:"XF86Forward",234:"XF86Back",240:"alphanumeric",242:"hiragana/katakana",243:"half-width/full-width",244:"kanji",255:"toggle touchpad"},vt=r=>{let n={};for(let e in r){let i=r[e];n[i]=e}return n},Ke=vt(Ue),Z=class extends x{constructor(){super(...arguments);this.keyState={};this.boundKeys={};this.stop=!1;this.lastKeyPressed=null;this._controlsOptions={};this.serverFps=60;this.directionState={up:!1,down:!1,left:!1,right:!1}}onInit(e){let i=e.props.controls.value??e.props.controls;i&&(this.setupListeners(),this.setInputs(i),this.interval=setInterval(()=>{this.preStep()},D(this.serverFps??60)))}onMount(e){}onUpdate(e){this.setInputs(e)}onDestroy(){clearInterval(this.interval),document.removeEventListener("keydown",e=>{this.onKeyChange(e,!0)}),document.removeEventListener("keyup",e=>{this.onKeyChange(e,!1)})}preStep(){if(this.stop)return;let e=this.getDirection();if(e!=="none"){let i=this.boundKeys[e];if(i){let{keyDown:s}=i.options;s&&this.applyInput(e)}}else{let i=Object.keys(this.boundKeys);for(let s of i)this.applyInput(s)}}applyInput(e){let i=this.keyState[e];if(!i)return;let{isDown:s,count:t}=i;if(s){let{repeat:a,keyDown:l}=this.boundKeys[e].options;if(a||t==0){let o=this.boundKeys[e].parameters;typeof o=="function"&&(o=o()),l&&l(this.boundKeys[e]),this.keyState[e].count++}}}setupListeners(){document.addEventListener("keydown",e=>{this.onKeyChange(e,!0)}),document.addEventListener("keyup",e=>{this.onKeyChange(e,!1)})}bindKey(e,i,s,t){Array.isArray(e)||(e=[e]);let a=Object.assign({repeat:!1},s);e.forEach(l=>{this.boundKeys[l]={actionName:i,options:a,parameters:t}})}applyKeyDown(e){let i=Ke[e],s=new Event("keydown");s.keyCode=i,this.onKeyChange(s,!0)}applyKeyUp(e){let i=Ke[e],s=new Event("keyup");s.keyCode=i,this.onKeyChange(s,!1)}applyKeyPress(e){return new Promise(i=>{this.applyKeyDown(e),setTimeout(()=>{this.applyKeyUp(e),i()},200)})}onKeyChange(e,i){e=e||window.event;let s=Ue[e.keyCode];if(s&&this.boundKeys[s]){if(this.keyState[s]==null&&(this.keyState[s]={count:0,isDown:!0}),this.keyState[s].isDown=i,!i){this.keyState[s].count=0;let{keyUp:t}=this.boundKeys[s].options;t&&t(this.boundKeys[s])}this.lastKeyPressed=i?e.keyCode:null}s&&this.updateDirectionState(s,i)}updateDirectionState(e,i){switch(e){case"up":this.directionState.up=i;break;case"down":this.directionState.down=i;break;case"left":this.directionState.left=i;break;case"right":this.directionState.right=i;break}}getDirection(){let{up:e,down:i,left:s,right:t}=this.directionState;return e&&s?"up_left":e&&t?"up_right":i&&s?"down_left":i&&t?"down_right":e?"up":i?"down":s?"left":t?"right":"none"}getControl(e){return this.boundKeys[e]}getControls(){return this.boundKeys}async applyControl(e,i){let s=this._controlsOptions[e];if(s){let t=Array.isArray(s.bind)?s.bind[0]:s.bind;i===void 0?await this.applyKeyPress(t):i?this.applyKeyDown(t):this.applyKeyUp(t)}}stopInputs(){this.stop=!0}listenInputs(){this.stop=!1,this.keyState={}}setInputs(e){if(!e)return;this.boundKeys={};let i={};for(let s in e){let t=e[s],{bind:a}=t,l=a;Array.isArray(l)||(l=[a]);for(let o of l)this.bindKey(o,s,t)}this._controlsOptions=e}get options(){return this._controlsOptions}};S("controls",Z);var ee=class extends x{constructor(){super(...arguments);this.fps=60;this.deltaTime=0;this.frame=0;this.timestamp=0;this.requestedDelay=0;this.lastTimestamp=0;this._stop=!1}onInit(e){this.tick=e.propObservables?.tick}onDestroy(){}onMount(e){}onUpdate(e){}nextTick(e){this.lastTimestamp=this.lastTimestamp||this.timestamp,this.deltaTime=k()-this.timestamp,this.timestamp=e,this.tick.set({timestamp:this.timestamp,deltaTime:this.deltaTime,frame:this.frame,deltaRatio:~~this.deltaTime/~~D(this.fps)}),this.lastTimestamp=this.timestamp,this.frame++}start(e={}){e.maxFps&&(this.maxFps=e.maxFps),e.fps&&(this.fps=e.fps),e.delay&&(this.requestedDelay=e.delay);let i=s=>{I()?window.requestAnimationFrame(s.bind(this)):setTimeout(()=>{this.requestedDelay=0,s(k())},D(this.fps)+this.requestedDelay)};if(this.maxFps){let s=D(this.maxFps),t=k(),a=k(),l=o=>{if(this._stop)return;i(l),t=k();let c=t-a;c>s&&(a=t-c%s,this.nextTick(o))};i(l)}else{let s=t=>{i(s),this.nextTick(t)};i(s)}return this}stop(){this._stop=!0}};S("tick",ee);import{isSignal as z,signal as se}from"@signe/reactive";import{isComputed as xt,isSignal as _,signal as Ne}from"@signe/reactive";import{Observable as ie,Subject as Be,defer as wt,from as _e,map as Pt,of as ze,share as St}from"rxjs";var te={},W=r=>r&&typeof r=="object"&&"tag"in r&&"props"in r&&"componentInstance"in r,ne=r=>typeof r=="string"||typeof r=="number"||typeof r=="boolean"||r===null||r===void 0;function y(r,n){te[r]=n}function j(r){if(Array.isArray(r)){r.forEach(n=>j(n));return}if(r){if(r.props?.children)for(let n of r.props.children)j(n);for(let n in r.directives)r.directives[n].onDestroy?.(r);r.componentInstance&&r.componentInstance.onDestroy?r.componentInstance.onDestroy(r.parent,()=>{r.propSubscriptions?.forEach(n=>n.unsubscribe()),r.effectSubscriptions?.forEach(n=>n.unsubscribe()),r.effectUnmounts?.forEach(n=>n?.())}):(r.propSubscriptions?.forEach(n=>n.unsubscribe()),r.effectSubscriptions?.forEach(n=>n.unsubscribe()),r.effectUnmounts?.forEach(n=>n?.()))}}function g(r,n){if(!te[r])throw new Error(`Component ${r} is not registered`);let e=new te[r],i={tag:r,props:{},componentInstance:e,propSubscriptions:[],propObservables:n,parent:null,directives:{},effectUnmounts:[],effectSubscriptions:[],effectMounts:[],destroy(){j(this)},allElements:new Be};if(n){let o=(c,f="")=>{let m=(u,d,h)=>{if(u==""){i.props[d]=h;return}B(i.props,u+"."+d,h)};Object.entries(c).forEach(([u,d])=>{if(_(d)){let h=d;if("dependencies"in h&&h.dependencies.size==0){m(f,u,h());return}i.propSubscriptions.push(h.observable.subscribe(p=>{m(f,u,p),i.directives[u]&&i.directives[u].onUpdate?.(p,i),u!="tick"&&e.onUpdate?.(f==""?{[u]:p}:B({},f+"."+u,p))}))}else Y(d)&&u!="context"&&!W(d)?o(d,(f?f+".":"")+u):m(f,u,d)})};o(n)}e.onInit?.(i.props);let s=new Be;if(n?.isRoot&&(i.allElements=s,i.props.context.rootElement=i,i.componentInstance.onMount?.(i),a(i)),n)for(let o in n){let c=je(i,o);c&&(i.directives[o]=c)}function t(o,c,f){c.props.context=o.props.context,c.parent=o,c.componentInstance.onMount?.(c,f);for(let m in c.directives)c.directives[m].onMount?.(c);c.effectMounts.forEach(m=>{c.effectUnmounts.push(m(c))})}async function a(o){if(o.props.attach&&(_(o.propObservables?.attach)?await new Promise(f=>{let m=null;o.propSubscriptions.push(o.propObservables.attach.observable.subscribe(async u=>{let d=u?.value??u;if(!d)throw new Error(`attach in ${o.tag} is undefined or null, add a component`);m&&j(m),m=d,await l(o,d),f(void 0)}))}):o.props.children.push(o.props.attach)),!!o.props.children)for(let c of o.props.children)c&&await l(o,c)}async function l(o,c){R(c)&&(c=await c),c instanceof ie?c.subscribe(({elements:f,prev:m})=>{let u=f.filter(d=>d!==null);if(m){u.forEach(d=>{let h=o.props.children.indexOf(m.props.key);t(o,d,h+1),a(d)});return}u.forEach(d=>{Array.isArray(d)?d.forEach(h=>{t(o,h),a(h)}):(t(o,d),a(d))}),s.next(void 0)}):(t(o,c),await a(c))}return i}function fn(r,n){return xt(r)&&r.dependencies.size==0?r=Ne(r()):_(r)||(r=Ne(r)),wt(()=>{let e=[],i=new Map,s=!0,t=a=>Array.isArray(a());return new ie(a=>t(r)?r.observable.subscribe(o=>{if(s){s=!1,e.forEach(f=>f.destroy()),e=[],i.clear();let c=r();c&&c.forEach((f,m)=>{let u=n(f,m);u&&(e.push(u),i.set(m,u))}),a.next({elements:[...e]});return}if(o.type==="init"||o.type==="reset"){e.forEach(f=>f.destroy()),e=[],i.clear();let c=r();c&&c.forEach((f,m)=>{let u=n(f,m);u&&(e.push(u),i.set(m,u))})}else if(o.type==="add"&&o.index!==void 0){let c=o.items.map((f,m)=>{let u=n(f,o.index+m);return u&&i.set(o.index+m,u),u}).filter(f=>f!==null);e.splice(o.index,0,...c)}else if(o.type==="remove"&&o.index!==void 0)e.splice(o.index,1).forEach(f=>{f.destroy(),i.delete(o.index)});else if(o.type==="update"&&o.index!==void 0&&o.items.length===1){let c=o.index,f=o.items[0];if(c>=e.length||e[c]===void 0||!i.has(c)){let m=n(f,c);m?(e.splice(c,0,m),i.set(c,m)):console.warn(`Element creation returned null for index ${c} during add-like update.`)}else{e[c].destroy();let u=n(f,c);u?(e[c]=u,i.set(c,u)):(e.splice(c,1),i.delete(c))}}a.next({elements:[...e]})}):r.observable.subscribe(o=>{let c=o.key;if(s){s=!1,e.forEach(m=>m.destroy()),e=[],i.clear();let f=r();f&&Object.entries(f).forEach(([m,u])=>{let d=n(u,m);d&&(e.push(d),i.set(m,d))}),a.next({elements:[...e]});return}if(o.type==="init"||o.type==="reset"){e.forEach(m=>m.destroy()),e=[],i.clear();let f=r();f&&Object.entries(f).forEach(([m,u])=>{let d=n(u,m);d&&(e.push(d),i.set(m,d))})}else if(o.type==="add"&&o.key&&o.value!==void 0){let f=n(o.value,c);f&&(e.push(f),i.set(c,f))}else if(o.type==="remove"&&o.key){let f=e.findIndex(m=>i.get(c)===m);if(f!==-1){let[m]=e.splice(f,1);m.destroy(),i.delete(c)}}else if(o.type==="update"&&o.key&&o.value!==void 0){let f=e.findIndex(m=>i.get(c)===m);if(f!==-1){e[f].destroy();let u=n(o.value,c);u&&(e[f]=u,i.set(c,u))}}a.next({elements:[...e]})}))})}function mn(r,n){let e=null;if(_(r)){let i=r;return new ie(s=>i.observable.subscribe(t=>{if(t){let a=n();R(a)?_e(a).subscribe(l=>{e=l,s.next({type:"init",elements:[l]})}):(e=a,s.next({type:"init",elements:[e]}))}else e?(j(e),s.next({elements:[]})):s.next({elements:[]})})).pipe(St())}else{if(r){let i=n();return R(i)?_e(i).pipe(Pt(s=>({type:"init",elements:[s]}))):ze({type:"init",elements:[i]})}return ze({elements:[]})}}var w=(r,n={})=>{if(z(r))return r();let e={};for(let i in r){let s=r[i];e[i]=ne(s)?se(s):s}for(let i in n)i in e||(e[i]=ne(n[i])?se(n[i]):n[i]);return e},oe=r=>n=>{let e=z(r)?r():r,i={};for(let s in n){let t=n[s],a=e[s],l;if(typeof t=="function")re(s,a,[t]),l=a;else if(Array.isArray(t))re(s,a,t),l=a;else if(t&&typeof t=="object"){if(t.required&&a===void 0)throw new Error(`Missing required prop: ${s}`);if(t.type){let o=Array.isArray(t.type)?t.type:[t.type];re(s,a,o)}if(t.validator&&!t.validator(a,e))throw new Error(`Invalid prop: custom validation failed for prop "${s}"`);a===void 0&&"default"in t?l=typeof t.default=="function"?t.default(e):t.default:l=a}i[s]=z(l)?l:se(l)}return{...w(e),...i}};function re(r,n,e){if(n==null)return;let i=z(n)?n():n;if(!e.some(t=>t===Number?typeof i=="number":t===String?typeof i=="string":t===Boolean?typeof i=="boolean":t===Function?typeof i=="function":t===Object?typeof i=="object":t===Array?Array.isArray(i):t===null?i===null:i instanceof t))throw new Error(`Invalid prop: type check failed for prop "${r}". Expected ${e.map(t=>t.name).join(" or ")}`)}var ae=class extends x{onInit(n){}onMount(n){this.onUpdate(n.props.viewportFollow,n)}onUpdate(n,e){let{viewport:i}=e.props.context;if(!i)throw L("ViewportFollow directive requires a Viewport component to be mounted in the same context");if(n)if(n===!0)i.follow(e.componentInstance);else{let s=w(n,{speed:void 0,acceleration:void 0,radius:void 0});i.follow(e.componentInstance,{speed:s.speed(),acceleration:s.acceleration(),radius:s.radius()})}else n===null&&i.plugins.remove("follow")}onDestroy(n){let{viewportFollow:e}=n.props,{viewport:i}=n.props.context;e&&i.plugins.remove("follow")}};S("viewportFollow",ae);import{effect as Et}from"@signe/reactive";import{Howl as Tt}from"howler";var Ve=["load","loaderror","playerror","play","end","pause","stop","mute","volume","rate","seek","fade","unlock"],le=class extends x{constructor(){super(...arguments);this.sounds=[];this.eventsFn=[];this.maxVolume=1;this.maxDistance=100}onInit(e){}onMount(e){let{props:i}=e,s=i.context.tick,t=i.sound.value??i.sound;if(!t.src)return;let{src:a,autoplay:l,loop:o,volume:c,spatial:f}=t,m=Array.isArray(a)?a:[a];for(let u of m){if(!u)continue;let d=new Tt({src:u,autoplay:l,loop:o,volume:c});for(let h of Ve){if(!t[h])continue;let p=t[h];this.eventsFn.push(p),d.on(h,p)}this.sounds.push(d)}if(f&&this.sounds.length>0){let{soundListenerPosition:u}=i.context;if(!u)throw new L("SoundListenerPosition directive is required for spatial sound in component parent");let{x:d,y:h}=u;this.tickSubscription=Et(()=>{s();let{x:p,y:P}=e.componentInstance,E=J(p,P,d(),h()),v=Math.max(this.maxVolume-E/this.maxDistance,0);this.sounds.forEach(T=>T.volume(v))}).subscription}this.onUpdate(t)}onUpdate(e){let i=e.value??e,{volume:s,loop:t,mute:a,seek:l,playing:o,rate:c,spatial:f}=i;this.sounds.forEach(m=>{s!==void 0&&m.volume(s),t!==void 0&&m.loop(t),a!==void 0&&m.mute(a),l!==void 0&&m.seek(l),o!==void 0&&(o?m.play():m.pause()),c!==void 0&&m.rate(c)}),f&&(this.maxVolume=f.maxVolume??this.maxVolume,this.maxDistance=f.maxDistance??this.maxDistance)}onDestroy(){this.sounds.forEach(e=>{e.stop();for(let i of Ve){let s=this.eventsFn.find(t=>t===this.eventsFn[i]);s&&e.off(i,s)}}),this.sounds=[],this.eventsFn=[],this.tickSubscription?.unsubscribe()}},ce=class extends x{onMount(n){n.props.context.soundListenerPosition=n.propObservables?.soundListenerPosition}onInit(n){}onUpdate(n){}onDestroy(){}};S("sound",le);S("soundListenerPosition",ce);import{effect as Ct,isComputed as Ot,isSignal as kt}from"@signe/reactive";import{Rectangle as Dt,Point as Ge}from"pixi.js";import{snap as Mt}from"popmotion";var qe=(r,n,e)=>{r.props.context={...r.props.context??{},[n]:e}};var fe=class extends x{constructor(){super(...arguments);this.elementRef=null}onInit(e){this.elementRef=e}onMount(e){qe(e,"drop",e)}onUpdate(){}onDestroy(){this.elementRef=null}},me=class extends x{constructor(){super(...arguments);this.elementRef=null;this.stageRef=null;this.offsetInParent=new Ge;this.isDragging=!1;this.viewport=null;this.animationFrameId=null;this.lastPointerPosition=new Ge;this.pressedKeys=new Set;this.pointerIsDown=!1;this.onDragMoveHandler=()=>{};this.onDragEndHandler=()=>{};this.onDragStartHandler=()=>{};this.onKeyDownHandler=()=>{};this.onKeyUpHandler=()=>{};this.subscriptions=[]}onInit(e){this.elementRef=e,this.onDragMoveHandler=this.onDragMove.bind(this),this.onDragEndHandler=this.onDragEnd.bind(this),this.onDragStartHandler=this.onPointerDown.bind(this),this.onKeyDownHandler=this.onKeyDown.bind(this),this.onKeyUpHandler=this.onKeyUp.bind(this)}onMount(e){let{rootElement:i,canvasSize:s,viewport:t,tick:a}=e.props.context,l=e.componentInstance,o=this.dragProps;if(Object.keys(o).length===0){this.onDestroy();return}if(!l||(this.stageRef=i.componentInstance,!this.stageRef))return;this.viewport=t,l.eventMode="static",this.stageRef.eventMode="static";let f=Ct(()=>{this.stageRef&&(this.stageRef.hitArea=new Dt(0,0,s().width,s().height))});l.on("pointerdown",this.onDragStartHandler),this.stageRef.on("pointerup",this.onDragEndHandler),this.stageRef.on("pointerupoutside",this.onDragEndHandler);let m=o.keyToPress?o.keyToPress:[];window.addEventListener("keydown",this.onKeyDownHandler),window.addEventListener("keyup",this.onKeyUpHandler),this.subscriptions=[a.observable.subscribe(()=>{this.isDragging&&this.viewport&&this.updateViewportPosition(this.lastPointerPosition)}),f.subscription]}get dragProps(){let e=this.elementRef?.props.drag,i=w(e?.value??e,{snap:0,viewport:{},direction:"all",keyToPress:[]});return i.viewport=w(i.viewport,{edgeThreshold:300,maxSpeed:40}),i}get axis(){let e=this.dragProps.direction(),i={x:!0,y:!0};return e==="x"&&(i.y=!1),e==="y"&&(i.x=!1),i}onDragMove(e){if(!this.isDragging||!this.elementRef?.componentInstance||!this.elementRef.componentInstance.parent)return;let i=this.elementRef.componentInstance,s=i.parent,t=this.dragProps,a=this.elementRef.propObservables,l=Mt(t?.snap()??0);t?.move?.(e);let o=s.toLocal(e.global),c=o.x-this.offsetInParent.x,f=o.y-this.offsetInParent.y;t?.snap()?(i.position.x=l(c),i.position.y=l(f)):(this.axis.x&&(i.position.x=c),this.axis.y&&(i.position.y=f)),this.lastPointerPosition.copyFrom(e.global);let{x:m,y:u}=a,d=(h,p)=>{Ot(h)?h.dependencies.forEach(P=>{P.set(p)}):kt(h)&&h.set(p)};m!==void 0&&d(m,i.position.x),u!==void 0&&d(u,i.position.y)}updateViewportPosition(e){if(!this.viewport||!this.elementRef)return;let i=this.dragProps,s=i?.viewport?.edgeThreshold(),t=i?.viewport?.maxSpeed(),a=0,l=this.viewport.screenWidth,o=0,c=this.viewport.screenHeight,f=this.elementRef.componentInstance,m=e.x-a,u=l-e.x,d=e.y-o,h=c-e.y,p=0,P=0;if(m<s?p=-(t*(1-m/s)):u<s&&(p=t*(1-u/s)),d<s?P=-(t*(1-d/s)):h<s&&(P=t*(1-h/s)),p!==0||P!==0){let E=this.viewport.center;this.viewport.moveCenter(this.viewport.center.x+p,this.viewport.center.y+P),this.axis.x&&E.x!==this.viewport.center.x&&(f.position.x+=p),this.axis.y&&E.y!==this.viewport.center.y&&(f.position.y+=P)}}onDragEnd(){if(this.pointerIsDown=!1,!this.isDragging)return;let e=this.dragProps;this.isDragging=!1,e?.end?.(),this.stageRef&&this.stageRef.off("pointermove",this.onDragMoveHandler)}onKeyDown(e){this.pressedKeys.add(e.code),this.pressedKeys.add(e.key.toLowerCase()),this.pointerIsDown&&!this.isDragging&&this.areRequiredKeysPressed()&&this.startDrag()}onKeyUp(e){this.pressedKeys.delete(e.code),this.pressedKeys.delete(e.key.toLowerCase()),this.isDragging&&!this.areRequiredKeysPressed()&&this.onDragEnd()}areRequiredKeysPressed(){let e=this.dragProps.keyToPress?this.dragProps.keyToPress:[];return!e||e.length===0?!0:e.some(i=>this.pressedKeys.has(i)?!0:i.toLowerCase()==="space"?this.pressedKeys.has("Space")||this.pressedKeys.has(" "):i.toLowerCase()==="shift"?this.pressedKeys.has("ShiftLeft")||this.pressedKeys.has("ShiftRight"):i.toLowerCase()==="control"||i.toLowerCase()==="ctrl"?this.pressedKeys.has("ControlLeft")||this.pressedKeys.has("ControlRight"):i.toLowerCase()==="alt"?this.pressedKeys.has("AltLeft")||this.pressedKeys.has("AltRight"):!1)}onPointerDown(e){if(!this.elementRef?.componentInstance||!this.stageRef||!this.elementRef.componentInstance.parent)return;this.pointerIsDown=!0;let i=this.elementRef.componentInstance,t=i.parent.toLocal(e.global);this.offsetInParent.x=t.x-i.position.x,this.offsetInParent.y=t.y-i.position.y,this.lastPointerPosition.copyFrom(e.global),this.areRequiredKeysPressed()&&this.startDrag()}startDrag(){if(this.isDragging||!this.stageRef)return;this.isDragging=!0,this.dragProps?.start?.(),this.stageRef.on("pointermove",this.onDragMoveHandler)}onUpdate(e){e.type&&e.type==="reset"&&(this.onDestroy(),this.onMount(this.elementRef))}onDestroy(){this.subscriptions.forEach(i=>i.unsubscribe());let e=this.elementRef?.componentInstance;e&&e.off("pointerdown",this.onDragStartHandler),this.stageRef&&(this.stageRef.off("pointermove",this.onDragMoveHandler),this.stageRef.off("pointerup",this.onDragEndHandler),this.stageRef.off("pointerupoutside",this.onDragEndHandler)),window.removeEventListener("keydown",this.onKeyDownHandler),window.removeEventListener("keyup",this.onKeyUpHandler),this.stageRef=null,this.viewport=null,this.pressedKeys.clear(),this.pointerIsDown=!1}};S("drag",me);S("drop",fe);import{DisplacementFilter as At,Sprite as Ft,Texture as Rt,WRAP_MODES as Ht}from"pixi.js";import{animate as Lt}from"popmotion";var ue=class extends x{onInit(n){}onMount(n){let{image:e}=n.props.transition,i=new Ft(Rt.from(e));i.texture.baseTexture.wrapMode=Ht.REPEAT;let s=new At(i),t=n.componentInstance;t.filters=[s],t.addChild(i),setTimeout(()=>{Lt({from:0,to:1,duration:500,onUpdate:a=>{s.scale.x=a,s.scale.y=a}})},5e3)}onUpdate(n){}onDestroy(){}};S("transition",ue);export*from"@signe/reactive";import{Howler as Io}from"howler";import{effect as de,signal as K}from"@signe/reactive";import{Container as Ut}from"pixi.js";import{signal as Ie}from"@signe/reactive";import{BlurFilter as Xe,ObservablePoint as jt}from"pixi.js";function M(r){return r&&typeof r=="string"?r.endsWith("%"):!1}import{BehaviorSubject as Wt}from"rxjs";var Kt=["added","childAdded","childRemoved","click","clickcapture","destroyed","globalmousemove","globalpointermove","globaltouchmove","mousedown","mousedowncapture","mouseenter","mouseentercapture","mouseleave","mouseleavecapture","mousemove","mousemovecapture","mouseout","mouseoutcapture","mouseover","mouseovercapture","mouseup","mouseupcapture","mouseupoutside","mouseupoutsidecapture","pointercancel","pointercancelcapture","pointerdown","pointerdowncapture","pointerenter","pointerentercapture","pointerleave","pointerleavecapture","pointermove","pointermovecapture","pointerout","pointeroutcapture","pointerover","pointerovercapture","pointertap","pointertapcapture","pointerup","pointerupcapture","pointerupoutside","pointerupoutsidecapture","removed","rightclick","rightclickcapture","rightdown","rightdowncapture","rightup","rightupcapture","rightupoutside","rightupoutsidecapture","tap","tapcapture","touchcancel","touchcancelcapture","touchend","touchendcapture","touchendoutside","touchendoutsidecapture","touchmove","touchmovecapture","touchstart","touchstartcapture","wheel","wheelcapture"];function b(r){var n,e;return e=class extends r{constructor(){super(...arguments);He(this,n,null);this.isFlex=!1;this.fullProps={};this.isMounted=!1;this._anchorPoints=new jt({_onUpdate:()=>{}},0,0);this.isCustomAnchor=!1;this.displayWidth=Ie(0);this.displayHeight=Ie(0);this.overrideProps=[];this.layout=null;this.onBeforeDestroy=null;this.onAfterMount=null;this.subjectInit=new Wt(null);this.disableLayout=!1}get deltaRatio(){return q(this,n)?.scheduler?.tick.value.deltaRatio}get parentIsFlex(){return this.disableLayout?!1:this.parent?.isFlex}onInit(t){this._id=t.id;for(let a of Kt)t[a]&&!this.overrideProps.includes(a)&&(this.eventMode="static",this.on(a,t[a]));(t.onBeforeDestroy||t["on-before-destroy"])&&(this.onBeforeDestroy=t.onBeforeDestroy||t["on-before-destroy"]),(t.onAfterMount||t["on-after-mount"])&&(this.onAfterMount=t.onAfterMount||t["on-after-mount"]),(t.justifyContent||t.alignItems||t.flexDirection||t.flexWrap||t.alignContent||t.display=="flex"||M(t.width)||M(t.height)||t.isRoot)&&(this.layout={},this.isFlex=!0),this.subjectInit.next(this)}async onMount({parent:t,props:a},l){if(Le(this,n,a.context),t){let o=t.componentInstance;if(o.isFlex&&!this.layout&&!this.disableLayout)try{this.layout={}}catch(c){console.warn("Failed to set layout:",c)}l===void 0?o.addChild(this):o.addChildAt(this,l),this.isMounted=!0,this.onUpdate(a),this.onAfterMount&&await this.onAfterMount()}}onUpdate(t){if(this.fullProps={...this.fullProps,...t},!q(this,n)||!this.parent)return;t.x!==void 0&&this.setX(t.x),t.y!==void 0&&this.setY(t.y),t.scale!==void 0&&C(this.scale,t.scale),t.anchor!==void 0&&!this.isCustomAnchor&&C(this.anchor,t.anchor),t.width!==void 0&&this.setWidth(t.width),t.height!==void 0&&this.setHeight(t.height),t.minWidth!==void 0&&this.setMinWidth(t.minWidth),t.minHeight!==void 0&&this.setMinHeight(t.minHeight),t.maxWidth!==void 0&&this.setMaxWidth(t.maxWidth),t.maxHeight!==void 0&&this.setMaxHeight(t.maxHeight),t.aspectRatio!==void 0&&this.setAspectRatio(t.aspectRatio),t.flexGrow!==void 0&&this.setFlexGrow(t.flexGrow),t.flexShrink!==void 0&&this.setFlexShrink(t.flexShrink),t.flexBasis!==void 0&&this.setFlexBasis(t.flexBasis),t.rowGap!==void 0&&this.setRowGap(t.rowGap),t.columnGap!==void 0&&this.setColumnGap(t.columnGap),t.top!==void 0&&this.setTop(t.top),t.left!==void 0&&this.setLeft(t.left),t.right!==void 0&&this.setRight(t.right),t.bottom!==void 0&&this.setBottom(t.bottom),t.objectFit!==void 0&&this.setObjectFit(t.objectFit),t.objectPosition!==void 0&&this.setObjectPosition(t.objectPosition),t.transformOrigin!==void 0&&this.setTransformOrigin(t.transformOrigin),t.skew!==void 0&&C(this.skew,t.skew),t.tint&&(this.tint=t.tint),t.rotation!==void 0&&(this.rotation=t.rotation),t.angle!==void 0&&(this.angle=t.angle),t.zIndex!==void 0&&(this.zIndex=t.zIndex),t.roundPixels!==void 0&&(this.roundPixels=t.roundPixels),t.cursor&&(this.cursor=t.cursor),t.visible!==void 0&&(this.visible=t.visible),t.alpha!==void 0&&(this.alpha=t.alpha),t.pivot&&C(this.pivot,t.pivot),t.flexDirection&&this.setFlexDirection(t.flexDirection),t.flexWrap&&this.setFlexWrap(t.flexWrap),t.justifyContent&&this.setJustifyContent(t.justifyContent),t.alignItems&&this.setAlignItems(t.alignItems),t.alignContent&&this.setAlignContent(t.alignContent),t.alignSelf&&this.setAlignSelf(t.alignSelf),t.margin&&this.setMargin(t.margin),t.padding&&this.setPadding(t.padding),t.gap&&this.setGap(t.gap),t.border&&this.setBorder(t.border),t.positionType&&this.setPositionType(t.positionType),t.filters&&(this.filters=t.filters),t.maskOf&&W(t.maskOf)&&(t.maskOf.componentInstance.mask=this),t.blendMode&&(this.blendMode=t.blendMode),t.filterArea&&(this.filterArea=t.filterArea);let a=this.filters||[];if(t.blur){let l=a.find(o=>o instanceof Xe);if(!l){let o=typeof t.blur=="number"?{strength:t.blur}:t.blur;l=new Xe(o),a.push(l)}Object.assign(l,t.blur)}this.filters=a}async onDestroy(t,a){this.onBeforeDestroy&&await this.onBeforeDestroy(),super.destroy(),a&&a()}setFlexDirection(t){this.layout={flexDirection:t}}setFlexWrap(t){this.layout={flexWrap:t}}setAlignContent(t){this.layout={alignContent:t}}setAlignSelf(t){this.layout={alignSelf:t}}setAlignItems(t){this.layout={alignItems:t}}setJustifyContent(t){this.layout={justifyContent:t}}setPosition(t){t instanceof Array?t.length===2?this.layout={positionY:t[0],positionX:t[1]}:t.length===4&&(this.layout={positionTop:t[0],positionRight:t[1],positionBottom:t[2],positionLeft:t[3]}):this.layout={position:t}}setX(t){t=t+this.getWidth()*this._anchorPoints.x,this.parentIsFlex?(this.x=t,this.layout={x:t}):this.x=t}setY(t){t=t+this.getHeight()*this._anchorPoints.y,this.parentIsFlex?(this.y=t,this.layout={y:t}):this.y=t}setPadding(t){t instanceof Array?t.length===2?this.layout={paddingVertical:t[0],paddingHorizontal:t[1]}:t.length===4&&(this.layout={paddingTop:t[0],paddingRight:t[1],paddingBottom:t[2],paddingLeft:t[3]}):this.layout={padding:t}}setMargin(t){t instanceof Array?t.length===2?this.layout={marginVertical:t[0],marginHorizontal:t[1]}:t.length===4&&(this.layout={marginTop:t[0],marginRight:t[1],marginBottom:t[2],marginLeft:t[3]}):this.layout={margin:t}}setGap(t){this.layout={gap:t}}setBorder(t){t instanceof Array?t.length===2?this.layout={borderVertical:t[0],borderHorizontal:t[1]}:t.length===4&&(this.layout={borderTop:t[0],borderRight:t[1],borderBottom:t[2],borderLeft:t[3]}):this.layout={border:t}}setPositionType(t){this.layout={position:t}}setWidth(t){this.displayWidth.set(t),this.parentIsFlex?this.layout={width:t}:this.width=t}setHeight(t){this.displayHeight.set(t),this.parentIsFlex?this.layout={height:t}:this.height=t}getWidth(){return this.displayWidth()}getHeight(){return this.displayHeight()}setMinWidth(t){this.layout={minWidth:t}}setMinHeight(t){this.layout={minHeight:t}}setMaxWidth(t){this.layout={maxWidth:t}}setMaxHeight(t){this.layout={maxHeight:t}}setAspectRatio(t){this.layout={aspectRatio:t}}setFlexGrow(t){this.layout={flexGrow:t}}setFlexShrink(t){this.layout={flexShrink:t}}setFlexBasis(t){this.layout={flexBasis:t}}setRowGap(t){this.layout={rowGap:t}}setColumnGap(t){this.layout={columnGap:t}}setTop(t){this.layout={top:t}}setLeft(t){this.layout={left:t}}setRight(t){this.layout={right:t}}setBottom(t){this.layout={bottom:t}}setObjectFit(t){this.layout={objectFit:t}}setObjectPosition(t){this.layout={objectPosition:t}}setTransformOrigin(t){this.layout={transformOrigin:t}}},n=new WeakMap,e}y("Canvas",class extends b(Ut){});var Nt=async(r={})=>{let{cursorStyles:n,width:e,height:i,class:s}=w(r);r.width||(e=K(800)),r.height||(i=K(600));let t=K({width:0,height:0});r.isRoot=!0;let a={...r,context:{canvasSize:t,app:K(null)},width:e?.(),height:i?.()};r.tick||(a.context.tick=a.tick=K({timestamp:0,deltaTime:0,frame:0,deltaRatio:1}));let l=g("Canvas",a);return l.render=(o,c)=>{if(!c)return;let f=c.renderer,m=f.view.canvas;globalThis.__PIXI_STAGE__=l.componentInstance,globalThis.__PIXI_RENDERER__=f,r.tickStart!==!1&&l.directives.tick.start(),de(()=>{l.propObservables.tick(),f.render(l.componentInstance)}),c.stage=l.componentInstance,c.stage.layout={width:c.screen.width,height:c.screen.height,justifyContent:r.justifyContent,alignItems:r.alignItems},t.set({width:c.screen.width,height:c.screen.height}),c.renderer.on("resize",(d,h)=>{t.set({width:d,height:h}),c.stage.layout&&(c.stage.layout={width:d,height:h})}),r.tickStart!==!1&&l.directives.tick.start(),c.ticker.add(()=>{l.propObservables.tick()}),n&&de(()=>{f.events.cursorStyles=n()}),s&&de(()=>{m.classList.add(s())});let u=o.querySelector("canvas");u?o.replaceChild(m,u):o.appendChild(m),a.context.app.set(c)},l};import{Container as Bt}from"pixi.js";var U=class extends b(Bt){constructor(){super(...arguments);this.isCustomAnchor=!0}onUpdate(e){e.anchor&&(C(this._anchorPoints,e.anchor),e.pivot=[this.getWidth()*this._anchorPoints.x,this.getHeight()*this._anchorPoints.y]),super.onUpdate(e),e.sortableChildren!=null&&(this.sortableChildren=e.sortableChildren)}async onMount(e){await super.onMount(e);let{componentInstance:i,props:s}=e,{pixiChildren:t}=s;t&&t.forEach(a=>{i.addChild(a)})}};y("Container",U);var he=r=>g("Container",r);import{effect as _t,isSignal as A,signal as V}from"@signe/reactive";import{Assets as zt,Graphics as Ye}from"pixi.js";var pe=class extends b(Ye){async onInit(n){await super.onInit(n)}async onMount(n,e){await super.onMount(n,e);let{props:i,propObservables:s}=n,t=A(s?.width)?s.width:V(i.width||0),a=A(s?.height)?s.height:V(i.height||0);this.width=t,this.height=a;let l=M(t()),o=M(a());i.draw&&(this.clearEffect=_t(()=>{let c=t(),f=a();typeof c=="string"||typeof f=="string"||c==0||f==0||(this.clear(),i.draw?.(this,c,f),this.subjectInit.next(this))})),this.on("layout",c=>{let f=c.computedLayout;l&&A(t)&&t.set(f.width),o&&A(a)&&a.set(f.height)})}onUpdate(n){super.onUpdate(n),n.width!==void 0&&this.width&&(A(n.width)?this.width=n.width:this.width.set(n.width)),n.height!==void 0&&this.height&&(A(n.height)?this.height=n.height:this.height.set(n.height))}async onDestroy(n,e){let i=async()=>{this.clearEffect.subscription.unsubscribe(),e()};await super.onDestroy(n,i)}};y("Graphics",pe);function F(r){return g("Graphics",r)}function Vt(r){let{color:n,borderRadius:e,border:i}=w(r,{borderRadius:null,border:null});return F({draw:(s,t,a)=>{e()?s.roundRect(0,0,t,a,e()):s.rect(0,0,t,a),i&&s.stroke(i),s.fill(n())},...r})}function $e(r,n,e){let{color:i,border:s}=e;"radius"in e?r.circle(0,0,e.radius()):r.ellipse(0,0,e.width()/2,e.height()/2),s()&&r.stroke(s()),r.fill(i())}function qt(r){let{radius:n,color:e,border:i}=w(r,{border:null});return F({draw:s=>$e(s,"circle",{radius:n,color:e,border:i}),...r})}function Gt(r){let{width:n,height:e,color:i,border:s}=w(r,{border:null});return F({draw:(t,a,l)=>$e(t,"ellipse",{width:V(a),height:V(l),color:i,border:s}),...r})}function It(r){let{width:n,height:e,color:i,border:s}=w(r,{border:null,color:"#000"});return F({draw:(t,a,l)=>{t.moveTo(0,l),t.lineTo(a/2,0),t.lineTo(a,l),t.lineTo(0,l),t.fill(i()),s&&t.stroke(s)},...r})}function Xt(r){return F({draw:async n=>{if(r.src){let e=await zt.load({src:r.src,data:{parseAsGraphicsContext:!0}}),i=new Ye(e);n.context=i.context}else r.content?n.svg(r.content):r.svg&&n.svg(r.svg)},...r})}import{Mesh as Yt,Geometry as $t,Assets as Je}from"pixi.js";var ye=class extends b(Yt){constructor(){super({geometry:new $t})}onInit(n){if(super.onInit(n),n.geometry)try{this.geometry=n.geometry}catch(e){console.warn("Failed to set geometry:",e)}n.shader&&(this.shader=n.shader)}async onUpdate(n){if(super.onUpdate(n),n.geometry)try{this.geometry=n.geometry}catch(e){console.warn("Failed to update geometry:",e)}n.shader&&(this.shader=n.shader),n.texture?typeof n.texture=="string"?this.texture=await Je.load(n.texture):this.texture=n.texture:n.image&&(this.texture=await Je.load(n.image)),n.tint!==void 0&&(this.tint=n.tint),n.blendMode!==void 0&&(this.blendMode=n.blendMode),n.roundPixels!==void 0&&(this.roundPixels=n.roundPixels)}async onDestroy(n,e){let i=async()=>{e()};await super.onDestroy(n,i)}};y("Mesh",ye);var Jt=r=>g("Mesh",r);var Qe=null,ge=null;function be(r){ge?.(r)}function qr(r){be(n=>{let{context:e}=n.props,i;return e.tick&&(i=e.tick.observable.subscribe(({value:s})=>{r(s,n)})),()=>{i?.unsubscribe()}})}function O(r,n={},...e){let i=new Set,s=new Set;Qe=a=>{i.add(a)},ge=a=>{s.add(a)},e[0]instanceof Array&&(e=e[0]);let t=r({...n,children:e});return t||(t={}),t.effectSubscriptions=Array.from(i),t.effectMounts=[...Array.from(s),...t.effectMounts??[]],t instanceof Promise&&t.then(a=>{a.props.isRoot&&s.forEach(l=>l(a))}),Qe=null,ge=null,t}function Qt(r){return O(he)}import*as Ze from"@barvynkoa/particle-emitter";var ve=class extends U{constructor(){super(...arguments);this.elapsed=Date.now()}async onMount(e){await super.onMount(e);let{props:i}=e,s=i.context.tick;this.emitter=new Ze.Emitter(this,i.config),this.subscriptionTick=s.observable.subscribe(t=>{if(!this.emitter)return;let a=Date.now();this.emitter.update((a-this.elapsed)*.001),this.elapsed=a})}onUpdate(e){}async onDestroy(e,i){let s=async()=>{this.emitter?.destroy(),this.emitter=null,this.subscriptionTick.unsubscribe(),i()};await super.onDestroy(e,s)}};y("ParticlesEmitter",ve);function Zt(r){return g("ParticlesEmitter",r)}import{Howl as ii}from"howler";import{computed as ni,effect as ri,isSignal as si}from"@signe/reactive";import{Assets as tt,Container as it,Sprite as nt,Rectangle as rt,Texture as st}from"pixi.js";import{effect as ei,signal as et}from"@signe/reactive";import{animate as ti}from"popmotion";function xe(r){return r.animatedState!==void 0}function is(r,n={}){let e={current:r,start:r,end:r},i,s=et(r),t=et(e);ei(()=>{let o=t();s.set(o.current)});function a(o,c={}){if(o===void 0)return t();let f=t(),m={current:f.current,start:f.current,end:o};t.set(m),i&&i.stop(),i=ti({duration:20,...n,...c,from:f.current,to:o,onUpdate:u=>{t.update(d=>({...d,current:u})),n.onUpdate&&n.onUpdate(u)}})}let l=function(){return t().current};for(let o in s)l[o]=s[o];return l.animatedState=t,l.update=o=>{a(o(t().current))},l.set=async(o,c={})=>new Promise(f=>{a(o,{...c,onComplete:f})}),l}async function ns(r){for(let n of r)Array.isArray(n)?await Promise.all(n.map(e=>e())):await n()}var ot=console.log;var we=class extends b(nt){constructor(){super(...arguments);this.currentAnimation=null;this.time=0;this.frameIndex=0;this.animations=new Map;this.subscriptionSheet=[];this.sheetParams={};this.sheetCurrentAnimation="stand";this.app=null;this.currentAnimationContainer=null}get renderer(){return this.app?.renderer}async createTextures(e){let{width:i,height:s,framesHeight:t,framesWidth:a,image:l,offset:o}=e;if(!l||typeof l!="string"||l.trim()==="")return console.warn("Invalid image path provided to createTextures:",l),[];let c=await tt.load(l),f=e.spriteWidth,m=e.spriteHeight,u=[],d=o&&o.x||0,h=o&&o.y||0;for(let p=0;p<t;p++){u[p]=[];for(let P=0;P<a;P++){let E=P*f+d,v=p*m+h;if(v>s)throw ot(`Warning, there is a problem with the height of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the height of the image.`);if(E>i)throw ot(`Warning, there is a problem with the width of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the width of the image.`);u[p].push(new st({source:c.source,frame:new rt(E,v,f,m)}))}}return u}async createAnimations(){let{textures:e}=this.spritesheet;if(e)for(let i in e){let a={...["width","height","framesHeight","framesWidth","rectWidth","rectHeight","offset","image","sound"].reduce((d,h)=>({...d,[h]:this.spritesheet[h]}),{}),...e[i]},{rectWidth:l,width:o=0,framesWidth:c=1,rectHeight:f,height:m=0,framesHeight:u=1}=a;a.spriteWidth=l||o/c,a.spriteHeight=f||m/u,this.animations.set(i,{frames:await this.createTextures(a),name:i,animations:e[i].animations,params:[],data:a,sprites:[]})}}async onMount(e){let{props:i,propObservables:s}=e,t=i.context.tick,a=i.sheet??{};if(this.app=i.context.app(),a?.onFinish&&(this.onFinish=a.onFinish),this.subscriptionTick=t.observable.subscribe(o=>{this.update(o)}),i.sheet?.definition&&(this.spritesheet=i.sheet.definition,await this.createAnimations()),a.params)for(let o in s?.sheet.params){let c=s?.sheet.params[o];si(c)?this.subscriptionSheet.push(c.observable.subscribe(f=>{this.animations.size!=0&&this.play(this.sheetCurrentAnimation,[{[o]:f}])})):this.play(this.sheetCurrentAnimation,[{[o]:c}])}let l=ni(()=>{let{x:o,y:c}=s??{};if(!o||!c)return!1;let f=o,m=c,u=xe(f)&&f.animatedState().current!==f.animatedState().end,d=xe(m)&&m.animatedState().current!==m.animatedState().end;return u||d});ri(()=>{let o=l();this.isMounted&&(o?this.sheetCurrentAnimation="walk":this.sheetCurrentAnimation="stand",this.spritesheet&&this.play(this.sheetCurrentAnimation,[this.sheetParams]))}),super.onMount(e)}async onUpdate(e){super.onUpdate(e);let i=async t=>{if(!t||typeof t!="string"||t.trim()==="")return console.warn("Invalid image path provided to setTexture:",t),null;let a=this.fullProps.loader?.onProgress,l=await tt.load(t,o=>{if(a&&a(o),o==1){let c=this.fullProps.loader?.onComplete;c&&setTimeout(()=>{c(l)})}});return l},s=e.sheet;if(s?.params&&(this.sheetParams=s?.params),s?.playing&&this.isMounted&&(this.sheetCurrentAnimation=s?.playing,this.play(this.sheetCurrentAnimation,[this.sheetParams])),e.hitbox&&(this.hitbox=e.hitbox),e.scaleMode)this.baseTexture.scaleMode=e.scaleMode;else if(e.image&&this.fullProps.rectangle===void 0){let t=await i(this.fullProps.image);t&&(this.texture=t)}else e.texture&&(W(e.texture)?(e.texture.componentInstance.subjectInit.subscribe(a=>{console.log("a",a?.width)}),this.texture=this.renderer?.generateTexture(e.texture.componentInstance)):this.texture=e.texture);if(e.rectangle!==void 0){let{x:t,y:a,width:l,height:o}=e.rectangle?.value??e.rectangle,c=await i(this.fullProps.image);c&&(this.texture=new st({source:c.source,frame:new rt(t,a,l,o)}))}}async onDestroy(e,i){await super.onDestroy(e),this.subscriptionSheet.forEach(s=>s.unsubscribe()),this.subscriptionTick.unsubscribe(),this.currentAnimationContainer&&this.parent instanceof it&&this.parent.removeChild(this.currentAnimationContainer)}has(e){return this.animations.has(e)}get(e){return this.animations.get(e)}isPlaying(e){return e?this.currentAnimation==null?!1:this.currentAnimation.name==e:!!this.currentAnimation}stop(){this.currentAnimation=null,this.destroy()}play(e,i=[]){let s=this.currentAnimation?.params;if(this.isPlaying(e)&&H(i,s||[]))return;let t=this.get(e);if(!t)throw new Error(`Impossible to play the ${e} animation because it doesn't exist on the "${this.id}" spritesheet`);let a=structuredClone(i);this.removeChildren(),t.sprites=[],this.currentAnimation=t,this.currentAnimation.params=a,this.time=0,this.frameIndex=0;let l=t.animations;l=X(l)?l(...a):l,this.currentAnimationContainer=new it;for(let c of l){let f=new nt;for(let m of c)this.currentAnimation.sprites.push(m);this.currentAnimationContainer.addChild(f)}let o=this.currentAnimation.data.sound;o&&new ii({src:o,autoplay:!0,loop:!1,volume:1}),this.update({deltaRatio:1})}update({deltaRatio:e}){if(!this.isPlaying()||!this.currentAnimation||!this.currentAnimationContainer)return;let i=this,{frames:s,sprites:t,data:a}=this.currentAnimation,l=t[this.frameIndex],o=t[this.frameIndex+1];for(let c of this.currentAnimationContainer.children){let d=function(v,T){let N=m(T||v);N!==void 0&&(i[v]=N)},f=c;if(!l||l.frameY==null||l.frameX==null)continue;this.texture=s[l.frameY][l.frameX];let m=v=>l[v]??a[v]??this.spritesheet[v],u=v=>{let T=m(v);T&&this[v].set(...T)};this.applyTransform&&(l={...l,...this.applyTransform(l,a,this.spritesheet)});let h=m("spriteRealSize"),p=typeof h=="number"?h:h?.height,P=typeof h=="number"?h:h?.width,E=()=>{if(p&&this.hitbox){let{spriteWidth:v,spriteHeight:T}=a,Ae=(v-this.hitbox.w)/2/v,N=(T-p)/2,ut=(T-this.hitbox.h-N)/T;this.anchor.set(Ae,ut)}};l.sound,E(),u("anchor"),u("scale"),u("skew"),u("pivot"),d("alpha","opacity"),d("x"),d("y"),d("angle"),d("rotation"),d("visible")}if(!o){this.time=0,this.frameIndex=0,this.onFinish&&t.length>1&&this.onFinish();return}this.time+=e??1,this.time>=o.time&&this.frameIndex++}};y("Sprite",we);var Pe=r=>g("Sprite",r);import{effect as oi,signal as ai}from"@signe/reactive";function li(r){let n={audioprocess:null,canplay:null,canplaythrough:null,complete:null,durationchange:null,emptied:null,ended:null,loadeddata:null,loadedmetadata:null,pause:null,play:null,playing:null,progress:null,ratechange:null,seeked:null,seeking:null,stalled:null,suspend:null,timeupdate:null,volumechange:null,waiting:null},e=ai(null),i=oe(r),{play:s,loop:t,muted:a}=i({play:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1}});return oi(()=>{let l=e(),o=s();l&&o!==void 0&&(o?l.play():l.pause()),l&&t()&&(l.loop=t()),l&&a()&&(l.muted=a())}),be(()=>()=>{for(let l in n)n[l]&&e().removeEventListener(l,n[l])}),O(Pe,{...r,image:r.src,loader:{onComplete:l=>{let o=l.source.resource;e.set(o),r?.loader?.onComplete&&r.loader.onComplete(l);for(let c in n)if(r[c]){let f=m=>{r[c](m)};n[c]=f,o.addEventListener(c,f)}}}})}import{Text as mi}from"pixi.js";import{effect as ci,signal as fi}from"@signe/reactive";function Se(r){return r?.start&&r?.listen}function Es(r){let n=fi({config:r,value:0,resolve:e=>{}});return{start:e=>new Promise(i=>{n.set({config:{...r,...e},resolve:i,value:Math.random()})}),listen:()=>({config:r,seed:n()})}}function at(r,n){if(!Se(r))throw new Error("In 'on(arg)' must have a trigger signal type");ci(()=>{let e=r.listen();if(e?.seed.value){let i=n(e?.seed.config);i&&typeof i.then=="function"&&i.then(e?.seed.resolve)}})}var Ee=class extends b(mi){constructor(){super(...arguments);this.fullText="";this.currentIndex=0;this.typewriterSpeed=1;this._wordWrapWidth=0;this.typewriterOptions={}}async onMount(e,i){let{props:s}=e;await super.onMount(e,i);let t=s.context.tick;s.text&&s.typewriter&&(this.fullText=s.text,this.text="",this.currentIndex=0,s.typewriter&&(this.typewriterOptions=s.typewriter,this.typewriterOptions.skip&&Se(this.typewriterOptions.skip)&&at(this.typewriterOptions.skip,()=>{this.skipTypewriter()}))),this.subscriptionTick=t.observable.subscribe(()=>{s.typewriter&&this.typewriterEffect()})}onUpdate(e){if(super.onUpdate(e),e.typewriter&&e.typewriter&&(this.typewriterOptions=e.typewriter),e.text!==void 0&&(this.text=""+e.text),e.text!==void 0&&e.text!==this.fullText&&this.fullProps.typewriter&&(this.text="",this.currentIndex=0,this.fullText=e.text),e.style){for(let i in e.style)this.style[i]=e.style[i];e.style.wordWrapWidth&&(this._wordWrapWidth=e.style.wordWrapWidth)}e.color&&(this.style.fill=e.color),e.size&&(this.style.fontSize=e.size),e.fontFamily&&(this.style.fontFamily=e.fontFamily),this._wordWrapWidth?this.setWidth(this._wordWrapWidth):this.setWidth(this.width),this.setHeight(this.height)}get onCompleteCallback(){return this.typewriterOptions.onComplete}typewriterEffect(){if(this.currentIndex<this.fullText.length){let e=Math.min(this.currentIndex+(this.typewriterOptions.speed??1),this.fullText.length);this.text=this.fullText.slice(0,e),this.currentIndex=e,this.currentIndex===this.fullText.length&&this.onCompleteCallback&&this.onCompleteCallback()}}skipTypewriter(){this.skipSignal&&this.skipSignal(),this.text=this.fullText,this.currentIndex=this.fullText.length}async onDestroy(e,i){let s=async()=>{this.subscriptionTick&&this.subscriptionTick.unsubscribe(),i&&i()};await super.onDestroy(e,s)}};y("Text",Ee);function ui(r){return g("Text",r)}import{TilingSprite as di,Texture as hi}from"pixi.js";var Te=class extends b(di){onUpdate(n){super.onUpdate(n),n.image&&(this.texture=hi.from(n.image)),n.tileScale&&this.tileScale.set(n.tileScale.x,n.tileScale.y),n.tilePosition&&this.tilePosition.set(n.tilePosition.x,n.tilePosition.y),n.width!==void 0&&(this.width=n.width),n.height!==void 0&&(this.height=n.height)}};y("TilingSprite",Te);function pi(r){return g("TilingSprite",r)}import{Viewport as yi}from"pixi-viewport";import{effect as lt}from"@signe/reactive";var gi=["bounce-x-end","bounce-x-start","bounce-y-end","bounce-y-start","clicked","drag-end","drag-start","frame-end","mouse-edge-end","mouse-edge-start","moved","moved-end","pinch-end","pinch-start","snap-end","snap-start","snap-zoom-end","snap-zoom-start","wheel-scroll","zoomed","zoomed-end"],Ce=class extends b(yi){constructor(){super({noTicker:!0,events:{domElement:{addEventListener:()=>{}}}});this.overrideProps=["wheel"]}onInit(e){super.onInit(e);for(let i of gi)e[i]&&this.on(i,e[i])}async onMount(e,i){await super.onMount(e,i);let{props:s}=e,{tick:t,app:a,canvasSize:l}=s.context,o=!1;lt(()=>{this.screenWidth=l().width,this.screenHeight=l().height}),lt(()=>{let c=a();if(!c)return;let f=c.renderer;f.events.domElement.addEventListener("wheel",this.input.wheelFunction),this.options.events=f.events}),this.tickSubscription=t.observable.subscribe(({value:c})=>{this.update(c.timestamp)}),e.props.context.viewport=this,this.updateViewportSettings(s)}onUpdate(e){super.onUpdate(e),this.updateViewportSettings(e)}updateViewportSettings(e){e.screenWidth!==void 0&&(this.screenWidth=e.screenWidth),e.screenHeight!==void 0&&(this.screenHeight=e.screenHeight),e.worldWidth!==void 0&&(this.worldWidth=e.worldWidth),e.worldHeight!==void 0&&(this.worldHeight=e.worldHeight),e.drag&&this.drag(e.drag),e.clamp&&this.clamp(e.clamp.value??e.clamp),e.wheel&&(e.wheel===!0?this.wheel():this.wheel(e.wheel)),e.decelerate&&(e.decelerate===!0?this.decelerate():this.decelerate(e.decelerate)),e.pinch&&(e.pinch===!0?this.pinch():this.pinch(e.pinch))}async onDestroy(e,i){let s=async()=>{this.tickSubscription.unsubscribe(),i()};await super.onDestroy(e,s)}};y("Viewport",Ce);function bi(r){return g("Viewport",r)}import{Assets as vi,NineSliceSprite as xi}from"pixi.js";var Oe=class extends b(xi){constructor(){super({width:0,height:0})}async onUpdate(n){for(let[e,i]of Object.entries(n))i!==void 0&&(e==="image"?this.texture=await vi.load(i):e in this&&(this[e]=i))}};y("NineSliceSprite",Oe);function wi(r){return g("NineSliceSprite",r)}import{DOMContainer as Pi}from"pixi.js";import{isSignal as ct}from"@signe/reactive";var ft=["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"],ke=class{constructor(){this.eventListeners=new Map;this.onBeforeDestroy=null;this.valueSignal=null;this.isFormElementType=!1}isFormElement(n){return["input","textarea","select"].includes(n.toLowerCase())}onInit(n){typeof n.element=="string"?(this.element=document.createElement(n.element),this.isFormElementType=this.isFormElement(n.element)):(this.element=n.element.value,this.isFormElementType=this.isFormElement(this.element.tagName)),(n.onBeforeDestroy||n["on-before-destroy"])&&(this.onBeforeDestroy=n.onBeforeDestroy||n["on-before-destroy"]);for(let e of ft)if(n.attrs?.[e]){let i=s=>{if(e==="submit"&&this.element.tagName.toLowerCase()==="form"){s.preventDefault();let t=new FormData(this.element),a={};t.forEach((l,o)=>{a[o]?Array.isArray(a[o])?a[o].push(l):a[o]=[a[o],l]:a[o]=l}),n.attrs[e]?.(s,a)}else n.attrs[e]?.(s)};this.eventListeners.set(e,i),this.element.addEventListener(e,i,!1)}if(n.children)for(let e of n.children)$(e)?e.subscribe(({elements:i})=>{for(let s of i)this.element.appendChild(s.componentInstance.element)}):this.element.appendChild(e.componentInstance.element);this.onUpdate(n)}onMount(n){let i=n.propObservables.attrs;if(this.isFormElementType&&i?.value&&ct(i.value)){this.valueSignal=i.value,this.element.value=this.valueSignal();let s=t=>{let a=t.target;this.valueSignal.set(a.value)};this.eventListeners.set("input",s),this.element.addEventListener("input",s,!1)}}onUpdate(n){if(this.element){for(let[e,i]of Object.entries(n.attrs||{}))if(e==="class"){let s=i.items||i.value||i;if(this.element.className="",typeof s=="string")this.element.className=s;else if(Array.isArray(s))this.element.classList.add(...s);else if(typeof s=="object"&&s!==null)for(let[t,a]of Object.entries(s))a&&this.element.classList.add(t)}else if(e==="style"){let s=i.items||i.value||i;if(typeof s=="string")this.element.setAttribute("style",s);else if(typeof s=="object"&&s!==null)for(let[t,a]of Object.entries(s))a!=null&&(this.element.style[t]=a)}else if(e==="value"&&this.isFormElementType)if(ct(i)){let s=this.element.value,t=i();s!==t&&(this.element.value=t)}else this.element.value=i;else ft.includes(e)||this.element.setAttribute(e,i);n.textContent&&(this.element.textContent=n.textContent)}}async onDestroy(n,e){if(this.element){this.onBeforeDestroy&&await this.onBeforeDestroy();for(let[i,s]of this.eventListeners)this.element.removeEventListener(i,s,!1);this.eventListeners.clear(),this.element.remove(),e&&e()}}};y("DOMElement",ke);var De=r=>g("DOMElement",r);var Me=class extends b(Pi){constructor(){super(...arguments);this.disableLayout=!0}onInit(e){let i=O(De,{element:"div"},e.children);this.element=i.componentInstance.element}};y("DOMContainer",Me);var Si=r=>g("DOMContainer",r);import"@pixi/layout";import{Application as Ei}from"pixi.js";var jo=async(r,n,e)=>{let i=new Ei;await i.init({resizeTo:r,autoStart:!1,...e??{}});let s=await O(n);if(s.tag!="Canvas")throw new Error("Canvas is required");s.render(r,i);let{backgroundColor:t}=w(s.props,{backgroundColor:"black"});return i.renderer.background.color=t(),{canvasElement:s,app:i}};import{linear as Ti,easeIn as Ci,easeInOut as Oi,easeOut as ki,circIn as Di,circInOut as Mi,circOut as Ai,backIn as Fi,backInOut as Ri,backOut as Hi,anticipate as Li,bounceIn as ji,bounceInOut as Wi,bounceOut as Ki}from"popmotion";var Uo={linear:Ti,easeIn:Ci,easeInOut:Oi,easeOut:ki,circIn:Di,circInOut:Mi,circOut:Ai,backIn:Fi,backInOut:Ri,backOut:Hi,anticipate:Li,bounceIn:ji,bounceInOut:Wi,bounceOut:Ki};import{Texture as Ui,ImageSource as Ni,DOMAdapter as Bi,Matrix as _i}from"pixi.js";var mt=class{constructor(n,e,i,s,t,a,l=0){this.x0=n;this.y0=e;this.x1=i;this.y1=s;this.x2=t;this.y2=a;this.focalPoint=l;this.gradient=null;this.texture=null;this.size=600;this.size=n;let o=this.size*.5;this.canvas=Bi.get().createCanvas(),this.canvas.width=this.size,this.canvas.height=this.size,this.ctx=this.canvas.getContext("2d"),this.ctx&&(this.gradient=this.ctx.createRadialGradient(o*(1-l),o,0,o,o,o-.5))}addColorStop(n,e){this.gradient&&this.gradient.addColorStop(n,e)}render({translate:n}={}){let{x0:e,y0:i,x1:s,y1:t,x2:a,y2:l,focalPoint:o}=this,c=this.size;if(this.ctx&&this.gradient){this.ctx.fillStyle=this.gradient,this.ctx.fillRect(0,0,c,c),this.texture=new Ui({source:new Ni({resource:this.canvas,addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge"})});let f=new _i,m=Math.sqrt((s-e)*(s-e)+(t-i)*(t-i)),u=Math.sqrt((a-e)*(a-e)+(l-i)*(l-i)),d=Math.atan2(t-i,s-e),h=m/c,p=u/c;f.rotate(-d),f.scale(h,p),n&&f.translate(n.x,n.y),this.transform=f}return{texture:this.texture,matrix:this.transform}}};import{isObservable as sa}from"rxjs";import*as oa from"howler";export{Nt as Canvas,qt as Circle,he as Container,Si as DOMContainer,De as DOMElement,b as DisplayObject,Kt as EVENTS,Uo as Easing,Gt as Ellipse,F as Graphics,oa as Howl,Io as Howler,Jt as Mesh,wi as NineSliceSprite,Zt as ParticlesEmitter,mt as RadialGradient,Vt as Rect,Qt as Scene,Pe as Sprite,Xt as Svg,ui as Text,pi as TilingSprite,It as Triangle,Q as Utils,li as Video,bi as Viewport,ns as animatedSequence,is as animatedSignal,jo as bootstrapCanvas,mn as cond,g as createComponent,Qe as currentSubscriptionsTracker,O as h,xe as isAnimatedSignal,W as isElement,sa as isObservable,ne as isPrimitive,Se as isTrigger,fn as loop,be as mount,ge as mountTracker,at as on,y as registerComponent,qr as tick,Es as trigger,oe as useDefineProps,w as useProps};
 //# sourceMappingURL=index.js.map