canvasengine 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/index.js

@@ -0,0 +1,3042 @@
+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);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// 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,
+  isPromise: () => isPromise,
+  log: () => log,
+  preciseNow: () => preciseNow,
+  set: () => set,
+  setObservablePoint: () => setObservablePoint
+});
+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);
+}
+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) {
+    this.setupListeners();
+    this.setInputs(element.props.controls.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/directives/ViewportFollow.ts
+var ViewportFollow = class extends Directive {
+  onInit(element) {
+  }
+  onMount(element) {
+    const { viewportFollow } = element.props;
+    const { viewport } = element.props.context;
+    if (!viewport) {
+      throw error("ViewportFollow directive requires a Viewport component to be mounted in the same context");
+    }
+    viewport.follow(element.componentInstance);
+  }
+  onUpdate(props) {
+  }
+  onDestroy() {
+  }
+};
+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.eventsFn = [];
+    this.maxVolume = 1;
+    this.maxDistance = 100;
+  }
+  onInit(element) {
+  }
+  onMount(element) {
+    const { props } = element;
+    const tick2 = props.context.tick;
+    const { src, autoplay, loop: loop2, volume, spatial } = props.sound;
+    this.sound = new Howl({
+      src,
+      autoplay,
+      loop: loop2,
+      volume
+    });
+    for (let event of EVENTS) {
+      if (!props.sound[event]) continue;
+      const fn = props.sound[event];
+      this.eventsFn.push(fn);
+      this.sound.on(event, fn);
+    }
+    if (spatial) {
+      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.sound.volume(volume2);
+      }).subscription;
+    }
+  }
+  onUpdate(props) {
+    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props;
+    if (volume != void 0) this.sound.volume(volume);
+    if (loop2 != void 0) this.sound.loop(loop2);
+    if (mute != void 0) this.sound.mute(mute);
+    if (seek != void 0) this.sound.seek(seek);
+    if (playing != void 0) {
+      if (playing) this.sound.play();
+      else this.sound.pause();
+    }
+    if (spatial) {
+      this.maxVolume = spatial.maxVolume ?? this.maxVolume;
+      this.maxDistance = spatial.maxDistance ?? this.maxDistance;
+    }
+    if (rate != void 0) this.sound.rate(rate);
+  }
+  onDestroy() {
+    this.sound.stop();
+    this.tickSubscription?.unsubscribe();
+    for (let event of EVENTS) {
+      if (this.eventsFn[event]) {
+        this.sound.off(event, this.eventsFn[event]);
+      }
+    }
+  }
+};
+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, isSignal } from "@signe/reactive";
+import { Rectangle } from "pixi.js";
+import { snap } from "popmotion";
+
+// 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 effect4, signal as signal3 } from "@signe/reactive";
+import { Container as Container3, autoDetectRenderer } from "pixi.js";
+import { loadYoga } from "yoga-layout";
+
+// src/engine/reactive.ts
+import { isSignal as isSignal2 } from "@signe/reactive";
+import {
+  Observable,
+  Subject,
+  defer,
+  from,
+  map,
+  of,
+  switchMap
+} 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;
+  }
+  element.propSubscriptions.forEach((sub) => sub.unsubscribe());
+  element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+  for (let name in element.directives) {
+    element.directives[name].onDestroy?.();
+  }
+  element.componentInstance.onDestroy?.(element.parent);
+  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 (isSignal2(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);
+              }
+              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);
+  instance.onUpdate?.(element.props);
+  const 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));
+    });
+  };
+  const elementsListen = new Subject();
+  if (props?.isRoot) {
+    const propagateContext = async (element2) => {
+      if (element2.props.attach) {
+        const isReactiveAttach = isSignal2(element2.propObservables?.attach);
+        if (!isReactiveAttach) {
+          element2.props.children.push(element2.props.attach);
+        } else {
+          let lastElement = null;
+          element2.propObservables.attach.observable.subscribe(({ value, type }) => {
+            if (type != "init") {
+              destroyElement(lastElement);
+            }
+            lastElement = value;
+            onMount(element2, value);
+            propagateContext(value);
+          });
+        }
+      }
+      if (!element2.props.children) {
+        return;
+      }
+      for (let child of element2.props.children) {
+        if (!child) continue;
+        if (isPromise(child)) {
+          child = await child;
+        }
+        if (child instanceof Observable) {
+          child.subscribe(
+            ({
+              elements: comp,
+              prev
+            }) => {
+              const components2 = comp.filter((c) => c !== null);
+              if (prev) {
+                components2.forEach((c) => {
+                  const index = element2.props.children.indexOf(prev.props.key);
+                  onMount(element2, c, index + 1);
+                  propagateContext(c);
+                });
+                return;
+              }
+              components2.forEach((component) => {
+                if (!Array.isArray(component)) {
+                  onMount(element2, component);
+                  propagateContext(component);
+                } else {
+                  component.forEach((comp2) => {
+                    onMount(element2, comp2);
+                    propagateContext(comp2);
+                  });
+                }
+              });
+              elementsListen.next(void 0);
+            }
+          );
+        } else {
+          onMount(element2, child);
+          await propagateContext(child);
+        }
+      }
+    };
+    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;
+    }
+  }
+  return element;
+}
+function loop(itemsSubject, createElementFn) {
+  let elements = [];
+  const addAt = (items, insertIndex) => {
+    return items.map((item, index) => {
+      const element = createElementFn(item, insertIndex + index);
+      elements.splice(insertIndex + index, 0, element);
+      return element;
+    });
+  };
+  return defer(() => {
+    let initialItems = [...itemsSubject._subject.items];
+    let init = true;
+    return itemsSubject.observable.pipe(
+      map((event) => {
+        const { type, items, index } = event;
+        if (init) {
+          if (elements.length > 0) {
+            return {
+              elements,
+              fullElements: elements
+            };
+          }
+          const newElements = addAt(initialItems, 0);
+          initialItems = [];
+          init = false;
+          return {
+            elements: newElements,
+            fullElements: elements
+          };
+        } else if (type == "reset") {
+          if (elements.length != 0) {
+            elements.forEach((element) => {
+              destroyElement(element);
+            });
+            elements = [];
+          }
+          const newElements = addAt(items, 0);
+          return {
+            elements: newElements,
+            fullElements: elements
+          };
+        } else if (type == "add" && index != void 0) {
+          const lastElement = elements[index - 1];
+          const newElements = addAt(items, index);
+          return {
+            prev: lastElement,
+            elements: newElements,
+            fullElements: elements
+          };
+        } else if (index != void 0 && type == "remove") {
+          const currentElement = elements[index];
+          destroyElement(currentElement);
+          elements.splice(index, 1);
+          return {
+            elements: []
+          };
+        }
+        return {
+          elements: [],
+          fullElements: elements
+        };
+      })
+    );
+  });
+}
+function cond(condition, createElementFn) {
+  let element = null;
+  return condition.observable.pipe(
+    switchMap((bool) => {
+      if (bool) {
+        let _el = createElementFn();
+        if (isPromise(_el)) {
+          return from(_el).pipe(
+            map((el) => {
+              element = _el;
+              return {
+                type: "init",
+                elements: [el]
+              };
+            })
+          );
+        }
+        element = _el;
+        return of({
+          type: "init",
+          elements: [element]
+        });
+      } else if (element) {
+        destroyElement(element);
+      }
+      return of({
+        elements: []
+      });
+    })
+  );
+}
+
+// src/hooks/useProps.ts
+import { isSignal as isSignal3, signal } from "@signe/reactive";
+var useProps = (props, defaults = {}) => {
+  if (isSignal3(props)) {
+    return props();
+  }
+  const obj = {};
+  for (let key in props) {
+    const value = props[key];
+    obj[key] = isPrimitive(value) ? signal(value) : value;
+  }
+  for (let key in defaults) {
+    if (!(key in obj)) {
+      obj[key] = signal(defaults[key]);
+    }
+  }
+  return obj;
+};
+var useDefineProps = (props) => {
+  return (schema) => {
+    const rawProps = isSignal3(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] = isSignal3(validatedValue) ? validatedValue : signal(validatedValue);
+    }
+    return {
+      ...useProps(rawProps),
+      ...validatedProps
+    };
+  };
+};
+function validateType(key, value, types) {
+  if (value === void 0 || value === null) return;
+  const valueToCheck = isSignal3(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/components/DisplayObject.ts
+import { effect as effect3, signal as signal2 } from "@signe/reactive";
+import { DropShadowFilter } from "pixi-filters";
+import { BlurFilter, ObservablePoint } from "pixi.js";
+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, _DisplayObject_instances, applyFlexLayout_fn, flexRender_fn, setAlign_fn, setEdgeSize_fn, _a;
+  return _a = class extends extendClass {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _DisplayObject_instances);
+      __privateAdd(this, _canvasContext, null);
+      this.isFlex = false;
+      this.fullProps = {};
+      this.isMounted = false;
+      this._anchorPoints = new ObservablePoint(
+        { _onUpdate: () => {
+        } },
+        0,
+        0
+      );
+      this.isCustomAnchor = false;
+      this.displayWidth = signal2(0);
+      this.displayHeight = signal2(0);
+      this.overrideProps = [];
+    }
+    get yoga() {
+      return __privateGet(this, _canvasContext)?.Yoga;
+    }
+    get deltaRatio() {
+      return __privateGet(this, _canvasContext)?.scheduler?.tick.value.deltaRatio;
+    }
+    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]);
+        }
+      }
+    }
+    onMount({ parent, props }, index) {
+      __privateSet(this, _canvasContext, props.context);
+      this.node = this.yoga.Node.create();
+      if (parent) {
+        const instance = parent.componentInstance;
+        if (index === void 0) {
+          instance.addChild(this);
+        } else {
+          instance.addChildAt(this, index);
+        }
+        if (instance.layer) this.parentLayer = instance.layer;
+        this.isMounted = true;
+        this.effectSize(props.width, props.height);
+        this.onUpdate(props);
+        this.parent.node.insertChild(
+          this.node,
+          this.parent.node.getChildCount()
+        );
+        if (parent.props.flexDirection) {
+          this.parent.node.calculateLayout();
+          for (let child of this.parent.children) {
+            const { left, top } = child.getComputedLayout();
+            child.x = left;
+            child.y = top;
+          }
+        }
+      }
+    }
+    effectSize(width, height) {
+      const handleSize = (size, setter, parentSize) => {
+        if (typeof size === "string" && size.endsWith("%")) {
+          effect3(() => {
+            setter(parentSize() * (parseInt(size) / 100));
+            if (this.isFlex) {
+              __privateMethod(this, _DisplayObject_instances, applyFlexLayout_fn).call(this);
+            }
+          });
+        } else {
+          setter(+size);
+        }
+      };
+      if (width != void 0)
+        handleSize(width, this.setWidth.bind(this), this.parent.displayWidth);
+      if (height != void 0)
+        handleSize(
+          height,
+          this.setHeight.bind(this),
+          this.parent.displayHeight
+        );
+    }
+    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.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.shadow) {
+        let dropShadowFilter = currentFilters.find(
+          (filter) => filter instanceof DropShadowFilter
+        );
+        if (!dropShadowFilter) {
+          dropShadowFilter = new DropShadowFilter();
+          currentFilters.push(dropShadowFilter);
+        }
+        Object.assign(dropShadowFilter, props.shadow);
+      }
+      if (props.blur) {
+        let blurFilter = currentFilters.find(
+          (filter) => filter instanceof BlurFilter
+        );
+        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;
+      __privateMethod(this, _DisplayObject_instances, flexRender_fn).call(this, props);
+    }
+    onDestroy() {
+      super.destroy();
+      this.node?.freeRecursive();
+    }
+    getComputedLayout() {
+      return this.node.getComputedLayout();
+    }
+    applyComputedLayout() {
+      const layout = this.getComputedLayout();
+      this.x = layout.left;
+      this.y = layout.top;
+    }
+    calculateLayout() {
+      this.node.calculateLayout();
+    }
+    setFlexDirection(direction) {
+      const mapping = {
+        row: this.yoga.FLEX_DIRECTION_ROW,
+        column: this.yoga.FLEX_DIRECTION_COLUMN,
+        "row-reverse": this.yoga.FLEX_DIRECTION_ROW_REVERSE,
+        "column-reverse": this.yoga.FLEX_DIRECTION_COLUMN_REVERSE
+      };
+      this.node.setFlexDirection(mapping[direction]);
+    }
+    setFlexWrap(wrap) {
+      const mapping = {
+        wrap: this.yoga.WRAP_WRAP,
+        nowrap: this.yoga.WRAP_NO_WRAP,
+        "wrap-reverse": this.yoga.WRAP_WRAP_REVERSE
+      };
+      this.node.setFlexWrap(mapping[wrap]);
+    }
+    setAlignContent(align) {
+      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignContent", align);
+    }
+    setAlignSelf(align) {
+      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignSelf", align);
+    }
+    setAlignItems(align) {
+      __privateMethod(this, _DisplayObject_instances, setAlign_fn).call(this, "setAlignItems", align);
+    }
+    setJustifyContent(justifyContent) {
+      const mapping = {
+        "flex-start": this.yoga.JUSTIFY_FLEX_START,
+        "flex-end": this.yoga.JUSTIFY_FLEX_END,
+        center: this.yoga.JUSTIFY_CENTER,
+        "space-between": this.yoga.JUSTIFY_SPACE_BETWEEN,
+        "space-around": this.yoga.JUSTIFY_SPACE_AROUND
+      };
+      this.node.setJustifyContent(mapping[justifyContent]);
+    }
+    setPosition(position) {
+      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setPosition", position);
+    }
+    setX(x) {
+      x = x + this.getWidth() * this._anchorPoints.x;
+      if (!this.parent.isFlex) {
+        this.x = x;
+      }
+      this.node.setPosition(this.yoga.EDGE_LEFT, x);
+    }
+    setY(y) {
+      y = y + this.getHeight() * this._anchorPoints.y;
+      if (!this.parent.isFlex) {
+        this.y = y;
+      }
+      this.node.setPosition(this.yoga.EDGE_TOP, y);
+    }
+    setPadding(padding) {
+      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setPadding", padding);
+    }
+    setMargin(margin) {
+      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setMargin", margin);
+    }
+    setGap(gap) {
+      this.node.setGap(this.yoga.GAP_ALL, +gap);
+    }
+    setBorder(border) {
+      __privateMethod(this, _DisplayObject_instances, setEdgeSize_fn).call(this, "setBorder", border);
+    }
+    setPositionType(positionType) {
+      const mapping = {
+        relative: this.yoga.POSITION_TYPE_RELATIVE,
+        absolute: this.yoga.POSITION_TYPE_ABSOLUTE
+      };
+      this.node.setPositionType(mapping[positionType]);
+    }
+    calculateBounds() {
+      super.calculateBounds();
+      if (!this._geometry) return;
+      const bounds = this._geometry.bounds;
+      const width = Math.abs(bounds.minX - bounds.maxX);
+      const height = Math.abs(bounds.minY - bounds.maxY);
+    }
+    setWidth(width) {
+      this.displayWidth.set(width);
+      this.node?.setWidth(width);
+    }
+    setHeight(height) {
+      this.displayHeight.set(height);
+      this.node?.setHeight(height);
+    }
+    getWidth() {
+      return this.displayWidth();
+    }
+    getHeight() {
+      return this.displayHeight();
+    }
+  }, _canvasContext = new WeakMap(), _DisplayObject_instances = new WeakSet(), applyFlexLayout_fn = function() {
+    this.calculateLayout();
+    for (let child of this.children) {
+      const { left, top } = child.node.getComputedLayout();
+      child.x = left;
+      child.y = top;
+    }
+  }, flexRender_fn = function(props) {
+    if (!this.parent) return;
+    if (props.flexDirection || props.justifyContent) {
+      this.isFlex = true;
+      __privateMethod(this, _DisplayObject_instances, applyFlexLayout_fn).call(this);
+    }
+  }, setAlign_fn = function(methodName, align) {
+    const mapping = {
+      auto: this.yoga.ALIGN_AUTO,
+      "flex-start": this.yoga.ALIGN_FLEX_START,
+      "flex-end": this.yoga.ALIGN_FLEX_END,
+      center: this.yoga.ALIGN_CENTER,
+      stretch: this.yoga.ALIGN_STRETCH,
+      baseline: this.yoga.ALIGN_BASELINE,
+      "space-between": this.yoga.ALIGN_SPACE_BETWEEN,
+      "space-around": this.yoga.ALIGN_SPACE_AROUND
+    };
+    const method = this.node[methodName].bind(this.node);
+    method(mapping[align]);
+  }, setEdgeSize_fn = function(methodName, size) {
+    const method = this.node[methodName].bind(this.node);
+    if (size instanceof Array) {
+      if (size.length === 2) {
+        method(this.yoga.EDGE_VERTICAL, size[0]);
+        method(this.yoga.EDGE_HORIZONTAL, size[1]);
+      } else if (size.length === 4) {
+        method(this.yoga.EDGE_TOP, size[0]);
+        method(this.yoga.EDGE_RIGHT, size[1]);
+        method(this.yoga.EDGE_BOTTOM, size[2]);
+        method(this.yoga.EDGE_LEFT, size[3]);
+      }
+    } else {
+      method(this.yoga.EDGE_ALL, size);
+    }
+  }, _a;
+}
+
+// src/components/Canvas.ts
+registerComponent("Canvas", class Canvas extends DisplayObject(Container3) {
+});
+var Canvas2 = async (props = {}) => {
+  let { cursorStyles, width, height, class: className } = useProps(props);
+  const Yoga = await loadYoga();
+  if (!props.width) width = signal3(800);
+  if (!props.height) height = signal3(600);
+  const renderer = await autoDetectRenderer({
+    ...props,
+    width: width?.(),
+    height: height?.()
+  });
+  const canvasSize = signal3({
+    width: renderer.width,
+    height: renderer.height
+  });
+  props.isRoot = true;
+  const options = {
+    ...props,
+    context: {
+      Yoga,
+      renderer,
+      canvasSize
+    },
+    width: width?.(),
+    height: height?.()
+  };
+  if (!props.tick) {
+    options.context.tick = options.tick = signal3({
+      timestamp: 0,
+      deltaTime: 0,
+      frame: 0,
+      deltaRatio: 1
+    });
+  }
+  const canvasElement = createComponent("Canvas", options);
+  canvasElement.render = (rootElement) => {
+    const canvasEl = renderer.view.canvas;
+    globalThis.__PIXI_STAGE__ = canvasElement.componentInstance;
+    globalThis.__PIXI_RENDERER__ = renderer;
+    if (props.tickStart !== false) canvasElement.directives.tick.start();
+    effect4(() => {
+      canvasElement.propObservables.tick();
+      renderer.render(canvasElement.componentInstance);
+    });
+    if (cursorStyles) {
+      effect4(() => {
+        renderer.events.cursorStyles = cursorStyles();
+      });
+    }
+    if (className) {
+      effect4(() => {
+        canvasEl.classList.add(className());
+      });
+    }
+    const resizeCanvas = async () => {
+      let w, h2;
+      if (width?.() === "100%" && height?.() === "100%") {
+        const parent = canvasEl.parentElement;
+        w = parent ? parent.clientWidth : window.innerWidth;
+        h2 = parent ? parent.clientHeight : window.innerHeight;
+      } else {
+        w = width?.() ?? canvasEl.offsetWidth;
+        h2 = height?.() ?? canvasEl.offsetHeight;
+      }
+      renderer.resize(w, h2);
+      canvasSize.set({ width: w, height: h2 });
+      canvasElement.componentInstance.setWidth(w);
+      canvasElement.componentInstance.setHeight(h2);
+    };
+    window.addEventListener("resize", resizeCanvas);
+    const existingCanvas = rootElement.querySelector("canvas");
+    if (existingCanvas) {
+      rootElement.replaceChild(canvasEl, existingCanvas);
+    } else {
+      rootElement.appendChild(canvasEl);
+    }
+    resizeCanvas();
+  };
+  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;
+    }
+  }
+  onMount(args) {
+    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 effect5 } from "@signe/reactive";
+import { Graphics as PixiGraphics } from "pixi.js";
+var CanvasGraphics = class extends DisplayObject(PixiGraphics) {
+  onInit(props) {
+    super.onInit(props);
+    if (props.draw) {
+      effect5(() => {
+        this.clear();
+        props.draw?.(this);
+      });
+    }
+  }
+};
+registerComponent("Graphics", CanvasGraphics);
+function Graphics(props) {
+  return createComponent("Graphics", props);
+}
+function Rect(props) {
+  const { width, height, color, borderRadius, border } = useProps(props, {
+    borderRadius: null,
+    border: null
+  });
+  return Graphics({
+    draw: (g) => {
+      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) => drawShape(g, "ellipse", { width, height, color, border }),
+    ...props
+  });
+}
+function Triangle(props) {
+  const { width, height, color, border } = useProps(props, {
+    border: null,
+    color: "#000"
+  });
+  return Graphics({
+    draw: (g) => {
+      g.moveTo(0, height());
+      g.lineTo(width() / 2, 0);
+      g.lineTo(width(), height());
+      g.lineTo(0, height());
+      g.fill(color());
+      if (border) {
+        g.stroke(border);
+      }
+    },
+    ...props
+  });
+}
+function Svg(props) {
+  return Graphics({
+    draw: (g) => g.svg(props.svg),
+    ...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();
+  }
+  onMount(params) {
+    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) {
+  }
+  onDestroy() {
+    super.onDestroy();
+    this.emitter?.destroy();
+    this.emitter = null;
+    this.subscriptionTick.unsubscribe();
+  }
+};
+registerComponent("ParticlesEmitter", CanvasParticlesEmitter);
+function ParticlesEmitter(props) {
+  return createComponent("ParticlesEmitter", props);
+}
+
+// src/components/Sprite.ts
+import { computed, effect as effect7, isSignal as isSignal4 } from "@signe/reactive";
+import {
+  Assets,
+  Container as Container5,
+  Sprite as PixiSprite,
+  Rectangle as Rectangle2,
+  Texture as Texture2
+} from "pixi.js";
+
+// src/engine/animation.ts
+import { effect as effect6, signal as signal4 } from "@signe/reactive";
+import { animate as animatePopmotion } from "popmotion";
+function isAnimatedSignal(signal6) {
+  return signal6.animatedState !== void 0;
+}
+function animatedSignal(initialValue, options = {}) {
+  const state = {
+    current: initialValue,
+    start: initialValue,
+    end: initialValue
+  };
+  let animation;
+  const publicSignal = signal4(initialValue);
+  const privateSignal = signal4(state);
+  effect6(() => {
+    const currentState = privateSignal();
+    publicSignal.set(currentState.current);
+  });
+  function animatedSignal2(newValue) {
+    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,
+      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 = (newValue) => {
+    animatedSignal2(newValue);
+  };
+  return fn;
+}
+
+// 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.currentAnimationContainer = null;
+  }
+  async createTextures(options) {
+    const { width, height, framesHeight, framesWidth, image, offset } = options;
+    const texture = await Assets.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 Texture2({
+            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 ?? {};
+    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 (isSignal4(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;
+    });
+    effect7(() => {
+      const _isMoving = isMoving();
+      if (!this.isMounted) return;
+      if (_isMoving) {
+        this.sheetCurrentAnimation = "walk" /* Walk */;
+      } else {
+        this.sheetCurrentAnimation = "stand" /* Stand */;
+      }
+      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+    });
+    super.onMount(params);
+  }
+  async onUpdate(props) {
+    super.onUpdate(props);
+    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) {
+      this.texture = await Assets.load(this.fullProps.image);
+    } else if (props.texture) {
+      this.texture = props.texture;
+    }
+    if (props.rectangle !== void 0) {
+      const { x, y, width, height } = props.rectangle?.value ?? props.rectangle;
+      const texture = await Assets.load(this.fullProps.image);
+      this.texture = new Texture2({
+        source: texture.source,
+        frame: new Rectangle2(x, y, width, height)
+      });
+    }
+  }
+  onDestroy() {
+    super.onDestroy();
+    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) {
+    }
+    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/Text.ts
+import { Text as PixiText } from "pixi.js";
+
+// src/engine/trigger.ts
+import { effect as effect8, signal as signal5 } from "@signe/reactive";
+function isTrigger(arg) {
+  return arg?.start && arg?.listen;
+}
+function trigger(globalConfig) {
+  const _signal = signal5({
+    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 = {};
+  }
+  onMount(args) {
+    super.onMount(args);
+    const { props } = args;
+    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) {
+          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) {
+      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;
+  }
+  onDestroy() {
+    super.onDestroy();
+    this.subscriptionTick.unsubscribe();
+  }
+};
+registerComponent("Text", CanvasText);
+function Text(props) {
+  return createComponent("Text", props);
+}
+
+// src/components/TilingSprite.ts
+import { TilingSprite as PixiTilingSprite, Texture as Texture3 } from "pixi.js";
+var CanvasTilingSprite = class extends DisplayObject(PixiTilingSprite) {
+  onUpdate(props) {
+    super.onUpdate(props);
+    if (props.image) {
+      this.texture = Texture3.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) {
+      const camelCaseEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      if (props[camelCaseEvent]) {
+        this.on(event, props[camelCaseEvent]);
+      }
+    }
+  }
+  onMount(element) {
+    super.onMount(element);
+    const { tick: tick2, renderer, canvasSize } = element.props.context;
+    let isDragging = false;
+    effect9(() => {
+      this.screenWidth = canvasSize().width;
+      this.screenHeight = canvasSize().height;
+    });
+    renderer.events.domElement.addEventListener(
+      "wheel",
+      this.input.wheelFunction
+    );
+    this.options.events = renderer.events;
+    this.tickSubscription = tick2.observable.subscribe(({ value }) => {
+      this.update(value.timestamp);
+    });
+    element.props.context.viewport = this;
+    this.updateViewportSettings(element.props);
+  }
+  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.clamp) {
+      this.clamp(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);
+      }
+    }
+  }
+  onDestroy() {
+    super.onDestroy();
+    this.tickSubscription.unsubscribe();
+  }
+};
+registerComponent("Viewport", CanvasViewport);
+function Viewport(props) {
+  return createComponent("Viewport", props);
+}
+
+// src/components/NineSliceSprite.ts
+import { Assets as Assets2, 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 Assets2.load(value);
+        } else if (key in this) {
+          this[key] = value;
+        }
+      }
+    }
+  }
+};
+registerComponent("NineSliceSprite", CanvasNineSliceSprite);
+function NineSliceSprite(props) {
+  return createComponent("NineSliceSprite", props);
+}
+
+// src/engine/bootstrap.ts
+var bootstrapCanvas = async (rootElement, canvas) => {
+  const canvasElement = await h(canvas);
+  if (canvasElement.tag != "Canvas") {
+    throw new Error("Canvas is required");
+  }
+  canvasElement.render(rootElement);
+  return canvasElement;
+};
+
+// 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 Texture5, 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 Texture5({
+        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 } from "rxjs";
+export {
+  Canvas2 as Canvas,
+  Circle,
+  Container4 as Container,
+  DisplayObject,
+  EVENTS2 as EVENTS,
+  Easing,
+  Ellipse,
+  Graphics,
+  Howler,
+  NineSliceSprite,
+  ParticlesEmitter,
+  RadialGradient,
+  Rect,
+  Scene,
+  Sprite2 as Sprite,
+  Text,
+  TilingSprite,
+  Triangle,
+  utils_exports as Utils,
+  Viewport,
+  animatedSignal,
+  bootstrapCanvas,
+  cond,
+  createComponent,
+  currentSubscriptionsTracker,
+  h,
+  isAnimatedSignal,
+  isElement,
+  isObservable,
+  isPrimitive,
+  isTrigger,
+  loop,
+  mount,
+  mountTracker,
+  on,
+  registerComponent,
+  Svg as svg,
+  tick,
+  trigger,
+  useDefineProps,
+  useProps
+};
+//# sourceMappingURL=index.js.map