@energy8platform/game-engine 0.2.1 → 0.4.0

package/dist/index.cjs.js

@@ -2,6 +2,9 @@
 
 var pixi_js = require('pixi.js');
 var gameSdk = require('@energy8platform/game-sdk');
+require('@pixi/layout');
+var ui = require('@pixi/ui');
+var components = require('@pixi/layout/components');
 
 // ─── Scale Modes ───────────────────────────────────────────
 exports.ScaleMode = void 0;
@@ -32,6 +35,9 @@ exports.TransitionType = void 0;
 /**
  * Minimal typed event emitter.
  * Used internally by GameApplication, SceneManager, AudioManager, etc.
+ *
+ * Supports `void` event types — events that carry no data can be emitted
+ * without arguments: `emitter.emit('eventName')`.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 class EventEmitter {
@@ -54,7 +60,8 @@ class EventEmitter {
         this.listeners.get(event)?.delete(handler);
         return this;
     }
-    emit(event, data) {
+    emit(...args) {
+        const [event, data] = args;
         const handlers = this.listeners.get(event);
         if (handlers) {
             for (const handler of handlers) {
@@ -227,9 +234,20 @@ class Tween {
     }
     /**
      * Wait for a given duration (useful in timelines).
+     * Uses PixiJS Ticker for consistent timing with other tweens.
      */
     static delay(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
+        return new Promise((resolve) => {
+            let elapsed = 0;
+            const onTick = (ticker) => {
+                elapsed += ticker.deltaMS;
+                if (elapsed >= ms) {
+                    pixi_js.Ticker.shared.remove(onTick);
+                    resolve();
+                }
+            };
+            pixi_js.Ticker.shared.add(onTick);
+        });
     }
     /**
      * Kill all tweens on a target.
@@ -256,6 +274,20 @@ class Tween {
     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)
@@ -458,8 +490,9 @@ class SceneManager extends EventEmitter {
         }
         // Transition in
         await this.transitionIn(scene.container, transition);
-        await scene.onEnter?.(data);
+        // Push to stack BEFORE onEnter so currentKey is correct during initialization
         this.stack.push({ scene, key });
+        await scene.onEnter?.(data);
         this._transitioning = false;
     }
     async popInternal(showTransition, transition) {
@@ -758,26 +791,51 @@ class AudioManager {
         if (!this._initialized || !this._soundModule)
             return;
         const { sound } = this._soundModule;
-        // Stop current music
-        if (this._currentMusic) {
+        // Stop current music with fade-out, start new music with fade-in
+        if (this._currentMusic && fadeDuration > 0) {
+            const prevAlias = this._currentMusic;
+            this._currentMusic = alias;
+            if (this._globalMuted || this._categories.music.muted)
+                return;
+            // Fade out the previous track
+            this.fadeVolume(prevAlias, this._categories.music.volume, 0, fadeDuration, () => {
+                try {
+                    sound.stop(prevAlias);
+                }
+                catch { /* ignore */ }
+            });
+            // Start new track at zero volume, fade in
             try {
-                sound.stop(this._currentMusic);
+                sound.play(alias, {
+                    volume: 0,
+                    loop: true,
+                });
+                this.fadeVolume(alias, 0, this._categories.music.volume, fadeDuration);
             }
-            catch {
-                // ignore
+            catch (e) {
+                console.warn(`[AudioManager] Failed to play music "${alias}":`, e);
             }
         }
