@energy8platform/game-engine 0.3.0 → 0.5.0

package/dist/ui.esm.js

@@ -1,434 +1,115 @@
-import { Ticker, Container, Graphics, Texture, Sprite, Text, NineSliceSprite } from 'pixi.js';
-
-/**
- * Collection of easing functions for use with Tween and Timeline.
- *
- * All functions take a progress value t (0..1) and return the eased value.
- */
-const Easing = {
-    linear: (t) => t,
-    easeInQuad: (t) => t * t,
-    easeOutQuad: (t) => t * (2 - t),
-    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
-    easeInCubic: (t) => t * t * t,
-    easeOutCubic: (t) => --t * t * t + 1,
-    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-    easeInQuart: (t) => t * t * t * t,
-    easeOutQuart: (t) => 1 - --t * t * t * t,
-    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
-    easeInSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
-    easeOutSine: (t) => Math.sin((t * Math.PI) / 2),
-    easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
-    easeInExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
-    easeOutExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
-    easeInOutExpo: (t) => t === 0
-        ? 0
-        : t === 1
-            ? 1
-            : t < 0.5
-                ? Math.pow(2, 20 * t - 10) / 2
-                : (2 - Math.pow(2, -20 * t + 10)) / 2,
-    easeInBack: (t) => {
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
-        return c3 * t * t * t - c1 * t * t;
-    },
-    easeOutBack: (t) => {
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
-        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-    },
-    easeInOutBack: (t) => {
-        const c1 = 1.70158;
-        const c2 = c1 * 1.525;
-        return t < 0.5
-            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
-            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
-    },
-    easeOutBounce: (t) => {
-        const n1 = 7.5625;
-        const d1 = 2.75;
-        if (t < 1 / d1)
-            return n1 * t * t;
-        if (t < 2 / d1)
-            return n1 * (t -= 1.5 / d1) * t + 0.75;
-        if (t < 2.5 / d1)
-            return n1 * (t -= 2.25 / d1) * t + 0.9375;
-        return n1 * (t -= 2.625 / d1) * t + 0.984375;
-    },
-    easeInBounce: (t) => 1 - Easing.easeOutBounce(1 - t),
-    easeInOutBounce: (t) => t < 0.5
-        ? (1 - Easing.easeOutBounce(1 - 2 * t)) / 2
-        : (1 + Easing.easeOutBounce(2 * t - 1)) / 2,
-    easeOutElastic: (t) => {
-        const c4 = (2 * Math.PI) / 3;
-        return t === 0
-            ? 0
-            : t === 1
-                ? 1
-                : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-    },
-    easeInElastic: (t) => {
-        const c4 = (2 * Math.PI) / 3;
-        return t === 0
-            ? 0
-            : t === 1
-                ? 1
-                : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
-    },
-};
-
-/**
- * Lightweight tween system integrated with PixiJS Ticker.
- * Zero external dependencies — no GSAP required.
- *
- * All tweens return a Promise that resolves on completion.
- *
- * @example
- * ```ts
- * // Fade in a sprite
- * await Tween.to(sprite, { alpha: 1, y: 100 }, 500, Easing.easeOutBack);
- *
- * // Move and wait
- * await Tween.to(sprite, { x: 500 }, 300);
- *
- * // From a starting value
- * await Tween.from(sprite, { scale: 0, alpha: 0 }, 400);
- * ```
- */
-class Tween {
-    static _tweens = [];
-    static _tickerAdded = false;
-    /**
-     * Animate properties from current values to target values.
-     *
-     * @param target - Object to animate (Sprite, Container, etc.)
-     * @param props - Target property values
-     * @param duration - Duration in milliseconds
-     * @param easing - Easing function (default: easeOutQuad)
-     * @param onUpdate - Progress callback (0..1)
-     */
-    static to(target, props, duration, easing, onUpdate) {
-        return new Promise((resolve) => {
-            // Capture starting values
-            const from = {};
-            for (const key of Object.keys(props)) {
-                from[key] = Tween.getProperty(target, key);
-            }
-            const tween = {
-                target,
-                from,
-                to: { ...props },
-                duration: Math.max(1, duration),
-                easing: easing ?? Easing.easeOutQuad,
-                elapsed: 0,
-                delay: 0,
-                resolve,
-                onUpdate,
-            };
-            Tween._tweens.push(tween);
-            Tween.ensureTicker();
-        });
-    }
-    /**
-     * Animate properties from given values to current values.
-     */
-    static from(target, props, duration, easing, onUpdate) {
-        // Capture current values as "to"
-        const to = {};
-        for (const key of Object.keys(props)) {
-            to[key] = Tween.getProperty(target, key);
-            Tween.setProperty(target, key, props[key]);
-        }
-        return Tween.to(target, to, duration, easing, onUpdate);
-    }
-    /**
-     * Animate from one set of values to another.
-     */
-    static fromTo(target, fromProps, toProps, duration, easing, onUpdate) {
-        // Set starting values
-        for (const key of Object.keys(fromProps)) {
-            Tween.setProperty(target, key, fromProps[key]);
-        }
-        return Tween.to(target, toProps, duration, easing, onUpdate);
-    }
-    /**
-     * Wait for a given duration (useful in timelines).
-     * Uses PixiJS Ticker for consistent timing with other tweens.
-     */
-    static delay(ms) {
-        return new Promise((resolve) => {
-            let elapsed = 0;
-            const onTick = (ticker) => {
-                elapsed += ticker.deltaMS;
-                if (elapsed >= ms) {
-                    Ticker.shared.remove(onTick);
-                    resolve();
-                }
-            };
-            Ticker.shared.add(onTick);
-        });
-    }
-    /**
-     * Kill all tweens on a target.
-     */
-    static killTweensOf(target) {
-        Tween._tweens = Tween._tweens.filter((tw) => {
-            if (tw.target === target) {
-                tw.resolve();
-                return false;
-            }
-            return true;
-        });
-    }
-    /**
-     * Kill all active tweens.
-     */
-    static killAll() {
-        for (const tw of Tween._tweens) {
-            tw.resolve();
-        }
-        Tween._tweens.length = 0;
-    }
-    /** Number of active tweens */
-    static get activeTweens() {
-        return Tween._tweens.length;
-    }
-    /**
-     * Reset the tween system — kill all tweens and remove the ticker.
-     * Useful for cleanup between game instances, tests, or hot-reload.
-     */
-    static reset() {
-        for (const tw of Tween._tweens) {
-            tw.resolve();
-        }
-        Tween._tweens.length = 0;
-        if (Tween._tickerAdded) {
-            Ticker.shared.remove(Tween.tick);
-            Tween._tickerAdded = false;
-        }
-    }
-    // ─── Internal ──────────────────────────────────────────
-    static ensureTicker() {
-        if (Tween._tickerAdded)
-            return;
-        Tween._tickerAdded = true;
-        Ticker.shared.add(Tween.tick);
-    }
-    static tick = (ticker) => {
-        const dt = ticker.deltaMS;
-        const completed = [];
-        for (const tw of Tween._tweens) {
-            tw.elapsed += dt;
-            if (tw.elapsed < tw.delay)
-                continue;
-            const raw = Math.min((tw.elapsed - tw.delay) / tw.duration, 1);
-            const t = tw.easing(raw);
-            // Interpolate each property
-            for (const key of Object.keys(tw.to)) {
-                const start = tw.from[key];
-                const end = tw.to[key];
-                const value = start + (end - start) * t;
-                Tween.setProperty(tw.target, key, value);
-            }
-            tw.onUpdate?.(raw);
-            if (raw >= 1) {
-                completed.push(tw);
-            }
-        }
-        // Remove completed tweens
-        for (const tw of completed) {
-            const idx = Tween._tweens.indexOf(tw);
-            if (idx !== -1)
-                Tween._tweens.splice(idx, 1);
-            tw.resolve();
-        }
-        // Remove ticker when no active tweens
-        if (Tween._tweens.length === 0 && Tween._tickerAdded) {
-            Ticker.shared.remove(Tween.tick);
-            Tween._tickerAdded = false;
-        }
-    };
-    /**
-     * Get a potentially nested property (supports 'scale.x', 'position.y', etc.)
-     */
-    static getProperty(target, key) {
-        const parts = key.split('.');
-        let obj = target;
-        for (let i = 0; i < parts.length - 1; i++) {
-            obj = obj[parts[i]];
-        }
-        return obj[parts[parts.length - 1]] ?? 0;
-    }
-    /**
-     * Set a potentially nested property.
-     */
-    static setProperty(target, key, value) {
-        const parts = key.split('.');
-        let obj = target;
-        for (let i = 0; i < parts.length - 1; i++) {
-            obj = obj[parts[i]];
-        }
-        obj[parts[parts.length - 1]] = value;
-    }
-}
+import '@pixi/layout';
+import { Graphics, Container, Text, Texture, NineSliceSprite, Ticker } from 'pixi.js';
+import { FancyButton, ProgressBar as ProgressBar$1, ScrollBox } from '@pixi/ui';
+import { LayoutContainer } from '@pixi/layout/components';
 
 const DEFAULT_COLORS = {
-    normal: 0xffd700,
+    default: 0xffd700,
     hover: 0xffe44d,
     pressed: 0xccac00,
     disabled: 0x666666,
 };
