@energy8platform/game-engine 0.2.1 → 0.4.0

package/README.md

@@ -17,7 +17,21 @@ A universal casino game engine built on [PixiJS v8](https://pixijs.com/) and [@e
 - [Viewport & Scaling](#viewport--scaling)
 - [State Machine](#state-machine)
 - [Animation](#animation)
+  - [Tween](#tween)
+  - [Timeline](#timeline)
+  - [SpriteAnimation](#spriteanimation)
+  - [Spine Animations](#spine-animations)
 - [UI Components](#ui-components)
+  - [Layout](#layout)
+  - [ScrollContainer](#scrollcontainer)
+  - [Button](#button)
+  - [Label](#label)
+  - [BalanceDisplay](#balancedisplay)
+  - [WinDisplay](#windisplay)
+  - [ProgressBar](#progressbar)
+  - [Panel](#panel)
+  - [Modal](#modal)
+  - [Toast](#toast)
 - [Input](#input)
 - [Vite Configuration](#vite-configuration)
 - [DevBridge](#devbridge)
@@ -37,6 +51,9 @@ npm init -y
 # Install dependencies
 npm install pixi.js @energy8platform/game-sdk @energy8platform/game-engine
 
+# Install UI layout dependencies (optional — needed for Layout, Panel, Toast, ScrollContainer)
+npm install @pixi/ui @pixi/layout yoga-layout
+
 # (Optional) install spine and audio support
 npm install @pixi/sound @esotericsoftware/spine-pixi-v8
 ```
@@ -83,7 +100,7 @@ async function bootstrap() {
     debug: true,
   });
 
-  game.scenes.register('game', GameScene as any);
+  game.scenes.register('game', GameScene);
 
   game.on('initialized', () => console.log('Engine initialized'));
   game.on('loaded', () => console.log('Assets loaded'));
@@ -105,7 +122,10 @@ bootstrap();
 | Package | Version | Required |
 | --- | --- | --- |
 | `pixi.js` | `^8.16.0` | Yes |
-| `@energy8platform/game-sdk` | `^2.5.0` | Yes |
+| `@energy8platform/game-sdk` | `^2.6.0` | Yes |
+| `@pixi/ui` | `^2.3.0` | Optional — for Button, ScrollContainer, ProgressBar |
+| `@pixi/layout` | `^3.2.0` | Optional — for Layout, Panel, Toast (Yoga flexbox) |
+| `yoga-layout` | `^3.0.0` | Optional — peer dep of `@pixi/layout` |
 | `@pixi/sound` | `^6.0.0` | Optional — for audio |
 | `@esotericsoftware/spine-pixi-v8` | `~4.2.0` | Optional — for Spine animations |
 
@@ -118,8 +138,8 @@ import { GameApplication } from '@energy8platform/game-engine';        // full b
 import { Scene, SceneManager } from '@energy8platform/game-engine/core';
 import { AssetManager } from '@energy8platform/game-engine/assets';
 import { AudioManager } from '@energy8platform/game-engine/audio';
-import { Button, Label, Modal } from '@energy8platform/game-engine/ui';
-import { Tween, Timeline, Easing } from '@energy8platform/game-engine/animation';
+import { Button, Label, Modal, Layout, ScrollContainer, Panel, Toast } from '@energy8platform/game-engine/ui';
+import { Tween, Timeline, Easing, SpriteAnimation } from '@energy8platform/game-engine/animation';
 import { DevBridge, FPSOverlay } from '@energy8platform/game-engine/debug';
 import { defineGameConfig } from '@energy8platform/game-engine/vite';
 ```
@@ -146,7 +166,7 @@ import { defineGameConfig } from '@energy8platform/game-engine/vite';
 
 1. **CSS Preloader** — an instant HTML/CSS overlay shown while PixiJS initializes (inline SVG logo with a shimmer animation and "Loading..." text).
 2. **PixiJS initialization** — creates `Application`, initializes `ResizeObserver`.
-3. **SDK handshake** — connects to the casino host (or DevBridge in dev mode).
+3. **SDK handshake** — connects to the casino host (or DevBridge in dev mode via shared `MemoryChannel`).
 4. **Canvas Loading Screen** — `LoadingScene` displays the SVG logo with an animated progress bar, `preload` bundle is loaded first.
 5. **Asset loading** — remaining bundles are loaded; the progress bar fills in real time.
 6. **Tap-to-start** — optional screen shown after loading (required on mobile for audio unlock).
@@ -169,6 +189,10 @@ import { defineGameConfig } from '@energy8platform/game-engine/vite';
 | `manifest` | `AssetManifest` | — | Asset manifest |
 | `audio` | `AudioConfig` | — | Audio configuration |
 | `sdk` | `object \| false` | — | SDK options; `false` to disable |
+| `sdk.devMode` | `boolean` | `false` | Use in-memory channel instead of `postMessage` (no iframe needed) |
+| `sdk.parentOrigin` | `string` | — | Expected parent origin for `postMessage` validation |
+| `sdk.timeout` | `number` | — | SDK handshake timeout in ms |
+| `sdk.debug` | `boolean` | — | Enable SDK debug logging |
 | `pixi` | `Partial<ApplicationOptions>` | — | PixiJS pass-through options |
 | `debug` | `boolean` | `false` | Enable FPS overlay |
 
@@ -261,9 +285,9 @@ export class GameScene extends Scene {
 const scenes = game.scenes;
 
 // Register scenes
-scenes.register('menu', MenuScene as any);
-scenes.register('game', GameScene as any);
-scenes.register('bonus', BonusScene as any);
+scenes.register('menu', MenuScene);
+scenes.register('game', GameScene);
+scenes.register('bonus', BonusScene);
 
 // Navigate (replaces entire stack)
 await scenes.goto('game');
@@ -400,7 +424,7 @@ const audio = game.audio;
 audio.play('click', 'ui');
 audio.play('coin-drop', 'sfx', { volume: 0.8 });
 
-// Music with crossfade
+// Music with crossfade (smooth volume transition between tracks)
 audio.playMusic('main-theme', 1000); // 1s crossfade
 audio.stopMusic();
 
@@ -542,13 +566,17 @@ await Tween.from(sprite, { scale: 0 }, 300, Easing.easeOutBack);
 // Animate between two sets of values
 await Tween.fromTo(sprite, { x: -100 }, { x: 500 }, 1000, Easing.easeInOutQuad);
 
-// Wait (useful in timelines or sequences)
+// Wait (uses PixiJS Ticker for consistent timing)
 await Tween.delay(1000);
 
 // Cancel tweens
 Tween.killTweensOf(sprite);
 Tween.killAll();
 
+// Full reset — kill all tweens and remove ticker listener
+// Useful for cleanup between game instances, tests, or hot-reload
+Tween.reset();
+
 // Supports nested properties
 await Tween.to(sprite, { 'scale.x': 2, 'position.y': 300 }, 500);
 ```
@@ -592,6 +620,59 @@ All 24 easing functions:
 | | | | `easeOutElastic` |
 | | | | `easeInElastic` |
 
+### SpriteAnimation
+
+Frame-based animation helper wrapping PixiJS `AnimatedSprite`. Cheaper than Spine for simple frame sequences — perfect for coin showers, symbol animations, sparkle trails, and win celebrations.
+
+```typescript
+import { SpriteAnimation } from '@energy8platform/game-engine';
+import { Assets } from 'pixi.js';
+
+// From an array of textures
+const coinAnim = SpriteAnimation.create(coinTextures, {
+  fps: 30,
+  loop: true,
+});
+scene.container.addChild(coinAnim);
+
+// From a spritesheet using a name prefix
+const sheet = Assets.get('effects');
+const sparkle = SpriteAnimation.fromSpritesheet(sheet, 'sparkle_', {
+  fps: 24,
+  loop: true,
+});
+
+// From a numbered range (e.g., 'explosion_00' to 'explosion_24')
+const explosion = SpriteAnimation.fromRange(sheet, 'explosion_{i}', 0, 24, {
+  fps: 60,
+  loop: false,
+  onComplete: () => explosion.destroy(),
+});
+
+// From pre-loaded texture aliases
+const anim = SpriteAnimation.fromAliases(
+  ['frame_0', 'frame_1', 'frame_2', 'frame_3'],
+  { fps: 12 },
+);
+
+// Fire-and-forget: play once and auto-destroy
+const { sprite, finished } = SpriteAnimation.playOnce(coinTextures, {
+  fps: 30,
+});
+scene.container.addChild(sprite);
+await finished; // resolves when animation completes
+```
+
+#### SpriteAnimationConfig
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fps` | `number` | `24` | Frames per second |
+| `loop` | `boolean` | `true` | Whether to loop |
+| `autoPlay` | `boolean` | `true` | Start playing immediately |
+| `onComplete` | `() => void` | — | Callback when animation completes (non-looping) |
+| `anchor` | `number \| { x, y }` | `0.5` | Anchor point |
+
 ### Spine Animations
 
 If `@esotericsoftware/spine-pixi-v8` is installed:
@@ -621,8 +702,140 @@ console.log(SpineHelper.getAnimationNames(spine));
 
 ## UI Components
 
+> UI components are built on top of [`@pixi/ui`](https://github.com/pixijs/ui) and [`@pixi/layout`](https://github.com/pixijs/layout) (Yoga flexbox). Install them as peer dependencies:
+>
+> ```bash
+> npm install @pixi/ui @pixi/layout yoga-layout
+> ```
+
+### Layout
+
+Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine). Supports horizontal, vertical, grid, and wrap modes with alignment, padding, gap, anchor positioning, and viewport breakpoints.
+
+```typescript
+import { Layout } from '@energy8platform/game-engine';
+
+// Horizontal toolbar anchored to bottom-center
+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);
+toolbar.addItem(balanceDisplay);
+scene.container.addChild(toolbar);
+
+// Update position on resize
+toolbar.updateViewport(width, height);
+```
+
+```typescript
+// Grid layout for a symbol paytable
+const grid = new Layout({
+  direction: 'grid',
+  columns: 3,
+  gap: 16,
+  alignment: 'center',
+  anchor: 'center',
+  padding: [20, 40, 20, 40],
+});
+
+symbols.forEach((sym) => grid.addItem(sym));
+grid.updateViewport(viewWidth, viewHeight);
+```
+
+```typescript
+// Wrap layout — items flow and wrap to next line
+const tags = new Layout({
+  direction: 'wrap',
+  gap: 8,
+  maxWidth: 600,
+});
+```
+
+#### LayoutConfig
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'horizontal' \| 'vertical' \| 'grid' \| 'wrap'` | `'vertical'` | Layout direction |
+| `gap` | `number` | `0` | Gap between children (px) |
+| `padding` | `number \| [top, right, bottom, left]` | `0` | Inner padding |
+| `alignment` | `'start' \| 'center' \| 'end' \| 'stretch'` | `'start'` | Cross-axis alignment |
+| `anchor` | `LayoutAnchor` | `'top-left'` | Position relative to viewport |
+| `columns` | `number` | `2` | Column count (grid mode only) |
+| `maxWidth` | `number` | `Infinity` | Max width before wrapping (wrap mode) |
+| `autoLayout` | `boolean` | `true` | Auto-recalculate on add/remove |
+| `breakpoints` | `Record<number, Partial<LayoutConfig>>` | — | Override config per viewport width |
+
+**Anchor values:** `top-left`, `top-center`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom-center`, `bottom-right`
+
+> **Under the hood**: Layout maps `direction` → Yoga `flexDirection`/`flexWrap`, `alignment` → `alignItems`, and uses `@pixi/layout`'s `container.layout = { ... }` mixin. Grid mode assigns percentage widths to children.
+
+### ScrollContainer
+
+Scrollable container powered by `@pixi/ui` ScrollBox. Provides touch/drag scrolling, mouse wheel support, inertia, and dynamic rendering optimization for off-screen items.
+
+```typescript
+import { ScrollContainer } from '@energy8platform/game-engine';
+
+const scroll = new ScrollContainer({
+  width: 600,
+  height: 400,
+  direction: 'vertical',
+  elementsMargin: 8,
+  borderRadius: 12,
+  backgroundColor: 0x1a1a2e,
+});
+
+// Add items directly
+for (let i = 0; i < 50; i++) {
+  scroll.addItem(createRow(i));
+}
+
+scene.container.addChild(scroll);
+```
+
+```typescript
+// Or set content from a Container
+const list = new Container();
+items.forEach((item) => list.addChild(item));
+scroll.setContent(list);
+
+// Scroll to a specific item index
+scroll.scrollToItem(5);
+
+// Current position
+const { x, y } = scroll.scrollPosition;
+```
+
+#### ScrollContainerConfig
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `width` | `number` | — | Visible viewport width |
+| `height` | `number` | — | Visible viewport height |
+| `direction` | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Scroll direction |
+| `backgroundColor` | `ColorSource` | — | Background color (transparent if omitted) |
+| `borderRadius` | `number` | `0` | Mask border radius |
+| `elementsMargin` | `number` | `0` | Gap between items |
+| `padding` | `number` | `0` | Content padding |
+| `disableDynamicRendering` | `boolean` | `false` | Render all items even when off-screen |
+| `disableEasing` | `boolean` | `false` | Disable scroll inertia/easing |
+| `globalScroll` | `boolean` | `true` | Scroll even when mouse is not over the component |
+
+> **Note:** ScrollContainer extends `@pixi/ui` `ScrollBox`. All `ScrollBox` methods and options are available.
+
 ### Button
 
+Powered by `@pixi/ui` `FancyButton`. Supports both texture-based and Graphics-based rendering with per-state views, press animation, and built-in text.
+
 ```typescript
 import { Button } from '@energy8platform/game-engine';
 
@@ -631,23 +844,25 @@ const spinBtn = new Button({
   height: 60,
   borderRadius: 12,
   colors: {
-    normal: 0xffd700,
+    default: 0xffd700,
     hover: 0xffe44d,
     pressed: 0xccac00,
     disabled: 0x666666,
   },
   pressScale: 0.95,
   animationDuration: 100,
+  text: 'SPIN',
 });
 
-spinBtn.onTap = () => {
+// Connect press event (Signal-based)
+spinBtn.onPress.connect(() => {
   console.log('Spin!');
-};
+});
 
 // Or use texture-based states
 const btn = new Button({
   textures: {
-    normal: 'btn-normal',
+    default: 'btn-default',
     hover: 'btn-hover',
     pressed: 'btn-pressed',
     disabled: 'btn-disabled',
@@ -658,6 +873,8 @@ btn.enable();
 btn.disable();
 ```
 
+> **Breaking change:** Button states renamed from `normal` to `default`. The `onTap` callback is replaced by `onPress.connect()` (typed-signals Signal).
+
 ### Label
 
 ```typescript
@@ -703,6 +920,8 @@ winDisplay.hide();
 
 ### ProgressBar
 
+Horizontal progress bar powered by `@pixi/ui` ProgressBar. Supports animated smooth fill.
+
 ```typescript
 import { ProgressBar } from '@energy8platform/game-engine';
 
@@ -712,24 +931,40 @@ const bar = new ProgressBar({
   fillColor: 0x00ff00,
   trackColor: 0x333333,
   borderRadius: 10,
+  animated: true,
 });
 
 bar.progress = 0.75; // 75%
+
+// Call each frame for smooth animation
+bar.update(dt);
 ```
 
 ### Panel
 
-Container with a background:
+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.
 
 ```typescript
 import { Panel } from '@energy8platform/game-engine';
 
+// Simple colored panel
 const panel = new Panel({
   width: 600,
   height: 400,
   backgroundColor: 0x1a1a2e,
   borderRadius: 16,
   backgroundAlpha: 0.9,
+  padding: 16,
+});
+
+panel.content.addChild(myText);
+
+// 9-slice panel (texture-based)
+const nineSlicePanel = new Panel({
+  nineSliceTexture: 'panel-bg',
+  nineSliceBorders: [20, 20, 20, 20],
+  width: 400,
+  height: 300,
 });
 ```
 
@@ -753,18 +988,25 @@ await modal.hide();
 
 ### Toast
 
-Brief notification messages:
+Brief notification messages. Uses `@pixi/layout` `LayoutContainer` for auto-sized background.
 
 ```typescript
 import { Toast } from '@energy8platform/game-engine';
 
 const toast = new Toast({
   duration: 2000,
+  bottomOffset: 60,
 });
 
-await toast.show('Free spins activated!', 'success');
+// Show with type and viewport size
+await toast.show('Free spins activated!', 'success', viewWidth, viewHeight);
+
+// Dismiss manually
+await toast.dismiss();
 ```
 
+**Toast types:** `info`, `success`, `warning`, `error` — each with a distinct color.
+
 ---
 
 ## Input
@@ -799,10 +1041,17 @@ if (input.isKeyDown('ArrowLeft')) {
 input.lock();
 // ... animation plays ...
 input.unlock();
+
+// Convert DOM canvas position to game-world coordinates
+// (accounts for viewport scaling and offset)
+const worldPos = input.getWorldPosition(canvasX, canvasY);
+console.log(worldPos.x, worldPos.y);
 ```
 
 **Events:** `tap`, `press`, `release`, `move`, `swipe`, `keydown`, `keyup`
 
+> **Note:** The viewport transform for coordinate mapping is wired up automatically by `GameApplication`. Call `getWorldPosition()` when you need to convert raw DOM coordinates to game-world space.
+
 ---
 
 ## Vite Configuration
@@ -815,28 +1064,32 @@ import { defineGameConfig } from '@energy8platform/game-engine/vite';
 
 export default defineGameConfig({
   base: '/games/my-slot/',
-  outDir: 'dist',
   devBridge: true, // Auto-inject DevBridge in dev mode
-  assetExtensions: [
-    'png', 'jpg', 'webp', 'avif',
-    'mp3', 'ogg', 'wav',
-    'json', 'atlas', 'skel',
-    'fnt', 'ttf', 'woff2',
-  ],
+  devBridgeConfig: './dev.config', // Custom config path (optional)
   vite: {
     // Additional Vite config overrides
   },
 });
 ```
 
+### `GameConfig`
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `base` | `string` | `'/'` | Vite `base` path for deployment |
+| `devBridge` | `boolean` | `false` | Auto-inject DevBridge in dev mode |
+| `devBridgeConfig` | `string` | `'./dev.config'` | Path to DevBridge config file |
+| `vite` | `UserConfig` | — | Additional Vite config to merge |
+
 ### What `defineGameConfig` Provides
 
-- **PixiJS optimizations** — tree-shaking, proper externals handling
+- **Build target: ESNext** — required for `yoga-layout` WASM (uses top-level `await`)
+- **Asset inlining** — files under 8KB are auto-inlined
+- **PixiJS chunk splitting** — `pixi.js` is extracted into a separate chunk for caching
 - **DevBridge injection** — automatically available in dev mode via virtual module
-- **Asset handling** — preconfigured loader patterns for game assets
-- **HTML minification** — optimized production builds
-- **Gzip-friendly output** — chunking strategy optimized for compression
-- **Base path** — configurable for deployment subpaths
+- **Dev server** — port 3000, auto-open browser
+- **Dependency deduplication** — `resolve.dedupe` ensures a single copy of `pixi.js`, `@pixi/layout`, `@pixi/ui`, and `yoga-layout` across all packages (prevents registration issues when used as a linked dependency)
+- **Dependency optimization** — `pixi.js`, `@pixi/layout`, `@pixi/layout/components`, `@pixi/ui`, and `yoga-layout/load` are pre-bundled for faster dev starts; `yoga-layout` main entry is excluded from pre-bundling because it contains a top-level `await` incompatible with esbuild's default target
 
 ### Custom DevBridge Configuration
 
@@ -858,13 +1111,15 @@ export default {
 } satisfies DevBridgeConfig;
 ```
 
-This file is auto-imported by the Vite plugin when `devBridge: true`.
+This file is auto-imported by the Vite plugin when `devBridge: true`. The plugin injects a virtual module (`/@dev-bridge-entry.js`) that starts DevBridge **before** importing your app entry point, ensuring the `MemoryChannel` is ready when the SDK calls `ready()`.
 
 ---
 
 ## DevBridge
 
-`DevBridge` simulates a casino host for local development. It intercepts `postMessage` calls from the SDK and responds with mock data.
+`DevBridge` simulates a casino host for local development. It uses the SDK's `Bridge` class in `devMode`, communicating with `CasinoGameSDK` through a shared in-memory `MemoryChannel` — no `postMessage` or iframe required.
+
+> **Requires `@energy8platform/game-sdk` >= 2.6.0**
 
 ```typescript
 import { DevBridge } from '@energy8platform/game-engine/debug';
@@ -876,7 +1131,10 @@ const bridge = new DevBridge({
   networkDelay: 200,
   debug: true,
   gameConfig: {
+    id: 'my-slot',
+    type: 'slot',
     viewport: { width: 1920, height: 1080 },
+    betLevels: [0.1, 0.2, 0.5, 1, 2, 5, 10],
   },
   onPlay: ({ action, bet, roundId }) => {
     // Return custom play result
@@ -885,7 +1143,7 @@ const bridge = new DevBridge({
   },
 });
 
-bridge.start();
+bridge.start(); // Creates SDK Bridge({ devMode: true }) + registers handlers
 
 // Update balance programmatically
 bridge.setBalance(5000);
@@ -894,6 +1152,8 @@ bridge.setBalance(5000);
 bridge.destroy();
 ```
 
+When using the Vite plugin with `devBridge: true`, the SDK is automatically configured with `devMode: true` so both sides use the same `MemoryChannel`.
+
 ### Handled Messages
 
 | Message | Description |
@@ -920,7 +1180,7 @@ fps.toggle();
 fps.hide();
 ```
 
-When `debug: true` is set in `GameApplicationConfig`, the FPS overlay is enabled automatically.
+When `debug: true` is set in `GameApplicationConfig`, the FPS overlay is created and shown automatically — no manual setup needed.
 
 The overlay displays:
 - Average FPS
@@ -1077,9 +1337,10 @@ class Tween {
   static to(target: any, props: Record<string, number>, duration: number, easing?: EasingFunction, onUpdate?: (p: number) => void): Promise<void>;
   static from(target: any, props: Record<string, number>, duration: number, easing?, onUpdate?): Promise<void>;
   static fromTo(target: any, fromProps: Record<string, number>, toProps: Record<string, number>, duration: number, easing?, onUpdate?): Promise<void>;
-  static delay(ms: number): Promise<void>;
+  static delay(ms: number): Promise<void>;  // Uses PixiJS Ticker
   static killTweensOf(target: any): void;
   static killAll(): void;
+  static reset(): void;  // Kill all + remove ticker listener
 }
 ```
 
@@ -1110,10 +1371,113 @@ class InputManager extends EventEmitter<InputEvents> {
   lock(): void;
   unlock(): void;
   isKeyDown(key: string): boolean;
+  setViewportTransform(scale: number, offsetX: number, offsetY: number): void;
+  getWorldPosition(canvasX: number, canvasY: number): { x: number; y: number };
   destroy(): void;
 }
 ```
 
+### Layout
+
+> Powered by `@pixi/layout` (Yoga flexbox). Uses the `@pixi/layout` mixin on a standard `Container`.
+
+```typescript
+class Layout extends Container {
+  get items(): readonly Container[];
+
+  constructor(config?: LayoutConfig);
+  addItem(child: Container): this;
+  removeItem(child: Container): this;
+  clearItems(): this;
+  updateViewport(width: number, height: number): void;
+}
+```
+
+### ScrollContainer
+
+> Extends `@pixi/ui` ScrollBox — inherits touch/drag scrolling, mouse wheel, inertia, and dynamic rendering.
+
+```typescript
+class ScrollContainer extends ScrollBox {
+  get scrollPosition(): { x: number; y: number };
+
+  constructor(config: ScrollContainerConfig);
+  setContent(content: Container): void;
+  addItem(...items: Container[]): Container;
+  scrollToItem(index: number): void;
+}
+```
+
+### Button
+
+> Extends `@pixi/ui` FancyButton — per-state views, press animation, and text.
+
+```typescript
+class Button extends FancyButton {
+  get disabled(): boolean;
+
+  constructor(config?: ButtonConfig);
+  enable(): void;
+  disable(): void;
+
+  // Inherited from FancyButton
+  onPress: Signal;   // btn.onPress.connect(() => { … })
+  enabled: boolean;
+}
+```
+
+### Panel
+
+> Extends `@pixi/layout/components` LayoutContainer — flex-layout background panel with optional 9-slice texture.
+
+```typescript
+class Panel extends LayoutContainer {
+  get content(): Container;  // children added here participate in flexbox layout
+
+  constructor(config?: PanelConfig);
+  setSize(width: number, height: number): void;
+}
+```
+
+### ProgressBar
+
+> Wraps `@pixi/ui` ProgressBar — optional smooth animated fill via per-frame `update()`.
+
+```typescript
+class ProgressBar extends Container {
+  get progress(): number;
+  set progress(value: number);    // 0..1
+
+  constructor(config?: ProgressBarConfig);
+  update(dt: number): void;       // call each frame when animated: true
+}
+```
+
+### Toast
+
+> Uses `@pixi/layout` LayoutContainer for auto-sized background. Supports info / success / warning / error types.
+
+```typescript
+class Toast extends Container {
+  constructor(config?: ToastConfig);
+  async show(message: string, type?: ToastType, viewWidth?: number, viewHeight?: number): Promise<void>;
+  async dismiss(): Promise<void>;
+}
+```
+
+### SpriteAnimation
+
+```typescript
+class SpriteAnimation {
+  static create(textures: Texture[], config?: SpriteAnimationConfig): AnimatedSprite;
+  static fromSpritesheet(sheet: Spritesheet, prefix: string, config?: SpriteAnimationConfig): AnimatedSprite;
+  static fromRange(sheet: Spritesheet, pattern: string, start: number, end: number, config?: SpriteAnimationConfig): AnimatedSprite;
+  static fromAliases(aliases: string[], config?: SpriteAnimationConfig): AnimatedSprite;
+  static playOnce(textures: Texture[], config?: SpriteAnimationConfig): { sprite: AnimatedSprite; finished: Promise<void> };
+  static getTexturesByPrefix(sheet: Spritesheet, prefix: string): Texture[];
+}
+```
+
 ### EventEmitter
 
 ```typescript
@@ -1121,7 +1485,8 @@ class EventEmitter<TEvents extends {}> {
   on<K>(event: K, handler: (data: TEvents[K]) => void): this;
   once<K>(event: K, handler: (data: TEvents[K]) => void): this;
   off<K>(event: K, handler: (data: TEvents[K]) => void): this;
-  emit<K>(event: K, data: TEvents[K]): void;
+  // Void events can be emitted without a data argument
+  emit<K>(event: K, ...args): void;
   removeAllListeners(event?: keyof TEvents): this;
 }
 ```