@energy8platform/game-engine 0.15.0 → 0.15.2

package/dist/react-jsx.d.ts

@@ -322,19 +322,28 @@ interface ToggleConfig {
 }
 
 /**
- * Ambient JSX IntrinsicElements declarations for the PixiJS React reconciler.
+ * JSX prop types for the PixiJS React reconciler.
  *
- * Consumer apps opt in once (e.g. from an app-level `vite-env.d.ts`):
+ * The engine auto-augments `react`'s module-scoped `JSX.IntrinsicElements`
+ * with every registered element (`<flexContainer>`, `<button>`, `<label>`,
+ * `<labelValue>`, etc). Because the augmentation is scoped to the `react`
+ * module (not the legacy global `JSX` namespace), it reliably wins over
+ * `@types/react`'s HTML defaults for colliding names like `<button>` / `<label>`.
  *
- *   import '@energy8platform/game-engine/react-jsx';
+ * **Consumers don't need any shim.** Any import from `@energy8platform/game-engine/react`
+ * (e.g. `createPixiRoot`, `extendUIElements`, `ReactScene` — you're already
+ * importing these to boot the reconciler) pulls this module in and the JSX
+ * types activate automatically.
  *
- * After that, TypeScript recognises `<flexContainer>`, `<button>`, `<label>` etc.
- * with fully-typed props — no need to hand-maintain a local `pixi-jsx.d.ts`.
+ * If a project imports only from `/ui` or `/core` and never touches `/react`,
+ * add a one-line side-effect import to trigger the augmentation:
  *
- * The JS entry for this subpath is intentionally empty: this module exists
- * solely to carry type declarations that side-effect the global `JSX` namespace.
+ * ```ts
+ * // app/src/pixi-jsx.d.ts
+ * import '@energy8platform/game-engine/react-jsx';
+ * ```
  *
- * Dash-notation is supported for nested config objects:
+ * Dash-notation for nested config objects is supported:
  *   <button colors-default={0xff0000} colors-hover={0x00ff00} />
  */
 
@@ -435,6 +444,26 @@ interface GraphicsProps extends BaseProps {
     width?: number;
     height?: number;
 }
+interface AnimatedSpriteProps extends BaseProps {
+    textures?: Texture[];
+    animationSpeed?: number;
+    loop?: boolean;
+    playing?: boolean;
+}
+interface NineSliceSpriteProps extends BaseProps {
+    texture?: string | Texture;
+    leftWidth?: number;
+    topHeight?: number;
+    rightWidth?: number;
+    bottomHeight?: number;
+}
+interface TilingSpriteProps extends BaseProps {
+    texture?: string | Texture;
+    tilePosition?: {
+        x: number;
+        y: number;
+    };
+}
 interface ButtonComponentProps extends BaseProps, Omit<ButtonConfig, 'colors' | 'textStyle'> {
     colors?: Partial<Record<ButtonState, number>>;
     textStyle?: Record<string, unknown>;
@@ -536,47 +565,38 @@ interface ToggleComponentProps extends BaseProps, Omit<ToggleConfig, 'width' | '
     offView?: ViewInput;
     onChange?: (value: boolean) => void;
 }
