@energy8platform/game-engine 0.2.0 → 0.3.0

package/dist/ui.esm.js

@@ -154,9 +154,20 @@ class Tween {
     }
     /**
      * Wait for a given duration (useful in timelines).
+     * Uses PixiJS Ticker for consistent timing with other tweens.
      */
     static delay(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
+        return new Promise((resolve) => {
+            let elapsed = 0;
+            const onTick = (ticker) => {
+                elapsed += ticker.deltaMS;
+                if (elapsed >= ms) {
+                    Ticker.shared.remove(onTick);
+                    resolve();
+                }
+            };
+            Ticker.shared.add(onTick);
+        });
     }
     /**
      * Kill all tweens on a target.
@@ -183,6 +194,20 @@ class Tween {
     static get activeTweens() {
         return Tween._tweens.length;
     }
+    /**
+     * Reset the tween system — kill all tweens and remove the ticker.
+     * Useful for cleanup between game instances, tests, or hot-reload.
+     */
+    static reset() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
+        if (Tween._tickerAdded) {
+            Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    }
     // ─── Internal ──────────────────────────────────────────
     static ensureTicker() {
         if (Tween._tickerAdded)
@@ -694,6 +719,7 @@ class BalanceDisplay extends Container {
     _currentValue = 0;
     _displayedValue = 0;
     _animating = false;
+    _animationCancelled = false;
     constructor(config = {}) {
         super();
         this._config = {
@@ -755,11 +781,22 @@ class BalanceDisplay extends Container {
         this.updateDisplay();
     }
     async animateValue(from, to) {
+        // Cancel any ongoing animation
+        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 cancelled by a newer animation, stop immediately
+                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);
@@ -1068,5 +1105,722 @@ class Toast extends Container {
     }
 }
 
-export { BalanceDisplay, Button, Label, Modal, Panel, ProgressBar, Toast, WinDisplay };
+/**
+ * Responsive layout container that automatically arranges its children.
+ *
+ * Supports horizontal, vertical, grid, and wrap layout modes with
+ * alignment, padding, gap, and viewport-anchor positioning.
+ * Breakpoints allow different layouts for different screen sizes.
+ *
+ * @example
+ * ```ts
+ * const toolbar = new Layout({
+ *   direction: 'horizontal',
+ *   gap: 20,
+ *   alignment: 'center',
+ *   anchor: 'bottom-center',
+ *   padding: 16,
+ *   breakpoints: {
+ *     768: { direction: 'vertical', gap: 10 },
+ *   },
+ * });
+ *
+ * toolbar.addItem(spinButton);
+ * toolbar.addItem(betLabel);
+ * scene.container.addChild(toolbar);
+ *
+ * // On resize, update layout position relative to viewport
+ * toolbar.updateViewport(width, height);
+ * ```
+ */
+class Layout extends Container {
+    _config;
+    _padding;
+    _anchor;
+    _maxWidth;
+    _breakpoints;
+    _content;
+    _items = [];
+    _viewportWidth = 0;
+    _viewportHeight = 0;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            direction: config.direction ?? 'vertical',
+            gap: config.gap ?? 0,
+            alignment: config.alignment ?? 'start',
+            autoLayout: config.autoLayout ?? true,
+            columns: config.columns ?? 2,
+        };
+        this._padding = Layout.normalizePadding(config.padding ?? 0);
+        this._anchor = config.anchor ?? 'top-left';
+        this._maxWidth = config.maxWidth ?? Infinity;
+        // Sort breakpoints by width ascending for correct resolution
+        this._breakpoints = config.breakpoints
+            ? Object.entries(config.breakpoints)
+                .map(([w, cfg]) => [Number(w), cfg])
+                .sort((a, b) => a[0] - b[0])
+            : [];
+        this._content = new Container();
+        this.addChild(this._content);
+    }
+    /** Add an item to the layout */
+    addItem(child) {
+        this._items.push(child);
+        this._content.addChild(child);
+        if (this._config.autoLayout)
+            this.layout();
+        return this;
+    }
+    /** Remove an item from the layout */
+    removeItem(child) {
+        const idx = this._items.indexOf(child);
+        if (idx !== -1) {
+            this._items.splice(idx, 1);
+            this._content.removeChild(child);
+            if (this._config.autoLayout)
+                this.layout();
+        }
+        return this;
+    }
+    /** Remove all items */
+    clearItems() {
+        for (const item of this._items) {
+            this._content.removeChild(item);
+        }
+        this._items.length = 0;
+        if (this._config.autoLayout)
+            this.layout();
+        return this;
+    }
+    /** Get all layout items */
+    get items() {
+        return this._items;
+    }
+    /**
+     * Update the viewport size and recalculate layout.
+     * Should be called from `Scene.onResize()`.
+     */
+    updateViewport(width, height) {
+        this._viewportWidth = width;
+        this._viewportHeight = height;
+        this.layout();
+    }
+    /**
+     * Recalculate layout positions of all children.
+     */
+    layout() {
+        if (this._items.length === 0)
+            return;
+        // Resolve effective config (apply breakpoint overrides)
+        const effective = this.resolveConfig();
+        const gap = effective.gap ?? this._config.gap;
+        const direction = effective.direction ?? this._config.direction;
+        const alignment = effective.alignment ?? this._config.alignment;
+        const columns = effective.columns ?? this._config.columns;
+        const padding = effective.padding !== undefined
+            ? Layout.normalizePadding(effective.padding)
+            : this._padding;
+        const maxWidth = effective.maxWidth ?? this._maxWidth;
+        const [pt, pr, pb, pl] = padding;
+        switch (direction) {
+            case 'horizontal':
+                this.layoutLinear('x', 'y', gap, alignment, pl, pt);
+                break;
+            case 'vertical':
+                this.layoutLinear('y', 'x', gap, alignment, pt, pl);
+                break;
+            case 'grid':
+                this.layoutGrid(columns, gap, alignment, pl, pt);
+                break;
+            case 'wrap':
+                this.layoutWrap(maxWidth - pl - pr, gap, alignment, pl, pt);
+                break;
+        }
+        // Apply anchor positioning relative to viewport
+        this.applyAnchor(effective.anchor ?? this._anchor);
+    }
+    // ─── Private layout helpers ────────────────────────────
+    layoutLinear(mainAxis, crossAxis, gap, alignment, mainOffset, crossOffset) {
+        let pos = mainOffset;
+        const sizes = this._items.map(item => this.getItemSize(item));
+        const maxCross = Math.max(...sizes.map(s => (crossAxis === 'x' ? s.width : s.height)));
+        for (let i = 0; i < this._items.length; i++) {
+            const item = this._items[i];
+            const size = sizes[i];
+            item[mainAxis] = pos;
+            // Cross-axis alignment
+            const itemCross = crossAxis === 'x' ? size.width : size.height;
+            switch (alignment) {
+                case 'start':
+                    item[crossAxis] = crossOffset;
+                    break;
+                case 'center':
+                    item[crossAxis] = crossOffset + (maxCross - itemCross) / 2;
+                    break;
+                case 'end':
+                    item[crossAxis] = crossOffset + maxCross - itemCross;
+                    break;
+                case 'stretch':
+                    item[crossAxis] = crossOffset;
+                    // Note: stretch doesn't resize children — that's up to the item
+                    break;
+            }
+            const mainSize = mainAxis === 'x' ? size.width : size.height;
+            pos += mainSize + gap;
+        }
+    }
+    layoutGrid(columns, gap, alignment, offsetX, offsetY) {
+        const sizes = this._items.map(item => this.getItemSize(item));
+        const maxItemWidth = Math.max(...sizes.map(s => s.width));
+        const maxItemHeight = Math.max(...sizes.map(s => s.height));
+        const cellW = maxItemWidth + gap;
+        const cellH = maxItemHeight + gap;
+        for (let i = 0; i < this._items.length; i++) {
+            const item = this._items[i];
+            const col = i % columns;
+            const row = Math.floor(i / columns);
+            const size = sizes[i];
+            // X alignment within cell
+            switch (alignment) {
+                case 'center':
+                    item.x = offsetX + col * cellW + (maxItemWidth - size.width) / 2;
+                    break;
+                case 'end':
+                    item.x = offsetX + col * cellW + maxItemWidth - size.width;
+                    break;
+                default:
+                    item.x = offsetX + col * cellW;
+            }
+            item.y = offsetY + row * cellH;
+        }
+    }
+    layoutWrap(maxWidth, gap, alignment, offsetX, offsetY) {
+        let x = offsetX;
+        let y = offsetY;
+        let rowHeight = 0;
+        const sizes = this._items.map(item => this.getItemSize(item));
+        for (let i = 0; i < this._items.length; i++) {
+            const item = this._items[i];
+            const size = sizes[i];
+            // Check if item fits in current row
+            if (x + size.width > maxWidth + offsetX && x > offsetX) {
+                // Wrap to next row
+                x = offsetX;
+                y += rowHeight + gap;
+                rowHeight = 0;
+            }
+            item.x = x;
+            item.y = y;
+            x += size.width + gap;
+            rowHeight = Math.max(rowHeight, size.height);
+        }
+    }
+    applyAnchor(anchor) {
+        if (this._viewportWidth === 0 || this._viewportHeight === 0)
+            return;
+        const bounds = this._content.getBounds();
+        const contentW = bounds.width;
+        const contentH = bounds.height;
+        const vw = this._viewportWidth;
+        const vh = this._viewportHeight;
+        let anchorX = 0;
+        let anchorY = 0;
+        // Horizontal
+        if (anchor.includes('left')) {
+            anchorX = 0;
+        }
+        else if (anchor.includes('right')) {
+            anchorX = vw - contentW;
+        }
+        else {
+            // center
+            anchorX = (vw - contentW) / 2;
+        }
+        // Vertical
+        if (anchor.startsWith('top')) {
+            anchorY = 0;
+        }
+        else if (anchor.startsWith('bottom')) {
+            anchorY = vh - contentH;
+        }
+        else {
+            // center
+            anchorY = (vh - contentH) / 2;
+        }
+        // Compensate for content's local bounds offset
+        this.x = anchorX - bounds.x;
+        this.y = anchorY - bounds.y;
+    }
+    resolveConfig() {
+        if (this._breakpoints.length === 0 || this._viewportWidth === 0) {
+            return {};
+        }
+        // Find the largest breakpoint that's ≤ current viewport width
+        let resolved = {};
+        for (const [maxWidth, overrides] of this._breakpoints) {
+            if (this._viewportWidth <= maxWidth) {
+                resolved = overrides;
+                break;
+            }
+        }
+        return resolved;
+    }
+    getItemSize(item) {
+        const bounds = item.getBounds();
+        return { width: bounds.width, height: bounds.height };
+    }
+    static normalizePadding(padding) {
+        if (typeof padding === 'number') {
+            return [padding, padding, padding, padding];
+        }
+        return padding;
+    }
+}
+
+/**
+ * Scrollable container with touch/drag, mouse wheel, inertia, and optional scrollbar.
+ *
+ * Perfect for paytables, settings panels, bet history, and any scrollable content
+ * that doesn't fit on screen.
+ *
+ * @example
+ * ```ts
+ * const scroll = new ScrollContainer({
+ *   width: 600,
+ *   height: 400,
+ *   direction: 'vertical',
+ *   showScrollbar: true,
+ *   elasticity: 0.3,
+ * });
+ *
+ * // Add content taller than 400px
+ * const list = new Container();
+ * for (let i = 0; i < 50; i++) {
+ *   const row = createRow(i);
+ *   row.y = i * 40;
+ *   list.addChild(row);
+ * }
+ * scroll.setContent(list);
+ *
+ * scene.container.addChild(scroll);
+ * ```
+ */
+class ScrollContainer extends Container {
+    _config;
+    _viewport;
+    _content = null;
+    _mask;
+    _bg;
+    _scrollbarV = null;
+    _scrollbarH = null;
+    _scrollbarFadeTimeout = null;
+    // Scroll state
+    _scrollX = 0;
+    _scrollY = 0;
+    _velocityX = 0;
+    _velocityY = 0;
+    _isDragging = false;
+    _dragStart = { x: 0, y: 0 };
+    _scrollStart = { x: 0, y: 0 };
+    _lastDragPos = { x: 0, y: 0 };
+    _lastDragTime = 0;
+    _isAnimating = false;
+    _animationFrame = null;
+    constructor(config) {
+        super();
+        this._config = {
+            width: config.width,
+            height: config.height,
+            direction: config.direction ?? 'vertical',
+            showScrollbar: config.showScrollbar ?? true,
+            scrollbarWidth: config.scrollbarWidth ?? 6,
+            scrollbarColor: config.scrollbarColor ?? 0xffffff,
+            scrollbarAlpha: config.scrollbarAlpha ?? 0.4,
+            elasticity: config.elasticity ?? 0.3,
+            inertia: config.inertia ?? 0.92,
+            snapSize: config.snapSize ?? 0,
+            borderRadius: config.borderRadius ?? 0,
+        };
+        // Background
+        this._bg = new Graphics();
+        if (config.backgroundColor !== undefined) {
+            this._bg.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
+                .fill({ color: config.backgroundColor, alpha: config.backgroundAlpha ?? 1 });
+        }
+        this.addChild(this._bg);
+        // Viewport (masked area)
+        this._viewport = new Container();
+        this.addChild(this._viewport);
+        // Mask
+        this._mask = new Graphics();
+        this._mask.roundRect(0, 0, config.width, config.height, this._config.borderRadius)
+            .fill(0xffffff);
+        this.addChild(this._mask);
+        this._viewport.mask = this._mask;
+        // Scrollbars
+        if (this._config.showScrollbar) {
+            if (this._config.direction !== 'horizontal') {
+                this._scrollbarV = new Graphics();
+                this._scrollbarV.alpha = 0;
+                this.addChild(this._scrollbarV);
+            }
+            if (this._config.direction !== 'vertical') {
+                this._scrollbarH = new Graphics();
+                this._scrollbarH.alpha = 0;
+                this.addChild(this._scrollbarH);
+            }
+        }
+        // Interaction
+        this.eventMode = 'static';
+        this.cursor = 'grab';
+        this.hitArea = { contains: (x, y) => x >= 0 && x <= config.width && y >= 0 && y <= config.height };
+        this.on('pointerdown', this.onPointerDown);
+        this.on('pointermove', this.onPointerMove);
+        this.on('pointerup', this.onPointerUp);
+        this.on('pointerupoutside', this.onPointerUp);
+        this.on('wheel', this.onWheel);
+    }
+    /** Set scrollable content. Replaces any existing content. */
+    setContent(content) {
+        if (this._content) {
+            this._viewport.removeChild(this._content);
+        }
+        this._content = content;
+        this._viewport.addChild(content);
+        this._scrollX = 0;
+        this._scrollY = 0;
+        this.applyScroll();
+    }
+    /** Get the content container */
+    get content() {
+        return this._content;
+    }
+    /** Scroll to a specific position (in content coordinates) */
+    scrollTo(x, y, animate = true) {
+        if (!animate) {
+            this._scrollX = x;
+            this._scrollY = y;
+            this.clampScroll();
+            this.applyScroll();
+            return;
+        }
+        this.animateScrollTo(x, y);
+    }
+    /** Scroll to make a specific item/child visible */
+    scrollToItem(index) {
+        if (this._config.snapSize > 0) {
+            const pos = index * this._config.snapSize;
+            if (this._config.direction === 'horizontal') {
+                this.scrollTo(pos, this._scrollY);
+            }
+            else {
+                this.scrollTo(this._scrollX, pos);
+            }
+        }
+    }
+    /** Current scroll position */
+    get scrollPosition() {
+        return { x: this._scrollX, y: this._scrollY };
+    }
+    /** Resize the scroll viewport */
+    resize(width, height) {
+        this._config.width = width;
+        this._config.height = height;
+        // Redraw mask and background
+        this._mask.clear();
+        this._mask.roundRect(0, 0, width, height, this._config.borderRadius).fill(0xffffff);
+        this._bg.clear();
+        this.hitArea = { contains: (x, y) => x >= 0 && x <= width && y >= 0 && y <= height };
+        this.clampScroll();
+        this.applyScroll();
+    }
+    /** Destroy and clean up */
+    destroy(options) {
+        this.stopAnimation();
+        if (this._scrollbarFadeTimeout !== null) {
+            clearTimeout(this._scrollbarFadeTimeout);
+        }
+        this.off('pointerdown', this.onPointerDown);
+        this.off('pointermove', this.onPointerMove);
+        this.off('pointerup', this.onPointerUp);
+        this.off('pointerupoutside', this.onPointerUp);
+        this.off('wheel', this.onWheel);
+        super.destroy(options);
+    }
+    // ─── Scroll mechanics ─────────────────────────────────
+    get contentWidth() {
+        if (!this._content)
+            return 0;
+        const bounds = this._content.getBounds();
+        return bounds.width;
+    }
+    get contentHeight() {
+        if (!this._content)
+            return 0;
+        const bounds = this._content.getBounds();
+        return bounds.height;
+    }
+    get maxScrollX() {
+        return Math.max(0, this.contentWidth - this._config.width);
+    }
+    get maxScrollY() {
+        return Math.max(0, this.contentHeight - this._config.height);
+    }
+    canScrollX() {
+        return this._config.direction === 'horizontal' || this._config.direction === 'both';
+    }
+    canScrollY() {
+        return this._config.direction === 'vertical' || this._config.direction === 'both';
+    }
+    clampScroll() {
+        if (this.canScrollX()) {
+            this._scrollX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
+        }
+        else {
+            this._scrollX = 0;
+        }
+        if (this.canScrollY()) {
+            this._scrollY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
+        }
+        else {
+            this._scrollY = 0;
+        }
+    }
+    applyScroll() {
+        if (!this._content)
+            return;
+        this._content.x = -this._scrollX;
+        this._content.y = -this._scrollY;
+        this.updateScrollbars();
+    }
+    // ─── Input handlers ────────────────────────────────────
+    onPointerDown = (e) => {
+        this._isDragging = true;
+        this._isAnimating = false;
+        this.stopAnimation();
+        this.cursor = 'grabbing';
+        const local = e.getLocalPosition(this);
+        this._dragStart = { x: local.x, y: local.y };
+        this._scrollStart = { x: this._scrollX, y: this._scrollY };
+        this._lastDragPos = { x: local.x, y: local.y };
+        this._lastDragTime = Date.now();
+        this._velocityX = 0;
+        this._velocityY = 0;
+        this.showScrollbars();
+    };
+    onPointerMove = (e) => {
+        if (!this._isDragging)
+            return;
+        const local = e.getLocalPosition(this);
+        const dx = local.x - this._dragStart.x;
+        const dy = local.y - this._dragStart.y;
+        const now = Date.now();
+        const dt = Math.max(1, now - this._lastDragTime);
+        // Calculate velocity for inertia
+        this._velocityX = (local.x - this._lastDragPos.x) / dt * 16; // normalize to ~60fps
+        this._velocityY = (local.y - this._lastDragPos.y) / dt * 16;
+        this._lastDragPos = { x: local.x, y: local.y };
+        this._lastDragTime = now;
+        // Apply scroll with elasticity for overscroll
+        let newX = this._scrollStart.x - dx;
+        let newY = this._scrollStart.y - dy;
+        const elasticity = this._config.elasticity;
+        if (this.canScrollX()) {
+            if (newX < 0)
+                newX *= elasticity;
+            else if (newX > this.maxScrollX)
+                newX = this.maxScrollX + (newX - this.maxScrollX) * elasticity;
+            this._scrollX = newX;
+        }
+        if (this.canScrollY()) {
+            if (newY < 0)
+                newY *= elasticity;
+            else if (newY > this.maxScrollY)
+                newY = this.maxScrollY + (newY - this.maxScrollY) * elasticity;
+            this._scrollY = newY;
+        }
+        this.applyScroll();
+    };
+    onPointerUp = () => {
+        if (!this._isDragging)
+            return;
+        this._isDragging = false;
+        this.cursor = 'grab';
+        // Start inertia
+        if (Math.abs(this._velocityX) > 0.5 || Math.abs(this._velocityY) > 0.5) {
+            this.startInertia();
+        }
+        else {
+            this.snapAndBounce();
+        }
+    };
+    onWheel = (e) => {
+        e.preventDefault?.();
+        const delta = e.deltaY ?? 0;
+        const deltaX = e.deltaX ?? 0;
+        if (this.canScrollY()) {
+            this._scrollY += delta * 0.5;
+        }
+        if (this.canScrollX()) {
+            this._scrollX += deltaX * 0.5;
+        }
+        this.clampScroll();
+        this.applyScroll();
+        this.showScrollbars();
+        this.scheduleScrollbarFade();
+    };
+    // ─── Inertia & snap ───────────────────────────────────
+    startInertia() {
+        this._isAnimating = true;
+        const tick = () => {
+            if (!this._isAnimating)
+                return;
+            this._velocityX *= this._config.inertia;
+            this._velocityY *= this._config.inertia;
+            if (this.canScrollX())
+                this._scrollX -= this._velocityX;
+            if (this.canScrollY())
+                this._scrollY -= this._velocityY;
+            // Bounce back if overscrolled
+            let bounced = false;
+            if (this.canScrollX()) {
+                if (this._scrollX < 0) {
+                    this._scrollX *= 0.8;
+                    bounced = true;
+                }
+                else if (this._scrollX > this.maxScrollX) {
+                    this._scrollX = this.maxScrollX + (this._scrollX - this.maxScrollX) * 0.8;
+                    bounced = true;
+                }
+            }
+            if (this.canScrollY()) {
+                if (this._scrollY < 0) {
+                    this._scrollY *= 0.8;
+                    bounced = true;
+                }
+                else if (this._scrollY > this.maxScrollY) {
+                    this._scrollY = this.maxScrollY + (this._scrollY - this.maxScrollY) * 0.8;
+                    bounced = true;
+                }
+            }
+            this.applyScroll();
+            const speed = Math.abs(this._velocityX) + Math.abs(this._velocityY);
+            if (speed < 0.1 && !bounced) {
+                this._isAnimating = false;
+                this.snapAndBounce();
+                return;
+            }
+            this._animationFrame = requestAnimationFrame(tick);
+        };
+        this._animationFrame = requestAnimationFrame(tick);
+    }
+    snapAndBounce() {
+        // Clamp first
+        let targetX = Math.max(0, Math.min(this._scrollX, this.maxScrollX));
+        let targetY = Math.max(0, Math.min(this._scrollY, this.maxScrollY));
+        // Snap
+        if (this._config.snapSize > 0) {
+            if (this.canScrollY()) {
+                targetY = Math.round(targetY / this._config.snapSize) * this._config.snapSize;
+                targetY = Math.max(0, Math.min(targetY, this.maxScrollY));
+            }
+            if (this.canScrollX()) {
+                targetX = Math.round(targetX / this._config.snapSize) * this._config.snapSize;
+                targetX = Math.max(0, Math.min(targetX, this.maxScrollX));
+            }
+        }
+        if (Math.abs(targetX - this._scrollX) < 0.5 && Math.abs(targetY - this._scrollY) < 0.5) {
+            this._scrollX = targetX;
+            this._scrollY = targetY;
+            this.applyScroll();
+            this.scheduleScrollbarFade();
+            return;
+        }
+        this.animateScrollTo(targetX, targetY);
+    }
+    animateScrollTo(targetX, targetY) {
+        this._isAnimating = true;
+        const startX = this._scrollX;
+        const startY = this._scrollY;
+        const startTime = Date.now();
+        const duration = 300;
+        const tick = () => {
+            if (!this._isAnimating)
+                return;
+            const elapsed = Date.now() - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            // easeOutCubic
+            const eased = 1 - Math.pow(1 - t, 3);
+            this._scrollX = startX + (targetX - startX) * eased;
+            this._scrollY = startY + (targetY - startY) * eased;
+            this.applyScroll();
+            if (t < 1) {
+                this._animationFrame = requestAnimationFrame(tick);
+            }
+            else {
+                this._isAnimating = false;
+                this.scheduleScrollbarFade();
+            }
+        };
+        this._animationFrame = requestAnimationFrame(tick);
+    }
+    stopAnimation() {
+        this._isAnimating = false;
+        if (this._animationFrame !== null) {
+            cancelAnimationFrame(this._animationFrame);
+            this._animationFrame = null;
+        }
+    }
+    // ─── Scrollbars ────────────────────────────────────────
+    updateScrollbars() {
+        const { width, height, scrollbarWidth, scrollbarColor, scrollbarAlpha } = this._config;
+        if (this._scrollbarV && this.canScrollY() && this.contentHeight > height) {
+            const ratio = height / this.contentHeight;
+            const barH = Math.max(20, height * ratio);
+            const barY = (this._scrollY / this.maxScrollY) * (height - barH);
+            this._scrollbarV.clear();
+            this._scrollbarV.roundRect(width - scrollbarWidth - 2, Math.max(0, barY), scrollbarWidth, barH, scrollbarWidth / 2).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
+        }
+        if (this._scrollbarH && this.canScrollX() && this.contentWidth > width) {
+            const ratio = width / this.contentWidth;
+            const barW = Math.max(20, width * ratio);
+            const barX = (this._scrollX / this.maxScrollX) * (width - barW);
+            this._scrollbarH.clear();
+            this._scrollbarH.roundRect(Math.max(0, barX), height - scrollbarWidth - 2, barW, scrollbarWidth, scrollbarWidth / 2).fill({ color: scrollbarColor, alpha: scrollbarAlpha });
+        }
+    }
+    showScrollbars() {
+        if (this._scrollbarV)
+            this._scrollbarV.alpha = 1;
+        if (this._scrollbarH)
+            this._scrollbarH.alpha = 1;
+    }
+    scheduleScrollbarFade() {
+        if (this._scrollbarFadeTimeout !== null) {
+            clearTimeout(this._scrollbarFadeTimeout);
+        }
+        this._scrollbarFadeTimeout = window.setTimeout(() => {
+            this.fadeScrollbars();
+        }, 1000);
+    }
+    fadeScrollbars() {
+        const duration = 300;
+        const startTime = Date.now();
+        const startAlphaV = this._scrollbarV?.alpha ?? 0;
+        const startAlphaH = this._scrollbarH?.alpha ?? 0;
+        const tick = () => {
+            const t = Math.min((Date.now() - startTime) / duration, 1);
+            if (this._scrollbarV)
+                this._scrollbarV.alpha = startAlphaV * (1 - t);
+            if (this._scrollbarH)
+                this._scrollbarH.alpha = startAlphaH * (1 - t);
+            if (t < 1)
+                requestAnimationFrame(tick);
+        };
+        requestAnimationFrame(tick);
+    }
+}
+
+export { BalanceDisplay, Button, Label, Layout, Modal, Panel, ProgressBar, ScrollContainer, Toast, WinDisplay };
 //# sourceMappingURL=ui.esm.js.map