@energy8platform/game-engine 0.3.0 → 0.5.0

package/dist/index.cjs.js

@@ -2,6 +2,8 @@
 
 var pixi_js = require('pixi.js');
 var gameSdk = require('@energy8platform/game-sdk');
+var ui = require('@pixi/ui');
+var components = require('@pixi/layout/components');
 
 // ─── Scale Modes ───────────────────────────────────────────
 exports.ScaleMode = void 0;
@@ -2174,6 +2176,7 @@ class GameApplication extends EventEmitter {
     async initPixi() {
         this.app = new pixi_js.Application();
         const pixiOpts = {
+            preference: 'webgl',
             background: typeof this.config.loading?.backgroundColor === 'number'
                 ? this.config.loading.backgroundColor
                 : 0x000000,
@@ -2881,161 +2884,112 @@ class SpriteAnimation {
 }
 
 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;
         }
-        // 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';
-    }
-    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;
-        }
+        return !this.enabled;
     }
-    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
@@ -3045,33 +2999,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() {
@@ -3081,13 +3050,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) {
@@ -3096,35 +3065,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;
     }
 }
 
@@ -3220,7 +3161,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
@@ -3235,72 +3179,67 @@ 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;
+        }
+        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 pixi_js.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 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 });
     }
 }
 
@@ -3388,7 +3327,6 @@ class BalanceDisplay extends pixi_js.Container {
         this.updateDisplay();
     }
     async animateValue(from, to) {
-        // Cancel any ongoing animation
         if (this._animating) {
             this._animationCancelled = true;
         }
@@ -3398,7 +3336,6 @@ class BalanceDisplay extends pixi_js.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();
@@ -3540,6 +3477,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 });
@@ -3558,11 +3497,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();
@@ -3645,9 +3583,8 @@ 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.addChild(this._bg);
@@ -3667,7 +3604,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);
         }
@@ -3676,10 +3612,10 @@ class Toast extends pixi_js.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;
@@ -3688,9 +3624,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();
@@ -3712,8 +3646,48 @@ 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 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.
@@ -3736,47 +3710,44 @@ class Toast extends pixi_js.Container {
  * toolbar.addItem(betLabel);
  * scene.container.addChild(toolbar);
  *
- * // On resize, update layout position relative to viewport
  * toolbar.updateViewport(width, height);
  * ```
  */
 class Layout extends pixi_js.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 pixi_js.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 */
@@ -3784,20 +3755,16 @@ class Layout extends pixi_js.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 */
@@ -3811,129 +3778,55 @@ class Layout extends pixi_js.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 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;
-        }
-    }
-    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;
+        const styles = buildLayoutStyles({ direction, gap, alignment, padding, maxWidth });
+        this.layout = styles;
+        if (direction === 'grid') {
+            for (const item of this._items) {
+                this.applyGridChildWidth(item);
             }
-            item.x = x;
-            item.y = y;
-            x += size.width + gap;
-            rowHeight = Math.max(rowHeight, size.height);
         }
     }
-    applyAnchor(anchor) {
+    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);
+        }
+        else {
+            child.layout = styles;
+        }
+    }
+    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;
         }
@@ -3941,10 +3834,8 @@ class Layout extends pixi_js.Container {
             anchorX = vw - contentW;
         }
         else {
-            // center
             anchorX = (vw - contentW) / 2;
         }
-        // Vertical
         if (anchor.startsWith('top')) {
             anchorY = 0;
         }
@@ -3952,44 +3843,34 @@ class Layout extends pixi_js.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
@@ -3997,435 +3878,63 @@ class Layout extends pixi_js.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 pixi_js.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 ui.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 pixi_js.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 });
-        }
-        this.addChild(this._bg);
-        // Viewport (masked area)
-        this._viewport = new pixi_js.Container();
-        this.addChild(this._viewport);
-        // Mask
-        this._mask = new pixi_js.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 pixi_js.Graphics();
-                this._scrollbarV.alpha = 0;
-                this.addChild(this._scrollbarV);
-            }
-            if (this._config.direction !== 'vertical') {
-                this._scrollbarH = new pixi_js.Graphics();
-                this._scrollbarH.alpha = 0;
-                this.addChild(this._scrollbarH);
-            }
+            options.background = config.backgroundColor;
         }
-        // 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 };
     }
 }