@energy8platform/game-engine 0.10.11 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +272 -74
  2. package/dist/index.cjs.js +1322 -296
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.d.ts +369 -46
  5. package/dist/index.esm.js +1323 -298
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/lua.cjs.js +8 -18
  8. package/dist/lua.cjs.js.map +1 -1
  9. package/dist/lua.d.ts +0 -2
  10. package/dist/lua.esm.js +8 -18
  11. package/dist/lua.esm.js.map +1 -1
  12. package/dist/react.cjs.js +2848 -35
  13. package/dist/react.cjs.js.map +1 -1
  14. package/dist/react.d.ts +17 -6
  15. package/dist/react.esm.js +2848 -36
  16. package/dist/react.esm.js.map +1 -1
  17. package/dist/ui.cjs.js +1913 -592
  18. package/dist/ui.cjs.js.map +1 -1
  19. package/dist/ui.d.ts +528 -46
  20. package/dist/ui.esm.js +1911 -594
  21. package/dist/ui.esm.js.map +1 -1
  22. package/dist/vite.cjs.js +1 -11
  23. package/dist/vite.cjs.js.map +1 -1
  24. package/dist/vite.d.ts +1 -1
  25. package/dist/vite.esm.js +1 -11
  26. package/dist/vite.esm.js.map +1 -1
  27. package/package.json +3 -18
  28. package/src/index.ts +3 -3
  29. package/src/lua/LuaEngine.ts +8 -18
  30. package/src/react/applyProps.ts +90 -2
  31. package/src/react/extendAll.ts +29 -6
  32. package/src/react/index.ts +1 -1
  33. package/src/react/jsx.d.ts +249 -0
  34. package/src/react/reconciler.ts +80 -7
  35. package/src/ui/BalanceDisplay.ts +31 -38
  36. package/src/ui/Button.ts +217 -53
  37. package/src/ui/FlexContainer.ts +529 -0
  38. package/src/ui/Label.ts +13 -0
  39. package/src/ui/Layout.ts +86 -87
  40. package/src/ui/Modal.ts +11 -1
  41. package/src/ui/Panel.ts +108 -36
  42. package/src/ui/ProgressBar.ts +85 -31
  43. package/src/ui/ScrollContainer.ts +397 -45
  44. package/src/ui/Slider.ts +241 -0
  45. package/src/ui/Toast.ts +47 -17
  46. package/src/ui/Toggle.ts +201 -0
  47. package/src/ui/WinDisplay.ts +51 -39
  48. package/src/ui/index.ts +9 -11
  49. package/src/ui/view.ts +28 -0
  50. package/src/vite/index.ts +1 -11
package/dist/index.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import { Container, ApplicationOptions, Application, Texture, AnimatedSprite, Spritesheet, TextStyle, ColorSource } from 'pixi.js';
2
2
  import { CasinoGameSDK, InitData, GameConfigData, SessionData, PlayParams, PlayResultData } from '@energy8platform/game-sdk';
3
3
  export { AnywhereWinData, BalanceData, BridgeDestroyedError, BridgeNotReadyError, GameConfigData, InitData, PaylineData, PlayParams, PlayResultData, SDKError, SessionData, SymbolData, TimeoutError, WinLineData } from '@energy8platform/game-sdk';
4
- import { FancyButton, ScrollBox } from '@pixi/ui';
5
- import { LayoutContainer } from '@pixi/layout/components';
6
4
 
