@energy8platform/game-engine 0.2.1 → 0.4.0

package/dist/ui.cjs.js

@@ -1,411 +1,117 @@
 'use strict';
 
+var layout = require('@pixi/layout');
 var pixi_js = require('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).
-     */
-    static delay(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-    /**
-     * 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;
-    }
-    // ─── Internal ──────────────────────────────────────────
-    static ensureTicker() {
-        if (Tween._tickerAdded)
-            return;
-        Tween._tickerAdded = true;
-        pixi_js.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) {
-            pixi_js.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;
-    }
-}
+var ui = require('@pixi/ui');
+var components = require('@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 pixi_js.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 pixi_js.Container {
-    _state = 'normal';
-    _bg;
-    _sprites = {};
-    _config;
-    /** Called when the button is tapped/clicked */
-    onTap;
-    /** Called when the button state changes */
-    onStateChange;
+class Button extends ui.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 pixi_js.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' ? pixi_js.Texture.from(tex) : tex;
-                const sprite = new pixi_js.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;
+        }
+        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;
         }
-        // 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');
+        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 pixi_js.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
@@ -415,33 +121,48 @@ class Button extends pixi_js.Container {
  * ```
  */
 class ProgressBar extends pixi_js.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,
+        };
+        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._track = new pixi_js.Graphics();
-        this._fill = new pixi_js.Graphics();
-        this._border = new pixi_js.Graphics();
-        this.addChild(this._track, this._fill, this._border);
-        this.drawTrack();
-        this.drawBorder();
-        this.drawFill(0);
+        this._bar = new ui.ProgressBar(options);
+        this.addChild(this._bar);
+        // Border overlay
+        this._borderGfx = new pixi_js.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() {
@@ -451,13 +172,13 @@ class ProgressBar extends pixi_js.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) {
@@ -466,35 +187,7 @@ class ProgressBar extends pixi_js.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;
     }
 }
 
@@ -590,7 +283,10 @@ class Label extends pixi_js.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
@@ -605,75 +301,148 @@ class Label extends pixi_js.Container {
  * });
  * ```
  */
-class Panel extends pixi_js.Container {
-    _bg;
-    _content;
-    _config;
+class Panel extends components.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'
                 ? pixi_js.Texture.from(config.nineSliceTexture)
                 : config.nineSliceTexture;
             const [left, top, right, bottom] = config.nineSliceBorders ?? [10, 10, 10, 10];
-            this._bg = new pixi_js.NineSliceSprite({
+            const nineSlice = new pixi_js.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;
         }
-        else {
-            this._bg = new pixi_js.Graphics();
-            this.drawGraphicsBg();
+        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;
+            }
+        }
+        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 pixi_js.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 pixi_js.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.
  *
@@ -696,6 +465,7 @@ class BalanceDisplay extends pixi_js.Container {
     _currentValue = 0;
     _displayedValue = 0;
     _animating = false;
+    _animationCancelled = false;
     constructor(config = {}) {
         super();
         this._config = {
@@ -757,11 +527,20 @@ class BalanceDisplay extends pixi_js.Container {
         this.updateDisplay();
     }
     async animateValue(from, to) {
+        if (this._animating) {
+            this._animationCancelled = true;
+        }
         this._animating = true;
+        this._animationCancelled = false;
         const duration = this._config.animationDuration;
         const startTime = Date.now();
         return new Promise((resolve) => {
             const tick = () => {
+                if (this._animationCancelled) {
+                    this._animating = false;
+                    resolve();
+                    return;
+                }
                 const elapsed = Date.now() - startTime;
                 const t = Math.min(elapsed / duration, 1);
                 const eased = Easing.easeOutCubic(t);
@@ -827,70 +606,265 @@ class WinDisplay extends pixi_js.Container {
                 ...config.style,
             },
         });
-        this.addChild(this._label);
-        this.visible = false;
+        this.addChild(this._label);
+        this.visible = false;
+    }
+    /**
+     * 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();
+        });
     }
     /**
-     * Show a win with countup animation.
-     *
-     * @param amount - Win amount
-     * @returns Promise that resolves when the animation completes
+     * Animate properties from given values to current values.
      */
-    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 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) => {
-            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) {
+                    pixi_js.Ticker.shared.remove(onTick);
                     resolve();
                 }
             };
-            requestAnimationFrame(tick);
+            pixi_js.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) {
+            pixi_js.Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    }
+    // ─── Internal ──────────────────────────────────────────
+    static ensureTicker() {
+        if (Tween._tickerAdded)
+            return;
+        Tween._tickerAdded = true;
+        pixi_js.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) {
+            pixi_js.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;
     }
 }
 
@@ -898,6 +872,8 @@ class WinDisplay extends pixi_js.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 });
@@ -916,11 +892,10 @@ class Modal extends pixi_js.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 pixi_js.Graphics();
@@ -988,6 +963,8 @@ const TOAST_COLORS = {
 /**
  * Toast notification component for displaying transient messages.
  *
+ * Uses `@pixi/layout` LayoutContainer for auto-sized background.
+ *
  * @example
  * ```ts
  * const toast = new Toast();
@@ -1003,11 +980,10 @@ class Toast extends pixi_js.Container {
     constructor(config = {}) {
         super();
         this._config = {
-            duration: 3000,
-            bottomOffset: 60,
-            ...config,
+            duration: config.duration ?? 3000,
+            bottomOffset: config.bottomOffset ?? 60,
         };
-        this._bg = new pixi_js.Graphics();
+        this._bg = new components.LayoutContainer();
         this.addChild(this._bg);
         this._text = new pixi_js.Text({
             text: '',
@@ -1025,7 +1001,6 @@ class Toast extends pixi_js.Container {
      * Show a toast message.
      */
     async show(message, type = 'info', viewWidth, viewHeight) {
-        // Clear previous dismiss
         if (this._dismissTimeout) {
             clearTimeout(this._dismissTimeout);
         }
@@ -1034,10 +1009,16 @@ class Toast extends pixi_js.Container {
         const width = Math.max(200, this._text.width + padding * 2);
         const height = 44;
         const radius = 8;
-        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 });
+        // Style the background
+        this._bg.layout = {
+            width,
+            height,
+            borderRadius: radius,
+            backgroundColor: TOAST_COLORS[type],
+        };
+        // Center the bg around origin
+        this._bg.x = -width / 2;
+        this._bg.y = -height / 2;
         // Position
         if (viewWidth && viewHeight) {
             this.x = viewWidth / 2;
@@ -1046,9 +1027,7 @@ class Toast extends pixi_js.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();
@@ -1070,12 +1049,320 @@ class Toast extends pixi_js.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 powered by `@pixi/layout` (Yoga flexbox engine).
+ *
+ * Supports horizontal, vertical, grid, and wrap layout modes with
+ * alignment, padding, gap, and viewport-anchor positioning.
+ * Breakpoints allow different layouts for different screen sizes.
+ *
+ * @example
+ * ```ts
+ * const toolbar = new Layout({
+ *   direction: 'horizontal',
+ *   gap: 20,
+ *   alignment: 'center',
+ *   anchor: 'bottom-center',
+ *   padding: 16,
+ *   breakpoints: {
+ *     768: { direction: 'vertical', gap: 10 },
+ *   },
+ * });
+ *
+ * toolbar.addItem(spinButton);
+ * toolbar.addItem(betLabel);
+ * scene.container.addChild(toolbar);
+ *
+ * toolbar.updateViewport(width, height);
+ * ```
+ */
+class Layout extends pixi_js.Container {
+    _layoutConfig;
+    _padding;
+    _anchor;
+    _maxWidth;
+    _breakpoints;
+    _items = [];
+    _viewportWidth = 0;
+    _viewportHeight = 0;
+    constructor(config = {}) {
+        super();
+        this._layoutConfig = {
+            direction: config.direction ?? 'vertical',
+            gap: config.gap ?? 0,
+            alignment: config.alignment ?? 'start',
+            autoLayout: config.autoLayout ?? true,
+            columns: config.columns ?? 2,
+        };
+        this._padding = normalizePadding(config.padding ?? 0);
+        this._anchor = config.anchor ?? 'top-left';
+        this._maxWidth = config.maxWidth ?? Infinity;
+        this._breakpoints = config.breakpoints
+            ? Object.entries(config.breakpoints)
+                .map(([w, cfg]) => [Number(w), cfg])
+                .sort((a, b) => a[0] - b[0])
+            : [];
+        this.applyLayoutStyles();
+    }
+    /** Add an item to the layout */
+    addItem(child) {
+        this._items.push(child);
+        this.addChild(child);
+        if (this._layoutConfig.direction === 'grid') {
+            this.applyGridChildWidth(child);
+        }
+        return this;
+    }
+    /** Remove an item from the layout */
+    removeItem(child) {
+        const idx = this._items.indexOf(child);
+        if (idx !== -1) {
+            this._items.splice(idx, 1);
+            this.removeChild(child);
+        }
+        return this;
+    }
+    /** Remove all items */
+    clearItems() {
+        for (const item of this._items) {
+            this.removeChild(item);
+        }
+        this._items.length = 0;
+        return this;
+    }
+    /** Get all layout items */
+    get items() {
+        return this._items;
+    }
+    /**
+     * Update the viewport size and recalculate layout.
+     * Should be called from `Scene.onResize()`.
+     */
+    updateViewport(width, height) {
+        this._viewportWidth = width;
+        this._viewportHeight = height;
+        this.applyLayoutStyles();
+        this.applyAnchor();
+    }
+    applyLayoutStyles() {
+        const effective = this.resolveConfig();
+        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
+            ? normalizePadding(effective.padding)
+            : this._padding;
+        const maxWidth = effective.maxWidth ?? this._maxWidth;
+        const styles = buildLayoutStyles({ direction, gap, alignment, padding, maxWidth });
+        this.layout = styles;
+        if (direction === 'grid') {
+            for (const item of this._items) {
+                this.applyGridChildWidth(item);
+            }
+        }
+    }
+    applyGridChildWidth(child) {
+        const effective = this.resolveConfig();
+        const columns = effective.columns ?? this._layoutConfig.columns;
+        const pct = `${(100 / columns).toFixed(2)}%`;
+        if (child._layout) {
+            child._layout.setStyle({ width: pct });
+        }
+        else {
+            child.layout = { width: pct };
+        }
+    }
+    applyAnchor() {
+        const anchor = this.resolveConfig().anchor ?? this._anchor;
+        if (this._viewportWidth === 0 || this._viewportHeight === 0)
+            return;
+        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;
+        if (anchor.includes('left')) {
+            anchorX = 0;
+        }
+        else if (anchor.includes('right')) {
+            anchorX = vw - contentW;
+        }
+        else {
+            anchorX = (vw - contentW) / 2;
+        }
+        if (anchor.startsWith('top')) {
+            anchorY = 0;
+        }
+        else if (anchor.startsWith('bottom')) {
+            anchorY = vh - contentH;
+        }
+        else {
+            anchorY = (vh - contentH) / 2;
+        }
+        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 {};
+        }
+        for (const [maxWidth, overrides] of this._breakpoints) {
+            if (this._viewportWidth <= maxWidth) {
+                return overrides;
+            }
+        }
+        return {};
+    }
+}
+
+const DIRECTION_MAP = {
+    vertical: 'vertical',
+    horizontal: 'horizontal',
+    both: 'bidirectional',
+};
+/**
+ * Scrollable container powered by `@pixi/ui` ScrollBox.
+ *
+ * Provides touch/drag scrolling, mouse wheel support, inertia, and
+ * dynamic rendering optimization for off-screen items.
+ *
+ * @example
+ * ```ts
+ * const scroll = new ScrollContainer({
+ *   width: 600,
+ *   height: 400,
+ *   direction: 'vertical',
+ *   elementsMargin: 8,
+ * });
+ *
+ * for (let i = 0; i < 50; i++) {
+ *   scroll.addItem(createRow(i));
+ * }
+ *
+ * scene.container.addChild(scroll);
+ * ```
+ */
+class ScrollContainer extends ui.ScrollBox {
+    _scrollConfig;
+    constructor(config) {
+        const options = {
+            width: config.width,
+            height: config.height,
+            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,
+        };
+        if (config.backgroundColor !== undefined) {
+            options.background = config.backgroundColor;
+        }
+        super(options);
+        this._scrollConfig = config;
+    }
+    /** Set scrollable content. Replaces any existing content. */
+    setContent(content) {
+        // Remove existing items
+        const existing = this.items;
+        if (existing.length > 0) {
+            for (let i = existing.length - 1; i >= 0; i--) {
+                this.removeItem(i);
+            }
+        }
+        // Add all children from the content container
+        const children = [...content.children];
+        if (children.length > 0) {
+            this.addItems(children);
+        }
+    }
+    /** Add a single item */
+    addItem(...items) {
+        this.addItems(items);
+        return items[0];
+    }
+    /** Scroll to make a specific item/child visible */
+    scrollToItem(index) {
+        this.scrollTo(index);
+    }
+    /** Current scroll position */
+    get scrollPosition() {
+        return { x: this.scrollX, y: this.scrollY };
+    }
+}
+
+Object.defineProperty(exports, "PixiLayout", {
+    enumerable: true,
+    get: function () { return layout.Layout; }
+});
+Object.defineProperty(exports, "ButtonContainer", {
+    enumerable: true,
+    get: function () { return ui.ButtonContainer; }
+});
+Object.defineProperty(exports, "FancyButton", {
+    enumerable: true,
+    get: function () { return ui.FancyButton; }
+});
+Object.defineProperty(exports, "ScrollBox", {
+    enumerable: true,
+    get: function () { return ui.ScrollBox; }
+});
+Object.defineProperty(exports, "LayoutContainer", {
+    enumerable: true,
+    get: function () { return components.LayoutContainer; }
+});
 exports.BalanceDisplay = BalanceDisplay;
 exports.Button = Button;
 exports.Label = Label;
+exports.Layout = Layout;
 exports.Modal = Modal;
 exports.Panel = Panel;
 exports.ProgressBar = ProgressBar;
+exports.ScrollContainer = ScrollContainer;
 exports.Toast = Toast;
 exports.WinDisplay = WinDisplay;
 //# sourceMappingURL=ui.cjs.js.map