@energy8platform/game-engine 0.10.11 → 0.11.0

package/dist/index.esm.js

@@ -1,8 +1,6 @@
-import { Ticker, Assets, Container, Text, Application, AnimatedSprite, Texture, Graphics, NineSliceSprite } from 'pixi.js';
+import { Ticker, Assets, Container, Text, Application, AnimatedSprite, Texture, Sprite, Graphics, NineSliceSprite } from 'pixi.js';
 import { CasinoGameSDK, Bridge } from '@energy8platform/game-sdk';
 export { BridgeDestroyedError, BridgeNotReadyError, SDKError, TimeoutError } from '@energy8platform/game-sdk';
-import { FancyButton, ProgressBar as ProgressBar$1, ScrollBox } from '@pixi/ui';
-import { LayoutContainer } from '@pixi/layout/components';
 
 // ─── Scale Modes ───────────────────────────────────────────
 var ScaleMode;
@@ -2909,6 +2907,407 @@ class SpriteAnimation {
     }
 }
 
+// ─── Helpers ─────────────────────────────────────────────
+function normalizePadding(p) {
+    return typeof p === 'number' ? [p, p, p, p] : p;
+}
+/** Measure a child's size and bounds offset for layout purposes */
+function measureChild(child) {
+    const cfg = child._flexConfig;
+    if (cfg?.layoutWidth !== undefined && cfg?.layoutHeight !== undefined) {
+        return { w: cfg.layoutWidth, h: cfg.layoutHeight, ox: 0, oy: 0 };
+    }
+    // For FlexContainers, use their explicit size if set
+    if (child instanceof FlexContainer) {
+        const fc = child;
+        if (fc._explicitWidth > 0 && fc._explicitHeight > 0) {
+            return { w: fc._explicitWidth, h: fc._explicitHeight, ox: 0, oy: 0 };
+        }
+    }
+    // Use localBounds to get the true visual extent and origin offset.
+    // This handles children with non-zero anchors (e.g. Button, Label with centered text).
+    const bounds = child.getLocalBounds();
+    const w = cfg?.layoutWidth ?? bounds.width;
+    const h = cfg?.layoutHeight ?? bounds.height;
+    return { w, h, ox: bounds.x, oy: bounds.y };
+}
+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;
+                if (isRow) {
+                    item.w = flexSize;
+                    item.child.width = flexSize;
+                }
+                else {
+                    item.h = flexSize;
+                    item.child.height = flexSize;
+                }
+            }
+        }
+    }
+    // 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
+        let crossPos = crossOffset;
+        switch (align) {
+            case 'start':
+                break;
+            case 'center':
+                crossPos += (crossSize - crossDim) / 2;
+                break;
+            case 'end':
+                crossPos += crossSize - crossDim;
+                break;
+            case 'stretch':
+                if (isRow) {
+                    item.child.height = crossSize;
+                }
+                else {
+                    item.child.width = 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;
+    _layoutChildren = [];
+    _layoutDirty = true;
+    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,
+        };
+        this._padding = normalizePadding(config.padding ?? 0);
+        this._maxWidth = config.maxWidth ?? Infinity;
+        this._maxHeight = config.maxHeight ?? Infinity;
+        this._explicitWidth = config.width ?? 0;
+        this._explicitHeight = config.height ?? 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.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;
+    }
+    /** Update the container size and recalculate layout */
+    resize(width, height) {
+        this._explicitWidth = width;
+        this._explicitHeight = height;
+        this._layoutDirty = true;
+        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() {
+        this._layoutDirty = false;
+        const { direction, justifyContent, alignItems, gap, flexWrap } = this._config;
+        const [pt, pr, pb, pl] = this._padding;
+        const isRow = direction === 'row';
+        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;
+        // Measure children
+        const measured = this._layoutChildren.map((child) => {
+            const { w, h, ox, oy } = measureChild(child);
+            return { 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;
+        });
+        // Layout each line
+        let crossOffset = isRow ? pt : pl;
+        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 }));
+            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            // 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;
+        }
+    }
+    /** Computed content size (after layout) */
+    getContentSize() {
+        if (this._layoutDirty)
+            this.updateLayout();
+        let maxX = 0;
+        let maxY = 0;
+        for (const child of this._layoutChildren) {
+            const { w, h } = measureChild(child);
+            maxX = Math.max(maxX, child.x + w);
+            maxY = Math.max(maxY, child.y + h);
+        }
+        const [, pr, pb] = this._padding;
+        return { width: maxX + pr, height: maxY + pb };
+    }
+    /** 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)
+            this.setPadding(changed.padding);
+        if ('flexWrap' in changed) {
+            this._config.flexWrap = changed.flexWrap;
+            this._layoutDirty = true;
+        }
+        if ('width' in changed || 'height' in changed) {
+            this.resize(changed.width ?? this._explicitWidth, changed.height ?? this._explicitHeight);
+            return; // resize calls updateLayout
+        }
+        if (this._layoutDirty)
+            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,
@@ -2917,33 +3316,55 @@ const DEFAULT_COLORS = {
 };
 function makeGraphicsView(w, h, radius, color) {
     const g = new Graphics();
-    g.roundRect(0, 0, w, h, radius).fill(color);
-    // Highlight overlay
-    g.roundRect(2, 2, w - 4, h * 0.45, radius).fill({ color: 0xffffff, alpha: 0.1 });
+    g.roundRect(-w / 2, -h / 2, w, h, radius).fill(color);
     return g;
 }
 /**
- * Interactive button component powered by `@pixi/ui` FancyButton.
+ * Interactive button with per-state custom views and animations.
  *
- * Supports both texture-based and Graphics-based rendering with
- * per-state views, press animation, and text.
+ * 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(),
  * });
  *
- * btn.onPress.connect(() => console.log('Clicked!'));
- * scene.container.addChild(btn);
+ * // Custom Container view
+ * const btn = new Button({
+ *   defaultView: myAnimatedSprite,
+ *   text: 'SPIN',
+ * });
  * ```
  */
