canvasengine 2.0.0-beta.4 → 2.0.0-beta.40

package/dist/index.js

@@ -1,3042 +1,82 @@
-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";
+import { h as a } from "./index-gb763Hyx.js";
+import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-gb763Hyx.js";
+const e = a.Howler;
 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
+  r as ArraySubject,
+  o as Button,
+  n as ButtonState,
+  l as Canvas,
+  c as Circle,
+  p as Container,
+  S as ControlsBase,
+  m as ControlsDirective,
+  u as DOMContainer,
+  d as DOMElement,
+  g as DisplayObject,
+  b as Drag,
+  C as Drop,
+  k as EVENTS,
+  h as Easing,
+  j as Ellipse,
+  T as Flash,
+  w as GamepadControls,
+  D as Graphics,
+  E as Howl,
+  e as Howler,
+  f as Input,
+  v as Joystick,
+  y as JoystickControls,
+  O as KeyboardControls,
+  P as Mesh,
+  V as NineSliceSprite,
+  x as ObjectSubject,
+  A as ParticlesEmitter,
+  B as RadialGradient,
+  G as Rect,
+  H as Scene,
+  M as Scheduler,
+  F as Shake,
+  J as Sound,
+  N as Sprite,
+  R as Svg,
+  q as Text,
+  z as TilingSprite,
+  I as Transition,
+  K as Triangle,
+  U as Utils,
+  L as Video,
+  Q as Viewport,
+  W as ViewportFollow,
+  X as animatedSequence,
+  Y as animatedSignal,
+  Z as bootstrapCanvas,
+  _ as computed,
+  $ as cond,
+  aa as createComponent,
+  sa as currentSubscriptionsTracker,
+  ea as effect,
+  ta as h,
+  ia as isAnimatedSignal,
+  ra as isArraySubject,
+  oa as isComputed,
+  na as isElement,
+  la as isElementFrozen,
+  ca as isObjectSubject,
+  pa as isObservable,
+  Sa as isPrimitive,
+  ma as isSignal,
+  ua as isTrigger,
+  da as linkedSignal,
+  ga as loop,
+  ba as mount,
+  Ca as mountTracker,
+  ka as on,
+  ha as registerComponent,
+  ja as signal,
+  Ta as tick,
+  wa as trigger,
+  Da as untracked,
+  Ea as useDefineProps,
+  fa as useProps
+};
+//# sourceMappingURL=index.js.map