hudini 0.17.0 → 0.17.2

package/dist/hudini.js

@@ -40,6 +40,387 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
+    /** Default gap between elements in pixels */
+    const DEFAULT_GAP = 8;
+    /** Measures the display width of a game object, with fallbacks */
+    const getDisplayWidthOf = (child) => {
+        const childTyped = child;
+        // Check if it's a Container-like object (has list property and width/height)
+        if (child && typeof child === 'object' && 'list' in child && Array.isArray(child.list)) {
+            if (typeof childTyped.displayWidth === 'number' && childTyped.displayWidth > 0) {
+                return childTyped.displayWidth;
+            }
+            if (typeof childTyped.width === 'number' && childTyped.width > 0) {
+                return childTyped.width;
+            }
+            const container = child;
+            if (typeof container.displayWidth === 'number' && container.displayWidth > 0) {
+                return container.displayWidth;
+            }
+            if (typeof container.width === 'number' && container.width > 0) {
+                if (typeof container.scale === 'number' && container.scale > 0) {
+                    return container.width / container.scale;
+                }
+                return container.width;
+            }
+            let w = 0;
+            for (const sub of container.list) {
+                const size = getDisplayWidthOf(sub);
+                w = Math.max(w, size);
+            }
+            return w;
+        }
+        if (typeof childTyped.displayWidth === 'number') {
+            return childTyped.displayWidth;
+        }
+        if (typeof childTyped.width === 'number') {
+            return childTyped.width;
+        }
+        const bounds = childTyped.getBounds?.();
+        return bounds ? bounds.width : 0;
+    };
+    /** Measures the display height of a game object, with fallbacks */
+    const getDisplayHeightOf = (child) => {
+        const childTyped = child;
+        // Check if it's a Container-like object (has list property and width/height)
+        if (child && typeof child === 'object' && 'list' in child && Array.isArray(child.list)) {
+            if (typeof childTyped.displayHeight === 'number' && childTyped.displayHeight > 0) {
+                return childTyped.displayHeight;
+            }
+            if (typeof childTyped.height === 'number' && childTyped.height > 0) {
+                return childTyped.height;
+            }
+            const container = child;
+            if (typeof container.displayHeight === 'number' && container.displayHeight > 0) {
+                return container.displayHeight;
+            }
+            if (typeof container.height === 'number' && container.height > 0) {
+                if (typeof container.scale === 'number' && container.scale > 0) {
+                    return container.height / container.scale;
+                }
+                return container.height;
+            }
+            let h = 0;
+            for (const sub of container.list) {
+                const size = getDisplayHeightOf(sub);
+                h = Math.max(h, size);
+            }
+            return h;
+        }
+        if (typeof childTyped.displayHeight === 'number') {
+            return childTyped.displayHeight;
+        }
+        if (typeof childTyped.height === 'number') {
+            return childTyped.height;
+        }
+        const bounds = childTyped.getBounds?.();
+        return bounds ? bounds.height : 0;
+    };
+    /** Returns normalized origin (0..1) for a game object */
+    const getNormalizedOriginOf = (child) => {
+        const width = getDisplayWidthOf(child);
+        const height = getDisplayHeightOf(child);
+        const childTyped = child;
+        let ox = typeof childTyped.originX === 'number' ? childTyped.originX : undefined;
+        let oy = typeof childTyped.originY === 'number' ? childTyped.originY : undefined;
+        if (ox === undefined &&
+            typeof childTyped.displayOriginX === 'number' &&
+            width > 0) {
+            ox = childTyped.displayOriginX / width;
+        }
+        if (oy === undefined &&
+            typeof childTyped.displayOriginY === 'number' &&
+            height > 0) {
+            oy = childTyped.displayOriginY / height;
+        }
+        return { x: ox ?? 0.5, y: oy ?? 0.5 };
+    };
+
+    /* eslint-disable max-lines-per-function */
+    /* eslint-disable complexity */
+    /**
+     * Column is a layout container that stacks children vertically with a gap.
+     * The container position (x, y) represents the center of the whole column.
+     */
+    class Column extends Phaser$1.GameObjects.Container {
+        /** Gap between elements in pixels */
+        gap;
+        /** Horizontal alignment of elements */
+        align;
+        /** Vertical origin point of the column */
+        verticalOrigin;
+        /**
+         * Creates a new Column container
+         * @param params Configuration parameters for the column
+         */
+        constructor({ scene, x, y, gap = DEFAULT_GAP, align = 'center', children = [], verticalOrigin = 'center', }) {
+            super(scene, x, y);
+            this.gap = gap;
+            this.align = align;
+            this.verticalOrigin = verticalOrigin;
+            if (children.length > 0) {
+                this.add(children);
+            }
+            this.layout();
+        }
+        /**
+         * Sets the spacing between children and relayouts
+         * @param gap Gap in pixels between elements
+         */
+        setGap(gap) {
+            this.gap = gap;
+            this.layout();
+        }
+        /**
+         * Sets the horizontal alignment and relayouts
+         * @param align New horizontal alignment
+         */
+        setAlign(align) {
+            this.align = align;
+            this.layout();
+        }
+        /**
+         * Adds a child game object to the column
+         * @param child Game object to add
+         * @param relayout Whether to relayout after adding (default: true)
+         * @returns This column instance for chaining
+         */
+        addChild(child, relayout = true) {
+            this.add(child);
+            if (relayout)
+                this.layout();
+            return this;
+        }
+        /**
+         * Adds multiple children to the column
+         * @param children Array of game objects to add
+         * @param relayout Whether to relayout after adding (default: true)
+         * @returns This column instance for chaining
+         */
+        addChildren(children, relayout = true) {
+            if (children.length > 0)
+                this.add(children);
+            if (relayout)
+                this.layout();
+            return this;
+        }
+        /**
+         * Recomputes children's positions and updates this container size
+         * Positions are calculated based on alignment, origins and gaps
+         */
+        layout() {
+            const children = this.list;
+            if (children.length === 0) {
+                // Reset size when empty
+                this.setSize(0, 0);
+                return;
+            }
+            // Measure sizes and origins
+            const entries = children.map((child) => ({
+                child,
+                width: this.getDisplayWidth(child),
+                height: this.getDisplayHeight(child),
+                origin: this.getNormalizedOrigin(child),
+            }));
+            const maxWidth = entries.reduce((m, s) => Math.max(m, s.width), 0);
+            const totalHeight = entries.reduce((sum, s) => sum + s.height, 0) + this.gap * (entries.length - 1);
+            // Determine top of content based on verticalOrigin
+            const contentTopY = this.verticalOrigin === 'top' ? 0 : this.verticalOrigin === 'center' ? -totalHeight / 2 : -totalHeight;
+            // Walk from top to bottom, aligning considering each child's origin
+            let cursorTopY = contentTopY;
+            for (const { child, width, height, origin } of entries) {
+                // Horizontal alignment: align left/right edges or centers correctly using origin
+                let x = 0;
+                if (this.align === 'left') {
+                    // place child's left edge at content left
+                    x = -maxWidth / 2 + origin.x * width;
+                }
+                else if (this.align === 'right') {
+                    // place child's right edge at content right
+                    x = maxWidth / 2 - (1 - origin.x) * width;
+                }
+                else {
+                    // center alignment: center of child at 0 accounting for origin
+                    x = (origin.x - 0.5) * width;
+                }
+                // Vertical position so that child's top is at cursorTopY
+                const y = cursorTopY + origin.y * height;
+                child.setPosition(x, y);
+                cursorTopY += height + this.gap;
+            }
+            // Update this container size to match content bounds
+            this.setSize(maxWidth, totalHeight);
+        }
+        /**
+         * Gets the display width of a game object
+         * @param child GameObject to measure
+         * @returns Display width in pixels
+         */
+        getDisplayWidth(child) {
+            return getDisplayWidthOf(child);
+        }
+        /**
+         * Gets the display height of a game object
+         * @param child GameObject to measure
+         * @returns Display height in pixels
+         */
+        getDisplayHeight(child) {
+            return getDisplayHeightOf(child);
+        }
+        /**
+         * Gets the normalized origin point of a game object
+         * @param child GameObject to get origin from
+         * @returns Object with normalized x,y coordinates of the origin point
+         */
+        getNormalizedOrigin(child) {
+            return getNormalizedOriginOf(child);
+        }
+    }
+
+    /* eslint-disable max-lines-per-function */
+    /* eslint-disable complexity */
+    /**
+     * Row is a layout container that arranges children horizontally with a gap.
+     * The container position (x, y) represents the center of the whole row.
+     */
+    class Row extends Phaser$1.GameObjects.Container {
+        /** Gap between elements in pixels */
+        gap;
+        /** Vertical alignment of elements */
+        align;
+        /** Horizontal origin point of the row */
+        horizontalOrigin;
+        /**
+         * Creates a new Row container
+         * @param params Configuration parameters for the row
+         */
+        constructor({ scene, x, y, gap = DEFAULT_GAP, align = 'center', children = [], horizontalOrigin = 'center', }) {
+            super(scene, x, y);
+            this.gap = gap;
+            this.align = align;
+            this.horizontalOrigin = horizontalOrigin;
+            if (children.length > 0) {
+                this.add(children);
+            }
+            this.layout();
+        }
+        /**
+         * Sets the gap between elements and updates layout
+         * @param gap Gap size in pixels
+         */
+        setGap(gap) {
+            this.gap = gap;
+            this.layout();
+        }
+        /**
+         * Sets the vertical alignment and updates layout
+         * @param align New vertical alignment
+         */
+        setAlign(align) {
+            this.align = align;
+            this.layout();
+        }
+        /**
+         * Adds a single child to the row
+         * @param child GameObject to add
+         * @param relayout Whether to update layout after adding
+         * @returns This row instance for chaining
+         */
+        addChild(child, relayout = true) {
+            this.add(child);
+            if (relayout) {
+                this.layout();
+            }
+            return this;
+        }
+        /**
+         * Adds multiple children to the row
+         * @param children Array of GameObjects to add
+         * @param relayout Whether to update layout after adding
+         * @returns This row instance for chaining
+         */
+        addChildren(children, relayout = true) {
+            if (children.length > 0)
+                this.add(children);
+            if (relayout)
+                this.layout();
+            return this;
+        }
+        /**
+         * Recomputes children's positions and updates this container size
+         */
+        layout() {
+            const children = this.list;
+            if (children.length === 0) {
+                this.setSize(0, 0);
+                return;
+            }
+            // Measure sizes and origins
+            const entries = children.map(child => ({
+                child,
+                width: this.getDisplayWidth(child),
+                height: this.getDisplayHeight(child),
+                origin: this.getNormalizedOrigin(child),
+            }));
+            const maxHeight = entries.reduce((m, s) => Math.max(m, s.height), 0);
+            const totalWidth = entries.reduce((sum, s) => sum + s.width, 0) +
+                this.gap * (entries.length - 1);
+            // Determine left of content based on horizontalOrigin
+            const contentLeftX = this.horizontalOrigin === 'left'
+                ? 0
+                : this.horizontalOrigin === 'center'
+                    ? -totalWidth / 2
+                    : -totalWidth;
+            // Walk left to right, aligning considering each child's origin
+            let cursorLeftX = contentLeftX;
+            for (const { child, width, height, origin } of entries) {
+                // Vertical alignment: align top/bottom edges or centers correctly using origin
+                let y = 0;
+                if (this.align === 'top') {
+                    // place child's top edge at content top
+                    y = -maxHeight / 2 + origin.y * height;
+                }
+                else if (this.align === 'bottom') {
+                    // place child's bottom edge at content bottom
+                    y = maxHeight / 2 - (1 - origin.y) * height;
+                }
+                else {
+                    // center alignment
+                    y = (origin.y - 0.5) * height;
+                }
+                // Horizontal position so that child's left is at cursorLeftX
+                const x = cursorLeftX + origin.x * width;
+                child.setPosition(x, y);
+                cursorLeftX += width + this.gap;
+            }
+            this.setSize(totalWidth, maxHeight);
+        }
+        /**
+         * Gets the display width of a game object
+         * @param child GameObject to measure
+         * @returns Display width in pixels
+         */
+        getDisplayWidth(child) {
+            return getDisplayWidthOf(child);
+        }
+        /**
+         * Gets the display height of a game object
+         * @param child GameObject to measure
+         * @returns Display height in pixels
+         */
+        getDisplayHeight(child) {
+            return getDisplayHeightOf(child);
+        }
+        /**
+         * Gets the normalized origin point of a game object
+         * @param child GameObject to get origin from
+         * @returns Object with normalized x,y coordinates of the origin point
+         */
+        getNormalizedOrigin(child) {
+            return getNormalizedOriginOf(child);
+        }
+    }
+
     /**
      * Deep merge utility function that recursively merges objects
      * Similar to lodash.merge but implemented natively
@@ -1149,106 +1530,6 @@
         return scene.pw;
     };
 
-    /** Default gap between elements in pixels */
-    var DEFAULT_GAP = 8;
-    /** Measures the display width of a game object, with fallbacks */
-    var getDisplayWidthOf = function (child) {
-        var _a;
-        var childTyped = child;
-        // Check if it's a Container-like object (has list property and width/height)
-        if (child && typeof child === 'object' && 'list' in child && Array.isArray(child.list)) {
-            if (typeof childTyped.displayWidth === 'number' && childTyped.displayWidth > 0) {
-                return childTyped.displayWidth;
-            }
-            if (typeof childTyped.width === 'number' && childTyped.width > 0) {
-                return childTyped.width;
-            }
-            var container = child;
-            if (typeof container.displayWidth === 'number' && container.displayWidth > 0) {
-                return container.displayWidth;
-            }
-            if (typeof container.width === 'number' && container.width > 0) {
-                if (typeof container.scale === 'number' && container.scale > 0) {
-                    return container.width / container.scale;
-                }
-                return container.width;
-            }
-            var w = 0;
-            for (var _i = 0, _b = container.list; _i < _b.length; _i++) {
-                var sub = _b[_i];
-                var size = getDisplayWidthOf(sub);
-                w = Math.max(w, size);
-            }
-            return w;
-        }
-        if (typeof childTyped.displayWidth === 'number') {
-            return childTyped.displayWidth;
-        }
-        if (typeof childTyped.width === 'number') {
-            return childTyped.width;
-        }
-        var bounds = (_a = childTyped.getBounds) === null || _a === void 0 ? void 0 : _a.call(childTyped);
-        return bounds ? bounds.width : 0;
-    };
-    /** Measures the display height of a game object, with fallbacks */
-    var getDisplayHeightOf = function (child) {
-        var _a;
-        var childTyped = child;
-        // Check if it's a Container-like object (has list property and width/height)
-        if (child && typeof child === 'object' && 'list' in child && Array.isArray(child.list)) {
-            if (typeof childTyped.displayHeight === 'number' && childTyped.displayHeight > 0) {
-                return childTyped.displayHeight;
-            }
-            if (typeof childTyped.height === 'number' && childTyped.height > 0) {
-                return childTyped.height;
-            }
-            var container = child;
-            if (typeof container.displayHeight === 'number' && container.displayHeight > 0) {
-                return container.displayHeight;
-            }
-            if (typeof container.height === 'number' && container.height > 0) {
-                if (typeof container.scale === 'number' && container.scale > 0) {
-                    return container.height / container.scale;
-                }
-                return container.height;
-            }
-            var h = 0;
-            for (var _i = 0, _b = container.list; _i < _b.length; _i++) {
-                var sub = _b[_i];
-                var size = getDisplayHeightOf(sub);
-                h = Math.max(h, size);
-            }
-            return h;
-        }
-        if (typeof childTyped.displayHeight === 'number') {
-            return childTyped.displayHeight;
-        }
-        if (typeof childTyped.height === 'number') {
-            return childTyped.height;
-        }
-        var bounds = (_a = childTyped.getBounds) === null || _a === void 0 ? void 0 : _a.call(childTyped);
-        return bounds ? bounds.height : 0;
-    };
-    /** Returns normalized origin (0..1) for a game object */
-    var getNormalizedOriginOf = function (child) {
-        var width = getDisplayWidthOf(child);
-        var height = getDisplayHeightOf(child);
-        var childTyped = child;
-        var ox = typeof childTyped.originX === 'number' ? childTyped.originX : undefined;
-        var oy = typeof childTyped.originY === 'number' ? childTyped.originY : undefined;
-        if (ox === undefined &&
-            typeof childTyped.displayOriginX === 'number' &&
-            width > 0) {
-            ox = childTyped.displayOriginX / width;
-        }
-        if (oy === undefined &&
-            typeof childTyped.displayOriginY === 'number' &&
-            height > 0) {
-            oy = childTyped.displayOriginY / height;
-        }
-        return { x: ox !== null && ox !== void 0 ? ox : 0.5, y: oy !== null && oy !== void 0 ? oy : 0.5 };
-    };
-
     /**
      * A flexible card component that adapts to its child content size
      */
