@energy8platform/game-engine 0.20.0 → 0.22.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Ticker, Assets, Container, Text, Application, AnimatedSprite, Texture, Sprite, Graphics, NineSliceSprite } from 'pixi.js';
+import { Ticker, Assets, Container, Text, Application, AnimatedSprite, Texture } from 'pixi.js';
 import { createPlatformSession } from '@energy8platform/platform-core';
 import { waitCSSPreloaderTap, removeCSSPreloader, setCSSPreloaderProgress, createCSSPreloader } from '@energy8platform/platform-core/loading';
 export { BridgeDestroyedError, BridgeNotReadyError, SDKError, TimeoutError } from '@energy8platform/game-sdk';
@@ -187,6 +187,10 @@ class Tween {
      * @param onUpdate - Progress callback (0..1)
      */
     static to(target, props, duration, easing, onUpdate) {
+        // A destroyed (Pixi) target has null transform fields — skip rather than throw. This guards
+        // animations whose target is torn down mid-flight (e.g. a reel grid rebuilt during a spin).
+        if (target == null || target.destroyed)
+            return Promise.resolve();
         return new Promise((resolve) => {
             // Capture starting values
             const from = {};
@@ -212,6 +216,8 @@ class Tween {
      * Animate properties from given values to current values.
      */
     static from(target, props, duration, easing, onUpdate) {
+        if (target == null || target.destroyed)
+            return Promise.resolve();
         // Capture current values as "to"
         const to = {};
         for (const key of Object.keys(props)) {
@@ -224,6 +230,8 @@ class Tween {
      * Animate from one set of values to another.
      */
     static fromTo(target, fromProps, toProps, duration, easing, onUpdate) {
+        if (target == null || target.destroyed)
+            return Promise.resolve();
         // Set starting values
         for (const key of Object.keys(fromProps)) {
             Tween.setProperty(target, key, fromProps[key]);
@@ -297,6 +305,11 @@ class Tween {
         const dt = ticker.deltaMS;
         const completed = [];
         for (const tw of Tween._tweens) {
+            // target torn down mid-tween → finish it quietly
+            if (tw.target?.destroyed) {
+                completed.push(tw);
+                continue;
+            }
             tw.elapsed += dt;
             if (tw.elapsed < tw.delay)
                 continue;
@@ -334,9 +347,9 @@ class Tween {
         const parts = key.split('.');
         let obj = target;
         for (let i = 0; i < parts.length - 1; i++) {
-            obj = obj[parts[i]];
+            obj = obj?.[parts[i]];
         }
-        return obj[parts[parts.length - 1]] ?? 0;
+        return obj?.[parts[parts.length - 1]] ?? 0;
     }
     /**
      * Set a potentially nested property.
@@ -345,8 +358,10 @@ class Tween {
         const parts = key.split('.');
         let obj = target;
         for (let i = 0; i < parts.length - 1; i++) {
-            obj = obj[parts[i]];
+            obj = obj?.[parts[i]];
         }
+        if (obj == null)
+            return;
         obj[parts[parts.length - 1]] = value;
     }
 }
@@ -2035,204 +2050,6 @@ class GameApplication extends EventEmitter {
     }
 }
 
-/**
- * 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');
- * ```
- */
-class StateMachine extends EventEmitter {
-    static MAX_TRANSITION_DEPTH = 10;
-    _states = new Map();
-    _guards = new Map();
-    _current = null;
-    _transitionDepth = 0;
-    _context;
-    constructor(context) {
-        super();
-        this._context = context;
-    }
-    /** Current state name */
-    get current() {
-        return this._current;
-    }
-    /** Whether a transition is in progress */
-    get isTransitioning() {
-        return this._transitionDepth > 0;
-    }
-    /** State machine context (shared data) */
-    get context() {
-        return this._context;
-    }
-    /**
-     * Register a state with optional enter/exit/update hooks.
-     */
-    addState(name, config) {
-        this._states.set(name, config);
-        return 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, to, guard) {
-        this._guards.set(`${from}->${to}`, guard);
-        return this;
-    }
-    /**
-     * Start the state machine in the given initial state.
-     */
-    async start(initialState, data) {
-        if (this._current !== null) {
-            throw new Error('[StateMachine] Already started. Use transition() to change states.');
-        }
-        const state = this._states.get(initialState);
-        if (!state) {
-            throw new Error(`[StateMachine] State "${initialState}" not registered.`);
-        }
-        this._current = initialState;
-        await state.enter?.(this._context, data);
-        this.emit('transition', { from: null, to: initialState });
-    }
-    /**
-     * 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
-     */
-    async transition(to, data) {
-        if (this._transitionDepth >= StateMachine.MAX_TRANSITION_DEPTH) {
-            throw new Error('[StateMachine] Max transition depth exceeded — possible infinite loop');
-        }
-        const from = this._current;
-        // Check guard
-        if (from !== null) {
-            const guardKey = `${from}->${to}`;
-            const guard = this._guards.get(guardKey);
-            if (guard && !guard(this._context)) {
-                return false;
-            }
-        }
-        const toState = this._states.get(to);
-        if (!toState) {
-            throw new Error(`[StateMachine] State "${to}" not registered.`);
-        }
-        this._transitionDepth++;
-        try {
-            // Exit current state
-            if (from !== null) {
-                const fromState = this._states.get(from);
-                await fromState?.exit?.(this._context);
-            }
-            // Enter new state
-            this._current = to;
-            await toState.enter?.(this._context, data);
-            this.emit('transition', { from, to });
-        }
-        catch (err) {
-            this.emit('error', err instanceof Error ? err : new Error(String(err)));
-            throw err;
-        }
-        finally {
-            this._transitionDepth--;
-        }
-        return true;
-    }
-    /**
-     * Call the current state's update function.
-     * Should be called from the game loop.
-     */
-    update(dt) {
-        if (this._current === null)
-            return;
-        const state = this._states.get(this._current);
-        state?.update?.(this._context, dt);
-    }
-    /**
-     * Check if a state is registered.
-     */
-    hasState(name) {
-        return this._states.has(name);
-    }
-    /**
-     * Check if a transition is allowed (guard passes).
-     */
-    canTransition(to) {
-        if (this._current === null)
-            return false;
-        const guardKey = `${this._current}->${to}`;
-        const guard = this._guards.get(guardKey);
-        if (!guard)
-            return true;
-        return guard(this._context);
-    }
-    /**
-     * Reset the state machine (exit current state, clear current).
-     */
-    async reset() {
-        if (this._current !== null) {
-            const state = this._states.get(this._current);
-            await state?.exit?.(this._context);
-        }
-        this._current = null;
-        this._transitionDepth = 0;
-    }
-    /**
-     * Destroy the state machine.
-     */
-    async destroy() {
-        await this.reset();
-        this._states.clear();
-        this._guards.clear();
-        this.removeAllListeners();
-    }
-}
-
 /**
  * Sequential/parallel animation timeline built on top of Tween.
  *
@@ -2645,2327 +2462,5 @@ class SpriteAnimation {
     }
 }
 
-// ─── Helpers ─────────────────────────────────────────────
-function normalizePadding(p) {
-    return typeof p === 'number' ? [p, p, p, p] : p;
-}
-/** Resolve padding from config: individual props override the base `padding` value */
-function resolvePadding(config) {
-    const base = normalizePadding(config.padding ?? 0);
-    return [
-        config.paddingTop ?? base[0],
-        config.paddingRight ?? base[1],
-        config.paddingBottom ?? base[2],
-        config.paddingLeft ?? base[3],
-    ];
-}
-/** Resolve a dimension value — number passes through, "50%" resolves against reference */
-function resolveDimension(value, reference) {
-    if (value === undefined)
-        return undefined;
-    if (typeof value === 'number')
-        return value;
-    if (typeof value === 'string' && value.endsWith('%')) {
-        const pct = parseFloat(value);
-        if (!isNaN(pct) && reference > 0 && isFinite(reference))
-            return (pct / 100) * reference;
-    }
-    return undefined;
-}
-/** Measure a child's size and bounds offset for layout purposes */
-function measureChild(child, parentContentW = 0, parentContentH = 0) {
-    const cfg = child._flexConfig;
-    const resolvedLW = resolveDimension(cfg?.layoutWidth, parentContentW);
-    const resolvedLH = resolveDimension(cfg?.layoutHeight, parentContentH);
-    // FlexContainer children are top-left origin by construction, so `ox/oy = 0`
-    // is correct and we can skip the `getLocalBounds()` call entirely.
-    if (child instanceof FlexContainer) {
-        const fc = child;
-        const w = fc._explicitWidth > 0 ? fc._explicitWidth : (fc._computedWidth > 0 ? fc._computedWidth : undefined);
-        const h = fc._explicitHeight > 0 ? fc._explicitHeight : (fc._computedHeight > 0 ? fc._computedHeight : undefined);
-        if (w !== undefined && h !== undefined) {
-            return { w: resolvedLW ?? w, h: resolvedLH ?? h, ox: 0, oy: 0 };
-        }
-    }
-    // Use localBounds to get the true visual origin offset.
-    // We take `ox/oy` from bounds unconditionally — a user-supplied `layoutWidth/Height`
-    // overrides the SIZE used by flex (protection against pre-paint bounds of 0), but
-    // it must NOT erase the center-anchor compensation: Button/Label views are drawn at
-    // `(-w/2..w/2)` and their bounds.x = -w/2 is what lets `layoutLine` place the
-    // visible rectangle where the layout intends.
-    const bounds = child.getLocalBounds();
-    return {
-        w: resolvedLW ?? bounds.width,
-        h: resolvedLH ?? bounds.height,
-        ox: bounds.x,
-        oy: bounds.y,
-    };
-}
-/**
- * Set a child's main or cross dimension.
- * For FlexContainer children, calls resize() to trigger internal relayout
- * instead of the PixiJS scale setter.
- */
-function setChildMainSize(child, isRow, mainSize, item) {
-    if (child instanceof FlexContainer) {
-        const fc = child;
-        fc.resize(isRow ? mainSize : fc._explicitWidth || fc._computedWidth, isRow ? fc._explicitHeight || fc._computedHeight : mainSize);
-    }
-    else {
-        if (isRow) {
-            child.width = mainSize;
-        }
-        else {
-            child.height = mainSize;
-        }
-    }
-    if (isRow)
-        item.w = mainSize;
-    else
-        item.h = mainSize;
-}
-function setChildCrossSize(child, isRow, crossSize) {
-    if (child instanceof FlexContainer) {
-        const fc = child;
-        fc.resize(isRow ? fc._explicitWidth || fc._computedWidth : crossSize, isRow ? crossSize : fc._explicitHeight || fc._computedHeight);
-    }
-    else {
-        if (isRow) {
-            child.height = crossSize;
-        }
-        else {
-            child.width = crossSize;
-        }
-    }
-}
-function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, crossSize) {
-    if (items.length === 0)
-        return;
-    // Compute total fixed main size and flex grow total
-    let totalFixed = 0;
-    let totalGrow = 0;
-    for (const item of items) {
-        const grow = item.child._flexConfig?.flexGrow ?? 0;
-        if (grow > 0) {
-            totalGrow += grow;
-        }
-        else {
-            totalFixed += isRow ? item.w : item.h;
-        }
-    }
-    const totalGap = gap * (items.length - 1);
-    const availableForFlex = Math.max(0, mainSize - totalFixed - totalGap);
-    // Resolve flex sizes
-    if (totalGrow > 0) {
-        for (const item of items) {
-            const grow = item.child._flexConfig?.flexGrow ?? 0;
-            if (grow > 0) {
-                const flexSize = (grow / totalGrow) * availableForFlex;
-                setChildMainSize(item.child, isRow, flexSize, item);
-            }
-        }
-    }
-    // Shrink: if content overflows and mainSize is finite, shrink eligible items
-    if (totalGrow === 0 && mainSize > 0) {
-        const overflow = totalFixed + totalGap - mainSize;
-        if (overflow > 0) {
-            let totalShrinkable = 0;
-            for (const item of items) {
-                const shrink = item.child._flexConfig?.flexShrink ?? 1;
-                if (shrink > 0) {
-                    totalShrinkable += isRow ? item.w : item.h;
-                }
-            }
-            if (totalShrinkable > 0) {
-                for (const item of items) {
-                    const shrink = item.child._flexConfig?.flexShrink ?? 1;
-                    if (shrink > 0) {
-                        const itemMain = isRow ? item.w : item.h;
-                        const reduction = overflow * (itemMain / totalShrinkable);
-                        const newSize = Math.max(0, itemMain - reduction);
-                        setChildMainSize(item.child, isRow, newSize, item);
-                    }
-                }
-            }
-        }
-    }
-    // Calculate total main size after flex
-    let totalMain = totalGap;
-    for (const item of items) {
-        totalMain += isRow ? item.w : item.h;
-    }
-    // Justify: compute starting offset and extra spacing
-    let mainOffset = 0;
-    let extraGap = 0;
-    switch (justify) {
-        case 'start':
-            break;
-        case 'center':
-            mainOffset = Math.max(0, (mainSize - totalMain) / 2);
-            break;
-        case 'end':
-            mainOffset = Math.max(0, mainSize - totalMain);
-            break;
-        case 'space-between':
-            if (items.length > 1) {
-                extraGap = Math.max(0, (mainSize - totalMain + totalGap) / (items.length - 1)) - gap;
-            }
-            break;
-        case 'space-around':
-            if (items.length > 0) {
-                const totalSpace = Math.max(0, mainSize - totalMain + totalGap);
-                const segment = totalSpace / items.length;
-                mainOffset = segment / 2;
-                extraGap = segment - gap;
-            }
-            break;
-    }
-    // Position each item
-    let pos = mainOffset;
-    for (const item of items) {
-        const mainDim = isRow ? item.w : item.h;
-        const crossDim = isRow ? item.h : item.w;
-        // Cross-axis alignment (alignSelf overrides align)
-        const effectiveAlign = (item.child._flexConfig?.alignSelf && item.child._flexConfig.alignSelf !== 'auto')
-            ? item.child._flexConfig.alignSelf
-            : align;
-        let crossPos = crossOffset;
-        switch (effectiveAlign) {
-            case 'start':
-                break;
-            case 'center':
-                crossPos += (crossSize - crossDim) / 2;
-                break;
-            case 'end':
-                crossPos += crossSize - crossDim;
-                break;
-            case 'stretch':
-                setChildCrossSize(item.child, isRow, crossSize);
-                break;
-        }
-        // Compensate for local bounds offset (e.g. centered anchors)
-        if (isRow) {
-            item.child.x = pos - item.ox;
-            item.child.y = crossPos - item.oy;
-        }
-        else {
-            item.child.x = crossPos - item.ox;
-            item.child.y = pos - item.oy;
-        }
-        pos += mainDim + gap + extraGap;
-    }
-}
-// ─── FlexContainer ───────────────────────────────────────
-/**
- * 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);
- * ```
- */
-class FlexContainer extends Container {
-    __uiComponent = true;
-    _config;
-    _padding;
-    _maxWidth;
-    _maxHeight;
-    /** @internal */ _explicitWidth;
-    /** @internal */ _explicitHeight;
-    /** @internal */ _computedWidth = 0;
-    /** @internal */ _computedHeight = 0;
-    /** @internal */ _availableWidth = 0;
-    /** @internal */ _availableHeight = 0;
-    /** @internal */ _rawWidth;
-    /** @internal */ _rawHeight;
-    _layoutChildren = [];
-    _layoutDirty = true;
-    _layoutSuspended = false;
-    constructor(config = {}) {
-        super();
-        this._config = {
-            direction: config.direction ?? 'row',
-            justifyContent: config.justifyContent ?? 'start',
-            alignItems: config.alignItems ?? 'start',
-            gap: config.gap ?? 0,
-            flexWrap: config.flexWrap ?? false,
-            alignContent: config.alignContent ?? 'start',
-        };
-        this._padding = resolvePadding(config);
-        this._maxWidth = config.maxWidth ?? Infinity;
-        this._maxHeight = config.maxHeight ?? Infinity;
-        this._rawWidth = config.width ?? 0;
-        this._rawHeight = config.height ?? 0;
-        this._explicitWidth = typeof this._rawWidth === 'number' ? this._rawWidth : 0;
-        this._explicitHeight = typeof this._rawHeight === 'number' ? this._rawHeight : 0;
-    }
-    // ─── Public API ──────────────────────────────────────
-    /** Add a child with optional flex config. Also registers in flex layout. */
-    addFlexChild(child, flexConfig) {
-        if (flexConfig)
-            child._flexConfig = flexConfig;
-        if (!this._layoutChildren.includes(child)) {
-            this._layoutChildren.push(child);
-            this._layoutDirty = true;
-        }
-        super.addChild(child);
-        return this;
-    }
-    /** Remove a child from flex layout and display list */
-    removeFlexChild(child) {
-        const idx = this._layoutChildren.indexOf(child);
-        if (idx !== -1) {
-            this._layoutChildren.splice(idx, 1);
-            this._layoutDirty = true;
-        }
-        super.removeChild(child);
-        return this;
-    }
-    /** Remove all flex children */
-    clearFlexChildren() {
-        for (const child of this._layoutChildren) {
-            super.removeChild(child);
-        }
-        this._layoutChildren.length = 0;
-        this._layoutDirty = true;
-        return this;
-    }
-    /**
-     * Override addChild so children automatically participate in flex layout.
-     * This enables declarative usage from React JSX.
-     */
-    addChild(...children) {
-        for (const child of children) {
-            if (!this._layoutChildren.includes(child)) {
-                this._layoutChildren.push(child);
-                this._layoutDirty = true;
-            }
-        }
-        const result = super.addChild(...children);
-        if (this._layoutDirty && !this._layoutSuspended)
-            this.updateLayout();
-        return result;
-    }
-    addChildAt(child, index) {
-        if (!this._layoutChildren.includes(child)) {
-            // Insert into layout children at matching position
-            const layoutIndex = Math.min(index, this._layoutChildren.length);
-            this._layoutChildren.splice(layoutIndex, 0, child);
-            this._layoutDirty = true;
-        }
-        const result = super.addChildAt(child, index);
-        if (this._layoutDirty && !this._layoutSuspended)
-            this.updateLayout();
-        return result;
-    }
-    removeChild(...children) {
-        for (const child of children) {
-            const idx = this._layoutChildren.indexOf(child);
-            if (idx !== -1) {
-                this._layoutChildren.splice(idx, 1);
-                this._layoutDirty = true;
-            }
-        }
-        return super.removeChild(...children);
-    }
-    /** Get all flex layout children (read-only) */
-    get flexChildren() {
-        return this._layoutChildren;
-    }
-    /** Suspend automatic layout recalculation. Call resumeLayout() to flush. */
-    suspendLayout() {
-        this._layoutSuspended = true;
-    }
-    /** Resume automatic layout and flush if dirty. */
-    resumeLayout() {
-        this._layoutSuspended = false;
-        if (this._layoutDirty)
-            this.updateLayout();
-    }
-    /** Update the container size and recalculate layout */
-    resize(width, height) {
-        this._explicitWidth = width;
-        this._explicitHeight = height;
-        this._layoutDirty = true;
-        if (!this._layoutSuspended)
-            this.updateLayout();
-    }
-    /** Update layout direction */
-    setDirection(direction) {
-        this._config.direction = direction;
-        this._layoutDirty = true;
-    }
-    /** Update justifyContent */
-    setJustifyContent(justify) {
-        this._config.justifyContent = justify;
-        this._layoutDirty = true;
-    }
-    /** Update alignItems */
-    setAlignItems(align) {
-        this._config.alignItems = align;
-        this._layoutDirty = true;
-    }
-    /** Update gap */
-    setGap(gap) {
-        this._config.gap = gap;
-        this._layoutDirty = true;
-    }
-    /** Update padding */
-    setPadding(padding) {
-        this._padding = normalizePadding(padding);
-        this._layoutDirty = true;
-    }
-    /**
-     * Recalculate and apply layout positions for all children.
-     * Called automatically by `resize()`. Call manually after
-     * adding/removing children without resize.
-     */
-    updateLayout() {
-        if (this._layoutSuspended) {
-            this._layoutDirty = true;
-            return;
-        }
-        this._layoutDirty = false;
-        const { direction, justifyContent, alignItems, gap, flexWrap, alignContent } = this._config;
-        const [pt, pr, pb, pl] = this._padding;
-        const isRow = direction === 'row';
-        // Resolve percentage width/height against parent's available space
-        if (typeof this._rawWidth === 'string') {
-            this._explicitWidth = resolveDimension(this._rawWidth, this._availableWidth) ?? 0;
-        }
-        if (typeof this._rawHeight === 'string') {
-            this._explicitHeight = resolveDimension(this._rawHeight, this._availableHeight) ?? 0;
-        }
-        const contentW = this._explicitWidth > 0 ? this._explicitWidth - pl - pr : Infinity;
-        const contentH = this._explicitHeight > 0 ? this._explicitHeight - pt - pb : Infinity;
-        const mainLimit = isRow ? contentW : contentH;
-        const crossLimit = isRow ? contentH : contentW;
-        // Pass content area to measureChild for percentage resolution
-        const pctRefW = contentW < Infinity ? contentW : 0;
-        const pctRefH = contentH < Infinity ? contentH : 0;
-        // Propagate available size to child FlexContainers and resolve their percentages
-        for (const child of this._layoutChildren) {
-            if (child instanceof FlexContainer) {
-                const fc = child;
-                fc._availableWidth = pctRefW;
-                fc._availableHeight = pctRefH;
-                // If child has percentage dimensions, trigger its layout to resolve them
-                if (typeof fc._rawWidth === 'string' || typeof fc._rawHeight === 'string') {
-                    fc.updateLayout();
-                }
-            }
-        }
-        // Measure children (skip flexExclude — they position themselves)
-        const measured = [];
-        for (const child of this._layoutChildren) {
-            if (child._flexConfig?.flexExclude)
-                continue;
-            const { w, h, ox, oy } = measureChild(child, pctRefW, pctRefH);
-            measured.push({ child, w, h, ox, oy });
-        }
-        // Split into lines (if wrapping)
-        const lines = [];
-        if (flexWrap && mainLimit < Infinity) {
-            let currentLine = [];
-            let lineMain = 0;
-            for (const item of measured) {
-                const itemMain = isRow ? item.w : item.h;
-                const wouldBe = lineMain + (currentLine.length > 0 ? gap : 0) + itemMain;
-                if (currentLine.length > 0 && wouldBe > mainLimit) {
-                    lines.push(currentLine);
-                    currentLine = [item];
-                    lineMain = itemMain;
-                }
-                else {
-                    currentLine.push(item);
-                    lineMain = wouldBe;
-                }
-            }
-            if (currentLine.length > 0)
-                lines.push(currentLine);
-        }
-        else {
-            lines.push(measured);
-        }
-        // Compute cross size per line
-        const lineCrossSizes = lines.map((line) => {
-            let maxCross = 0;
-            for (const item of line) {
-                const cross = isRow ? item.h : item.w;
-                if (cross > maxCross)
-                    maxCross = cross;
-            }
-            return maxCross;
-        });
-        // Compute natural main size (for auto-sizing when no explicit size given)
-        let naturalMainSize = 0;
-        if (mainLimit === Infinity) {
-            for (const line of lines) {
-                let lineMain = 0;
-                for (const item of line) {
-                    lineMain += isRow ? item.w : item.h;
-                }
-                lineMain += gap * Math.max(0, line.length - 1);
-                naturalMainSize = Math.max(naturalMainSize, lineMain);
-            }
-        }
-        // Effective main size: explicit if set, otherwise natural content size
-        const effectiveMainSize = mainLimit < Infinity ? mainLimit : naturalMainSize;
-        // Compute alignContent offsets for multi-line layouts
-        const totalLinesCross = lineCrossSizes.reduce((s, v) => s + v, 0) + gap * Math.max(0, lines.length - 1);
-        let acOffset = 0;
-        let acExtraGap = 0;
-        if (lines.length > 1 && crossLimit < Infinity) {
-            const freeSpace = Math.max(0, crossLimit - totalLinesCross);
-            switch (alignContent) {
-                case 'center':
-                    acOffset = freeSpace / 2;
-                    break;
-                case 'end':
-                    acOffset = freeSpace;
-                    break;
-                case 'space-between':
-                    if (lines.length > 1) {
-                        acExtraGap = freeSpace / (lines.length - 1);
-                    }
-                    break;
-                case 'stretch':
-                    if (lines.length > 0) {
-                        const extra = freeSpace / lines.length;
-                        for (let i = 0; i < lineCrossSizes.length; i++) {
-                            lineCrossSizes[i] += extra;
-                        }
-                    }
-                    break;
-                // 'start' — no adjustment
-            }
-        }
-        // Layout each line
-        let crossOffset = (isRow ? pt : pl) + acOffset;
-        for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-            const lineCross = lineCrossSizes[i];
-            const mainStart = isRow ? pl : pt;
-            // Offset items by padding
-            const tempItems = line.map((item) => ({ ...item }));
-            // Cross size for alignment: use container cross size for single-line, line cross for multi-line
-            const effectiveCross = lines.length === 1 && crossLimit < Infinity ? crossLimit : lineCross;
-            layoutLine(tempItems, isRow, effectiveMainSize, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, effectiveCross);
-            // Apply main-axis padding offset
-            for (const item of tempItems) {
-                const origChild = line.find((l) => l.child === item.child);
-                origChild.child.x = item.child.x + (isRow ? mainStart : 0);
-                origChild.child.y = item.child.y + (isRow ? 0 : mainStart);
-            }
-            crossOffset += lineCross + gap + acExtraGap;
-        }
-        // Compute and store actual dimensions for measureChild() and getContentSize()
-        let totalCrossNatural = 0;
-        for (let i = 0; i < lineCrossSizes.length; i++) {
-            totalCrossNatural += lineCrossSizes[i];
-            if (i < lineCrossSizes.length - 1)
-                totalCrossNatural += gap;
-        }
-        if (isRow) {
-            this._computedWidth = this._explicitWidth > 0 ? this._explicitWidth : (pl + naturalMainSize + pr);
-            this._computedHeight = this._explicitHeight > 0 ? this._explicitHeight : (pt + totalCrossNatural + pb);
-        }
-        else {
-            this._computedWidth = this._explicitWidth > 0 ? this._explicitWidth : (pl + totalCrossNatural + pr);
-            this._computedHeight = this._explicitHeight > 0 ? this._explicitHeight : (pt + naturalMainSize + pb);
-        }
-        // Position flexExclude children (absolute positioning).
-        // All position props describe the visual (bounds) rectangle. We derive the
-        // visual rectangle directly from `getLocalBounds()` rather than the
-        // layout-config `w`/`h` returned by measureChild — those may differ from
-        // actual bounds when the user pins `layoutWidth`/`layoutHeight` to a value
-        // that doesn't match the child's real visual extent (e.g. a Button whose
-        // text overflows its configured `width`). Mixing layout size with real
-        // bounds-origin would shift the visual center off the requested point.
-        // `centerX/centerY` take precedence over `left/right` / `top/bottom` on each axis.
-        for (const child of this._layoutChildren) {
-            if (!child._flexConfig?.flexExclude)
-                continue;
-            const cfg = child._flexConfig;
-            const bounds = child.getLocalBounds();
-            const cw = this._computedWidth;
-            const ch = this._computedHeight;
-            const centerX = resolveDimension(cfg.centerX, pctRefW);
-            if (centerX !== undefined)
-                child.x = centerX - bounds.x - bounds.width / 2;
-            else if (cfg.left !== undefined)
-                child.x = cfg.left - bounds.x;
-            else if (cfg.right !== undefined)
-                child.x = cw - cfg.right - bounds.x - bounds.width;
-            const centerY = resolveDimension(cfg.centerY, pctRefH);
-            if (centerY !== undefined)
-                child.y = centerY - bounds.y - bounds.height / 2;
-            else if (cfg.top !== undefined)
-                child.y = cfg.top - bounds.y;
-            else if (cfg.bottom !== undefined)
-                child.y = ch - cfg.bottom - bounds.y - bounds.height;
-        }
-    }
-    /** Computed content size (after layout) */
-    getContentSize() {
-        if (this._layoutDirty)
-            this.updateLayout();
-        return { width: this._computedWidth, height: this._computedHeight };
-    }
-    /** React reconciler update hook — applies changed config props */
-    updateConfig(changed) {
-        if ('direction' in changed)
-            this.setDirection(changed.direction);
-        if ('justifyContent' in changed)
-            this.setJustifyContent(changed.justifyContent);
-        if ('alignItems' in changed)
-            this.setAlignItems(changed.alignItems);
-        if ('gap' in changed)
-            this.setGap(changed.gap);
-        if ('padding' in changed || 'paddingTop' in changed || 'paddingRight' in changed || 'paddingBottom' in changed || 'paddingLeft' in changed) {
-            this._padding = resolvePadding(changed);
-            this._layoutDirty = true;
-        }
-        if ('flexWrap' in changed) {
-            this._config.flexWrap = changed.flexWrap;
-            this._layoutDirty = true;
-        }
-        if ('alignContent' in changed) {
-            this._config.alignContent = changed.alignContent;
-            this._layoutDirty = true;
-        }
-        if ('width' in changed || 'height' in changed) {
-            const w = changed.width ?? this._rawWidth;
-            const h = changed.height ?? this._rawHeight;
-            this._rawWidth = w;
-            this._rawHeight = h;
-            if (typeof w === 'number' && typeof h === 'number') {
-                this.resize(w, h);
-            }
-            else {
-                // Percentage — will resolve in updateLayout
-                this._explicitWidth = typeof w === 'number' ? w : 0;
-                this._explicitHeight = typeof h === 'number' ? h : 0;
-                this._layoutDirty = true;
-                if (!this._layoutSuspended)
-                    this.updateLayout();
-            }
-            return;
-        }
-        if (this._layoutDirty && !this._layoutSuspended)
-            this.updateLayout();
-    }
-    destroy(options) {
-        this._layoutChildren.length = 0;
-        super.destroy(options);
-    }
-}
-
-/**
- * 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
- * ```
- */
-function resolveView(input) {
-    if (input == null)
-        return null;
-    if (typeof input === 'string')
-        return Sprite.from(input);
-    if (input instanceof Texture)
-        return new Sprite(input);
-    return input;
-}
-
-const DEFAULT_COLORS = {
-    default: 0xffd700,
-    hover: 0xffe44d,
-    pressed: 0xccac00,
-    disabled: 0x666666,
-};
-function makeGraphicsView(w, h, radius, color) {
-    const g = new Graphics();
-    g.roundRect(-w / 2, -h / 2, w, h, radius).fill(color);
-    return g;
-}
-/**
- * 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',
- * });
- * ```
- */
-class Button extends Container {
-    __uiComponent = true;
-    _views = new Map();
-    _state = 'default';
-    _enabled = true;
-    _config;
-    _textObj = null;
-    /** Press callback */
-    onPress;
-    constructor(config = {}) {
-        super();
-        this._config = {
-            width: config.width ?? 200,
-            height: config.height ?? 60,
-            borderRadius: config.borderRadius ?? 8,
-            pressScale: config.pressScale ?? 0.95,
-            animationDuration: config.animationDuration ?? 100,
-            ...config,
-        };
-        this.onPress = config.onPress;
-        this._buildViews(config);
-        // Text
-        if (config.text) {
-            this._textObj = new Text({
-                text: config.text,
-                style: {
-                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                    fontSize: 20,
-                    fill: 0xffffff,
-                    fontWeight: 'bold',
-                    ...config.textStyle,
-                },
-            });
-            this._textObj.anchor.set(0.5);
-            this.addChild(this._textObj);
-        }
-        // Interaction
-        this.eventMode = 'static';
-        this.cursor = 'pointer';
-        this.on('pointerover', this._onPointerOver, this);
-        this.on('pointerout', this._onPointerOut, this);
-        this.on('pointerdown', this._onPointerDown, this);
-        this.on('pointerup', this._onPointerUp, this);
-        this.on('pointerupoutside', this._onPointerUpOutside, this);
-        if (config.disabled) {
-            this.enabled = false;
-        }
-    }
-    /** Current button state */
-    get state() {
-        return this._state;
-    }
-    /** Enable the button */
-    enable() {
-        this.enabled = true;
-    }
-    /** Disable the button */
-    disable() {
-        this.enabled = false;
-    }
-    /** Whether the button is enabled */
-    get enabled() {
-        return this._enabled;
-    }
-    set enabled(value) {
-        this._enabled = value;
-        this.cursor = value ? 'pointer' : 'default';
-        this.eventMode = value ? 'static' : 'none';
-        this._setState(value ? 'default' : 'disabled');
-    }
-    /** Whether the button is disabled */
-    get disabled() {
-        return !this._enabled;
-    }
-    /** Update button text */
-    set text(value) {
-        if (this._textObj) {
-            this._textObj.text = value;
-        }
-    }
-    // ─── View building ──────────────────────────────────
-    _buildViews(config) {
-        const colorMap = { ...DEFAULT_COLORS, ...config.colors };
-        const { width, height, borderRadius } = this._config;
-        const stateViews = {
-            default: config.defaultView,
-            hover: config.hoverView,
-            pressed: config.pressedView,
-            disabled: config.disabledView,
-        };
-        const states = ['default', 'hover', 'pressed', 'disabled'];
-        for (const state of states) {
-            const customView = resolveView(stateViews[state]);
-            const view = customView ?? makeGraphicsView(width, height, borderRadius, colorMap[state]);
-            view.visible = state === 'default';
-            this._views.set(state, view);
-            this.addChild(view);
-        }
-    }
-    _rebuildViews() {
-        for (const [, view] of this._views) {
-            this.removeChild(view);
-            view.destroy();
-        }
-        this._views.clear();
-        this._buildViews(this._config);
-        // Re-insert views before text
-        if (this._textObj && this._textObj.parent === this) {
-            this.setChildIndex(this._textObj, this.children.length - 1);
-        }
-    }
-    // ─── State management ───────────────────────────────
-    _setState(state) {
-        if (this._state === state)
-            return;
-        this._state = state;
-        for (const [s, view] of this._views) {
-            view.visible = s === state;
-        }
-    }
-    _onPointerOver() {
-        if (!this._enabled)
-            return;
-        this._setState('hover');
-        Tween.killTweensOf(this);
-        Tween.to(this, { 'scale.x': 1.03, 'scale.y': 1.03 }, this._config.animationDuration, Easing.easeOutQuad);
-    }
-    _onPointerOut() {
-        if (!this._enabled)
-            return;
-        this._setState('default');
-        Tween.killTweensOf(this);
-        Tween.to(this, { 'scale.x': 1, 'scale.y': 1 }, this._config.animationDuration, Easing.easeOutQuad);
-    }
-    _onPointerDown() {
-        if (!this._enabled)
-            return;
-        this._setState('pressed');
-        Tween.killTweensOf(this);
-        const s = this._config.pressScale;
-        Tween.to(this, { 'scale.x': s, 'scale.y': s }, this._config.animationDuration, Easing.easeOutQuad);
-    }
-    _onPointerUp() {
-        if (!this._enabled)
-            return;
-        this._setState('hover');
-        Tween.killTweensOf(this);
-        Tween.to(this, { 'scale.x': 1.03, 'scale.y': 1.03 }, this._config.animationDuration, Easing.easeOutQuad);
-        this.onPress?.();
-    }
-    _onPointerUpOutside() {
-        if (!this._enabled)
-            return;
-        this._setState('default');
-        Tween.killTweensOf(this);
-        Tween.to(this, { 'scale.x': 1, 'scale.y': 1 }, this._config.animationDuration, Easing.easeOutQuad);
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('text' in changed && this._textObj)
-            this._textObj.text = changed.text;
-        if ('disabled' in changed)
-            this.enabled = !changed.disabled;
-        if ('onPress' in changed)
-            this.onPress = changed.onPress;
-        const structural = [
-            'colors', 'width', 'height', 'borderRadius', 'textStyle',
-            'defaultView', 'hoverView', 'pressedView', 'disabledView',
-        ];
-        const needsRebuild = structural.some((k) => k in changed);
-        if (needsRebuild) {
-            Object.assign(this._config, changed);
-            this._rebuildViews();
-        }
-    }
-    destroy(options) {
-        Tween.killTweensOf(this);
-        this.off('pointerover', this._onPointerOver, this);
-        this.off('pointerout', this._onPointerOut, this);
-        this.off('pointerdown', this._onPointerDown, this);
-        this.off('pointerup', this._onPointerUp, this);
-        this.off('pointerupoutside', this._onPointerUpOutside, this);
-        this._views.clear();
-        this._textObj = null;
-        super.destroy(options);
-    }
-}
-
-/**
- * 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;
- * ```
- */
-class ProgressBar extends Container {
-    __uiComponent = true;
-    _track;
-    _fill;
-    _fillMask;
-    _borderGfx;
-    _config;
-    _progress = 0;
-    _displayedProgress = 0;
-    constructor(config = {}) {
-        super();
-        this._config = {
-            width: config.width ?? 300,
-            height: config.height ?? 16,
-            borderRadius: config.borderRadius ?? 8,
-            fillColor: config.fillColor ?? 0xffd700,
-            trackColor: config.trackColor ?? 0x333333,
-            borderColor: config.borderColor ?? 0x555555,
-            borderWidth: config.borderWidth ?? 1,
-            animated: config.animated ?? true,
-            animationSpeed: config.animationSpeed ?? 0.1,
-        };
-        const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
-        // Track background — custom view or Graphics
-        const customTrack = resolveView(config.trackView);
-        if (customTrack) {
-            customTrack.width = width;
-            customTrack.height = height;
-            this._track = customTrack;
-        }
-        else {
-            const g = new Graphics();
-            g.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
-            this._track = g;
-        }
-        this.addChild(this._track);
-        // Fill bar — custom view or Graphics
-        const customFill = resolveView(config.fillView);
-        if (customFill) {
-            customFill.x = borderWidth;
-            customFill.y = borderWidth;
-            customFill.width = width - borderWidth * 2;
-            customFill.height = height - borderWidth * 2;
-            this._fill = customFill;
-        }
-        else {
-            const g = new Graphics();
-            g.roundRect(borderWidth, borderWidth, width - borderWidth * 2, height - borderWidth * 2, Math.max(0, borderRadius - 1)).fill(fillColor);
-            this._fill = g;
-        }
-        this.addChild(this._fill);
-        // Mask for the fill (controls visible width)
-        this._fillMask = new Graphics();
-        this._fillMask.rect(0, 0, 0, height).fill(0xffffff);
-        this.addChild(this._fillMask);
-        this._fill.mask = this._fillMask;
-        // Border overlay
-        this._borderGfx = new Graphics();
-        if (borderColor !== undefined && borderWidth > 0) {
-            this._borderGfx
-                .roundRect(0, 0, width, height, borderRadius)
-                .stroke({ color: borderColor, width: borderWidth });
-        }
-        this.addChild(this._borderGfx);
-    }
-    /** Get/set progress (0..1) */
-    get progress() {
-        return this._progress;
-    }
-    set progress(value) {
-        this._progress = Math.max(0, Math.min(1, value));
-        if (!this._config.animated) {
-            this._displayedProgress = this._progress;
-            this.updateMask();
-        }
-    }
-    /**
-     * Call each frame if animated is true.
-     */
-    update(_dt) {
-        if (!this._config.animated)
-            return;
-        if (Math.abs(this._displayedProgress - this._progress) < 0.001) {
-            this._displayedProgress = this._progress;
-            this.updateMask();
-            return;
-        }
-        this._displayedProgress +=
-            (this._progress - this._displayedProgress) * this._config.animationSpeed;
-        this.updateMask();
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('progress' in changed)
-            this.progress = changed.progress;
-        if ('animated' in changed)
-            this._config.animated = changed.animated;
-        if ('animationSpeed' in changed)
-            this._config.animationSpeed = changed.animationSpeed;
-    }
-    updateMask() {
-        const w = this._config.width * this._displayedProgress;
-        this._fillMask.clear();
-        this._fillMask.rect(0, 0, w, this._config.height).fill(0xffffff);
-    }
-}
-
-/**
- * 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,
- * });
- * ```
- */
-class Label extends Container {
-    __uiComponent = true;
-    _text;
-    _maxWidth;
-    _autoFit;
-    constructor(config = {}) {
-        super();
-        this._maxWidth = config.maxWidth ?? Infinity;
-        this._autoFit = config.autoFit ?? false;
-        this._text = new Text({
-            text: config.text ?? '',
-            style: {
-                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                fontSize: 24,
-                fill: 0xffffff,
-                ...config.style,
-            },
-        });
-        this._text.anchor.set(0.5);
-        this.addChild(this._text);
-        this.fitText();
-    }
-    /** Get/set the displayed text */
-    get text() {
-        return this._text.text;
-    }
-    set text(value) {
-        this._text.text = value;
-        this.fitText();
-    }
-    /** Get/set the text style */
-    get style() {
-        return this._text.style;
-    }
-    /** Set max width constraint */
-    set maxWidth(value) {
-        this._maxWidth = value;
-        this.fitText();
-    }
-    /**
-     * 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, currency, locale = 'en-US') {
-        try {
-            this.text = new Intl.NumberFormat(locale, {
-                style: 'currency',
-                currency,
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-            }).format(amount);
-        }
-        catch {
-            this.text = `${amount.toFixed(2)} ${currency}`;
-        }
-    }
-    /**
-     * Format a number with thousands separators.
-     */
-    setNumber(value, decimals = 0, locale = 'en-US') {
-        this.text = new Intl.NumberFormat(locale, {
-            minimumFractionDigits: decimals,
-            maximumFractionDigits: decimals,
-        }).format(value);
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('text' in changed)
-            this.text = changed.text;
-        if ('maxWidth' in changed)
-            this.maxWidth = changed.maxWidth;
-        if ('autoFit' in changed) {
-            this._autoFit = changed.autoFit;
-            this.fitText();
-        }
-        if ('style' in changed && typeof changed.style === 'object') {
-            Object.assign(this._text.style, changed.style);
-            this.fitText();
-        }
-    }
-    fitText() {
-        if (!this._autoFit || this._maxWidth === Infinity)
-            return;
-        this._text.scale.set(1);
-        if (this._text.width > this._maxWidth) {
-            const scale = this._maxWidth / this._text.width;
-            this._text.scale.set(scale);
-        }
-    }
-}
-
-/**
- * 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,
- * });
- * ```
- */
-class Panel extends Container {
-    __uiComponent = true;
-    _bg;
-    _content;
-    _internalSetup = true;
-    _panelConfig;
-    constructor(config = {}) {
-        super();
-        const resolvedConfig = {
-            width: config.width ?? 400,
-            height: config.height ?? 300,
-            padding: config.padding ?? 16,
-            backgroundAlpha: config.backgroundAlpha ?? 1,
-            ...config,
-        };
-        this._panelConfig = resolvedConfig;
-        // Create background
-        if (config.nineSliceTexture) {
-            const texture = typeof config.nineSliceTexture === 'string'
-                ? Texture.from(config.nineSliceTexture)
-                : config.nineSliceTexture;
-            const [left, top, right, bottom] = config.nineSliceBorders ?? [10, 10, 10, 10];
-            const nineSlice = new NineSliceSprite({
-                texture,
-                leftWidth: left,
-                topHeight: top,
-                rightWidth: right,
-                bottomHeight: bottom,
-            });
-            nineSlice.width = resolvedConfig.width;
-            nineSlice.height = resolvedConfig.height;
-            nineSlice.alpha = resolvedConfig.backgroundAlpha;
-            this._bg = nineSlice;
-        }
-        else {
-            const g = new Graphics();
-            const bgColor = config.backgroundColor ?? 0x1a1a2e;
-            const radius = config.borderRadius ?? 0;
-            g.roundRect(0, 0, resolvedConfig.width, resolvedConfig.height, radius).fill(bgColor);
-            if (config.borderColor !== undefined && config.borderWidth) {
-                g.roundRect(0, 0, resolvedConfig.width, resolvedConfig.height, radius)
-                    .stroke({ color: config.borderColor, width: config.borderWidth });
-            }
-            g.alpha = resolvedConfig.backgroundAlpha;
-            this._bg = g;
-        }
-        this.addChild(this._bg);
-        // Create content flex container
-        this._content = new FlexContainer({
-            ...config.layout,
-            direction: config.layout?.direction ?? 'column',
-            justifyContent: config.layout?.justifyContent ?? 'start',
-            alignItems: config.layout?.alignItems ?? 'start',
-            gap: config.layout?.gap ?? 0,
-            padding: resolvedConfig.padding,
-            width: resolvedConfig.width,
-            height: resolvedConfig.height,
-        });
-        this.addChild(this._content);
-        this._internalSetup = false;
-    }
-    /** Access the content flex container — add children here for layout */
-    get content() {
-        return this._content;
-    }
-    /** Suspend content layout recalculation. Call resumeLayout() to flush. */
-    suspendLayout() {
-        this._content.suspendLayout();
-    }
-    /** Resume content layout and flush if dirty. */
-    resumeLayout() {
-        this._content.resumeLayout();
-    }
-    /** Convenience: add a child to the content layout */
-    addContent(child) {
-        this._content.addFlexChild(child);
-        this._content.updateLayout();
-        return this;
-    }
-    /** Resize the panel */
-    setSize(width, height) {
-        this._panelConfig.width = width;
-        this._panelConfig.height = height;
-        // Resize background
-        if (this._bg instanceof NineSliceSprite) {
-            this._bg.width = width;
-            this._bg.height = height;
-        }
-        else if (this._bg instanceof Graphics) {
-            const radius = this._panelConfig.borderRadius ?? 0;
-            const bgColor = this._panelConfig.backgroundColor ?? 0x1a1a2e;
-            this._bg.clear();
-            this._bg.roundRect(0, 0, width, height, radius).fill(bgColor);
-            if (this._panelConfig.borderColor !== undefined && this._panelConfig.borderWidth) {
-                this._bg.roundRect(0, 0, width, height, radius)
-                    .stroke({ color: this._panelConfig.borderColor, width: this._panelConfig.borderWidth });
-            }
-            this._bg.alpha = this._panelConfig.backgroundAlpha;
-        }
-        this._content.resize(width, height);
-    }
-    /**
-     * Override addChild so external children are routed to content FlexContainer.
-     * Enables `<panel><label /><button /></panel>` in React JSX.
-     */
-    addChild(...children) {
-        if (this._internalSetup) {
-            return super.addChild(...children);
-        }
-        for (const child of children) {
-            this._content.addFlexChild(child);
-        }
-        this._content.updateLayout();
-        return children[0];
-    }
-    removeChild(...children) {
-        if (this._internalSetup) {
-            return super.removeChild(...children);
-        }
-        for (const child of children) {
-            this._content.removeFlexChild(child);
-        }
-        return children[0];
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('width' in changed || 'height' in changed) {
-            this.setSize(changed.width ?? this._panelConfig.width, changed.height ?? this._panelConfig.height);
-        }
-        if ('backgroundAlpha' in changed) {
-            this._panelConfig.backgroundAlpha = changed.backgroundAlpha;
-            this._bg.alpha = changed.backgroundAlpha;
-        }
-    }
-    destroy(options) {
-        super.destroy(options);
-    }
-}
-
-/**
- * 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));
- * ```
- */
-class BalanceDisplay extends Container {
-    __uiComponent = true;
-    _prefixLabel = null;
-    _valueLabel;
-    _config;
-    _currentValue = 0;
-    _displayedValue = 0;
-    /** Internal target for Tween animation */
-    _tweenTarget = { value: 0 };
-    constructor(config = {}) {
-        super();
-        this._config = {
-            currency: config.currency ?? 'USD',
-            locale: config.locale ?? 'en-US',
-            animated: config.animated ?? true,
-            animationDuration: config.animationDuration ?? 500,
-        };
-        // Prefix label
-        if (config.prefix) {
-            this._prefixLabel = new Label({
-                text: config.prefix,
-                style: {
-                    fontSize: 16,
-                    fill: 0xaaaaaa,
-                    ...config.style,
-                },
-            });
-            this.addChild(this._prefixLabel);
-        }
-        // Value label
-        this._valueLabel = new Label({
-            text: '0.00',
-            style: {
-                fontSize: 28,
-                fontWeight: 'bold',
-                fill: 0xffffff,
-                ...config.style,
-            },
-            maxWidth: config.maxWidth,
-            autoFit: !!config.maxWidth,
-        });
-        this.addChild(this._valueLabel);
-        this.layoutLabels();
-    }
-    /** Current displayed value */
-    get value() {
-        return this._currentValue;
-    }
-    /**
-     * Set the balance value. If animated, smoothly counts to the new value.
-     */
-    setValue(value) {
-        const oldValue = this._currentValue;
-        this._currentValue = value;
-        if (this._config.animated && oldValue !== value) {
-            this.animateValue(oldValue, value);
-        }
-        else {
-            this._displayedValue = value;
-            this.updateDisplay();
-        }
-    }
-    /**
-     * Set the currency code.
-     */
-    setCurrency(currency) {
-        this._config.currency = currency;
-        this.updateDisplay();
-    }
-    animateValue(from, to) {
-        // Cancel any running animation
-        Tween.killTweensOf(this._tweenTarget);
-        this._tweenTarget.value = from;
-        Tween.to(this._tweenTarget, { value: to }, this._config.animationDuration, Easing.easeOutCubic, () => {
-            this._displayedValue = this._tweenTarget.value;
-            this.updateDisplay();
-        });
-    }
-    updateDisplay() {
-        this._valueLabel.setCurrency(this._displayedValue, this._config.currency, this._config.locale);
-    }
-    layoutLabels() {
-        if (this._prefixLabel) {
-            this._prefixLabel.y = -14;
-            this._valueLabel.y = 14;
-        }
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('value' in changed)
-            this.setValue(changed.value);
-        if ('currency' in changed)
-            this.setCurrency(changed.currency);
-    }
-    destroy(options) {
-        Tween.killTweensOf(this._tweenTarget);
-        super.destroy(options);
-    }
-}
-
-/**
- * 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();
- * ```
- */
-class WinDisplay extends Container {
-    __uiComponent = true;
-    _label;
-    _config;
-    /** Internal target for Tween countup */
-    _tweenTarget = { value: 0 };
-    constructor(config = {}) {
-        super();
-        this._config = {
-            currency: config.currency ?? 'USD',
-            locale: config.locale ?? 'en-US',
-            countupDuration: config.countupDuration ?? 1500,
-            popScale: config.popScale ?? 1.2,
-        };
-        this._label = new Label({
-            text: '',
-            style: {
-                fontSize: 48,
-                fontWeight: 'bold',
-                fill: 0xffd700,
-                stroke: { color: 0x000000, width: 3 },
-                ...config.style,
-            },
-        });
-        this.addChild(this._label);
-        this.visible = false;
-    }
-    /**
-     * Show a win with countup animation.
-     *
-     * @param amount - Win amount
-     * @returns Promise that resolves when the animation completes
-     */
-    async showWin(amount) {
-        this.visible = true;
-        this.alpha = 1;
-        // Cancel any running animation
-        Tween.killTweensOf(this._tweenTarget);
-        Tween.killTweensOf(this);
-        // Setup countup
-        this._tweenTarget.value = 0;
-        this.scale.set(0.5);
-        // Scale pop animation
-        const scalePromise = Tween.to(this, { 'scale.x': 1, 'scale.y': 1 }, 300, Easing.easeOutBack);
-        // Countup animation
-        const countupPromise = Tween.to(this._tweenTarget, { value: amount }, this._config.countupDuration, Easing.easeOutCubic, () => {
-            this.displayAmount(this._tweenTarget.value);
-        });
-        await Promise.all([scalePromise, countupPromise]);
-        // Ensure final value is exact
-        this.displayAmount(amount);
-        this.scale.set(1);
-    }
-    /**
-     * Skip the countup animation and show the final amount immediately.
-     */
-    skipCountup(amount) {
-        Tween.killTweensOf(this._tweenTarget);
-        Tween.killTweensOf(this);
-        this.displayAmount(amount);
-        this.scale.set(1);
-    }
-    /**
-     * Hide the win display.
-     */
-    hide() {
-        Tween.killTweensOf(this._tweenTarget);
-        Tween.killTweensOf(this);
-        this.visible = false;
-        this._label.text = '';
-    }
-    displayAmount(amount) {
-        this._label.setCurrency(amount, this._config.currency, this._config.locale);
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('currency' in changed)
-            this._config.currency = changed.currency;
-        if ('locale' in changed)
-            this._config.locale = changed.locale;
-    }
-    destroy(options) {
-        Tween.killTweensOf(this._tweenTarget);
-        Tween.killTweensOf(this);
-        super.destroy(options);
-    }
-}
-
-/**
- * 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);
- * ```
- */
-class Modal extends Container {
-    __uiComponent = true;
-    _overlay;
-    _contentContainer;
-    _config;
-    _showing = false;
-    _internalSetup = true;
-    /** Called when the modal is closed */
-    onClose;
-    constructor(config = {}) {
-        super();
-        this._config = {
-            overlayColor: config.overlayColor ?? 0x000000,
-            overlayAlpha: config.overlayAlpha ?? 0.7,
-            closeOnOverlay: config.closeOnOverlay ?? true,
-            animationDuration: config.animationDuration ?? 300,
-        };
-        // Overlay
-        this._overlay = new Graphics();
-        this._overlay.eventMode = 'static';
-        this._overlay.on('pointertap', () => {
-            if (this._config.closeOnOverlay)
-                this.hide();
-        });
-        this.addChild(this._overlay);
-        // Content container
-        this._contentContainer = new Container();
-        this.addChild(this._contentContainer);
-        this.visible = false;
-        this._internalSetup = false;
-    }
-    /** Content container — add your UI here */
-    get content() {
-        return this._contentContainer;
-    }
-    /**
-     * Override addChild so external children are routed to _contentContainer.
-     * Enables `<modal><flexContainer>...</flexContainer></modal>` in React JSX.
-     */
-    addChild(...children) {
-        if (this._internalSetup) {
-            return super.addChild(...children);
-        }
-        for (const child of children) {
-            this._contentContainer.addChild(child);
-        }
-        return children[0];
-    }
-    removeChild(...children) {
-        if (this._internalSetup) {
-            return super.removeChild(...children);
-        }
-        for (const child of children) {
-            this._contentContainer.removeChild(child);
-        }
-        return children[0];
-    }
-    /** Whether the modal is currently showing */
-    get isShowing() {
-        return this._showing;
-    }
-    /**
-     * Show the modal with animation.
-     */
-    async show(viewWidth, viewHeight) {
-        this._showing = true;
-        this.visible = true;
-        // Draw overlay to cover full screen
-        this._overlay.clear();
-        this._overlay.rect(0, 0, viewWidth, viewHeight).fill(this._config.overlayColor);
-        this._overlay.alpha = 0;
-        // Center content
-        this._contentContainer.x = viewWidth / 2;
-        this._contentContainer.y = viewHeight / 2;
-        this._contentContainer.alpha = 0;
-        this._contentContainer.scale.set(0.8);
-        // Animate in
-        await Promise.all([
-            Tween.to(this._overlay, { alpha: this._config.overlayAlpha }, this._config.animationDuration, Easing.easeOutCubic),
-            Tween.to(this._contentContainer, { alpha: 1, 'scale.x': 1, 'scale.y': 1 }, this._config.animationDuration, Easing.easeOutBack),
-        ]);
-    }
-    /**
-     * Hide the modal with animation.
-     */
-    async hide() {
-        if (!this._showing)
-            return;
-        await Promise.all([
-            Tween.to(this._overlay, { alpha: 0 }, this._config.animationDuration * 0.7, Easing.easeInCubic),
-            Tween.to(this._contentContainer, { alpha: 0, 'scale.x': 0.8, 'scale.y': 0.8 }, this._config.animationDuration * 0.7, Easing.easeInCubic),
-        ]);
-        this.visible = false;
-        this._showing = false;
-        this.onClose?.();
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('overlayAlpha' in changed)
-            this._config.overlayAlpha = changed.overlayAlpha;
-        if ('closeOnOverlay' in changed)
-            this._config.closeOnOverlay = changed.closeOnOverlay;
-        if ('animationDuration' in changed)
-            this._config.animationDuration = changed.animationDuration;
-        if ('onClose' in changed)
-            this.onClose = changed.onClose;
-    }
-}
-
-const TOAST_COLORS = {
-    info: 0x3498db,
-    success: 0x27ae60,
-    warning: 0xf39c12,
-    error: 0xe74c3c,
-};
-/**
- * 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);
- * ```
- */
-class Toast extends Container {
-    __uiComponent = true;
-    _bg;
-    _customBg;
-    _text;
-    _config;
-    _dismissPending = false;
-    constructor(config = {}) {
-        super();
-        this._config = {
-            duration: config.duration ?? 3000,
-            bottomOffset: config.bottomOffset ?? 60,
-        };
-        const customBg = resolveView(config.backgroundView);
-        this._customBg = !!customBg;
-        this._bg = customBg ?? new Graphics();
-        this.addChild(this._bg);
-        this._text = new Text({
-            text: '',
-            style: {
-                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                fontSize: 16,
-                fill: 0xffffff,
-            },
-        });
-        this._text.anchor.set(0.5);
-        this.addChild(this._text);
-        this.visible = false;
-    }
-    /**
-     * Show a toast message.
-     */
-    async show(message, type = 'info', viewWidth, viewHeight) {
-        // Cancel any pending dismiss
-        Tween.killTweensOf(this);
-        this._dismissPending = false;
-        this._text.text = message;
-        const padding = 20;
-        const width = Math.max(200, this._text.width + padding * 2);
-        const height = 44;
-        const radius = 8;
-        // Draw the background
-        if (this._customBg) {
-            this._bg.width = width;
-            this._bg.height = height;
-            this._bg.x = -width / 2;
-            this._bg.y = -height / 2;
-        }
-        else {
-            const g = this._bg;
-            g.clear();
-            g.roundRect(-width / 2, -height / 2, width, height, radius);
-            g.fill(TOAST_COLORS[type]);
-        }
-        // Position
-        if (viewWidth && viewHeight) {
-            this.x = viewWidth / 2;
-            this.y = viewHeight - this._config.bottomOffset;
-        }
-        this.visible = true;
-        this.alpha = 0;
-        this.y += 20;
-        await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
-        if (this._config.duration > 0) {
-            this._dismissPending = true;
-            await Tween.delay(this._config.duration);
-            if (this._dismissPending) {
-                this._dismissPending = false;
-                await this.dismiss();
-            }
-        }
-    }
-    /**
-     * Dismiss the toast.
-     */
-    async dismiss() {
-        if (!this.visible)
-            return;
-        this._dismissPending = false;
-        Tween.killTweensOf(this);
-        await Tween.to(this, { alpha: 0, y: this.y + 20 }, 200, Easing.easeInCubic);
-        this.visible = false;
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('duration' in changed)
-            this._config.duration = changed.duration;
-        if ('bottomOffset' in changed)
-            this._config.bottomOffset = changed.bottomOffset;
-    }
-    destroy(options) {
-        this._dismissPending = false;
-        Tween.killTweensOf(this);
-        super.destroy(options);
-    }
-}
-
-// ─── Helpers ─────────────────────────────────────────────
-function directionToFlex(direction) {
-    switch (direction) {
-        case 'horizontal': return { direction: 'row', wrap: false };
-        case 'vertical': return { direction: 'column', wrap: false };
-        case 'grid': return { direction: 'row', wrap: true };
-        case 'wrap': return { direction: 'row', wrap: true };
-    }
-}
-/**
- * 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);
- * ```
- */
-class Layout extends Container {
-    __uiComponent = true;
-    _layoutConfig;
-    _padding;
-    _anchor;
-    _maxWidth;
-    _breakpoints;
-    _items = [];
-    _viewportWidth = 0;
-    _viewportHeight = 0;
-    _flex;
-    constructor(config = {}) {
-        super();
-        this._layoutConfig = {
-            direction: config.direction ?? 'vertical',
-            gap: config.gap ?? 0,
-            alignment: config.alignment ?? 'start',
-            autoLayout: config.autoLayout ?? true,
-            columns: config.columns ?? 2,
-        };
-        this._padding = config.padding ?? 0;
-        this._anchor = config.anchor ?? 'top-left';
-        this._maxWidth = config.maxWidth ?? Infinity;
-        this._breakpoints = config.breakpoints
-            ? Object.entries(config.breakpoints)
-                .map(([w, cfg]) => [Number(w), cfg])
-                .sort((a, b) => a[0] - b[0])
-            : [];
-        // Create internal FlexContainer
-        this._flex = new FlexContainer();
-        super.addChild(this._flex);
-        this.applyLayoutStyles();
-    }
-    /** Add an item to the layout */
-    addItem(child) {
-        this._items.push(child);
-        const flexConfig = this.buildFlexItemConfig(child);
-        this._flex.addFlexChild(child, flexConfig);
-        if (this._layoutConfig.autoLayout) {
-            this.applyLayoutStyles();
-        }
-        return this;
-    }
-    /** Remove an item from the layout */
-    removeItem(child) {
-        const idx = this._items.indexOf(child);
-        if (idx !== -1) {
-            this._items.splice(idx, 1);
-            this._flex.removeFlexChild(child);
-        }
-        return this;
-    }
-    /** Remove all items */
-    clearItems() {
-        this._flex.clearFlexChildren();
-        this._items.length = 0;
-        return this;
-    }
-    /** Get all layout items */
-    get items() {
-        return this._items;
-    }
-    /**
-     * Update the viewport size and recalculate layout.
-     * Should be called from `Scene.onResize()`.
-     */
-    updateViewport(width, height) {
-        this._viewportWidth = width;
-        this._viewportHeight = height;
-        this.applyLayoutStyles();
-        this.applyAnchor();
-    }
-    applyLayoutStyles() {
-        const effective = this.resolveConfig();
-        const direction = effective.direction ?? this._layoutConfig.direction;
-        const gap = effective.gap ?? this._layoutConfig.gap;
-        const alignment = effective.alignment ?? this._layoutConfig.alignment;
-        const padding = effective.padding ?? this._padding;
-        const maxWidth = effective.maxWidth ?? this._maxWidth;
-        const { direction: flexDir, wrap } = directionToFlex(direction);
-        this._flex.setDirection(flexDir);
-        this._flex.setJustifyContent('start');
-        this._flex.setAlignItems(alignment);
-        this._flex.setGap(gap);
-        this._flex.setPadding(padding);
-        // Wrap and maxWidth
-        if (wrap) {
-            this._flex._config.flexWrap = true;
-            if (direction === 'grid' && maxWidth < Infinity) {
-                this._flex._maxWidth = maxWidth;
-            }
-            if (maxWidth < Infinity) {
-                this._flex._maxWidth = maxWidth;
-            }
-        }
-        else {
-            this._flex._config.flexWrap = false;
-        }
-        // Update grid child widths
-        if (direction === 'grid') {
-            for (const item of this._items) {
-                const flexConfig = this.buildFlexItemConfig(item);
-                item._flexConfig = flexConfig;
-            }
-        }
-        // Set explicit size if we have viewport dimensions
-        if (this._viewportWidth > 0 && this._viewportHeight > 0) {
-            this._flex.resize(this._viewportWidth, this._viewportHeight);
-        }
-        else {
-            this._flex.updateLayout();
-        }
-    }
-    buildFlexItemConfig(_child) {
-        const effective = this.resolveConfig();
-        const direction = effective.direction ?? this._layoutConfig.direction;
-        const columns = effective.columns ?? this._layoutConfig.columns;
-        if (direction === 'grid' && columns > 0) {
-            // For grid, give each item a proportional width
-            // The actual pixel width will be computed during layout
-            return { flexGrow: 1 };
-        }
-        return undefined;
-    }
-    applyAnchor() {
-        const anchor = this.resolveConfig().anchor ?? this._anchor;
-        if (this._viewportWidth === 0 || this._viewportHeight === 0)
-            return;
-        const { width: contentW, height: contentH } = this._flex.getContentSize();
-        const vw = this._viewportWidth;
-        const vh = this._viewportHeight;
-        let anchorX = 0;
-        let anchorY = 0;
-        if (anchor.includes('left')) {
-            anchorX = 0;
-        }
-        else if (anchor.includes('right')) {
-            anchorX = vw - contentW;
-        }
-        else {
-            anchorX = (vw - contentW) / 2;
-        }
-        if (anchor.startsWith('top')) {
-            anchorY = 0;
-        }
-        else if (anchor.startsWith('bottom')) {
-            anchorY = vh - contentH;
-        }
-        else {
-            anchorY = (vh - contentH) / 2;
-        }
-        this.x = anchorX;
-        this.y = anchorY;
-    }
-    resolveConfig() {
-        if (this._breakpoints.length === 0 || this._viewportWidth === 0) {
-            return {};
-        }
-        for (const [maxWidth, overrides] of this._breakpoints) {
-            if (this._viewportWidth <= maxWidth) {
-                return overrides;
-            }
-        }
-        return {};
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('direction' in changed)
-            this._layoutConfig.direction = changed.direction;
-        if ('gap' in changed)
-            this._layoutConfig.gap = changed.gap;
-        if ('alignment' in changed)
-            this._layoutConfig.alignment = changed.alignment;
-        if ('anchor' in changed)
-            this._anchor = changed.anchor;
-        if ('padding' in changed)
-            this._padding = changed.padding;
-        if ('columns' in changed)
-            this._layoutConfig.columns = changed.columns;
-        this.applyLayoutStyles();
-        if (this._viewportWidth > 0)
-            this.applyAnchor();
-    }
-    destroy(options) {
-        this._items.length = 0;
-        super.destroy(options);
-    }
-}
-
-const DECELERATION = 0.95;
-const MIN_VELOCITY = 0.5;
-/**
- * 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);
- * ```
- */
-class ScrollContainer extends Container {
-    __uiComponent = true;
-    _viewport;
-    _internalSetup = true;
-    _content;
-    _maskGfx;
-    _bg = null;
-    _scrollConfig;
-    _items = [];
-    // Scrollbar
-    _scrollbar = null;
-    _scrollbarConfig;
-    // Drag state
-    _dragging = false;
-    _dragStart = { x: 0, y: 0 };
-    _contentStart = { x: 0, y: 0 };
-    _velocity = { x: 0, y: 0 };
-    _lastDragPos = { x: 0, y: 0 };
-    _lastDragTime = 0;
-    _inertiaActive = false;
-    // Bound handlers for cleanup
-    _onTickBound = null;
-    _onWheelBound = null;
-    constructor(config) {
-        super();
-        this._viewport = { width: config.width, height: config.height };
-        this._scrollConfig = {
-            direction: config.direction ?? 'vertical',
-            elementsMargin: config.elementsMargin ?? 0,
-            padding: config.padding ?? 0,
-            borderRadius: config.borderRadius ?? 0,
-            disableEasing: config.disableEasing ?? false,
-        };
-        // Background
-        if (config.backgroundColor !== undefined) {
-            this._bg = new Graphics();
-            this._bg.roundRect(0, 0, config.width, config.height, this._scrollConfig.borderRadius)
-                .fill(config.backgroundColor);
-            this.addChild(this._bg);
-        }
-        // Mask
-        this._maskGfx = new Graphics();
-        this._maskGfx.roundRect(0, 0, config.width, config.height, this._scrollConfig.borderRadius)
-            .fill(0xffffff);
-        this.addChild(this._maskGfx);
-        // Content container
-        this._content = new Container();
-        this._content.mask = this._maskGfx;
-        this.addChild(this._content);
-        // Interaction
-        this.eventMode = 'static';
-        this.hitArea = { contains: (x, y) => x >= 0 && x <= config.width && y >= 0 && y <= config.height };
-        this.on('pointerdown', this._onPointerDown, this);
-        this.on('pointermove', this._onPointerMove, this);
-        this.on('pointerup', this._onPointerUp, this);
-        this.on('pointerupoutside', this._onPointerUp, this);
-        // Mouse wheel
-        this._onWheelBound = this._onWheel.bind(this);
-        // Scrollbar
-        const sbWidth = config.scrollbarWidth ?? 6;
-        const sbPadding = config.scrollbarPadding ?? 4;
-        this._scrollbarConfig = { width: sbWidth, padding: sbPadding };
-        if (config.scrollbar) {
-            const customThumb = resolveView(config.thumbView);
-            if (customThumb) {
-                this._scrollbar = customThumb;
-            }
-            else {
-                const g = new Graphics();
-                g.roundRect(0, 0, sbWidth, 40, sbWidth / 2).fill(config.scrollbarColor ?? 0xaaaaaa);
-                g.alpha = config.scrollbarAlpha ?? 0.5;
-                this._scrollbar = g;
-            }
-            this._scrollbar.visible = false;
-            super.addChild(this._scrollbar);
-        }
-        this._internalSetup = false;
-    }
-    /**
-     * Override addChild so external children are routed to scroll content.
-     * Enables `<scrollContainer><label /><panel /></scrollContainer>` in React JSX.
-     */
-    addChild(...children) {
-        if (this._internalSetup) {
-            return super.addChild(...children);
-        }
-        for (const child of children) {
-            this.addItem(child);
-        }
-        return children[0];
-    }
-    removeChild(...children) {
-        if (this._internalSetup) {
-            return super.removeChild(...children);
-        }
-        for (const child of children) {
-            const idx = this._items.indexOf(child);
-            if (idx !== -1) {
-                this._items.splice(idx, 1);
-                this._content.removeChild(child);
-            }
-        }
-        this.layoutItems();
-        return children[0];
-    }
-    /** React reconciler update hook */
-    updateConfig(changed) {
-        if ('width' in changed || 'height' in changed) {
-            this.setViewportSize(changed.width ?? this._viewport.width, changed.height ?? this._viewport.height);
-        }
-    }
-    /** Enable mouse wheel scrolling (call after adding to stage) */
-    enableWheel(canvas) {
-        if (this._onWheelBound) {
-            canvas.addEventListener('wheel', this._onWheelBound, { passive: false });
-        }
-    }
-    /** Set scrollable content. Replaces any existing items. */
-    setContent(content) {
-        this.clearItems();
-        const children = [...content.children];
-        for (const child of children) {
-            this.addItem(child);
-        }
-    }
-    /** Add a single item */
-    addItem(child) {
-        this._items.push(child);
-        this._content.addChild(child);
-        this.layoutItems();
-        return this;
-    }
-    /** Remove all items */
-    clearItems() {
-        for (const item of this._items) {
-            this._content.removeChild(item);
-        }
-        this._items.length = 0;
-    }
-    /** Get items */
-    get items() {
-        return this._items;
-    }
-    /** Scroll to make a specific item index visible */
-    scrollToItem(index) {
-        if (index < 0 || index >= this._items.length)
-            return;
-        const item = this._items[index];
-        const isVert = this._scrollConfig.direction !== 'horizontal';
-        if (isVert) {
-            this._content.y = -item.y + this._scrollConfig.padding;
-        }
-        else {
-            this._content.x = -item.x + this._scrollConfig.padding;
-        }
-        this.clampScroll();
-    }
-    /** Current scroll position */
-    get scrollPosition() {
-        return { x: this._content.x, y: this._content.y };
-    }
-    /** Resize the scroll viewport */
-    setViewportSize(width, height) {
-        this._viewport.width = width;
-        this._viewport.height = height;
-        this._maskGfx.clear();
-        this._maskGfx.roundRect(0, 0, width, height, this._scrollConfig.borderRadius).fill(0xffffff);
-        if (this._bg) {
-            this._bg.clear();
-            this._bg.roundRect(0, 0, width, height, this._scrollConfig.borderRadius)
-                .fill(0xffffff); // color will be overridden if needed
-        }
-        this.clampScroll();
-    }
-    // ─── Layout ──────────────────────────────────────────
-    layoutItems() {
-        const { direction, elementsMargin, padding } = this._scrollConfig;
-        const isVert = direction !== 'horizontal';
-        let pos = padding;
-        for (const item of this._items) {
-            if (isVert) {
-                item.x = padding;
-                item.y = pos;
-                pos += item.height + elementsMargin;
-            }
-            else {
-                item.x = pos;
-                item.y = padding;
-                pos += item.width + elementsMargin;
-            }
-        }
-    }
-    // ─── Drag handling ───────────────────────────────────
-    _onPointerDown(e) {
-        this._dragging = true;
-        this._inertiaActive = false;
-        this._dragStart.x = e.globalX;
-        this._dragStart.y = e.globalY;
-        this._contentStart.x = this._content.x;
-        this._contentStart.y = this._content.y;
-        this._lastDragPos.x = e.globalX;
-        this._lastDragPos.y = e.globalY;
-        this._lastDragTime = Date.now();
-        this._velocity.x = 0;
-        this._velocity.y = 0;
-        this.stopInertia();
-    }
-    _onPointerMove(e) {
-        if (!this._dragging)
-            return;
-        const dx = e.globalX - this._dragStart.x;
-        const dy = e.globalY - this._dragStart.y;
-        const { direction } = this._scrollConfig;
-        if (direction !== 'horizontal') {
-            this._content.y = this._contentStart.y + dy;
-        }
-        if (direction !== 'vertical') {
-            this._content.x = this._contentStart.x + dx;
-        }
-        // Track velocity
-        const now = Date.now();
-        const dt = now - this._lastDragTime;
-        if (dt > 0) {
-            this._velocity.x = (e.globalX - this._lastDragPos.x) / dt * 16;
-            this._velocity.y = (e.globalY - this._lastDragPos.y) / dt * 16;
-        }
-        this._lastDragPos.x = e.globalX;
-        this._lastDragPos.y = e.globalY;
-        this._lastDragTime = now;
-        this.clampScroll();
-    }
-    _onPointerUp() {
-        if (!this._dragging)
-            return;
-        this._dragging = false;
-        if (!this._scrollConfig.disableEasing &&
-            (Math.abs(this._velocity.x) > MIN_VELOCITY || Math.abs(this._velocity.y) > MIN_VELOCITY)) {
-            this.startInertia();
-        }
-    }
-    // ─── Inertia ─────────────────────────────────────────
-    startInertia() {
-        this._inertiaActive = true;
-        this._onTickBound = this._inertiaTick.bind(this);
-        Ticker.shared.add(this._onTickBound);
-    }
-    stopInertia() {
-        if (this._onTickBound && this._inertiaActive) {
-            Ticker.shared.remove(this._onTickBound);
-            this._inertiaActive = false;
-        }
-    }
-    _inertiaTick() {
-        const { direction } = this._scrollConfig;
-        if (direction !== 'horizontal') {
-            this._content.y += this._velocity.y;
-            this._velocity.y *= DECELERATION;
-        }
-        if (direction !== 'vertical') {
-            this._content.x += this._velocity.x;
-            this._velocity.x *= DECELERATION;
-        }
-        this.clampScroll();
-        if (Math.abs(this._velocity.x) < MIN_VELOCITY && Math.abs(this._velocity.y) < MIN_VELOCITY) {
-            this.stopInertia();
-        }
-    }
-    // ─── Mouse wheel ─────────────────────────────────────
-    _onWheel(e) {
-        const { direction } = this._scrollConfig;
-        e.preventDefault();
-        if (direction !== 'horizontal') {
-            this._content.y -= e.deltaY;
-        }
-        if (direction !== 'vertical') {
-            this._content.x -= e.deltaX;
-        }
-        this.clampScroll();
-    }
-    // ─── Scroll bounds ───────────────────────────────────
-    clampScroll() {
-        const { direction } = this._scrollConfig;
-        const bounds = this._content.getLocalBounds();
-        if (direction !== 'horizontal') {
-            const contentHeight = bounds.height + bounds.y;
-            const maxScroll = Math.min(0, this._viewport.height - contentHeight);
-            this._content.y = Math.max(maxScroll, Math.min(0, this._content.y));
-        }
-        if (direction !== 'vertical') {
-            const contentWidth = bounds.width + bounds.x;
-            const maxScroll = Math.min(0, this._viewport.width - contentWidth);
-            this._content.x = Math.max(maxScroll, Math.min(0, this._content.x));
-        }
-        this.updateScrollbar();
-    }
-    updateScrollbar() {
-        if (!this._scrollbar)
-            return;
-        const { direction } = this._scrollConfig;
-        const { width: sbW, padding: sbPad } = this._scrollbarConfig;
-        const bounds = this._content.getLocalBounds();
-        const isVert = direction !== 'horizontal';
-        if (isVert) {
-            const contentH = bounds.height + bounds.y;
-            if (contentH <= this._viewport.height) {
-                this._scrollbar.visible = false;
-                return;
-            }
-            this._scrollbar.visible = true;
-            const ratio = this._viewport.height / contentH;
-            const thumbH = Math.max(20, this._viewport.height * ratio);
-            const scrollRange = this._viewport.height - thumbH;
-            const scrollProgress = -this._content.y / (contentH - this._viewport.height);
-            this._scrollbar.x = this._viewport.width - sbW - sbPad;
-            this._scrollbar.y = scrollProgress * scrollRange;
-            this._scrollbar.height = thumbH;
-            this._scrollbar.width = sbW;
-        }
-        else {
-            const contentW = bounds.width + bounds.x;
-            if (contentW <= this._viewport.width) {
-                this._scrollbar.visible = false;
-                return;
-            }
-            this._scrollbar.visible = true;
-            const ratio = this._viewport.width / contentW;
-            const thumbW = Math.max(20, this._viewport.width * ratio);
-            const scrollRange = this._viewport.width - thumbW;
-            const scrollProgress = -this._content.x / (contentW - this._viewport.width);
-            this._scrollbar.y = this._viewport.height - sbW - sbPad;
-            this._scrollbar.x = scrollProgress * scrollRange;
-            this._scrollbar.width = thumbW;
-            this._scrollbar.height = sbW;
-        }
-    }
-    destroy(options) {
-        this.stopInertia();
-        this.off('pointerdown', this._onPointerDown, this);
-        this.off('pointermove', this._onPointerMove, this);
-        this.off('pointerup', this._onPointerUp, this);
-        this.off('pointerupoutside', this._onPointerUp, this);
-        this._items.length = 0;
-        super.destroy(options);
-    }
-}
-
-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 { AssetManager, AudioManager, Easing, EventEmitter, FPSOverlay, GameApplication, InputManager, LoadingScene, Orientation, ScaleMode, Scene, SceneManager, SpineHelper, SpriteAnimation, Timeline, TransitionType, Tween, ViewportManager };
 //# sourceMappingURL=index.esm.js.map