@energy8platform/game-engine 0.20.0 → 0.22.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _energy8platform_platform_core_shell from '@energy8platform/platform-core/shell';
-import { Container, ApplicationOptions, Application, Texture, AnimatedSprite, Spritesheet, TextStyle, ColorSource } from 'pixi.js';
+import { Container, ApplicationOptions, Application, Texture, AnimatedSprite, Spritesheet } from 'pixi.js';
 import { CasinoGameSDK, InitData, GameConfigData, SessionData } from '@energy8platform/game-sdk';
 export { AnywhereWinData, BalanceData, BridgeDestroyedError, BridgeNotReadyError, GameConfigData, InitData, PaylineData, PlayParams, PlayResultData, SDKError, SessionData, SymbolData, TimeoutError, WinLineData } from '@energy8platform/game-sdk';
 import { LoadingScreenConfig, AssetManifest, PlatformSession } from '@energy8platform/platform-core';
@@ -786,126 +786,6 @@ declare abstract class Scene implements IScene {
     onDestroy?(): void;
 }
 
-interface StateConfig<TContext> {
-    enter?: (ctx: TContext, data?: unknown) => void | Promise<void>;
-    exit?: (ctx: TContext) => void | Promise<void>;
-    update?: (ctx: TContext, dt: number) => void;
-}
-interface StateMachineEvents {
-    transition: {
-        from: string | null;
-        to: string;
-    };
-    error: Error;
-}
-/**
- * Generic finite state machine for game flow management.
- *
- * Supports:
- * - Typed context object shared across all states
- * - Async enter/exit hooks
- * - Per-frame update per state
- * - Transition guards
- * - Event emission on state change
- *
- * @example
- * ```ts
- * interface GameContext {
- *   balance: number;
- *   bet: number;
- *   lastWin: number;
- * }
- *
- * const fsm = new StateMachine<GameContext>({ balance: 1000, bet: 10, lastWin: 0 });
- *
- * fsm.addState('idle', {
- *   enter: (ctx) => console.log('Waiting for spin...'),
- *   update: (ctx, dt) => { // optional per-frame },
- * });
- *
- * fsm.addState('spinning', {
- *   enter: async (ctx) => {
- *     const result = await sdk.play({ action: 'spin', bet: ctx.bet });
- *     ctx.lastWin = result.totalWin;
- *     await fsm.transition('presenting');
- *   },
- * });
- *
- * fsm.addState('presenting', {
- *   enter: async (ctx) => {
- *     await showWinPresentation(ctx.lastWin);
- *     await fsm.transition('idle');
- *   },
- * });
- *
- * // Optional guard
- * fsm.addGuard('idle', 'spinning', (ctx) => ctx.balance >= ctx.bet);
- *
- * await fsm.start('idle');
- * ```
- */
-declare class StateMachine<TContext = Record<string, unknown>> extends EventEmitter<StateMachineEvents> {
-    private static MAX_TRANSITION_DEPTH;
-    private _states;
-    private _guards;
-    private _current;
-    private _transitionDepth;
-    private _context;
-    constructor(context: TContext);
-    /** Current state name */
-    get current(): string | null;
-    /** Whether a transition is in progress */
-    get isTransitioning(): boolean;
-    /** State machine context (shared data) */
-    get context(): TContext;
-    /**
-     * Register a state with optional enter/exit/update hooks.
-     */
-    addState(name: string, config: StateConfig<TContext>): this;
-    /**
-     * Add a transition guard.
-     * The guard function must return true to allow the transition.
-     *
-     * @param from - Source state
-     * @param to - Target state
-     * @param guard - Guard function
-     */
-    addGuard(from: string, to: string, guard: (ctx: TContext) => boolean): this;
-    /**
-     * Start the state machine in the given initial state.
-     */
-    start(initialState: string, data?: unknown): Promise<void>;
-    /**
-     * Transition to a new state.
-     *
-     * @param to - Target state name
-     * @param data - Optional data passed to the new state's enter hook
-     * @returns true if the transition succeeded, false if blocked by a guard
-     */
-    transition(to: string, data?: unknown): Promise<boolean>;
-    /**
-     * Call the current state's update function.
-     * Should be called from the game loop.
-     */
-    update(dt: number): void;
-    /**
-     * Check if a state is registered.
-     */
-    hasState(name: string): boolean;
-    /**
-     * Check if a transition is allowed (guard passes).
-     */
-    canTransition(to: string): boolean;
-    /**
-     * Reset the state machine (exit current state, clear current).
-     */
-    reset(): Promise<void>;
-    /**
-     * Destroy the state machine.
-     */
-    destroy(): Promise<void>;
-}
-
 /**
  * Lightweight tween system integrated with PixiJS Ticker.
  * Zero external dependencies — no GSAP required.
@@ -1251,903 +1131,6 @@ declare class SpriteAnimation {
     static getTexturesByPrefix(sheet: Spritesheet, prefix: string): Texture[];
 }
 
-type FlexDirection = 'row' | 'column';
-type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
-type AlignItems = 'start' | 'center' | 'end' | 'stretch';
-type AlignContent = 'start' | 'center' | 'end' | 'space-between' | 'stretch';
-type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch';
-interface FlexItemConfig {
-    /** Flex grow factor (0 = fixed size) */
-    flexGrow?: number;
-    /** Flex shrink factor (0 = don't shrink, default: 1) */
-    flexShrink?: number;
-    /** Explicit width override for layout calculations */
-    layoutWidth?: number | string;
-    /** Explicit height override for layout calculations */
-    layoutHeight?: number | string;
-    /** Override parent's alignItems for this child */
-    alignSelf?: AlignSelf;
-    /**
-     * Exclude from flex layout (acts like position: absolute).
-     *
-     * Positioning props (`top`/`right`/`bottom`/`left`/`centerX`/`centerY`) describe
-     * the **visual bounding rectangle**, so children with a centered internal
-     * origin (Button, Label — `anchor = 0.5`) are positioned intuitively.
-     * `left: 100` places the visible left edge at 100px, regardless of origin.
-     */
-    flexExclude?: boolean;
-    /** Distance from top edge of parent content area to the child's visual top */
-    top?: number;
-    /** Distance from right edge of parent content area to the child's visual right */
-    right?: number;
-    /** Distance from bottom edge of parent content area to the child's visual bottom */
-    bottom?: number;
-    /** Distance from left edge of parent content area to the child's visual left */
-    left?: number;
-    /**
-     * X coordinate of the child's visual center within parent content area.
-     * Accepts pixels (`200`) or a percentage of parent content width (`'50%'`).
-     * Takes precedence over `left`/`right`.
-     */
-    centerX?: number | string;
-    /**
-     * Y coordinate of the child's visual center within parent content area.
-     * Accepts pixels or a percentage of parent content height (`'50%'`).
-     * Takes precedence over `top`/`bottom`.
-     */
-    centerY?: number | string;
-}
-interface FlexContainerConfig {
-    /** Layout direction (default: 'row') */
-    direction?: FlexDirection;
-    /** Main-axis distribution (default: 'start') */
-    justifyContent?: JustifyContent;
-    /** Cross-axis alignment (default: 'start') */
-    alignItems?: AlignItems;
-    /** Gap between children in pixels (default: 0) */
-    gap?: number;
-    /** Padding [top, right, bottom, left] or single number (default: 0) */
-    padding?: number | [number, number, number, number];
-    /** Individual padding overrides (take priority over `padding`) */
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
-    /** Enable wrapping to next line (default: false) */
-    flexWrap?: boolean;
-    /** Distribution of lines along the cross axis when wrapping (default: 'start') */
-    alignContent?: AlignContent;
-    /** Maximum width before wrapping (only with flexWrap) */
-    maxWidth?: number;
-    /** Maximum height before wrapping (only with flexWrap + column) */
-    maxHeight?: number;
-    /** Explicit container width — number in pixels, or string percentage (e.g. "50%") resolved against parent */
-    width?: number | string;
-    /** Explicit container height — number in pixels, or string percentage (e.g. "50%") resolved against parent */
-    height?: number | string;
-}
-/**
- * Lightweight flexbox-like layout container for PixiJS.
- *
- * Supports row/column direction, justify/align, gap, padding, wrapping,
- * and flex-grow distribution. Zero external dependencies.
- *
- * @example
- * ```ts
- * const toolbar = new FlexContainer({
- *   direction: 'row',
- *   justifyContent: 'space-between',
- *   alignItems: 'center',
- *   gap: 16,
- *   padding: 12,
- * });
- *
- * toolbar.addFlexChild(button1);
- * toolbar.addFlexChild(button2);
- * toolbar.resize(800, 60);
- * ```
- */
-declare class FlexContainer extends Container {
-    readonly __uiComponent: true;
-    private _config;
-    private _padding;
-    private _maxWidth;
-    private _maxHeight;
-    /** @internal */ _explicitWidth: number;
-    /** @internal */ _explicitHeight: number;
-    /** @internal */ _computedWidth: number;
-    /** @internal */ _computedHeight: number;
-    /** @internal */ _availableWidth: number;
-    /** @internal */ _availableHeight: number;
-    /** @internal */ _rawWidth: number | string;
-    /** @internal */ _rawHeight: number | string;
-    private _layoutChildren;
-    private _layoutDirty;
-    private _layoutSuspended;
-    constructor(config?: FlexContainerConfig);
-    /** Add a child with optional flex config. Also registers in flex layout. */
-    addFlexChild(child: Container, flexConfig?: FlexItemConfig): this;
-    /** Remove a child from flex layout and display list */
-    removeFlexChild(child: Container): this;
-    /** Remove all flex children */
-    clearFlexChildren(): this;
-    /**
-     * Override addChild so children automatically participate in flex layout.
-     * This enables declarative usage from React JSX.
-     */
-    addChild<T extends Container>(...children: T[]): T;
-    addChildAt<T extends Container>(child: T, index: number): T;
-    removeChild<T extends Container>(...children: T[]): T;
-    /** Get all flex layout children (read-only) */
-    get flexChildren(): readonly Container[];
-    /** Suspend automatic layout recalculation. Call resumeLayout() to flush. */
-    suspendLayout(): void;
-    /** Resume automatic layout and flush if dirty. */
-    resumeLayout(): void;
-    /** Update the container size and recalculate layout */
-    resize(width: number, height: number): void;
-    /** Update layout direction */
-    setDirection(direction: FlexDirection): void;
-    /** Update justifyContent */
-    setJustifyContent(justify: JustifyContent): void;
-    /** Update alignItems */
-    setAlignItems(align: AlignItems): void;
-    /** Update gap */
-    setGap(gap: number): void;
-    /** Update padding */
-    setPadding(padding: number | [number, number, number, number]): void;
-    /**
-     * Recalculate and apply layout positions for all children.
-     * Called automatically by `resize()`. Call manually after
-     * adding/removing children without resize.
-     */
-    updateLayout(): void;
-    /** Computed content size (after layout) */
-    getContentSize(): {
-        width: number;
-        height: number;
-    };
-    /** React reconciler update hook — applies changed config props */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-/**
- * Universal view input type for UI component visual slots.
- *
- * - `string` — texture name, resolved via `Sprite.from()`
- * - `Texture` — wrapped in a `Sprite`
- * - `Container` — used as-is (Sprite, Graphics, NineSliceSprite, AnimatedSprite, custom...)
- */
-type ViewInput = string | Texture | Container;
-
-type ButtonState = 'default' | 'hover' | 'pressed' | 'disabled';
-interface ButtonConfig {
-    /** Custom view for default state (string texture name, Texture, or Container) */
-    defaultView?: ViewInput;
-    /** Custom view for hover state */
-    hoverView?: ViewInput;
-    /** Custom view for pressed state */
-    pressedView?: ViewInput;
-    /** Custom view for disabled state */
-    disabledView?: ViewInput;
-    /** Width (for Graphics-based button, ignored when custom views provided) */
-    width?: number;
-    /** Height (for Graphics-based button) */
-    height?: number;
-    /** Corner radius (for Graphics-based button) */
-    borderRadius?: number;
-    /** Colors for each state (for Graphics-based button) */
-    colors?: Partial<Record<ButtonState, number>>;
-    /** Scale on press */
-    pressScale?: number;
-    /** Scale animation duration (ms) */
-    animationDuration?: number;
-    /** Start disabled */
-    disabled?: boolean;
-    /** Button text (rendered on top of the view) */
-    text?: string;
-    /** Button text style */
-    textStyle?: Record<string, unknown>;
-    /** Press callback */
-    onPress?: () => void;
-}
-/**
- * Interactive button with per-state custom views and animations.
- *
- * Each visual state accepts a `ViewInput`: texture name, Texture, or any Container
- * (Sprite, NineSliceSprite, AnimatedSprite, custom artwork, etc).
- * Falls back to colored Graphics when no custom view is provided.
- *
- * @example
- * ```ts
- * // Graphics-based (quick prototyping)
- * const btn = new Button({
- *   width: 200, height: 60, borderRadius: 12,
- *   colors: { default: 0x22aa22, hover: 0x33cc33 },
- *   text: 'SPIN',
- *   onPress: () => spin(),
- * });
- *
- * // Asset-based (production art)
- * const btn = new Button({
- *   defaultView: 'btn-idle',
- *   hoverView: 'btn-hover',
- *   pressedView: 'btn-pressed',
- *   disabledView: 'btn-disabled',
- *   text: 'SPIN',
- *   onPress: () => spin(),
- * });
- *
- * // Custom Container view
- * const btn = new Button({
- *   defaultView: myAnimatedSprite,
- *   text: 'SPIN',
- * });
- * ```
- */
-declare class Button extends Container {
-    readonly __uiComponent: true;
-    private _views;
-    private _state;
-    private _enabled;
-    private _config;
-    private _textObj;
-    /** Press callback */
-    onPress?: () => void;
-    constructor(config?: ButtonConfig);
-    /** Current button state */
-    get state(): ButtonState;
-    /** Enable the button */
-    enable(): void;
-    /** Disable the button */
-    disable(): void;
-    /** Whether the button is enabled */
-    get enabled(): boolean;
-    set enabled(value: boolean);
-    /** Whether the button is disabled */
-    get disabled(): boolean;
-    /** Update button text */
-    set text(value: string);
-    private _buildViews;
-    private _rebuildViews;
-    private _setState;
-    private _onPointerOver;
-    private _onPointerOut;
-    private _onPointerDown;
-    private _onPointerUp;
-    private _onPointerUpOutside;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-interface ProgressBarConfig {
-    /** Width of the bar */
-    width?: number;
-    /** Height of the bar */
-    height?: number;
-    /** Corner radius (for Graphics-based bar) */
-    borderRadius?: number;
-    /** Fill color (for Graphics-based bar, ignored when fillView provided) */
-    fillColor?: number;
-    /** Track background color (for Graphics-based bar, ignored when trackView provided) */
-    trackColor?: number;
-    /** Border color */
-    borderColor?: number;
-    /** Border width */
-    borderWidth?: number;
-    /** Animated fill (smoothly interpolate) */
-    animated?: boolean;
-    /** Animation speed (0..1 per frame, default: 0.1) */
-    animationSpeed?: number;
-    /** Custom track background (string texture name, Texture, or Container) */
-    trackView?: ViewInput;
-    /** Custom fill bar (string texture name, Texture, or Container) */
-    fillView?: ViewInput;
-}
-/**
- * Horizontal progress bar with optional custom track/fill views.
- *
- * Supports asset-based skinning: provide `trackView` and/or `fillView`
- * as texture names, Textures, or any Container (NineSliceSprite, custom artwork, etc).
- * Falls back to colored Graphics when no custom views are provided.
- *
- * @example
- * ```ts
- * // Graphics-based (quick prototyping)
- * const bar = new ProgressBar({ width: 300, height: 20, fillColor: 0x22cc22 });
- * bar.progress = 0.5;
- *
- * // Asset-based (production art)
- * const bar = new ProgressBar({
- *   width: 300, height: 20,
- *   trackView: 'bar-track',
- *   fillView: new NineSliceSprite({ texture: 'bar-fill', ... }),
- * });
- * bar.progress = 0.75;
- * ```
- */
-declare class ProgressBar extends Container {
-    readonly __uiComponent: true;
-    private _track;
-    private _fill;
-    private _fillMask;
-    private _borderGfx;
-    private _config;
-    private _progress;
-    private _displayedProgress;
-    constructor(config?: ProgressBarConfig);
-    /** Get/set progress (0..1) */
-    get progress(): number;
-    set progress(value: number);
-    /**
-     * Call each frame if animated is true.
-     */
-    update(_dt: number): void;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    private updateMask;
-}
-
-interface LabelConfig {
-    text?: string;
-    style?: Partial<TextStyle>;
-    /** Maximum width — text will be scaled down to fit */
-    maxWidth?: number;
-    /** Auto-fit: scale text to fit maxWidth */
-    autoFit?: boolean;
-}
-/**
- * Enhanced text label with auto-fit scaling and currency formatting.
- *
- * @example
- * ```ts
- * const label = new Label({
- *   text: 'BALANCE',
- *   style: { fontSize: 24, fill: 0xffd700 },
- *   maxWidth: 200,
- *   autoFit: true,
- * });
- * ```
- */
-declare class Label extends Container {
-    readonly __uiComponent: true;
-    private _text;
-    private _maxWidth;
-    private _autoFit;
-    constructor(config?: LabelConfig);
-    /** Get/set the displayed text */
-    get text(): string;
-    set text(value: string);
-    /** Get/set the text style */
-    get style(): TextStyle;
-    /** Set max width constraint */
-    set maxWidth(value: number);
-    /**
-     * Format and display a number as currency.
-     *
-     * @param amount - The numeric amount
-     * @param currency - Currency code (e.g., 'USD', 'EUR')
-     * @param locale - Locale string (default: 'en-US')
-     */
-    setCurrency(amount: number, currency: string, locale?: string): void;
-    /**
-     * Format a number with thousands separators.
-     */
-    setNumber(value: number, decimals?: number, locale?: string): void;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    private fitText;
-}
-
-interface PanelConfig {
-    /** Width */
-    width?: number;
-    /** Height */
-    height?: number;
-    /** Background color (for Graphics-based panel) */
-    backgroundColor?: number;
-    /** Background alpha */
-    backgroundAlpha?: number;
-    /** Corner radius */
-    borderRadius?: number;
-    /** Border color */
-    borderColor?: number;
-    /** Border width */
-    borderWidth?: number;
-    /** 9-slice texture (if provided, uses NineSliceSprite instead of Graphics) */
-    nineSliceTexture?: string | Texture;
-    /** 9-slice borders [left, top, right, bottom] */
-    nineSliceBorders?: [number, number, number, number];
-    /** Padding inside the panel */
-    padding?: number;
-    /** Flex layout config for content */
-    layout?: Partial<FlexContainerConfig>;
-}
-/**
- * Background panel with optional flexbox content layout.
- *
- * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
- * Children added via `addContent()` participate in flex layout automatically.
- *
- * @example
- * ```ts
- * // Simple colored panel
- * const panel = new Panel({ width: 400, height: 300, backgroundColor: 0x222222, borderRadius: 12 });
- *
- * // 9-slice panel (texture-based)
- * const panel = new Panel({
- *   nineSliceTexture: 'panel-bg',
- *   nineSliceBorders: [20, 20, 20, 20],
- *   width: 400, height: 300,
- * });
- * ```
- */
-declare class Panel extends Container {
-    readonly __uiComponent: true;
-    private _bg;
-    private _content;
-    private _internalSetup;
-    private _panelConfig;
-    constructor(config?: PanelConfig);
-    /** Access the content flex container — add children here for layout */
-    get content(): FlexContainer;
-    /** Suspend content layout recalculation. Call resumeLayout() to flush. */
-    suspendLayout(): void;
-    /** Resume content layout and flush if dirty. */
-    resumeLayout(): void;
-    /** Convenience: add a child to the content layout */
-    addContent(child: Container): this;
-    /** Resize the panel */
-    setSize(width: number, height: number): void;
-    /**
-     * Override addChild so external children are routed to content FlexContainer.
-     * Enables `<panel><label /><button /></panel>` in React JSX.
-     */
-    addChild<T extends Container>(...children: T[]): T;
-    removeChild<T extends Container>(...children: T[]): T;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-interface BalanceDisplayConfig {
-    /** Label prefix (e.g., "BALANCE") */
-    prefix?: string;
-    /** Text style overrides */
-    style?: Record<string, unknown>;
-    /** Currency code */
-    currency?: string;
-    /** Locale for number formatting */
-    locale?: string;
-    /** Max width */
-    maxWidth?: number;
-    /** Animate value changes */
-    animated?: boolean;
-    /** Animation duration in ms */
-    animationDuration?: number;
-}
-/**
- * Reactive balance display component.
- *
- * Automatically formats currency and can animate value changes
- * with a smooth countup/countdown effect using engine Tween.
- *
- * @example
- * ```ts
- * const balance = new BalanceDisplay({ currency: 'USD', animated: true });
- * balance.setValue(1000);
- *
- * // Wire to SDK
- * sdk.on('balanceUpdate', ({ balance: val }) => balance.setValue(val));
- * ```
- */
-declare class BalanceDisplay extends Container {
-    readonly __uiComponent: true;
-    private _prefixLabel;
-    private _valueLabel;
-    private _config;
-    private _currentValue;
-    private _displayedValue;
-    /** Internal target for Tween animation */
-    private _tweenTarget;
-    constructor(config?: BalanceDisplayConfig);
-    /** Current displayed value */
-    get value(): number;
-    /**
-     * Set the balance value. If animated, smoothly counts to the new value.
-     */
-    setValue(value: number): void;
-    /**
-     * Set the currency code.
-     */
-    setCurrency(currency: string): void;
-    private animateValue;
-    private updateDisplay;
-    private layoutLabels;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-interface WinDisplayConfig {
-    /** Text style overrides */
-    style?: Record<string, unknown>;
-    /** Currency code */
-    currency?: string;
-    /** Locale for number formatting */
-    locale?: string;
-    /** Countup duration in ms */
-    countupDuration?: number;
-    /** Scale pop animation on win */
-    popScale?: number;
-}
-/**
- * Win amount display with countup animation.
- *
- * Shows a dramatic countup from 0 to the win amount, with optional
- * scale pop effect — typical of slot games. Uses engine Tween system.
- *
- * @example
- * ```ts
- * const winDisplay = new WinDisplay({ currency: 'USD' });
- * scene.container.addChild(winDisplay);
- * await winDisplay.showWin(150.50); // countup animation
- * winDisplay.hide();
- * ```
- */
-declare class WinDisplay extends Container {
-    readonly __uiComponent: true;
-    private _label;
-    private _config;
-    /** Internal target for Tween countup */
-    private _tweenTarget;
-    constructor(config?: WinDisplayConfig);
-    /**
-     * Show a win with countup animation.
-     *
-     * @param amount - Win amount
-     * @returns Promise that resolves when the animation completes
-     */
-    showWin(amount: number): Promise<void>;
-    /**
-     * Skip the countup animation and show the final amount immediately.
-     */
-    skipCountup(amount: number): void;
-    /**
-     * Hide the win display.
-     */
-    hide(): void;
-    private displayAmount;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-interface ModalConfig {
-    /** Overlay color */
-    overlayColor?: number;
-    /** Overlay alpha */
-    overlayAlpha?: number;
-    /** Close on overlay tap */
-    closeOnOverlay?: boolean;
-    /** Animation duration */
-    animationDuration?: number;
-}
-/**
- * Modal overlay component.
- * Shows content on top of a dark overlay with enter/exit animations.
- *
- * Content is automatically centered via position calculations.
- *
- * @example
- * ```ts
- * const modal = new Modal({ closeOnOverlay: true });
- * modal.content.addChild(settingsPanel);
- * modal.onClose = () => console.log('Closed');
- * await modal.show(1920, 1080);
- * ```
- */
-declare class Modal extends Container {
-    readonly __uiComponent: true;
-    private _overlay;
-    private _contentContainer;
-    private _config;
-    private _showing;
-    private _internalSetup;
-    /** Called when the modal is closed */
-    onClose?: () => void;
-    constructor(config?: ModalConfig);
-    /** Content container — add your UI here */
-    get content(): Container;
-    /**
-     * Override addChild so external children are routed to _contentContainer.
-     * Enables `<modal><flexContainer>...</flexContainer></modal>` in React JSX.
-     */
-    addChild<T extends Container>(...children: T[]): T;
-    removeChild<T extends Container>(...children: T[]): T;
-    /** Whether the modal is currently showing */
-    get isShowing(): boolean;
-    /**
-     * Show the modal with animation.
-     */
-    show(viewWidth: number, viewHeight: number): Promise<void>;
-    /**
-     * Hide the modal with animation.
-     */
-    hide(): Promise<void>;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-}
-
-type ToastType = 'info' | 'success' | 'warning' | 'error';
-interface ToastConfig {
-    /** Auto-dismiss after this many ms (0 = manual dismiss only) */
-    duration?: number;
-    /** Toast position from bottom */
-    bottomOffset?: number;
-    /** Custom background view (string texture name, Texture, or Container). Sized to fit text. */
-    backgroundView?: ViewInput;
-}
-/**
- * Toast notification component for displaying transient messages.
- *
- * @example
- * ```ts
- * const toast = new Toast();
- * scene.container.addChild(toast);
- * await toast.show('Connection lost', 'error', 1920, 1080);
- * ```
- */
-declare class Toast extends Container {
-    readonly __uiComponent: true;
-    private _bg;
-    private _customBg;
-    private _text;
-    private _config;
-    private _dismissPending;
-    constructor(config?: ToastConfig);
-    /**
-     * Show a toast message.
-     */
-    show(message: string, type?: ToastType, viewWidth?: number, viewHeight?: number): Promise<void>;
-    /**
-     * Dismiss the toast.
-     */
-    dismiss(): Promise<void>;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-type LayoutDirection = 'horizontal' | 'vertical' | 'grid' | 'wrap';
-type LayoutAlignment = 'start' | 'center' | 'end' | 'stretch';
-type LayoutAnchor = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-interface LayoutConfig {
-    /** Layout direction (default: 'vertical') */
-    direction?: LayoutDirection;
-    /** Gap between children in pixels (default: 0) */
-    gap?: number;
-    /** Padding inside the layout container [top, right, bottom, left] or a single number */
-    padding?: number | [number, number, number, number];
-    /** Alignment of children on the cross axis (default: 'start') */
-    alignment?: LayoutAlignment;
-    /** Anchor point determining where the layout is positioned relative to its coordinates */
-    anchor?: LayoutAnchor;
-    /** Number of columns (only for 'grid' direction) */
-    columns?: number;
-    /** Maximum width for 'wrap' direction before wrapping to next line */
-    maxWidth?: number;
-    /** Whether to auto-layout when children change (default: true) */
-    autoLayout?: boolean;
-    /** Breakpoints: map of max viewport widths to override configs */
-    breakpoints?: Record<number, Partial<LayoutConfig>>;
-}
-/**
- * Responsive layout container powered by a lightweight built-in flex layout solver.
- *
- * Supports horizontal, vertical, grid, and wrap layout modes with
- * alignment, padding, gap, and viewport-anchor positioning.
- * Breakpoints allow different layouts for different screen sizes.
- *
- * @example
- * ```ts
- * const toolbar = new Layout({
- *   direction: 'horizontal',
- *   gap: 20,
- *   alignment: 'center',
- *   anchor: 'bottom-center',
- *   padding: 16,
- *   breakpoints: {
- *     768: { direction: 'vertical', gap: 10 },
- *   },
- * });
- *
- * toolbar.addItem(spinButton);
- * toolbar.addItem(betLabel);
- * scene.container.addChild(toolbar);
- *
- * toolbar.updateViewport(width, height);
- * ```
- */
-declare class Layout extends Container {
-    readonly __uiComponent: true;
-    private _layoutConfig;
-    private _padding;
-    private _anchor;
-    private _maxWidth;
-    private _breakpoints;
-    private _items;
-    private _viewportWidth;
-    private _viewportHeight;
-    private _flex;
-    constructor(config?: LayoutConfig);
-    /** Add an item to the layout */
-    addItem(child: Container): this;
-    /** Remove an item from the layout */
-    removeItem(child: Container): this;
-    /** Remove all items */
-    clearItems(): this;
-    /** Get all layout items */
-    get items(): readonly Container[];
-    /**
-     * Update the viewport size and recalculate layout.
-     * Should be called from `Scene.onResize()`.
-     */
-    updateViewport(width: number, height: number): void;
-    private applyLayoutStyles;
-    private buildFlexItemConfig;
-    private applyAnchor;
-    private resolveConfig;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-type ScrollDirection = 'vertical' | 'horizontal' | 'both';
-interface ScrollContainerConfig {
-    /** Visible viewport width */
-    width: number;
-    /** Visible viewport height */
-    height: number;
-    /** Scroll direction (default: 'vertical') */
-    direction?: ScrollDirection;
-    /** Background color (undefined = transparent) */
-    backgroundColor?: ColorSource;
-    /** Border radius for the mask (default: 0) */
-    borderRadius?: number;
-    /** Gap between items (default: 0) */
-    elementsMargin?: number;
-    /** Padding */
-    padding?: number;
-    /** Disable easing/inertia */
-    disableEasing?: boolean;
-    /** Show scrollbar indicator (default: false) */
-    scrollbar?: boolean;
-    /** Custom scrollbar thumb view (string texture name, Texture, or Container) */
-    thumbView?: ViewInput;
-    /** Scrollbar width in px (default: 6) */
-    scrollbarWidth?: number;
-    /** Scrollbar padding from edge (default: 4) */
-    scrollbarPadding?: number;
-    /** Scrollbar color (when no thumbView, default: 0xaaaaaa) */
-    scrollbarColor?: number;
-    /** Scrollbar alpha (default: 0.5) */
-    scrollbarAlpha?: number;
-}
-/**
- * Scrollable container with touch/drag, mouse wheel, and inertia.
- *
- * @example
- * ```ts
- * const scroll = new ScrollContainer({
- *   width: 600,
- *   height: 400,
- *   direction: 'vertical',
- *   elementsMargin: 8,
- * });
- *
- * for (let i = 0; i < 50; i++) {
- *   scroll.addItem(createRow(i));
- * }
- *
- * scene.container.addChild(scroll);
- * ```
- */
-declare class ScrollContainer extends Container {
-    readonly __uiComponent: true;
-    private _viewport;
-    private _internalSetup;
-    private _content;
-    private _maskGfx;
-    private _bg;
-    private _scrollConfig;
-    private _items;
-    private _scrollbar;
-    private _scrollbarConfig;
-    private _dragging;
-    private _dragStart;
-    private _contentStart;
-    private _velocity;
-    private _lastDragPos;
-    private _lastDragTime;
-    private _inertiaActive;
-    private _onTickBound;
-    private _onWheelBound;
-    constructor(config: ScrollContainerConfig);
-    /**
-     * Override addChild so external children are routed to scroll content.
-     * Enables `<scrollContainer><label /><panel /></scrollContainer>` in React JSX.
-     */
-    addChild<T extends Container>(...children: T[]): T;
-    removeChild<T extends Container>(...children: T[]): T;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    /** Enable mouse wheel scrolling (call after adding to stage) */
-    enableWheel(canvas: HTMLCanvasElement): void;
-    /** Set scrollable content. Replaces any existing items. */
-    setContent(content: Container): void;
-    /** Add a single item */
-    addItem(child: Container): this;
-    /** Remove all items */
-    clearItems(): void;
-    /** Get items */
-    get items(): readonly Container[];
-    /** Scroll to make a specific item index visible */
-    scrollToItem(index: number): void;
-    /** Current scroll position */
-    get scrollPosition(): {
-        x: number;
-        y: number;
-    };
-    /** Resize the scroll viewport */
-    setViewportSize(width: number, height: number): void;
-    private layoutItems;
-    private _onPointerDown;
-    private _onPointerMove;
-    private _onPointerUp;
-    private startInertia;
-    private stopInertia;
-    private _inertiaTick;
-    private _onWheel;
-    private clampScroll;
-    private updateScrollbar;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
 /**
  * Built-in loading screen.
  *
@@ -2182,5 +1165,5 @@ declare class LoadingScene extends Scene {
     private transitionToGame;
 }
 
-export { AssetManager, AudioManager, BalanceDisplay, Button, Easing, EventEmitter, FPSOverlay, FlexContainer, GameApplication, InputManager, Label, Layout, LoadingScene, Modal, Orientation, Panel, ProgressBar, ScaleMode, Scene, SceneManager, ScrollContainer, SpineHelper, SpriteAnimation, StateMachine, Timeline, Toast, TransitionType, Tween, ViewportManager, WinDisplay };
-export type { AlignItems, AudioConfig, BalanceDisplayConfig, ButtonConfig, ButtonState, EasingFunction, FlexContainerConfig, FlexDirection, FlexItemConfig, GameApplicationConfig, GameEngineEvents, IScene, JustifyContent, LabelConfig, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, ModalConfig, PanelConfig, ProgressBarConfig, SceneConstructor, ScrollContainerConfig, ScrollDirection, SpriteAnimationConfig, ToastConfig, ToastType, TransitionConfig, TweenOptions, WinDisplayConfig };
+export { AssetManager, AudioManager, Easing, EventEmitter, FPSOverlay, GameApplication, InputManager, LoadingScene, Orientation, ScaleMode, Scene, SceneManager, SpineHelper, SpriteAnimation, Timeline, TransitionType, Tween, ViewportManager };
+export type { AudioConfig, EasingFunction, GameApplicationConfig, GameEngineEvents, IScene, SceneConstructor, SpriteAnimationConfig, TransitionConfig, TweenOptions };