@@ -1261,6 +1542,8 @@
         function Card(_a) {
             var scene = _a.scene, x = _a.x, y = _a.y, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'white' : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 'md' : _c, _d = _a.margin, margin = _d === void 0 ? '4' : _d, child = _a.child, width = _a.width, height = _a.height;
             var _this = _super.call(this, scene, x, y) || this;
+            /** Whether we have an explicit size set (width and height provided) */
+            _this.hasExplicitSize = false;
             _this.pw = getPWFromScene(scene);
             // Store values
             _this.marginPx =
@@ -1274,11 +1557,29 @@
             _this.backgroundColorValue = Color.rgb(backgroundColor);
             // Store child reference
             _this.child = child;
+            // Check if explicit size was provided
+            _this.hasExplicitSize = width !== undefined && height !== undefined;
             // Create background and setup container
             _this.createBackgroundGraphics(scene, width, height);
             _this.setupContainer();
             return _this;
         }
+        /**
+         * Override setSize to redraw background when size changes
+         * @param width Width in pixels
+         * @param height Height in pixels
+         * @returns this for chaining
+         */
+        Card.prototype.setSize = function (width, height) {
+            // Mark that we now have explicit size
+            this.hasExplicitSize = true;
+            // Set size directly on the container to avoid recursion
+            this.width = width;
+            this.height = height;
+            // Redraw background with new size
+            this.drawBackground(width, height);
+            return this;
+        };
         /**
          * Sets the width of the card. Useful when you want to set a fixed width without a child component.
          * @param width Width in pixels
@@ -1365,7 +1666,10 @@
             if (this.child) {
                 this.add([this.child]);
             }
-            this.layout();
+            // Only call layout if we don't have explicit size
+            if (!this.hasExplicitSize) {
+                this.layout();
+            }
         };
         /**
          * Updates the layout after property changes
@@ -1384,10 +1688,13 @@
             // Calculate child position considering its origin
             var childX = this.calculateChildX(cardWidth, childBounds.width, childOrigin);
             var childY = this.calculateChildY(cardHeight, childBounds.height, childOrigin);
+            // Set size directly (don't use setSize to avoid marking as explicit size)
+            this.width = cardWidth;
+            this.height = cardHeight;
+            // Redraw background with new dimensions
+            this.drawBackground(cardWidth, cardHeight);
             // Position child in the center of the card
             this.child.setPosition(childX, childY);
-            // Redraw background with new dimensions
-            this.drawBackground();
         };
         /**
          * Gets the child's origin if it exists
@@ -1468,10 +1775,21 @@
                 height = h;
             }
             else {
-                var _b = this.measureChild(this.child), cw = _b.w, ch = _b.h;
-                width = cw + this.marginPx * 2;
-                height = ch + this.marginPx * 2;
+                // If no explicit size provided and we have a child, measure it
+                if (this.child) {
+                    var _b = this.measureChild(this.child), cw = _b.w, ch = _b.h;
+                    width = cw + this.marginPx * 2;
+                    height = ch + this.marginPx * 2;
+                }
+                else {
+                    // If no child and no explicit size, use current size
+                    width = this.width;
+                    height = this.height;
+                }
             }
+            // Set size directly to avoid recursion (since we override setSize)
+            this.width = width;
+            this.height = height;
             this.backgroundGraphics.clear();
             // Limit radius to maximum possible for the card dimensions
             var maxRadius = Math.min(width / 2, height / 2);
@@ -3584,6 +3902,16 @@
             configurable: true
         });
         CircularProgress.prototype.createIconText = function (scene, icon, size, color) {
+            // Convert color to ColorToken if it's just a ColorKey
+            // 'black' and 'white' are already ColorTokens, and colors with '-' are already ColorTokens
+            var colorToken;
+            if (color === 'black' || color === 'white' || color.includes('-')) {
+                colorToken = color;
+            }
+            else {
+                // Default to -500 shade for ColorKey
+                colorToken = "".concat(color, "-500");
+            }
             this.iconText = new IconText({
                 scene: scene,
                 x: 0,
@@ -3591,7 +3919,7 @@
                 icon: icon,
                 size: size,
                 style: {
-                    color: Color.rgb(color),
+                    color: this.pw.color.rgb(colorToken),
                 },
             });
             this.iconText.setOrigin(0.5, 0.5);
@@ -3626,147 +3954,6 @@
         return CircularProgress;
     }(Phaser$1.GameObjects.Container));
 
-    /**
-     * Column is a layout container that stacks children vertically with a gap.
-     * The container position (x, y) represents the center of the whole column.
-     */
-    var Column = /** @class */ (function (_super) {
-        __extends(Column, _super);
-        /**
-         * Creates a new Column container
-         * @param params Configuration parameters for the column
-         */
-        function Column(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, _b = _a.gap, gap = _b === void 0 ? DEFAULT_GAP : _b, _c = _a.align, align = _c === void 0 ? 'center' : _c, _d = _a.children, children = _d === void 0 ? [] : _d, _e = _a.verticalOrigin, verticalOrigin = _e === void 0 ? 'center' : _e;
-            var _this = _super.call(this, scene, x, y) || this;
-            _this.gap = gap;
-            _this.align = align;
-            _this.verticalOrigin = verticalOrigin;
-            if (children.length > 0) {
-                _this.add(children);
-            }
-            _this.layout();
-            return _this;
-        }
-        /**
-         * Sets the spacing between children and relayouts
-         * @param gap Gap in pixels between elements
-         */
-        Column.prototype.setGap = function (gap) {
-            this.gap = gap;
-            this.layout();
-        };
-        /**
-         * Sets the horizontal alignment and relayouts
-         * @param align New horizontal alignment
-         */
-        Column.prototype.setAlign = function (align) {
-            this.align = align;
-            this.layout();
-        };
-        /**
-         * Adds a child game object to the column
-         * @param child Game object to add
-         * @param relayout Whether to relayout after adding (default: true)
-         * @returns This column instance for chaining
-         */
-        Column.prototype.addChild = function (child, relayout) {
-            if (relayout === void 0) { relayout = true; }
-            this.add(child);
-            if (relayout)
-                this.layout();
-            return this;
-        };
-        /**
-         * Adds multiple children to the column
-         * @param children Array of game objects to add
-         * @param relayout Whether to relayout after adding (default: true)
-         * @returns This column instance for chaining
-         */
-        Column.prototype.addChildren = function (children, relayout) {
-            if (relayout === void 0) { relayout = true; }
-            if (children.length > 0)
-                this.add(children);
-            if (relayout)
-                this.layout();
-            return this;
-        };
-        /**
-         * Recomputes children's positions and updates this container size
-         * Positions are calculated based on alignment, origins and gaps
-         */
-        Column.prototype.layout = function () {
-            var _this = this;
-            var children = this.list;
-            if (children.length === 0) {
-                // Reset size when empty
-                this.setSize(0, 0);
-                return;
-            }
-            // Measure sizes and origins
-            var entries = children.map(function (child) { return ({
-                child: child,
-                width: _this.getDisplayWidth(child),
-                height: _this.getDisplayHeight(child),
-                origin: _this.getNormalizedOrigin(child),
-            }); });
-            var maxWidth = entries.reduce(function (m, s) { return Math.max(m, s.width); }, 0);
-            var totalHeight = entries.reduce(function (sum, s) { return sum + s.height; }, 0) + this.gap * (entries.length - 1);
-            // Determine top of content based on verticalOrigin
-            var contentTopY = this.verticalOrigin === 'top' ? 0 : this.verticalOrigin === 'center' ? -totalHeight / 2 : -totalHeight;
-            // Walk from top to bottom, aligning considering each child's origin
-            var cursorTopY = contentTopY;
-            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                var _a = entries_1[_i], child = _a.child, width = _a.width, height = _a.height, origin_1 = _a.origin;
-                // Horizontal alignment: align left/right edges or centers correctly using origin
-                var x = 0;
-                if (this.align === 'left') {
-                    // place child's left edge at content left
-                    x = -maxWidth / 2 + origin_1.x * width;
-                }
-                else if (this.align === 'right') {
-                    // place child's right edge at content right
-                    x = maxWidth / 2 - (1 - origin_1.x) * width;
-                }
-                else {
-                    // center alignment: center of child at 0 accounting for origin
-                    x = (origin_1.x - 0.5) * width;
-                }
-                // Vertical position so that child's top is at cursorTopY
-                var y = cursorTopY + origin_1.y * height;
-                child.setPosition(x, y);
-                cursorTopY += height + this.gap;
-            }
-            // Update this container size to match content bounds
-            this.setSize(maxWidth, totalHeight);
-        };
-        /**
-         * Gets the display width of a game object
-         * @param child GameObject to measure
-         * @returns Display width in pixels
-         */
-        Column.prototype.getDisplayWidth = function (child) {
-            return getDisplayWidthOf(child);
-        };
-        /**
-         * Gets the display height of a game object
-         * @param child GameObject to measure
-         * @returns Display height in pixels
-         */
-        Column.prototype.getDisplayHeight = function (child) {
-            return getDisplayHeightOf(child);
-        };
-        /**
-         * Gets the normalized origin point of a game object
-         * @param child GameObject to get origin from
-         * @returns Object with normalized x,y coordinates of the origin point
-         */
-        Column.prototype.getNormalizedOrigin = function (child) {
-            return getNormalizedOriginOf(child);
-        };
-        return Column;
-    }(Phaser$1.GameObjects.Container));
-
     var durations$2 = {
         click: 100};
     var CLICK_OFFSET$2 = 2;
