hudini 0.18.0 → 0.19.0

package/dist/hudini.js

@@ -933,6 +933,19 @@
             }
             return null;
         };
+        /**
+         * Normalizes a color by adding -500 if only color name is provided
+         * @param color - Color token or color name
+         * @returns Normalized color token
+         */
+        const normalizeColorToken = (color) => {
+            if (typeof color === 'string' && !String(color).includes('-')) {
+                if (color in palette && color !== 'black' && color !== 'white') {
+                    return `${color}-500`;
+                }
+            }
+            return color;
+        };
         /**
          * Get RGB string representation of a color
          * @param color - Color token, theme color key or valid color string
@@ -949,25 +962,27 @@
             if (colorFromTheme) {
                 return rgb(colorFromTheme);
             }
-            const parts = color?.split('-') ?? [];
+            // Normalize color: add -500 if only color name is provided
+            const normalizedColor = normalizeColorToken(color);
+            const parts = normalizedColor?.split('-') ?? [];
             if (parts.length === 2) {
                 const colorKey = parts[0];
                 const shade = parts[1];
                 const colorValue = palette[colorKey]?.[shade];
                 if (!colorValue) {
-                    if (isValidColor(color)) {
-                        return color;
+                    if (isValidColor(normalizedColor)) {
+                        return normalizedColor;
                     }
                     throw new Error(`Color token "${colorKey}-${shade}" not found`);
                 }
                 return colorValue;
             }
-            const colorValue = palette[color];
+            const colorValue = palette[normalizedColor];
             if (!colorValue) {
-                if (isValidColor(color)) {
-                    return color;
+                if (isValidColor(normalizedColor)) {
+                    return normalizedColor;
                 }
-                throw new Error(`Color token "${color}" not found`);
+                throw new Error(`Color token "${normalizedColor}" not found`);
             }
             return colorValue;
         };
@@ -998,24 +1013,26 @@
             if (colorFromTheme) {
                 return hex(colorFromTheme);
             }
-            const parts = color?.split('-') ?? [];
+            // Normalize color: add -500 if only color name is provided
+            const normalizedColor = normalizeColorToken(color);
+            const parts = normalizedColor?.split('-') ?? [];
             if (parts.length === 2) {
                 const colorKey = parts[0];
                 const shade = parts[1];
                 const colorValue = palette[colorKey]?.[shade];
                 if (!colorValue) {
-                    if (isValidColor(color)) {
-                        return convertColorValueToNumber(color);
+                    if (isValidColor(normalizedColor)) {
+                        return convertColorValueToNumber(normalizedColor);
                     }
                     throw new Error(`Color token "${colorKey}-${shade}" not found`);
                 }
                 return convertColorValueToNumber(colorValue);
             }
-            const colorToConvert = palette[color];
+            const colorToConvert = palette[normalizedColor];
             if (isValidColor(colorToConvert)) {
                 return convertColorValueToNumber(colorToConvert);
             }
-            throw new Error(`Color token "${color}" not found`);
+            throw new Error(`Color token "${normalizedColor}" not found`);
         };
         const api = {
             rgb,
@@ -1181,6 +1198,65 @@
         };
     };
 
+    /**
+     * Opacity scale mapping following Tailwind's opacity scale.
+     * Values are in the 0..1 range, ready for Phaser's `setAlpha()`.
+     */
+    const opacityMap = {
+        '0': 0,
+        '5': 0.05,
+        '10': 0.1,
+        '15': 0.15,
+        '20': 0.2,
+        '25': 0.25,
+        '30': 0.3,
+        '35': 0.35,
+        '40': 0.4,
+        '45': 0.45,
+        '50': 0.5,
+        '55': 0.55,
+        '60': 0.6,
+        '65': 0.65,
+        '70': 0.7,
+        '75': 0.75,
+        '80': 0.8,
+        '85': 0.85,
+        '90': 0.9,
+        '95': 0.95,
+        '100': 1,
+    };
+    /**
+     * Create an opacity API bound to an optional theme opacity map.
+     * @example
+     * const o = createOpacity({ faded: 0.35 });
+     * o.value('faded'); // 0.35
+     * o.value('50');    // 0.5
+     */
+    const createOpacity = (themeOpacity) => {
+        const map = {
+            ...opacityMap,
+            ...themeOpacity,
+        };
+        const get = (key) => {
+            return typeof map[key] === 'number' ? map[key] : 0;
+        };
+        return {
+            value: (key) => {
+                return get(key);
+            },
+            percent: (key) => {
+                const ONE_HUNDRED = 100;
+                return get(key) * ONE_HUNDRED;
+            },
+            css: (key) => {
+                const ONE_HUNDRED = 100;
+                return `${get(key) * ONE_HUNDRED}%`;
+            },
+        };
+    };
+    /** Convenience instance using default opacity map (no theme). */
+    const Opacity = createOpacity(undefined);
+
     /**
      * Mapping of radius keys to their pixel values
      */
