@energy8platform/game-engine 0.2.0 → 0.3.0

package/dist/index.cjs.js

@@ -32,6 +32,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 +57,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 +231,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 +271,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 +487,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 +788,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 +974,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 +1103,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 +1133,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 +1407,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 +1472,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 +1662,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 +1800,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 +1813,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 +1922,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 +2059,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,14 +2128,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');
             // 9. Start the game loop
             this._running = true;
-            this.emit('started', undefined);
+            this.emit('started');
         }
         catch (err) {
             console.error('[GameEngine] Failed to start:', err);
@@ -1942,8 +2158,8 @@ class GameApplication extends EventEmitter {
         this.viewport?.destroy();
         this.sdk?.destroy();
         this.app?.destroy(true, { children: true, texture: true });
+        this.emit('destroyed');
         this.removeAllListeners();
-        this.emit('destroyed', undefined);
     }
     // ─── Private initialization steps ──────────────────────
     resolveContainer() {
@@ -2016,14 +2232,19 @@ 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) => {
             this.emit('orientationChange', orientation);
         });
+        // Wire scene changes → engine event
+        this.scenes.on('change', ({ from, to }) => {
+            this.emit('sceneChange', { from, to });
+        });
         // Connect ticker → scene updates
         this.app.ticker.add((ticker) => {
             // Always update scenes (loading screen needs onUpdate before _running=true)
@@ -2031,6 +2252,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
@@ -2490,6 +2716,170 @@ 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,
     hover: 0xffe44d,
@@ -2936,6 +3326,7 @@ class BalanceDisplay extends pixi_js.Container {
     _currentValue = 0;
     _displayedValue = 0;
     _animating = false;
+    _animationCancelled = false;
     constructor(config = {}) {
         super();
         this._config = {
@@ -2997,11 +3388,22 @@ class BalanceDisplay extends pixi_js.Container {
         this.updateDisplay();
     }
     async animateValue(from, to) {
+        // Cancel any ongoing animation
+        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 cancelled by a newer animation, stop immediately
+                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);
@@ -3310,15 +3712,732 @@ class Toast extends pixi_js.Container {
     }
 }
 
-const DEFAULT_CONFIG = {
-    balance: 10000,
-    currency: 'USD',
-    gameConfig: {
-        id: 'dev-game',
-        type: 'slot',
-        version: '1.0.0',
-        viewport: { width: 1920, height: 1080 },
-        betLevels: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50],
+/**
+ * Responsive layout container that automatically arranges its children.
+ *
+ * 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);
+ *
+ * // On resize, update layout position relative to viewport
+ * toolbar.updateViewport(width, height);
+ * ```
+ */
+class Layout extends pixi_js.Container {
+    _config;
+    _padding;
+    _anchor;
+    _maxWidth;
+    _breakpoints;
+    _content;
+    _items = [];
+    _viewportWidth = 0;
+    _viewportHeight = 0;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            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._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);
+    }
+    /** Add an item to the layout */
+    addItem(child) {
+        this._items.push(child);
+        this._content.addChild(child);
+        if (this._config.autoLayout)
+            this.layout();
+        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._content.removeChild(child);
+            if (this._config.autoLayout)
+                this.layout();
+        }
+        return this;
+    }
+    /** Remove all items */
+    clearItems() {
+        for (const item of this._items) {
+            this._content.removeChild(item);
+        }
+        this._items.length = 0;
+        if (this._config.autoLayout)
+            this.layout();
+        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.layout();
+    }
+    /**
+     * Recalculate layout positions of all children.
+     */
+    layout() {
+        if (this._items.length === 0)
+            return;
+        // Resolve effective config (apply breakpoint overrides)
+        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 padding = effective.padding !== undefined
+            ? Layout.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;
+            }
+            item.x = x;
+            item.y = y;
+            x += size.width + gap;
+            rowHeight = Math.max(rowHeight, size.height);
+        }
+    }
+    applyAnchor(anchor) {
+        if (this._viewportWidth === 0 || this._viewportHeight === 0)
+            return;
+        const bounds = this._content.getBounds();
+        const contentW = bounds.width;
+        const contentH = bounds.height;
+        const vw = this._viewportWidth;
+        const vh = this._viewportHeight;
+        let anchorX = 0;
+        let anchorY = 0;
+        // Horizontal
+        if (anchor.includes('left')) {
+            anchorX = 0;
+        }
+        else if (anchor.includes('right')) {
+            anchorX = vw - contentW;
+        }
+        else {
+            // center
+            anchorX = (vw - contentW) / 2;
+        }
+        // Vertical
+        if (anchor.startsWith('top')) {
+            anchorY = 0;
+        }
+        else if (anchor.startsWith('bottom')) {
+            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;
+    }
+    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 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;
+    }
+}
+
+/**
+ * Scrollable container with touch/drag, mouse wheel, inertia, and optional scrollbar.
+ *
+ * Perfect for paytables, settings panels, bet history, and any scrollable content
+ * that doesn't fit on screen.
+ *
+ * @example
+ * ```ts
+ * const scroll = new ScrollContainer({
+ *   width: 600,
+ *   height: 400,
+ *   direction: 'vertical',
+ *   showScrollbar: true,
+ *   elasticity: 0.3,
+ * });
+ *
+ * // 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.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;
+    constructor(config) {
+        super();
+        this._config = {
+            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,
+        };
+        // 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);
+            }
+        }
+        // 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);
+    }
+    /** Set scrollable content. Replaces any existing content. */
+    setContent(content) {
+        if (this._content) {
+            this._viewport.removeChild(this._content);
+        }
+        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;
+        }
+        this.animateScrollTo(x, y);
+    }
+    /** 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);
+            }
+        }
+    }
+    /** 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);
+    }
+}
+
+const DEFAULT_CONFIG = {
+    balance: 10000,
+    currency: 'USD',
+    gameConfig: {
+        id: 'dev-game',
+        type: 'slot',
+        version: '1.0.0',
+        viewport: { width: 1920, height: 1080 },
+        betLevels: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50],
     },
     assetsUrl: '/assets/',
     session: null,
@@ -3329,8 +4448,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.
  *
@@ -3358,8 +4478,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;
@@ -3370,24 +4489,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');
         }
@@ -3395,47 +4528,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,
@@ -3468,13 +4567,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);
@@ -3484,120 +4583,17 @@ 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);
+            setTimeout(() => this._bridge?.send(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);
+            this._bridge?.send(type, payload, id);
         }
-        // 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();
-        }
-        else {
-            this.show();
-        }
-    }
-    /** Destroy the overlay */
-    destroy() {
-        this.hide();
-        this._container.destroy({ children: true });
     }
 }
 
@@ -3612,13 +4608,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;