@@ -4379,728 +4566,775 @@
         return LinearProgress;
     }(Phaser$1.GameObjects.Container));
 
-    var A_HUNDRED = 100;
-    var THREE_SIXTY = 360;
-    var START_ANGLE = 270;
-    var DEFAULT_THICKNESS = 4;
-    var DEFAULT_BACKGROUND_ALPHA = 0.2;
-    var DEFAULT_TEXT_COLOR = 'white';
-    var DEFAULT_FONT_SIZE = 'base';
-    var DEFAULT_TEXT_ALPHA = 1;
-    var RadialProgress = /** @class */ (function (_super) {
-        __extends(RadialProgress, _super);
-        function RadialProgress(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, radius = _a.radius, _b = _a.thickness, thickness = _b === void 0 ? DEFAULT_THICKNESS : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'gray-200' : _c, _d = _a.backgroundAlpha, backgroundAlpha = _d === void 0 ? DEFAULT_BACKGROUND_ALPHA : _d, _e = _a.progressColor, progressColor = _e === void 0 ? 'blue-500' : _e, _f = _a.progress, progress = _f === void 0 ? 0 : _f, _g = _a.startAngle, startAngle = _g === void 0 ? START_ANGLE : _g, _h = _a.showText, showText = _h === void 0 ? false : _h, _j = _a.textColor, textColor = _j === void 0 ? DEFAULT_TEXT_COLOR : _j, _k = _a.fontSize, fontSize = _k === void 0 ? DEFAULT_FONT_SIZE : _k, _l = _a.textAlpha, textAlpha = _l === void 0 ? DEFAULT_TEXT_ALPHA : _l;
+    /** Vertical offset for the shadow */
+    var SHADOW_OFFSET_Y = 4;
+    /** Opacity value for the shadow */
+    var SHADOW_OPACITY$1 = 0.25;
+    /** Thickness of the text stroke */
+    var STROKE_THICKNESS = 2;
+    /** Shadow size as a percentage of the header size */
+    var SHADOW_SCALE = 0.95;
+    /**
+     * A stylized section header component with shadow, text stroke and auto-sizing
+     */
+    var SectionHeader = /** @class */ (function (_super) {
+        __extends(SectionHeader, _super);
+        /**
+         * Creates a new SectionHeader
+         * @param params Configuration parameters for the header
+         */
+        function SectionHeader(_a) {
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, fontSize = _a.fontSize, font = _a.font, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue-600' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'white' : _c, strokeColor = _a.strokeColor, _d = _a.borderRadius, borderRadius = _d === void 0 ? 'md' : _d, _e = _a.margin, margin = _e === void 0 ? '4' : _e;
             var _this = _super.call(this, scene, x, y) || this;
-            _this.pw = getPWFromScene(scene);
-            _this.radius = radius;
-            _this.thickness = thickness;
-            _this.backgroundColor = backgroundColor;
-            _this.backgroundAlpha = backgroundAlpha;
-            _this.progressColor = progressColor;
-            _this.currentProgress = Math.max(0, Math.min(A_HUNDRED, progress));
-            _this.startAngle = startAngle;
-            _this.showText = showText;
-            _this.textColor = textColor;
-            _this.fontSize = fontSize;
-            _this.textAlpha = textAlpha;
-            _this.createBackgroundSprite();
-            _this.createRadialArc();
-            if (_this.showText) {
-                _this.createPercentageText();
-            }
+            _this.pw = getPWFromScene(scene);
+            // Store values
+            _this.textValue = text;
+            _this.fontSizePx =
+                typeof fontSize === 'number'
+                    ? fontSize
+                    : _this.pw.fontSize.px(fontSize !== null && fontSize !== void 0 ? fontSize : 'lg');
+            _this.marginPx =
+                typeof margin === 'number'
+                    ? margin
+                    : _this.pw.spacing.px(margin !== null && margin !== void 0 ? margin : '4');
+            _this.borderRadiusPx =
+                typeof borderRadius === 'number'
+                    ? borderRadius
+                    : _this.pw.radius.px(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 'md');
+            _this.backgroundColorValue = Color.rgb(backgroundColor);
+            _this.textColorValue = Color.rgb(textColor);
+            // If no stroke color provided, use a darker version of the background
+            _this.strokeColorValue = strokeColor
+                ? Color.rgb(strokeColor)
+                : _this.getDarkerColor(backgroundColor);
+            _this.fontValue = typeof font === 'string' ? font : _this.pw.font.family(font !== null && font !== void 0 ? font : 'display');
+            _this.createHeaderText(scene);
+            _this.createShadowGraphics(scene);
+            _this.createBackgroundGraphics(scene);
             _this.setupContainer();
-            _this.updateProgressBar();
+            _this.setupInteractivity();
             return _this;
         }
         /**
-         * Sets the progress value (0-100)
-         * @param progress Progress value between 0 and 100
-         * @param animate Whether to animate the change (default: true)
+         * Sets the text content of the header
+         * @param text New text content
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setProgress = function (progress, animate) {
-            var _this = this;
-            if (animate === void 0) { animate = true; }
-            var newProgress = Math.max(0, Math.min(A_HUNDRED, progress));
-            if (this.currentProgress === newProgress) {
-                return this;
-            }
-            if (animate) {
-                var target_1 = { value: this.currentProgress };
-                this.scene.tweens.add({
-                    targets: target_1,
-                    value: newProgress,
-                    duration: 300,
-                    ease: 'Power2',
-                    onUpdate: function () {
-                        _this.currentProgress = target_1.value;
-                        _this.updateProgressBar();
-                        _this.updatePercentageText();
-                    },
-                });
-            }
-            else {
-                this.currentProgress = newProgress;
-                this.updateProgressBar();
-                this.updatePercentageText();
-            }
+        SectionHeader.prototype.setText = function (text) {
+            this.textValue = text;
+            this.headerText.setText(text);
+            this.regenerateGraphics();
             return this;
         };
         /**
-         * Gets the current progress value
-         * @returns Current progress value (0-100)
+         * Sets the font size of the header text
+         * @param fontSize New font size (number in px or FontSizeKey)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.getProgress = function () {
-            return this.currentProgress;
+        SectionHeader.prototype.setFontSize = function (fontSize) {
+            this.fontSizePx =
+                typeof fontSize === 'number'
+                    ? fontSize
+                    : this.pw.fontSize.px(fontSize !== null && fontSize !== void 0 ? fontSize : 'lg');
+            this.headerText.setFontSize(this.fontSizePx);
+            this.regenerateGraphics();
+            return this;
         };
         /**
-     * Sets the background color of the progress bar
-     * @param color Background color token
-     */
-        RadialProgress.prototype.setBackgroundColor = function (color) {
-            if (this.backgroundColor === color) {
-                return this;
-            }
-            this.backgroundColor = color;
-            this.recreateSprites();
+         * Sets the font family of the header text
+         * @param font New font family (FontKey or string)
+         * @returns this for chaining
+         */
+        SectionHeader.prototype.setFont = function (font) {
+            this.fontValue = typeof font === 'string' ? font : this.pw.font.family(font !== null && font !== void 0 ? font : 'display');
+            this.headerText.setFontFamily(this.fontValue);
+            this.regenerateGraphics();
             return this;
         };
         /**
-         * Sets the background alpha of the progress bar
-         * @param alpha Background alpha value (0-1)
+         * Sets the background color of the header
+         * @param color New background color (ColorKey or string)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setBackgroundAlpha = function (alpha) {
-            if (this.backgroundAlpha === alpha) {
-                return this;
+        SectionHeader.prototype.setBackgroundColor = function (color) {
+            this.backgroundColorValue = Color.rgb(color);
+            // Update stroke color to match new background if it was auto-generated
+            if (!this.strokeColorValue.startsWith('#')) {
+                this.strokeColorValue = this.getDarkerColor(color);
+                this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
             }
-            this.backgroundAlpha = alpha;
-            this.recreateSprites();
+            this.regenerateGraphics();
             return this;
         };
         /**
-         * Sets the progress color of the progress bar
-         * @param color Progress color token
+         * Sets the text color of the header
+         * @param color New text color (ColorKey or string)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setProgressColor = function (color) {
-            if (this.progressColor === color) {
-                return this;
-            }
-            this.progressColor = color;
-            this.recreateSprites();
+        SectionHeader.prototype.setTextColor = function (color) {
+            this.textColorValue = Color.rgb(color);
+            this.headerText.setColor(this.textColorValue);
             return this;
         };
         /**
-         * Sets whether to show the percentage text
-         * @param show Whether to show the text
+         * Sets the stroke color of the header text
+         * @param color New stroke color (ColorKey or string)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setShowText = function (show) {
-            if (this.showText === show) {
-                return this;
-            }
-            this.showText = show;
-            if (show && !this.percentageText) {
-                this.createPercentageText();
-                if (this.percentageText) {
-                    this.add(this.percentageText);
-                }
-            }
-            else if (!show && this.percentageText) {
-                this.remove(this.percentageText);
-                this.percentageText.destroy();
-                this.percentageText = undefined;
-            }
+        SectionHeader.prototype.setStrokeColor = function (color) {
+            this.strokeColorValue = Color.rgb(color);
+            this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
             return this;
         };
         /**
-         * Sets the text color
-         * @param color Text color token
+         * Sets the border radius of the header
+         * @param borderRadius New border radius (number in px or RadiusKey)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setTextColor = function (color) {
-            if (this.textColor === color) {
-                return this;
-            }
-            this.textColor = color;
-            if (this.percentageText) {
-                this.percentageText.destroy();
-                this.createPercentageText();
-                this.add(this.percentageText);
-            }
+        SectionHeader.prototype.setBorderRadius = function (borderRadius) {
+            this.borderRadiusPx =
+                typeof borderRadius === 'number'
+                    ? borderRadius
+                    : this.pw.radius.px(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 'md');
+            this.regenerateGraphics();
             return this;
         };
         /**
-         * Sets the font size
-         * @param size Font size in pixels
+         * Sets the margin/padding of the header
+         * @param margin New margin size (number in px or SpacingKey)
+         * @returns this for chaining
          */
-        RadialProgress.prototype.setFontSize = function (size) {
-            if (this.fontSize === size) {
-                return this;
-            }
-            this.fontSize = size;
-            if (this.percentageText) {
-                this.percentageText.destroy();
-                this.createPercentageText();
-                this.add(this.percentageText);
-            }
+        SectionHeader.prototype.setMargin = function (margin) {
+            this.marginPx =
+                typeof margin === 'number'
+                    ? margin
+                    : this.pw.spacing.px(margin !== null && margin !== void 0 ? margin : '4');
+            this.regenerateGraphics();
             return this;
         };
         /**
-         * Sets the text alpha
-         * @param alpha Alpha value (0-1)
+         * Creates the header text game object
+         * @param scene The scene to add the text to
+         */
+        SectionHeader.prototype.createHeaderText = function (scene) {
+            this.headerText = scene.add.text(0, 0, this.textValue, {
+                fontSize: "".concat(this.fontSizePx, "px"),
+                fontFamily: this.fontValue,
+                color: this.textColorValue,
+                stroke: this.strokeColorValue,
+                strokeThickness: STROKE_THICKNESS,
+                fontStyle: 'bold', // Make section headers bold by default
+            });
+            this.headerText.setOrigin(0.5, 0.5);
+        };
+        /**
+         * Creates the shadow graphics below the header
+         * @param scene The scene to add the graphics to
+         */
+        SectionHeader.prototype.createShadowGraphics = function (scene) {
+            this.shadowGraphics = scene.add.graphics();
+            this.drawShadow();
+        };
+        /**
+         * Creates the background graphics for the header
+         * @param scene The scene to add the graphics to
+         */
+        SectionHeader.prototype.createBackgroundGraphics = function (scene) {
+            this.backgroundGraphics = scene.add.graphics();
+            this.drawBackground();
+        };
+        /**
+         * Regenerates all graphics after a property change
+         */
+        SectionHeader.prototype.regenerateGraphics = function () {
+            // Update text bounds after text/font changes
+            this.headerText.setText(this.textValue);
+            // Redraw graphics with new properties
+            this.drawShadow();
+            this.drawBackground();
+        };
+        /**
+         * Draws the shadow graphics
+         */
+        SectionHeader.prototype.drawShadow = function () {
+            var sizes = this.getHeaderDimensions();
+            var height = sizes.height, width = sizes.width;
+            this.shadowGraphics.clear();
+            // Limit radius to maximum possible for the header dimensions
+            var maxRadius = Math.min(width / 2, height / 2);
+            var effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
+            // Shadow size is 80% of the header size
+            var shadowWidth = width * SHADOW_SCALE;
+            var shadowHeight = height * SHADOW_SCALE;
+            // Calculate shadow position to center it
+            // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
+            var shadowX = -shadowWidth / 2;
+            var shadowY = SHADOW_OFFSET_Y - shadowHeight / 2 + 4;
+            // Calculate shadow radius (proportional to shadow size)
+            var shadowMaxRadius = Math.min(shadowWidth / 2, shadowHeight / 2);
+            var shadowEffectiveRadius = Math.min(effectiveRadius * SHADOW_SCALE, shadowMaxRadius);
+            // Shadow (only vertical offset, no horizontal)
+            this.shadowGraphics.fillStyle(Color.hex('black'), SHADOW_OPACITY$1);
+            this.shadowGraphics.fillRoundedRect(shadowX, shadowY, shadowWidth, shadowHeight, shadowEffectiveRadius);
+        };
+        /**
+         * Draws the background graphics
          */
-        RadialProgress.prototype.setTextAlpha = function (alpha) {
-            if (this.textAlpha === alpha) {
-                return this;
-            }
-            this.textAlpha = alpha;
-            if (this.percentageText) {
-                this.percentageText.setAlpha(this.textAlpha);
+        SectionHeader.prototype.drawBackground = function () {
+            var _a = this.getHeaderDimensions(), width = _a.width, height = _a.height;
+            this.backgroundGraphics.clear();
+            // Limit radius to maximum possible for the header dimensions
+            var maxRadius = Math.min(width / 2, height / 2);
+            var effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
+            // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
+            var bgX = -width / 2;
+            var bgY = -height / 2;
+            // Main background with subtle gradient effect
+            this.backgroundGraphics.fillStyle(Color.hex(this.backgroundColorValue), 1);
+            this.backgroundGraphics.fillRoundedRect(bgX, bgY, width, height, effectiveRadius);
+            var depth = 0.15;
+            var hightlightWidth = width;
+            if (this.borderRadiusPx > 12) {
+                hightlightWidth = width * 0.7;
             }
-            return this;
+            var highlightX = bgX + (width - hightlightWidth) / 2;
+            // Add a subtle highlight on top for depth
+            var highlightHeight = Math.max(2, height * depth);
+            // For the highlight, use a smaller radius if the highlight is too small
+            var highlightRadius = Math.min(effectiveRadius, highlightHeight / 2);
+            this.backgroundGraphics.fillStyle(Color.hex('white'), depth);
+            this.backgroundGraphics.fillRoundedRect(highlightX, bgY, hightlightWidth, highlightHeight, highlightRadius);
         };
         /**
-         * Sets the radius of the progress bar
-         * @param radius New radius in pixels
+         * Gets the dimensions of the header based on text content
+         * @returns Object containing width and height
          */
-        RadialProgress.prototype.setRadius = function (radius) {
-            if (this.radius === radius) {
-                return this;
-            }
-            this.radius = radius;
-            this.recreateSprites();
-            return this;
+        SectionHeader.prototype.getHeaderDimensions = function () {
+            var textBounds = this.headerText.getBounds();
+            var width = textBounds.width + this.marginPx * 2;
+            var height = textBounds.height + this.marginPx * 2;
+            return { width: width, height: height };
         };
         /**
-         * Destroys the component and cleans up animations
+         * Sets up the container with all graphics in the correct order
          */
-        RadialProgress.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
-        };
-        RadialProgress.prototype.createBackgroundSprite = function () {
-            var bgGraphic = this.scene.add.graphics();
-            // Draw a circle with alpha background
-            bgGraphic.fillStyle(this.pw.color.hex(this.backgroundColor), this.backgroundAlpha);
-            bgGraphic.beginPath();
-            bgGraphic.arc(0, 0, this.radius, 0, Phaser.Math.PI2, false);
-            bgGraphic.closePath();
-            bgGraphic.fillPath();
-            this.backgroundProgressBar = bgGraphic;
-        };
-        RadialProgress.prototype.createRadialArc = function () {
-            var graphics = this.scene.add.graphics();
-            graphics.lineStyle(this.thickness, this.pw.color.hex(this.progressColor), 1);
-            graphics.beginPath();
-            graphics.arc(0, 0, this.radius, this.startAngle, Phaser.Math.DegToRad(THREE_SIXTY), true);
-            graphics.strokePath();
-            this.radialArc = graphics;
+        SectionHeader.prototype.setupContainer = function () {
+            this.add([this.shadowGraphics, this.backgroundGraphics, this.headerText]);
         };
-        RadialProgress.prototype.createPercentageText = function () {
-            this.percentageText = this.scene.add.text(0, 0, "".concat(Math.round(this.currentProgress), "%"), {
-                fontSize: this.pw.fontSize.css(this.fontSize),
-                color: this.pw.color.rgb(this.textColor),
-                fontStyle: 'bold',
+        /**
+         * Sets up interactivity for the header
+         */
+        SectionHeader.prototype.setupInteractivity = function () {
+            var _this = this;
+            this.setInteractive();
+            this.on('pointerdown', function () {
+                _this.setScale(0.95);
+                _this.on('pointerup', function () {
+                    _this.setScale(1);
+                });
             });
-            this.percentageText.setOrigin(0.5);
-            this.percentageText.setAlpha(this.textAlpha);
-        };
-        RadialProgress.prototype.setThickness = function (thickness) {
-            this.thickness = thickness;
-            this.recreateSprites();
-        };
-        RadialProgress.prototype.setupContainer = function () {
-            var children = [this.backgroundProgressBar, this.radialArc];
-            if (this.percentageText) {
-                children.push(this.percentageText);
-            }
-            this.add(children);
-        };
-        RadialProgress.prototype.updateProgressBar = function () {
-            if (!this.radialArc)
-                return;
-            this.radialArc.clear();
-            var startAngleRad = Phaser.Math.DegToRad(this.startAngle);
-            var sweepRad = Phaser.Math.DegToRad((this.currentProgress / A_HUNDRED) * THREE_SIXTY);
-            var endAngleRad = startAngleRad + sweepRad;
-            var isFullCircle = this.currentProgress >= A_HUNDRED;
-            this.radialArc.lineStyle(this.thickness, this.pw.color.hex(this.progressColor), 1);
-            this.radialArc.beginPath();
-            if (isFullCircle) {
-                this.radialArc.arc(0, 0, this.radius, 0, Phaser.Math.PI2, false);
-            }
-            else {
-                this.radialArc.arc(0, 0, this.radius, startAngleRad, endAngleRad, false);
-            }
-            this.radialArc.strokePath();
-        };
-        RadialProgress.prototype.updatePercentageText = function () {
-            if (this.percentageText) {
-                this.percentageText.setText("".concat(Math.round(this.currentProgress), "%"));
-            }
         };
-        RadialProgress.prototype.recreateSprites = function () {
-            var children = [this.backgroundProgressBar, this.radialArc];
-            if (this.percentageText) {
-                children.push(this.percentageText);
-            }
-            this.remove(children);
-            this.backgroundProgressBar.destroy();
-            this.radialArc.destroy();
-            if (this.percentageText) {
-                this.percentageText.destroy();
-                this.percentageText = undefined;
+        /**
+         * Gets a darker version of the given color
+         * @param color Base color to darken
+         * @returns Darker color string
+         */
+        SectionHeader.prototype.getDarkerColor = function (color) {
+            // Try to get a darker shade of the same color family
+            var colorStr = color;
+            // If it's already a shade (e.g., "blue-600"), try to make it darker
+            if (colorStr.includes('-')) {
+                var _a = colorStr.split('-'), family = _a[0], shade = _a[1];
+                if (family && shade) {
+                    var currentShade = parseInt(shade);
+                    var shadeLimit = 900;
+                    var shadeIncrement = 200;
+                    if (!isNaN(currentShade) && currentShade < shadeLimit) {
+                        var darkerShade = Math.min(shadeLimit, currentShade + shadeIncrement);
+                        return Color.rgb("".concat(family, "-").concat(darkerShade));
+                    }
+                }
             }
-            this.createBackgroundSprite();
-            this.createRadialArc();
-            if (this.showText) {
-                this.createPercentageText();
+            // If it's a base color (e.g., "blue"), add a dark shade
+            var baseColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray'];
+            if (baseColors.includes(colorStr)) {
+                return Color.rgb("".concat(colorStr, "-800"));
             }
-            this.setupContainer();
-            this.updateProgressBar();
+            // Fallback to a dark color
+            return Color.rgb('gray-800');
         };
-        return RadialProgress;
+        return SectionHeader;
     }(Phaser$1.GameObjects.Container));
 
-    /**
-     * Row is a layout container that arranges children horizontally with a gap.
-     * The container position (x, y) represents the center of the whole row.
-     */
-    var Row = /** @class */ (function (_super) {
-        __extends(Row, _super);
-        /**
-         * Creates a new Row container
-         * @param params Configuration parameters for the row
-         */
-        function Row(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, _b = _a.gap, gap = _b === void 0 ? DEFAULT_GAP : _b, _c = _a.align, align = _c === void 0 ? 'center' : _c, _d = _a.children, children = _d === void 0 ? [] : _d, _e = _a.horizontalOrigin, horizontalOrigin = _e === void 0 ? 'center' : _e;
-            var _this = _super.call(this, scene, x, y) || this;
-            _this.gap = gap;
-            _this.align = align;
-            _this.horizontalOrigin = horizontalOrigin;
-            if (children.length > 0) {
-                _this.add(children);
+    // Constants for default values
+    var DEFAULT_BORDER_RADIUS = 8;
+    var DEFAULT_MARGIN = 16;
+    var DEFAULT_BACKGROUND_COLOR = 'red-500';
+    var DEFAULT_HEADER_HEIGHT = 60;
+    var CLOSE_BUTTON_SIZE = 32;
+    var CLOSE_BUTTON_MARGIN = 8;
+    var Panel = /** @class */ (function (_super) {
+        __extends(Panel, _super);
+        function Panel(params) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var _this = _super.call(this, params.scene, (_a = params.x) !== null && _a !== void 0 ? _a : 0, (_b = params.y) !== null && _b !== void 0 ? _b : 0) || this;
+            _this.sectionHeader = null;
+            _this.closeButton = null;
+            _this.title = (_c = params.title) !== null && _c !== void 0 ? _c : '';
+            _this.showCloseButton = (_d = params.showCloseButton) !== null && _d !== void 0 ? _d : false;
+            _this.onClose = params.onClose;
+            _this.headerHeight = DEFAULT_HEADER_HEIGHT;
+            // Create the card first
+            _this.card = new Card({
+                scene: params.scene,
+                x: 0,
+                y: 0,
+                backgroundColor: (_e = params.backgroundColor) !== null && _e !== void 0 ? _e : DEFAULT_BACKGROUND_COLOR,
+                borderRadius: (_f = params.borderRadius) !== null && _f !== void 0 ? _f : DEFAULT_BORDER_RADIUS,
+                margin: (_g = params.margin) !== null && _g !== void 0 ? _g : DEFAULT_MARGIN,
+                child: params.child
+            });
+            // Add card to container
+            _this.add(_this.card);
+            // Create section header if title is provided
+            if (_this.title) {
+                _this.createSectionHeader();
+            }
+            // Create close button if requested
+            if (_this.showCloseButton) {
+                _this.createCloseButton();
             }
-            _this.layout();
+            // Update layout
+            _this.updateLayout();
             return _this;
         }
         /**
-         * Sets the gap between elements and updates layout
-         * @param gap Gap size in pixels
-         */
-        Row.prototype.setGap = function (gap) {
-            this.gap = gap;
-            this.layout();
-        };
-        /**
-         * Sets the vertical alignment and updates layout
-         * @param align New vertical alignment
-         */
-        Row.prototype.setAlign = function (align) {
-            this.align = align;
-            this.layout();
-        };
-        /**
-         * Adds a single child to the row
-         * @param child GameObject to add
-         * @param relayout Whether to update layout after adding
-         * @returns This row instance for chaining
-         */
-        Row.prototype.addChild = function (child, relayout) {
-            if (relayout === void 0) { relayout = true; }
-            this.add(child);
-            if (relayout) {
-                this.layout();
-            }
-            return this;
-        };
-        /**
-         * Adds multiple children to the row
-         * @param children Array of GameObjects to add
-         * @param relayout Whether to update layout after adding
-         * @returns This row instance for chaining
+         * Creates the section header
          */
-        Row.prototype.addChildren = function (children, relayout) {
-            if (relayout === void 0) { relayout = true; }
-            if (children.length > 0)
-                this.add(children);
-            if (relayout)
-                this.layout();
-            return this;
+        Panel.prototype.createSectionHeader = function () {
+            this.sectionHeader = new SectionHeader({
+                scene: this.scene,
+                x: 0,
+                y: 0,
+                text: this.title,
+                backgroundColor: DEFAULT_BACKGROUND_COLOR,
+                borderRadius: 0
+            });
+            // Add header to container
+            this.add(this.sectionHeader);
         };
         /**
-         * Recomputes children's positions and updates this container size
+         * Creates the close button
          */
-        Row.prototype.layout = function () {
+        Panel.prototype.createCloseButton = function () {
             var _this = this;
-            var children = this.list;
-            if (children.length === 0) {
-                this.setSize(0, 0);
-                return;
-            }
-            // Measure sizes and origins
-            var entries = children.map(function (child) { return ({
-                child: child,
-                width: _this.getDisplayWidth(child),
-                height: _this.getDisplayHeight(child),
-                origin: _this.getNormalizedOrigin(child),
-            }); });
-            var maxHeight = entries.reduce(function (m, s) { return Math.max(m, s.height); }, 0);
-            var totalWidth = entries.reduce(function (sum, s) { return sum + s.width; }, 0) +
-                this.gap * (entries.length - 1);
-            // Determine left of content based on horizontalOrigin
-            var contentLeftX = this.horizontalOrigin === 'left'
-                ? 0
-                : this.horizontalOrigin === 'center'
-                    ? -totalWidth / 2
-                    : -totalWidth;
-            // Walk left to right, aligning considering each child's origin
-            var cursorLeftX = contentLeftX;
-            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                var _a = entries_1[_i], child = _a.child, width = _a.width, height = _a.height, origin_1 = _a.origin;
-                // Vertical alignment: align top/bottom edges or centers correctly using origin
-                var y = 0;
-                if (this.align === 'top') {
-                    // place child's top edge at content top
-                    y = -maxHeight / 2 + origin_1.y * height;
-                }
-                else if (this.align === 'bottom') {
-                    // place child's bottom edge at content bottom
-                    y = maxHeight / 2 - (1 - origin_1.y) * height;
-                }
-                else {
-                    // center alignment
-                    y = (origin_1.y - 0.5) * height;
-                }
-                // Horizontal position so that child's left is at cursorLeftX
-                var x = cursorLeftX + origin_1.x * width;
-                child.setPosition(x, y);
-                cursorLeftX += width + this.gap;
-            }
-            this.setSize(totalWidth, maxHeight);
+            this.closeButton = new FlatIconButton({
+                scene: this.scene,
+                x: 0,
+                y: 0,
+                icon: 'x',
+                size: CLOSE_BUTTON_SIZE,
+                onClick: function () {
+                    if (_this.onClose) {
+                        _this.onClose();
+                    }
+                }
+            });
+            // Add close button to container
+            this.add(this.closeButton);
         };
         /**
-         * Gets the display width of a game object
-         * @param child GameObject to measure
-         * @returns Display width in pixels
+         * Updates the layout after property changes
          */
-        Row.prototype.getDisplayWidth = function (child) {
-            return getDisplayWidthOf(child);
+        Panel.prototype.updateLayout = function () {
+            // Get card bounds
+            var cardBounds = this.card.getBounds();
+            // Calculate header position (top of the card)
+            if (this.sectionHeader) {
+                var headerY = -cardBounds.height / 2 + this.headerHeight / 2;
+                this.sectionHeader.setPosition(0, headerY);
+                // Note: SectionHeader doesn't have setWidth, it auto-sizes to content
+            }
+            // Calculate close button position (top-right corner)
+            if (this.closeButton) {
+                var buttonX = cardBounds.width / 2 - CLOSE_BUTTON_SIZE / 2 - CLOSE_BUTTON_MARGIN;
+                var buttonY = -cardBounds.height / 2 + CLOSE_BUTTON_SIZE / 2 + CLOSE_BUTTON_MARGIN;
+                this.closeButton.setPosition(buttonX, buttonY);
+            }
         };
         /**
-         * Gets the display height of a game object
-         * @param child GameObject to measure
-         * @returns Display height in pixels
+         * Sets the title of the panel
          */
-        Row.prototype.getDisplayHeight = function (child) {
-            return getDisplayHeightOf(child);
+        Panel.prototype.setTitle = function (title) {
+            this.title = title;
+            if (title && !this.sectionHeader) {
+                this.createSectionHeader();
+            }
+            else if (!title && this.sectionHeader) {
+                this.remove(this.sectionHeader);
+                this.sectionHeader = null;
+            }
+            else if (this.sectionHeader) {
+                this.sectionHeader.setText(title);
+            }
+            this.updateLayout();
+            return this;
         };
         /**
-         * Gets the normalized origin point of a game object
-         * @param child GameObject to get origin from
-         * @returns Object with normalized x,y coordinates of the origin point
+         * Sets whether to show the close button
          */
-        Row.prototype.getNormalizedOrigin = function (child) {
-            return getNormalizedOriginOf(child);
+        Panel.prototype.setShowCloseButton = function (show) {
+            this.showCloseButton = show;
+            if (show && !this.closeButton) {
+                this.createCloseButton();
+            }
+            else if (!show && this.closeButton) {
+                this.remove(this.closeButton);
+                this.closeButton = null;
+            }
+            this.updateLayout();
+            return this;
         };
-        return Row;
-    }(Phaser$1.GameObjects.Container));
-
-    /** Vertical offset for the shadow */
-    var SHADOW_OFFSET_Y = 4;
-    /** Opacity value for the shadow */
-    var SHADOW_OPACITY$1 = 0.25;
-    /** Thickness of the text stroke */
-    var STROKE_THICKNESS = 2;
-    /** Shadow size as a percentage of the header size */
-    var SHADOW_SCALE = 0.95;
-    /**
-     * A stylized section header component with shadow, text stroke and auto-sizing
-     */
-    var SectionHeader = /** @class */ (function (_super) {
-        __extends(SectionHeader, _super);
         /**
-         * Creates a new SectionHeader
-         * @param params Configuration parameters for the header
+         * Sets the close callback
          */
-        function SectionHeader(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, fontSize = _a.fontSize, font = _a.font, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue-600' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'white' : _c, strokeColor = _a.strokeColor, _d = _a.borderRadius, borderRadius = _d === void 0 ? 'md' : _d, _e = _a.margin, margin = _e === void 0 ? '4' : _e;
-            var _this = _super.call(this, scene, x, y) || this;
-            _this.pw = getPWFromScene(scene);
-            // Store values
-            _this.textValue = text;
-            _this.fontSizePx =
-                typeof fontSize === 'number'
-                    ? fontSize
-                    : _this.pw.fontSize.px(fontSize !== null && fontSize !== void 0 ? fontSize : 'lg');
-            _this.marginPx =
-                typeof margin === 'number'
-                    ? margin
-                    : _this.pw.spacing.px(margin !== null && margin !== void 0 ? margin : '4');
-            _this.borderRadiusPx =
-                typeof borderRadius === 'number'
-                    ? borderRadius
-                    : _this.pw.radius.px(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 'md');
-            _this.backgroundColorValue = Color.rgb(backgroundColor);
-            _this.textColorValue = Color.rgb(textColor);
-            // If no stroke color provided, use a darker version of the background
-            _this.strokeColorValue = strokeColor
-                ? Color.rgb(strokeColor)
-                : _this.getDarkerColor(backgroundColor);
-            _this.fontValue = typeof font === 'string' ? font : _this.pw.font.family(font !== null && font !== void 0 ? font : 'display');
-            _this.createHeaderText(scene);
-            _this.createShadowGraphics(scene);
-            _this.createBackgroundGraphics(scene);
-            _this.setupContainer();
-            _this.setupInteractivity();
-            return _this;
-        }
+        Panel.prototype.setOnClose = function (callback) {
+            this.onClose = callback;
+            return this;
+        };
         /**
-         * Sets the text content of the header
-         * @param text New text content
-         * @returns this for chaining
+         * Sets the background color
          */
-        SectionHeader.prototype.setText = function (text) {
-            this.textValue = text;
-            this.headerText.setText(text);
-            this.regenerateGraphics();
+        Panel.prototype.setBackgroundColor = function (color) {
+            this.card.setBackgroundColor(color);
+            if (this.sectionHeader) {
+                this.sectionHeader.setBackgroundColor(color);
+            }
             return this;
         };
         /**
-         * Sets the font size of the header text
-         * @param fontSize New font size (number in px or FontSizeKey)
-         * @returns this for chaining
+         * Sets the border radius
          */
-        SectionHeader.prototype.setFontSize = function (fontSize) {
-            this.fontSizePx =
-                typeof fontSize === 'number'
-                    ? fontSize
-                    : this.pw.fontSize.px(fontSize !== null && fontSize !== void 0 ? fontSize : 'lg');
-            this.headerText.setFontSize(this.fontSizePx);
-            this.regenerateGraphics();
+        Panel.prototype.setBorderRadius = function (radius) {
+            this.card.setBorderRadius(radius);
+            this.updateLayout();
             return this;
         };
         /**
-         * Sets the font family of the header text
-         * @param font New font family (FontKey or string)
-         * @returns this for chaining
+         * Sets the margin
          */
-        SectionHeader.prototype.setFont = function (font) {
-            this.fontValue = typeof font === 'string' ? font : this.pw.font.family(font !== null && font !== void 0 ? font : 'display');
-            this.headerText.setFontFamily(this.fontValue);
-            this.regenerateGraphics();
+        Panel.prototype.setMargin = function (margin) {
+            this.card.setMargin(margin);
+            this.updateLayout();
             return this;
         };
         /**
-         * Sets the background color of the header
-         * @param color New background color (ColorKey or string)
-         * @returns this for chaining
+         * Sets a new child component
          */
-        SectionHeader.prototype.setBackgroundColor = function (color) {
-            this.backgroundColorValue = Color.rgb(color);
-            // Update stroke color to match new background if it was auto-generated
-            if (!this.strokeColorValue.startsWith('#')) {
-                this.strokeColorValue = this.getDarkerColor(color);
-                this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
-            }
-            this.regenerateGraphics();
+        Panel.prototype.setChild = function (child) {
+            this.card.setChild(child);
+            this.updateLayout();
             return this;
         };
         /**
-         * Sets the text color of the header
-         * @param color New text color (ColorKey or string)
-         * @returns this for chaining
+         * Gets the card component
          */
-        SectionHeader.prototype.setTextColor = function (color) {
-            this.textColorValue = Color.rgb(color);
-            this.headerText.setColor(this.textColorValue);
-            return this;
+        Panel.prototype.getCard = function () {
+            return this.card;
         };
         /**
-         * Sets the stroke color of the header text
-         * @param color New stroke color (ColorKey or string)
-         * @returns this for chaining
+         * Gets the section header component
          */
-        SectionHeader.prototype.setStrokeColor = function (color) {
-            this.strokeColorValue = Color.rgb(color);
-            this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
+        Panel.prototype.getSectionHeader = function () {
+            return this.sectionHeader;
+        };
+        /**
+         * Gets the close button component
+         */
+        Panel.prototype.getCloseButton = function () {
+            return this.closeButton;
+        };
+        return Panel;
+    }(Phaser$1.GameObjects.Container));
+
+    var A_HUNDRED = 100;
+    var THREE_SIXTY = 360;
+    var START_ANGLE = 270;
+    var DEFAULT_THICKNESS = 4;
+    var DEFAULT_BACKGROUND_ALPHA = 0.2;
+    var DEFAULT_TEXT_COLOR = 'white';
+    var DEFAULT_FONT_SIZE = 'base';
+    var DEFAULT_TEXT_ALPHA = 1;
+    var RadialProgress = /** @class */ (function (_super) {
+        __extends(RadialProgress, _super);
+        function RadialProgress(_a) {
+            var scene = _a.scene, x = _a.x, y = _a.y, radius = _a.radius, _b = _a.thickness, thickness = _b === void 0 ? DEFAULT_THICKNESS : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'gray-200' : _c, _d = _a.backgroundAlpha, backgroundAlpha = _d === void 0 ? DEFAULT_BACKGROUND_ALPHA : _d, _e = _a.progressColor, progressColor = _e === void 0 ? 'blue-500' : _e, _f = _a.progress, progress = _f === void 0 ? 0 : _f, _g = _a.startAngle, startAngle = _g === void 0 ? START_ANGLE : _g, _h = _a.showText, showText = _h === void 0 ? false : _h, _j = _a.textColor, textColor = _j === void 0 ? DEFAULT_TEXT_COLOR : _j, _k = _a.fontSize, fontSize = _k === void 0 ? DEFAULT_FONT_SIZE : _k, _l = _a.textAlpha, textAlpha = _l === void 0 ? DEFAULT_TEXT_ALPHA : _l;
+            var _this = _super.call(this, scene, x, y) || this;
+            _this.pw = getPWFromScene(scene);
+            _this.radius = radius;
+            _this.thickness = thickness;
+            _this.backgroundColor = backgroundColor;
+            _this.backgroundAlpha = backgroundAlpha;
+            _this.progressColor = progressColor;
+            _this.currentProgress = Math.max(0, Math.min(A_HUNDRED, progress));
+            _this.startAngle = startAngle;
+            _this.showText = showText;
+            _this.textColor = textColor;
+            _this.fontSize = fontSize;
+            _this.textAlpha = textAlpha;
+            _this.createBackgroundSprite();
+            _this.createRadialArc();
+            if (_this.showText) {
+                _this.createPercentageText();
+            }
+            _this.setupContainer();
+            _this.updateProgressBar();
+            return _this;
+        }
+        /**
+         * Sets the progress value (0-100)
+         * @param progress Progress value between 0 and 100
+         * @param animate Whether to animate the change (default: true)
+         */
+        RadialProgress.prototype.setProgress = function (progress, animate) {
+            var _this = this;
+            if (animate === void 0) { animate = true; }
+            var newProgress = Math.max(0, Math.min(A_HUNDRED, progress));
+            if (this.currentProgress === newProgress) {
+                return this;
+            }
+            if (animate) {
+                var target_1 = { value: this.currentProgress };
+                this.scene.tweens.add({
+                    targets: target_1,
+                    value: newProgress,
+                    duration: 300,
+                    ease: 'Power2',
+                    onUpdate: function () {
+                        _this.currentProgress = target_1.value;
+                        _this.updateProgressBar();
+                        _this.updatePercentageText();
+                    },
+                });
+            }
+            else {
+                this.currentProgress = newProgress;
+                this.updateProgressBar();
+                this.updatePercentageText();
+            }
             return this;
         };
         /**
-         * Sets the border radius of the header
-         * @param borderRadius New border radius (number in px or RadiusKey)
-         * @returns this for chaining
+         * Gets the current progress value
+         * @returns Current progress value (0-100)
          */
-        SectionHeader.prototype.setBorderRadius = function (borderRadius) {
-            this.borderRadiusPx =
-                typeof borderRadius === 'number'
-                    ? borderRadius
-                    : this.pw.radius.px(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 'md');
-            this.regenerateGraphics();
+        RadialProgress.prototype.getProgress = function () {
+            return this.currentProgress;
+        };
+        /**
+     * Sets the background color of the progress bar
+     * @param color Background color token
+     */
+        RadialProgress.prototype.setBackgroundColor = function (color) {
+            if (this.backgroundColor === color) {
+                return this;
+            }
+            this.backgroundColor = color;
+            this.recreateSprites();
             return this;
         };
         /**
-         * Sets the margin/padding of the header
-         * @param margin New margin size (number in px or SpacingKey)
-         * @returns this for chaining
+         * Sets the background alpha of the progress bar
+         * @param alpha Background alpha value (0-1)
          */
-        SectionHeader.prototype.setMargin = function (margin) {
-            this.marginPx =
-                typeof margin === 'number'
-                    ? margin
-                    : this.pw.spacing.px(margin !== null && margin !== void 0 ? margin : '4');
-            this.regenerateGraphics();
+        RadialProgress.prototype.setBackgroundAlpha = function (alpha) {
+            if (this.backgroundAlpha === alpha) {
+                return this;
+            }
+            this.backgroundAlpha = alpha;
+            this.recreateSprites();
             return this;
         };
         /**
-         * Creates the header text game object
-         * @param scene The scene to add the text to
+         * Sets the progress color of the progress bar
+         * @param color Progress color token
          */
-        SectionHeader.prototype.createHeaderText = function (scene) {
-            this.headerText = scene.add.text(0, 0, this.textValue, {
-                fontSize: "".concat(this.fontSizePx, "px"),
-                fontFamily: this.fontValue,
-                color: this.textColorValue,
-                stroke: this.strokeColorValue,
-                strokeThickness: STROKE_THICKNESS,
-                fontStyle: 'bold', // Make section headers bold by default
-            });
-            this.headerText.setOrigin(0.5, 0.5);
+        RadialProgress.prototype.setProgressColor = function (color) {
+            if (this.progressColor === color) {
+                return this;
+            }
+            this.progressColor = color;
+            this.recreateSprites();
+            return this;
         };
         /**
-         * Creates the shadow graphics below the header
-         * @param scene The scene to add the graphics to
+         * Sets whether to show the percentage text
+         * @param show Whether to show the text
          */
-        SectionHeader.prototype.createShadowGraphics = function (scene) {
-            this.shadowGraphics = scene.add.graphics();
-            this.drawShadow();
+        RadialProgress.prototype.setShowText = function (show) {
+            if (this.showText === show) {
+                return this;
+            }
+            this.showText = show;
+            if (show && !this.percentageText) {
+                this.createPercentageText();
+                if (this.percentageText) {
+                    this.add(this.percentageText);
+                }
+            }
+            else if (!show && this.percentageText) {
+                this.remove(this.percentageText);
+                this.percentageText.destroy();
+                this.percentageText = undefined;
+            }
+            return this;
         };
         /**
-         * Creates the background graphics for the header
-         * @param scene The scene to add the graphics to
+         * Sets the text color
+         * @param color Text color token
          */
-        SectionHeader.prototype.createBackgroundGraphics = function (scene) {
-            this.backgroundGraphics = scene.add.graphics();
-            this.drawBackground();
+        RadialProgress.prototype.setTextColor = function (color) {
+            if (this.textColor === color) {
+                return this;
+            }
+            this.textColor = color;
+            if (this.percentageText) {
+                this.percentageText.destroy();
+                this.createPercentageText();
+                this.add(this.percentageText);
+            }
+            return this;
         };
         /**
-         * Regenerates all graphics after a property change
+         * Sets the font size
+         * @param size Font size in pixels
          */
-        SectionHeader.prototype.regenerateGraphics = function () {
-            // Update text bounds after text/font changes
-            this.headerText.setText(this.textValue);
-            // Redraw graphics with new properties
-            this.drawShadow();
-            this.drawBackground();
+        RadialProgress.prototype.setFontSize = function (size) {
+            if (this.fontSize === size) {
+                return this;
+            }
+            this.fontSize = size;
+            if (this.percentageText) {
+                this.percentageText.destroy();
+                this.createPercentageText();
+                this.add(this.percentageText);
+            }
+            return this;
         };
         /**
-         * Draws the shadow graphics
+         * Sets the text alpha
+         * @param alpha Alpha value (0-1)
          */
-        SectionHeader.prototype.drawShadow = function () {
-            var sizes = this.getHeaderDimensions();
-            var height = sizes.height, width = sizes.width;
-            this.shadowGraphics.clear();
-            // Limit radius to maximum possible for the header dimensions
-            var maxRadius = Math.min(width / 2, height / 2);
-            var effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
-            // Shadow size is 80% of the header size
-            var shadowWidth = width * SHADOW_SCALE;
-            var shadowHeight = height * SHADOW_SCALE;
-            // Calculate shadow position to center it
-            // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
-            var shadowX = -shadowWidth / 2;
-            var shadowY = SHADOW_OFFSET_Y - shadowHeight / 2 + 4;
-            // Calculate shadow radius (proportional to shadow size)
-            var shadowMaxRadius = Math.min(shadowWidth / 2, shadowHeight / 2);
-            var shadowEffectiveRadius = Math.min(effectiveRadius * SHADOW_SCALE, shadowMaxRadius);
-            // Shadow (only vertical offset, no horizontal)
-            this.shadowGraphics.fillStyle(Color.hex('black'), SHADOW_OPACITY$1);
-            this.shadowGraphics.fillRoundedRect(shadowX, shadowY, shadowWidth, shadowHeight, shadowEffectiveRadius);
+        RadialProgress.prototype.setTextAlpha = function (alpha) {
+            if (this.textAlpha === alpha) {
+                return this;
+            }
+            this.textAlpha = alpha;
+            if (this.percentageText) {
+                this.percentageText.setAlpha(this.textAlpha);
+            }
+            return this;
         };
         /**
-         * Draws the background graphics
+         * Sets the radius of the progress bar
+         * @param radius New radius in pixels
          */
-        SectionHeader.prototype.drawBackground = function () {
-            var _a = this.getHeaderDimensions(), width = _a.width, height = _a.height;
-            this.backgroundGraphics.clear();
-            // Limit radius to maximum possible for the header dimensions
-            var maxRadius = Math.min(width / 2, height / 2);
-            var effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
-            // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
-            var bgX = -width / 2;
-            var bgY = -height / 2;
-            // Main background with subtle gradient effect
-            this.backgroundGraphics.fillStyle(Color.hex(this.backgroundColorValue), 1);
-            this.backgroundGraphics.fillRoundedRect(bgX, bgY, width, height, effectiveRadius);
-            var depth = 0.15;
-            var hightlightWidth = width;
-            if (this.borderRadiusPx > 12) {
-                hightlightWidth = width * 0.7;
+        RadialProgress.prototype.setRadius = function (radius) {
+            if (this.radius === radius) {
+                return this;
             }
-            var highlightX = bgX + (width - hightlightWidth) / 2;
-            // Add a subtle highlight on top for depth
-            var highlightHeight = Math.max(2, height * depth);
-            // For the highlight, use a smaller radius if the highlight is too small
-            var highlightRadius = Math.min(effectiveRadius, highlightHeight / 2);
-            this.backgroundGraphics.fillStyle(Color.hex('white'), depth);
-            this.backgroundGraphics.fillRoundedRect(highlightX, bgY, hightlightWidth, highlightHeight, highlightRadius);
+            this.radius = radius;
+            this.recreateSprites();
+            return this;
         };
         /**
-         * Gets the dimensions of the header based on text content
-         * @returns Object containing width and height
+         * Destroys the component and cleans up animations
          */
-        SectionHeader.prototype.getHeaderDimensions = function () {
-            var textBounds = this.headerText.getBounds();
-            var width = textBounds.width + this.marginPx * 2;
-            var height = textBounds.height + this.marginPx * 2;
-            return { width: width, height: height };
+        RadialProgress.prototype.destroy = function () {
+            _super.prototype.destroy.call(this);
         };
-        /**
-         * Sets up the container with all graphics in the correct order
-         */
-        SectionHeader.prototype.setupContainer = function () {
-            this.add([this.shadowGraphics, this.backgroundGraphics, this.headerText]);
+        RadialProgress.prototype.createBackgroundSprite = function () {
+            var bgGraphic = this.scene.add.graphics();
+            // Draw a circle with alpha background
+            bgGraphic.fillStyle(this.pw.color.hex(this.backgroundColor), this.backgroundAlpha);
+            bgGraphic.beginPath();
+            bgGraphic.arc(0, 0, this.radius, 0, Phaser.Math.PI2, false);
+            bgGraphic.closePath();
+            bgGraphic.fillPath();
+            this.backgroundProgressBar = bgGraphic;
         };
-        /**
-         * Sets up interactivity for the header
-         */
-        SectionHeader.prototype.setupInteractivity = function () {
-            var _this = this;
-            this.setInteractive();
-            this.on('pointerdown', function () {
-                _this.setScale(0.95);
-                _this.on('pointerup', function () {
-                    _this.setScale(1);
-                });
+        RadialProgress.prototype.createRadialArc = function () {
+            var graphics = this.scene.add.graphics();
+            graphics.lineStyle(this.thickness, this.pw.color.hex(this.progressColor), 1);
+            graphics.beginPath();
+            graphics.arc(0, 0, this.radius, this.startAngle, Phaser.Math.DegToRad(THREE_SIXTY), true);
+            graphics.strokePath();
+            this.radialArc = graphics;
+        };
+        RadialProgress.prototype.createPercentageText = function () {
+            this.percentageText = this.scene.add.text(0, 0, "".concat(Math.round(this.currentProgress), "%"), {
+                fontSize: this.pw.fontSize.css(this.fontSize),
+                color: this.pw.color.rgb(this.textColor),
+                fontStyle: 'bold',
             });
+            this.percentageText.setOrigin(0.5);
+            this.percentageText.setAlpha(this.textAlpha);
         };
-        /**
-         * Gets a darker version of the given color
-         * @param color Base color to darken
-         * @returns Darker color string
-         */
-        SectionHeader.prototype.getDarkerColor = function (color) {
-            // Try to get a darker shade of the same color family
-            var colorStr = color;
-            // If it's already a shade (e.g., "blue-600"), try to make it darker
-            if (colorStr.includes('-')) {
-                var _a = colorStr.split('-'), family = _a[0], shade = _a[1];
-                if (family && shade) {
-                    var currentShade = parseInt(shade);
-                    var shadeLimit = 900;
-                    var shadeIncrement = 200;
-                    if (!isNaN(currentShade) && currentShade < shadeLimit) {
-                        var darkerShade = Math.min(shadeLimit, currentShade + shadeIncrement);
-                        return Color.rgb("".concat(family, "-").concat(darkerShade));
-                    }
-                }
+        RadialProgress.prototype.setThickness = function (thickness) {
+            this.thickness = thickness;
+            this.recreateSprites();
+        };
+        RadialProgress.prototype.setupContainer = function () {
+            var children = [this.backgroundProgressBar, this.radialArc];
+            if (this.percentageText) {
+                children.push(this.percentageText);
             }
-            // If it's a base color (e.g., "blue"), add a dark shade
-            var baseColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray'];
-            if (baseColors.includes(colorStr)) {
-                return Color.rgb("".concat(colorStr, "-800"));
+            this.add(children);
+        };
+        RadialProgress.prototype.updateProgressBar = function () {
+            if (!this.radialArc)
+                return;
+            this.radialArc.clear();
+            var startAngleRad = Phaser.Math.DegToRad(this.startAngle);
+            var sweepRad = Phaser.Math.DegToRad((this.currentProgress / A_HUNDRED) * THREE_SIXTY);
+            var endAngleRad = startAngleRad + sweepRad;
+            var isFullCircle = this.currentProgress >= A_HUNDRED;
+            this.radialArc.lineStyle(this.thickness, this.pw.color.hex(this.progressColor), 1);
+            this.radialArc.beginPath();
+            if (isFullCircle) {
+                this.radialArc.arc(0, 0, this.radius, 0, Phaser.Math.PI2, false);
             }
-            // Fallback to a dark color
-            return Color.rgb('gray-800');
+            else {
+                this.radialArc.arc(0, 0, this.radius, startAngleRad, endAngleRad, false);
+            }
+            this.radialArc.strokePath();
         };
-        return SectionHeader;
+        RadialProgress.prototype.updatePercentageText = function () {
+            if (this.percentageText) {
+                this.percentageText.setText("".concat(Math.round(this.currentProgress), "%"));
+            }
+        };
+        RadialProgress.prototype.recreateSprites = function () {
+            var children = [this.backgroundProgressBar, this.radialArc];
+            if (this.percentageText) {
+                children.push(this.percentageText);
+            }
+            this.remove(children);
+            this.backgroundProgressBar.destroy();
+            this.radialArc.destroy();
+            if (this.percentageText) {
+                this.percentageText.destroy();
+                this.percentageText = undefined;
+            }
+            this.createBackgroundSprite();
+            this.createRadialArc();
+            if (this.showText) {
+                this.createPercentageText();
+            }
+            this.setupContainer();
+            this.updateProgressBar();
+        };
+        return RadialProgress;
     }(Phaser$1.GameObjects.Container));
 
     /**
@@ -5175,7 +5409,7 @@
          * @param params TextButtonParams
          */
         function TextButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, fontSize = _a.fontSize, font = _a.font, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'white' : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? 'md' : _d, _e = _a.margin, margin = _e === void 0 ? '4' : _e, onClick = _a.onClick;
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'base' : _b, font = _a.font, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'blue' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.margin, margin = _f === void 0 ? '4' : _f, onClick = _a.onClick;
             var _this = _super.call(this, scene, x, y) || this;
             _this.pw = getPWFromScene(scene);
             // Store values
@@ -5561,6 +5795,7 @@
     exports.CircularProgress = CircularProgress;
     exports.Color = Color;
     exports.Column = Column;
+    exports.DEFAULT_GAP = DEFAULT_GAP;
     exports.FlatIconButton = FlatIconButton;
     exports.FontSize = FontSize;
     exports.HUDINI_KEY = HUDINI_KEY;
@@ -5568,6 +5803,7 @@
     exports.IconButton = IconButton;
     exports.LinearProgress = LinearProgress;
     exports.PHASER_WIND_KEY = PHASER_WIND_KEY;
+    exports.Panel = Panel;
     exports.PhaserWindPlugin = PhaserWindPlugin;
     exports.RadialProgress = RadialProgress;
     exports.Radius = Radius;
@@ -5591,7 +5827,10 @@
     exports.defaultShadowMap = defaultShadowMap;
     exports.fontMap = fontMap;
     exports.fontSizeMap = fontSizeMap;
+    exports.getDisplayHeightOf = getDisplayHeightOf;
+    exports.getDisplayWidthOf = getDisplayWidthOf;
     exports.getHudini = getHudini;
+    exports.getNormalizedOriginOf = getNormalizedOriginOf;
     exports.getPWFromScene = getPWFromScene;
     exports.isValidColor = isValidColor;
     exports.merge = merge;