@@ -1353,6 +1429,7 @@
             overlay: 'black',
         },
         spacing: { ...spacingMap },
+        opacity: { ...opacityMap },
         typography: {
             heading: {
                 fontSize: '2xl',
@@ -1429,6 +1506,7 @@
             overlay: 'black',
         },
         spacing: { ...spacingMap },
+        opacity: { ...opacityMap },
         typography: {
             heading: {
                 fontSize: '2xl',
@@ -1490,6 +1568,7 @@
         fontSizeInstance = null;
         spacingInstance = null;
         radiusInstance = null;
+        opacityInstance = null;
         fontInstance = null;
         shadowInstance = null;
         /** Current theme configuration */
@@ -1536,6 +1615,7 @@
             this.fontSizeInstance = createFontSize(this.theme.fontSizes);
             this.spacingInstance = createSpacing(this.theme.spacing);
             this.radiusInstance = createRadius(this.theme.radius);
+            this.opacityInstance = createOpacity(this.theme.opacity);
             this.fontInstance = createFont(this.theme.fonts, this.theme.fontSizes);
             this.shadowInstance = createShadow(this.theme.effects);
         }
@@ -1558,6 +1638,9 @@
         get radius() {
             return this.radiusInstance;
         }
+        get opacity() {
+            return this.opacityInstance;
+        }
         get font() {
             return this.fontInstance;
         }
@@ -1566,9 +1649,31 @@
         }
     }
 