+function makeGraphicsView(w, h, radius, color) {
+    const g = new Graphics();
+    g.roundRect(0, 0, w, h, radius).fill(color);
+    // Highlight overlay
+    g.roundRect(2, 2, w - 4, h * 0.45, radius).fill({ color: 0xffffff, alpha: 0.1 });
+    return g;
+}
 /**
- * Interactive button component with state management and animation.
+ * Interactive button component powered by `@pixi/ui` FancyButton.
  *
- * Supports both texture-based and Graphics-based rendering.
+ * Supports both texture-based and Graphics-based rendering with
+ * per-state views, press animation, and text.
  *
  * @example
  * ```ts
  * const btn = new Button({
  *   width: 200, height: 60, borderRadius: 12,
- *   colors: { normal: 0x22aa22, hover: 0x33cc33 },
+ *   colors: { default: 0x22aa22, hover: 0x33cc33 },
+ *   text: 'SPIN',
  * });
  *
- * btn.onTap = () => console.log('Clicked!');
+ * btn.onPress.connect(() => console.log('Clicked!'));
  * scene.container.addChild(btn);
  * ```
  */
-class Button extends Container {
-    _state = 'normal';
-    _bg;
-    _sprites = {};
-    _config;
-    /** Called when the button is tapped/clicked */
-    onTap;
-    /** Called when the button state changes */
-    onStateChange;
+class Button extends FancyButton {
+    _buttonConfig;
     constructor(config = {}) {
-        super();
-        this._config = {
-            width: 200,
-            height: 60,
-            borderRadius: 8,
-            pressScale: 0.95,
-            animationDuration: 100,
+        const resolvedConfig = {
+            width: config.width ?? 200,
+            height: config.height ?? 60,
+            borderRadius: config.borderRadius ?? 8,
+            pressScale: config.pressScale ?? 0.95,
+            animationDuration: config.animationDuration ?? 100,
             ...config,
         };
-        // Create Graphics background
-        this._bg = new Graphics();
-        this.addChild(this._bg);
-        // Create texture sprites if provided
+        const colorMap = { ...DEFAULT_COLORS, ...config.colors };
+        const { width, height, borderRadius } = resolvedConfig;
+        // Build FancyButton options
+        const options = {
+            anchor: 0.5,
+            animations: {
+                hover: {
+                    props: { scale: { x: 1.03, y: 1.03 } },
+                    duration: resolvedConfig.animationDuration,
+                },
+                pressed: {
+                    props: { scale: { x: resolvedConfig.pressScale, y: resolvedConfig.pressScale } },
+                    duration: resolvedConfig.animationDuration,
+                },
+            },
+        };
+        // Texture-based views
         if (config.textures) {
-            for (const [state, tex] of Object.entries(config.textures)) {
-                const texture = typeof tex === 'string' ? Texture.from(tex) : tex;
-                const sprite = new Sprite(texture);
-                sprite.anchor.set(0.5);
-                sprite.visible = state === 'normal';
-                this._sprites[state] = sprite;
-                this.addChild(sprite);
-            }
+            if (config.textures.default)
+                options.defaultView = config.textures.default;
+            if (config.textures.hover)
+                options.hoverView = config.textures.hover;
+            if (config.textures.pressed)
+                options.pressedView = config.textures.pressed;
+            if (config.textures.disabled)
+                options.disabledView = config.textures.disabled;
         }
-        // Make interactive
-        this.eventMode = 'static';
-        this.cursor = 'pointer';
-        // Set up hit area for Graphics-based
-        this.pivot.set(this._config.width / 2, this._config.height / 2);
-        // Bind events
-        this.on('pointerover', this.onPointerOver);
-        this.on('pointerout', this.onPointerOut);
-        this.on('pointerdown', this.onPointerDown);
-        this.on('pointerup', this.onPointerUp);
-        this.on('pointertap', this.onPointerTap);
-        // Initial render
-        this.setState('normal');
+        else {
+            // Graphics-based views
+            options.defaultView = makeGraphicsView(width, height, borderRadius, colorMap.default);
+            options.hoverView = makeGraphicsView(width, height, borderRadius, colorMap.hover);
+            options.pressedView = makeGraphicsView(width, height, borderRadius, colorMap.pressed);
+            options.disabledView = makeGraphicsView(width, height, borderRadius, colorMap.disabled);
+        }
+        // Text
+        if (config.text) {
+            options.text = config.text;
+        }
+        super(options);
+        this._buttonConfig = resolvedConfig;
         if (config.disabled) {
-            this.disable();
+            this.enabled = false;
         }
     }
-    /** Current button state */
-    get state() {
-        return this._state;
-    }
     /** Enable the button */
     enable() {
-        if (this._state === 'disabled') {
-            this.setState('normal');
-            this.eventMode = 'static';
-            this.cursor = 'pointer';
-        }
+        this.enabled = true;
     }
     /** Disable the button */
     disable() {
-        this.setState('disabled');
-        this.eventMode = 'none';
-        this.cursor = 'default';
+        this.enabled = false;
     }
     /** Whether the button is disabled */
     get disabled() {
-        return this._state === 'disabled';
+        return !this.enabled;
     }
-    setState(state) {
-        if (this._state === state)
-            return;
-        this._state = state;
-        this.render();
-        this.onStateChange?.(state);
-    }
-    render() {
-        const { width, height, borderRadius, colors } = this._config;
-        const colorMap = { ...DEFAULT_COLORS, ...colors };
-        // Update Graphics
-        this._bg.clear();
-        this._bg.roundRect(0, 0, width, height, borderRadius).fill(colorMap[this._state]);
-        // Add highlight for normal/hover
-        if (this._state === 'normal' || this._state === 'hover') {
-            this._bg
-                .roundRect(2, 2, width - 4, height * 0.45, borderRadius)
-                .fill({ color: 0xffffff, alpha: 0.1 });
-        }
-        // Update sprite visibility
-        for (const [state, sprite] of Object.entries(this._sprites)) {
-            if (sprite)
-                sprite.visible = state === this._state;
-        }
-        // Fall back to normal sprite if state sprite doesn't exist
-        if (!this._sprites[this._state] && this._sprites.normal) {
-            this._sprites.normal.visible = true;
-        }
-    }
-    onPointerOver = () => {
-        if (this._state === 'disabled')
-            return;
-        this.setState('hover');
-    };
-    onPointerOut = () => {
-        if (this._state === 'disabled')
-            return;
-        this.setState('normal');
-        Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration);
-    };
-    onPointerDown = () => {
-        if (this._state === 'disabled')
-            return;
-        this.setState('pressed');
-        const s = this._config.pressScale;
-        Tween.to(this.scale, { x: s, y: s }, this._config.animationDuration, Easing.easeOutQuad);
-    };
-    onPointerUp = () => {
-        if (this._state === 'disabled')
-            return;
-        this.setState('hover');
-        Tween.to(this.scale, { x: 1, y: 1 }, this._config.animationDuration, Easing.easeOutBack);
-    };
-    onPointerTap = () => {
-        if (this._state === 'disabled')
-            return;
-        this.onTap?.();
-    };
 }
 
+function makeBarGraphics(w, h, radius, color) {
+    return new Graphics().roundRect(0, 0, w, h, radius).fill(color);
+}
 /**
- * Horizontal progress bar with optional smooth fill animation.
+ * Horizontal progress bar powered by `@pixi/ui` ProgressBar.
+ *
+ * Provides optional smooth animated fill via per-frame `update()`.
  *
  * @example
  * ```ts
@@ -438,33 +119,48 @@ class Button extends Container {
  * ```
  */
 class ProgressBar extends Container {
-    _track;
-    _fill;
-    _border;
+    _bar;
+    _borderGfx;
     _config;
     _progress = 0;
     _displayedProgress = 0;
     constructor(config = {}) {
         super();
         this._config = {
-            width: 300,
-            height: 16,
-            borderRadius: 8,
-            fillColor: 0xffd700,
-            trackColor: 0x333333,
-            borderColor: 0x555555,
-            borderWidth: 1,
-            animated: true,
-            animationSpeed: 0.1,
-            ...config,
+            width: config.width ?? 300,
+            height: config.height ?? 16,
+            borderRadius: config.borderRadius ?? 8,
+            fillColor: config.fillColor ?? 0xffd700,
+            trackColor: config.trackColor ?? 0x333333,
+            borderColor: config.borderColor ?? 0x555555,
+            borderWidth: config.borderWidth ?? 1,
+            animated: config.animated ?? true,
+            animationSpeed: config.animationSpeed ?? 0.1,
         };
-        this._track = new Graphics();
-        this._fill = new Graphics();
-        this._border = new Graphics();
-        this.addChild(this._track, this._fill, this._border);
-        this.drawTrack();
-        this.drawBorder();
-        this.drawFill(0);
+        const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
+        const bgGraphics = makeBarGraphics(width, height, borderRadius, trackColor);
+        const fillGraphics = makeBarGraphics(width - borderWidth * 2, height - borderWidth * 2, Math.max(0, borderRadius - 1), fillColor);
+        const options = {
+            bg: bgGraphics,
+            fill: fillGraphics,
+            fillPaddings: {
+                top: borderWidth,
+                right: borderWidth,
+                bottom: borderWidth,
+                left: borderWidth,
+            },
+            progress: 0,
+        };
+        this._bar = new ProgressBar$1(options);
+        this.addChild(this._bar);
+        // Border overlay
+        this._borderGfx = new Graphics();
+        if (borderColor !== undefined && borderWidth > 0) {
+            this._borderGfx
+                .roundRect(0, 0, width, height, borderRadius)
+                .stroke({ color: borderColor, width: borderWidth });
+        }
+        this.addChild(this._borderGfx);
     }
     /** Get/set progress (0..1) */
     get progress() {
@@ -474,13 +170,13 @@ class ProgressBar extends Container {
         this._progress = Math.max(0, Math.min(1, value));
         if (!this._config.animated) {
             this._displayedProgress = this._progress;
-            this.drawFill(this._displayedProgress);
+            this._bar.progress = this._displayedProgress * 100;
         }
     }
     /**
      * Call each frame if animated is true.
      */
-    update(dt) {
+    update(_dt) {
         if (!this._config.animated)
             return;
         if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
@@ -489,35 +185,7 @@ class ProgressBar extends Container {
         }
         this._displayedProgress +=
             (this._progress - this._displayedProgress) * this._config.animationSpeed;
-        this.drawFill(this._displayedProgress);
-    }
-    drawTrack() {
-        const { width, height, borderRadius, trackColor } = this._config;
-        this._track.clear();
-        this._track.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
-    }
-    drawBorder() {
-        const { width, height, borderRadius, borderColor, borderWidth } = this._config;
-        this._border.clear();
-        this._border
-            .roundRect(0, 0, width, height, borderRadius)
-            .stroke({ color: borderColor, width: borderWidth });
-    }
-    drawFill(progress) {
-        const { width, height, borderRadius, fillColor, borderWidth } = this._config;
-        const innerWidth = width - borderWidth * 2;
-        const innerHeight = height - borderWidth * 2;
-        const fillWidth = Math.max(0, innerWidth * progress);
-        this._fill.clear();
-        if (fillWidth > 0) {
-            this._fill.x = borderWidth;
-            this._fill.y = borderWidth;
-            this._fill.roundRect(0, 0, fillWidth, innerHeight, borderRadius - 1).fill(fillColor);
-            // Highlight
-            this._fill
-                .roundRect(0, 0, fillWidth, innerHeight * 0.4, borderRadius - 1)
-                .fill({ color: 0xffffff, alpha: 0.15 });
-        }
+        this._bar.progress = this._displayedProgress * 100;
     }
 }
 
@@ -613,7 +281,10 @@ class Label extends Container {
 }
 
 /**
- * Background panel that can use either Graphics or 9-slice sprite.
+ * Background panel powered by `@pixi/layout` LayoutContainer.
+ *
+ * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
+ * Children added to `content` participate in flexbox layout automatically.
  *
  * @example
  * ```ts
@@ -628,75 +299,148 @@ class Label extends Container {
  * });
  * ```
  */
-class Panel extends Container {
-    _bg;
-    _content;
-    _config;
+class Panel extends LayoutContainer {
+    _panelConfig;
     constructor(config = {}) {
-        super();
-        this._config = {
-            width: 400,
-            height: 300,
-            padding: 16,
-            backgroundAlpha: 1,
+        const resolvedConfig = {
+            width: config.width ?? 400,
+            height: config.height ?? 300,
+            padding: config.padding ?? 16,
+            backgroundAlpha: config.backgroundAlpha ?? 1,
             ...config,
         };
-        // Create background
+        // If using a 9-slice texture, pass it as a custom background
+        let customBackground;
         if (config.nineSliceTexture) {
             const texture = typeof config.nineSliceTexture === 'string'
                 ? Texture.from(config.nineSliceTexture)
                 : config.nineSliceTexture;
             const [left, top, right, bottom] = config.nineSliceBorders ?? [10, 10, 10, 10];
-            this._bg = new NineSliceSprite({
+            const nineSlice = new NineSliceSprite({
                 texture,
                 leftWidth: left,
                 topHeight: top,
                 rightWidth: right,
                 bottomHeight: bottom,
             });
-            this._bg.width = this._config.width;
-            this._bg.height = this._config.height;
+            nineSlice.width = resolvedConfig.width;
+            nineSlice.height = resolvedConfig.height;
+            nineSlice.alpha = resolvedConfig.backgroundAlpha;
+            customBackground = nineSlice;
+        }
+        super(customBackground ? { background: customBackground } : undefined);
+        this._panelConfig = resolvedConfig;
+        // Apply layout styles
+        const layoutStyles = {
+            width: resolvedConfig.width,
+            height: resolvedConfig.height,
+            padding: resolvedConfig.padding,
+            flexDirection: 'column',
+        };
+        // Graphics-based background via layout styles
+        if (!config.nineSliceTexture) {
+            layoutStyles.backgroundColor = config.backgroundColor ?? 0x1a1a2e;
+            layoutStyles.borderRadius = config.borderRadius ?? 0;
+            if (config.borderColor !== undefined && config.borderWidth) {
+                layoutStyles.borderColor = config.borderColor;
+                layoutStyles.borderWidth = config.borderWidth;
+            }
         }
-        else {
-            this._bg = new Graphics();
-            this.drawGraphicsBg();
+        this.layout = layoutStyles;
+        if (!config.nineSliceTexture) {
+            this.background.alpha = resolvedConfig.backgroundAlpha;
         }
-        this._bg.alpha = this._config.backgroundAlpha;
-        this.addChild(this._bg);
-        // Content container with padding
-        this._content = new Container();
-        this._content.x = this._config.padding;
-        this._content.y = this._config.padding;
-        this.addChild(this._content);
     }
-    /** Content container — add children here */
+    /** Access the content container (children added here participate in layout) */
     get content() {
-        return this._content;
+        return this.overflowContainer;
     }
     /** Resize the panel */
     setSize(width, height) {
-        this._config.width = width;
-        this._config.height = height;
-        if (this._bg instanceof Graphics) {
-            this.drawGraphicsBg();
-        }
-        else {
-            this._bg.width = width;
-            this._bg.height = height;
-        }
-    }
-    drawGraphicsBg() {
-        const bg = this._bg;
-        const { width, height, backgroundColor, borderRadius, borderColor, borderWidth, } = this._config;
-        bg.clear();
-        bg.roundRect(0, 0, width, height, borderRadius ?? 0).fill(backgroundColor ?? 0x1a1a2e);
-        if (borderColor !== undefined && borderWidth) {
-            bg.roundRect(0, 0, width, height, borderRadius ?? 0)
-                .stroke({ color: borderColor, width: borderWidth });
-        }
+        this._panelConfig.width = width;
+        this._panelConfig.height = height;
+        this._layout?.setStyle({ width, height });
     }
 }
 
+/**
+ * Collection of easing functions for use with Tween and Timeline.
+ *
+ * All functions take a progress value t (0..1) and return the eased value.
+ */
+const Easing = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => t * (2 - t),
+    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => --t * t * t + 1,
+    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - --t * t * t * t,
+    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+    easeInSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: (t) => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+    easeInExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: (t) => t === 0
+        ? 0
+        : t === 1
+            ? 1
+            : t < 0.5
+                ? Math.pow(2, 20 * t - 10) / 2
+                : (2 - Math.pow(2, -20 * t + 10)) / 2,
+    easeInBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return c3 * t * t * t - c1 * t * t;
+    },
+    easeOutBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    },
+    easeInOutBack: (t) => {
+        const c1 = 1.70158;
+        const c2 = c1 * 1.525;
+        return t < 0.5
+            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+    },
+    easeOutBounce: (t) => {
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1)
+            return n1 * t * t;
+        if (t < 2 / d1)
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        if (t < 2.5 / d1)
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    },
+    easeInBounce: (t) => 1 - Easing.easeOutBounce(1 - t),
+    easeInOutBounce: (t) => t < 0.5
+        ? (1 - Easing.easeOutBounce(1 - 2 * t)) / 2
+        : (1 + Easing.easeOutBounce(2 * t - 1)) / 2,
+    easeOutElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+    easeInElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+    },
+};
+
 /**
  * Reactive balance display component.
  *
@@ -781,7 +525,6 @@ class BalanceDisplay extends Container {
         this.updateDisplay();
     }
     async animateValue(from, to) {
-        // Cancel any ongoing animation
         if (this._animating) {
             this._animationCancelled = true;
         }
@@ -791,7 +534,6 @@ class BalanceDisplay extends Container {
         const startTime = Date.now();
         return new Promise((resolve) => {
             const tick = () => {
-                // If cancelled by a newer animation, stop immediately
                 if (this._animationCancelled) {
                     this._animating = false;
                     resolve();
@@ -866,66 +608,261 @@ class WinDisplay extends Container {
         this.visible = false;
     }
     /**
-     * Show a win with countup animation.
-     *
-     * @param amount - Win amount
-     * @returns Promise that resolves when the animation completes
+     * Show a win with countup animation.
+     *
+     * @param amount - Win amount
+     * @returns Promise that resolves when the animation completes
+     */
+    async showWin(amount) {
+        this.visible = true;
+        this._cancelCountup = false;
+        this.alpha = 1;
+        const duration = this._config.countupDuration;
+        const startTime = Date.now();
+        // Scale pop
+        this.scale.set(0.5);
+        return new Promise((resolve) => {
+            const tick = () => {
+                if (this._cancelCountup) {
+                    this.displayAmount(amount);
+                    resolve();
+                    return;
+                }
+                const elapsed = Date.now() - startTime;
+                const t = Math.min(elapsed / duration, 1);
+                const eased = Easing.easeOutCubic(t);
+                // Countup
+                const current = amount * eased;
+                this.displayAmount(current);
+                // Scale animation
+                const scaleT = Math.min(elapsed / 300, 1);
+                const scaleEased = Easing.easeOutBack(scaleT);
+                const targetScale = 1;
+                this.scale.set(0.5 + (targetScale - 0.5) * scaleEased);
+                if (t < 1) {
+                    requestAnimationFrame(tick);
+                }
+                else {
+                    this.displayAmount(amount);
+                    this.scale.set(1);
+                    resolve();
+                }
+            };
+            requestAnimationFrame(tick);
+        });
+    }
+    /**
+     * Skip the countup animation and show the final amount immediately.
+     */
+    skipCountup(amount) {
+        this._cancelCountup = true;
+        this.displayAmount(amount);
+        this.scale.set(1);
+    }
+    /**
+     * Hide the win display.
+     */
+    hide() {
+        this.visible = false;
+        this._label.text = '';
+    }
+    displayAmount(amount) {
+        this._label.setCurrency(amount, this._config.currency, this._config.locale);
+    }
+}
+
+/**
+ * Lightweight tween system integrated with PixiJS Ticker.
+ * Zero external dependencies — no GSAP required.
+ *
+ * All tweens return a Promise that resolves on completion.
+ *
+ * @example
+ * ```ts
+ * // Fade in a sprite
+ * await Tween.to(sprite, { alpha: 1, y: 100 }, 500, Easing.easeOutBack);
+ *
+ * // Move and wait
+ * await Tween.to(sprite, { x: 500 }, 300);
+ *
+ * // From a starting value
+ * await Tween.from(sprite, { scale: 0, alpha: 0 }, 400);
+ * ```
+ */
+class Tween {
+    static _tweens = [];
+    static _tickerAdded = false;
+    /**
+     * Animate properties from current values to target values.
+     *
+     * @param target - Object to animate (Sprite, Container, etc.)
+     * @param props - Target property values
+     * @param duration - Duration in milliseconds
+     * @param easing - Easing function (default: easeOutQuad)
+     * @param onUpdate - Progress callback (0..1)
+     */
+    static to(target, props, duration, easing, onUpdate) {
+        return new Promise((resolve) => {
+            // Capture starting values
+            const from = {};
+            for (const key of Object.keys(props)) {
+                from[key] = Tween.getProperty(target, key);
+            }
+            const tween = {
+                target,
+                from,
+                to: { ...props },
+                duration: Math.max(1, duration),
+                easing: easing ?? Easing.easeOutQuad,
+                elapsed: 0,
+                delay: 0,
+                resolve,
+                onUpdate,
+            };
+            Tween._tweens.push(tween);
+            Tween.ensureTicker();
+        });
+    }
+    /**
+     * Animate properties from given values to current values.
+     */
+    static from(target, props, duration, easing, onUpdate) {
+        // Capture current values as "to"
+        const to = {};
+        for (const key of Object.keys(props)) {
+            to[key] = Tween.getProperty(target, key);
+            Tween.setProperty(target, key, props[key]);
+        }
+        return Tween.to(target, to, duration, easing, onUpdate);
+    }
+    /**
+     * Animate from one set of values to another.
+     */
+    static fromTo(target, fromProps, toProps, duration, easing, onUpdate) {
+        // Set starting values
+        for (const key of Object.keys(fromProps)) {
+            Tween.setProperty(target, key, fromProps[key]);
+        }
+        return Tween.to(target, toProps, duration, easing, onUpdate);
+    }
+    /**
+     * Wait for a given duration (useful in timelines).
+     * Uses PixiJS Ticker for consistent timing with other tweens.
      */
-    async showWin(amount) {
-        this.visible = true;
-        this._cancelCountup = false;
-        this.alpha = 1;
-        const duration = this._config.countupDuration;
-        const startTime = Date.now();
-        // Scale pop
-        this.scale.set(0.5);
+    static delay(ms) {
         return new Promise((resolve) => {
-            const tick = () => {
-                if (this._cancelCountup) {
-                    this.displayAmount(amount);
-                    resolve();
-                    return;
-                }
-                const elapsed = Date.now() - startTime;
-                const t = Math.min(elapsed / duration, 1);
-                const eased = Easing.easeOutCubic(t);
-                // Countup
-                const current = amount * eased;
-                this.displayAmount(current);
-                // Scale animation
-                const scaleT = Math.min(elapsed / 300, 1);
-                const scaleEased = Easing.easeOutBack(scaleT);
-                const targetScale = 1;
-                this.scale.set(0.5 + (targetScale - 0.5) * scaleEased);
-                if (t < 1) {
-                    requestAnimationFrame(tick);
-                }
-                else {
-                    this.displayAmount(amount);
-                    this.scale.set(1);
+            let elapsed = 0;
+            const onTick = (ticker) => {
+                elapsed += ticker.deltaMS;
+                if (elapsed >= ms) {
+                    Ticker.shared.remove(onTick);
                     resolve();
                 }
             };
-            requestAnimationFrame(tick);
+            Ticker.shared.add(onTick);
         });
     }
     /**
-     * Skip the countup animation and show the final amount immediately.
+     * Kill all tweens on a target.
      */
-    skipCountup(amount) {
-        this._cancelCountup = true;
-        this.displayAmount(amount);
-        this.scale.set(1);
+    static killTweensOf(target) {
+        Tween._tweens = Tween._tweens.filter((tw) => {
+            if (tw.target === target) {
+                tw.resolve();
+                return false;
+            }
+            return true;
+        });
     }
     /**
-     * Hide the win display.
+     * Kill all active tweens.
      */
-    hide() {
-        this.visible = false;
-        this._label.text = '';
+    static killAll() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
     }
-    displayAmount(amount) {
-        this._label.setCurrency(amount, this._config.currency, this._config.locale);
+    /** Number of active tweens */
+    static get activeTweens() {
+        return Tween._tweens.length;
+    }
+    /**
+     * Reset the tween system — kill all tweens and remove the ticker.
+     * Useful for cleanup between game instances, tests, or hot-reload.
+     */
+    static reset() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
+        if (Tween._tickerAdded) {
+            Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    }
+    // ─── Internal ──────────────────────────────────────────
+    static ensureTicker() {
+        if (Tween._tickerAdded)
+            return;
+        Tween._tickerAdded = true;
+        Ticker.shared.add(Tween.tick);
+    }
+    static tick = (ticker) => {
+        const dt = ticker.deltaMS;
+        const completed = [];
+        for (const tw of Tween._tweens) {
+            tw.elapsed += dt;
+            if (tw.elapsed < tw.delay)
+                continue;
+            const raw = Math.min((tw.elapsed - tw.delay) / tw.duration, 1);
+            const t = tw.easing(raw);
+            // Interpolate each property
+            for (const key of Object.keys(tw.to)) {
+                const start = tw.from[key];
+                const end = tw.to[key];
+                const value = start + (end - start) * t;
+                Tween.setProperty(tw.target, key, value);
+            }
+            tw.onUpdate?.(raw);
+            if (raw >= 1) {
+                completed.push(tw);
+            }
+        }
+        // Remove completed tweens
+        for (const tw of completed) {
+            const idx = Tween._tweens.indexOf(tw);
+            if (idx !== -1)
+                Tween._tweens.splice(idx, 1);
+            tw.resolve();
+        }
+        // Remove ticker when no active tweens
+        if (Tween._tweens.length === 0 && Tween._tickerAdded) {
+            Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    };
+    /**
+     * Get a potentially nested property (supports 'scale.x', 'position.y', etc.)
+     */
+    static getProperty(target, key) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj[parts[i]];
+        }
+        return obj[parts[parts.length - 1]] ?? 0;
+    }
+    /**
+     * Set a potentially nested property.
+     */
+    static setProperty(target, key, value) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj[parts[i]];
+        }
+        obj[parts[parts.length - 1]] = value;
     }
 }
 
@@ -933,6 +870,8 @@ class WinDisplay extends Container {
  * Modal overlay component.
  * Shows content on top of a dark overlay with enter/exit animations.
  *
+ * The content container uses `@pixi/layout` for automatic centering.
+ *
  * @example
  * ```ts
  * const modal = new Modal({ closeOnOverlay: true });
@@ -951,11 +890,10 @@ class Modal extends Container {
     constructor(config = {}) {
         super();
         this._config = {
-            overlayColor: 0x000000,
-            overlayAlpha: 0.7,
-            closeOnOverlay: true,
-            animationDuration: 300,
-            ...config,
+            overlayColor: config.overlayColor ?? 0x000000,
+            overlayAlpha: config.overlayAlpha ?? 0.7,
+            closeOnOverlay: config.closeOnOverlay ?? true,
+            animationDuration: config.animationDuration ?? 300,
         };
         // Overlay
         this._overlay = new Graphics();
@@ -1038,9 +976,8 @@ class Toast extends Container {
     constructor(config = {}) {
         super();
         this._config = {
-            duration: 3000,
-            bottomOffset: 60,
-            ...config,
+            duration: config.duration ?? 3000,
+            bottomOffset: config.bottomOffset ?? 60,
         };
         this._bg = new Graphics();
         this.addChild(this._bg);
@@ -1060,7 +997,6 @@ class Toast extends Container {
      * Show a toast message.
      */
     async show(message, type = 'info', viewWidth, viewHeight) {
-        // Clear previous dismiss
         if (this._dismissTimeout) {
             clearTimeout(this._dismissTimeout);
         }
@@ -1069,10 +1005,10 @@ class Toast extends Container {
         const width = Math.max(200, this._text.width + padding * 2);
         const height = 44;
         const radius = 8;
+        // Draw the background
         this._bg.clear();
-        this._bg.roundRect(-width / 2, -height / 2, width, height, radius).fill(TOAST_COLORS[type]);
-        this._bg.roundRect(-width / 2, -height / 2, width, height, radius)
-            .fill({ color: 0x000000, alpha: 0.2 });
+        this._bg.roundRect(-width / 2, -height / 2, width, height, radius);
+        this._bg.fill(TOAST_COLORS[type]);
         // Position
         if (viewWidth && viewHeight) {
             this.x = viewWidth / 2;
@@ -1081,9 +1017,7 @@ class Toast extends Container {
         this.visible = true;
         this.alpha = 0;
         this.y += 20;
-        // Animate in
         await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
-        // Auto-dismiss
         if (this._config.duration > 0) {
             this._dismissTimeout = setTimeout(() => {
                 this.dismiss();
@@ -1105,8 +1039,48 @@ class Toast extends Container {
     }
 }
 
+// ─── Helpers ─────────────────────────────────────────────
+const ALIGNMENT_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+};
+function normalizePadding(padding) {
+    if (typeof padding === 'number')
+        return [padding, padding, padding, padding];
+    return padding;
+}
+function directionToFlexStyles(direction, maxWidth) {
+    switch (direction) {
+        case 'horizontal':
+            return { flexDirection: 'row', flexWrap: 'nowrap' };
+        case 'vertical':
+            return { flexDirection: 'column', flexWrap: 'nowrap' };
+        case 'grid':
+            return { flexDirection: 'row', flexWrap: 'wrap' };
+        case 'wrap':
+            return {
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                ...(maxWidth < Infinity ? { maxWidth } : {}),
+            };
+    }
+}
+function buildLayoutStyles(config) {
+    const [pt, pr, pb, pl] = config.padding;
+    return {
+        ...directionToFlexStyles(config.direction, config.maxWidth),
+        gap: config.gap,
+        alignItems: ALIGNMENT_MAP[config.alignment],
+        paddingTop: pt,
+        paddingRight: pr,
+        paddingBottom: pb,
+        paddingLeft: pl,
+    };
+}
 /**
- * Responsive layout container that automatically arranges its children.
+ * Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine).
  *
  * Supports horizontal, vertical, grid, and wrap layout modes with
  * alignment, padding, gap, and viewport-anchor positioning.
@@ -1129,47 +1103,44 @@ class Toast extends Container {
  * toolbar.addItem(betLabel);
  * scene.container.addChild(toolbar);
  *
- * // On resize, update layout position relative to viewport
  * toolbar.updateViewport(width, height);
  * ```
  */
 class Layout extends Container {
-    _config;
+    _layoutConfig;
     _padding;
     _anchor;
     _maxWidth;
     _breakpoints;
-    _content;
     _items = [];
     _viewportWidth = 0;
     _viewportHeight = 0;
     constructor(config = {}) {
         super();
-        this._config = {
+        this._layoutConfig = {
             direction: config.direction ?? 'vertical',
             gap: config.gap ?? 0,
             alignment: config.alignment ?? 'start',
             autoLayout: config.autoLayout ?? true,
             columns: config.columns ?? 2,
         };
-        this._padding = Layout.normalizePadding(config.padding ?? 0);
+        this._padding = normalizePadding(config.padding ?? 0);
         this._anchor = config.anchor ?? 'top-left';
         this._maxWidth = config.maxWidth ?? Infinity;
-        // Sort breakpoints by width ascending for correct resolution
         this._breakpoints = config.breakpoints
             ? Object.entries(config.breakpoints)
                 .map(([w, cfg]) => [Number(w), cfg])
                 .sort((a, b) => a[0] - b[0])
             : [];
-        this._content = new Container();
-        this.addChild(this._content);
+        this.applyLayoutStyles();
     }
     /** Add an item to the layout */
     addItem(child) {
         this._items.push(child);
-        this._content.addChild(child);
-        if (this._config.autoLayout)
-            this.layout();
+        this.addChild(child);
+        if (this._layoutConfig.direction === 'grid') {
+            this.applyGridChildWidth(child);
+        }
         return this;
     }
     /** Remove an item from the layout */
@@ -1177,20 +1148,16 @@ class Layout extends Container {
         const idx = this._items.indexOf(child);
         if (idx !== -1) {
             this._items.splice(idx, 1);
-            this._content.removeChild(child);
-            if (this._config.autoLayout)
-                this.layout();
+            this.removeChild(child);
         }
         return this;
     }
     /** Remove all items */
     clearItems() {
         for (const item of this._items) {
-            this._content.removeChild(item);
+            this.removeChild(item);
         }
         this._items.length = 0;
-        if (this._config.autoLayout)
-            this.layout();
         return this;
     }
     /** Get all layout items */
@@ -1204,129 +1171,55 @@ class Layout extends Container {
     updateViewport(width, height) {
         this._viewportWidth = width;
         this._viewportHeight = height;
-        this.layout();
+        this.applyLayoutStyles();
+        this.applyAnchor();
     }
-    /**
-     * Recalculate layout positions of all children.
-     */
-    layout() {
-        if (this._items.length === 0)
-            return;
-        // Resolve effective config (apply breakpoint overrides)
+    applyLayoutStyles() {
         const effective = this.resolveConfig();
-        const gap = effective.gap ?? this._config.gap;
-        const direction = effective.direction ?? this._config.direction;
-        const alignment = effective.alignment ?? this._config.alignment;
-        const columns = effective.columns ?? this._config.columns;
+        const direction = effective.direction ?? this._layoutConfig.direction;
+        const gap = effective.gap ?? this._layoutConfig.gap;
+        const alignment = effective.alignment ?? this._layoutConfig.alignment;
+        effective.columns ?? this._layoutConfig.columns;
         const padding = effective.padding !== undefined
-            ? Layout.normalizePadding(effective.padding)
+            ? normalizePadding(effective.padding)
             : this._padding;
         const maxWidth = effective.maxWidth ?? this._maxWidth;
-        const [pt, pr, pb, pl] = padding;
-        switch (direction) {
-            case 'horizontal':
-                this.layoutLinear('x', 'y', gap, alignment, pl, pt);
-                break;
-            case 'vertical':
-                this.layoutLinear('y', 'x', gap, alignment, pt, pl);
-                break;
-            case 'grid':
-                this.layoutGrid(columns, gap, alignment, pl, pt);
-                break;
-            case 'wrap':
-                this.layoutWrap(maxWidth - pl - pr, gap, alignment, pl, pt);
-                break;
-        }
-        // Apply anchor positioning relative to viewport
-        this.applyAnchor(effective.anchor ?? this._anchor);
-    }
-    // ─── Private layout helpers ────────────────────────────
-    layoutLinear(mainAxis, crossAxis, gap, alignment, mainOffset, crossOffset) {
-        let pos = mainOffset;
-        const sizes = this._items.map(item => this.getItemSize(item));
-        const maxCross = Math.max(...sizes.map(s => (crossAxis === 'x' ? s.width : s.height)));
-        for (let i = 0; i < this._items.length; i++) {
-            const item = this._items[i];
-            const size = sizes[i];
-            item[mainAxis] = pos;
-            // Cross-axis alignment
-            const itemCross = crossAxis === 'x' ? size.width : size.height;
-            switch (alignment) {
-                case 'start':
-                    item[crossAxis] = crossOffset;
-                    break;
-                case 'center':
-                    item[crossAxis] = crossOffset + (maxCross - itemCross) / 2;
-                    break;
-                case 'end':
-                    item[crossAxis] = crossOffset + maxCross - itemCross;
-                    break;
-                case 'stretch':
-                    item[crossAxis] = crossOffset;
-                    // Note: stretch doesn't resize children — that's up to the item
-                    break;
+        const styles = buildLayoutStyles({ direction, gap, alignment, padding, maxWidth });
+        this.layout = styles;
+        if (direction === 'grid') {
+            for (const item of this._items) {
+                this.applyGridChildWidth(item);
             }
-            const mainSize = mainAxis === 'x' ? size.width : size.height;
-            pos += mainSize + gap;
         }
     }
-    layoutGrid(columns, gap, alignment, offsetX, offsetY) {
-        const sizes = this._items.map(item => this.getItemSize(item));
-        const maxItemWidth = Math.max(...sizes.map(s => s.width));
-        const maxItemHeight = Math.max(...sizes.map(s => s.height));
-        const cellW = maxItemWidth + gap;
-        const cellH = maxItemHeight + gap;
-        for (let i = 0; i < this._items.length; i++) {
-            const item = this._items[i];
-            const col = i % columns;
-            const row = Math.floor(i / columns);
-            const size = sizes[i];
-            // X alignment within cell
-            switch (alignment) {
-                case 'center':
-                    item.x = offsetX + col * cellW + (maxItemWidth - size.width) / 2;
-                    break;
-                case 'end':
-                    item.x = offsetX + col * cellW + maxItemWidth - size.width;
-                    break;
-                default:
-                    item.x = offsetX + col * cellW;
-            }
-            item.y = offsetY + row * cellH;
+    applyGridChildWidth(child) {
+        const effective = this.resolveConfig();
+        const columns = effective.columns ?? this._layoutConfig.columns;
+        const gap = effective.gap ?? this._layoutConfig.gap;
+        // Account for gaps between columns: total gap space = gap * (columns - 1)
+        // Each column gets: (100% - total_gap) / columns
+        // We use flexBasis + flexGrow to let Yoga handle the math when gap > 0
+        const styles = gap > 0
+            ? { flexBasis: 0, flexGrow: 1, flexShrink: 1, maxWidth: `${(100 / columns).toFixed(2)}%` }
+            : { width: `${(100 / columns).toFixed(2)}%` };
+        if (child._layout) {
+            child._layout.setStyle(styles);
         }
-    }
-    layoutWrap(maxWidth, gap, alignment, offsetX, offsetY) {
-        let x = offsetX;
-        let y = offsetY;
-        let rowHeight = 0;
-        const sizes = this._items.map(item => this.getItemSize(item));
-        for (let i = 0; i < this._items.length; i++) {
-            const item = this._items[i];
-            const size = sizes[i];
-            // Check if item fits in current row
-            if (x + size.width > maxWidth + offsetX && x > offsetX) {
-                // Wrap to next row
-                x = offsetX;
-                y += rowHeight + gap;
-                rowHeight = 0;
-            }
-            item.x = x;
-            item.y = y;
-            x += size.width + gap;
-            rowHeight = Math.max(rowHeight, size.height);
+        else {
+            child.layout = styles;
         }
     }
-    applyAnchor(anchor) {
+    applyAnchor() {
+        const anchor = this.resolveConfig().anchor ?? this._anchor;
         if (this._viewportWidth === 0 || this._viewportHeight === 0)
             return;
-        const bounds = this._content.getBounds();
-        const contentW = bounds.width;
-        const contentH = bounds.height;
+        const bounds = this.getLocalBounds();
+        const contentW = bounds.width * this.scale.x;
+        const contentH = bounds.height * this.scale.y;
         const vw = this._viewportWidth;
         const vh = this._viewportHeight;
         let anchorX = 0;
         let anchorY = 0;
-        // Horizontal
         if (anchor.includes('left')) {
             anchorX = 0;
         }
@@ -1334,10 +1227,8 @@ class Layout extends Container {
             anchorX = vw - contentW;
         }
         else {
-            // center
             anchorX = (vw - contentW) / 2;
         }
-        // Vertical
         if (anchor.startsWith('top')) {
             anchorY = 0;
         }
@@ -1345,44 +1236,34 @@ class Layout extends Container {
             anchorY = vh - contentH;
         }
         else {
-            // center
             anchorY = (vh - contentH) / 2;
         }
-        // Compensate for content's local bounds offset
-        this.x = anchorX - bounds.x;
-        this.y = anchorY - bounds.y;
+        this.x = anchorX - bounds.x * this.scale.x;
+        this.y = anchorY - bounds.y * this.scale.y;
     }
     resolveConfig() {
         if (this._breakpoints.length === 0 || this._viewportWidth === 0) {
             return {};
         }
-        // Find the largest breakpoint that's ≤ current viewport width
-        let resolved = {};
         for (const [maxWidth, overrides] of this._breakpoints) {
             if (this._viewportWidth <= maxWidth) {
-                resolved = overrides;
-                break;
+                return overrides;
             }
         }
-        return resolved;
-    }
-    getItemSize(item) {
-        const bounds = item.getBounds();
-        return { width: bounds.width, height: bounds.height };
-    }
-    static normalizePadding(padding) {
-        if (typeof padding === 'number') {
-            return [padding, padding, padding, padding];
-        }
-        return padding;
+        return {};
     }
 }
 
+const DIRECTION_MAP = {
+    vertical: 'vertical',
+    horizontal: 'horizontal',
+    both: 'bidirectional',
+};
 /**
- * Scrollable container with touch/drag, mouse wheel, inertia, and optional scrollbar.
+ * Scrollable container powered by `@pixi/ui` ScrollBox.
  *
- * Perfect for paytables, settings panels, bet history, and any scrollable content
- * that doesn't fit on screen.
+ * Provides touch/drag scrolling, mouse wheel support, inertia, and
+ * dynamic rendering optimization for off-screen items.
  *
  * @example
  * ```ts
@@ -1390,435 +1271,63 @@ class Layout extends Container {
  *   width: 600,
  *   height: 400,
  *   direction: 'vertical',
- *   showScrollbar: true,
- *   elasticity: 0.3,
+ *   elementsMargin: 8,
  * });
  *
- * // Add content taller than 400px
- * const list = new Container();
  * for (let i = 0; i < 50; i++) {
- *   const row = createRow(i);
- *   row.y = i * 40;
- *   list.addChild(row);
+ *   scroll.addItem(createRow(i));
  * }
- * scroll.setContent(list);
  *
  * scene.container.addChild(scroll);
  * ```
  */
-class ScrollContainer extends Container {
-    _config;
-    _viewport;
-    _content = null;
-    _mask;
-    _bg;
-    _scrollbarV = null;
-    _scrollbarH = null;
-    _scrollbarFadeTimeout = null;
-    // Scroll state
-    _scrollX = 0;
-    _scrollY = 0;
-    _velocityX = 0;
-    _velocityY = 0;
-    _isDragging = false;
-    _dragStart = { x: 0, y: 0 };
-    _scrollStart = { x: 0, y: 0 };
-    _lastDragPos = { x: 0, y: 0 };
-    _lastDragTime = 0;
-    _isAnimating = false;
-    _animationFrame = null;
+class ScrollContainer extends ScrollBox {
+    _scrollConfig;
     constructor(config) {
-        super();
-        this._config = {
+        const options = {
             width: config.width,
             height: config.height,
-            direction: config.direction ?? 'vertical',
-            showScrollbar: config.showScrollbar ?? true,
-            scrollbarWidth: config.scrollbarWidth ?? 6,
-            scrollbarColor: config.scrollbarColor ?? 0xffffff,
-            scrollbarAlpha: config.scrollbarAlpha ?? 0.4,
-            elasticity: config.elasticity ?? 0.3,
-            inertia: config.inertia ?? 0.92,
-            snapSize: config.snapSize ?? 0,
-            borderRadius: config.borderRadius ?? 0,
+            type: DIRECTION_MAP[config.direction ?? 'vertical'],
+            radius: config.borderRadius ?? 0,
+            elementsMargin: config.elementsMargin ?? 0,
+            padding: config.padding ?? 0,
+            disableDynamicRendering: config.disableDynamicRendering ?? false,
+            disableEasing: config.disableEasing ?? false,
+            globalScroll: config.globalScroll ?? true,
         };
-        // Background
-        this._bg = new Graphics();
         if (config.backgroundColor !== undefined) {
-            this._bg.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
-                .fill({ color: config.backgroundColor, alpha: config.backgroundAlpha ?? 1 });
+            options.background = config.backgroundColor;
         }
-        this.addChild(this._bg);
-        // Viewport (masked area)
-        this._viewport = new Container();
-        this.addChild(this._viewport);
-        // Mask
-        this._mask = new Graphics();
-        this._mask.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
-            .fill(0xffffff);
-        this.addChild(this._mask);
-        this._viewport.mask = this._mask;
-        // Scrollbars
-        if (this._config.showScrollbar) {
-            if (this._config.direction !== 'horizontal') {
-                this._scrollbarV = new Graphics();
-                this._scrollbarV.alpha = 0;
-                this.addChild(this._scrollbarV);
-            }
-            if (this._config.direction !== 'vertical') {
-                this._scrollbarH = new Graphics();
-                this._scrollbarH.alpha = 0;
-                this.addChild(this._scrollbarH);
-            }
-        }
-        // Interaction
-        this.eventMode = 'static';
-        this.cursor = 'grab';
-        this.hitArea = { contains: (x, y) => x >= 0 && x <= config.width && y >= 0 && y <= config.height };
-        this.on('pointerdown', this.onPointerDown);
-        this.on('pointermove', this.onPointerMove);
-        this.on('pointerup', this.onPointerUp);
-        this.on('pointerupoutside', this.onPointerUp);
-        this.on('wheel', this.onWheel);
+        super(options);
+        this._scrollConfig = config;
     }
     /** Set scrollable content. Replaces any existing content. */
     setContent(content) {
-        if (this._content) {
-            this._viewport.removeChild(this._content);
+        // Remove existing items
+        const existing = this.items;
+        if (existing.length > 0) {
+            for (let i = existing.length - 1; i >= 0; i--) {
+                this.removeItem(i);
+            }
         }
-        this._content = content;
-        this._viewport.addChild(content);
-        this._scrollX = 0;
-        this._scrollY = 0;
-        this.applyScroll();
-    }
-    /** Get the content container */
-    get content() {
-        return this._content;
-    }
-    /** Scroll to a specific position (in content coordinates) */
-    scrollTo(x, y, animate = true) {
-        if (!animate) {
-            this._scrollX = x;
-            this._scrollY = y;
-            this.clampScroll();
-            this.applyScroll();
-            return;
+        // Add all children from the content container
+        const children = [...content.children];
+        if (children.length > 0) {
+            this.addItems(children);
         }
-        this.animateScrollTo(x, y);
+    }
+    /** Add a single item */
+    addItem(...items) {
+        this.addItems(items);
+        return items[0];
     }
     /** Scroll to make a specific item/child visible */
     scrollToItem(index) {
-        if (this._config.snapSize > 0) {
-            const pos = index * this._config.snapSize;
-            if (this._config.direction === 'horizontal') {
-                this.scrollTo(pos, this._scrollY);
-            }
-            else {
-                this.scrollTo(this._scrollX, pos);
-            }
-        }
+        this.scrollTo(index);
     }
     /** Current scroll position */
     get scrollPosition() {
-        return { x: this._scrollX, y: this._scrollY };
-    }
-    /** Resize the scroll viewport */
-    resize(width, height) {
-        this._config.width = width;
-        this._config.height = height;
-        // Redraw mask and background
-        this._mask.clear();
-        this._mask.roundRect(0, 0, width, height, this._config.borderRadius).fill(0xffffff);
-        this._bg.clear();
-        this.hitArea = { contains: (x, y) => x >= 0 && x <= width && y >= 0 && y <= height };
-        this.clampScroll();
-        this.applyScroll();
-    }
-    /** Destroy and clean up */
-    destroy(options) {
-        this.stopAnimation();
-        if (this._scrollbarFadeTimeout !== null) {
-            clearTimeout(this._scrollbarFadeTimeout);
-        }
-        this.off('pointerdown', this.onPointerDown);
-        this.off('pointermove', this.onPointerMove);
-        this.off('pointerup', this.onPointerUp);
-        this.off('pointerupoutside', this.onPointerUp);
-        this.off('wheel', this.onWheel);
-        super.destroy(options);
-    }
-    // ─── Scroll mechanics ─────────────────────────────────
-    get contentWidth() {
-        if (!this._content)
-            return 0;
-        const bounds = this._content.getBounds();
-        return bounds.width;
-    }
-    get contentHeight() {
-        if (!this._content)
-            return 0;
-        const bounds = this._content.getBounds();
-        return bounds.height;
-    }
-    get maxScrollX() {
-        return Math.max(0, this.contentWidth - this._config.width);
-    }
-    get maxScrollY() {
-        return Math.max(0, this.contentHeight - this._config.height);
-    }
-    canScrollX() {
-        return this._config.direction === 'horizontal' || this._config.direction === 'both';
-    }
-    canScrollY() {
-        return this._config.direction === 'vertical' || this._config.direction === 'both';
-    }
-    clampScroll() {
-        if (this.canScrollX()) {
-            this._scrollX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
-        }
-        else {
-            this._scrollX = 0;
-        }
-        if (this.canScrollY()) {
-            this._scrollY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
-        }
-        else {
-            this._scrollY = 0;
-        }
-    }
-    applyScroll() {
-        if (!this._content)
-            return;
-        this._content.x = -this._scrollX;
-        this._content.y = -this._scrollY;
-        this.updateScrollbars();
-    }
-    // ─── Input handlers ────────────────────────────────────
-    onPointerDown = (e) => {
-        this._isDragging = true;
-        this._isAnimating = false;
-        this.stopAnimation();
-        this.cursor = 'grabbing';
-        const local = e.getLocalPosition(this);
-        this._dragStart = { x: local.x, y: local.y };
-        this._scrollStart = { x: this._scrollX, y: this._scrollY };
-        this._lastDragPos = { x: local.x, y: local.y };
-        this._lastDragTime = Date.now();
-        this._velocityX = 0;
-        this._velocityY = 0;
-        this.showScrollbars();
-    };
-    onPointerMove = (e) => {
-        if (!this._isDragging)
-            return;
-        const local = e.getLocalPosition(this);
-        const dx = local.x - this._dragStart.x;
-        const dy = local.y - this._dragStart.y;
-        const now = Date.now();
-        const dt = Math.max(1, now - this._lastDragTime);
-        // Calculate velocity for inertia
-        this._velocityX = (local.x - this._lastDragPos.x) / dt * 16; // normalize to ~60fps
-        this._velocityY = (local.y - this._lastDragPos.y) / dt * 16;
-        this._lastDragPos = { x: local.x, y: local.y };
-        this._lastDragTime = now;
-        // Apply scroll with elasticity for overscroll
-        let newX = this._scrollStart.x - dx;
-        let newY = this._scrollStart.y - dy;
-        const elasticity = this._config.elasticity;
-        if (this.canScrollX()) {
-            if (newX < 0)
-                newX *= elasticity;
-            else if (newX > this.maxScrollX)
-                newX = this.maxScrollX + (newX - this.maxScrollX) * elasticity;
-            this._scrollX = newX;
-        }
-        if (this.canScrollY()) {
-            if (newY < 0)
-                newY *= elasticity;
-            else if (newY > this.maxScrollY)
-                newY = this.maxScrollY + (newY - this.maxScrollY) * elasticity;
-            this._scrollY = newY;
-        }
-        this.applyScroll();
-    };
-    onPointerUp = () => {
-        if (!this._isDragging)
-            return;
-        this._isDragging = false;
-        this.cursor = 'grab';
-        // Start inertia
-        if (Math.abs(this._velocityX) > 0.5 || Math.abs(this._velocityY) > 0.5) {
-            this.startInertia();
-        }
-        else {
-            this.snapAndBounce();
-        }
-    };
-    onWheel = (e) => {
-        e.preventDefault?.();
-        const delta = e.deltaY ?? 0;
-        const deltaX = e.deltaX ?? 0;
-        if (this.canScrollY()) {
-            this._scrollY += delta * 0.5;
-        }
-        if (this.canScrollX()) {
-            this._scrollX += deltaX * 0.5;
-        }
-        this.clampScroll();
-        this.applyScroll();
-        this.showScrollbars();
-        this.scheduleScrollbarFade();
-    };
-    // ─── Inertia & snap ───────────────────────────────────
-    startInertia() {
-        this._isAnimating = true;
-        const tick = () => {
-            if (!this._isAnimating)
-                return;
-            this._velocityX *= this._config.inertia;
-            this._velocityY *= this._config.inertia;
-            if (this.canScrollX())
-                this._scrollX -= this._velocityX;
-            if (this.canScrollY())
-                this._scrollY -= this._velocityY;
-            // Bounce back if overscrolled
-            let bounced = false;
-            if (this.canScrollX()) {
-                if (this._scrollX < 0) {
-                    this._scrollX *= 0.8;
-                    bounced = true;
-                }
-                else if (this._scrollX > this.maxScrollX) {
-                    this._scrollX = this.maxScrollX + (this._scrollX - this.maxScrollX) * 0.8;
-                    bounced = true;
-                }
-            }
-            if (this.canScrollY()) {
-                if (this._scrollY < 0) {
-                    this._scrollY *= 0.8;
-                    bounced = true;
-                }
-                else if (this._scrollY > this.maxScrollY) {
-                    this._scrollY = this.maxScrollY + (this._scrollY - this.maxScrollY) * 0.8;
-                    bounced = true;
-                }
-            }
-            this.applyScroll();
-            const speed = Math.abs(this._velocityX) + Math.abs(this._velocityY);
-            if (speed < 0.1 && !bounced) {
-                this._isAnimating = false;
-                this.snapAndBounce();
-                return;
-            }
-            this._animationFrame = requestAnimationFrame(tick);
-        };
-        this._animationFrame = requestAnimationFrame(tick);
-    }
-    snapAndBounce() {
-        // Clamp first
-        let targetX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
-        let targetY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
-        // Snap
-        if (this._config.snapSize > 0) {
-            if (this.canScrollY()) {
-                targetY = Math.round(targetY / this._config.snapSize) * this._config.snapSize;
-                targetY = Math.max(0, Math.min(targetY, this.maxScrollY));
-            }
-            if (this.canScrollX()) {
-                targetX = Math.round(targetX / this._config.snapSize) * this._config.snapSize;
-                targetX = Math.max(0, Math.min(targetX, this.maxScrollX));
-            }
-        }
-        if (Math.abs(targetX - this._scrollX) < 0.5 && Math.abs(targetY - this._scrollY) < 0.5) {
-            this._scrollX = targetX;
-            this._scrollY = targetY;
-            this.applyScroll();
-            this.scheduleScrollbarFade();
-            return;
-        }
-        this.animateScrollTo(targetX, targetY);
-    }
-    animateScrollTo(targetX, targetY) {
-        this._isAnimating = true;
-        const startX = this._scrollX;
-        const startY = this._scrollY;
-        const startTime = Date.now();
-        const duration = 300;
-        const tick = () => {
-            if (!this._isAnimating)
-                return;
-            const elapsed = Date.now() - startTime;
-            const t = Math.min(elapsed / duration, 1);
-            // easeOutCubic
-            const eased = 1 - Math.pow(1 - t, 3);
-            this._scrollX = startX + (targetX - startX) * eased;
-            this._scrollY = startY + (targetY - startY) * eased;
-            this.applyScroll();
-            if (t < 1) {
-                this._animationFrame = requestAnimationFrame(tick);
-            }
-            else {
-                this._isAnimating = false;
-                this.scheduleScrollbarFade();
-            }
-        };
-        this._animationFrame = requestAnimationFrame(tick);
-    }
-    stopAnimation() {
-        this._isAnimating = false;
-        if (this._animationFrame !== null) {
-            cancelAnimationFrame(this._animationFrame);
-            this._animationFrame = null;
-        }
-    }
-    // ─── Scrollbars ────────────────────────────────────────
-    updateScrollbars() {
-        const { width, height, scrollbarWidth, scrollbarColor, scrollbarAlpha } = this._config;
-        if (this._scrollbarV && this.canScrollY() && this.contentHeight > height) {
-            const ratio = height / this.contentHeight;
-            const barH = Math.max(20, height * ratio);
-            const barY = (this._scrollY / this.maxScrollY) * (height - barH);
-            this._scrollbarV.clear();
-            this._scrollbarV.roundRect(width - scrollbarWidth - 2, Math.max(0, barY), scrollbarWidth, barH, scrollbarWidth / 2).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
-        }
-        if (this._scrollbarH && this.canScrollX() && this.contentWidth > width) {
-            const ratio = width / this.contentWidth;
-            const barW = Math.max(20, width * ratio);
-            const barX = (this._scrollX / this.maxScrollX) * (width - barW);
-            this._scrollbarH.clear();
-            this._scrollbarH.roundRect(Math.max(0, barX), height - scrollbarWidth - 2, barW, scrollbarWidth, scrollbarWidth / 2).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
-        }
-    }
-    showScrollbars() {
-        if (this._scrollbarV)
-            this._scrollbarV.alpha = 1;
-        if (this._scrollbarH)
-            this._scrollbarH.alpha = 1;
-    }
-    scheduleScrollbarFade() {
-        if (this._scrollbarFadeTimeout !== null) {
-            clearTimeout(this._scrollbarFadeTimeout);
-        }
-        this._scrollbarFadeTimeout = window.setTimeout(() => {
-            this.fadeScrollbars();
-        }, 1000);
-    }
-    fadeScrollbars() {
-        const duration = 300;
-        const startTime = Date.now();
-        const startAlphaV = this._scrollbarV?.alpha ?? 0;
-        const startAlphaH = this._scrollbarH?.alpha ?? 0;
-        const tick = () => {
-            const t = Math.min((Date.now() - startTime) / duration, 1);
-            if (this._scrollbarV)
-                this._scrollbarV.alpha = startAlphaV * (1 - t);
-            if (this._scrollbarH)
-                this._scrollbarH.alpha = startAlphaH * (1 - t);
-            if (t < 1)
-                requestAnimationFrame(tick);
-        };
-        requestAnimationFrame(tick);
+        return { x: this.scrollX, y: this.scrollY };
     }
 }