-        this._currentMusic = alias;
-        if (this._globalMuted || this._categories.music.muted)
-            return;
-        try {
-            sound.play(alias, {
-                volume: this._categories.music.volume,
-                loop: true,
-            });
-        }
-        catch (e) {
-            console.warn(`[AudioManager] Failed to play music "${alias}":`, e);
+        else {
+            // No crossfade — instant switch
+            if (this._currentMusic) {
+                try {
+                    sound.stop(this._currentMusic);
+                }
+                catch { /* ignore */ }
+            }
+            this._currentMusic = alias;
+            if (this._globalMuted || this._categories.music.muted)
+                return;
+            try {
+                sound.play(alias, {
+                    volume: this._categories.music.volume,
+                    loop: true,
+                });
+            }
+            catch (e) {
+                console.warn(`[AudioManager] Failed to play music "${alias}":`, e);
+            }
         }
     }
     /**
@@ -919,6 +977,31 @@ class AudioManager {
         this._initialized = false;
     }
     // ─── Private ───────────────────────────────────────────
+    /**
+     * Smoothly fade a sound's volume from `fromVol` to `toVol` over `durationMs`.
+     */
+    fadeVolume(alias, fromVol, toVol, durationMs, onComplete) {
+        if (!this._soundModule)
+            return;
+        const { sound } = this._soundModule;
+        const startTime = Date.now();
+        const tick = () => {
+            const elapsed = Date.now() - startTime;
+            const t = Math.min(elapsed / durationMs, 1);
+            const vol = fromVol + (toVol - fromVol) * t;
+            try {
+                sound.volume(alias, vol);
+            }
+            catch { /* ignore */ }
+            if (t < 1) {
+                requestAnimationFrame(tick);
+            }
+            else {
+                onComplete?.();
+            }
+        };
+        requestAnimationFrame(tick);
+    }
     applyVolumes() {
         if (!this._soundModule)
             return;
@@ -1023,6 +1106,10 @@ class InputManager extends EventEmitter {
     _locked = false;
     _keysDown = new Set();
     _destroyed = false;
+    // Viewport transform (set by ViewportManager via setViewportTransform)
+    _viewportScale = 1;
+    _viewportOffsetX = 0;
+    _viewportOffsetY = 0;
     // Gesture tracking
     _pointerStart = null;
     _swipeThreshold = 50; // minimum distance in px
@@ -1049,6 +1136,25 @@ class InputManager extends EventEmitter {
     isKeyDown(key) {
         return this._keysDown.has(key.toLowerCase());
     }
+    /**
+     * Update the viewport transform used for DOM→world coordinate mapping.
+     * Called automatically by GameApplication when ViewportManager emits resize.
+     */
+    setViewportTransform(scale, offsetX, offsetY) {
+        this._viewportScale = scale;
+        this._viewportOffsetX = offsetX;
+        this._viewportOffsetY = offsetY;
+    }
+    /**
+     * Convert a DOM canvas position to game-world coordinates,
+     * accounting for viewport scaling and offset.
+     */
+    getWorldPosition(canvasX, canvasY) {
+        return {
+            x: (canvasX - this._viewportOffsetX) / this._viewportScale,
+            y: (canvasY - this._viewportOffsetY) / this._viewportScale,
+        };
+    }
     /** Destroy the input manager */
     destroy() {
         this._destroyed = true;
@@ -1304,6 +1410,8 @@ class ViewportManager extends EventEmitter {
         this._destroyed = true;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        // Remove fallback window resize listener if it was used
+        window.removeEventListener('resize', this.onWindowResize);
         if (this._resizeTimeout !== null) {
             clearTimeout(this._resizeTimeout);
         }
@@ -1367,45 +1475,87 @@ class Scene {
 }
 
 /**
- * Inline SVG logo with a loader bar (clip-animated for progress).
- * The clipPath rect width is set to 0 initially, expanded as loading progresses.
+ * Shared Energy8 SVG logo with an embedded loader bar.
+ *
+ * The loader bar fill is controlled via a `<clipPath>` whose `<rect>` width
+ * is animatable. Different consumers customise gradient IDs and the clip
+ * element's ID/class to avoid collisions when both CSSPreloader and
+ * LoadingScene appear in the same DOM.
  */
-function buildLogoSVG() {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200" fill="none" style="width:100%;height:auto;">
-  <path d="m241 81.75h-19.28c-1.77 0-6.73 4.98-7.43 6.99l-4.36 12.22c-0.49 1.37 0.05 2.92 1.06 4.32-2.07 1.19-3.69 3.08-4.36 5.43l-3.25 10.41c-0.86 2.89 2.39 6.63 4.31 6.63h19.28c1.96 0 7.4-5.56 7.96-7.51l2.96-10.22c0.63-2.25 0.1-3.98-1.22-4.99 2.55-1.56 3.86-4.14 4.55-6.31l2.77-9.31c0.74-2.57-1.37-7.66-2.99-7.66zm-13.36 28.31-2.27 7.03h-8.28l2.58-8.28h8.28l-0.31 1.25zm4.06-16.97-2.11 6.7h-7.04l2.25-7.34h7.26l-0.36 0.64z" fill="url(#ls0)"/>
-  <path d="m202.5 81.75-9.31 14.97-2.32-14.97h-11.82l4.32 25.15-0.57 4.91-8.64 26.44 15.31-12.76 5.63-16.48 19.96-27.26h-12.56z" fill="url(#ls1)"/>
-  <path d="m174.2 81.75h-19.78l-5.75 5.16-10.79 33.2c-0.77 2.53 2.48 6.93 4.87 6.93h17.38c2.63 0 7.85-5.34 8.32-6.83l5.37-18.14h-15.17l-2.2 7.64h3.78l-2.25 7.2h-8.01l7.1-25.52h7.58l-1.48 8.4 12.78-5.98c1.28-0.63 1.97-3.99 1.61-6.61-0.36-2.34-1.64-5.45-3.36-5.45z" fill="url(#ls2)"/>
-  <path d="m140.6 81.75h-70.6l-5.36 19.37-4.26-19.37h-46.76l2.95 5.88-10.58 39.28h26.84l2.95-9.52-15.63-0.13 2.55-8.34h8.74l8.47-9.81h-14.61l2.11-7.3h15.47l2.54-8.71 2.58 4.74-11.4 39.07h11.05l6.46-21.49 8.84 36.33 19.18-55.67-1.83-3.36 3.68 4.09-12.07 40.1h28.18l3.39-10.31h-17.01l2.67-8.03h9.98l7.58-9.52h-14.28l1.93-6.6h14.61l3.25-9.73 2.81 5.12-11.3 38.89h11.05l5.23-17.81h1.62l1.48 17.6h10.69l-1.48-16.81c4.75-1.28 7.52-5.9 8.64-9.81l2.95-11.3c0.86-2.73-1.43-6.85-3.3-6.85zm-9.8 17.3h-8.69l2.54-7.84h8.35l-2.2 7.84z" fill="url(#ls3)"/>
-  <path d="m205.9 148.9h-122.6l-2.61-3.12h-32.4l-2.51 3.12h-1.59c-5.34 0-7.94 4.88-7.94 7.65v0.03c0 4.2 3.55 7.6 7.74 7.6h103.6l2.11 3.12h36.09l1.82-3.12h18.3c5.25 0 6.64-5.3 6.64-7.35v-0.25c0-4.23-2.9-7.68-6.64-7.68zm-0.7 12.83h-160.6c-3.69 0-6.11-2.58-6.11-5.47v-0.03c0-2.89 2.1-5.47 5.61-5.47h161.1c3.45 0 4.89 3.12 4.89 5.65v0.17c0 2.57-2.11 5.15-4.89 5.15z" fill="url(#ls4)"/>
-  <clipPath id="ge-canvas-loader-clip">
-    <rect id="ge-loader-rect" x="37" y="148" width="0" height="20"/>
-  </clipPath>
-  <path d="m204.5 152.6h-159.8c-2.78 0-4.45 1.69-4.45 3.99v0.11c0 2.04 1.42 3.43 3.64 3.43h160.6c2.88 0 3.67-2.07 3.67-3.43v-0.25c0-2.04-1.48-3.85-3.67-3.85z" fill="url(#ls5)" clip-path="url(#ge-canvas-loader-clip)"/>
-  <text id="ge-loader-pct" x="125" y="196" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="8" font-weight="600" letter-spacing="1.5">0%</text>
-  <defs>
-    <linearGradient id="ls0" x1="223.7" x2="223.7" y1="81.75" y2="127.8" gradientUnits="userSpaceOnUse">
+/** SVG path data for the Energy8 wordmark — reused across loaders */
+const WORDMARK_PATHS = `
+  <path d="m241 81.75h-19.28c-1.77 0-6.73 4.98-7.43 6.99l-4.36 12.22c-0.49 1.37 0.05 2.92 1.06 4.32-2.07 1.19-3.69 3.08-4.36 5.43l-3.25 10.41c-0.86 2.89 2.39 6.63 4.31 6.63h19.28c1.96 0 7.4-5.56 7.96-7.51l2.96-10.22c0.63-2.25 0.1-3.98-1.22-4.99 2.55-1.56 3.86-4.14 4.55-6.31l2.77-9.31c0.74-2.57-1.37-7.66-2.99-7.66zm-13.36 28.31-2.27 7.03h-8.28l2.58-8.28h8.28l-0.31 1.25zm4.06-16.97-2.11 6.7h-7.04l2.25-7.34h7.26l-0.36 0.64z" fill="url(#GID0)"/>
+  <path d="m202.5 81.75-9.31 14.97-2.32-14.97h-11.82l4.32 25.15-0.57 4.91-8.64 26.44 15.31-12.76 5.63-16.48 19.96-27.26h-12.56z" fill="url(#GID1)"/>
+  <path d="m174.2 81.75h-19.78l-5.75 5.16-10.79 33.2c-0.77 2.53 2.48 6.93 4.87 6.93h17.38c2.63 0 7.85-5.34 8.32-6.83l5.37-18.14h-15.17l-2.2 7.64h3.78l-2.25 7.2h-8.01l7.1-25.52h7.58l-1.48 8.4 12.78-5.98c1.28-0.63 1.97-3.99 1.61-6.61-0.36-2.34-1.64-5.45-3.36-5.45z" fill="url(#GID2)"/>
+  <path d="m140.6 81.75h-70.6l-5.36 19.37-4.26-19.37h-46.76l2.95 5.88-10.58 39.28h26.84l2.95-9.52-15.63-0.13 2.55-8.34h8.74l8.47-9.81h-14.61l2.11-7.3h15.47l2.54-8.71 2.58 4.74-11.4 39.07h11.05l6.46-21.49 8.84 36.33 19.18-55.67-1.83-3.36 3.68 4.09-12.07 40.1h28.18l3.39-10.31h-17.01l2.67-8.03h9.98l7.58-9.52h-14.28l1.93-6.6h14.61l3.25-9.73 2.81 5.12-11.3 38.89h11.05l5.23-17.81h1.62l1.48 17.6h10.69l-1.48-16.81c4.75-1.28 7.52-5.9 8.64-9.81l2.95-11.3c0.86-2.73-1.43-6.85-3.3-6.85zm-9.8 17.3h-8.69l2.54-7.84h8.35l-2.2 7.84z" fill="url(#GID3)"/>
+  <path d="m205.9 148.9h-122.6l-2.61-3.12h-32.4l-2.51 3.12h-1.59c-5.34 0-7.94 4.88-7.94 7.65v0.03c0 4.2 3.55 7.6 7.74 7.6h103.6l2.11 3.12h36.09l1.82-3.12h18.3c5.25 0 6.64-5.3 6.64-7.35v-0.25c0-4.23-2.9-7.68-6.64-7.68zm-0.7 12.83h-160.6c-3.69 0-6.11-2.58-6.11-5.47v-0.03c0-2.89 2.1-5.47 5.61-5.47h161.1c3.45 0 4.89 3.12 4.89 5.65v0.17c0 2.57-2.11 5.15-4.89 5.15z" fill="url(#GID4)"/>`;
+/** Gradient definitions template (gradient IDs are replaced per-consumer) */
+const GRADIENT_DEFS = `
+    <linearGradient id="GID0" x1="223.7" x2="223.7" y1="81.75" y2="127.8" gradientUnits="userSpaceOnUse">
       <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
     </linearGradient>
-    <linearGradient id="ls1" x1="194.6" x2="194.6" y1="81.75" y2="138.3" gradientUnits="userSpaceOnUse">
+    <linearGradient id="GID1" x1="194.6" x2="194.6" y1="81.75" y2="138.3" gradientUnits="userSpaceOnUse">
       <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
     </linearGradient>
-    <linearGradient id="ls2" x1="157.8" x2="157.8" y1="81.75" y2="127" gradientUnits="userSpaceOnUse">
+    <linearGradient id="GID2" x1="157.8" x2="157.8" y1="81.75" y2="127" gradientUnits="userSpaceOnUse">
       <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
     </linearGradient>
-    <linearGradient id="ls3" x1="79.96" x2="79.96" y1="81.75" y2="141.8" gradientUnits="userSpaceOnUse">
+    <linearGradient id="GID3" x1="79.96" x2="79.96" y1="81.75" y2="141.8" gradientUnits="userSpaceOnUse">
       <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
     </linearGradient>
-    <linearGradient id="ls4" x1="36.18" x2="212.5" y1="156.6" y2="156.6" gradientUnits="userSpaceOnUse">
+    <linearGradient id="GID4" x1="36.18" x2="212.5" y1="156.6" y2="156.6" gradientUnits="userSpaceOnUse">
       <stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
     </linearGradient>
-    <linearGradient id="ls5" x1="40.27" x2="208.2" y1="156.4" y2="156.4" gradientUnits="userSpaceOnUse">
+    <linearGradient id="GID5" x1="40.27" x2="208.2" y1="156.4" y2="156.4" gradientUnits="userSpaceOnUse">
       <stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
-    </linearGradient>
+    </linearGradient>`;
+/** Max width of the loader bar in SVG units */
+const LOADER_BAR_MAX_WIDTH = 174;
+/**
+ * Build the Energy8 SVG logo with a loader bar, using unique IDs.
+ *
+ * @param opts - Configuration to avoid element ID collisions
+ * @returns SVG markup string
+ */
+function buildLogoSVG(opts) {
+    const { idPrefix, svgClass, svgStyle, clipRectClass, clipRectId, textId, textContent, textClass } = opts;
+    // Replace gradient ID placeholders with prefixed versions
+    const paths = WORDMARK_PATHS.replace(/GID(\d)/g, `${idPrefix}$1`);
+    const defs = GRADIENT_DEFS.replace(/GID(\d)/g, `${idPrefix}$1`);
+    const clipId = `${idPrefix}-loader-clip`;
+    const fillGradientId = `${idPrefix}5`;
+    const classAttr = svgClass ? ` class="${svgClass}"` : '';
+    const styleAttr = svgStyle ? ` style="${svgStyle}"` : '';
+    const rectClassAttr = clipRectClass ? ` class="${clipRectClass}"` : '';
+    const rectIdAttr = clipRectId ? ` id="${clipRectId}"` : '';
+    const txtIdAttr = textId ? ` id="${textId}"` : '';
+    const txtClassAttr = textClass ? ` class="${textClass}"` : '';
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200" fill="none"${classAttr}${styleAttr}>
+${paths}
+  <clipPath id="${clipId}">
+    <rect${rectIdAttr} x="37" y="148" width="0" height="20"${rectClassAttr}/>
+  </clipPath>
+  <path d="m204.5 152.6h-159.8c-2.78 0-4.45 1.69-4.45 3.99v0.11c0 2.04 1.42 3.43 3.64 3.43h160.6c2.88 0 3.67-2.07 3.67-3.43v-0.25c0-2.04-1.48-3.85-3.67-3.85z" fill="url(#${fillGradientId})" clip-path="url(#${clipId})"/>
+  <text${txtIdAttr} x="125" y="196" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="8" font-weight="600" letter-spacing="1.5"${txtClassAttr}>${textContent ?? 'Loading...'}</text>
+  <defs>
+${defs}
   </defs>
 </svg>`;
 }
-/** Max width of the loader bar in SVG units */
-const LOADER_BAR_MAX_WIDTH = 174;
+
+/**
+ * Build the loading scene variant of the logo SVG.
+ * Uses unique IDs (prefixed with 'ls') to avoid collisions with CSSPreloader.
+ */
+function buildLoadingLogoSVG() {
+    return buildLogoSVG({
+        idPrefix: 'ls',
+        svgStyle: 'width:100%;height:auto;',
+        clipRectId: 'ge-loader-rect',
+        textId: 'ge-loader-pct',
+        textContent: '0%',
+    });
+}
 /**
  * Built-in loading screen using the Energy8 SVG logo with animated loader bar.
  *
@@ -1515,7 +1665,7 @@ class LoadingScene extends Scene {
         this._overlay.id = '__ge-loading-overlay__';
         this._overlay.innerHTML = `
       <div class="ge-loading-content">
-        ${buildLogoSVG()}
+        ${buildLoadingLogoSVG()}
       </div>
     `;
         const style = document.createElement('style');
@@ -1653,8 +1803,11 @@ class LoadingScene extends Scene {
         }
         // Remove overlay
         this.removeOverlay();
-        // Navigate to the target scene
-        await this._engine.scenes.goto(this._targetScene, this._targetData);
+        // Navigate to the target scene, always passing the engine reference
+        await this._engine.scenes.goto(this._targetScene, {
+            engine: this._engine,
+            ...(this._targetData && typeof this._targetData === 'object' ? this._targetData : { data: this._targetData }),
+        });
     }
 }
 
@@ -1663,39 +1816,12 @@ const PRELOADER_ID = '__ge-css-preloader__';
  * Inline SVG logo with animated loader bar.
  * The `#loader` path acts as the progress fill — animated via clipPath.
  */
-const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200" fill="none" class="ge-logo-svg">
-  <path d="m241 81.75h-19.28c-1.77 0-6.73 4.98-7.43 6.99l-4.36 12.22c-0.49 1.37 0.05 2.92 1.06 4.32-2.07 1.19-3.69 3.08-4.36 5.43l-3.25 10.41c-0.86 2.89 2.39 6.63 4.31 6.63h19.28c1.96 0 7.4-5.56 7.96-7.51l2.96-10.22c0.63-2.25 0.1-3.98-1.22-4.99 2.55-1.56 3.86-4.14 4.55-6.31l2.77-9.31c0.74-2.57-1.37-7.66-2.99-7.66zm-13.36 28.31-2.27 7.03h-8.28l2.58-8.28h8.28l-0.31 1.25zm4.06-16.97-2.11 6.7h-7.04l2.25-7.34h7.26l-0.36 0.64z" fill="url(#pl0)"/>
-  <path d="m202.5 81.75-9.31 14.97-2.32-14.97h-11.82l4.32 25.15-0.57 4.91-8.64 26.44 15.31-12.76 5.63-16.48 19.96-27.26h-12.56z" fill="url(#pl1)"/>
-  <path d="m174.2 81.75h-19.78l-5.75 5.16-10.79 33.2c-0.77 2.53 2.48 6.93 4.87 6.93h17.38c2.63 0 7.85-5.34 8.32-6.83l5.37-18.14h-15.17l-2.2 7.64h3.78l-2.25 7.2h-8.01l7.1-25.52h7.58l-1.48 8.4 12.78-5.98c1.28-0.63 1.97-3.99 1.61-6.61-0.36-2.34-1.64-5.45-3.36-5.45z" fill="url(#pl2)"/>
-  <path d="m140.6 81.75h-70.6l-5.36 19.37-4.26-19.37h-46.76l2.95 5.88-10.58 39.28h26.84l2.95-9.52-15.63-0.13 2.55-8.34h8.74l8.47-9.81h-14.61l2.11-7.3h15.47l2.54-8.71 2.58 4.74-11.4 39.07h11.05l6.46-21.49 8.84 36.33 19.18-55.67-1.83-3.36 3.68 4.09-12.07 40.1h28.18l3.39-10.31h-17.01l2.67-8.03h9.98l7.58-9.52h-14.28l1.93-6.6h14.61l3.25-9.73 2.81 5.12-11.3 38.89h11.05l5.23-17.81h1.62l1.48 17.6h10.69l-1.48-16.81c4.75-1.28 7.52-5.9 8.64-9.81l2.95-11.3c0.86-2.73-1.43-6.85-3.3-6.85zm-9.8 17.3h-8.69l2.54-7.84h8.35l-2.2 7.84z" fill="url(#pl3)"/>
-  <path d="m205.9 148.9h-122.6l-2.61-3.12h-32.4l-2.51 3.12h-1.59c-5.34 0-7.94 4.88-7.94 7.65v0.03c0 4.2 3.55 7.6 7.74 7.6h103.6l2.11 3.12h36.09l1.82-3.12h18.3c5.25 0 6.64-5.3 6.64-7.35v-0.25c0-4.23-2.9-7.68-6.64-7.68zm-0.7 12.83h-160.6c-3.69 0-6.11-2.58-6.11-5.47v-0.03c0-2.89 2.1-5.47 5.61-5.47h161.1c3.45 0 4.89 3.12 4.89 5.65v0.17c0 2.57-2.11 5.15-4.89 5.15z" fill="url(#pl4)"/>
-  <!-- Loader fill with clip for progress animation -->
-  <clipPath id="ge-loader-clip">
-    <rect x="37" y="148" width="0" height="20" class="ge-clip-rect"/>
-  </clipPath>
-  <path d="m204.5 152.6h-159.8c-2.78 0-4.45 1.69-4.45 3.99v0.11c0 2.04 1.42 3.43 3.64 3.43h160.6c2.88 0 3.67-2.07 3.67-3.43v-0.25c0-2.04-1.48-3.85-3.67-3.85z" fill="url(#pl5)" clip-path="url(#ge-loader-clip)"/>
-  <text x="125" y="196" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="8" font-weight="600" letter-spacing="1.5" class="ge-preloader-svg-text">Loading...</text>
-  <defs>
-    <linearGradient id="pl0" x1="223.7" x2="223.7" y1="81.75" y2="127.8" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
-    </linearGradient>
-    <linearGradient id="pl1" x1="194.6" x2="194.6" y1="81.75" y2="138.3" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
-    </linearGradient>
-    <linearGradient id="pl2" x1="157.8" x2="157.8" y1="81.75" y2="127" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
-    </linearGradient>
-    <linearGradient id="pl3" x1="79.96" x2="79.96" y1="81.75" y2="141.8" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
-    </linearGradient>
-    <linearGradient id="pl4" x1="36.18" x2="212.5" y1="156.6" y2="156.6" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
-    </linearGradient>
-    <linearGradient id="pl5" x1="40.27" x2="208.2" y1="156.4" y2="156.4" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
-    </linearGradient>
-  </defs>
-</svg>`;
+const LOGO_SVG = buildLogoSVG({
+    idPrefix: 'pl',
+    svgClass: 'ge-logo-svg',
+    clipRectClass: 'ge-clip-rect',
+    textClass: 'ge-preloader-svg-text',
+});
 /**
  * Creates a lightweight CSS-only preloader that appears instantly,
  * BEFORE PixiJS/WebGL is initialized.
@@ -1799,6 +1925,96 @@ function removeCSSPreloader(container) {
     });
 }
 
+/**
+ * FPS overlay for debugging performance.
+ *
+ * Shows FPS, frame time, and draw call count in the corner of the screen.
+ *
+ * @example
+ * ```ts
+ * const fps = new FPSOverlay(app);
+ * fps.show();
+ * ```
+ */
+class FPSOverlay {
+    _app;
+    _container;
+    _fpsText;
+    _visible = false;
+    _samples = [];
+    _maxSamples = 60;
+    _lastUpdate = 0;
+    _tickFn = null;
+    constructor(app) {
+        this._app = app;
+        this._container = new pixi_js.Container();
+        this._container.label = 'FPSOverlay';
+        this._container.zIndex = 99999;
+        this._fpsText = new pixi_js.Text({
+            text: 'FPS: --',
+            style: {
+                fontFamily: 'monospace',
+                fontSize: 14,
+                fill: 0x00ff00,
+                stroke: { color: 0x000000, width: 2 },
+            },
+        });
+        this._fpsText.x = 8;
+        this._fpsText.y = 8;
+        this._container.addChild(this._fpsText);
+    }
+    /** Show the FPS overlay */
+    show() {
+        if (this._visible)
+            return;
+        this._visible = true;
+        this._app.stage.addChild(this._container);
+        this._tickFn = (ticker) => {
+            this._samples.push(ticker.FPS);
+            if (this._samples.length > this._maxSamples) {
+                this._samples.shift();
+            }
+            // Update display every ~500ms
+            const now = Date.now();
+            if (now - this._lastUpdate > 500) {
+                const avg = this._samples.reduce((a, b) => a + b, 0) / this._samples.length;
+                const min = Math.min(...this._samples);
+                this._fpsText.text = [
+                    `FPS: ${Math.round(avg)} (min: ${Math.round(min)})`,
+                    `Frame: ${ticker.deltaMS.toFixed(1)}ms`,
+                ].join('\n');
+                this._lastUpdate = now;
+            }
+        };
+        this._app.ticker.add(this._tickFn);
+    }
+    /** Hide the FPS overlay */
+    hide() {
+        if (!this._visible)
+            return;
+        this._visible = false;
+        this._container.removeFromParent();
+        if (this._tickFn) {
+            this._app.ticker.remove(this._tickFn);
+            this._tickFn = null;
+        }
+    }
+    /** Toggle visibility */
+    toggle() {
+        if (this._visible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    /** Destroy the overlay */
+    destroy() {
+        this.hide();
+        this._container.destroy({ children: true });
+    }
+}
+
 /**
  * The main entry point for a game built on @energy8platform/game-engine.
  *
@@ -1846,6 +2062,8 @@ class GameApplication extends EventEmitter {
     viewport;
     /** SDK instance (null in offline mode) */
     sdk = null;
+    /** FPS overlay instance (only when debug: true) */
+    fpsOverlay = null;
     /** Data received from SDK initialization */
     initData = null;
     /** Configuration */
@@ -1913,15 +2131,15 @@ class GameApplication extends EventEmitter {
             this.applySDKConfig();
             // 6. Initialize sub-systems
             this.initSubSystems();
-            this.emit('initialized', undefined);
+            this.emit('initialized');
             // 7. Remove CSS preloader, show Canvas loading screen
             removeCSSPreloader(this._container);
             // 8. Load assets with loading screen
             await this.loadAssets(firstScene, sceneData);
-            this.emit('loaded', undefined);
+            this.emit('loaded');
             // 9. Start the game loop
             this._running = true;
-            this.emit('started', undefined);
+            this.emit('started');
         }
         catch (err) {
             console.error('[GameEngine] Failed to start:', err);
@@ -1943,7 +2161,7 @@ class GameApplication extends EventEmitter {
         this.viewport?.destroy();
         this.sdk?.destroy();
         this.app?.destroy(true, { children: true, texture: true });
-        this.emit('destroyed', undefined);
+        this.emit('destroyed');
         this.removeAllListeners();
     }
     // ─── Private initialization steps ──────────────────────
@@ -1959,6 +2177,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,
@@ -2017,9 +2236,10 @@ class GameApplication extends EventEmitter {
         });
         // Wire SceneManager to the PixiJS stage
         this.scenes.setRoot(this.app.stage);
-        // Wire viewport resize → scene manager
-        this.viewport.on('resize', ({ width, height }) => {
+        // Wire viewport resize → scene manager + input manager
+        this.viewport.on('resize', ({ width, height, scale }) => {
             this.scenes.resize(width, height);
+            this.input.setViewportTransform(scale, this.app.stage.x, this.app.stage.y);
             this.emit('resize', { width, height });
         });
         this.viewport.on('orientationChange', (orientation) => {
@@ -2036,6 +2256,11 @@ class GameApplication extends EventEmitter {
         });
         // Trigger initial resize
         this.viewport.refresh();
+        // Enable FPS overlay in debug mode
+        if (this.config.debug) {
+            this.fpsOverlay = new FPSOverlay(this.app);
+            this.fpsOverlay.show();
+        }
     }
     async loadAssets(firstScene, sceneData) {
         // Register built-in loading scene
@@ -2495,162 +2720,277 @@ class SpineHelper {
     }
 }
 
+/**
+ * Helper for creating frame-based animations from spritesheets.
+ *
+ * Wraps PixiJS `AnimatedSprite` with a convenient API for
+ * common iGaming effects: coin showers, symbol animations,
+ * sparkle trails, win celebrations.
+ *
+ * Cheaper than Spine for simple frame sequences.
+ *
+ * @example
+ * ```ts
+ * // From an array of textures
+ * const coinAnim = SpriteAnimation.create(coinTextures, {
+ *   fps: 30,
+ *   loop: true,
+ * });
+ * scene.addChild(coinAnim);
+ *
+ * // From a spritesheet with a naming pattern
+ * const sheet = Assets.get('effects');
+ * const sparkle = SpriteAnimation.fromSpritesheet(sheet, 'sparkle_');
+ * sparkle.play();
+ *
+ * // From a numbered range
+ * const explosion = SpriteAnimation.fromRange(sheet, 'explosion_{i}', 0, 24, {
+ *   fps: 60,
+ *   loop: false,
+ *   onComplete: () => explosion.destroy(),
+ * });
+ * ```
+ */
+class SpriteAnimation {
+    /**
+     * Create an animated sprite from an array of textures.
+     *
+     * @param textures - Array of PixiJS Textures
+     * @param config - Animation options
+     * @returns Configured AnimatedSprite
+     */
+    static create(textures, config = {}) {
+        const sprite = new pixi_js.AnimatedSprite(textures);
+        // Configure
+        sprite.animationSpeed = (config.fps ?? 24) / 60; // PixiJS uses speed relative to 60fps ticker
+        sprite.loop = config.loop ?? true;
+        // Anchor
+        if (config.anchor !== undefined) {
+            if (typeof config.anchor === 'number') {
+                sprite.anchor.set(config.anchor);
+            }
+            else {
+                sprite.anchor.set(config.anchor.x, config.anchor.y);
+            }
+        }
+        else {
+            sprite.anchor.set(0.5);
+        }
+        // Complete callback
+        if (config.onComplete) {
+            sprite.onComplete = config.onComplete;
+        }
+        // Auto-play
+        if (config.autoPlay !== false) {
+            sprite.play();
+        }
+        return sprite;
+    }
+    /**
+     * Create an animated sprite from a spritesheet using a name prefix.
+     *
+     * Collects all textures whose keys start with `prefix`, sorted alphabetically.
+     *
+     * @param sheet - PixiJS Spritesheet instance
+     * @param prefix - Texture name prefix (e.g., 'coin_')
+     * @param config - Animation options
+     * @returns Configured AnimatedSprite
+     */
+    static fromSpritesheet(sheet, prefix, config = {}) {
+        const textures = SpriteAnimation.getTexturesByPrefix(sheet, prefix);
+        if (textures.length === 0) {
+            console.warn(`[SpriteAnimation] No textures found with prefix "${prefix}"`);
+        }
+        return SpriteAnimation.create(textures, config);
+    }
+    /**
+     * Create an animated sprite from a numbered range of frames.
+     *
+     * The `pattern` string should contain `{i}` as a placeholder for the frame number.
+     * Numbers are zero-padded to match the length of `start`.
+     *
+     * @param sheet - PixiJS Spritesheet instance
+     * @param pattern - Frame name pattern, e.g. 'explosion_{i}'
+     * @param start - Start frame index (inclusive)
+     * @param end - End frame index (inclusive)
+     * @param config - Animation options
+     * @returns Configured AnimatedSprite
+     */
+    static fromRange(sheet, pattern, start, end, config = {}) {
+        const textures = [];
+        const padLength = String(end).length;
+        for (let i = start; i <= end; i++) {
+            const name = pattern.replace('{i}', String(i).padStart(padLength, '0'));
+            const texture = sheet.textures[name];
+            if (texture) {
+                textures.push(texture);
+            }
+            else {
+                console.warn(`[SpriteAnimation] Missing frame: "${name}"`);
+            }
+        }
+        if (textures.length === 0) {
+            console.warn(`[SpriteAnimation] No textures found for pattern "${pattern}" [${start}..${end}]`);
+        }
+        return SpriteAnimation.create(textures, config);
+    }
+    /**
+     * Create an AnimatedSprite from texture aliases (loaded via AssetManager).
+     *
+     * @param aliases - Array of texture aliases
+     * @param config - Animation options
+     * @returns Configured AnimatedSprite
+     */
+    static fromAliases(aliases, config = {}) {
+        const textures = aliases.map((alias) => {
+            const tex = pixi_js.Texture.from(alias);
+            return tex;
+        });
+        return SpriteAnimation.create(textures, config);
+    }
+    /**
+     * Play a one-shot animation and auto-destroy when complete.
+     * Useful for fire-and-forget effects like coin bursts.
+     *
+     * @param textures - Array of textures
+     * @param config - Animation options (loop will be forced to false)
+     * @returns Promise that resolves when animation completes
+     */
+    static playOnce(textures, config = {}) {
+        const finished = new Promise((resolve) => {
+            config = {
+                ...config,
+                loop: false,
+                onComplete: () => {
+                    config.onComplete?.();
+                    sprite.destroy();
+                    resolve();
+                },
+            };
+        });
+        const sprite = SpriteAnimation.create(textures, config);
+        return { sprite, finished };
+    }
+    // ─── Utility ───────────────────────────────────────────
+    /**
+     * Get all textures from a spritesheet that start with a given prefix.
+     * Results are sorted alphabetically by key.
+     */
+    static getTexturesByPrefix(sheet, prefix) {
+        const keys = Object.keys(sheet.textures)
+            .filter((k) => k.startsWith(prefix))
+            .sort();
+        return keys.map((k) => sheet.textures[k]);
+    }
+}
+
 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';
+        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
@@ -2660,33 +3000,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() {
@@ -2696,13 +3051,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) {
@@ -2711,35 +3066,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;
     }
 }
 
@@ -2835,7 +3162,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
@@ -2850,72 +3180,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 });
     }
 }
 
@@ -2941,6 +3266,7 @@ class BalanceDisplay extends pixi_js.Container {
     _currentValue = 0;
     _displayedValue = 0;
     _animating = false;
+    _animationCancelled = false;
     constructor(config = {}) {
         super();
         this._config = {
@@ -3002,11 +3328,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);
@@ -3143,6 +3478,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 });
@@ -3161,11 +3498,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();
@@ -3233,6 +3569,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();
@@ -3248,11 +3586,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: '',
@@ -3270,7 +3607,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);
         }
@@ -3279,10 +3615,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;
@@ -3291,9 +3633,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();
@@ -3315,6 +3655,292 @@ 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 };
+    }
+}
+
 const DEFAULT_CONFIG = {
     balance: 10000,
     currency: 'USD',
@@ -3334,8 +3960,9 @@ const DEFAULT_CONFIG = {
 /**
  * Mock host bridge for local development.
  *
- * Intercepts postMessage communication from the SDK and responds
- * with mock data, simulating a real casino host environment.
+ * Uses the SDK's `Bridge` class in `devMode` to communicate with
+ * `CasinoGameSDK` via a shared in-memory `MemoryChannel`, removing
+ * the need for postMessage and iframes.
  *
  * This allows games to be developed and tested without a real backend.
  *
@@ -3363,8 +3990,7 @@ class DevBridge {
     _config;
     _balance;
     _roundCounter = 0;
-    _listening = false;
-    _handler = null;
+    _bridge = null;
     constructor(config = {}) {
         this._config = { ...DEFAULT_CONFIG, ...config };
         this._balance = this._config.balance;
@@ -3375,24 +4001,38 @@ class DevBridge {
     }
     /** Start listening for SDK messages */
     start() {
-        if (this._listening)
+        if (this._bridge)
             return;
-        this._handler = (e) => {
-            this.handleMessage(e);
-        };
-        window.addEventListener('message', this._handler);
-        this._listening = true;
+        console.debug('[DevBridge] Starting with config:', this._config);
+        this._bridge = new gameSdk.Bridge({ devMode: true, debug: this._config.debug });
+        this._bridge.on('GAME_READY', (_payload, id) => {
+            this.handleGameReady(id);
+        });
+        this._bridge.on('PLAY_REQUEST', (payload, id) => {
+            this.handlePlayRequest(payload, id);
+        });
+        this._bridge.on('PLAY_RESULT_ACK', (payload) => {
+            this.handlePlayAck(payload);
+        });
+        this._bridge.on('GET_BALANCE', (_payload, id) => {
+            this.handleGetBalance(id);
+        });
+        this._bridge.on('GET_STATE', (_payload, id) => {
+            this.handleGetState(id);
+        });
+        this._bridge.on('OPEN_DEPOSIT', () => {
+            this.handleOpenDeposit();
+        });
         if (this._config.debug) {
-            console.log('[DevBridge] Started — listening for SDK messages');
+            console.log('[DevBridge] Started — listening via Bridge (devMode)');
         }
     }
     /** Stop listening */
     stop() {
-        if (this._handler) {
-            window.removeEventListener('message', this._handler);
-            this._handler = null;
+        if (this._bridge) {
+            this._bridge.destroy();
+            this._bridge = null;
         }
-        this._listening = false;
         if (this._config.debug) {
             console.log('[DevBridge] Stopped');
         }
@@ -3400,47 +4040,13 @@ class DevBridge {
     /** Set mock balance */
     setBalance(balance) {
         this._balance = balance;
-        // Send balance update
-        this.sendMessage('BALANCE_UPDATE', { balance: this._balance });
+        this._bridge?.send('BALANCE_UPDATE', { balance: this._balance });
     }
     /** Destroy the dev bridge */
     destroy() {
         this.stop();
     }
     // ─── Message Handling ──────────────────────────────────
-    handleMessage(e) {
-        const data = e.data;
-        // Only process bridge messages
-        if (!data || data.__casino_bridge !== true)
-            return;
-        if (this._config.debug) {
-            console.log('[DevBridge] ←', data.type, data.payload);
-        }
-        switch (data.type) {
-            case 'GAME_READY':
-                this.handleGameReady(data.id);
-                break;
-            case 'PLAY_REQUEST':
-                this.handlePlayRequest(data.payload, data.id);
-                break;
-            case 'PLAY_RESULT_ACK':
-                this.handlePlayAck(data.payload, data.id);
-                break;
-            case 'GET_BALANCE':
-                this.handleGetBalance(data.id);
-                break;
-            case 'GET_STATE':
-                this.handleGetState(data.id);
-                break;
-            case 'OPEN_DEPOSIT':
-                this.handleOpenDeposit();
-                break;
-            default:
-                if (this._config.debug) {
-                    console.log('[DevBridge] Unknown message type:', data.type);
-                }
-        }
-    }
     handleGameReady(id) {
         const initData = {
             balance: this._balance,
@@ -3473,13 +4079,13 @@ class DevBridge {
         };
         this.delayedSend('PLAY_RESULT', result, id);
     }
-    handlePlayAck(_payload, _id) {
+    handlePlayAck(_payload) {
         if (this._config.debug) {
             console.log('[DevBridge] Play acknowledged');
         }
     }
     handleGetBalance(id) {
-        this.delayedSend('BALANCE_RESPONSE', { balance: this._balance }, id);
+        this.delayedSend('BALANCE_UPDATE', { balance: this._balance }, id);
     }
     handleGetState(id) {
         this.delayedSend('STATE_RESPONSE', this._config.session, id);
@@ -3489,123 +4095,36 @@ class DevBridge {
             console.log('[DevBridge] 💰 Open deposit requested (mock: adding 1000)');
         }
         this._balance += 1000;
-        this.sendMessage('BALANCE_UPDATE', { balance: this._balance });
+        this._bridge?.send('BALANCE_UPDATE', { balance: this._balance });
     }
     // ─── Communication ─────────────────────────────────────
     delayedSend(type, payload, id) {
         const delay = this._config.networkDelay;
         if (delay > 0) {
-            setTimeout(() => this.sendMessage(type, payload, id), delay);
-        }
-        else {
-            this.sendMessage(type, payload, id);
-        }
-    }
-    sendMessage(type, payload, id) {
-        const message = {
-            __casino_bridge: true,
-            type,
-            payload,
-            id,
-        };
-        if (this._config.debug) {
-            console.log('[DevBridge] →', type, payload);
-        }
-        // Post to the same window (SDK listens on window)
-        window.postMessage(message, '*');
-    }
-}
-
-/**
- * FPS overlay for debugging performance.
- *
- * Shows FPS, frame time, and draw call count in the corner of the screen.
- *
- * @example
- * ```ts
- * const fps = new FPSOverlay(app);
- * fps.show();
- * ```
- */
-class FPSOverlay {
-    _app;
-    _container;
-    _fpsText;
-    _visible = false;
-    _samples = [];
-    _maxSamples = 60;
-    _lastUpdate = 0;
-    _tickFn = null;
-    constructor(app) {
-        this._app = app;
-        this._container = new pixi_js.Container();
-        this._container.label = 'FPSOverlay';
-        this._container.zIndex = 99999;
-        this._fpsText = new pixi_js.Text({
-            text: 'FPS: --',
-            style: {
-                fontFamily: 'monospace',
-                fontSize: 14,
-                fill: 0x00ff00,
-                stroke: { color: 0x000000, width: 2 },
-            },
-        });
-        this._fpsText.x = 8;
-        this._fpsText.y = 8;
-        this._container.addChild(this._fpsText);
-    }
-    /** Show the FPS overlay */
-    show() {
-        if (this._visible)
-            return;
-        this._visible = true;
-        this._app.stage.addChild(this._container);
-        this._tickFn = (ticker) => {
-            this._samples.push(ticker.FPS);
-            if (this._samples.length > this._maxSamples) {
-                this._samples.shift();
-            }
-            // Update display every ~500ms
-            const now = Date.now();
-            if (now - this._lastUpdate > 500) {
-                const avg = this._samples.reduce((a, b) => a + b, 0) / this._samples.length;
-                const min = Math.min(...this._samples);
-                this._fpsText.text = [
-                    `FPS: ${Math.round(avg)} (min: ${Math.round(min)})`,
-                    `Frame: ${ticker.deltaMS.toFixed(1)}ms`,
-                ].join('\n');
-                this._lastUpdate = now;
-            }
-        };
-        this._app.ticker.add(this._tickFn);
-    }
-    /** Hide the FPS overlay */
-    hide() {
-        if (!this._visible)
-            return;
-        this._visible = false;
-        this._container.removeFromParent();
-        if (this._tickFn) {
-            this._app.ticker.remove(this._tickFn);
-            this._tickFn = null;
-        }
-    }
-    /** Toggle visibility */
-    toggle() {
-        if (this._visible) {
-            this.hide();
+            setTimeout(() => this._bridge?.send(type, payload, id), delay);
         }
         else {
-            this.show();
+            this._bridge?.send(type, payload, id);
         }
     }
-    /** Destroy the overlay */
-    destroy() {
-        this.hide();
-        this._container.destroy({ children: true });
-    }
 }
 
+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.AssetManager = AssetManager;
 exports.AudioManager = AudioManager;
 exports.BalanceDisplay = BalanceDisplay;
@@ -3617,13 +4136,16 @@ exports.FPSOverlay = FPSOverlay;
 exports.GameApplication = GameApplication;
 exports.InputManager = InputManager;
 exports.Label = Label;
+exports.Layout = Layout;
 exports.LoadingScene = LoadingScene;
 exports.Modal = Modal;
 exports.Panel = Panel;
 exports.ProgressBar = ProgressBar;
 exports.Scene = Scene;
 exports.SceneManager = SceneManager;
+exports.ScrollContainer = ScrollContainer;
 exports.SpineHelper = SpineHelper;
+exports.SpriteAnimation = SpriteAnimation;
 exports.StateMachine = StateMachine;
 exports.Timeline = Timeline;
 exports.Toast = Toast;