+    /**
+     * @deprecated Use {@link withPhaserWind} instead.
+     *
+     * Forces single inheritance, which conflicts with any user-defined `BaseScene`
+     * or other libraries that ship their own scene base class. It also relies on a
+     * non-null assertion (`pw!`) that lies to TypeScript about when the plugin is
+     * available — touching `this.pw` before the plugin mounts throws at runtime.
+     *
+     * Prefer the `withPhaserWind(scene)` accessor:
+     *
+     * ```ts
+     * import { withPhaserWind } from 'phaser-wind';
+     * import type { ThemeType } from './theme';
+     *
+     * class MyScene extends Phaser.Scene {
+     *   create() {
+     *     const pw = withPhaserWind<ThemeType>(this);
+     *   }
+     * }
+     * ```
+     *
+     * Kept exported to avoid breaking existing consumers.
+     */
     class SceneWithPhaserWind extends Phaser.Scene {
         /**
-         *
          * @param config The scene key or scene specific configuration settings.
          */
         constructor(config) {
@@ -1577,6 +1682,37 @@
         pw;
     }
 
+    /**
+     * Accessor for the Phaser Wind plugin from within a Phaser scene.
+     *
+     * Preferred over {@link SceneWithPhaserWind} (inheritance) and over module
+     * augmentation of `Phaser.Scene`, because it:
+     * - Composes with any existing base scene (no forced inheritance).
+     * - Keeps the theme type explicit at the call site (no silent `any`).
+     * - Doesn't rely on non-null assertions that lie about lifecycle.
+     *
+     * Call it inside `create()` / `update()` (after the plugin has been installed).
+     *
+     * @typeParam T - The theme config type. Pass your `ThemeType` to get
+     *   type-narrowed access to your custom tokens.
+     * @param scene - The Phaser scene instance.
+     * @returns The Phaser Wind plugin instance bound to the given theme type.
+     *
+     * @example
+     * ```ts
+     * import { withPhaserWind } from 'phaser-wind';
+     * import type { ThemeType } from './theme';
+     *
+     * class MyScene extends Phaser.Scene {
+     *   create() {
+     *     const pw = withPhaserWind<ThemeType>(this);
+     *     this.cameras.main.setBackgroundColor(pw.color.rgb('background'));
+     *   }
+     * }
+     * ```
+     */
+    const withPhaserWind = (scene) => scene.plugins.get(PHASER_WIND_KEY);
+
     var getPWFromScene$1 = function (scene) {
         return scene.pw;
     };
@@ -1685,7 +1821,8 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$b = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$b = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$b = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b * 3; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$b = 2;
     /**
      * A flexible card component that adapts to its child content size
@@ -4220,8 +4357,8 @@
     var POINTER_DOWN_SCALE$5 = 0.95;
     // Border constants
     var BLACK_BORDER_THICKNESS$a = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$a = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$a = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$a = 2;
     // Icon constants
     var ICON_STROKE_THICKNESS$3 = 3;
@@ -4234,7 +4371,7 @@
     var FlatIconButton$1 = /** @class */ (function (_super) {
         __extends(FlatIconButton, _super);
         function FlatIconButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, icon = _a.icon, _b = _a.iconStyle, iconStyle = _b === void 0 ? 'solid' : _b, size = _a.size, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'gray-600' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'white' : _d, onClick = _a.onClick, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.backgroundOpacity, backgroundOpacity = _f === void 0 ? 1 : _f, _g = _a.iconOpacity, iconOpacity = _g === void 0 ? 1 : _g;
+            var scene = _a.scene, x = _a.x, y = _a.y, icon = _a.icon, _b = _a.iconStyle, iconStyle = _b === void 0 ? 'solid' : _b, size = _a.size, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'blue-500' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'white' : _d, onClick = _a.onClick, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.backgroundOpacity, backgroundOpacity = _f === void 0 ? 1 : _f, _g = _a.iconOpacity, iconOpacity = _g === void 0 ? 1 : _g;
             var _this = _super.call(this, scene, x, y) || this;
             _this.backgroundOpacityValue = 1;
             _this.iconOpacityValue = 1;
@@ -4590,7 +4727,8 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$9 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$9 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$9 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 * 3; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$9 = 2;
     /**
      * A flexible card component that adapts to its child content size
@@ -5085,8 +5223,8 @@
     const POINTER_DOWN_SCALE$4 = 0.95;
     // Border constants
     const BLACK_BORDER_THICKNESS$8 = 2;
-    const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$8 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 * 2; // 4 pixels total
+    const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 = 3;
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$8 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 * 2; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$8 = 2;
     // Icon constants
     const ICON_STROKE_THICKNESS$2 = 3;
@@ -5107,7 +5245,7 @@
         iconColorValue; // rgb string
         backgroundOpacityValue = 1;
         iconOpacityValue = 1;
-        constructor({ scene, x, y, icon, iconStyle = 'solid', size, backgroundColor = 'gray-600', iconColor = 'white', onClick, borderRadius = 'md', backgroundOpacity = 1, iconOpacity = 1, }) {
+        constructor({ scene, x, y, icon, iconStyle = 'solid', size, backgroundColor = 'blue-500', iconColor = 'white', onClick, borderRadius = 'md', backgroundOpacity = 1, iconOpacity = 1, }) {
             super(scene, x, y);
             this.pw = getPWFromScene(scene);
             this.baseSizePx =
@@ -5386,7 +5524,7 @@
     /**
      * Calculates a color variant by adjusting brightness.
      *
-     * @param color - The base color (can be a Phaser Wind token like "blue-500" or a CSS color like "#3B82F6")
+     * @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
      * @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
      *                    For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
      * @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
@@ -5394,6 +5532,7 @@
      * @returns The adjusted color as a number
      *
      * @remarks
+     * - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
      * - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
      *   by adjusting the shade value with tokenDiff (clamped between 100-900)
      * - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
@@ -5401,6 +5540,10 @@
      *
      * @example
      * ```typescript
+     * // Using color name only - defaults to -500
+     * const defaultRed = getColorVariant('red', 0, 0);
+     * // Returns red-500 color value
+     *
      * // Using color token - lighter variant
      * const lightBlue = getColorVariant('blue-500', -400, 0);
      * // Returns blue-100 color value
@@ -5419,10 +5562,18 @@
      * ```
      */
     const getColorVariant$1 = (color, tokenDiff, colorDiff) => {
-        const colorRgb = Color.rgb(color);
-        if (Color.isValidColorToken(color)) {
+        // If only the color name is provided (without shade), validate and add -500 as default
+        let normalizedColor = color;
+        if (typeof color === 'string' && !color.includes('-') && !Color.isValidColorToken(color)) {
+            // Check if the color exists in the palette
+            if (color in palette && color !== 'black' && color !== 'white') {
+                normalizedColor = `${color}-500`;
+            }
+        }
+        const colorRgb = Color.rgb(normalizedColor);
+        if (Color.isValidColorToken(normalizedColor)) {
             // Token-based calculation
-            const parts = color.split('-');
+            const parts = normalizedColor.split('-');
             const colorShade = parseInt(parts[1].toString(), 10);
             const shadeMin = 100;
             const shadeMax = 900;
@@ -5455,7 +5606,8 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$7 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$7 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$7 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 * 3; // 5 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$7 = 2;
     // Overlay constants
     const LIGHT_OVERLAY_SCALE$1 = 0.6;
@@ -5484,7 +5636,7 @@
             const sizePx = typeof size === 'number'
                 ? size
                 : this.pw.fontSize.px(size ?? 'md');
-            const baseColor = color ?? 'gray';
+            const baseColor = color ?? 'blue-500';
             this.sizePx = sizePx;
             this.updateSize();
             this.baseColor = baseColor;
@@ -6694,7 +6846,7 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$5 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$5 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 * 2; // 4 pixels total
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$5 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 * 3; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$5 = 2;
     /**
      * A flat section header component without gradient overlays, with text stroke and auto-sizing
@@ -7122,8 +7274,8 @@
     var POINTER_DOWN_SCALE$2 = 0.95;
     // Border constants
     var BLACK_BORDER_THICKNESS$4 = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$4 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$4 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$4 = 2;
     /**
      * A customizable flat text button component for Phaser, supporting auto-sizing,
@@ -7136,7 +7288,7 @@
          * @param params FlatTextButtonParams
          */
         function FlatTextButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _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.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue-500' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
             var _this = _super.call(this, { scene: scene, x: x, y: y }) || this;
             _this.pw = getPWFromScene$1(scene);
             // Store values
@@ -7433,7 +7585,7 @@
     /**
      * Calculates a color variant by adjusting brightness.
      *
-     * @param color - The base color (can be a Phaser Wind token like "blue-500" or a CSS color like "#3B82F6")
+     * @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
      * @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
      *                    For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
      * @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
@@ -7441,6 +7593,7 @@
      * @returns The adjusted color as a number
      *
      * @remarks
+     * - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
      * - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
      *   by adjusting the shade value with tokenDiff (clamped between 100-900)
      * - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
@@ -7448,6 +7601,10 @@
      *
      * @example
      * ```typescript
+     * // Using color name only - defaults to -500
+     * const defaultRed = getColorVariant('red', 0, 0);
+     * // Returns red-500 color value
+     *
      * // Using color token - lighter variant
      * const lightBlue = getColorVariant('blue-500', -400, 0);
      * // Returns blue-100 color value
@@ -7466,10 +7623,18 @@
      * ```
      */
     var getColorVariant = function (color, tokenDiff, colorDiff) {
-        var colorRgb = Color.rgb(color);
-        if (Color.isValidColorToken(color)) {
+        // If only the color name is provided (without shade), validate and add -500 as default
+        var normalizedColor = color;
+        if (typeof color === 'string' && !color.includes('-') && !Color.isValidColorToken(color)) {
+            // Check if the color exists in the palette
+            if (color in palette && color !== 'black' && color !== 'white') {
+                normalizedColor = "".concat(color, "-500");
+            }
+        }
+        var colorRgb = Color.rgb(normalizedColor);
+        if (Color.isValidColorToken(normalizedColor)) {
             // Token-based calculation
-            var parts = color.split('-');
+            var parts = normalizedColor.split('-');
             var colorShade = parseInt(parts[1].toString(), 10);
             var shadeMin = 100;
             var shadeMax = 900;
@@ -7500,7 +7665,8 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$3 = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$3 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$3 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 * 3; // 5 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$3 = 2;
     // Overlay constants
     var LIGHT_OVERLAY_SCALE = 0.6;
@@ -7521,7 +7687,7 @@
             var sizePx = typeof size === 'number'
                 ? size
                 : _this.pw.fontSize.px(size !== null && size !== void 0 ? size : 'md');
-            var baseColor = color !== null && color !== void 0 ? color : 'gray';
+            var baseColor = color !== null && color !== void 0 ? color : 'blue-500';
             _this.sizePx = sizePx;
             _this.updateSize();
             _this.baseColor = baseColor;
@@ -8701,7 +8867,7 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$1 = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$1 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 * 2; // 4 pixels total
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$1 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 * 3; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$1 = 2;
     /**
      * A flat section header component without gradient overlays, with text stroke and auto-sizing
@@ -9016,8 +9182,8 @@
     var COLOR_DARKER_AMOUNT = -30;
     // Border constants
     var BLACK_BORDER_THICKNESS = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA = 2;
     /**
      * A customizable text button component for Phaser, supporting auto-sizing,
@@ -9030,7 +9196,7 @@
          * @param params TextButtonParams
          */
         function TextButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _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.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue-500' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
             var _this = _super.call(this, { scene: scene, x: x, y: y }) || this;
             _this.pw = getPWFromScene$1(scene);
             // Store values
@@ -9475,10 +9641,33 @@
         return HudiniPlugin;
     }(Phaser$1.Plugins.BasePlugin));
 
+    /**
+     * @deprecated Use {@link withHudini} instead.
+     *
+     * Forces single inheritance, which conflicts with any user-defined `BaseScene`
+     * or other libraries that ship their own scene base class. It also relies on a
+     * non-null assertion (`hudini!`) that lies to TypeScript about when the plugin
+     * is available — touching `this.hudini` before the plugin mounts throws at
+     * runtime.
+     *
+     * Prefer the `withHudini(scene)` accessor:
+     *
+     * ```ts
+     * import { withHudini } from 'hudini';
+     * import type { ThemeType } from './theme';
+     *
+     * class MyScene extends Phaser.Scene {
+     *   create() {
+     *     const hudini = withHudini<ThemeType>(this);
+     *   }
+     * }
+     * ```
+     *
+     * Kept exported to avoid breaking existing consumers.
+     */
     var SceneWithHudini = /** @class */ (function (_super) {
         __extends(SceneWithHudini, _super);
         /**
-         *
          * @param config The scene key or scene specific configuration settings.
          */
         function SceneWithHudini(config) {
@@ -9487,6 +9676,40 @@
         return SceneWithHudini;
     }(SceneWithPhaserWind));
 
+    /**
+     * Accessor for the Hudini plugin from within a Phaser scene.
+     *
+     * Preferred over {@link SceneWithHudini} (inheritance) and over module
+     * augmentation of `Phaser.Scene`, because it:
+     * - Composes with any existing base scene (no forced inheritance).
+     * - Keeps the theme type explicit at the call site (no silent `any`).
+     * - Doesn't rely on non-null assertions that lie about lifecycle.
+     *
+     * Call it inside `create()` / `update()` (after the plugin has been installed).
+     *
+     * @typeParam T - The theme config type. Pass your `ThemeType` to get
+     *   type-narrowed access to your custom tokens (through `hudini.pw`).
+     * @param scene - The Phaser scene instance.
+     * @returns The Hudini plugin instance bound to the given theme type.
+     *
+     * @example
+     * ```ts
+     * import { withHudini } from 'hudini';
+     * import type { ThemeType } from './theme';
+     *
+     * class MyScene extends Phaser.Scene {
+     *   create() {
+     *     const hudini = withHudini<ThemeType>(this);
+     *     const pw = hudini.pw;
+     *     this.cameras.main.setBackgroundColor(pw.color.rgb('background'));
+     *   }
+     * }
+     * ```
+     */
+    var withHudini = function (scene) {
+        return scene.plugins.get(HUDINI_KEY);
+    };
+
     var getHudini = function (scene) {
         return scene.hudini;
     };
@@ -9505,6 +9728,7 @@
     exports.HudiniPlugin = HudiniPlugin;
     exports.IconButton = IconButton;
     exports.LinearProgress = LinearProgress;
+    exports.Opacity = Opacity;
     exports.PHASER_WIND_KEY = PHASER_WIND_KEY;
     exports.Panel = Panel;
     exports.PhaserWindPlugin = PhaserWindPlugin;
@@ -9522,6 +9746,7 @@
     exports.createColor = createColor;
     exports.createFont = createFont;
     exports.createFontSize = createFontSize;
+    exports.createOpacity = createOpacity;
     exports.createRadius = createRadius;
     exports.createShadow = createShadow;
     exports.createSpacing = createSpacing;
@@ -9541,8 +9766,11 @@
     exports.loadFonts = loadFonts;
     exports.merge = merge;
     exports.mergeDeep = mergeDeep;
+    exports.opacityMap = opacityMap;
     exports.palette = palette;
     exports.radiusMap = radiusMap;
     exports.spacingMap = spacingMap;
+    exports.withHudini = withHudini;
+    exports.withPhaserWind = withPhaserWind;
 
 }));