-declare global {
+/**
+ * Complete element → prop-type map for all engine-registered JSX elements.
+ * Also consumable directly for typing custom wrappers around engine elements.
+ */
+interface EngineIntrinsicElements {
+    container: BaseProps;
+    sprite: SpriteProps;
+    text: TextProps;
+    graphics: GraphicsProps;
+    animatedSprite: AnimatedSpriteProps;
+    nineSliceSprite: NineSliceSpriteProps;
+    tilingSprite: TilingSpriteProps;
+    button: ButtonComponentProps;
+    label: LabelComponentProps;
+    labelValue: LabelValueComponentProps;
+    panel: PanelComponentProps;
+    flexContainer: FlexContainerComponentProps;
+    progressBar: ProgressBarComponentProps;
+    scrollContainer: ScrollContainerComponentProps;
+    modal: ModalComponentProps;
+    toast: ToastComponentProps;
+    balanceDisplay: BalanceDisplayComponentProps;
+    winDisplay: WinDisplayComponentProps;
+    layout: LayoutComponentProps;
+    slider: SliderComponentProps;
+    toggle: ToggleComponentProps;
+}
+declare module 'react' {
     namespace JSX {
-        interface IntrinsicElements {
-            container: BaseProps;
-            sprite: SpriteProps;
-            text: TextProps;
-            graphics: GraphicsProps;
-            animatedSprite: BaseProps & {
-                textures?: Texture[];
-                animationSpeed?: number;
-                loop?: boolean;
-                playing?: boolean;
-            };
-            nineSliceSprite: BaseProps & {
-                texture?: string | Texture;
-                leftWidth?: number;
-                topHeight?: number;
-                rightWidth?: number;
-                bottomHeight?: number;
-            };
-            tilingSprite: BaseProps & {
-                texture?: string | Texture;
-                tilePosition?: {
-                    x: number;
-                    y: number;
-                };
-            };
-            button: ButtonComponentProps;
-            label: LabelComponentProps;
-            labelValue: LabelValueComponentProps;
-            panel: PanelComponentProps;
-            flexContainer: FlexContainerComponentProps;
-            progressBar: ProgressBarComponentProps;
-            scrollContainer: ScrollContainerComponentProps;
-            modal: ModalComponentProps;
-            toast: ToastComponentProps;
-            balanceDisplay: BalanceDisplayComponentProps;
-            winDisplay: WinDisplayComponentProps;
-            layout: LayoutComponentProps;
-            slider: SliderComponentProps;
-            toggle: ToggleComponentProps;
+        interface IntrinsicElements extends EngineIntrinsicElements {
         }
     }
 }
+
+export type { AnimatedSpriteProps, BalanceDisplayComponentProps, BaseProps, ButtonComponentProps, EngineIntrinsicElements, FlexContainerComponentProps, GraphicsProps, LabelComponentProps, LabelValueComponentProps, LayoutComponentProps, ModalComponentProps, NineSliceSpriteProps, PanelComponentProps, PixiEventProps, ProgressBarComponentProps, ScrollContainerComponentProps, SliderComponentProps, SpriteProps, TextProps, TilingSpriteProps, ToastComponentProps, ToggleComponentProps, WinDisplayComponentProps };

package/dist/react.cjs.js

@@ -314,24 +314,29 @@ function measureChild(child, parentContentW = 0, parentContentH = 0) {
     const cfg = child._flexConfig;
     const resolvedLW = resolveDimension(cfg?.layoutWidth, parentContentW);
     const resolvedLH = resolveDimension(cfg?.layoutHeight, parentContentH);
-    if (resolvedLW !== undefined && resolvedLH !== undefined) {
-        return { w: resolvedLW, h: resolvedLH, ox: 0, oy: 0 };
-    }
-    // For FlexContainers, use their explicit or computed size
+    // FlexContainer children are top-left origin by construction, so `ox/oy = 0`
+    // is correct and we can skip the `getLocalBounds()` call entirely.
     if (child instanceof FlexContainer) {
         const fc = child;
         const w = fc._explicitWidth > 0 ? fc._explicitWidth : (fc._computedWidth > 0 ? fc._computedWidth : undefined);
         const h = fc._explicitHeight > 0 ? fc._explicitHeight : (fc._computedHeight > 0 ? fc._computedHeight : undefined);
         if (w !== undefined && h !== undefined) {
-            return { w, h, ox: 0, oy: 0 };
+            return { w: resolvedLW ?? w, h: resolvedLH ?? h, ox: 0, oy: 0 };
         }
     }
-    // Use localBounds to get the true visual extent and origin offset.
-    // This handles children with non-zero anchors (e.g. Button, Label with centered text).
+    // Use localBounds to get the true visual origin offset.
+    // We take `ox/oy` from bounds unconditionally — a user-supplied `layoutWidth/Height`
+    // overrides the SIZE used by flex (protection against pre-paint bounds of 0), but
+    // it must NOT erase the center-anchor compensation: Button/Label views are drawn at
+    // `(-w/2..w/2)` and their bounds.x = -w/2 is what lets `layoutLine` place the
+    // visible rectangle where the layout intends.
     const bounds = child.getLocalBounds();
-    const w = resolvedLW ?? bounds.width;
-    const h = resolvedLH ?? bounds.height;
-    return { w, h, ox: bounds.x, oy: bounds.y };
+    return {
+        w: resolvedLW ?? bounds.width,
+        h: resolvedLH ?? bounds.height,
+        ox: bounds.x,
+        oy: bounds.y,
+    };
 }
 /**
  * Set a child's main or cross dimension.
@@ -820,30 +825,35 @@ class FlexContainer extends pixi_js.Container {
             this._computedHeight = this._explicitHeight > 0 ? this._explicitHeight : (pt + naturalMainSize + pb);
         }
         // Position flexExclude children (absolute positioning).
-        // All position props describe the visual (bounds) rectangle, so we subtract
-        // `ox/oy` to compensate for children with a centered origin (Button, Label).
+        // All position props describe the visual (bounds) rectangle. We derive the
+        // visual rectangle directly from `getLocalBounds()` rather than the
+        // layout-config `w`/`h` returned by measureChild — those may differ from
+        // actual bounds when the user pins `layoutWidth`/`layoutHeight` to a value
+        // that doesn't match the child's real visual extent (e.g. a Button whose
+        // text overflows its configured `width`). Mixing layout size with real
+        // bounds-origin would shift the visual center off the requested point.
         // `centerX/centerY` take precedence over `left/right` / `top/bottom` on each axis.
         for (const child of this._layoutChildren) {
             if (!child._flexConfig?.flexExclude)
                 continue;
             const cfg = child._flexConfig;
-            const { w, h, ox, oy } = measureChild(child, pctRefW, pctRefH);
+            const bounds = child.getLocalBounds();
             const cw = this._computedWidth;
             const ch = this._computedHeight;
             const centerX = resolveDimension(cfg.centerX, pctRefW);
             if (centerX !== undefined)
-                child.x = centerX - w / 2 - ox;
+                child.x = centerX - bounds.x - bounds.width / 2;
             else if (cfg.left !== undefined)
-                child.x = cfg.left - ox;
+                child.x = cfg.left - bounds.x;
             else if (cfg.right !== undefined)
-                child.x = cw - w - cfg.right - ox;
+                child.x = cw - cfg.right - bounds.x - bounds.width;
             const centerY = resolveDimension(cfg.centerY, pctRefH);
             if (centerY !== undefined)
-                child.y = centerY - h / 2 - oy;
+                child.y = centerY - bounds.y - bounds.height / 2;
             else if (cfg.top !== undefined)
-                child.y = cfg.top - oy;
+                child.y = cfg.top - bounds.y;
             else if (cfg.bottom !== undefined)
-                child.y = ch - h - cfg.bottom - oy;
+                child.y = ch - cfg.bottom - bounds.y - bounds.height;
         }
     }
     /** Computed content size (after layout) */