7
5
  declare enum ScaleMode {
8
6
  /** Fit inside container, maintain aspect ratio (letterbox/pillarbox) */
@@ -1264,11 +1262,144 @@ declare class SpriteAnimation {
1264
1262
  static getTexturesByPrefix(sheet: Spritesheet, prefix: string): Texture[];
1265
1263
  }
1266
1264
 
1265
+ type FlexDirection = 'row' | 'column';
1266
+ type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
1267
+ type AlignItems = 'start' | 'center' | 'end' | 'stretch';
1268
+ type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch';
1269
+ interface FlexItemConfig {
1270
+ /** Flex grow factor (0 = fixed size) */
1271
+ flexGrow?: number;
1272
+ /** Flex shrink factor (0 = don't shrink, default: 1) */
1273
+ flexShrink?: number;
1274
+ /** Explicit width override for layout calculations */
1275
+ layoutWidth?: number;
1276
+ /** Explicit height override for layout calculations */
1277
+ layoutHeight?: number;
1278
+ /** Override parent's alignItems for this child */
1279
+ alignSelf?: AlignSelf;
1280
+ /** Exclude from flex layout (acts like position: absolute) */
1281
+ flexExclude?: boolean;
1282
+ }
1283
+ interface FlexContainerConfig {
1284
+ /** Layout direction (default: 'row') */
1285
+ direction?: FlexDirection;
1286
+ /** Main-axis distribution (default: 'start') */
1287
+ justifyContent?: JustifyContent;
1288
+ /** Cross-axis alignment (default: 'start') */
1289
+ alignItems?: AlignItems;
1290
+ /** Gap between children in pixels (default: 0) */
1291
+ gap?: number;
1292
+ /** Padding [top, right, bottom, left] or single number (default: 0) */
1293
+ padding?: number | [number, number, number, number];
1294
+ /** Enable wrapping to next line (default: false) */
1295
+ flexWrap?: boolean;
1296
+ /** Maximum width before wrapping (only with flexWrap) */
1297
+ maxWidth?: number;
1298
+ /** Maximum height before wrapping (only with flexWrap + column) */
1299
+ maxHeight?: number;
1300
+ /** Explicit container width (used for cross-axis alignment/stretch) */
1301
+ width?: number;
1302
+ /** Explicit container height (used for cross-axis alignment/stretch) */
1303
+ height?: number;
1304
+ }
1305
+ /**
1306
+ * Lightweight flexbox-like layout container for PixiJS.
1307
+ *
1308
+ * Supports row/column direction, justify/align, gap, padding, wrapping,
1309
+ * and flex-grow distribution. Zero external dependencies.
1310
+ *
1311
+ * @example
1312
+ * ```ts
1313
+ * const toolbar = new FlexContainer({
1314
+ * direction: 'row',
1315
+ * justifyContent: 'space-between',
1316
+ * alignItems: 'center',
1317
+ * gap: 16,
1318
+ * padding: 12,
1319
+ * });
1320
+ *
1321
+ * toolbar.addFlexChild(button1);
1322
+ * toolbar.addFlexChild(button2);
1323
+ * toolbar.resize(800, 60);
1324
+ * ```
1325
+ */
1326
+ declare class FlexContainer extends Container {
1327
+ readonly __uiComponent: true;
1328
+ private _config;
1329
+ private _padding;
1330
+ private _maxWidth;
1331
+ private _maxHeight;
1332
+ /** @internal */ _explicitWidth: number;
1333
+ /** @internal */ _explicitHeight: number;
1334
+ private _layoutChildren;
1335
+ private _layoutDirty;
1336
+ constructor(config?: FlexContainerConfig);
1337
+ /** Add a child with optional flex config. Also registers in flex layout. */
1338
+ addFlexChild(child: Container, flexConfig?: FlexItemConfig): this;
1339
+ /** Remove a child from flex layout and display list */
1340
+ removeFlexChild(child: Container): this;
1341
+ /** Remove all flex children */
1342
+ clearFlexChildren(): this;
1343
+ /**
1344
+ * Override addChild so children automatically participate in flex layout.
1345
+ * This enables declarative usage from React JSX.
1346
+ */
1347
+ addChild<T extends Container>(...children: T[]): T;
1348
+ removeChild<T extends Container>(...children: T[]): T;
1349
+ /** Get all flex layout children (read-only) */
1350
+ get flexChildren(): readonly Container[];
1351
+ /** Update the container size and recalculate layout */
1352
+ resize(width: number, height: number): void;
1353
+ /** Update layout direction */
1354
+ setDirection(direction: FlexDirection): void;
1355
+ /** Update justifyContent */
1356
+ setJustifyContent(justify: JustifyContent): void;
1357
+ /** Update alignItems */
1358
+ setAlignItems(align: AlignItems): void;
1359
+ /** Update gap */
1360
+ setGap(gap: number): void;
1361
+ /** Update padding */
1362
+ setPadding(padding: number | [number, number, number, number]): void;
1363
+ /**
1364
+ * Recalculate and apply layout positions for all children.
1365
+ * Called automatically by `resize()`. Call manually after
1366
+ * adding/removing children without resize.
1367
+ */
1368
+ updateLayout(): void;
1369
+ /** Computed content size (after layout) */
1370
+ getContentSize(): {
1371
+ width: number;
1372
+ height: number;
1373
+ };
1374
+ /** React reconciler update hook — applies changed config props */
1375
+ updateConfig(changed: Record<string, any>): void;
1376
+ destroy(options?: boolean | {
1377
+ children?: boolean;
1378
+ texture?: boolean;
1379
+ textureSource?: boolean;
1380
+ }): void;
1381
+ }
1382
+
1383
+ /**
1384
+ * Universal view input type for UI component visual slots.
1385
+ *
1386
+ * - `string` — texture name, resolved via `Sprite.from()`
1387
+ * - `Texture` — wrapped in a `Sprite`
1388
+ * - `Container` — used as-is (Sprite, Graphics, NineSliceSprite, AnimatedSprite, custom...)
1389
+ */
1390
+ type ViewInput = string | Texture | Container;
1391
+
1267
1392
  type ButtonState = 'default' | 'hover' | 'pressed' | 'disabled';
1268
1393
  interface ButtonConfig {
1269
- /** Default texture/sprite for each state (optional uses Graphics if not provided) */
1270
- textures?: Partial<Record<ButtonState, string | Texture>>;
1271
- /** Width (for Graphics-based button) */
1394
+ /** Custom view for default state (string texture name, Texture, or Container) */
1395
+ defaultView?: ViewInput;
1396
+ /** Custom view for hover state */
1397
+ hoverView?: ViewInput;
1398
+ /** Custom view for pressed state */
1399
+ pressedView?: ViewInput;
1400
+ /** Custom view for disabled state */
1401
+ disabledView?: ViewInput;
1402
+ /** Width (for Graphics-based button, ignored when custom views provided) */
1272
1403
  width?: number;
1273
1404
  /** Height (for Graphics-based button) */
1274
1405
  height?: number;
@@ -1282,67 +1413,138 @@ interface ButtonConfig {
1282
1413
  animationDuration?: number;
1283
1414
  /** Start disabled */
1284
1415
  disabled?: boolean;
1285
- /** Button text */
1416
+ /** Button text (rendered on top of the view) */
1286
1417
  text?: string;
1287
1418
  /** Button text style */
1288
1419
  textStyle?: Record<string, unknown>;
1420
+ /** Press callback */
1421
+ onPress?: () => void;
1289
1422
  }
1290
1423
  /**
1291
- * Interactive button component powered by `@pixi/ui` FancyButton.
1424
+ * Interactive button with per-state custom views and animations.
1292
1425
  *
1293
- * Supports both texture-based and Graphics-based rendering with
1294
- * per-state views, press animation, and text.
1426
+ * Each visual state accepts a `ViewInput`: texture name, Texture, or any Container
1427
+ * (Sprite, NineSliceSprite, AnimatedSprite, custom artwork, etc).
1428
+ * Falls back to colored Graphics when no custom view is provided.
1295
1429
  *
1296
1430
  * @example
1297
1431
  * ```ts
1432
+ * // Graphics-based (quick prototyping)
1298
1433
  * const btn = new Button({
1299
1434
  * width: 200, height: 60, borderRadius: 12,
1300
1435
  * colors: { default: 0x22aa22, hover: 0x33cc33 },
1301
1436
  * text: 'SPIN',
1437
+ * onPress: () => spin(),
1302
1438
  * });
1303
1439
  *
1304
- * btn.onPress.connect(() => console.log('Clicked!'));
1305
- * scene.container.addChild(btn);
1440
+ * // Asset-based (production art)
1441
+ * const btn = new Button({
1442
+ * defaultView: 'btn-idle',
1443
+ * hoverView: 'btn-hover',
1444
+ * pressedView: 'btn-pressed',
1445
+ * disabledView: 'btn-disabled',
1446
+ * text: 'SPIN',
1447
+ * onPress: () => spin(),
1448
+ * });
1449
+ *
1450
+ * // Custom Container view
1451
+ * const btn = new Button({
1452
+ * defaultView: myAnimatedSprite,
1453
+ * text: 'SPIN',
1454
+ * });
1306
1455
  * ```
1307
1456
  */
1308
- declare class Button extends FancyButton {
1309
- private _buttonConfig;
1457
+ declare class Button extends Container {
1458
+ readonly __uiComponent: true;
1459
+ private _views;
1460
+ private _state;
1461
+ private _enabled;
1462
+ private _config;
1463
+ private _textObj;
1464
+ /** Press callback */
1465
+ onPress?: () => void;
1310
1466
  constructor(config?: ButtonConfig);
1467
+ /** Current button state */
1468
+ get state(): ButtonState;
1311
1469
  /** Enable the button */
1312
1470
  enable(): void;
1313
1471
  /** Disable the button */
1314
1472
  disable(): void;
1473
+ /** Whether the button is enabled */
1474
+ get enabled(): boolean;
1475
+ set enabled(value: boolean);
1315
1476
  /** Whether the button is disabled */
1316
1477
  get disabled(): boolean;
1478
+ /** Update button text */
1479
+ set text(value: string);
1480
+ private _buildViews;
1481
+ private _rebuildViews;
1482
+ private _setState;
1483
+ private _onPointerOver;
1484
+ private _onPointerOut;
1485
+ private _onPointerDown;
1486
+ private _onPointerUp;
1487
+ private _onPointerUpOutside;
1488
+ /** React reconciler update hook */
1489
+ updateConfig(changed: Record<string, any>): void;
1490
+ destroy(options?: boolean | {
1491
+ children?: boolean;
1492
+ texture?: boolean;
1493
+ textureSource?: boolean;
1494
+ }): void;
1317
1495
  }
1318
1496
 
1319
1497
  interface ProgressBarConfig {
1498
+ /** Width of the bar */
1320
1499
  width?: number;
1500
+ /** Height of the bar */
1321
1501
  height?: number;
1502
+ /** Corner radius (for Graphics-based bar) */
1322
1503
  borderRadius?: number;
1504
+ /** Fill color (for Graphics-based bar, ignored when fillView provided) */
1323
1505
  fillColor?: number;
1506
+ /** Track background color (for Graphics-based bar, ignored when trackView provided) */
1324
1507
  trackColor?: number;
1508
+ /** Border color */
1325
1509
  borderColor?: number;
1510
+ /** Border width */
1326
1511
  borderWidth?: number;
1327
1512
  /** Animated fill (smoothly interpolate) */
1328
1513
  animated?: boolean;
1329
1514
  /** Animation speed (0..1 per frame, default: 0.1) */
1330
1515
  animationSpeed?: number;
1516
+ /** Custom track background (string texture name, Texture, or Container) */
1517
+ trackView?: ViewInput;
1518
+ /** Custom fill bar (string texture name, Texture, or Container) */
1519
+ fillView?: ViewInput;
1331
1520
  }
1332
1521
  /**
1333
- * Horizontal progress bar powered by `@pixi/ui` ProgressBar.
1522
+ * Horizontal progress bar with optional custom track/fill views.
1334
1523
  *
1335
- * Provides optional smooth animated fill via per-frame `update()`.
1524
+ * Supports asset-based skinning: provide `trackView` and/or `fillView`
1525
+ * as texture names, Textures, or any Container (NineSliceSprite, custom artwork, etc).
1526
+ * Falls back to colored Graphics when no custom views are provided.
1336
1527
  *
1337
1528
  * @example
1338
1529
  * ```ts
1530
+ * // Graphics-based (quick prototyping)
1339
1531
  * const bar = new ProgressBar({ width: 300, height: 20, fillColor: 0x22cc22 });
1340
- * scene.container.addChild(bar);
1341
- * bar.progress = 0.5; // 50%
1532
+ * bar.progress = 0.5;
1533
+ *
1534
+ * // Asset-based (production art)
1535
+ * const bar = new ProgressBar({
1536
+ * width: 300, height: 20,
1537
+ * trackView: 'bar-track',
1538
+ * fillView: new NineSliceSprite({ texture: 'bar-fill', ... }),
1539
+ * });
1540
+ * bar.progress = 0.75;
1342
1541
  * ```
1343
1542
  */
1344
1543
  declare class ProgressBar extends Container {
1345
- private _bar;
1544
+ readonly __uiComponent: true;
1545
+ private _track;
1546
+ private _fill;
1547
+ private _fillMask;
1346
1548
  private _borderGfx;
1347
1549
  private _config;
1348
1550
  private _progress;
@@ -1355,6 +1557,9 @@ declare class ProgressBar extends Container {
1355
1557
  * Call each frame if animated is true.
1356
1558
  */
1357
1559
  update(_dt: number): void;
1560
+ /** React reconciler update hook */
1561
+ updateConfig(changed: Record<string, any>): void;
1562
+ private updateMask;
1358
1563
  }
1359
1564
 
1360
1565
  interface LabelConfig {
@@ -1379,6 +1584,7 @@ interface LabelConfig {
1379
1584
  * ```
1380
1585
  */
1381
1586
  declare class Label extends Container {
1587
+ readonly __uiComponent: true;
1382
1588
  private _text;
1383
1589
  private _maxWidth;
1384
1590
  private _autoFit;
@@ -1402,6 +1608,8 @@ declare class Label extends Container {
1402
1608
  * Format a number with thousands separators.
1403
1609
  */
1404
1610
  setNumber(value: number, decimals?: number, locale?: string): void;
1611
+ /** React reconciler update hook */
1612
+ updateConfig(changed: Record<string, any>): void;
1405
1613
  private fitText;
1406
1614
  }
1407
1615
 
@@ -1426,12 +1634,14 @@ interface PanelConfig {
1426
1634
  nineSliceBorders?: [number, number, number, number];
1427
1635
  /** Padding inside the panel */
1428
1636
  padding?: number;
1637
+ /** Flex layout config for content */
1638
+ layout?: Partial<FlexContainerConfig>;
1429
1639
  }
1430
1640
  /**
1431
- * Background panel powered by `@pixi/layout` LayoutContainer.
1641
+ * Background panel with optional flexbox content layout.
1432
1642
  *
1433
1643
  * Supports both Graphics-based (color + border) and 9-slice sprite backgrounds.
1434
- * Children added to `content` participate in flexbox layout automatically.
1644
+ * Children added via `addContent()` participate in flex layout automatically.
1435
1645
  *
1436
1646
  * @example
1437
1647
  * ```ts
@@ -1446,13 +1656,32 @@ interface PanelConfig {
1446
1656
  * });
1447
1657
  * ```
1448
1658
  */
1449
- declare class Panel extends LayoutContainer {
1659
+ declare class Panel extends Container {
1660
+ readonly __uiComponent: true;
1661
+ private _bg;
1662
+ private _content;
1663
+ private _internalSetup;
1450
1664
  private _panelConfig;
1451
1665
  constructor(config?: PanelConfig);
1452
- /** Access the content container (children added here participate in layout) */
1453
- get content(): Container;
1666
+ /** Access the content flex container — add children here for layout */
1667
+ get content(): FlexContainer;
1668
+ /** Convenience: add a child to the content layout */
1669
+ addContent(child: Container): this;
1454
1670
  /** Resize the panel */
1455
1671
  setSize(width: number, height: number): void;
1672
+ /**
1673
+ * Override addChild so external children are routed to content FlexContainer.
1674
+ * Enables `<panel><label /><button /></panel>` in React JSX.
1675
+ */
1676
+ addChild<T extends Container>(...children: T[]): T;
1677
+ removeChild<T extends Container>(...children: T[]): T;
1678
+ /** React reconciler update hook */
1679
+ updateConfig(changed: Record<string, any>): void;
1680
+ destroy(options?: boolean | {
1681
+ children?: boolean;
1682
+ texture?: boolean;
1683
+ textureSource?: boolean;
1684
+ }): void;
1456
1685
  }
1457
1686
 
1458
1687
  interface BalanceDisplayConfig {
@@ -1475,7 +1704,7 @@ interface BalanceDisplayConfig {
1475
1704
  * Reactive balance display component.
1476
1705
  *
1477
1706
  * Automatically formats currency and can animate value changes
1478
- * with a smooth countup/countdown effect.
1707
+ * with a smooth countup/countdown effect using engine Tween.
1479
1708
  *
1480
1709
  * @example
1481
1710
  * ```ts
@@ -1487,13 +1716,14 @@ interface BalanceDisplayConfig {
1487
1716
  * ```
1488
1717
  */
1489
1718
  declare class BalanceDisplay extends Container {
1719
+ readonly __uiComponent: true;
1490
1720
  private _prefixLabel;
1491
1721
  private _valueLabel;
1492
1722
  private _config;
1493
1723
  private _currentValue;
1494
1724
  private _displayedValue;
1495
- private _animating;
1496
- private _animationCancelled;
1725
+ /** Internal target for Tween animation */
1726
+ private _tweenTarget;
1497
1727
  constructor(config?: BalanceDisplayConfig);
1498
1728
  /** Current displayed value */
1499
1729
  get value(): number;
@@ -1508,6 +1738,13 @@ declare class BalanceDisplay extends Container {
1508
1738
  private animateValue;
1509
1739
  private updateDisplay;
1510
1740
  private layoutLabels;
1741
+ /** React reconciler update hook */
1742
+ updateConfig(changed: Record<string, any>): void;
1743
+ destroy(options?: boolean | {
1744
+ children?: boolean;
1745
+ texture?: boolean;
1746
+ textureSource?: boolean;
1747
+ }): void;
1511
1748
  }
1512
1749
 
1513
1750
  interface WinDisplayConfig {
@@ -1526,7 +1763,7 @@ interface WinDisplayConfig {
1526
1763
  * Win amount display with countup animation.
1527
1764
  *
1528
1765
  * Shows a dramatic countup from 0 to the win amount, with optional
1529
- * scale pop effect — typical of slot games.
1766
+ * scale pop effect — typical of slot games. Uses engine Tween system.
1530
1767
  *
1531
1768
  * @example
1532
1769
  * ```ts
@@ -1537,9 +1774,11 @@ interface WinDisplayConfig {
1537
1774
  * ```
1538
1775
  */
1539
1776
  declare class WinDisplay extends Container {
1777
+ readonly __uiComponent: true;
1540
1778
  private _label;
1541
1779
  private _config;
1542
- private _cancelCountup;
1780
+ /** Internal target for Tween countup */
1781
+ private _tweenTarget;
1543
1782
  constructor(config?: WinDisplayConfig);
1544
1783
  /**
1545
1784
  * Show a win with countup animation.
@@ -1557,6 +1796,13 @@ declare class WinDisplay extends Container {
1557
1796
  */
1558
1797
  hide(): void;
1559
1798
  private displayAmount;
1799
+ /** React reconciler update hook */
1800
+ updateConfig(changed: Record<string, any>): void;
1801
+ destroy(options?: boolean | {
1802
+ children?: boolean;
1803
+ texture?: boolean;
1804
+ textureSource?: boolean;
1805
+ }): void;
1560
1806
  }
1561
1807
 
1562
1808
  interface ModalConfig {
@@ -1573,7 +1819,7 @@ interface ModalConfig {
1573
1819
  * Modal overlay component.
1574
1820
  * Shows content on top of a dark overlay with enter/exit animations.
1575
1821
  *
1576
- * The content container uses `@pixi/layout` for automatic centering.
1822
+ * Content is automatically centered via position calculations.
1577
1823
  *
1578
1824
  * @example
1579
1825
  * ```ts
@@ -1584,6 +1830,7 @@ interface ModalConfig {
1584
1830
  * ```
1585
1831
  */
1586
1832
  declare class Modal extends Container {
1833
+ readonly __uiComponent: true;
1587
1834
  private _overlay;
1588
1835
  private _contentContainer;
1589
1836
  private _config;
@@ -1603,6 +1850,8 @@ declare class Modal extends Container {
1603
1850
  * Hide the modal with animation.
1604
1851
  */
1605
1852
  hide(): Promise<void>;
1853
+ /** React reconciler update hook */
1854
+ updateConfig(changed: Record<string, any>): void;
1606
1855
  }
1607
1856
 
1608
1857
  type ToastType = 'info' | 'success' | 'warning' | 'error';
@@ -1611,6 +1860,8 @@ interface ToastConfig {
1611
1860
  duration?: number;
1612
1861
  /** Toast position from bottom */
1613
1862
  bottomOffset?: number;
1863
+ /** Custom background view (string texture name, Texture, or Container). Sized to fit text. */
1864
+ backgroundView?: ViewInput;
1614
1865
  }
1615
1866
  /**
1616
1867
  * Toast notification component for displaying transient messages.
@@ -1623,10 +1874,12 @@ interface ToastConfig {
1623
1874
  * ```
1624
1875
  */
1625
1876
  declare class Toast extends Container {
1877
+ readonly __uiComponent: true;
1626
1878
  private _bg;
1879
+ private _customBg;
1627
1880
  private _text;
1628
1881
  private _config;
1629
- private _dismissTimeout;
1882
+ private _dismissPending;
1630
1883
  constructor(config?: ToastConfig);
1631
1884
  /**
1632
1885
  * Show a toast message.
@@ -1636,6 +1889,13 @@ declare class Toast extends Container {
1636
1889
  * Dismiss the toast.
1637
1890
  */
1638
1891
  dismiss(): Promise<void>;
1892
+ /** React reconciler update hook */
1893
+ updateConfig(changed: Record<string, any>): void;
1894
+ destroy(options?: boolean | {
1895
+ children?: boolean;
1896
+ texture?: boolean;
1897
+ textureSource?: boolean;
1898
+ }): void;
1639
1899
  }
1640
1900
 
1641
1901
  type LayoutDirection = 'horizontal' | 'vertical' | 'grid' | 'wrap';
@@ -1662,7 +1922,7 @@ interface LayoutConfig {
1662
1922
  breakpoints?: Record<number, Partial<LayoutConfig>>;
1663
1923
  }
1664
1924
  /**
1665
- * Responsive layout container powered by `@pixi/layout` (Yoga flexbox engine).
1925
+ * Responsive layout container powered by a lightweight built-in flex layout solver.
1666
1926
  *
1667
1927
  * Supports horizontal, vertical, grid, and wrap layout modes with
1668
1928
  * alignment, padding, gap, and viewport-anchor positioning.
@@ -1689,6 +1949,7 @@ interface LayoutConfig {
1689
1949
  * ```
1690
1950
  */
1691
1951
  declare class Layout extends Container {
1952
+ readonly __uiComponent: true;
1692
1953
  private _layoutConfig;
1693
1954
  private _padding;
1694
1955
  private _anchor;
@@ -1697,6 +1958,7 @@ declare class Layout extends Container {
1697
1958
  private _items;
1698
1959
  private _viewportWidth;
1699
1960
  private _viewportHeight;
1961
+ private _flex;
1700
1962
  constructor(config?: LayoutConfig);
1701
1963
  /** Add an item to the layout */
1702
1964
  addItem(child: Container): this;
@@ -1712,9 +1974,16 @@ declare class Layout extends Container {
1712
1974
  */
1713
1975
  updateViewport(width: number, height: number): void;
1714
1976
  private applyLayoutStyles;
1715
- private applyGridChildWidth;
1977
+ private buildFlexItemConfig;
1716
1978
  private applyAnchor;
1717
1979
  private resolveConfig;
1980
+ /** React reconciler update hook */
1981
+ updateConfig(changed: Record<string, any>): void;
1982
+ destroy(options?: boolean | {
1983
+ children?: boolean;
1984
+ texture?: boolean;
1985
+ textureSource?: boolean;
1986
+ }): void;
1718
1987
  }
1719
1988
 
1720
1989
  type ScrollDirection = 'vertical' | 'horizontal' | 'both';
@@ -1733,18 +2002,23 @@ interface ScrollContainerConfig {
1733
2002
  elementsMargin?: number;
1734
2003
  /** Padding */
1735
2004
  padding?: number;
1736
- /** Disable dynamic rendering (render all items even when offscreen) */
1737
- disableDynamicRendering?: boolean;
1738
2005
  /** Disable easing/inertia */
1739
2006
  disableEasing?: boolean;
1740
- /** Global scroll scroll even when mouse is not over the component */
1741
- globalScroll?: boolean;
2007
+ /** Show scrollbar indicator (default: false) */
2008
+ scrollbar?: boolean;
2009
+ /** Custom scrollbar thumb view (string texture name, Texture, or Container) */
2010
+ thumbView?: ViewInput;
2011
+ /** Scrollbar width in px (default: 6) */
2012
+ scrollbarWidth?: number;
2013
+ /** Scrollbar padding from edge (default: 4) */
2014
+ scrollbarPadding?: number;
2015
+ /** Scrollbar color (when no thumbView, default: 0xaaaaaa) */
2016
+ scrollbarColor?: number;
2017
+ /** Scrollbar alpha (default: 0.5) */
2018
+ scrollbarAlpha?: number;
1742
2019
  }
1743
2020
  /**
1744
- * Scrollable container powered by `@pixi/ui` ScrollBox.
1745
- *
1746
- * Provides touch/drag scrolling, mouse wheel support, inertia, and
1747
- * dynamic rendering optimization for off-screen items.
2021
+ * Scrollable container with touch/drag, mouse wheel, and inertia.
1748
2022
  *
1749
2023
  * @example
1750
2024
  * ```ts
@@ -1762,20 +2036,69 @@ interface ScrollContainerConfig {
1762
2036
  * scene.container.addChild(scroll);
1763
2037
  * ```
1764
2038
  */
1765
- declare class ScrollContainer extends ScrollBox {
2039
+ declare class ScrollContainer extends Container {
2040
+ readonly __uiComponent: true;
2041
+ private _viewport;
2042
+ private _internalSetup;
2043
+ private _content;
2044
+ private _maskGfx;
2045
+ private _bg;
1766
2046
  private _scrollConfig;
2047
+ private _items;
2048
+ private _scrollbar;
2049
+ private _scrollbarConfig;
2050
+ private _dragging;
2051
+ private _dragStart;
2052
+ private _contentStart;
2053
+ private _velocity;
2054
+ private _lastDragPos;
2055
+ private _lastDragTime;
2056
+ private _inertiaActive;
2057
+ private _onTickBound;
2058
+ private _onWheelBound;
1767
2059
  constructor(config: ScrollContainerConfig);
1768
- /** Set scrollable content. Replaces any existing content. */
2060
+ /**
2061
+ * Override addChild so external children are routed to scroll content.
2062
+ * Enables `<scrollContainer><label /><panel /></scrollContainer>` in React JSX.
2063
+ */
2064
+ addChild<T extends Container>(...children: T[]): T;
2065
+ removeChild<T extends Container>(...children: T[]): T;
2066
+ /** React reconciler update hook */
2067
+ updateConfig(changed: Record<string, any>): void;
2068
+ /** Enable mouse wheel scrolling (call after adding to stage) */
2069
+ enableWheel(canvas: HTMLCanvasElement): void;
2070
+ /** Set scrollable content. Replaces any existing items. */
1769
2071
  setContent(content: Container): void;
1770
2072
  /** Add a single item */
1771
- addItem(...items: Container[]): Container;
1772
- /** Scroll to make a specific item/child visible */
2073
+ addItem(child: Container): this;
2074
+ /** Remove all items */
2075
+ clearItems(): void;
2076
+ /** Get items */
2077
+ get items(): readonly Container[];
2078
+ /** Scroll to make a specific item index visible */
1773
2079
  scrollToItem(index: number): void;
1774
2080
  /** Current scroll position */
1775
2081
  get scrollPosition(): {
1776
2082
  x: number;
1777
2083
  y: number;
1778
2084
  };
2085
+ /** Resize the scroll viewport */
2086
+ setViewportSize(width: number, height: number): void;
2087
+ private layoutItems;
2088
+ private _onPointerDown;
2089
+ private _onPointerMove;
2090
+ private _onPointerUp;
2091
+ private startInertia;
2092
+ private stopInertia;
2093
+ private _inertiaTick;
2094
+ private _onWheel;
2095
+ private clampScroll;
2096
+ private updateScrollbar;
2097
+ destroy(options?: boolean | {
2098
+ children?: boolean;
2099
+ texture?: boolean;
2100
+ textureSource?: boolean;
2101
+ }): void;
1779
2102
  }
1780
2103
 
1781
2104
  /**
@@ -1967,5 +2290,5 @@ declare class DevBridge {
1967
2290
  private delayedSend;
1968
2291
  }
1969
2292
 
1970
- 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 };
1971
- export type { ActionDefinition, AssetBundle, AssetEntry, AssetManifest, AudioConfig, BalanceDisplayConfig, ButtonConfig, ButtonState, DevBridgeConfig, EasingFunction, GameApplicationConfig, GameDefinition, GameEngineEvents, IScene, LabelConfig, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, LoadingScreenConfig, LuaEngineConfig, LuaPlayResult, ModalConfig, PanelConfig, ProgressBarConfig, SceneConstructor, ScrollContainerConfig, ScrollDirection, SpriteAnimationConfig, ToastConfig, ToastType, TransitionConfig, TransitionRule, TweenOptions, WinDisplayConfig };
2293
+ 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 };
2294
+ export type { ActionDefinition, AlignItems, AssetBundle, AssetEntry, AssetManifest, AudioConfig, BalanceDisplayConfig, ButtonConfig, ButtonState, DevBridgeConfig, EasingFunction, FlexContainerConfig, FlexDirection, FlexItemConfig, GameApplicationConfig, GameDefinition, GameEngineEvents, IScene, JustifyContent, LabelConfig, LayoutAlignment, LayoutAnchor, LayoutConfig, LayoutDirection, LoadingScreenConfig, LuaEngineConfig, LuaPlayResult, ModalConfig, PanelConfig, ProgressBarConfig, SceneConstructor, ScrollContainerConfig, ScrollDirection, SpriteAnimationConfig, ToastConfig, ToastType, TransitionConfig, TransitionRule, TweenOptions, WinDisplayConfig };