@rb-games/core 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,4778 @@
+import { Rectangle, Color, Texture, Sprite, Graphics, Container, Text, ColorMatrixFilter, Assets, Point } from 'pixi.js';
+import { merge } from 'lodash';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  __defProp(target, "default", { value: mod, enumerable: true }) ,
+  mod
+));
+
+// ../../node_modules/eventemitter3/index.js
+var require_eventemitter3 = __commonJS({
+  "../../node_modules/eventemitter3/index.js"(exports, module) {
+    var has = Object.prototype.hasOwnProperty;
+    var prefix = "~";
+    function Events() {
+    }
+    if (Object.create) {
+      Events.prototype = /* @__PURE__ */ Object.create(null);
+      if (!new Events().__proto__) prefix = false;
+    }
+    function EE(fn, context, once) {
+      this.fn = fn;
+      this.context = context;
+      this.once = once || false;
+    }
+    function addListener(emitter, event, fn, context, once) {
+      if (typeof fn !== "function") {
+        throw new TypeError("The listener must be a function");
+      }
+      var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
+      if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
+      else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
+      else emitter._events[evt] = [emitter._events[evt], listener];
+      return emitter;
+    }
+    function clearEvent(emitter, evt) {
+      if (--emitter._eventsCount === 0) emitter._events = new Events();
+      else delete emitter._events[evt];
+    }
+    function EventEmitter2() {
+      this._events = new Events();
+      this._eventsCount = 0;
+    }
+    EventEmitter2.prototype.eventNames = function eventNames() {
+      var names = [], events, name;
+      if (this._eventsCount === 0) return names;
+      for (name in events = this._events) {
+        if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
+      }
+      if (Object.getOwnPropertySymbols) {
+        return names.concat(Object.getOwnPropertySymbols(events));
+      }
+      return names;
+    };
+    EventEmitter2.prototype.listeners = function listeners(event) {
+      var evt = prefix ? prefix + event : event, handlers = this._events[evt];
+      if (!handlers) return [];
+      if (handlers.fn) return [handlers.fn];
+      for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
+        ee[i] = handlers[i].fn;
+      }
+      return ee;
+    };
+    EventEmitter2.prototype.listenerCount = function listenerCount(event) {
+      var evt = prefix ? prefix + event : event, listeners = this._events[evt];
+      if (!listeners) return 0;
+      if (listeners.fn) return 1;
+      return listeners.length;
+    };
+    EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+      var evt = prefix ? prefix + event : event;
+      if (!this._events[evt]) return false;
+      var listeners = this._events[evt], len = arguments.length, args, i;
+      if (listeners.fn) {
+        if (listeners.once) this.removeListener(event, listeners.fn, void 0, true);
+        switch (len) {
+          case 1:
+            return listeners.fn.call(listeners.context), true;
+          case 2:
+            return listeners.fn.call(listeners.context, a1), true;
+          case 3:
+            return listeners.fn.call(listeners.context, a1, a2), true;
+          case 4:
+            return listeners.fn.call(listeners.context, a1, a2, a3), true;
+          case 5:
+            return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
+          case 6:
+            return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+        }
+        for (i = 1, args = new Array(len - 1); i < len; i++) {
+          args[i - 1] = arguments[i];
+        }
+        listeners.fn.apply(listeners.context, args);
+      } else {
+        var length = listeners.length, j;
+        for (i = 0; i < length; i++) {
+          if (listeners[i].once) this.removeListener(event, listeners[i].fn, void 0, true);
+          switch (len) {
+            case 1:
+              listeners[i].fn.call(listeners[i].context);
+              break;
+            case 2:
+              listeners[i].fn.call(listeners[i].context, a1);
+              break;
+            case 3:
+              listeners[i].fn.call(listeners[i].context, a1, a2);
+              break;
+            case 4:
+              listeners[i].fn.call(listeners[i].context, a1, a2, a3);
+              break;
+            default:
+              if (!args) for (j = 1, args = new Array(len - 1); j < len; j++) {
+                args[j - 1] = arguments[j];
+              }
+              listeners[i].fn.apply(listeners[i].context, args);
+          }
+        }
+      }
+      return true;
+    };
+    EventEmitter2.prototype.on = function on(event, fn, context) {
+      return addListener(this, event, fn, context, false);
+    };
+    EventEmitter2.prototype.once = function once(event, fn, context) {
+      return addListener(this, event, fn, context, true);
+    };
+    EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
+      var evt = prefix ? prefix + event : event;
+      if (!this._events[evt]) return this;
+      if (!fn) {
+        clearEvent(this, evt);
+        return this;
+      }
+      var listeners = this._events[evt];
+      if (listeners.fn) {
+        if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
+          clearEvent(this, evt);
+        }
+      } else {
+        for (var i = 0, events = [], length = listeners.length; i < length; i++) {
+          if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
+            events.push(listeners[i]);
+          }
+        }
+        if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
+        else clearEvent(this, evt);
+      }
+      return this;
+    };
+    EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
+      var evt;
+      if (event) {
+        evt = prefix ? prefix + event : event;
+        if (this._events[evt]) clearEvent(this, evt);
+      } else {
+        this._events = new Events();
+        this._eventsCount = 0;
+      }
+      return this;
+    };
+    EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
+    EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
+    EventEmitter2.prefixed = prefix;
+    EventEmitter2.EventEmitter = EventEmitter2;
+    if ("undefined" !== typeof module) {
+      module.exports = EventEmitter2;
+    }
+  }
+});
+
+// ../../node_modules/eventemitter3/index.mjs
+var import_index = __toESM(require_eventemitter3());
+
+// ui/behaviors/ButtonBehavior.ts
+var ButtonBehavior = class _ButtonBehavior extends import_index.default {
+  _view = null;
+  _enabled = true;
+  _isPressed = false;
+  _isHolding = false;
+  _pointerDownOnThis = false;
+  _isOver = false;
+  // 👈 isOver added
+  _holdTimer = null;
+  _holdInterval = null;
+  _holdDelay;
+  _holdIntervalTime;
+  _cursor = "pointer";
+  // Toggle properties
+  _isToggle = false;
+  _selected = false;
+  _allowHoldWhenToggle = false;
+  _holdMode;
+  // Track if events are bound to current view
+  _eventsBound = false;
+  // Static factory methods
+  static withView(view, options = {}) {
+    const button = new _ButtonBehavior(options);
+    button.attachView(view);
+    return button;
+  }
+  // Method overloads - now only takes options
+  constructor(options = {}) {
+    super();
+    this._holdDelay = options.holdDelay || 500;
+    this._holdIntervalTime = options.holdInterval || 100;
+    this._holdMode = options.holdMode ?? "none";
+    this._cursor = options.cursor || "pointer";
+    this._isToggle = options.isToggle || false;
+    this._selected = options.selected || false;
+    this._allowHoldWhenToggle = options.allowHoldWhenToggle || false;
+    if (options.view) {
+      this.attachView(options.view);
+    }
+  }
+  // View Management Methods
+  attachView(view) {
+    if (this._view === view) return;
+    if (this._view) {
+      this.detachView();
+    }
+    this._view = view;
+    this._setupInteractivity();
+    this._bindEvents();
+    this._setupDestroyListener();
+    this._eventsBound = true;
+    this.emit("viewAttached", view);
+    this._emitStateChange();
+  }
+  detachView() {
+    if (!this._view) return;
+    const oldView = this._view;
+    this._unbindEvents();
+    this._view = null;
+    this._eventsBound = false;
+    this._stopHoldTimer();
+    this._isPressed = false;
+    this._isHolding = false;
+    this._pointerDownOnThis = false;
+    this._isOver = false;
+    this.emit("viewDetached", oldView);
+  }
+  get view() {
+    return this._view;
+  }
+  get hasView() {
+    return this._view !== null;
+  }
+  _setupInteractivity() {
+    if (!this._view) return;
+    this._view.eventMode = "static";
+    this._view.cursor = this._cursor;
+  }
+  _bindEvents() {
+    if (!this._view) return;
+    this._view.on("pointerdown", this._onPointerDown.bind(this));
+    this._view.on("pointerup", this._onPointerUp.bind(this));
+    this._view.on("pointerupoutside", this._onPointerUp.bind(this));
+    this._view.on("pointerover", this._onPointerOver.bind(this));
+    this._view.on("pointerout", this._onPointerOut.bind(this));
+    this._view.on("wheel", this._onWheel.bind(this));
+  }
+  _unbindEvents() {
+    if (!this._view || !this._eventsBound) return;
+    this._view.off("pointerdown", this._onPointerDown.bind(this));
+    this._view.off("pointerup", this._onPointerUp.bind(this));
+    this._view.off("pointerupoutside", this._onPointerUp.bind(this));
+    this._view.off("pointerover", this._onPointerOver.bind(this));
+    this._view.off("pointerout", this._onPointerOut.bind(this));
+    this._view.off("wheel", this._onWheel.bind(this));
+    this._view.off("destroyed", this._onViewDestroyed.bind(this));
+  }
+  _setupDestroyListener() {
+    if (!this._view) return;
+    this._view.on("destroyed", this._onViewDestroyed.bind(this));
+  }
+  _emitStateChange() {
+    const state = {
+      enabled: this._enabled,
+      pressed: this._isPressed,
+      holding: this._isHolding,
+      selected: this._selected,
+      cursor: this._cursor,
+      over: this._isOver,
+      state: this._calculateStateString()
+      // type-safe
+    };
+    this.emit("stateChanged", state);
+  }
+  _onViewDestroyed() {
+    this._stopHoldTimer();
+    this._isPressed = false;
+    this._isHolding = false;
+    this._pointerDownOnThis = false;
+    this._isOver = false;
+    this.removeAllListeners();
+  }
+  _onPointerDown(event) {
+    if (!this._enabled || !this._view) return;
+    this._isPressed = true;
+    this._pointerDownOnThis = true;
+    if (this._holdMode !== "none" && (!this._isToggle || this._allowHoldWhenToggle)) {
+      this._startHoldTimer();
+    }
+    this.emit("down", event);
+    this._emitStateChange();
+  }
+  _onPointerUp(event) {
+    if (!this._enabled || !this._view) return;
+    if (!this._pointerDownOnThis) {
+      return;
+    }
+    this._isPressed = false;
+    this._pointerDownOnThis = false;
+    this._stopHoldTimer();
+    this.emit("up", event);
+    if (this._isHolding) {
+      this._isHolding = false;
+      this.emit("holdEnd");
+      if (this._holdMode === "clickThrough") {
+        if (this._isToggle) {
+          this._handleToggle();
+        } else {
+          this.emit("click");
+        }
+      }
+    } else if (this._enabled) {
+      if (this._isToggle) {
+        this._handleToggle();
+      } else {
+        this.emit("click");
+      }
+    }
+    this._emitStateChange();
+  }
+  _handleToggle() {
+    this._selected = !this._selected;
+    this.emit("toggle", this._selected);
+    if (this._selected) {
+      this.emit("select");
+    } else {
+      this.emit("deselect");
+    }
+    this.emit("click");
+  }
+  _onPointerOver(event) {
+    if (!this._enabled || !this._view) return;
+    this._isOver = true;
+    this.emit("over", event);
+    this._emitStateChange();
+  }
+  _onPointerOut(event) {
+    if (!this._enabled || !this._view) return;
+    this._isOver = false;
+    this.emit("out", event);
+    this._emitStateChange();
+  }
+  _onWheel(event) {
+    if (!this._enabled || !this._view) return;
+    this.emit("wheel", event);
+  }
+  _startHoldTimer() {
+    this._stopHoldTimer();
+    this._holdTimer = setTimeout(() => {
+      if (this._isPressed && this._enabled) {
+        this._isHolding = true;
+        this.emit("holdStart");
+        this.emit("hold");
+        this._holdInterval = setInterval(() => {
+          if (this._isHolding && this._enabled) {
+            this.emit("hold");
+          }
+        }, this._holdIntervalTime);
+      }
+    }, this._holdDelay);
+  }
+  _stopHoldTimer() {
+    if (this._holdTimer) {
+      clearTimeout(this._holdTimer);
+      this._holdTimer = null;
+    }
+    if (this._holdInterval) {
+      clearInterval(this._holdInterval);
+      this._holdInterval = null;
+    }
+  }
+  // Properties
+  get holdMode() {
+    return this._holdMode;
+  }
+  set holdMode(value) {
+    this._holdMode = value;
+  }
+  get isEnabled() {
+    return this._enabled;
+  }
+  set isEnabled(value) {
+    this._enabled = value;
+    if (this._view) {
+      this._view.eventMode = value ? "static" : "none";
+      this._view.cursor = value ? this._cursor : "default";
+    }
+    if (!value) {
+      this._stopHoldTimer();
+      this._isPressed = false;
+      this._isHolding = false;
+      this._pointerDownOnThis = false;
+      this._isOver = false;
+    }
+    this._emitStateChange();
+  }
+  get isPressed() {
+    return this._isPressed;
+  }
+  get isHolding() {
+    return this._isHolding;
+  }
+  // Toggle properties
+  get isToggle() {
+    return this._isToggle;
+  }
+  set isToggle(value) {
+    this._isToggle = value;
+    if (!value) {
+      this._selected = false;
+    }
+  }
+  get isSelected() {
+    return this._selected;
+  }
+  set isSelected(value) {
+    if (this._selected !== value) {
+      this._selected = value;
+      this.emit("toggle", this._selected);
+      if (this._selected) {
+        this.emit("select");
+      } else {
+        this.emit("deselect");
+      }
+      this._emitStateChange();
+    }
+  }
+  get allowHoldWhenToggle() {
+    return this._allowHoldWhenToggle;
+  }
+  set allowHoldWhenToggle(value) {
+    this._allowHoldWhenToggle = value;
+  }
+  // Hold timing properties
+  get holdDelay() {
+    return this._holdDelay;
+  }
+  set holdDelay(value) {
+    this._holdDelay = value;
+  }
+  get holdInterval() {
+    return this._holdIntervalTime;
+  }
+  set holdInterval(value) {
+    this._holdIntervalTime = value;
+  }
+  // Cursor property
+  get cursor() {
+    return this._cursor;
+  }
+  set cursor(value) {
+    this._cursor = value;
+    if (this._view && this._enabled) {
+      this._view.cursor = value;
+    }
+    this._emitStateChange();
+  }
+  // Toggle methods
+  toggle() {
+    if (this._isToggle) {
+      this.isSelected = !this._selected;
+    }
+  }
+  select() {
+    if (this._isToggle) {
+      this.isSelected = true;
+    }
+  }
+  deselect() {
+    if (this._isToggle) {
+      this.isSelected = false;
+    }
+  }
+  /**
+   * Programmatically simulates a pointer down on this button.
+   * Triggers press state, hold timer, and visual feedback — same as a real pointer down.
+   * Does NOT emit the `down` event (which requires a FederatedPointerEvent).
+   * Use together with `simulateUp()` for full keyboard/gamepad/test bindings.
+   */
+  simulateDown() {
+    if (!this._enabled) return;
+    this._isPressed = true;
+    this._pointerDownOnThis = true;
+    if (this._holdMode !== "none" && (!this._isToggle || this._allowHoldWhenToggle)) {
+      this._startHoldTimer();
+    }
+    this._emitStateChange();
+  }
+  /**
+   * Programmatically simulates a pointer up on this button.
+   * Triggers click (or holdEnd/toggle) and visual feedback — same as a real pointer up.
+   * Does NOT emit the `up` event (which requires a FederatedPointerEvent).
+   * Use together with `simulateDown()` for full keyboard/gamepad/test bindings.
+   */
+  simulateUp() {
+    if (!this._enabled) return;
+    if (!this._pointerDownOnThis) return;
+    this._isPressed = false;
+    this._pointerDownOnThis = false;
+    this._stopHoldTimer();
+    if (this._isHolding) {
+      this._isHolding = false;
+      this.emit("holdEnd");
+      if (this._holdMode === "clickThrough") {
+        if (this._isToggle) {
+          this._handleToggle();
+        } else {
+          this.emit("click");
+        }
+      }
+    } else if (this._enabled) {
+      if (this._isToggle) {
+        this._handleToggle();
+      } else {
+        this.emit("click");
+      }
+    }
+    this._emitStateChange();
+  }
+  destroy() {
+    this._stopHoldTimer();
+    if (this._view) {
+      this._unbindEvents();
+    }
+    this._view = null;
+    this._eventsBound = false;
+    this.removeAllListeners();
+  }
+  _calculateStateString() {
+    if (!this._enabled) {
+      if (this._isToggle && this._selected) return "selected_disabled";
+      return "disabled";
+    }
+    if (this._isToggle && this._selected) {
+      if (this._isPressed) return "selected_down";
+      if (this._isOver) return "selected_over";
+      return "selected_up";
+    }
+    if (this._isPressed) return "down";
+    if (this._isOver) return "over";
+    return "up";
+  }
+};
+var ScrollbarBehavior = class _ScrollbarBehavior extends import_index.default {
+  _trackView = null;
+  _knobView = null;
+  _enabled = true;
+  _isDragging = false;
+  _dragStartPosition = 0;
+  _dragStartValue = 0;
+  _dragOffset = 0;
+  // Configuration
+  _orientation;
+  _min;
+  _max;
+  _value;
+  _step;
+  _margin;
+  // Wheel options
+  _wheelStep;
+  _enableWheel;
+  // Cursor options
+  _trackCursor;
+  _knobCursor;
+  // Track if events are bound
+  _eventsBound = false;
+  // Arrow function event handlers for proper cleanup
+  _onTrackPointerDown = (event) => this._handleTrackPointerDown(event);
+  _onKnobPointerDown = (event) => this._handleKnobPointerDown(event);
+  _onKnobPointerUp = (event) => this._handleKnobPointerUp(event);
+  _onKnobPointerUpOutside = (event) => this._handleKnobPointerUp(event);
+  _onGlobalPointerMove = (event) => this._handleGlobalPointerMove(event);
+  _onTrackWheel = (event) => this._handleWheel(event);
+  _onKnobWheel = (event) => this._handleWheel(event);
+  // Static factory methods
+  static withViews(trackView, knobView, options = {}) {
+    const scrollbar = new _ScrollbarBehavior(options);
+    scrollbar.attachViews(trackView, knobView);
+    return scrollbar;
+  }
+  constructor(options = {}) {
+    var _a, _b;
+    super();
+    this._orientation = options.orientation || "horizontal";
+    this._margin = {
+      start: ((_a = options.margin) == null ? void 0 : _a.start) || 0,
+      end: ((_b = options.margin) == null ? void 0 : _b.end) || 0
+    };
+    this._min = options.min || 0;
+    this._max = options.max || 100;
+    this._value = options.value || 0;
+    this._step = options.step || 1;
+    this._wheelStep = options.wheelStep || this._step;
+    this._enableWheel = options.enableWheel !== false;
+    this._trackCursor = options.trackCursor || "pointer";
+    this._knobCursor = options.knobCursor || "grab";
+  }
+  // View Management Methods
+  attachTrackView(trackView) {
+    if (this._trackView === trackView) return;
+    if (this._trackView) {
+      this._unbindTrackEvents();
+    }
+    this._trackView = trackView;
+    this._setupTrackInteractivity();
+    this._bindTrackEvents();
+    this._updateEventsBoundState();
+    this._emitStateChange();
+  }
+  attachKnobView(knobView) {
+    if (this._knobView === knobView) return;
+    if (this._knobView) {
+      this._unbindKnobEvents();
+    }
+    this._knobView = knobView;
+    this._setupKnobInteractivity();
+    this._bindKnobEvents();
+    if (this.hasViews) {
+      this._updateKnobPosition();
+    }
+    this._updateEventsBoundState();
+    this._emitStateChange();
+  }
+  attachViews(trackView, knobView) {
+    if (this._trackView === trackView && this._knobView === knobView) return;
+    const hadViews = this.hasViews;
+    const trackChanged = this._trackView !== trackView;
+    const knobChanged = this._knobView !== knobView;
+    if (trackChanged) {
+      this.attachTrackView(trackView);
+    }
+    if (knobChanged) {
+      this.attachKnobView(knobView);
+    }
+    if (this.hasViews && (trackChanged || knobChanged)) {
+      this.emit("viewAttached", trackView, knobView);
+      if (!hadViews) {
+        this._emitStateChange();
+      }
+    }
+  }
+  detachViews() {
+    if (!this.hasViews) return;
+    const oldTrackView = this._trackView;
+    const oldKnobView = this._knobView;
+    this._unbindAllEvents();
+    this._trackView = null;
+    this._knobView = null;
+    this._eventsBound = false;
+    this._isDragging = false;
+    if (oldKnobView && oldTrackView) {
+      this.emit("viewDetached", oldTrackView, oldKnobView);
+    }
+    this._emitStateChange();
+  }
+  get trackView() {
+    return this._trackView;
+  }
+  get knobView() {
+    return this._knobView;
+  }
+  get hasViews() {
+    return this._trackView !== null && this._knobView !== null;
+  }
+  _setupTrackInteractivity() {
+    if (!this._trackView) return;
+    this._trackView.eventMode = "static";
+    this._trackView.cursor = this._trackCursor;
+    const trackSize = this._getTrackSize();
+    const trackThickness = this._getTrackThickness();
+    if (this._orientation === "horizontal") {
+      this._trackView.hitArea = new Rectangle(0, 0, trackSize, trackThickness);
+    } else {
+      this._trackView.hitArea = new Rectangle(0, 0, trackThickness, trackSize);
+    }
+  }
+  _setupKnobInteractivity() {
+    if (!this._knobView) return;
+    this._knobView.eventMode = "static";
+    this._knobView.cursor = this._knobCursor;
+  }
+  // --- Event binding section ---
+  _bindTrackEvents() {
+    if (!this._trackView) return;
+    this._trackView.on("pointerdown", this._onTrackPointerDown);
+    this._trackView.on("pointerup", (e) => this.emit("trackUp", e));
+    this._trackView.on("pointerover", (e) => this.emit("trackOver", e));
+    this._trackView.on("pointerout", (e) => this.emit("trackOut", e));
+    this._trackView.on("click", (e) => this.emit("trackClick", e));
+    if (this._enableWheel) {
+      this._trackView.on("wheel", this._onTrackWheel);
+    }
+  }
+  _unbindTrackEvents() {
+    if (!this._trackView) return;
+    this._trackView.off("pointerdown", this._onTrackPointerDown);
+    this._trackView.off("wheel", this._onTrackWheel);
+  }
+  _bindKnobEvents() {
+    if (!this._knobView) return;
+    this._knobView.on("pointerdown", this._onKnobPointerDown);
+    this._knobView.on("pointerup", this._onKnobPointerUp);
+    this._knobView.on("pointerupoutside", this._onKnobPointerUpOutside);
+    this._knobView.on("pointerover", (e) => this.emit("knobOver", e));
+    this._knobView.on("pointerout", (e) => this.emit("knobOut", e));
+    this._knobView.on("click", (e) => this.emit("knobClick", e));
+    this._knobView.on("pointerdown", (e) => this.emit("knobDown", e));
+    this._knobView.on("pointerup", (e) => this.emit("knobUp", e));
+    if (this._enableWheel) {
+      this._knobView.on("wheel", this._onKnobWheel);
+    }
+  }
+  _unbindKnobEvents() {
+    if (!this._knobView) return;
+    this._knobView.off("pointerdown", this._onKnobPointerDown);
+    this._knobView.off("pointerup", this._onKnobPointerUp);
+    this._knobView.off("pointerupoutside", this._onKnobPointerUpOutside);
+    this._knobView.off("wheel", this._onKnobWheel);
+    this._knobView.off("globalpointermove", this._onGlobalPointerMove);
+  }
+  _unbindAllEvents() {
+    this._unbindTrackEvents();
+    this._unbindKnobEvents();
+  }
+  _updateEventsBoundState() {
+    this._eventsBound = this.hasViews;
+  }
+  // Event Handlers
+  _handleTrackPointerDown(event) {
+    if (!this._enabled || !this._trackView) return;
+    const localPosition = event.getLocalPosition(this._trackView);
+    const clickPosition = this._orientation === "horizontal" ? localPosition.x : localPosition.y;
+    const effectiveArea = this._getEffectiveTrackArea();
+    const effectiveClickPosition = clickPosition - effectiveArea.start;
+    const percentage = Math.max(0, Math.min(1, effectiveClickPosition / effectiveArea.size));
+    const newValue = this._min + (this._max - this._min) * percentage;
+    this.emit("click", { x: localPosition.x, y: localPosition.y }, percentage);
+    this.value = newValue;
+    this.emit("scroll", this._value, this.percentage);
+  }
+  _handleKnobPointerDown(event) {
+    if (!this._enabled || !this._knobView || !this._trackView) return;
+    this._isDragging = true;
+    this._knobView.cursor = "grabbing";
+    const knobLocalPosition = event.getLocalPosition(this._knobView);
+    this._dragOffset = this._orientation === "horizontal" ? knobLocalPosition.x : knobLocalPosition.y;
+    const trackLocalPosition = event.getLocalPosition(this._trackView);
+    this._dragStartPosition = this._orientation === "horizontal" ? trackLocalPosition.x : trackLocalPosition.y;
+    this._dragStartValue = this._value;
+    this._knobView.on("globalpointermove", this._onGlobalPointerMove);
+    this.emit("scrollStart", this._value);
+    this._emitStateChange();
+  }
+  _handleKnobPointerUp(event) {
+    if (!this._isDragging || !this._knobView) return;
+    this._isDragging = false;
+    this._knobView.cursor = this._knobCursor;
+    this._knobView.off("globalpointermove", this._onGlobalPointerMove);
+    this.emit("scrollEnd", this._value);
+    this._emitStateChange();
+  }
+  _handleGlobalPointerMove(event) {
+    if (!this._isDragging || !this._enabled || !this._trackView) return;
+    const localPosition = event.getLocalPosition(this._trackView);
+    const currentPosition = this._orientation === "horizontal" ? localPosition.x : localPosition.y;
+    const adjustedPosition = currentPosition - this._dragOffset;
+    const deltaPosition = adjustedPosition - (this._dragStartPosition - this._dragOffset);
+    const effectiveArea = this._getEffectiveTrackArea();
+    const deltaValue = deltaPosition / effectiveArea.size * (this._max - this._min);
+    const newValue = this._dragStartValue + deltaValue;
+    this.value = newValue;
+    this.emit("scroll", this._value, this.percentage);
+  }
+  _handleWheel(event) {
+    if (!this._enabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const delta = event.deltaY || event.wheelDelta || event.detail;
+    let scrollAmount = 0;
+    if (delta > 0) {
+      scrollAmount = this._wheelStep;
+    } else if (delta < 0) {
+      scrollAmount = -this._wheelStep;
+    }
+    if (scrollAmount !== 0) {
+      const newValue = this._value + scrollAmount;
+      this.value = newValue;
+      this.emit("scroll", this._value, this.percentage);
+    }
+  }
+  // Size calculation methods
+  _getTrackSize() {
+    if (!this._trackView) return 0;
+    return this._orientation === "horizontal" ? this._trackView.width : this._trackView.height;
+  }
+  _getTrackThickness() {
+    if (!this._trackView) return 0;
+    return this._orientation === "horizontal" ? this._trackView.height : this._trackView.width;
+  }
+  _getKnobSize() {
+    if (!this._knobView) return 0;
+    const knobBoundingBox = this._knobView.getLocalBounds();
+    return this._orientation === "horizontal" ? knobBoundingBox.width + knobBoundingBox.x * 2 : knobBoundingBox.height + knobBoundingBox.y * 2;
+  }
+  _getEffectiveTrackArea() {
+    const trackSize = this._getTrackSize();
+    const knobSize = this._getKnobSize();
+    const start = this._margin.start;
+    const end = trackSize - this._margin.end;
+    const availableSize = end - start - knobSize;
+    return { start, size: Math.max(0, availableSize) };
+  }
+  _updateKnobPosition() {
+    if (!this._knobView || !this._trackView) return;
+    const percentage = (this._value - this._min) / (this._max - this._min);
+    const effectiveArea = this._getEffectiveTrackArea();
+    const trackThickness = this._getTrackThickness();
+    if (this._orientation === "horizontal") {
+      const knobX = effectiveArea.start + percentage * effectiveArea.size;
+      this._knobView.x = knobX;
+      this._knobView.y = trackThickness / 2;
+    } else {
+      const knobY = effectiveArea.start + percentage * effectiveArea.size;
+      this._knobView.x = trackThickness / 2;
+      this._knobView.y = knobY;
+    }
+  }
+  _emitStateChange() {
+    const state = {
+      enabled: this._enabled,
+      dragging: this._isDragging,
+      value: this._value,
+      percentage: this.percentage,
+      orientation: this._orientation,
+      trackSize: this._getTrackSize(),
+      trackThickness: this._getTrackThickness(),
+      knobSize: this._getKnobSize()
+    };
+    this.emit("stateChanged", state);
+  }
+  // Properties
+  get enabled() {
+    return this._enabled;
+  }
+  set enabled(value) {
+    this._enabled = value;
+    if (this._trackView) {
+      this._trackView.eventMode = value ? "static" : "none";
+    }
+    if (this._knobView) {
+      this._knobView.eventMode = value ? "static" : "none";
+    }
+    if (!value && this._isDragging) {
+      this._isDragging = false;
+      if (this._knobView) {
+        this._knobView.cursor = this._knobCursor;
+        this._knobView.off("globalpointermove", this._onGlobalPointerMove);
+      }
+      this.emit("scrollEnd", this._value);
+    }
+    this._emitStateChange();
+  }
+  get isDragging() {
+    return this._isDragging;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    const clampedValue = Math.max(this._min, Math.min(this._max, newValue));
+    const steppedValue = Math.round(clampedValue / this._step) * this._step;
+    if (this._value !== steppedValue) {
+      this._value = steppedValue;
+      this._updateKnobPosition();
+      this._emitStateChange();
+    }
+  }
+  get percentage() {
+    return (this._value - this._min) / (this._max - this._min);
+  }
+  get trackSize() {
+    return this._getTrackSize();
+  }
+  get trackThickness() {
+    return this._getTrackThickness();
+  }
+  get knobSize() {
+    return this._getKnobSize();
+  }
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(value) {
+    if (this._orientation !== value) {
+      this._orientation = value;
+      this._setupTrackInteractivity();
+      this._setupKnobInteractivity();
+      this._updateKnobPosition();
+      this._emitStateChange();
+    }
+  }
+  get margin() {
+    return { ...this._margin };
+  }
+  set margin(value) {
+    this._margin = {
+      start: value.start || 0,
+      end: value.end || 0
+    };
+    this._updateKnobPosition();
+    this._emitStateChange();
+  }
+  get wheelStep() {
+    return this._wheelStep;
+  }
+  set wheelStep(value) {
+    this._wheelStep = value;
+  }
+  get enableWheel() {
+    return this._enableWheel;
+  }
+  set enableWheel(value) {
+    if (this._enableWheel !== value) {
+      this._enableWheel = value;
+      if (this._trackView) {
+        this._trackView.off("wheel", this._onTrackWheel);
+        if (value) {
+          this._trackView.on("wheel", this._onTrackWheel);
+        }
+      }
+      if (this._knobView) {
+        this._knobView.off("wheel", this._onKnobWheel);
+        if (value) {
+          this._knobView.on("wheel", this._onKnobWheel);
+        }
+      }
+    }
+  }
+  get step() {
+    return this._step;
+  }
+  set step(value) {
+    this._step = value;
+    this.value = this._value;
+  }
+  get trackCursor() {
+    return this._trackCursor;
+  }
+  set trackCursor(value) {
+    this._trackCursor = value;
+    if (this._trackView && this._enabled) {
+      this._trackView.cursor = value;
+    }
+  }
+  get knobCursor() {
+    return this._knobCursor;
+  }
+  set knobCursor(value) {
+    this._knobCursor = value;
+    if (this._knobView && this._enabled && !this._isDragging) {
+      this._knobView.cursor = value;
+    }
+  }
+  // Min property
+  get min() {
+    return this._min;
+  }
+  set min(value) {
+    this._min = value;
+    this.value = this._value;
+  }
+  // Max property
+  get max() {
+    return this._max;
+  }
+  set max(value) {
+    this._max = value;
+    this.value = this._value;
+  }
+  // Utility methods
+  getTrackBounds() {
+    const trackSize = this._getTrackSize();
+    const trackThickness = this._getTrackThickness();
+    if (this._orientation === "horizontal") {
+      return { x: 0, y: 0, width: trackSize, height: trackThickness };
+    } else {
+      return { x: 0, y: 0, width: trackThickness, height: trackSize };
+    }
+  }
+  getEffectiveArea() {
+    const area = this._getEffectiveTrackArea();
+    if (this._orientation === "horizontal") {
+      return {
+        x: area.start,
+        y: 0,
+        width: area.size,
+        height: this._getTrackThickness()
+      };
+    } else {
+      return {
+        x: 0,
+        y: area.start,
+        width: this._getTrackThickness(),
+        height: area.size
+      };
+    }
+  }
+  refreshSizes() {
+    this._setupTrackInteractivity();
+    this._setupKnobInteractivity();
+    this._updateKnobPosition();
+    this._emitStateChange();
+  }
+  setRange(min, max) {
+    this._min = min;
+    this._max = max;
+    this.value = this._value;
+  }
+  destroy() {
+    if (this._isDragging && this._knobView) {
+      this._knobView.off("globalpointermove", this._onGlobalPointerMove);
+    }
+    this._unbindAllEvents();
+    this._trackView = null;
+    this._knobView = null;
+    this._eventsBound = false;
+    this.removeAllListeners();
+  }
+};
+
+// ui/behaviors/InputBehavior.ts
+var InputBehavior = class extends import_index.default {
+  _domInput;
+  _state;
+  _options;
+  _view = null;
+  constructor(options = {}) {
+    super();
+    this._options = options;
+    const guid = "input-" + Math.random().toString(36).slice(2, 11);
+    if (options.multiline) {
+      this._domInput = document.createElement("textarea");
+    } else {
+      this._domInput = document.createElement("input");
+      this._domInput.type = options.type || "text";
+    }
+    this._domInput.id = guid;
+    this._domInput.name = guid;
+    this._domInput.style.position = "fixed";
+    this._domInput.style.opacity = "0.000001";
+    this._domInput.style.border = "none";
+    this._domInput.style.outline = "none";
+    this._domInput.placeholder = options.placeholder || "";
+    if (options.maxLength) this._domInput.maxLength = options.maxLength;
+    document.body.appendChild(this._domInput);
+    this._state = {
+      value: "",
+      focused: false,
+      enabled: options.enabled !== false,
+      selection: { start: 0, end: 0 }
+    };
+    this._domInput.addEventListener("focus", () => {
+      this._state.focused = true;
+      this.emit("focus");
+      this.emit("stateChanged", this._state);
+    });
+    this._domInput.addEventListener("blur", () => {
+      this._state.focused = false;
+      this.emit("blur");
+      this.emit("stateChanged", this._state);
+    });
+    this._domInput.addEventListener("input", () => {
+      let val = this._domInput.value;
+      if (options.restricted) {
+        val = val.replace(options.restricted, "");
+        this._domInput.value = val;
+      }
+      if (options.mask) {
+        this._domInput.value = options.mask(val);
+      }
+      this._state.value = val;
+      this.emit("input", val);
+      this.emit("stateChanged", this._state);
+    });
+    this._domInput.addEventListener("change", () => {
+      this.emit("change", this._domInput.value);
+    });
+    this._domInput.addEventListener("keydown", (e) => {
+      const ke = e;
+      if (ke.key === "Enter") this.emit("enter");
+      if (ke.key === "Escape") this.emit("esc");
+    });
+  }
+  attachView(view) {
+    if (this._view === view) return;
+    if (this._view) {
+      this._view.off("pointerdown", this._onViewPointerDown);
+    }
+    this._view = view;
+    this._view.on("pointerdown", this._onViewPointerDown);
+    this.updateDomPosition();
+  }
+  _onViewPointerDown = () => {
+    this.activateView();
+  };
+  detachView() {
+    if (this._view) {
+      this._view.off("pointerdown", this._onViewPointerDown);
+    }
+    this._view = null;
+  }
+  get hasView() {
+    return !!this._view;
+  }
+  get view() {
+    return this._view;
+  }
+  focus() {
+    this._domInput.focus();
+  }
+  blur() {
+    this._domInput.blur();
+  }
+  setValue(val) {
+    if (this._options.restricted) {
+      val = val.replace(this._options.restricted, "");
+    }
+    this._domInput.value = val;
+    this._state.value = val;
+    this.emit("stateChanged", this._state);
+  }
+  get value() {
+    return this._state.value;
+  }
+  set enabled(val) {
+    this._state.enabled = val;
+    this._domInput.disabled = !val;
+    this.emit("stateChanged", this._state);
+  }
+  get enabled() {
+    return this._state.enabled;
+  }
+  setSelection(start, end) {
+    this._domInput.setSelectionRange(start, end);
+    this._state.selection = { start, end };
+    this.emit("stateChanged", this._state);
+  }
+  // Position the input according to the view coordinates
+  updateDomPosition() {
+    if (!this._view) return;
+    const bounds = this._view.getBounds();
+    this._domInput.style.left = `${bounds.x}px`;
+    this._domInput.style.top = `${bounds.y}px`;
+    this._domInput.style.width = `${bounds.width}px`;
+    this._domInput.style.height = `${bounds.height}px`;
+  }
+  activateView() {
+    this.updateDomPosition();
+    this.focus();
+  }
+  destroy() {
+    this._domInput.remove();
+    this.removeAllListeners();
+  }
+};
+
+// utils/ObjectUtils.ts
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => current == null ? void 0 : current[key], obj);
+}
+
+// ui/components/Skinable.ts
+var SKIN = Symbol("skinData");
+function Skinable(Base) {
+  class SkinableClass extends Base {
+    [SKIN] = null;
+    // Optional hook implementable by subclasses
+    skinApply;
+    setSkinData(data, opts = {}) {
+      var _a, _b;
+      const { mergeWithExisting = false } = opts;
+      if (data === null) {
+        this[SKIN] = null;
+        (_a = this.skinApply) == null ? void 0 : _a.call(this, null);
+        return;
+      }
+      const current = this[SKIN];
+      if (mergeWithExisting && current) {
+        this[SKIN] = merge({}, current, data);
+      } else {
+        this[SKIN] = merge({}, data);
+      }
+      (_b = this.skinApply) == null ? void 0 : _b.call(this, this[SKIN] ?? null);
+    }
+    getSkinData() {
+      return this[SKIN];
+    }
+    // Subclasses should implement:
+    // protected skinApply?(skin: TSkinData | null): void
+  }
+  return SkinableClass;
+}
+var mergeSkins = (a, b) => {
+  const out = { ...a };
+  for (const k of Object.keys(b)) {
+    const av = a == null ? void 0 : a[k];
+    const bv = b[k];
+    if (av && bv && typeof av === "object" && !Array.isArray(av) && typeof bv === "object" && !Array.isArray(bv)) {
+      out[k] = mergeSkins(av, bv);
+    } else {
+      out[k] = bv;
+    }
+  }
+  return out;
+};
+function defineGlobalSkin() {
+  let _globalSkin = null;
+  function globalSkin(skin) {
+    if (arguments.length === 0) return _globalSkin;
+    _globalSkin = skin ?? null;
+  }
+  return globalSkin;
+}
+function mergeGlobalAndInstanceSkin(globalSkinGetter, instanceSkin) {
+  const globalSkin = globalSkinGetter() || null;
+  const effectiveSkin = instanceSkin ? globalSkin ? mergeSkins(globalSkin, instanceSkin) : instanceSkin : globalSkin;
+  return effectiveSkin || null;
+}
+function applyLayoutMappings(skin, mappings) {
+  mappings.forEach(({ path, target }) => {
+    const value = getNestedValue(skin, path);
+    if (value !== void 0) {
+      target().layout = value;
+    }
+  });
+}
+function applyStyleMappings(skin, mappings) {
+  mappings.forEach(({ path, target }) => {
+    const value = getNestedValue(skin, path);
+    if (value !== void 0) {
+      target().style = value;
+    }
+  });
+}
+function applyTextMappings(skin, mappings) {
+  mappings.forEach(({ path, target }) => {
+    const value = getNestedValue(skin, path);
+    if (value !== void 0) {
+      target().text = value;
+    }
+  });
+}
+function applySkinMappings(skin, mappings, mergeWithExisting) {
+  mappings.forEach(({ path, target }) => {
+    const value = getNestedValue(skin, path);
+    if (value !== void 0) {
+      target().setSkinData(value, { mergeWithExisting: mergeWithExisting ?? false });
+    }
+  });
+}
+
+// ui/components/SpriteTextBBCode.ts
+var DEFAULT_STYLE = (defaultFontIndex) => ({
+  fontIndex: defaultFontIndex
+});
+function parseColorValue(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("#")) {
+    const hex = trimmed.slice(1);
+    if (hex.length === 3) {
+      const r = parseInt(hex[0] + hex[0], 16);
+      const g = parseInt(hex[1] + hex[1], 16);
+      const b = parseInt(hex[2] + hex[2], 16);
+      return (r << 16) + (g << 8) + b;
+    }
+    if (hex.length === 6) {
+      return parseInt(hex, 16);
+    }
+  }
+  if (trimmed.startsWith("0x") || trimmed.startsWith("0X")) {
+    return parseInt(trimmed, 16);
+  }
+  return void 0;
+}
+function resolveFontIndex(value, options) {
+  const trimmed = value.trim();
+  const fonts = options.fonts ?? [];
+  const defaultIndex = options.defaultFontIndex ?? 0;
+  const numericIndex = Number(trimmed);
+  if (!Number.isNaN(numericIndex) && Number.isInteger(numericIndex)) {
+    if (numericIndex >= 0 && numericIndex < fonts.length) {
+      return numericIndex;
+    }
+    return defaultIndex;
+  }
+  const aliases = options.aliases ?? {};
+  const aliasTarget = aliases[trimmed];
+  if (aliasTarget !== void 0) {
+    if (typeof aliasTarget === "number") {
+      if (aliasTarget >= 0 && aliasTarget < fonts.length) {
+        return aliasTarget;
+      }
+      return defaultIndex;
+    }
+    const fontIndex = fonts.indexOf(aliasTarget);
+    return fontIndex >= 0 ? fontIndex : defaultIndex;
+  }
+  const directIndex = fonts.indexOf(trimmed);
+  return directIndex >= 0 ? directIndex : defaultIndex;
+}
+function parseFontAttributes(attrString, options) {
+  const style = { fontIndex: options.defaultFontIndex ?? 0 };
+  const tokens = attrString.trim().split(/\s+/).filter(Boolean);
+  let fontSet = false;
+  for (const token of tokens) {
+    const eqIdx = token.indexOf("=");
+    if (eqIdx === -1) {
+      if (!fontSet) {
+        style.fontIndex = resolveFontIndex(token, options);
+        fontSet = true;
+      }
+      continue;
+    }
+    const key = token.slice(0, eqIdx);
+    const val = token.slice(eqIdx + 1);
+    if (key === "font") {
+      style.fontIndex = resolveFontIndex(val, options);
+      fontSet = true;
+    } else if (key === "tint") {
+      style.tint = parseColorValue(val);
+    } else if (key === "scale") {
+      const scale = parseFloat(val);
+      if (!Number.isNaN(scale)) {
+        style.scale = scale;
+      }
+    }
+  }
+  if (!fontSet && tokens.length === 1 && tokens[0].includes("=") === false) {
+    style.fontIndex = resolveFontIndex(tokens[0], options);
+  }
+  return style;
+}
+function parseOpenTag(tagContent, options) {
+  const defaultFontIndex = options.defaultFontIndex ?? 0;
+  if (tagContent.startsWith("font=")) {
+    return {
+      tagType: "font",
+      style: parseFontAttributes(tagContent.slice(5), options)
+    };
+  }
+  if (tagContent.startsWith("tint=")) {
+    const tint = parseColorValue(tagContent.slice(5));
+    return {
+      tagType: "tint",
+      style: { fontIndex: defaultFontIndex, tint }
+    };
+  }
+  if (tagContent.startsWith("scale=")) {
+    const scale = parseFloat(tagContent.slice(6));
+    return {
+      tagType: "scale",
+      style: {
+        fontIndex: defaultFontIndex,
+        scale: Number.isNaN(scale) ? void 0 : scale
+      }
+    };
+  }
+  return null;
+}
+function mergeAdjacentRuns(runs) {
+  if (runs.length === 0) return runs;
+  const merged = [];
+  let current = { ...runs[0] };
+  for (let i = 1; i < runs.length; i++) {
+    const next = runs[i];
+    if (current.fontIndex === next.fontIndex && current.tint === next.tint && current.scale === next.scale) {
+      current.text += next.text;
+    } else {
+      merged.push(current);
+      current = { ...next };
+    }
+  }
+  merged.push(current);
+  return merged;
+}
+function parseSpriteTextBBCode(input, options = {}) {
+  const defaultFontIndex = options.defaultFontIndex ?? 0;
+  const runs = [];
+  let buffer = "";
+  let currentStyle = DEFAULT_STYLE(defaultFontIndex);
+  let activeTag = null;
+  const flush = () => {
+    if (buffer.length === 0) return;
+    runs.push({
+      text: buffer,
+      fontIndex: currentStyle.fontIndex,
+      tint: currentStyle.tint,
+      scale: currentStyle.scale
+    });
+    buffer = "";
+  };
+  let i = 0;
+  while (i < input.length) {
+    if (input[i] === "\\" && input[i + 1] === "[") {
+      buffer += "[";
+      i += 2;
+      continue;
+    }
+    if (input[i] !== "[") {
+      buffer += input[i];
+      i += 1;
+      continue;
+    }
+    const closeIdx = input.indexOf("]", i);
+    if (closeIdx === -1) {
+      buffer += input[i];
+      i += 1;
+      continue;
+    }
+    const tagContent = input.slice(i + 1, closeIdx);
+    if (tagContent.startsWith("/")) {
+      const closeTag = tagContent.slice(1);
+      if (activeTag !== null && closeTag === activeTag) {
+        flush();
+        activeTag = null;
+        currentStyle = DEFAULT_STYLE(defaultFontIndex);
+      } else {
+        buffer += input.slice(i, closeIdx + 1);
+      }
+    } else {
+      const parsed = parseOpenTag(tagContent, options);
+      if (parsed) {
+        flush();
+        activeTag = parsed.tagType;
+        currentStyle = parsed.style;
+      } else {
+        buffer += input.slice(i, closeIdx + 1);
+      }
+    }
+    i = closeIdx + 1;
+  }
+  flush();
+  return mergeAdjacentRuns(runs);
+}
+function isKnownBBCodeTag(tagContent) {
+  if (tagContent.startsWith("/")) {
+    const closeTag = tagContent.slice(1);
+    return closeTag === "font" || closeTag === "tint" || closeTag === "scale";
+  }
+  return tagContent.startsWith("font=") || tagContent.startsWith("tint=") || tagContent.startsWith("scale=");
+}
+function stripSpriteTextBBCode(input) {
+  let result = "";
+  let i = 0;
+  while (i < input.length) {
+    if (input[i] === "\\" && input[i + 1] === "[") {
+      result += "[";
+      i += 2;
+      continue;
+    }
+    if (input[i] !== "[") {
+      result += input[i];
+      i += 1;
+      continue;
+    }
+    const closeIdx = input.indexOf("]", i);
+    if (closeIdx === -1) {
+      result += input[i];
+      i += 1;
+      continue;
+    }
+    const tagContent = input.slice(i + 1, closeIdx);
+    if (!isKnownBBCodeTag(tagContent)) {
+      result += input.slice(i, closeIdx + 1);
+    }
+    i = closeIdx + 1;
+  }
+  return result;
+}
+
+// ui/components/spriteText/SpriteTextKerning.ts
+function kerningKey(firstCode, secondCode) {
+  return `${firstCode}_${secondCode}`;
+}
+function charPairToKey(first, second) {
+  return kerningKey(first.charCodeAt(0), second.charCodeAt(0));
+}
+function codesToKey(first, second) {
+  const firstCode = typeof first === "string" ? first.charCodeAt(0) : first;
+  const secondCode = typeof second === "string" ? second.charCodeAt(0) : second;
+  return kerningKey(firstCode, secondCode);
+}
+function getKerningFromMap(map, first, second) {
+  return map.get(charPairToKey(first, second)) ?? 0;
+}
+function applyKerningPairs(map, pairs) {
+  map.clear();
+  if (Array.isArray(pairs)) {
+    for (const pair of pairs) {
+      map.set(kerningKey(pair.first, pair.second), pair.amount);
+    }
+    return;
+  }
+  for (const [chars, amount] of Object.entries(pairs)) {
+    if (chars.length === 2) {
+      map.set(charPairToKey(chars[0], chars[1]), amount);
+    }
+  }
+}
+function resolveCharTexture(char, fontIndex, ctx) {
+  try {
+    if (char === "\n" || char === "\r" || char === "	") {
+      return null;
+    }
+    const font = ctx.fonts[fontIndex] ?? ctx.fonts[0];
+    if (!font) return null;
+    const fontStyle = ctx.getFontStyle(fontIndex);
+    const glyphMap = (fontStyle == null ? void 0 : fontStyle.glyphMap) ?? ctx.glyphMap;
+    let textureName;
+    if (glyphMap[char]) {
+      textureName = `${font}/${glyphMap[char]}`;
+    } else {
+      textureName = `${font}/${char.charCodeAt(0)}`;
+    }
+    const texture = Assets.get(textureName);
+    if (!texture || texture === Texture.EMPTY) {
+      return null;
+    }
+    return texture;
+  } catch {
+    return null;
+  }
+}
+function resolveRefWidth(char, fontIndex, ctx) {
+  const fontStyle = ctx.getFontStyle(fontIndex);
+  const fixedWidth = (fontStyle == null ? void 0 : fontStyle.fixedWidth) ?? ctx.fixedWidth;
+  if (fixedWidth === false) {
+    return 0;
+  }
+  if (fixedWidth === true) {
+    const refTexture = resolveCharTexture("0", fontIndex, ctx);
+    return (refTexture == null ? void 0 : refTexture.width) ?? 0;
+  }
+  if (typeof fixedWidth === "string") {
+    const refTexture = resolveCharTexture(fixedWidth, fontIndex, ctx);
+    return (refTexture == null ? void 0 : refTexture.width) ?? 0;
+  }
+  if (typeof fixedWidth === "object" && fixedWidth !== null) {
+    for (const [pattern, refChar] of Object.entries(fixedWidth)) {
+      try {
+        const regex = new RegExp(pattern);
+        if (regex.test(char)) {
+          const refTexture = resolveCharTexture(refChar, fontIndex, ctx);
+          return (refTexture == null ? void 0 : refTexture.width) ?? 0;
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
+  return 0;
+}
+function measureCharMetaWidth(meta, ctx) {
+  const effectiveScale = ctx.glyphScale * meta.runScale;
+  if (meta.char === " ") {
+    const refTexture = resolveCharTexture("0", meta.fontIndex, ctx);
+    return ((refTexture == null ? void 0 : refTexture.width) ?? 0) * effectiveScale * ctx.spaceWidth;
+  }
+  if (meta.char === "\n") {
+    return 0;
+  }
+  if (meta.char === "	") {
+    const refTexture = resolveCharTexture("0", meta.fontIndex, ctx);
+    return ((refTexture == null ? void 0 : refTexture.width) ?? 0) * effectiveScale * ctx.spaceWidth * 4;
+  }
+  const texture = resolveCharTexture(meta.char, meta.fontIndex, ctx);
+  if (!texture) return 0;
+  const refWidth = resolveRefWidth(meta.char, meta.fontIndex, ctx);
+  const width = refWidth > 0 ? refWidth : texture.width;
+  return width * effectiveScale;
+}
+
+// ui/components/spriteText/SpriteTextWrap.ts
+function measureCharMetasWidth(metas, ctx) {
+  let width = 0;
+  for (let i = 0; i < metas.length; i++) {
+    width += ctx.getCharMetaWidth(metas[i]);
+    width += ctx.letterSpacing * ctx.glyphScale;
+    if (ctx.kerningEnabled && i < metas.length - 1) {
+      const current = metas[i];
+      const next = metas[i + 1];
+      if (current.fontIndex === next.fontIndex) {
+        width += ctx.getKerning(current.char, next.char) * ctx.glyphScale;
+      }
+    }
+  }
+  return width;
+}
+function runsToMetas(runs) {
+  const metas = [];
+  for (const run of runs) {
+    const runScale = run.scale ?? 1;
+    for (const char of run.text) {
+      metas.push({
+        char,
+        fontIndex: run.fontIndex,
+        tint: run.tint,
+        runScale
+      });
+    }
+  }
+  return metas;
+}
+function metasToRuns(metas) {
+  if (metas.length === 0) return [];
+  const runs = [];
+  let current = {
+    text: metas[0].char,
+    fontIndex: metas[0].fontIndex,
+    tint: metas[0].tint,
+    scale: metas[0].runScale
+  };
+  for (let i = 1; i < metas.length; i++) {
+    const meta = metas[i];
+    if (current.fontIndex === meta.fontIndex && current.tint === meta.tint && current.scale === meta.runScale) {
+      current.text += meta.char;
+    } else {
+      runs.push(current);
+      current = {
+        text: meta.char,
+        fontIndex: meta.fontIndex,
+        tint: meta.tint,
+        scale: meta.runScale
+      };
+    }
+  }
+  runs.push(current);
+  return runs;
+}
+function mergeRunLinesWithNewlines(lines) {
+  const merged = [];
+  lines.forEach((line, lineIndex) => {
+    if (lineIndex > 0) {
+      merged.push({ text: "\n", fontIndex: 0, scale: 1 });
+    }
+    merged.push(...line);
+  });
+  return merged;
+}
+function wrapCharMetas(metas, ctx) {
+  const lines = [];
+  let currentLine = [];
+  let currentWord = [];
+  const measureLine = (line) => measureCharMetasWidth(line, ctx);
+  const flushWord = () => {
+    if (currentWord.length === 0) return;
+    const testLine = [...currentLine, ...currentWord];
+    if (measureLine(testLine) > ctx.wordWrapWidth / ctx.scaleX && currentLine.length > 0) {
+      lines.push(currentLine);
+      currentLine = [...currentWord];
+    } else {
+      currentLine.push(...currentWord);
+    }
+    currentWord = [];
+  };
+  for (const meta of metas) {
+    if (meta.char === "\n") {
+      flushWord();
+      lines.push(currentLine);
+      currentLine = [];
+      continue;
+    }
+    if (meta.char === " ") {
+      flushWord();
+      currentLine.push(meta);
+      continue;
+    }
+    if (ctx.breakWord && currentWord.length === 0 && currentLine.length > 0) {
+      const testWord = [meta];
+      if (measureLine([...currentLine, ...testWord]) > ctx.wordWrapWidth / ctx.scaleX) {
+        lines.push(currentLine);
+        currentLine = [];
+      }
+    }
+    currentWord.push(meta);
+    if (ctx.breakWord && currentWord.length > 1) {
+      const testLine = [...currentLine, ...currentWord];
+      if (measureLine(testLine) > ctx.wordWrapWidth / ctx.scaleX) {
+        const overflowChar = currentWord.pop();
+        if (currentWord.length > 0) {
+          flushWord();
+        }
+        if (overflowChar) {
+          currentWord = [overflowChar];
+        }
+      }
+    }
+  }
+  flushWord();
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
+  }
+  return lines.length > 0 ? lines : [[]];
+}
+function wrapRuns(runs, ctx) {
+  const metas = runsToMetas(runs);
+  const lines = wrapCharMetas(metas, ctx);
+  return lines.map((line) => metasToRuns(line));
+}
+
+// ui/components/spriteText/SpriteTextBezier.ts
+function getBezierPoint(t, p0, p1, p2) {
+  const mt = 1 - t;
+  const mt2 = mt * mt;
+  const t2 = t * t;
+  return {
+    x: mt2 * p0.x + 2 * mt * t * p1.x + t2 * p2.x,
+    y: mt2 * p0.y + 2 * mt * t * p1.y + t2 * p2.y
+  };
+}
+function getBezierTangent(t, p0, p1, p2) {
+  const mt = 1 - t;
+  const dx = 2 * mt * (p1.x - p0.x) + 2 * t * (p2.x - p1.x);
+  const dy = 2 * mt * (p1.y - p0.y) + 2 * t * (p2.y - p1.y);
+  return Math.atan2(dy, dx);
+}
+function buildBezierArcLengthTable(p0, p1, p2, samples = 64) {
+  const table = [{ t: 0, length: 0 }];
+  let accum = 0;
+  let prev = p0;
+  for (let i = 1; i <= samples; i++) {
+    const t = i / samples;
+    const point = getBezierPoint(t, p0, p1, p2);
+    accum += Math.hypot(point.x - prev.x, point.y - prev.y);
+    table.push({ t, length: accum });
+    prev = point;
+  }
+  return table;
+}
+var CURVE_WIDTH_BULGE_RATIO = 0.2;
+var CURVE_SPREAD_FACTOR = 0.65;
+function computeCurveBulge(lineWidth, lineHeight, controlYPercent) {
+  const magnitude = Math.abs(controlYPercent);
+  return Math.min(lineHeight * magnitude, lineWidth * magnitude * CURVE_WIDTH_BULGE_RATIO);
+}
+function computeCurveSpread(lineWidth, lineHeight, controlYPercent) {
+  const bulge = computeCurveBulge(lineWidth, lineHeight, controlYPercent);
+  const bulgeRatio = bulge / Math.max(lineWidth, 1);
+  return 1 + bulgeRatio * CURVE_SPREAD_FACTOR;
+}
+function computeProportionalArcLength(centerFraction, totalArcLength, spread) {
+  const spreadFraction = 0.5 + (centerFraction - 0.5) * spread;
+  const clampedFraction = Math.min(Math.max(spreadFraction, 0), 1);
+  return clampedFraction * totalArcLength;
+}
+function getRotatedOffset(localX, localY, rotation) {
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  return {
+    x: localX * cos - localY * sin,
+    y: localX * sin + localY * cos
+  };
+}
+function placeLocalPointOnCurve(curvePos, tangent, localX, localY) {
+  const rotated = getRotatedOffset(localX, localY, tangent);
+  return {
+    x: curvePos.x - rotated.x,
+    y: curvePos.y - rotated.y
+  };
+}
+function getBezierTForArcLength(table, targetLength) {
+  if (table.length === 0) {
+    return 0;
+  }
+  const totalLength = table[table.length - 1].length;
+  if (targetLength <= 0) {
+    return 0;
+  }
+  if (targetLength >= totalLength) {
+    return 1;
+  }
+  let lo = 0;
+  let hi = table.length - 1;
+  while (lo < hi - 1) {
+    const mid = Math.floor((lo + hi) / 2);
+    if (table[mid].length < targetLength) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  const a = table[lo];
+  const b = table[hi];
+  const segmentLength = b.length - a.length;
+  if (segmentLength <= 0) {
+    return a.t;
+  }
+  const ratio = (targetLength - a.length) / segmentLength;
+  return a.t + ratio * (b.t - a.t);
+}
+
+// ui/components/spriteText/SpriteTextCurve.ts
+function applyCurveToLine(glyphs, config) {
+  var _a;
+  const {
+    lineIndex,
+    lineWidth,
+    lineHeight,
+    lineAlignOffset,
+    controlXPercent,
+    controlYPercent
+  } = config;
+  const lineCenterX = lineAlignOffset + lineWidth / 2;
+  const curveHalfWidth = lineWidth / 2;
+  const curveStartX = lineCenterX - curveHalfWidth;
+  const curveEndX = lineCenterX + curveHalfWidth;
+  const curveStartY = lineIndex * lineHeight;
+  const curveControlX = lineCenterX + lineWidth * (controlXPercent - 0.5);
+  const bulge = computeCurveBulge(lineWidth, lineHeight, controlYPercent);
+  const verticalSign = controlYPercent < 0 ? -1 : controlYPercent > 0 ? 1 : 0;
+  const curveControlY = curveStartY + verticalSign * bulge;
+  const curveEndY = curveStartY;
+  const p0 = { x: curveStartX, y: curveStartY };
+  const p1 = { x: curveControlX, y: curveControlY };
+  const p2 = { x: curveEndX, y: curveEndY };
+  const arcTable = lineWidth > 0 ? buildBezierArcLengthTable(p0, p1, p2) : [{ t: 0, length: 0 }];
+  const totalArcLength = ((_a = arcTable[arcTable.length - 1]) == null ? void 0 : _a.length) ?? 0;
+  const targetCenterX = lineAlignOffset + lineWidth / 2;
+  const spread = computeCurveSpread(lineWidth, lineHeight, controlYPercent);
+  glyphs.forEach((glyph) => {
+    const bounds = glyph.getLocalBounds();
+    const scaleX = glyph.scale.x;
+    const scaleY = glyph.scale.y;
+    const glyphWidth = bounds.width * scaleX;
+    const glyphHeight = bounds.height * scaleY;
+    const glyphLeft = glyph.x + bounds.x * scaleX;
+    const centerFraction = lineWidth > 0 ? (glyphLeft + glyphWidth / 2) / lineWidth : 0;
+    const trackingArc = computeProportionalArcLength(centerFraction, totalArcLength, spread);
+    const t = totalArcLength > 0 ? getBezierTForArcLength(arcTable, trackingArc) : 0;
+    const curvePos = getBezierPoint(t, p0, p1, p2);
+    const curveTangent = getBezierTangent(t, p0, p1, p2);
+    const localBottomCenterX = bounds.x * scaleX + glyphWidth / 2;
+    const localBottomCenterY = bounds.y * scaleY + glyphHeight;
+    const position = placeLocalPointOnCurve(
+      curvePos,
+      curveTangent,
+      localBottomCenterX,
+      localBottomCenterY
+    );
+    glyph.x = position.x;
+    glyph.y = position.y;
+    glyph.rotation = curveTangent;
+  });
+  const curvedBounds = getGlyphsAxisBounds(glyphs);
+  const offsetX = targetCenterX - curvedBounds.centerX;
+  const offsetY = 0;
+  glyphs.forEach((glyph) => {
+    glyph.x += offsetX;
+    glyph.y += offsetY;
+  });
+}
+function getGlyphsAxisBounds(glyphs) {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  glyphs.forEach((glyph) => {
+    const bounds = glyph.getLocalBounds();
+    const scaleX = glyph.scale.x;
+    const scaleY = glyph.scale.y;
+    const width = bounds.width * scaleX;
+    const height = bounds.height * scaleY;
+    const localCorners = [
+      { x: bounds.x * scaleX, y: bounds.y * scaleY },
+      { x: bounds.x * scaleX + width, y: bounds.y * scaleY },
+      { x: bounds.x * scaleX + width, y: bounds.y * scaleY + height },
+      { x: bounds.x * scaleX, y: bounds.y * scaleY + height }
+    ];
+    localCorners.forEach((corner) => {
+      const cos = Math.cos(glyph.rotation);
+      const sin = Math.sin(glyph.rotation);
+      const x = glyph.x + (corner.x * cos - corner.y * sin);
+      const y = glyph.y + (corner.x * sin + corner.y * cos);
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    });
+  });
+  if (!Number.isFinite(minX)) {
+    return { minX: 0, maxX: 0, minY: 0, maxY: 0, centerX: 0, centerY: 0 };
+  }
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    centerX: (minX + maxX) / 2,
+    centerY: (minY + maxY) / 2
+  };
+}
+
+// ui/components/spriteText/SpriteTextAlignment.ts
+function splitGlyphsIntoLines(glyphs) {
+  const lines = [];
+  let currentLine = [];
+  glyphs.forEach((glyph) => {
+    if (glyph.isLinebreak) {
+      if (currentLine.length > 0) {
+        lines.push(currentLine);
+        currentLine = [];
+      }
+    } else {
+      currentLine.push(glyph);
+    }
+  });
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
+  }
+  return lines;
+}
+function layoutFlatLines(lines, ctx) {
+  const lineWidths = [];
+  const lineHeights = [];
+  lines.forEach((lineGlyphs, lineIndex) => {
+    if (lineGlyphs.length === 0) {
+      lineWidths.push(0);
+      lineHeights.push(0);
+      return;
+    }
+    let xCursor = 0;
+    const lineHeight = Math.max(
+      ...lineGlyphs.map((glyph) => glyph.height || glyph.getLocalBounds().height * glyph.scale.y),
+      0
+    );
+    lineHeights.push(lineHeight);
+    lineGlyphs.forEach((glyph, glyphIndex) => {
+      glyph.x = xCursor - glyph.getLocalBounds().x * glyph.scale.x;
+      glyph.y = lineIndex * lineHeight - glyph.getLocalBounds().y * glyph.scale.y;
+      xCursor += glyph.getLocalBounds().width * glyph.scale.x + ctx.letterSpacing * ctx.glyphScale;
+      if (ctx.kerningEnabled && glyphIndex < lineGlyphs.length - 1) {
+        const nextGlyph = lineGlyphs[glyphIndex + 1];
+        if (glyph.fontIndex === nextGlyph.fontIndex) {
+          xCursor += ctx.getKerning(glyph.char, nextGlyph.char) * ctx.glyphScale;
+        }
+      }
+    });
+    const lineWidth = xCursor - ctx.letterSpacing * ctx.glyphScale;
+    lineWidths.push(lineWidth);
+  });
+  return { lineWidths, lineHeights };
+}
+function computeLineAlignOffset(lineAlign, lineWidth, maxWidth) {
+  switch (lineAlign) {
+    case "left":
+      return 0;
+    case "center":
+      return (maxWidth - lineWidth) / 2;
+    case "right":
+      return maxWidth - lineWidth;
+  }
+}
+function applyContainerPivot(container, bounds, pivotHorizontal, pivotVertical) {
+  switch (pivotHorizontal) {
+    case "left":
+      container.pivot.x = bounds.x;
+      break;
+    case "center":
+      container.pivot.x = bounds.x + bounds.width / 2;
+      break;
+    case "right":
+      container.pivot.x = bounds.x + bounds.width;
+      break;
+  }
+  switch (pivotVertical) {
+    case "top":
+      container.pivot.y = bounds.y;
+      break;
+    case "middle":
+      container.pivot.y = bounds.y + bounds.height / 2;
+      break;
+    case "bottom":
+      container.pivot.y = bounds.y + bounds.height;
+      break;
+  }
+}
+function resolveSpriteTextAlignment(container, ctx) {
+  const lines = splitGlyphsIntoLines(ctx.glyphs);
+  const { lineWidths, lineHeights } = layoutFlatLines(lines, ctx);
+  const maxWidth = Math.max(...lineWidths, 0);
+  lines.forEach((lineGlyphs, lineIndex) => {
+    if (lineGlyphs.length === 0) return;
+    const lineWidth = lineWidths[lineIndex];
+    const lineHeight = lineHeights[lineIndex];
+    const lineAlignOffset = computeLineAlignOffset(ctx.lineAlign, lineWidth, maxWidth);
+    if (!ctx.curveEnabled) {
+      lineGlyphs.forEach((glyph) => {
+        glyph.x += lineAlignOffset;
+        glyph.rotation = 0;
+      });
+      return;
+    }
+    applyCurveToLine(lineGlyphs, {
+      lineIndex,
+      lineWidth,
+      lineHeight,
+      lineAlignOffset,
+      controlXPercent: ctx.curveControlXPercent,
+      controlYPercent: ctx.curveControlYPercent
+    });
+  });
+  container.boundsArea = void 0;
+  const bounds = container.getLocalBounds();
+  applyContainerPivot(container, bounds, ctx.pivotHorizontal, ctx.pivotVertical);
+}
+
+// ui/components/spriteText/SpriteText.ts
+var SpriteText = class _SpriteText extends Skinable(Container) {
+  static globalSkin = defineGlobalSkin();
+  _glyphs = [];
+  _text = "";
+  _fonts = [];
+  _font = "";
+  _bbcodeEnabled = false;
+  _richTextExplicit;
+  _bbcodeAliases = {};
+  _fontStyles = [];
+  _runsOverride = null;
+  _tint = 16777215;
+  _pivotHorizontal = "center";
+  _pivotVertical = "middle";
+  _lineAlign = "left";
+  _letterSpacing = 0;
+  _spaceWidth = 0.5;
+  _wordWrap = false;
+  _wordWrapWidth = 100;
+  _breakWord = false;
+  _allowLineBreak = false;
+  _kerningEnabled = false;
+  _kerningMap = /* @__PURE__ */ new Map();
+  _glyphAnchor = { x: 0, y: 0 };
+  _glyphMap = {};
+  _fixedWidth = false;
+  _glyphScale = 1;
+  _curveEnabled = false;
+  _curveControlXPercent = 0.5;
+  _curveControlYPercent = -0.5;
+  constructor(options = {}) {
+    super();
+    if (options.text !== void 0) {
+      this._text = options.text;
+    }
+    const effectiveSkin = mergeGlobalAndInstanceSkin(
+      () => _SpriteText.globalSkin(),
+      options.skinData
+    );
+    this.setSkinData(effectiveSkin, { mergeWithExisting: false });
+  }
+  skinApply(skin) {
+    if (!skin) return;
+    const propertyMap = {
+      text: "_text",
+      tint: "_tint",
+      "pivot.horizontal": "_pivotHorizontal",
+      "pivot.vertical": "_pivotVertical",
+      lineAlign: "_lineAlign",
+      "spacing.letter": "_letterSpacing",
+      "spacing.space": "_spaceWidth",
+      "wordWrap.enabled": "_wordWrap",
+      "wordWrap.width": "_wordWrapWidth",
+      "wordWrap.breakWord": "_breakWord",
+      "lineBreak.enabled": "_allowLineBreak",
+      "kerning.enabled": "_kerningEnabled",
+      "kerning.pairs": null,
+      "glyph.anchor": "_glyphAnchor",
+      "glyph.map": "_glyphMap",
+      "glyph.fixedWidth": "_fixedWidth",
+      "glyph.scale": "_glyphScale",
+      "curve.enabled": "_curveEnabled",
+      "curve.controlXPercent": "_curveControlXPercent",
+      "curve.controlYPercent": "_curveControlYPercent"
+    };
+    Object.entries(propertyMap).forEach(([skinPath, instanceProperty]) => {
+      const value = getNestedValue(skin, skinPath);
+      if (value !== void 0) {
+        if (skinPath === "text" && this._text !== "") return;
+        if (skinPath === "kerning.pairs") {
+          this.setKerningPairs(value);
+        } else if (instanceProperty) {
+          this[instanceProperty] = value;
+        }
+      }
+    });
+    this.applyLegacyAlignmentSkin(skin);
+    if (skin.fonts !== void 0) {
+      this._fonts = [...skin.fonts];
+    } else if (skin.font !== void 0) {
+      this._fonts = [skin.font];
+    }
+    this._font = this._fonts[0] ?? "";
+    if (skin.richText !== void 0) {
+      this._richTextExplicit = skin.richText.enabled;
+      this._bbcodeAliases = skin.richText.aliases ?? {};
+    }
+    this._bbcodeEnabled = this._richTextExplicit ?? this._fonts.length > 1;
+    if (skin.fontStyles !== void 0) {
+      this._fontStyles = skin.fontStyles.map((fontStyle) => {
+        var _a, _b;
+        return {
+          scale: fontStyle.scale ?? 1,
+          tint: fontStyle.tint !== void 0 ? Color.shared.setValue(fontStyle.tint).toNumber() : void 0,
+          glyphMap: (_a = fontStyle.glyph) == null ? void 0 : _a.map,
+          fixedWidth: (_b = fontStyle.glyph) == null ? void 0 : _b.fixedWidth
+        };
+      });
+    }
+    this.generateText();
+  }
+  applyLegacyAlignmentSkin(skin) {
+    var _a, _b;
+    const legacy = skin.alignment;
+    if (!legacy) return;
+    if (((_a = skin.pivot) == null ? void 0 : _a.horizontal) === void 0 && legacy.horizontal !== void 0) {
+      this._pivotHorizontal = legacy.horizontal;
+    }
+    if (((_b = skin.pivot) == null ? void 0 : _b.vertical) === void 0 && legacy.vertical !== void 0) {
+      this._pivotVertical = legacy.vertical;
+    }
+    if (skin.lineAlign === void 0 && legacy.lineAlign !== void 0) {
+      this._lineAlign = legacy.lineAlign;
+    }
+  }
+  getTextureContext() {
+    return {
+      fonts: this._fonts,
+      glyphMap: this._glyphMap,
+      fixedWidth: this._fixedWidth,
+      fontStyles: this._fontStyles,
+      getFontStyle: (fontIndex) => this.getFontStyle(fontIndex)
+    };
+  }
+  getWrapContext() {
+    const textureCtx = this.getTextureContext();
+    return {
+      wordWrapWidth: this._wordWrapWidth,
+      scaleX: this.scale.x,
+      breakWord: this._breakWord,
+      letterSpacing: this._letterSpacing,
+      glyphScale: this._glyphScale,
+      kerningEnabled: this._kerningEnabled,
+      getKerning: (first, second) => this.getKerning(first, second),
+      getCharMetaWidth: (meta) => measureCharMetaWidth(meta, {
+        ...textureCtx,
+        glyphScale: this._glyphScale,
+        spaceWidth: this._spaceWidth
+      })
+    };
+  }
+  applyFontStyleDefaults(run) {
+    const fontStyle = this._fontStyles[run.fontIndex];
+    const fontStyleScale = (fontStyle == null ? void 0 : fontStyle.scale) ?? 1;
+    return {
+      text: run.text,
+      fontIndex: run.fontIndex,
+      tint: run.tint ?? (fontStyle == null ? void 0 : fontStyle.tint),
+      scale: (run.scale ?? 1) * fontStyleScale
+    };
+  }
+  resolveRuns() {
+    if (this._runsOverride) {
+      return this._runsOverride;
+    }
+    const rawRuns = this._bbcodeEnabled ? parseSpriteTextBBCode(this._text, {
+      defaultFontIndex: 0,
+      aliases: this._bbcodeAliases,
+      fonts: this._fonts
+    }) : [{ text: this._text, fontIndex: 0 }];
+    return rawRuns.map((run) => this.applyFontStyleDefaults(run));
+  }
+  buildTextChunks(runs) {
+    if (this._wordWrap) {
+      const wrappedLines = wrapRuns(runs, this.getWrapContext()).filter((line) => line.length > 0);
+      if (this._allowLineBreak) {
+        return [mergeRunLinesWithNewlines(wrappedLines)];
+      }
+      return wrappedLines;
+    }
+    return [runs];
+  }
+  generateText() {
+    if (!this._font) return;
+    const runs = this.resolveRuns();
+    const textChunks = this.buildTextChunks(runs);
+    let visibleTextLength = 0;
+    const textureCtx = this.getTextureContext();
+    textChunks.forEach((chunk) => {
+      const metas = runsToMetas(chunk);
+      for (const meta of metas) {
+        const char = meta.char;
+        let texture = resolveCharTexture(char, meta.fontIndex, textureCtx);
+        const isSpace = texture === null && char === " ";
+        const isLineBreak = texture === null && char === "\n";
+        const isTab = texture === null && char === "	";
+        if (isSpace || isLineBreak || isTab) {
+          texture = Texture.WHITE;
+        }
+        if (texture !== null) {
+          const effectiveScale = this._glyphScale * meta.runScale;
+          const glyphTint = meta.tint ?? this._tint;
+          if (this._glyphs[visibleTextLength]) {
+            this._glyphs[visibleTextLength].texture = texture;
+            this._glyphs[visibleTextLength].tint = glyphTint;
+            this._glyphs[visibleTextLength].scale.set(effectiveScale, effectiveScale);
+          } else {
+            this._glyphs[visibleTextLength] = new Sprite();
+            this._glyphs[visibleTextLength].anchor.set(this._glyphAnchor.x, this._glyphAnchor.y);
+            this._glyphs[visibleTextLength].tint = glyphTint;
+            this._glyphs[visibleTextLength].texture = texture;
+            this._glyphs[visibleTextLength].scale.set(effectiveScale, effectiveScale);
+          }
+          this._glyphs[visibleTextLength].char = char;
+          this._glyphs[visibleTextLength].charCode = char.charCodeAt(0);
+          this._glyphs[visibleTextLength].fontIndex = meta.fontIndex;
+          this._glyphs[visibleTextLength].runTint = meta.tint;
+          this._glyphs[visibleTextLength].runScale = meta.runScale;
+          this._glyphs[visibleTextLength].isLinebreak = isLineBreak;
+          this._glyphs[visibleTextLength].isSpace = isSpace;
+          this._glyphs[visibleTextLength].isTab = isTab;
+          const ref0Texture = resolveCharTexture("0", meta.fontIndex, textureCtx);
+          const ref0Width = ((ref0Texture == null ? void 0 : ref0Texture.width) ?? 0) * effectiveScale;
+          const ref0Height = ((ref0Texture == null ? void 0 : ref0Texture.height) ?? 0) * effectiveScale;
+          if (isSpace) {
+            this._glyphs[visibleTextLength].width = ref0Width * this._spaceWidth;
+            this._glyphs[visibleTextLength].height = ref0Height;
+            this._glyphs[visibleTextLength].label = "space";
+            this._glyphs[visibleTextLength].alpha = 0;
+          } else if (isTab) {
+            this._glyphs[visibleTextLength].width = ref0Width * this._spaceWidth * 4;
+            this._glyphs[visibleTextLength].height = ref0Height;
+            this._glyphs[visibleTextLength].label = "tab";
+            this._glyphs[visibleTextLength].alpha = 0;
+          } else if (isLineBreak) {
+            this._glyphs[visibleTextLength].width = 0;
+            this._glyphs[visibleTextLength].label = "lineBreak";
+            this._glyphs[visibleTextLength].height = ref0Height;
+            this._glyphs[visibleTextLength].alpha = 0;
+          } else {
+            this._glyphs[visibleTextLength].alpha = 1;
+            this._glyphs[visibleTextLength].label = char;
+            const refWidth = resolveRefWidth(char, meta.fontIndex, textureCtx);
+            if (refWidth > 0) {
+              this._glyphs[visibleTextLength].width = refWidth * effectiveScale;
+            } else {
+              this._glyphs[visibleTextLength].width = ((texture == null ? void 0 : texture.width) ?? 0) * effectiveScale;
+            }
+          }
+          visibleTextLength++;
+        }
+      }
+    });
+    if (this._glyphs.length > visibleTextLength) {
+      const oldChars = this._glyphs.splice(
+        visibleTextLength,
+        this._glyphs.length - visibleTextLength
+      );
+      for (let oIndex = 0; oIndex < oldChars.length; oIndex++) {
+        oldChars[oIndex].destroy({ children: true });
+      }
+    }
+    if (this._glyphs.length > 0) {
+      this.addChild(...this._glyphs);
+    }
+    this.resolveAlignment();
+  }
+  getFontStyle(fontIndex) {
+    return this._fontStyles[fontIndex];
+  }
+  resolveAlignment() {
+    resolveSpriteTextAlignment(this, {
+      glyphs: this._glyphs,
+      lineAlign: this._lineAlign,
+      curveEnabled: this._curveEnabled,
+      curveControlXPercent: this._curveControlXPercent,
+      curveControlYPercent: this._curveControlYPercent,
+      letterSpacing: this._letterSpacing,
+      glyphScale: this._glyphScale,
+      kerningEnabled: this._kerningEnabled,
+      getKerning: (first, second) => this.getKerning(first, second),
+      pivotHorizontal: this._pivotHorizontal,
+      pivotVertical: this._pivotVertical
+    });
+  }
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    if (this._text !== value) {
+      this._text = value;
+      this._runsOverride = null;
+      this.generateText();
+    }
+  }
+  get plainText() {
+    return this._bbcodeEnabled ? stripSpriteTextBBCode(this._text) : this._text;
+  }
+  get font() {
+    return this._font;
+  }
+  set font(value) {
+    if (this._font !== value) {
+      this._fonts = [value];
+      this._font = value;
+      this._bbcodeEnabled = this._richTextExplicit ?? this._fonts.length > 1;
+      this.generateText();
+    }
+  }
+  get fonts() {
+    return [...this._fonts];
+  }
+  set fonts(value) {
+    this._fonts = [...value];
+    this._font = value[0] ?? "";
+    this._bbcodeEnabled = this._richTextExplicit ?? this._fonts.length > 1;
+    this.generateText();
+  }
+  get bbcodeEnabled() {
+    return this._bbcodeEnabled;
+  }
+  setRuns(runs) {
+    this._runsOverride = runs.map((run) => this.applyFontStyleDefaults(run));
+    this.generateText();
+  }
+  get tint() {
+    return this._tint;
+  }
+  set tint(value) {
+    const numericValue = Color.shared.setValue(value ?? 16777215).toNumber();
+    if (this._tint !== numericValue) {
+      this._tint = numericValue;
+      for (let gIndex = 0; gIndex < this._glyphs.length; gIndex++) {
+        if (this._glyphs[gIndex].runTint === void 0) {
+          this._glyphs[gIndex].tint = this._tint;
+        }
+      }
+    }
+  }
+  get pivotHorizontal() {
+    return this._pivotHorizontal;
+  }
+  set pivotHorizontal(value) {
+    if (this._pivotHorizontal !== value) {
+      this._pivotHorizontal = value;
+      this.resolveAlignment();
+    }
+  }
+  get pivotVertical() {
+    return this._pivotVertical;
+  }
+  set pivotVertical(value) {
+    if (this._pivotVertical !== value) {
+      this._pivotVertical = value;
+      this.resolveAlignment();
+    }
+  }
+  /** @deprecated Use pivotHorizontal */
+  get textHAlign() {
+    return this._pivotHorizontal;
+  }
+  /** @deprecated Use pivotHorizontal */
+  set textHAlign(value) {
+    this.pivotHorizontal = value;
+  }
+  /** @deprecated Use pivotVertical */
+  get textVAlign() {
+    return this._pivotVertical;
+  }
+  /** @deprecated Use pivotVertical */
+  set textVAlign(value) {
+    this.pivotVertical = value;
+  }
+  get lineAlign() {
+    return this._lineAlign;
+  }
+  set lineAlign(value) {
+    if (this._lineAlign !== value) {
+      this._lineAlign = value;
+      this.resolveAlignment();
+    }
+  }
+  get letterSpacing() {
+    return this._letterSpacing;
+  }
+  set letterSpacing(value) {
+    if (this._letterSpacing !== value) {
+      this._letterSpacing = value;
+      this.resolveAlignment();
+    }
+  }
+  get spaceWidth() {
+    return this._spaceWidth;
+  }
+  set spaceWidth(value) {
+    if (this._spaceWidth !== value) {
+      this._spaceWidth = value;
+      this.generateText();
+    }
+  }
+  get wordWrap() {
+    return this._wordWrap;
+  }
+  set wordWrap(value) {
+    if (this._wordWrap !== value) {
+      this._wordWrap = value;
+      this.generateText();
+    }
+  }
+  get wordWrapWidth() {
+    return this._wordWrapWidth;
+  }
+  set wordWrapWidth(value) {
+    if (this._wordWrapWidth !== value) {
+      this._wordWrapWidth = value;
+      this.generateText();
+    }
+  }
+  get breakWord() {
+    return this._breakWord;
+  }
+  set breakWord(value) {
+    if (this._breakWord !== value) {
+      this._breakWord = value;
+      this.generateText();
+    }
+  }
+  get allowLineBreak() {
+    return this._allowLineBreak;
+  }
+  set allowLineBreak(value) {
+    if (this._allowLineBreak !== value) {
+      this._allowLineBreak = value;
+      this.generateText();
+    }
+  }
+  getGlyphs() {
+    return this._glyphs;
+  }
+  getGlyphAt(pos) {
+    return this._glyphs[pos];
+  }
+  get glyphCount() {
+    return this._glyphs.length;
+  }
+  get kerningEnabled() {
+    return this._kerningEnabled;
+  }
+  set kerningEnabled(value) {
+    if (this._kerningEnabled !== value) {
+      this._kerningEnabled = value;
+      this.resolveAlignment();
+    }
+  }
+  getKerning(first, second) {
+    if (!this._kerningEnabled) return 0;
+    return getKerningFromMap(this._kerningMap, first, second);
+  }
+  setKerningPairs(pairs) {
+    applyKerningPairs(this._kerningMap, pairs);
+    if (this._kerningEnabled) {
+      this.resolveAlignment();
+    }
+  }
+  setKerning(first, second, amount) {
+    this._kerningMap.set(codesToKey(first, second), amount);
+    if (this._kerningEnabled) {
+      this.resolveAlignment();
+    }
+  }
+  getKerningAmount(first, second) {
+    return this._kerningMap.get(codesToKey(first, second)) ?? 0;
+  }
+  clearKerning() {
+    this._kerningMap.clear();
+    if (this._kerningEnabled) {
+      this.resolveAlignment();
+    }
+  }
+  get glyphAnchor() {
+    return { ...this._glyphAnchor };
+  }
+  set glyphAnchor(value) {
+    if (this._glyphAnchor.x !== value.x || this._glyphAnchor.y !== value.y) {
+      this._glyphAnchor = { ...value };
+      this._glyphs.forEach((glyph) => {
+        if (!glyph.isSpace && !glyph.isLinebreak) {
+          glyph.anchor.set(this._glyphAnchor.x, this._glyphAnchor.y);
+        }
+      });
+      this.resolveAlignment();
+    }
+  }
+  setGlyphAnchor(x, y) {
+    this.glyphAnchor = { x, y: y ?? x };
+  }
+  get curveEnabled() {
+    return this._curveEnabled;
+  }
+  set curveEnabled(value) {
+    if (this._curveEnabled !== value) {
+      this._curveEnabled = value;
+      this.resolveAlignment();
+    }
+  }
+  get curveControlXPercent() {
+    return this._curveControlXPercent;
+  }
+  set curveControlXPercent(value) {
+    if (this._curveControlXPercent !== value) {
+      this._curveControlXPercent = value;
+      if (this._curveEnabled) {
+        this.resolveAlignment();
+      }
+    }
+  }
+  get curveControlYPercent() {
+    return this._curveControlYPercent;
+  }
+  set curveControlYPercent(value) {
+    if (this._curveControlYPercent !== value) {
+      this._curveControlYPercent = value;
+      if (this._curveEnabled) {
+        this.resolveAlignment();
+      }
+    }
+  }
+  get fontSize() {
+    return this._glyphScale;
+  }
+  set fontSize(value) {
+    if (this._glyphScale !== value) {
+      this._glyphScale = value;
+      this.generateText();
+    }
+  }
+};
+
+// ui/components/ButtonComp.ts
+var ButtonComp = class _ButtonComp extends Skinable(Container) {
+  _buttonBehaviors;
+  _background;
+  _placeHolder;
+  _icon;
+  _labelText = null;
+  _buttonLabel = "";
+  _iconTextures = null;
+  _currentState = "up";
+  _enabled = true;
+  _effects = /* @__PURE__ */ new Map();
+  _previousState;
+  _stateDataCache = /* @__PURE__ */ new Map();
+  constructor(options = {}) {
+    super({ label: options.label });
+    this.eventMode = "static";
+    this._background = new Graphics();
+    this._placeHolder = new Container({ label: "placeHolder" });
+    this.addChild(this._background);
+    this.addChild(this._placeHolder);
+    this._buttonBehaviors = new ButtonBehavior();
+    this._buttonBehaviors.attachView(this);
+    this.setupEventListeners();
+    this.enabled = options.enabled !== false;
+    if (options.text) {
+      this._buttonLabel = options.text;
+    }
+    if (options.icon) {
+      this._iconTextures = options.icon;
+    }
+    this.setSkinData(options.skinData || null, { mergeWithExisting: false });
+  }
+  setupEventListeners() {
+    this._buttonBehaviors.on("stateChanged", (newState) => {
+      if (this._enabled) {
+        this.setState(newState.state);
+      }
+    });
+  }
+  setState(state) {
+    this._previousState = this._currentState;
+    this._currentState = state;
+    this.updateVisualState();
+    this.notifyEffectsStateChange();
+  }
+  _lastLayout = null;
+  _lastPlaceHolderLayout = null;
+  _lastBackgroundConfig;
+  _lastIconConfig;
+  _lastTextConfig;
+  _lastZIndex;
+  updateVisualState() {
+    const currentStateData = this.getCurrentStateData();
+    if (!currentStateData) return;
+    this.updateBackground(currentStateData);
+    this.updateIcon(currentStateData);
+    this.updateText(currentStateData);
+    if (JSON.stringify(this._lastLayout) !== JSON.stringify(currentStateData.layout)) {
+      this.layout = currentStateData.layout ?? null;
+      this._lastLayout = currentStateData.layout ?? null;
+    }
+    if (JSON.stringify(this._lastPlaceHolderLayout) !== JSON.stringify(currentStateData.placeHolderLayout)) {
+      this._placeHolder.layout = currentStateData.placeHolderLayout ?? null;
+      this._lastPlaceHolderLayout = currentStateData.placeHolderLayout ?? null;
+    }
+    if (this._lastZIndex !== currentStateData.zIndex) {
+      this.zIndex = currentStateData.zIndex ?? 0;
+      this._lastZIndex = currentStateData.zIndex;
+    }
+  }
+  skinApply(skinData) {
+    this._stateDataCache.clear();
+    this._lastLayout = null;
+    this._lastPlaceHolderLayout = null;
+    this._lastBackgroundConfig = void 0;
+    this._lastIconConfig = void 0;
+    this._lastTextConfig = void 0;
+    this._lastZIndex = void 0;
+    if (skinData) {
+      this.precomputeAllStates(skinData);
+    }
+    this.updateVisualState();
+  }
+  precomputeAllStates(skin) {
+    const allStates = [
+      "up",
+      "over",
+      "down",
+      "disabled",
+      "selected_up",
+      "selected_over",
+      "selected_down",
+      "selected_disabled"
+    ];
+    for (const state of allStates) {
+      const chain = _ButtonComp.stateFallbackChain[state];
+      let base = "";
+      let background;
+      let textConfig;
+      let icon;
+      let layout;
+      let zIndex;
+      let placeHolderLayout;
+      for (const stateKey of chain) {
+        const stateData = skin[stateKey];
+        if (stateData) {
+          if (stateData.base !== void 0) {
+            base = stateData.base;
+          }
+          if (stateData.background !== void 0) {
+            background = background ? merge({}, background, stateData.background) : stateData.background;
+          }
+          if (stateData.textConfig !== void 0) {
+            textConfig = textConfig ? merge({}, textConfig, stateData.textConfig) : stateData.textConfig;
+          }
+          if (stateData.icon !== void 0) {
+            icon = icon ? merge({}, icon, stateData.icon) : stateData.icon;
+          }
+          if (stateData.layout !== void 0) {
+            layout = stateData.layout;
+          }
+          if (stateData.placeHolderLayout !== void 0) {
+            placeHolderLayout = stateData.placeHolderLayout;
+          }
+          if (stateData.zIndex !== void 0) {
+            zIndex = stateData.zIndex;
+          }
+        }
+      }
+      this._stateDataCache.set(state, { base, background, textConfig, icon, layout, placeHolderLayout, zIndex });
+    }
+  }
+  static stateFallbackChain = {
+    // Normal flow: up -> over -> down
+    up: ["up"],
+    over: ["up", "over"],
+    down: ["up", "over", "down"],
+    // Selected flow: selected_up -> selected_over -> selected_down
+    selected_up: ["up", "selected_up"],
+    selected_over: ["up", "selected_up", "selected_over"],
+    selected_down: ["up", "selected_up", "selected_over", "selected_down"],
+    // Disabled states
+    disabled: ["up", "disabled"],
+    selected_disabled: ["up", "selected_up", "selected_disabled"]
+  };
+  getCurrentStateData() {
+    return this._stateDataCache.get(this._currentState) ?? null;
+  }
+  updateBackground(stateData) {
+    const bg = stateData.background;
+    if (!bg) return;
+    if (this._lastBackgroundConfig === bg) return;
+    this._lastBackgroundConfig = bg;
+    const base = stateData.base ?? "";
+    const prevBackground = this._background;
+    if ("texture" in bg) {
+      this._background = this.drawSprite(this._background, bg, base);
+    } else {
+      this._background = this.drawGraphic(this._background, bg);
+    }
+    if (this._background !== prevBackground) {
+      this.addChildAt(this._background, 0);
+    }
+  }
+  updateIcon(stateData) {
+    const iconConfig = stateData.icon;
+    if (!this._iconTextures && this._lastIconConfig === iconConfig) return;
+    this._lastIconConfig = iconConfig;
+    let textureToUse = null;
+    if (this._iconTextures) {
+      if (typeof this._iconTextures === "string") {
+        textureToUse = this._iconTextures;
+      } else {
+        textureToUse = this._iconTextures[this._currentState] || this._iconTextures.up || null;
+      }
+    }
+    const base = stateData.base ?? "";
+    if (textureToUse) {
+      const skinIcon = iconConfig && "texture" in iconConfig ? iconConfig : void 0;
+      const spriteConfig = {
+        texture: textureToUse,
+        alpha: (skinIcon == null ? void 0 : skinIcon.alpha) ?? 1,
+        tint: (skinIcon == null ? void 0 : skinIcon.tint) ?? 16777215,
+        anchor: skinIcon == null ? void 0 : skinIcon.anchor,
+        layout: skinIcon == null ? void 0 : skinIcon.layout
+      };
+      const prevIcon = this._icon;
+      this._icon = this.drawSprite(this._icon, spriteConfig, base);
+      if (this._icon !== prevIcon) {
+        this._placeHolder.addChild(this._icon);
+      }
+      return;
+    }
+    if (iconConfig) {
+      const prevIcon = this._icon;
+      if ("texture" in iconConfig) {
+        this._icon = this.drawSprite(this._icon, iconConfig, base);
+      } else {
+        this._icon = this.drawGraphic(this._icon, iconConfig);
+      }
+      if (this._icon !== prevIcon) {
+        this._placeHolder.addChild(this._icon);
+      }
+      return;
+    }
+    if (this._icon) {
+      this._icon.destroy();
+      this._icon = void 0;
+    }
+  }
+  drawSprite(current, config, base = "") {
+    let sprite;
+    if (current instanceof Sprite) {
+      sprite = current;
+    } else {
+      if (current) {
+        current.destroy();
+      }
+      sprite = new Sprite();
+    }
+    const texturePath = base ? `${base}/${config.texture}` : config.texture;
+    sprite.texture = Texture.from(texturePath);
+    sprite.alpha = config.alpha ?? 1;
+    sprite.tint = config.tint ?? 16777215;
+    if (config.anchor) {
+      sprite.anchor.set(config.anchor.x, config.anchor.y);
+    }
+    sprite.layout = config.layout ?? null;
+    return sprite;
+  }
+  drawGraphic(current, config) {
+    let graphics;
+    if (current instanceof Graphics) {
+      graphics = current;
+    } else {
+      if (current) {
+        current.destroy();
+      }
+      graphics = new Graphics();
+    }
+    graphics.clear();
+    if ("circle" in config) {
+      graphics.circle(config.circle.radius, config.circle.radius, config.circle.radius);
+    } else if ("rect" in config) {
+      graphics.rect(0, 0, config.rect.width, config.rect.height);
+    } else if ("roundRect" in config) {
+      graphics.roundRect(
+        0,
+        0,
+        config.roundRect.width,
+        config.roundRect.height,
+        config.roundRect.radius
+      );
+    }
+    if (config.fill) {
+      graphics.fill(config.fill);
+    }
+    if (config.stroke) {
+      graphics.stroke(config.stroke);
+    }
+    graphics.layout = config.layout ?? null;
+    return graphics;
+  }
+  updateText(stateData) {
+    const textConfig = stateData.textConfig;
+    const hasText = this._buttonLabel || textConfig;
+    this._lastTextConfig = textConfig;
+    if (!hasText) {
+      if (this._labelText) {
+        this._labelText.destroy();
+        this._labelText = null;
+      }
+      return;
+    }
+    const needsRecreate = this._labelText && ((textConfig == null ? void 0 : textConfig.type) === "sprite" && !(this._labelText instanceof SpriteText) || (textConfig == null ? void 0 : textConfig.type) === "text" && this._labelText instanceof SpriteText || !textConfig && this._labelText instanceof SpriteText);
+    if (needsRecreate) {
+      this._labelText.destroy();
+      this._labelText = null;
+    }
+    if (!this._labelText) {
+      if ((textConfig == null ? void 0 : textConfig.type) === "sprite") {
+        this._labelText = new SpriteText({
+          text: this._buttonLabel,
+          skinData: textConfig.spriteData
+        });
+      } else {
+        this._labelText = new Text({
+          text: this._buttonLabel,
+          style: textConfig == null ? void 0 : textConfig.textStyle
+        });
+      }
+      this._placeHolder.addChild(this._labelText);
+    } else {
+      this._labelText.text = this._buttonLabel;
+      if (this._labelText instanceof Text && (textConfig == null ? void 0 : textConfig.textStyle)) {
+        this._labelText.style = textConfig.textStyle;
+      }
+    }
+    if (this._labelText && (textConfig == null ? void 0 : textConfig.layout)) {
+      this._labelText.layout = textConfig.layout;
+    }
+    if (this._labelText instanceof Text && (textConfig == null ? void 0 : textConfig.anchor)) {
+      this._labelText.anchor.set(textConfig.anchor.x, textConfig.anchor.y);
+    }
+  }
+  // Public API
+  get enabled() {
+    return this._enabled;
+  }
+  set enabled(value) {
+    this._enabled = value;
+    this._buttonBehaviors.isEnabled = value;
+    if (!value) {
+      this.setState("disabled");
+    } else {
+      this.setState("up");
+    }
+  }
+  get buttonLabel() {
+    return this._buttonLabel;
+  }
+  set buttonLabel(value) {
+    this._buttonLabel = value;
+    const currentStateData = this.getCurrentStateData();
+    if (currentStateData) {
+      this.updateText(currentStateData);
+    }
+  }
+  set iconTexture(iconTextures) {
+    this._iconTextures = iconTextures;
+    const currentStateData = this.getCurrentStateData();
+    if (currentStateData) {
+      this.updateIcon(currentStateData);
+    }
+  }
+  get iconTexture() {
+    return this._iconTextures;
+  }
+  get text() {
+    return this._labelText;
+  }
+  get background() {
+    return this._background;
+  }
+  get icon() {
+    return this._icon;
+  }
+  get placeHolder() {
+    return this._placeHolder;
+  }
+  get currentState() {
+    return this._currentState;
+  }
+  addButtonEffect(...effects) {
+    effects.forEach((effect) => {
+      this._effects.set(effect.name, effect);
+      effect._onAttach(this, this._currentState);
+    });
+    return this;
+  }
+  removeButtonEffect(name) {
+    const effect = this._effects.get(name);
+    if (effect) {
+      effect._onDetach();
+      return this._effects.delete(name);
+    }
+    return false;
+  }
+  hasButtonEffect(name) {
+    return this._effects.has(name);
+  }
+  getButtonEffect(name) {
+    return this._effects.get(name);
+  }
+  notifyEffectsStateChange() {
+    this._effects.forEach((effect) => {
+      effect._onStateChange(this, this._currentState, this._previousState);
+    });
+  }
+  destroy() {
+    this._effects.forEach((effect) => {
+      effect._onDestroy();
+    });
+    this._effects.clear();
+    this._buttonBehaviors.destroy();
+    super.destroy();
+  }
+  get behavior() {
+    return this._buttonBehaviors;
+  }
+};
+var InputComp = class extends Skinable(Container) {
+  _background;
+  _textMask;
+  _textLabel;
+  _behavior;
+  _currentState = "up";
+  _isFocused = false;
+  constructor(options = {}) {
+    super();
+    this.eventMode = "static";
+    this._background = new Graphics();
+    this._textLabel = new Text({
+      text: "",
+      style: { fontSize: 24, fill: 16777215 }
+    });
+    this._textMask = new Graphics();
+    this.addChild(this._background);
+    this.addChild(this._textLabel);
+    this.addChild(this._textMask);
+    this._behavior = new InputBehavior({ ...options });
+    this._behavior.attachView(this);
+    this._behavior.on("input", (val) => {
+      this._textLabel.text = val;
+    });
+    this._behavior.on("stateChanged", (state) => {
+      this._isFocused = state.focused;
+      if (!state.enabled) {
+        this.setState("disabled");
+      } else if (state.focused) {
+        this.setState("focused");
+      } else {
+        this.setState("up");
+      }
+    });
+    this.eventMode = "static";
+    this.on("pointerover", () => {
+      if (this._behavior.enabled && !this._isFocused) {
+        this.setState("over");
+      }
+    });
+    this.on("pointerout", () => {
+      if (this._behavior.enabled && !this._isFocused) {
+        this.setState("up");
+      }
+    });
+    this.setSkinData(options.skinData || null, { mergeWithExisting: false });
+  }
+  setState(state) {
+    this._currentState = state;
+    this.updateVisualState();
+  }
+  skinApply(_) {
+    this.updateVisualState();
+  }
+  updateVisualState() {
+    const current = this.getCurrentStateData();
+    if (!current) return;
+    this.updateBackground(current);
+    this.updateTextMask(current);
+    if (current.textStyle) {
+      this._textLabel.style = current.textStyle;
+    }
+    this._textLabel.position.set(
+      current.padding || 0,
+      (this._background.height - this._textLabel.height) / 2
+    );
+    this._textLabel.mask = this._textMask;
+    this._behavior.updateDomPosition();
+    this.updateHitArea();
+  }
+  updateTextMask(current) {
+    this._textMask.clear().rect(
+      current.padding || 0,
+      0,
+      this._background.width - (current.padding || 0) * 2,
+      this._background.height
+    ).fill({ color: 16777215, alpha: 1 });
+  }
+  getCurrentStateData() {
+    const skin = this.getSkinData();
+    if (!skin) return null;
+    const baseData = skin.up;
+    const stateData = skin[this._currentState] || {};
+    return merge({}, baseData, stateData);
+  }
+  updateBackground(stateData) {
+    const bg = stateData.background;
+    if (!bg) return;
+    if ("texture" in bg) {
+      if (this._background) {
+        this.removeChild(this._background);
+        this._background.destroy();
+      }
+      const texture = Texture.from(bg.texture);
+      this._background = new Sprite(texture);
+      if (bg.alpha !== void 0) this._background.alpha = bg.alpha;
+      if (bg.tint !== void 0) this._background.tint = bg.tint;
+      this.addChildAt(this._background, 0);
+    } else {
+      if (!(this._background instanceof Graphics)) {
+        if (this._background) {
+          this.removeChild(this._background);
+          this._background.destroy();
+        }
+        this._background = new Graphics();
+        this.addChildAt(this._background, 0);
+      }
+      const graphics = this._background;
+      graphics.clear();
+      if ("circle" in bg) {
+        graphics.circle(0, 0, bg.circle.radius);
+      } else if ("rect" in bg) {
+        graphics.rect(0, 0, bg.rect.width, bg.rect.height);
+      } else if ("roundRect" in bg) {
+        graphics.roundRect(0, 0, bg.roundRect.width, bg.roundRect.height, bg.roundRect.radius);
+      }
+      if (bg.fill) {
+        graphics.fill(bg.fill);
+      }
+      if (bg.stroke) {
+        graphics.stroke(bg.stroke);
+      }
+    }
+  }
+  updateHitArea() {
+    if (this._background) {
+      this.hitArea = new Rectangle(0, 0, this._background.width, this._background.height);
+    }
+  }
+  get behavior() {
+    return this._behavior;
+  }
+  destroy() {
+    this._behavior.destroy();
+    super.destroy();
+  }
+};
+var SliderComp = class extends Skinable(Container) {
+  _slider;
+  _trackContainer;
+  _progressContainer;
+  _knobContainer;
+  _currentState = "up";
+  _progressGraphics = null;
+  _progressConfig = null;
+  constructor(options = {}) {
+    super();
+    this.layout = true;
+    this.eventMode = "passive";
+    this._trackContainer = new Container();
+    this._trackContainer.eventMode = "static";
+    this._progressContainer = new Container();
+    this._progressContainer.eventMode = "none";
+    this._knobContainer = new Container();
+    this._knobContainer.eventMode = "static";
+    this.addChild(this._trackContainer);
+    this.addChild(this._progressContainer);
+    this.addChild(this._knobContainer);
+    this._slider = new ScrollbarBehavior({
+      orientation: "horizontal",
+      min: 0,
+      max: 100,
+      step: 1,
+      value: 0,
+      ...options
+    });
+    this._slider.attachViews(this._trackContainer, this._knobContainer);
+    this.setupEventListeners();
+    if (options.value !== void 0) {
+      this._slider.value = options.value;
+    }
+    this.setSkinData(options.skinData || null, { mergeWithExisting: false });
+  }
+  setupEventListeners() {
+    this._slider.on("knobOver", () => this.setState("over"));
+    this._slider.on("knobDown", () => this.setState("down"));
+    this._slider.on("knobUp", () => this.setState("up"));
+    this._slider.on("knobOut", () => this.setState("up"));
+    this._slider.on("knobClick", () => this.setState("up"));
+    this._slider.on("trackOver", () => this.setState("over"));
+    this._slider.on("trackDown", () => this.setState("down"));
+    this._slider.on("trackUp", () => this.setState("up"));
+    this._slider.on("trackOut", () => this.setState("up"));
+    this._slider.on("scroll", (_value, percentage) => {
+      this.updateProgressWidth(percentage);
+    });
+  }
+  setState(state) {
+    this._currentState = state;
+    this.updateVisualState();
+  }
+  updateVisualState() {
+    const currentStateData = this.getCurrentStateData();
+    if (!currentStateData) return;
+    if (currentStateData.orientation) {
+      this._slider.orientation = currentStateData.orientation;
+    }
+    this.updateTrack(currentStateData);
+    this.updateProgress(currentStateData);
+    this.updateKnob(currentStateData);
+    if (currentStateData.margin !== void 0) {
+      this._slider.margin = currentStateData.margin;
+    }
+    if (currentStateData.scale !== void 0) {
+      this.scale.set(currentStateData.scale);
+    }
+    this.boundsArea = this._trackContainer.getLocalBounds().rectangle;
+  }
+  skinApply(_) {
+    this.updateVisualState();
+  }
+  getCurrentStateData() {
+    const skin = this.getSkinData();
+    if (!skin) return null;
+    const baseData = skin.up;
+    const stateData = skin[this._currentState] || {};
+    return merge({}, baseData, stateData);
+  }
+  updateTrack(stateData) {
+    var _a, _b;
+    const trackConfig = stateData.track;
+    if (!trackConfig) return;
+    this._trackContainer.removeChildren();
+    let newTrack;
+    if ("texture" in trackConfig) {
+      newTrack = new Sprite(Texture.from(trackConfig.texture));
+      if (trackConfig.alpha !== void 0) newTrack.alpha = trackConfig.alpha;
+      if (trackConfig.tint !== void 0) newTrack.tint = trackConfig.tint;
+    } else {
+      newTrack = new Graphics();
+      if ("circle" in trackConfig) {
+        newTrack.circle(0, 0, trackConfig.circle.radius);
+      } else if ("rect" in trackConfig) {
+        newTrack.rect(0, 0, trackConfig.rect.width, trackConfig.rect.height);
+      } else if ("roundRect" in trackConfig) {
+        newTrack.roundRect(
+          0,
+          0,
+          trackConfig.roundRect.width,
+          trackConfig.roundRect.height,
+          trackConfig.roundRect.radius
+        );
+      }
+      if (trackConfig.fill) {
+        newTrack.fill(trackConfig.fill);
+      }
+      if (trackConfig.stroke) {
+        newTrack.stroke(trackConfig.stroke);
+      }
+    }
+    this._trackContainer.addChild(newTrack);
+    (_b = (_a = this._slider).refreshSizes) == null ? void 0 : _b.call(_a);
+  }
+  updateProgress(stateData) {
+    const progressConfig = stateData.progress;
+    this._progressContainer.removeChildren();
+    if (!progressConfig) {
+      this._progressGraphics = null;
+      this._progressConfig = null;
+      return;
+    }
+    this._progressConfig = progressConfig;
+    this._progressGraphics = new Graphics();
+    this._progressContainer.addChild(this._progressGraphics);
+    this.updateProgressWidth(this._slider.percentage);
+  }
+  updateProgressWidth(percentage) {
+    if (!this._progressGraphics || !this._progressConfig) return;
+    this._progressGraphics.clear();
+    const trackWidth = this.getTrackWidth();
+    const trackHeight = this.getTrackHeight();
+    const trackRadius = this.getTrackRadius();
+    const progressWidth = trackWidth * percentage;
+    if (progressWidth <= 0 || trackHeight <= 0) return;
+    if (trackRadius > 0) {
+      const radius = Math.min(trackRadius, progressWidth / 2);
+      this._progressGraphics.roundRect(0, 0, progressWidth, trackHeight, radius);
+    } else {
+      this._progressGraphics.rect(0, 0, progressWidth, trackHeight);
+    }
+    if (this._progressConfig.fill) {
+      this._progressGraphics.fill(this._progressConfig.fill);
+    }
+    if (this._progressConfig.stroke) {
+      this._progressGraphics.stroke(this._progressConfig.stroke);
+    }
+  }
+  getTrackWidth() {
+    var _a;
+    const skin = this.getSkinData();
+    if (!((_a = skin == null ? void 0 : skin.up) == null ? void 0 : _a.track)) return 0;
+    const track = skin.up.track;
+    if ("texture" in track) return this._trackContainer.width;
+    if ("roundRect" in track) return track.roundRect.width;
+    if ("rect" in track) return track.rect.width;
+    return 0;
+  }
+  getTrackHeight() {
+    var _a;
+    const skin = this.getSkinData();
+    if (!((_a = skin == null ? void 0 : skin.up) == null ? void 0 : _a.track)) return 0;
+    const track = skin.up.track;
+    if ("texture" in track) return this._trackContainer.height;
+    if ("roundRect" in track) return track.roundRect.height;
+    if ("rect" in track) return track.rect.height;
+    return 0;
+  }
+  getTrackRadius() {
+    var _a;
+    const skin = this.getSkinData();
+    if (!((_a = skin == null ? void 0 : skin.up) == null ? void 0 : _a.track)) return 0;
+    const track = skin.up.track;
+    if ("roundRect" in track) return track.roundRect.radius;
+    return 0;
+  }
+  updateKnob(stateData) {
+    var _a, _b;
+    const knobConfig = stateData.knob;
+    if (!knobConfig) return;
+    this._knobContainer.removeChildren();
+    let newKnob;
+    if ("texture" in knobConfig) {
+      newKnob = new Sprite(Texture.from(knobConfig.texture));
+      if (knobConfig.alpha !== void 0) newKnob.alpha = knobConfig.alpha;
+      if (knobConfig.tint !== void 0) newKnob.tint = knobConfig.tint;
+      newKnob.anchor.set(0.5, 0.5);
+    } else {
+      newKnob = new Graphics();
+      if ("circle" in knobConfig) {
+        newKnob.circle(0, 0, knobConfig.circle.radius);
+      } else if ("rect" in knobConfig) {
+        newKnob.rect(0, 0, knobConfig.rect.width, knobConfig.rect.height);
+      } else if ("roundRect" in knobConfig) {
+        newKnob.roundRect(
+          0,
+          0,
+          knobConfig.roundRect.width,
+          knobConfig.roundRect.height,
+          knobConfig.roundRect.radius
+        );
+      }
+      if (knobConfig.fill) {
+        newKnob.fill(knobConfig.fill);
+      }
+      if (knobConfig.stroke) {
+        newKnob.stroke(knobConfig.stroke);
+      }
+      if ("circle" in knobConfig) {
+        newKnob.pivot.set(0, 0);
+      } else if ("rect" in knobConfig) {
+        newKnob.pivot.set(knobConfig.rect.width / 2, knobConfig.rect.height / 2);
+      } else if ("roundRect" in knobConfig) {
+        newKnob.pivot.set(knobConfig.roundRect.width / 2, knobConfig.roundRect.height / 2);
+      }
+    }
+    this._knobContainer.addChild(newKnob);
+    (_b = (_a = this._slider).refreshSizes) == null ? void 0 : _b.call(_a);
+  }
+  // When the component is destroyed, clean up event listeners
+  destroy() {
+    this._slider.destroy();
+    super.destroy();
+  }
+  get behavior() {
+    return this._slider;
+  }
+  // Refresh sizes (call when track/knob size changes)
+  refreshSizes() {
+    this._slider.refreshSizes();
+  }
+};
+function createSpriteButtonSkin(config) {
+  const {
+    states = ["up", "over", "down", "disabled"],
+    separator = "_",
+    background,
+    icon,
+    textStyle
+  } = config;
+  const skin = {};
+  states.forEach((state) => {
+    if (background) {
+      if (background.perState ?? true) {
+        if (!skin[state]) skin[state] = {};
+        skin[state].background = {
+          texture: `${background.texture}${separator}${state}`,
+          ...background.config
+        };
+      } else if (state === "up") {
+        if (!skin[state]) skin[state] = {};
+        skin[state].background = {
+          texture: background.texture,
+          ...background.config
+        };
+      }
+    }
+    if (textStyle) {
+      if (!skin[state]) skin[state] = {};
+      skin[state].textConfig = { type: "text", textStyle };
+    }
+    if (icon) {
+      if (icon.perState) {
+        if (!skin[state]) skin[state] = {};
+        skin[state].icon = {
+          texture: `${icon.texture}${separator}${state}`,
+          ...icon.config
+        };
+      } else if (state === "up") {
+        if (!skin[state]) skin[state] = {};
+        skin[state].icon = {
+          texture: icon.texture,
+          ...icon.config
+        };
+      }
+    }
+  });
+  return skin;
+}
+function createButtonEffect(config) {
+  return {
+    name: config.name,
+    _onAttach(button, state) {
+      if (config.onAttach) {
+        const ctx = {
+          button,
+          state,
+          background: button.background,
+          icon: button.icon,
+          text: button.text,
+          placeHolder: button.placeHolder
+        };
+        config.onAttach(ctx);
+      }
+    },
+    _onDetach() {
+      var _a;
+      (_a = config.onDetach) == null ? void 0 : _a.call(config);
+    },
+    _onStateChange(button, state, previousState) {
+      if (config.onStateChange) {
+        const ctx = {
+          button,
+          state,
+          previousState,
+          background: button.background,
+          icon: button.icon,
+          text: button.text,
+          placeHolder: button.placeHolder
+        };
+        config.onStateChange(ctx);
+      }
+    },
+    _onDestroy() {
+      var _a;
+      (_a = config.onDestroy) == null ? void 0 : _a.call(config);
+    }
+  };
+}
+function createToggleIconSlideEffect(options) {
+  const { duration = 0.1, ease = "expo.out", offset = 5 } = options ?? {};
+  const updatePlaceholderPosition = (ctx, animDuration) => {
+    if (!ctx.placeHolder || !ctx.background) return;
+    const isSelected = ctx.state.startsWith("selected_");
+    const bgWidth = ctx.background.width;
+    const placeHolderBounds = ctx.placeHolder.getLocalBounds();
+    if (ctx.icon) {
+      const targetX = isSelected ? bgWidth - (placeHolderBounds.width + placeHolderBounds.x) - offset * 2 : -placeHolderBounds.x + offset;
+      import('gsap').then(({ default: gsap }) => {
+        gsap.to(ctx.placeHolder, {
+          x: targetX,
+          duration: animDuration,
+          ease
+        });
+      });
+    }
+  };
+  return createButtonEffect({
+    name: "toggleIconSlide",
+    onAttach(ctx) {
+      updatePlaceholderPosition(ctx, 0);
+    },
+    onStateChange(ctx) {
+      updatePlaceholderPosition(ctx, duration);
+    },
+    onDetach() {
+    }
+  });
+}
+function createFlatButtonEffect(options) {
+  const {
+    overAlpha = 0.85,
+    downScale = 0.95,
+    downAlpha = 0.9,
+    disabledAlpha = 0.5,
+    duration = 0.12,
+    ease = "power2.out"
+  } = options ?? {};
+  let desatFilter = null;
+  const isOverState = (state) => state === "over" || state === "selected_over";
+  const isDownState = (state) => state === "down" || state === "selected_down";
+  const isDisabledState = (state) => state === "disabled" || state === "selected_disabled";
+  const applyState = (ctx, animDuration) => {
+    import('gsap').then(({ default: gsap }) => {
+      gsap.killTweensOf(ctx.button.scale);
+      gsap.killTweensOf(ctx.button);
+      if (isOverState(ctx.state)) {
+        gsap.to(ctx.button, { alpha: 1, duration: animDuration, ease });
+        gsap.to(ctx.button.scale, { x: 1, y: 1, duration: animDuration, ease });
+        gsap.to(ctx.background, { alpha: overAlpha, duration: animDuration, ease });
+        const content = ctx.icon ?? ctx.text;
+        if (content) {
+          gsap.killTweensOf(content);
+          gsap.to(content, { alpha: 1, duration: animDuration, ease });
+        }
+        removeDesatFilter(ctx);
+      } else if (isDownState(ctx.state)) {
+        gsap.to(ctx.button, { alpha: downAlpha, duration: animDuration, ease });
+        gsap.to(ctx.background, { alpha: 1, duration: animDuration, ease });
+        const content = ctx.icon ?? ctx.text;
+        if (content) {
+          gsap.killTweensOf(content);
+          gsap.to(content, { alpha: 1, duration: animDuration, ease });
+        }
+        removeDesatFilter(ctx);
+      } else if (isDisabledState(ctx.state)) {
+        gsap.to(ctx.button, { alpha: disabledAlpha, duration: animDuration, ease });
+        gsap.to(ctx.button.scale, { x: 1, y: 1, duration: animDuration, ease });
+        gsap.to(ctx.background, { alpha: 1, duration: animDuration, ease });
+        applyDesatFilter(ctx);
+      } else {
+        gsap.to(ctx.button, { alpha: 1, duration: animDuration, ease });
+        gsap.to(ctx.button.scale, { x: 1, y: 1, duration: animDuration, ease });
+        gsap.to(ctx.background, { alpha: 1, duration: animDuration, ease });
+        const content = ctx.icon ?? ctx.text;
+        if (content) {
+          gsap.killTweensOf(content);
+          gsap.to(content, { alpha: 1, duration: animDuration, ease });
+        }
+        removeDesatFilter(ctx);
+      }
+    });
+  };
+  const applyDesatFilter = (ctx) => {
+    if (!desatFilter) {
+      desatFilter = new ColorMatrixFilter();
+    }
+    desatFilter.desaturate();
+    const filters = ctx.button.filters ?? [];
+    const arr = Array.isArray(filters) ? filters : [filters];
+    if (!arr.includes(desatFilter)) {
+      ctx.button.filters = [...arr, desatFilter];
+    }
+  };
+  const removeDesatFilter = (ctx) => {
+    if (!desatFilter) return;
+    const filters = ctx.button.filters;
+    if (filters) {
+      const arr = Array.isArray(filters) ? filters : [filters];
+      const idx = arr.indexOf(desatFilter);
+      if (idx !== -1) {
+        const next = arr.filter((f) => f !== desatFilter);
+        ctx.button.filters = next.length > 0 ? next : null;
+      }
+    }
+  };
+  const cleanup = (button) => {
+    import('gsap').then(({ default: gsap }) => {
+      if (button) {
+        gsap.killTweensOf(button.scale);
+        gsap.killTweensOf(button);
+        gsap.killTweensOf(button.background);
+        const content = button.icon ?? button.text;
+        if (content) gsap.killTweensOf(content);
+      }
+    });
+    desatFilter = null;
+  };
+  let _button = null;
+  return createButtonEffect({
+    name: "flatButton",
+    onAttach(ctx) {
+      _button = ctx.button;
+      applyState(ctx, 0);
+    },
+    onStateChange(ctx) {
+      applyState(ctx, duration);
+    },
+    onDetach() {
+      if (_button) {
+        cleanup(_button);
+        _button = null;
+      }
+    },
+    onDestroy() {
+      if (_button) {
+        cleanup(_button);
+        _button = null;
+      }
+    }
+  });
+}
+function rectToBoundsLike(r) {
+  const left = r.x;
+  const top = r.y;
+  const width = r.width;
+  const height = r.height;
+  const right = left + width;
+  const bottom = top + height;
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    width,
+    height,
+    centerX: left + width / 2,
+    centerY: top + height / 2
+  };
+}
+function getCommonParent(items) {
+  var _a;
+  const parent = (_a = items[0]) == null ? void 0 : _a.parent;
+  if (!parent) throw new Error("Items must have a parent");
+  for (const it of items) {
+    if (it.parent !== parent) throw new Error("All items must share the same parent");
+  }
+  return parent;
+}
+function getLocalBoundsInParent(child, parent) {
+  const world = child.getBounds();
+  const topLeft = parent.toLocal(new Point(world.x, world.y));
+  const bottomRight = parent.toLocal(new Point(world.x + world.width, world.y + world.height));
+  const left = Math.min(topLeft.x, bottomRight.x);
+  const right = Math.max(topLeft.x, bottomRight.x);
+  const top = Math.min(topLeft.y, bottomRight.y);
+  const bottom = Math.max(topLeft.y, bottomRight.y);
+  const width = right - left;
+  const height = bottom - top;
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    width,
+    height,
+    centerX: left + width / 2,
+    centerY: top + height / 2
+  };
+}
+function getSelectionBounds(items, parent) {
+  const p = parent ?? getCommonParent(items);
+  let left = Infinity, right = -Infinity, top = Infinity, bottom = -Infinity;
+  for (const it of items) {
+    const b = getLocalBoundsInParent(it, p);
+    left = Math.min(left, b.left);
+    right = Math.max(right, b.right);
+    top = Math.min(top, b.top);
+    bottom = Math.max(bottom, b.bottom);
+  }
+  const width = right - left;
+  const height = bottom - top;
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    width,
+    height,
+    centerX: left + width / 2,
+    centerY: top + height / 2
+  };
+}
+function getReferenceBounds(items, options) {
+  if (options == null ? void 0 : options.container) {
+    const box = options.container;
+    if (box instanceof Container) {
+      const parent2 = box;
+      const world = parent2.getBounds();
+      const topLeft = parent2.toLocal(new Point(world.x, world.y));
+      const bottomRight = parent2.toLocal(new Point(world.x + world.width, world.y + world.height));
+      const left = Math.min(topLeft.x, bottomRight.x);
+      const right = Math.max(topLeft.x, bottomRight.x);
+      const top = Math.min(topLeft.y, bottomRight.y);
+      const bottom = Math.max(topLeft.y, bottomRight.y);
+      const width = right - left;
+      const height = bottom - top;
+      return {
+        ref: {
+          left,
+          right,
+          top,
+          bottom,
+          width,
+          height,
+          centerX: left + width / 2,
+          centerY: top + height / 2
+        },
+        parent: parent2
+      };
+    } else {
+      const parent2 = getCommonParent(items);
+      return { ref: rectToBoundsLike(box), parent: parent2 };
+    }
+  }
+  const parent = getCommonParent(items);
+  if (options == null ? void 0 : options.key) {
+    if (options.key.parent !== parent) throw new Error("key and items must share the same parent");
+    return { ref: getLocalBoundsInParent(options.key, parent), parent };
+  }
+  return { ref: getSelectionBounds(items, parent), parent };
+}
+function nudgeX(child, dx) {
+  child.x += dx;
+}
+function nudgeY(child, dy) {
+  child.y += dy;
+}
+
+// layout/Flow.ts
+function normalizeGap(opts) {
+  if (typeof opts.gap === "number") return { h: opts.gap, v: opts.gap };
+  if (typeof opts.gap === "object" && opts.gap) return { h: opts.gap.h ?? 0, v: opts.gap.v ?? 0 };
+  const h = opts.columnGap ?? 0;
+  const v = opts.rowGap ?? 0;
+  return { h, v };
+}
+function normalizePadding(p) {
+  if (typeof p === "number") return { top: p, right: p, bottom: p, left: p };
+  return { top: (p == null ? void 0 : p.top) ?? 0, right: (p == null ? void 0 : p.right) ?? 0, bottom: (p == null ? void 0 : p.bottom) ?? 0, left: (p == null ? void 0 : p.left) ?? 0 };
+}
+function normalizeMargin(value) {
+  if (value === void 0) {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  if (typeof value === "number") {
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  const top = value.top ?? value.y ?? 0;
+  const bottom = value.bottom ?? value.y ?? 0;
+  const left = value.left ?? value.x ?? 0;
+  const right = value.right ?? value.x ?? 0;
+  return { top, right, bottom, left };
+}
+function getFlowBounds(items, opts, parent) {
+  const pad = normalizePadding(opts.padding);
+  if (opts.wrap === "bounds" && opts.bounds) {
+    let r;
+    if (opts.bounds instanceof Rectangle) {
+      r = opts.bounds;
+    } else {
+      const b = getLocalBoundsInParent(opts.bounds, parent);
+      r = new Rectangle(b.left, b.top, b.width, b.height);
+    }
+    return new Rectangle(
+      r.x + pad.left,
+      r.y + pad.top,
+      Math.max(0, r.width - pad.left - pad.right),
+      Math.max(0, r.height - pad.top - pad.bottom)
+    );
+  }
+  const sel = getSelectionBounds(items, parent);
+  return new Rectangle(
+    // TODO Not sure side effects check this out latter
+    /*sel.left +*/
+    pad.left,
+    /*sel.top + */
+    pad.top,
+    Math.max(0, sel.width - pad.left - pad.right),
+    Math.max(0, sel.height - pad.top - pad.bottom)
+  );
+}
+var Flow = class {
+  /**
+   * Arranges containers in a flexbox-like layout.
+   *
+   * This method modifies container positions in-place to create the desired layout.
+   * Items are sorted (if order function provided) and then arranged according to
+   * direction, wrapping, alignment, and justification settings.
+   *
+   * @param items - Array of containers to layout
+   * @param options - Layout configuration options
+   *
+   * @example
+   * ```typescript
+   * // Simple horizontal row
+   * Flow.layout(items, { direction: 'row', gap: 10 });
+   *
+   * // Grid with 4 columns
+   * Flow.layout(items, {
+   *   direction: 'row',
+   *   wrap: 'count',
+   *   columnCount: 4,
+   *   gap: { h: 10, v: 15 }
+   * });
+   *
+   * // Centered vertical list
+   * Flow.layout(items, {
+   *   direction: 'column',
+   *   align: 'center',
+   *   gap: 20
+   * });
+   * ```
+   */
+  static layout(items, options) {
+    if (!items || items.length === 0) return;
+    const opts = {
+      direction: "row",
+      wrap: "none",
+      gap: 0,
+      justify: "start",
+      align: "start",
+      ...options
+    };
+    const parent = getCommonParent(items);
+    const gap = normalizeGap(opts);
+    const dir = opts.direction ?? "row";
+    const wrap = opts.wrap ?? "none";
+    const ordered = opts.order ? [...items].sort(opts.order) : [...items];
+    const area = getFlowBounds(ordered, opts, parent);
+    if (wrap === "count") {
+      if (dir === "row") {
+        const cols = opts.columnCount ?? (opts.rowCount ? Math.ceil(ordered.length / opts.rowCount) : ordered.length);
+        const lines = [];
+        for (let i = 0; i < ordered.length; i += cols) lines.push(ordered.slice(i, i + cols));
+        layoutLinesRow(lines, parent, area, gap, opts.justify, opts.align, opts.margins);
+      } else {
+        const rows = opts.rowCount ?? (opts.columnCount ? Math.ceil(ordered.length / opts.columnCount) : ordered.length);
+        const columns = [];
+        for (let i = 0; i < ordered.length; i += rows) columns.push(ordered.slice(i, i + rows));
+        layoutLinesColumn(columns, parent, area, gap, opts.justify, opts.align, opts.margins);
+      }
+      return;
+    }
+    if (wrap === "bounds") {
+      if (dir === "row") {
+        const lines = [];
+        let line = [];
+        let lineW = 0;
+        for (const it of ordered) {
+          const b = getLocalBoundsInParent(it, parent);
+          const needed = line.length === 0 ? b.width : gap.h + b.width;
+          if (line.length > 0 && lineW + needed > area.width) {
+            lines.push(line);
+            line = [it];
+            lineW = b.width;
+          } else {
+            line.push(it);
+            lineW += needed;
+          }
+        }
+        if (line.length) lines.push(line);
+        layoutLinesRow(lines, parent, area, gap, opts.justify, opts.align, opts.margins);
+      } else {
+        const columns = [];
+        let col = [];
+        let colH = 0;
+        for (const it of ordered) {
+          const b = getLocalBoundsInParent(it, parent);
+          const needed = col.length === 0 ? b.height : gap.v + b.height;
+          if (col.length > 0 && colH + needed > area.height) {
+            columns.push(col);
+            col = [it];
+            colH = b.height;
+          } else {
+            col.push(it);
+            colH += needed;
+          }
+        }
+        if (col.length) columns.push(col);
+        layoutLinesColumn(columns, parent, area, gap, opts.justify, opts.align, opts.margins);
+      }
+      return;
+    }
+    if (wrap === "none") {
+      if (dir === "row") {
+        const lines = [ordered];
+        layoutLinesRow(lines, parent, area, gap, opts.justify, opts.align, opts.margins);
+      } else {
+        const columns = [ordered];
+        layoutLinesColumn(columns, parent, area, gap, opts.justify, opts.align, opts.margins);
+      }
+    }
+  }
+};
+function layoutLinesRow(lines, parent, area, gap, justify, align, margins) {
+  let y = area.y;
+  for (const line of lines) {
+    let contentW = 0;
+    let lineH = 0;
+    const sizes = line.map((it) => {
+      const b = getLocalBoundsInParent(it, parent);
+      lineH = Math.max(lineH, b.height);
+      return b;
+    });
+    if (line.length > 0) contentW = sizes.reduce((s, b, i) => s + b.width + (i > 0 ? gap.h : 0), 0);
+    let x = area.x;
+    if (justify === "center") {
+      x += Math.max(0, (area.width - contentW) / 2);
+    } else if (justify === "end") {
+      x += Math.max(0, area.width - contentW);
+    } else if (justify === "space-between" && line.length > 1) {
+      const free = Math.max(0, area.width - sizes.reduce((s, b) => s + b.width, 0));
+      const g = free / (line.length - 1);
+      positionRow(line, sizes, parent, x, y, lineH, { h: g, v: gap.v }, align, margins);
+      y += lineH + gap.v;
+      continue;
+    } else if (justify === "space-around" && line.length > 0) {
+      const free = Math.max(0, area.width - sizes.reduce((s, b) => s + b.width, 0));
+      const g = free / line.length;
+      x += g / 2;
+      positionRow(line, sizes, parent, x, y, lineH, { h: g, v: gap.v }, align, margins);
+      y += lineH + gap.v;
+      continue;
+    } else if (justify === "space-evenly" && line.length > 0) {
+      const free = Math.max(0, area.width - sizes.reduce((s, b) => s + b.width, 0));
+      const g = free / (line.length + 1);
+      x += g;
+      positionRow(line, sizes, parent, x, y, lineH, { h: g, v: gap.v }, align, margins);
+      y += lineH + gap.v;
+      continue;
+    }
+    positionRow(line, sizes, parent, x, y, lineH, gap, align, margins);
+    y += lineH + gap.v;
+  }
+}
+function positionRow(line, sizes, parent, x, y, lineH, gap, align, margins) {
+  let cursor = x;
+  for (let i = 0; i < line.length; i++) {
+    const it = line[i];
+    const b = sizes[i];
+    const margin = normalizeMargin(margins == null ? void 0 : margins[i]);
+    const dx = cursor + margin.left - b.left;
+    let dy = 0;
+    if (align === "start") dy = y + margin.top - b.top;
+    else if (align === "center") dy = y + margin.top + (lineH - b.height) / 2 - b.top;
+    else dy = y + margin.top + (lineH - b.height) - b.top;
+    nudgeX(it, dx);
+    nudgeY(it, dy);
+    cursor += margin.left + b.width + margin.right + gap.h;
+  }
+}
+function layoutLinesColumn(columns, parent, area, gap, justify, align, margins) {
+  let x = area.x;
+  for (const col of columns) {
+    let contentH = 0;
+    let colW = 0;
+    const sizes = col.map((it) => {
+      const b = getLocalBoundsInParent(it, parent);
+      colW = Math.max(colW, b.width);
+      return b;
+    });
+    if (col.length > 0) contentH = sizes.reduce((s, b, i) => s + b.height + (i > 0 ? gap.v : 0), 0);
+    let y = area.y;
+    if (justify === "center") {
+      y += Math.max(0, (area.height - contentH) / 2);
+    } else if (justify === "end") {
+      y += Math.max(0, area.height - contentH);
+    } else if (justify === "space-between" && col.length > 1) {
+      const free = Math.max(0, area.height - sizes.reduce((s, b) => s + b.height, 0));
+      const g = free / (col.length - 1);
+      positionColumn(col, sizes, parent, x, y, colW, { h: gap.h, v: g }, align, margins);
+      x += colW + gap.h;
+      continue;
+    } else if (justify === "space-around" && col.length > 0) {
+      const free = Math.max(0, area.height - sizes.reduce((s, b) => s + b.height, 0));
+      const g = free / col.length;
+      y += g / 2;
+      positionColumn(col, sizes, parent, x, y, colW, { h: gap.h, v: g }, align, margins);
+      x += colW + gap.h;
+      continue;
+    } else if (justify === "space-evenly" && col.length > 0) {
+      const free = Math.max(0, area.height - sizes.reduce((s, b) => s + b.height, 0));
+      const g = free / (col.length + 1);
+      y += g;
+      positionColumn(col, sizes, parent, x, y, colW, { h: gap.h, v: g }, align, margins);
+      x += colW + gap.h;
+      continue;
+    }
+    positionColumn(col, sizes, parent, x, y, colW, gap, align, margins);
+    x += colW + gap.h;
+  }
+}
+function positionColumn(col, sizes, parent, x, y, colW, gap, align, margins) {
+  let cursor = y;
+  for (let i = 0; i < col.length; i++) {
+    const it = col[i];
+    const b = sizes[i];
+    const margin = normalizeMargin(margins == null ? void 0 : margins[i]);
+    let dx = 0;
+    if (align === "start") dx = x + margin.left - b.left;
+    else if (align === "center") dx = x + margin.left + (colW - b.width) / 2 - b.left;
+    else dx = x + margin.left + (colW - b.width) - b.left;
+    const dy = cursor + margin.top - b.top;
+    nudgeX(it, dx);
+    nudgeY(it, dy);
+    cursor += margin.top + b.height + margin.bottom + gap.v;
+  }
+}
+
+// layout/Align.ts
+var Align = class {
+  /**
+   * Aligns containers to the left edge of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   *
+   * @example
+   * ```typescript
+   * // Align to selection bounds (default)
+   * Align.left([sprite1, sprite2, sprite3]);
+   *
+   * // Align to container
+   * Align.left([sprite1, sprite2], { container: bounds });
+   * ```
+   */
+  static left(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeX(it, ref.left - b.left);
+    }
+  }
+  /**
+   * Aligns containers to the horizontal center of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   *
+   * @example
+   * ```typescript
+   * // Center horizontally within selection
+   * Align.hCenter([sprite1, sprite2, sprite3]);
+   * ```
+   */
+  static hCenter(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeX(it, ref.centerX - b.centerX);
+    }
+  }
+  /**
+   * Aligns containers to the right edge of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   */
+  static right(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeX(it, ref.right - b.right);
+    }
+  }
+  /**
+   * Aligns containers to the top edge of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   */
+  static top(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeY(it, ref.top - b.top);
+    }
+  }
+  /**
+   * Aligns containers to the vertical center of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   */
+  static vCenter(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeY(it, ref.centerY - b.centerY);
+    }
+  }
+  /**
+   * Aligns containers to the bottom edge of the reference bounds.
+   *
+   * @param items - Array of containers to align
+   * @param options - Alignment options to control the reference point
+   */
+  static bottom(items, options) {
+    const { ref, parent } = getReferenceBounds(items, options);
+    for (const it of items) {
+      const b = getLocalBoundsInParent(it, parent);
+      nudgeY(it, ref.bottom - b.bottom);
+    }
+  }
+};
+
+// ui/components/StepperComp.ts
+var StepperComp = class extends Skinable(Container) {
+  _minusButton;
+  _plusButton;
+  _displayContainer;
+  _displayBackground;
+  _displayText;
+  _value = 0;
+  _min = 0;
+  _max = 100;
+  _step = 1;
+  _formatFunction = (val) => val.toString();
+  _enabled = true;
+  _currentState = "up";
+  _holdEnabled = true;
+  _holdDelay = 500;
+  _holdInterval = 100;
+  constructor(options = {}) {
+    super();
+    this.layout = true;
+    this.eventMode = "passive";
+    this._min = options.min ?? 0;
+    this._max = options.max ?? 100;
+    this._step = options.step ?? 1;
+    this._value = options.value ?? this._min;
+    if (options.formatFunction) {
+      this._formatFunction = options.formatFunction;
+    }
+    this._holdEnabled = options.holdEnabled ?? true;
+    this._holdDelay = options.holdDelay ?? 500;
+    this._holdInterval = options.holdInterval ?? 100;
+    this._minusButton = new ButtonComp();
+    this._minusButton.eventMode = "static";
+    this._minusButton.behavior.holdDelay = this._holdDelay;
+    this._minusButton.behavior.holdInterval = this._holdInterval;
+    this.addChild(this._minusButton);
+    this._displayContainer = new Container();
+    this._displayContainer.eventMode = "passive";
+    this._displayBackground = new Graphics();
+    this._displayText = new Text({
+      text: this._formatFunction(this._value),
+      style: { fontSize: 24, fill: 16777215 }
+    });
+    this._displayContainer.addChild(this._displayBackground);
+    this._displayContainer.addChild(this._displayText);
+    this.addChild(this._displayContainer);
+    this._plusButton = new ButtonComp();
+    this._plusButton.eventMode = "static";
+    this._plusButton.behavior.holdDelay = this._holdDelay;
+    this._plusButton.behavior.holdInterval = this._holdInterval;
+    this.addChild(this._plusButton);
+    this.setupEventListeners();
+    this.enabled = options.enabled !== false;
+    this.setSkinData(options.skinData || null, { mergeWithExisting: false });
+    this.updateButtonStates();
+  }
+  setupEventListeners() {
+    this._minusButton.behavior.on("click", () => this.decrementValue());
+    this._plusButton.behavior.on("click", () => this.incrementValue());
+    this._minusButton.behavior.on("holdStart", () => {
+      if (this._holdEnabled) {
+        this.value = this._min;
+      }
+    });
+    this._plusButton.behavior.on("holdStart", () => {
+      if (this._holdEnabled) {
+        this.value = this._max;
+      }
+    });
+    this._minusButton.behavior.on("stateChanged", () => this.updateParentState());
+    this._plusButton.behavior.on("stateChanged", () => this.updateParentState());
+  }
+  updateParentState() {
+    if (!this._enabled) {
+      this.setState("disabled");
+      return;
+    }
+    const minusState = this._minusButton.currentState;
+    const plusState = this._plusButton.currentState;
+    if (minusState === "over" || plusState === "over") {
+      this.setState("over");
+    } else {
+      this.setState("up");
+    }
+  }
+  setState(state) {
+    this._currentState = state;
+    this.updateVisualState();
+  }
+  decrementValue() {
+    if (!this._enabled) return;
+    const newValue = this._value - this._step;
+    if (newValue >= this._min) {
+      this.value = newValue;
+    }
+  }
+  incrementValue() {
+    if (!this._enabled) return;
+    const newValue = this._value + this._step;
+    if (newValue <= this._max) {
+      this.value = newValue;
+    }
+  }
+  updateButtonStates() {
+    const atMin = this._value <= this._min;
+    const atMax = this._value >= this._max;
+    this._minusButton.enabled = this._enabled && !atMin;
+    this._plusButton.enabled = this._enabled && !atMax;
+  }
+  updateVisualState() {
+    const currentStateData = this.getCurrentStateData();
+    if (!currentStateData) return;
+    this.updateDisplay(currentStateData);
+    this.updateButtonSkins(currentStateData);
+    this.updateHoldSettings(currentStateData);
+    this.updateLayout(currentStateData);
+  }
+  skinApply(_) {
+    this.updateVisualState();
+  }
+  getCurrentStateData() {
+    const skin = this.getSkinData();
+    if (!skin) return null;
+    const baseData = skin.up;
+    const stateData = skin[this._currentState] || {};
+    return merge({}, baseData, stateData);
+  }
+  updateDisplay(stateData) {
+    const displayConfig = stateData.display;
+    if (!displayConfig) return;
+    if ("texture" in displayConfig) {
+      if (!(this._displayBackground instanceof Sprite)) {
+        this._displayContainer.removeChild(this._displayBackground);
+        this._displayBackground.destroy();
+        this._displayBackground = new Sprite();
+        this._displayContainer.addChildAt(this._displayBackground, 0);
+      }
+      const sprite = this._displayBackground;
+      const base = stateData.base ?? "";
+      const texturePath = base ? `${base}/${displayConfig.texture}` : displayConfig.texture;
+      sprite.texture = Texture.from(texturePath);
+      sprite.alpha = displayConfig.alpha ?? 1;
+      sprite.tint = displayConfig.tint ?? 16777215;
+      if (displayConfig.anchor) {
+        sprite.anchor.set(displayConfig.anchor.x, displayConfig.anchor.y);
+      }
+    } else {
+      if (!(this._displayBackground instanceof Graphics)) {
+        this._displayContainer.removeChild(this._displayBackground);
+        this._displayBackground.destroy();
+        this._displayBackground = new Graphics();
+        this._displayContainer.addChildAt(this._displayBackground, 0);
+      }
+      const graphics = this._displayBackground;
+      graphics.clear();
+      if ("circle" in displayConfig) {
+        graphics.circle(0, 0, displayConfig.circle.radius);
+      } else if ("rect" in displayConfig) {
+        graphics.rect(0, 0, displayConfig.rect.width, displayConfig.rect.height);
+      } else if ("roundRect" in displayConfig) {
+        graphics.roundRect(
+          0,
+          0,
+          displayConfig.roundRect.width,
+          displayConfig.roundRect.height,
+          displayConfig.roundRect.radius
+        );
+      }
+      if (displayConfig.fill) {
+        graphics.fill(displayConfig.fill);
+      }
+      if (displayConfig.stroke) {
+        graphics.stroke(displayConfig.stroke);
+      }
+    }
+    if (stateData.textStyle) {
+      this._displayText.style = stateData.textStyle;
+    }
+    this._displayText.text = this._formatFunction(this._value);
+    Align.hCenter([this._displayText], { container: this._displayContainer });
+    Align.vCenter([this._displayText], { container: this._displayContainer });
+  }
+  updateButtonSkins(stateData) {
+    if (stateData.minusButton) {
+      this._minusButton.setSkinData(stateData.minusButton, { mergeWithExisting: false });
+    }
+    if (stateData.plusButton) {
+      this._plusButton.setSkinData(stateData.plusButton, { mergeWithExisting: false });
+    }
+  }
+  updateHoldSettings(stateData) {
+    if (stateData.holdEnabled !== void 0) {
+      this._holdEnabled = stateData.holdEnabled;
+    }
+    if (stateData.holdDelay !== void 0) {
+      this._holdDelay = stateData.holdDelay;
+      this._minusButton.behavior.holdDelay = this._holdDelay;
+      this._plusButton.behavior.holdDelay = this._holdDelay;
+    }
+    if (stateData.holdInterval !== void 0) {
+      this._holdInterval = stateData.holdInterval;
+      this._minusButton.behavior.holdInterval = this._holdInterval;
+      this._plusButton.behavior.holdInterval = this._holdInterval;
+    }
+  }
+  updateLayout(stateData) {
+    const flowOptions = stateData.flowOptions || {
+      direction: "row",
+      wrap: "none",
+      gap: 10,
+      align: "center"
+    };
+    Flow.layout([this._minusButton, this._displayContainer, this._plusButton], flowOptions);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    const clampedValue = Math.max(this._min, Math.min(this._max, val));
+    if (this._value !== clampedValue) {
+      this._value = clampedValue;
+      this.updateButtonStates();
+      this.updateDisplayText();
+      this.emit("valueChanged", this._value);
+    }
+  }
+  updateDisplayText() {
+    this._displayText.text = this._formatFunction(this._value);
+  }
+  get min() {
+    return this._min;
+  }
+  set min(val) {
+    this._min = val;
+    if (this._value < this._min) {
+      this.value = this._min;
+    }
+    this.updateButtonStates();
+  }
+  get max() {
+    return this._max;
+  }
+  set max(val) {
+    this._max = val;
+    if (this._value > this._max) {
+      this.value = this._max;
+    }
+    this.updateButtonStates();
+  }
+  get step() {
+    return this._step;
+  }
+  set step(val) {
+    this._step = val;
+  }
+  get enabled() {
+    return this._enabled;
+  }
+  set enabled(val) {
+    this._enabled = val;
+    this.updateButtonStates();
+    if (!val) {
+      this.setState("disabled");
+    } else {
+      this.setState("up");
+    }
+  }
+  get formatFunction() {
+    return this._formatFunction;
+  }
+  set formatFunction(fn) {
+    this._formatFunction = fn;
+    this.updateDisplayText();
+  }
+  get minusButton() {
+    return this._minusButton;
+  }
+  get plusButton() {
+    return this._plusButton;
+  }
+  get displayText() {
+    return this._displayText;
+  }
+  get displayBackground() {
+    return this._displayBackground;
+  }
+  destroy() {
+    this._minusButton.destroy();
+    this._plusButton.destroy();
+    super.destroy();
+  }
+};
+var LabelBox = class extends Skinable(Container) {
+  _background;
+  _text;
+  _currentState = "default";
+  _stateDataCache = /* @__PURE__ */ new Map();
+  constructor(options = {}) {
+    super({ label: options.label });
+    this.eventMode = "passive";
+    this._background = new Graphics();
+    this._text = new Text({
+      text: options.text ?? "",
+      style: { fontSize: 24, fill: 16777215 }
+    });
+    this.addChild(this._background);
+    this.addChild(this._text);
+    if (options.state) {
+      this._currentState = options.state;
+    }
+    this.setSkinData(options.skinData || null, { mergeWithExisting: false });
+  }
+  get text() {
+    return this._text.text;
+  }
+  set text(value) {
+    this._text.text = value;
+  }
+  get background() {
+    return this._background;
+  }
+  get state() {
+    return this._currentState;
+  }
+  set state(value) {
+    if (this._currentState === value) return;
+    this._currentState = value;
+    this.applyCurrentState();
+  }
+  getStateData(state) {
+    const cached = this._stateDataCache.get(state);
+    if (cached) return cached;
+    const skin = this.getSkinData();
+    if (!skin) return {};
+    const baseState = skin.default;
+    const stateOverride = skin[state];
+    const merged = stateOverride ? merge({}, baseState, stateOverride) : baseState;
+    this._stateDataCache.set(state, merged);
+    return merged;
+  }
+  applyCurrentState() {
+    const stateData = this.getStateData(this._currentState);
+    this.applyStateData(stateData);
+  }
+  applyStateData(stateData) {
+    if (stateData.background) {
+      this._background.clear();
+      this.drawGraphics(stateData.background);
+    }
+    if (stateData.textStyle) {
+      this._text.style = stateData.textStyle;
+    }
+    if (stateData.textLayout !== void 0) {
+      this._text.layout = stateData.textLayout;
+    }
+    if (stateData.layout !== void 0) {
+      this.layout = stateData.layout;
+    }
+  }
+  drawGraphics(config) {
+    if ("circle" in config) {
+      this._background.circle(config.circle.radius, config.circle.radius, config.circle.radius);
+    } else if ("rect" in config) {
+      this._background.rect(0, 0, config.rect.width, config.rect.height);
+    } else if ("roundRect" in config) {
+      this._background.roundRect(
+        0,
+        0,
+        config.roundRect.width,
+        config.roundRect.height,
+        config.roundRect.radius
+      );
+    }
+    if (config.fill) {
+      this._background.fill(config.fill);
+    }
+    if (config.stroke) {
+      this._background.stroke(config.stroke);
+    }
+    if (config.layout !== void 0) {
+      this._background.layout = config.layout;
+    }
+  }
+  skinApply(skin) {
+    this._stateDataCache.clear();
+    if (!skin) {
+      this._background.clear();
+      return;
+    }
+    this.applyCurrentState();
+  }
+};
+var ListTableComp = class extends Skinable(Container) {
+  _columns;
+  _tableWidth;
+  _tableHeight;
+  _rowHeight;
+  _headerHeight;
+  _rowGap;
+  _cellGap;
+  _showHeader;
+  _showScrollbar;
+  _headerContainer;
+  _headerCells = [];
+  _listContainer;
+  _listContent;
+  _listMask;
+  _scrollbar;
+  _data = [];
+  _rowViews = [];
+  _hoveredRowIndex = -1;
+  _scrollValue = 0;
+  constructor(options) {
+    super();
+    this.eventMode = "static";
+    this._columns = options.columns;
+    this._tableWidth = options.tableWidth;
+    this._tableHeight = options.tableHeight;
+    this._rowHeight = options.rowHeight;
+    this._headerHeight = options.headerHeight ?? 0;
+    this._rowGap = options.rowGap ?? 0;
+    this._cellGap = options.cellGap ?? 0;
+    this._showHeader = options.showHeader ?? true;
+    this._showScrollbar = options.showScrollbar ?? true;
+    this._headerContainer = new Container({ label: "header" });
+    this._headerContainer.visible = this._showHeader;
+    this.addChild(this._headerContainer);
+    this._listContainer = new Container({ label: "listContainer" });
+    this._listContainer.eventMode = "static";
+    this.addChild(this._listContainer);
+    this._listContent = new Container({ label: "listContent" });
+    this._listContainer.addChild(this._listContent);
+    this._listMask = new Graphics();
+    this._listContainer.addChild(this._listMask);
+    this._listContent.mask = this._listMask;
+    this._scrollbar = new SliderComp({
+      orientation: "vertical",
+      min: 0,
+      max: 0,
+      value: 0
+    });
+    this._scrollbar.label = "scrollbar";
+    this._scrollbar.visible = this._showScrollbar;
+    this.addChild(this._scrollbar);
+    this._scrollbar.behavior.on("scroll", (value) => {
+      this._scrollValue = value;
+      this._listContent.y = -value;
+      this.emit("scroll", value);
+    });
+    this._listContainer.on("wheel", this.onWheel.bind(this));
+    this.buildHeader();
+    this.updateLayout();
+    if (options.skinData) {
+      this.setSkinData(options.skinData, { mergeWithExisting: false });
+    }
+  }
+  buildHeader() {
+    this._headerContainer.removeChildren();
+    this._headerCells = [];
+    for (const column of this._columns) {
+      const headerCell = new Container({ label: `header_${column.key}` });
+      headerCell.boundsArea = new Rectangle(0, 0, column.width, this._rowHeight);
+      const headerText = new Text({ text: column.label });
+      headerCell.addChild(headerText);
+      Align.hCenter([headerText], { container: headerCell.boundsArea });
+      Align.vCenter([headerText], { container: headerCell.boundsArea });
+      this._headerContainer.addChild(headerCell);
+      this._headerCells.push(headerCell);
+    }
+    Flow.layout(this._headerCells, {
+      direction: "row",
+      gap: this._cellGap
+    });
+    if (this._headerHeight === 0) {
+      this._headerHeight = this._headerContainer.height;
+    }
+  }
+  updateLayout() {
+    const listY = this._showHeader ? this._headerHeight : 0;
+    this._listContainer.y = listY;
+    this._listMask.clear();
+    this._listMask.rect(0, 0, this._tableWidth, this._tableHeight);
+    this._listMask.fill({ color: 16777215 });
+    this._scrollbar.x = this._tableWidth + 10;
+    this._scrollbar.y = listY;
+  }
+  updateScrollRange() {
+    const contentHeight = this._rowViews.length * (this._rowHeight + this._rowGap);
+    const maxScroll = Math.max(0, contentHeight - this._tableHeight);
+    this._scrollbar.behavior.max = maxScroll;
+    this._scrollbar.visible = this._showScrollbar && maxScroll > 0;
+  }
+  onWheel(event) {
+    const delta = event.deltaY;
+    const newValue = Math.max(0, Math.min(this._scrollbar.behavior.max, this._scrollValue + delta));
+    this._scrollbar.behavior.value = newValue;
+  }
+  drawList(data) {
+    this.clearList();
+    this._data = data;
+    const skin = this.getSkinData();
+    for (let i = 0; i < data.length; i++) {
+      this.createRow(i, data[i], skin);
+    }
+    const rowContainers = this._rowViews.map((v) => v.container);
+    Flow.layout(rowContainers, {
+      direction: "column",
+      gap: this._rowGap
+    });
+    this.updateScrollRange();
+  }
+  createRow(index, item, skin) {
+    var _a;
+    const rowSkin = skin == null ? void 0 : skin.row;
+    const container = new Container({ label: `row_${index}` });
+    container.eventMode = "static";
+    container.cursor = "pointer";
+    const background = new Graphics();
+    container.addChild(background);
+    this.drawRowBackground(background, index, false, skin);
+    const cells = [];
+    for (const column of this._columns) {
+      const cell = new Container({ label: column.key });
+      cell.boundsArea = new Rectangle(0, 0, column.width, this._rowHeight);
+      if (column.renderer) {
+        const customContent = column.renderer(item, index, column);
+        cell.addChild(customContent);
+        Align.hCenter([customContent], { container: cell.boundsArea });
+        Align.vCenter([customContent], { container: cell.boundsArea });
+      } else {
+        const value = item[column.key];
+        const text = new Text({ text: String(value ?? "") });
+        const cellStyle = (_a = skin == null ? void 0 : skin.cellStyles) == null ? void 0 : _a[column.key];
+        if (cellStyle == null ? void 0 : cellStyle.textStyle) {
+          text.style = cellStyle.textStyle;
+        } else if (rowSkin == null ? void 0 : rowSkin.textStyle) {
+          text.style = rowSkin.textStyle;
+        }
+        cell.addChild(text);
+        Align.hCenter([text], { container: cell.boundsArea });
+        Align.vCenter([text], { container: cell.boundsArea });
+      }
+      container.addChild(cell);
+      cells.push(cell);
+    }
+    Flow.layout(cells, {
+      direction: "row",
+      gap: this._cellGap
+    });
+    container.on("pointerover", () => {
+      this._hoveredRowIndex = index;
+      this.drawRowBackground(background, index, true, skin);
+      this.emit("rowHover", item, index);
+    });
+    container.on("pointerout", () => {
+      this._hoveredRowIndex = -1;
+      this.drawRowBackground(background, index, false, skin);
+      this.emit("rowOut", item, index);
+    });
+    container.on("pointertap", () => {
+      this.emit("rowClick", item, index);
+    });
+    this._listContent.addChild(container);
+    this._rowViews.push({ container, background, cells });
+  }
+  drawRowBackground(graphics, index, isHovered, skin) {
+    graphics.clear();
+    const rowSkin = skin == null ? void 0 : skin.row;
+    let bgConfig;
+    if (isHovered && (rowSkin == null ? void 0 : rowSkin.hoverBackground)) {
+      bgConfig = rowSkin.hoverBackground;
+    } else if (index % 2 === 0 && (rowSkin == null ? void 0 : rowSkin.evenBackground)) {
+      bgConfig = rowSkin.evenBackground;
+    } else if (index % 2 === 1 && (rowSkin == null ? void 0 : rowSkin.oddBackground)) {
+      bgConfig = rowSkin.oddBackground;
+    } else if (rowSkin == null ? void 0 : rowSkin.background) {
+      bgConfig = rowSkin.background;
+    }
+    if (!bgConfig) {
+      graphics.rect(0, 0, this._tableWidth, this._rowHeight);
+      graphics.fill({ color: index % 2 === 0 ? 1711933 : 987945, alpha: 0.5 });
+      return;
+    }
+    if ("rect" in bgConfig) {
+      graphics.rect(0, 0, bgConfig.rect.width, bgConfig.rect.height);
+    } else if ("roundRect" in bgConfig) {
+      graphics.roundRect(0, 0, bgConfig.roundRect.width, bgConfig.roundRect.height, bgConfig.roundRect.radius);
+    } else if ("circle" in bgConfig) {
+      graphics.circle(0, 0, bgConfig.circle.radius);
+    }
+    if (bgConfig.fill) {
+      graphics.fill(bgConfig.fill);
+    }
+    if (bgConfig.stroke) {
+      graphics.stroke(bgConfig.stroke);
+    }
+  }
+  clearList() {
+    this._listContent.removeChildren();
+    this._rowViews = [];
+    this._data = [];
+    this._hoveredRowIndex = -1;
+    this._scrollValue = 0;
+    this._listContent.y = 0;
+  }
+  getRowAt(index) {
+    var _a;
+    return ((_a = this._rowViews[index]) == null ? void 0 : _a.container) ?? null;
+  }
+  scrollTo(index) {
+    const targetY = index * (this._rowHeight + this._rowGap);
+    this._scrollbar.behavior.value = Math.min(targetY, this._scrollbar.behavior.max);
+  }
+  get data() {
+    return this._data;
+  }
+  get columns() {
+    return this._columns;
+  }
+  get showHeader() {
+    return this._showHeader;
+  }
+  set showHeader(value) {
+    this._showHeader = value;
+    this._headerContainer.visible = value;
+    this.updateLayout();
+  }
+  get showScrollbar() {
+    return this._showScrollbar;
+  }
+  set showScrollbar(value) {
+    this._showScrollbar = value;
+    this.updateScrollRange();
+  }
+  get scrollbar() {
+    return this._scrollbar;
+  }
+  get headerContainer() {
+    return this._headerContainer;
+  }
+  get listContainer() {
+    return this._listContainer;
+  }
+  get listContent() {
+    return this._listContent;
+  }
+  skinApply(skin) {
+    if (!skin) return;
+    this.applyHeaderSkin(skin);
+    if (skin.scrollbar) {
+      this._scrollbar.setSkinData(skin.scrollbar, { mergeWithExisting: false });
+    }
+    if (this._data.length > 0) {
+      this.applyRowSkins(skin);
+    }
+  }
+  applyHeaderSkin(skin) {
+    const headerSkin = skin.header;
+    if (!headerSkin) return;
+    for (let i = 0; i < this._headerCells.length; i++) {
+      const cell = this._headerCells[i];
+      const text = cell.children[0];
+      if (text && headerSkin.textStyle) {
+        text.style = headerSkin.textStyle;
+      }
+    }
+    Flow.layout(this._headerCells, {
+      direction: "row",
+      gap: this._cellGap
+    });
+  }
+  applyRowSkins(skin) {
+    var _a;
+    const rowSkin = skin.row;
+    for (let i = 0; i < this._rowViews.length; i++) {
+      const view = this._rowViews[i];
+      const isHovered = this._hoveredRowIndex === i;
+      this.drawRowBackground(view.background, i, isHovered, skin);
+      for (let j = 0; j < view.cells.length; j++) {
+        const cell = view.cells[j];
+        const column = this._columns[j];
+        const cellStyle = (_a = skin.cellStyles) == null ? void 0 : _a[column.key];
+        const text = cell.children[0];
+        if (text && !(text instanceof Graphics)) {
+          if (cellStyle == null ? void 0 : cellStyle.textStyle) {
+            text.style = cellStyle.textStyle;
+          } else if (rowSkin == null ? void 0 : rowSkin.textStyle) {
+            text.style = rowSkin.textStyle;
+          }
+        }
+      }
+      Flow.layout(view.cells, {
+        direction: "row",
+        gap: this._cellGap
+      });
+    }
+    const rowContainers = this._rowViews.map((v) => v.container);
+    Flow.layout(rowContainers, {
+      direction: "column",
+      gap: this._rowGap
+    });
+  }
+  destroy() {
+    this._scrollbar.destroy();
+    super.destroy();
+  }
+};
+
+export { ButtonBehavior, ButtonComp, InputBehavior, InputComp, LabelBox, ListTableComp, ScrollbarBehavior, Skinable, SliderComp, SpriteText, StepperComp, applyLayoutMappings, applySkinMappings, applyStyleMappings, applyTextMappings, createButtonEffect, createFlatButtonEffect, createSpriteButtonSkin, createToggleIconSlideEffect, defineGlobalSkin, mergeGlobalAndInstanceSkin, mergeSkins, parseColorValue, parseSpriteTextBBCode, resolveFontIndex, stripSpriteTextBBCode };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map