@energy8platform/game-engine 0.20.0 → 0.22.0

package/dist/ui.d.ts

@@ -1,1116 +0,0 @@
-import { Texture, Container, TextStyle, ColorSource } from 'pixi.js';
-
-/**
- * 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;
-/**
- * Resolve a ViewInput to a Container instance.
- *
- * @example
- * ```ts
- * resolveView('btn-idle')          // → Sprite.from('btn-idle')
- * resolveView(someTexture)         // → new Sprite(someTexture)
- * resolveView(myCustomContainer)   // → myCustomContainer (as-is)
- * resolveView(undefined)           // → null
- * ```
- */
-declare function resolveView(input: ViewInput | undefined | null): Container | null;
-
-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;
-}
-
-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;
-}
-
-type LabelValueAlign = 'start' | 'center' | 'end';
-interface LabelValueConfig {
-    /** Caption text (top row, typically smaller/muted) */
-    label?: string;
-    /** Value text (bottom row, typically larger/prominent) */
-    value?: string;
-    /** Style for the caption Label */
-    labelStyle?: Partial<TextStyle>;
-    /** Style for the value Label */
-    valueStyle?: Partial<TextStyle>;
-    /** Gap in pixels between caption and value (default: 4) */
-    gap?: number;
-    /** Horizontal alignment of both rows (default: 'center') */
-    align?: LabelValueAlign;
-    /** Maximum width — value will be auto-scaled to fit when exceeded */
-    maxWidth?: number;
-    /** Optional padding (forwarded to the underlying FlexContainer) */
-    padding?: FlexContainerConfig['padding'];
-}
-/**
- * Two-row text cell with a muted caption above and a prominent value below —
- * the archetypal casino UI pattern (BALANCE/€500, BET/€1, WIN/€0.00).
- *
- * Extends FlexContainer, so it participates in parent flex layouts directly
- * (you can pass `flexGrow`, `alignSelf`, etc. when it's a child of another
- * FlexContainer) and auto-sizes to its contents when no explicit size is set.
- *
- * @example
- * ```tsx
- * <labelValue
- *   label="BALANCE"
- *   value={`€${balance.toFixed(2)}`}
- *   labelStyle={{ fontSize: 12, fill: 0x888888 }}
- *   valueStyle={{ fontSize: 22, fill: 0xffffff, fontWeight: 'bold' }}
- *   gap={6}
- *   align="center"
- * />
- * ```
- */
-declare class LabelValue extends FlexContainer {
-    private readonly _labelEl;
-    private readonly _valueEl;
-    private _valueMaxWidth;
-    constructor(config?: LabelValueConfig);
-    /** Get the caption Label (for advanced styling / animation) */
-    get labelElement(): Label;
-    /** Get the value Label */
-    get valueElement(): Label;
-    /** Update caption text */
-    setLabel(text: string): void;
-    /** Update value text */
-    setValue(text: string): void;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-}
-
-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;
-}
-
-interface SliderConfig {
-    /** Minimum value (default: 0) */
-    min?: number;
-    /** Maximum value (default: 1) */
-    max?: number;
-    /** Step increment (0 = continuous, default: 0) */
-    step?: number;
-    /** Initial value (default: min) */
-    value?: number;
-    /** Track width in pixels (default: 200) */
-    width?: number;
-    /** Track height in pixels (default: 8) */
-    height?: number;
-    /** Corner radius for Graphics-based track/fill (default: 4) */
-    borderRadius?: number;
-    /** Track background color (ignored when trackView provided) */
-    trackColor?: number;
-    /** Fill bar color (ignored when fillView provided) */
-    fillColor?: number;
-    /** Handle radius (for Graphics-based handle, default: 12) */
-    handleRadius?: number;
-    /** Handle color (for Graphics-based handle, ignored when handleView provided) */
-    handleColor?: number;
-    /** Custom track background view */
-    trackView?: ViewInput;
-    /** Custom fill bar view */
-    fillView?: ViewInput;
-    /** Custom handle view */
-    handleView?: ViewInput;
-    /** Called when value changes during drag */
-    onUpdate?: (value: number) => void;
-    /** Called when drag ends */
-    onChange?: (value: number) => void;
-}
-/**
- * Draggable slider with customizable track, fill, and handle views.
- *
- * @example
- * ```ts
- * const volume = new Slider({
- *   min: 0, max: 1, value: 0.5,
- *   width: 200, height: 8,
- *   fillColor: 0xffd700,
- *   onUpdate: (v) => console.log('Volume:', v),
- * });
- * ```
- */
-declare class Slider extends Container {
-    readonly __uiComponent: true;
-    private _track;
-    private _fill;
-    private _fillMask;
-    private _handle;
-    private _config;
-    private _value;
-    private _dragging;
-    onUpdate: ((value: number) => void) | null;
-    onChange: ((value: number) => void) | null;
-    constructor(config?: SliderConfig);
-    /** Current value */
-    get value(): number;
-    set value(v: number);
-    get min(): number;
-    get max(): number;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    private _fraction;
-    private _applyStep;
-    private _updateVisuals;
-    private _valueFromPointer;
-    private _onPointerDown;
-    private _onPointerMove;
-    private _onPointerUp;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-interface ToggleConfig {
-    /** Initial state (default: false) */
-    value?: boolean;
-    /** Custom view for the ON state */
-    onView?: ViewInput;
-    /** Custom view for the OFF state */
-    offView?: ViewInput;
-    /** Width (for Graphics-based toggle, default: 52) */
-    width?: number;
-    /** Height (for Graphics-based toggle, default: 28) */
-    height?: number;
-    /** Track color when ON (ignored when custom views provided) */
-    onColor?: number;
-    /** Track color when OFF (ignored when custom views provided) */
-    offColor?: number;
-    /** Handle color (for Graphics-based toggle) */
-    handleColor?: number;
-    /** Handle radius (for Graphics-based toggle, default: auto) */
-    handleRadius?: number;
-    /** Animation duration in ms (default: 200) */
-    animationDuration?: number;
-    /** Called when value changes */
-    onChange?: (value: boolean) => void;
-}
-/**
- * Toggle switch with two states.
- *
- * Supports custom ON/OFF views or auto-generated Graphics-based toggle.
- * Click to toggle, or use `forceSwitch(value)` programmatically.
- *
- * @example
- * ```ts
- * const mute = new Toggle({
- *   value: false,
- *   onColor: 0x22cc22,
- *   onChange: (on) => audioManager.mute(!on),
- * });
- * ```
- */
-declare class Toggle extends Container {
-    readonly __uiComponent: true;
-    private _value;
-    private _onView;
-    private _offView;
-    private _handle;
-    private _trackGfx;
-    private _config;
-    private _useCustomViews;
-    onChange: ((value: boolean) => void) | null;
-    constructor(config?: ToggleConfig);
-    /** Current toggle state */
-    get value(): boolean;
-    set value(v: boolean);
-    /** Programmatically switch to a specific state with animation */
-    forceSwitch(value: boolean): void;
-    /** React reconciler update hook */
-    updateConfig(changed: Record<string, any>): void;
-    private _onTap;
-    private _animateToState;
-    private _drawTrack;
-    destroy(options?: boolean | {
-        children?: boolean;
-        texture?: boolean;
-        textureSource?: boolean;
-    }): void;
-}
-
-export { BalanceDisplay, Button, FlexContainer, Label, LabelValue, Layout, Modal, Panel, ProgressBar, ScrollContainer, Slider, Toast, Toggle, WinDisplay, resolveView };
-export type { AlignContent, AlignItems, AlignSelf, BalanceDisplayConfig, ButtonConfig, ButtonState, FlexContainerConfig, FlexDirection, FlexItemConfig, JustifyContent, LabelConfig, LabelValueAlign, LabelValueConfig, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, ModalConfig, PanelConfig, ProgressBarConfig, ScrollContainerConfig, ScrollDirection, SliderConfig, ToastConfig, ToastType, ToggleConfig, ViewInput, WinDisplayConfig };