-class Button extends FancyButton {
-    _buttonConfig;
+class Button extends Container {
+    __uiComponent = true;
+    _views = new Map();
+    _state = 'default';
+    _enabled = true;
+    _config;
+    _textObj = null;
+    /** Press callback */
+    onPress;
     constructor(config = {}) {
-        const resolvedConfig = {
+        super();
+        this._config = {
             width: config.width ?? 200,
             height: config.height ?? 60,
             borderRadius: config.borderRadius ?? 8,
@@ -2951,50 +3372,39 @@ class Button extends FancyButton {
             animationDuration: config.animationDuration ?? 100,
             ...config,
         };
-        const colorMap = { ...DEFAULT_COLORS, ...config.colors };
-        const { width, height, borderRadius } = resolvedConfig;
-        // Build FancyButton options
-        const options = {
-            anchor: 0.5,
-            animations: {
-                hover: {
-                    props: { scale: { x: 1.03, y: 1.03 } },
-                    duration: resolvedConfig.animationDuration,
-                },
-                pressed: {
-                    props: { scale: { x: resolvedConfig.pressScale, y: resolvedConfig.pressScale } },
-                    duration: resolvedConfig.animationDuration,
-                },
-            },
-        };
-        // Texture-based views
-        if (config.textures) {
-            if (config.textures.default)
-                options.defaultView = config.textures.default;
-            if (config.textures.hover)
-                options.hoverView = config.textures.hover;
-            if (config.textures.pressed)
-                options.pressedView = config.textures.pressed;
-            if (config.textures.disabled)
-                options.disabledView = config.textures.disabled;
-        }
-        else {
-            // Graphics-based views
-            options.defaultView = makeGraphicsView(width, height, borderRadius, colorMap.default);
-            options.hoverView = makeGraphicsView(width, height, borderRadius, colorMap.hover);
-            options.pressedView = makeGraphicsView(width, height, borderRadius, colorMap.pressed);
-            options.disabledView = makeGraphicsView(width, height, borderRadius, colorMap.disabled);
-        }
+        this.onPress = config.onPress;
+        this._buildViews(config);
         // Text
         if (config.text) {
-            options.text = config.text;
-        }
-        super(options);
-        this._buttonConfig = resolvedConfig;
+            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;
@@ -3003,29 +3413,161 @@ class Button extends FancyButton {
     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;
+        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);
     }
 }
 
-function makeBarGraphics(w, h, radius, color) {
-    return new Graphics().roundRect(0, 0, w, h, radius).fill(color);
-}
 /**
- * Horizontal progress bar powered by `@pixi/ui` ProgressBar.
+ * Horizontal progress bar with optional custom track/fill views.
  *
- * Provides optional smooth animated fill via per-frame `update()`.
+ * 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 });
- * scene.container.addChild(bar);
- * bar.progress = 0.5; // 50%
+ * 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 {
-    _bar;
+    __uiComponent = true;
+    _track;
+    _fill;
+    _fillMask;
     _borderGfx;
     _config;
     _progress = 0;
@@ -3044,21 +3586,39 @@ class ProgressBar extends Container {
             animationSpeed: config.animationSpeed ?? 0.1,
         };
         const { width, height, borderRadius, fillColor, trackColor, borderColor, borderWidth } = this._config;
-        const bgGraphics = makeBarGraphics(width, height, borderRadius, trackColor);
-        const fillGraphics = makeBarGraphics(width - borderWidth * 2, height - borderWidth * 2, Math.max(0, borderRadius - 1), fillColor);
-        const options = {
-            bg: bgGraphics,
-            fill: fillGraphics,
-            fillPaddings: {
-                top: borderWidth,
-                right: borderWidth,
-                bottom: borderWidth,
-                left: borderWidth,
-            },
-            progress: 0,
-        };
-        this._bar = new ProgressBar$1(options);
-        this.addChild(this._bar);
+        // 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) {
@@ -3076,7 +3636,7 @@ class ProgressBar extends Container {
         this._progress = Math.max(0, Math.min(1, value));
         if (!this._config.animated) {
             this._displayedProgress = this._progress;
-            this._bar.progress = this._displayedProgress * 100;
+            this.updateMask();
         }
     }
     /**
@@ -3087,11 +3647,26 @@ class ProgressBar extends Container {
             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._bar.progress = this._displayedProgress * 100;
+        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);
     }
 }
 
@@ -3109,6 +3684,7 @@ class ProgressBar extends Container {
  * ```
  */
 class Label extends Container {
+    __uiComponent = true;
     _text;
     _maxWidth;
     _autoFit;
@@ -3175,6 +3751,21 @@ class Label extends Container {
             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;
@@ -3187,10 +3778,10 @@ class Label extends Container {
 }
 
 /**
- * Background panel powered by `@pixi/layout` LayoutContainer.
+ * Background panel with optional flexbox content layout.
  *
  * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
- * Children added to `content` participate in flexbox layout automatically.
+ * Children added via `addContent()` participate in flex layout automatically.
  *
  * @example
  * ```ts
@@ -3205,9 +3796,14 @@ class Label extends Container {
  * });
  * ```
  */
-class Panel extends LayoutContainer {
+class Panel extends Container {
+    __uiComponent = true;
+    _bg;
+    _content;
+    _internalSetup = true;
     _panelConfig;
     constructor(config = {}) {
+        super();
         const resolvedConfig = {
             width: config.width ?? 400,
             height: config.height ?? 300,
@@ -3215,8 +3811,8 @@ class Panel extends LayoutContainer {
             backgroundAlpha: config.backgroundAlpha ?? 1,
             ...config,
         };
-        // If using a 9-slice texture, pass it as a custom background
-        let customBackground;
+        this._panelConfig = resolvedConfig;
+        // Create background
         if (config.nineSliceTexture) {
             const texture = typeof config.nineSliceTexture === 'string'
                 ? Texture.from(config.nineSliceTexture)
@@ -3232,40 +3828,102 @@ class Panel extends LayoutContainer {
             nineSlice.width = resolvedConfig.width;
             nineSlice.height = resolvedConfig.height;
             nineSlice.alpha = resolvedConfig.backgroundAlpha;
-            customBackground = nineSlice;
+            this._bg = nineSlice;
         }
-        super(customBackground ? { background: customBackground } : undefined);
-        this._panelConfig = resolvedConfig;
-        // Apply layout styles
-        const layoutStyles = {
-            width: resolvedConfig.width,
-            height: resolvedConfig.height,
-            padding: resolvedConfig.padding,
-            flexDirection: 'column',
-        };
-        // Graphics-based background via layout styles
-        if (!config.nineSliceTexture) {
-            layoutStyles.backgroundColor = config.backgroundColor ?? 0x1a1a2e;
-            layoutStyles.borderRadius = config.borderRadius ?? 0;
+        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) {
-                layoutStyles.borderColor = config.borderColor;
-                layoutStyles.borderWidth = 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.layout = layoutStyles;
-        if (!config.nineSliceTexture) {
-            this.background.alpha = resolvedConfig.backgroundAlpha;
-        }
+        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 container (children added here participate in layout) */
+    /** Access the content flex container — add children here for layout */
     get content() {
-        return this.overflowContainer;
+        return this._content;
+    }
+    /** 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;
-        this._layout?.setStyle({ width, 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);
     }
 }
 
@@ -3273,7 +3931,7 @@ class Panel extends LayoutContainer {
  * Reactive balance display component.
  *
  * Automatically formats currency and can animate value changes
- * with a smooth countup/countdown effect.
+ * with a smooth countup/countdown effect using engine Tween.
  *
  * @example
  * ```ts
@@ -3285,13 +3943,14 @@ class Panel extends LayoutContainer {
  * ```
  */
 class BalanceDisplay extends Container {
+    __uiComponent = true;
     _prefixLabel = null;
     _valueLabel;
     _config;
     _currentValue = 0;
     _displayedValue = 0;
-    _animating = false;
-    _animationCancelled = false;
+    /** Internal target for Tween animation */
+    _tweenTarget = { value: 0 };
     constructor(config = {}) {
         super();
         this._config = {
@@ -3352,37 +4011,13 @@ class BalanceDisplay extends Container {
         this._config.currency = currency;
         this.updateDisplay();
     }
-    async animateValue(from, to) {
-        if (this._animating) {
-            this._animationCancelled = true;
-        }
-        this._animating = true;
-        this._animationCancelled = false;
-        const duration = this._config.animationDuration;
-        const startTime = Date.now();
-        return new Promise((resolve) => {
-            const tick = () => {
-                if (this._animationCancelled) {
-                    this._animating = false;
-                    resolve();
-                    return;
-                }
-                const elapsed = Date.now() - startTime;
-                const t = Math.min(elapsed / duration, 1);
-                const eased = Easing.easeOutCubic(t);
-                this._displayedValue = from + (to - from) * eased;
-                this.updateDisplay();
-                if (t < 1) {
-                    requestAnimationFrame(tick);
-                }
-                else {
-                    this._displayedValue = to;
-                    this.updateDisplay();
-                    this._animating = false;
-                    resolve();
-                }
-            };
-            requestAnimationFrame(tick);
+    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() {
@@ -3394,13 +4029,24 @@ class BalanceDisplay extends Container {
             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.
+ * scale pop effect — typical of slot games. Uses engine Tween system.
  *
  * @example
  * ```ts
@@ -3411,9 +4057,11 @@ class BalanceDisplay extends Container {
  * ```
  */
 class WinDisplay extends Container {
+    __uiComponent = true;
     _label;
     _config;
-    _cancelCountup = false;
+    /** Internal target for Tween countup */
+    _tweenTarget = { value: 0 };
     constructor(config = {}) {
         super();
         this._config = {
@@ -3443,47 +4091,30 @@ class WinDisplay extends Container {
      */
     async showWin(amount) {
         this.visible = true;
-        this._cancelCountup = false;
         this.alpha = 1;
-        const duration = this._config.countupDuration;
-        const startTime = Date.now();
-        // Scale pop
+        // Cancel any running animation
+        Tween.killTweensOf(this._tweenTarget);
+        Tween.killTweensOf(this);
+        // Setup countup
+        this._tweenTarget.value = 0;
         this.scale.set(0.5);
-        return new Promise((resolve) => {
-            const tick = () => {
-                if (this._cancelCountup) {
-                    this.displayAmount(amount);
-                    resolve();
-                    return;
-                }
-                const elapsed = Date.now() - startTime;
-                const t = Math.min(elapsed / duration, 1);
-                const eased = Easing.easeOutCubic(t);
-                // Countup
-                const current = amount * eased;
-                this.displayAmount(current);
-                // Scale animation
-                const scaleT = Math.min(elapsed / 300, 1);
-                const scaleEased = Easing.easeOutBack(scaleT);
-                const targetScale = 1;
-                this.scale.set(0.5 + (targetScale - 0.5) * scaleEased);
-                if (t < 1) {
-                    requestAnimationFrame(tick);
-                }
-                else {
-                    this.displayAmount(amount);
-                    this.scale.set(1);
-                    resolve();
-                }
-            };
-            requestAnimationFrame(tick);
+        // 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) {
-        this._cancelCountup = true;
+        Tween.killTweensOf(this._tweenTarget);
+        Tween.killTweensOf(this);
         this.displayAmount(amount);
         this.scale.set(1);
     }
@@ -3491,19 +4122,33 @@ class WinDisplay extends Container {
      * 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.
  *
- * The content container uses `@pixi/layout` for automatic centering.
+ * Content is automatically centered via position calculations.
  *
  * @example
  * ```ts
@@ -3514,6 +4159,7 @@ class WinDisplay extends Container {
  * ```
  */
 class Modal extends Container {
+    __uiComponent = true;
     _overlay;
     _contentContainer;
     _config;
@@ -3583,6 +4229,17 @@ class Modal extends Container {
         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 = {
@@ -3602,17 +4259,21 @@ const TOAST_COLORS = {
  * ```
  */
 class Toast extends Container {
+    __uiComponent = true;
     _bg;
+    _customBg;
     _text;
     _config;
-    _dismissTimeout = null;
+    _dismissPending = false;
     constructor(config = {}) {
         super();
         this._config = {
             duration: config.duration ?? 3000,
             bottomOffset: config.bottomOffset ?? 60,
         };
-        this._bg = new Graphics();
+        const customBg = resolveView(config.backgroundView);
+        this._customBg = !!customBg;
+        this._bg = customBg ?? new Graphics();
         this.addChild(this._bg);
         this._text = new Text({
             text: '',
@@ -3630,18 +4291,27 @@ class Toast extends Container {
      * Show a toast message.
      */
     async show(message, type = 'info', viewWidth, viewHeight) {
-        if (this._dismissTimeout) {
-            clearTimeout(this._dismissTimeout);
-        }
+        // 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
-        this._bg.clear();
-        this._bg.roundRect(-width / 2, -height / 2, width, height, radius);
-        this._bg.fill(TOAST_COLORS[type]);
+        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;
@@ -3652,9 +4322,12 @@ class Toast extends Container {
         this.y += 20;
         await Tween.to(this, { alpha: 1, y: this.y - 20 }, 300, Easing.easeOutCubic);
         if (this._config.duration > 0) {
-            this._dismissTimeout = setTimeout(() => {
-                this.dismiss();
-            }, this._config.duration);
+            this._dismissPending = true;
+            await Tween.delay(this._config.duration);
+            if (this._dismissPending) {
+                this._dismissPending = false;
+                await this.dismiss();
+            }
         }
     }
     /**
@@ -3663,57 +4336,36 @@ class Toast extends Container {
     async dismiss() {
         if (!this.visible)
             return;
-        if (this._dismissTimeout) {
-            clearTimeout(this._dismissTimeout);
-            this._dismissTimeout = null;
-        }
+        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 ─────────────────────────────────────────────
-const ALIGNMENT_MAP = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-};
-function normalizePadding(padding) {
-    if (typeof padding === 'number')
-        return [padding, padding, padding, padding];
-    return padding;
-}
-function directionToFlexStyles(direction, maxWidth) {
+function directionToFlex(direction) {
     switch (direction) {
-        case 'horizontal':
-            return { flexDirection: 'row', flexWrap: 'nowrap' };
-        case 'vertical':
-            return { flexDirection: 'column', flexWrap: 'nowrap' };
-        case 'grid':
-            return { flexDirection: 'row', flexWrap: 'wrap' };
-        case 'wrap':
-            return {
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                ...(maxWidth < Infinity ? { maxWidth } : {}),
-            };
+        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 };
     }
 }
-function buildLayoutStyles(config) {
-    const [pt, pr, pb, pl] = config.padding;
-    return {
-        ...directionToFlexStyles(config.direction, config.maxWidth),
-        gap: config.gap,
-        alignItems: ALIGNMENT_MAP[config.alignment],
-        paddingTop: pt,
-        paddingRight: pr,
-        paddingBottom: pb,
-        paddingLeft: pl,
-    };
-}
 /**
- * Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine).
+ * 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.
@@ -3740,6 +4392,7 @@ function buildLayoutStyles(config) {
  * ```
  */
 class Layout extends Container {
+    __uiComponent = true;
     _layoutConfig;
     _padding;
     _anchor;
@@ -3748,6 +4401,7 @@ class Layout extends Container {
     _items = [];
     _viewportWidth = 0;
     _viewportHeight = 0;
+    _flex;
     constructor(config = {}) {
         super();
         this._layoutConfig = {
@@ -3757,7 +4411,7 @@ class Layout extends Container {
             autoLayout: config.autoLayout ?? true,
             columns: config.columns ?? 2,
         };
-        this._padding = normalizePadding(config.padding ?? 0);
+        this._padding = config.padding ?? 0;
         this._anchor = config.anchor ?? 'top-left';
         this._maxWidth = config.maxWidth ?? Infinity;
         this._breakpoints = config.breakpoints
@@ -3765,14 +4419,18 @@ class Layout extends Container {
                 .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);
-        this.addChild(child);
-        if (this._layoutConfig.direction === 'grid') {
-            this.applyGridChildWidth(child);
+        const flexConfig = this.buildFlexItemConfig(child);
+        this._flex.addFlexChild(child, flexConfig);
+        if (this._layoutConfig.autoLayout) {
+            this.applyLayoutStyles();
         }
         return this;
     }
@@ -3781,15 +4439,13 @@ class Layout extends Container {
         const idx = this._items.indexOf(child);
         if (idx !== -1) {
             this._items.splice(idx, 1);
-            this.removeChild(child);
+            this._flex.removeFlexChild(child);
         }
         return this;
     }
     /** Remove all items */
     clearItems() {
-        for (const item of this._items) {
-            this.removeChild(item);
-        }
+        this._flex.clearFlexChildren();
         this._items.length = 0;
         return this;
     }
@@ -3812,43 +4468,58 @@ class Layout extends Container {
         const direction = effective.direction ?? this._layoutConfig.direction;
         const gap = effective.gap ?? this._layoutConfig.gap;
         const alignment = effective.alignment ?? this._layoutConfig.alignment;
-        effective.columns ?? this._layoutConfig.columns;
-        const padding = effective.padding !== undefined
-            ? normalizePadding(effective.padding)
-            : this._padding;
+        const padding = effective.padding ?? this._padding;
         const maxWidth = effective.maxWidth ?? this._maxWidth;
-        const styles = buildLayoutStyles({ direction, gap, alignment, padding, maxWidth });
-        this.layout = styles;
+        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) {
-                this.applyGridChildWidth(item);
+                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();
+        }
     }
-    applyGridChildWidth(child) {
+    buildFlexItemConfig(_child) {
         const effective = this.resolveConfig();
+        const direction = effective.direction ?? this._layoutConfig.direction;
         const columns = effective.columns ?? this._layoutConfig.columns;
-        const gap = effective.gap ?? this._layoutConfig.gap;
-        // Account for gaps between columns: total gap space = gap * (columns - 1)
-        // Each column gets: (100% - total_gap) / columns
-        // We use flexBasis + flexGrow to let Yoga handle the math when gap > 0
-        const styles = gap > 0
-            ? { flexBasis: 0, flexGrow: 1, flexShrink: 1, maxWidth: `${(100 / columns).toFixed(2)}%` }
-            : { width: `${(100 / columns).toFixed(2)}%` };
-        if (child._layout) {
-            child._layout.setStyle(styles);
-        }
-        else {
-            child.layout = styles;
+        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 bounds = this.getLocalBounds();
-        const contentW = bounds.width * this.scale.x;
-        const contentH = bounds.height * this.scale.y;
+        const { width: contentW, height: contentH } = this._flex.getContentSize();
         const vw = this._viewportWidth;
         const vh = this._viewportHeight;
         let anchorX = 0;
@@ -3871,8 +4542,8 @@ class Layout extends Container {
         else {
             anchorY = (vh - contentH) / 2;
         }
-        this.x = anchorX - bounds.x * this.scale.x;
-        this.y = anchorY - bounds.y * this.scale.y;
+        this.x = anchorX;
+        this.y = anchorY;
     }
     resolveConfig() {
         if (this._breakpoints.length === 0 || this._viewportWidth === 0) {
@@ -3885,18 +4556,34 @@ class Layout extends Container {
         }
         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 DIRECTION_MAP = {
-    vertical: 'vertical',
-    horizontal: 'horizontal',
-    both: 'bidirectional',
-};
+const DECELERATION = 0.95;
+const MIN_VELOCITY = 0.5;
 /**
- * Scrollable container powered by `@pixi/ui` ScrollBox.
- *
- * Provides touch/drag scrolling, mouse wheel support, inertia, and
- * dynamic rendering optimization for off-screen items.
+ * Scrollable container with touch/drag, mouse wheel, and inertia.
  *
  * @example
  * ```ts
@@ -3914,53 +4601,349 @@ const DIRECTION_MAP = {
  * scene.container.addChild(scroll);
  * ```
  */
-class ScrollContainer extends ScrollBox {
+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) {
-        const options = {
-            width: config.width,
-            height: config.height,
-            type: DIRECTION_MAP[config.direction ?? 'vertical'],
-            radius: config.borderRadius ?? 0,
+        super();
+        this._viewport = { width: config.width, height: config.height };
+        this._scrollConfig = {
+            direction: config.direction ?? 'vertical',
             elementsMargin: config.elementsMargin ?? 0,
             padding: config.padding ?? 0,
-            disableDynamicRendering: config.disableDynamicRendering ?? false,
+            borderRadius: config.borderRadius ?? 0,
             disableEasing: config.disableEasing ?? false,
-            globalScroll: config.globalScroll ?? true,
         };
+        // Background
         if (config.backgroundColor !== undefined) {
-            options.background = config.backgroundColor;
+            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);
         }
-        super(options);
-        this._scrollConfig = config;
+        this._internalSetup = false;
     }
-    /** Set scrollable content. Replaces any existing content. */
-    setContent(content) {
-        // Remove existing items
-        const existing = this.items;
-        if (existing.length > 0) {
-            for (let i = existing.length - 1; i >= 0; i--) {
-                this.removeItem(i);
+    /**
+     * 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);
             }
         }
-        // Add all children from the content container
+        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];
-        if (children.length > 0) {
-            this.addItems(children);
+        for (const child of children) {
+            this.addItem(child);
         }
     }
     /** Add a single item */
-    addItem(...items) {
-        this.addItems(items);
-        return items[0];
+    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;
     }
-    /** Scroll to make a specific item/child visible */
+    /** Get items */
+    get items() {
+        return this._items;
+    }
+    /** Scroll to make a specific item index visible */
     scrollToItem(index) {
-        this.scrollTo(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.scrollX, y: this.scrollY };
+        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);
     }
 }
 
@@ -4195,5 +5178,5 @@ class DevBridge {
     }
 }
 
-export { AssetManager, AudioManager, BalanceDisplay, Button, DevBridge, Easing, EventEmitter, FPSOverlay, 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, BalanceDisplay, Button, DevBridge, 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 };
 //# sourceMappingURL=index.esm.js.map