canvasengine 2.0.0-beta.5 → 2.0.0-beta.50

package/dist/utils/Ease.d.ts

@@ -0,0 +1,17 @@
+export declare const Easing: {
+    linear: import('popmotion').Easing;
+    easeIn: import('popmotion').Easing;
+    easeInOut: import('popmotion').Easing;
+    easeOut: import('popmotion').Easing;
+    circIn: import('popmotion').Easing;
+    circInOut: import('popmotion').Easing;
+    circOut: import('popmotion').Easing;
+    backIn: import('popmotion').Easing;
+    backInOut: import('popmotion').Easing;
+    backOut: import('popmotion').Easing;
+    anticipate: import('popmotion').Easing;
+    bounceIn: import('popmotion').Easing;
+    bounceInOut: (p: number) => number;
+    bounceOut: (p: number) => number;
+};
+//# sourceMappingURL=Ease.d.ts.map

package/dist/utils/Ease.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ease.d.ts","sourceRoot":"","sources":["../../src/utils/Ease.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAA"}

package/dist/utils/GlobalAssetLoader.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Global Asset Loader
+ *
+ * Tracks the loading progress of all assets (images, spritesheets, etc.) across all sprites in a component tree.
+ * This allows components to know when all assets are loaded, useful for displaying loaders or progress bars.
+ *
+ * @example
+ * ```typescript
+ * const loader = new GlobalAssetLoader();
+ *
+ * loader.onProgress((progress) => {
+ *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+ * });
+ *
+ * loader.onComplete(() => {
+ *   console.log('All assets loaded!');
+ * });
+ *
+ * // Register assets as they start loading
+ * const assetId = loader.registerAsset('path/to/image.png');
+ *
+ * // Update progress
+ * loader.updateProgress(assetId, 0.5);
+ *
+ * // Mark as complete
+ * loader.completeAsset(assetId);
+ * ```
+ */
+export declare class GlobalAssetLoader {
+    private assets;
+    private onProgressCallbacks;
+    private onCompleteCallbacks;
+    private assetCounter;
+    private isComplete;
+    /**
+     * Registers a new asset to track
+     *
+     * @param assetPath - The path or identifier of the asset being loaded
+     * @returns A unique ID for this asset that should be used for progress updates
+     *
+     * @example
+     * ```typescript
+     * const assetId = loader.registerAsset('path/to/image.png');
+     * ```
+     */
+    registerAsset(assetPath: string): string;
+    /**
+     * Updates the progress of a specific asset
+     *
+     * @param assetId - The ID returned by registerAsset
+     * @param progress - Progress value between 0 and 1
+     *
+     * @example
+     * ```typescript
+     * loader.updateProgress(assetId, 0.5); // 50% loaded
+     * ```
+     */
+    updateProgress(assetId: string, progress: number): void;
+    /**
+     * Marks an asset as completely loaded
+     *
+     * @param assetId - The ID returned by registerAsset
+     *
+     * @example
+     * ```typescript
+     * loader.completeAsset(assetId);
+     * ```
+     */
+    completeAsset(assetId: string): void;
+    /**
+     * Removes an asset from tracking (useful for cleanup)
+     *
+     * @param assetId - The ID returned by registerAsset
+     */
+    removeAsset(assetId: string): void;
+    /**
+     * Registers a callback that will be called whenever the global progress changes
+     *
+     * @param callback - Function that receives the global progress (0-1)
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onProgress((progress) => {
+     *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onProgress(callback: (progress: number) => void): () => void;
+    /**
+     * Registers a callback that will be called when all assets are loaded
+     *
+     * @param callback - Function to call when all assets are complete
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onComplete(() => {
+     *   console.log('All assets loaded!');
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onComplete(callback: () => void): () => void;
+    /**
+     * Gets the current global progress (0-1)
+     *
+     * @returns Progress value between 0 and 1
+     */
+    getGlobalProgress(): number;
+    /**
+     * Gets the number of assets currently being tracked
+     *
+     * @returns Number of registered assets
+     */
+    getAssetCount(): number;
+    /**
+     * Gets the number of completed assets
+     *
+     * @returns Number of completed assets
+     */
+    getCompletedCount(): number;
+    /**
+     * Checks if all assets are loaded and triggers onComplete callbacks
+     */
+    private checkCompletion;
+    /**
+     * Updates global progress and notifies all progress callbacks
+     */
+    private updateGlobalProgress;
+    /**
+     * Resets the loader, clearing all assets and callbacks
+     */
+    reset(): void;
+}
+//# sourceMappingURL=GlobalAssetLoader.d.ts.map

package/dist/utils/GlobalAssetLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalAssetLoader.d.ts","sourceRoot":"","sources":["../../src/utils/GlobalAssetLoader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAoE;IAClF,OAAO,CAAC,mBAAmB,CAA8C;IACzE,OAAO,CAAC,mBAAmB,CAA8B;IACzD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,UAAU,CAAkB;IAEpC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAQxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAWvD;;;;;;;;;OASG;IACH,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAapC;;;;OAIG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;IAe5D;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAa5C;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAa3B;;;;OAIG;IACH,aAAa,IAAI,MAAM;IAIvB;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAQ3B;;OAEG;IACH,OAAO,CAAC,eAAe;IAiBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,KAAK,IAAI,IAAI;CAOd"}

package/dist/utils/RadialGradient.d.ts

@@ -0,0 +1,57 @@
+import { Texture, Matrix } from 'pixi.js';
+/**
+ * Creates a radial gradient texture that can be used in PixiJS.
+ * @example
+ * const gradient = new RadialGradient(size, size, 0, size, size, 0);
+ * gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
+ * gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
+ * gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
+ */
+export declare class RadialGradient {
+    private x0;
+    private y0;
+    private x1;
+    private y1;
+    private x2;
+    private y2;
+    private focalPoint;
+    private canvas;
+    private ctx;
+    private gradient;
+    private texture;
+    transform: Matrix;
+    size: number;
+    /**
+     * Creates a new RadialGradient instance
+     * @param x0 - The x-coordinate of the starting circle
+     * @param y0 - The y-coordinate of the starting circle
+     * @param x1 - The x-coordinate of the ending circle
+     * @param y1 - The y-coordinate of the ending circle
+     * @param x2 - The x-coordinate for gradient transformation
+     * @param y2 - The y-coordinate for gradient transformation
+     * @param focalPoint - The focal point of the gradient (0-1), defaults to 0
+     */
+    constructor(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, focalPoint?: number);
+    /**
+     * Adds a color stop to the gradient
+     * @param offset - The position of the color stop (0-1)
+     * @param color - The color value (any valid CSS color string)
+     */
+    addColorStop(offset: number, color: string): void;
+    /**
+     * Renders the gradient and returns the texture with its transformation matrix
+     * @param options - Render options
+     * @param options.translate - Optional translation coordinates
+     * @returns Object containing the texture and transformation matrix
+     */
+    render({ translate }?: {
+        translate?: {
+            x: number;
+            y: number;
+        };
+    }): {
+        texture: Texture<import('pixi.js').TextureSource<any>>;
+        matrix: Matrix;
+    };
+}
+//# sourceMappingURL=RadialGradient.d.ts.map

package/dist/utils/RadialGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.d.ts","sourceRoot":"","sources":["../../src/utils/RadialGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,EAAE,MAAM,SAAS,CAAC;AAEnE;;;;;;;GAOG;AACH,qBAAa,cAAc;IAoBvB,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,UAAU;IAzBpB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,OAAO,CAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,SAAO;IAElB;;;;;;;;;OASG;gBAEO,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAU;IAsBhC;;;;OAIG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAM1C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,GAAE;QAAE,SAAS,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAO;;;;CAuCpE"}

package/dist/utils/functions.d.ts

@@ -0,0 +1,2 @@
+export declare function isPercent(value?: string | number): boolean;
+//# sourceMappingURL=functions.d.ts.map

package/dist/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../src/utils/functions.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,WAMhD"}

package/dist/utils/tabindex.d.ts

@@ -0,0 +1,16 @@
+import { WritableSignal } from '@signe/reactive';
+export type TabindexBoundaryMode = "wrap" | "clamp" | "none";
+export type TabindexBounds = {
+    count: () => number;
+    min?: number;
+} | {
+    min: number;
+    max: number;
+};
+type TabindexNavigator = {
+    next: (delta: number) => void;
+    set: (value: number) => void;
+};
+export declare function createTabindexNavigator(tabindex: WritableSignal<number>, bounds: TabindexBounds, mode?: TabindexBoundaryMode): TabindexNavigator;
+export {};
+//# sourceMappingURL=tabindex.d.ts.map

package/dist/utils/tabindex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabindex.d.ts","sourceRoot":"","sources":["../../src/utils/tabindex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,cAAc,GACtB;IAAE,KAAK,EAAE,MAAM,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACrC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjC,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAuCF,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,cAAc,CAAC,MAAM,CAAC,EAChC,MAAM,EAAE,cAAc,EACtB,IAAI,GAAE,oBAA6B,GAClC,iBAAiB,CAenB"}

package/package.json

@@ -1,22 +1,28 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.50",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "pixi.js": "^8.9.2"
+  },
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
-    "@signe/reactive": "^1.0.1",
+    "@pixi/layout": "^3.2.0",
+    "@signe/reactive": "^2.6.0",
     "howler": "^2.2.4",
+    "joypad.js": "^2.3.5",
     "pixi-filters": "^6.0.5",
     "pixi-viewport": "^6.0.3",
-    "pixi.js": "^8.6.4",
     "popmotion": "^11.0.5",
     "rxjs": "^7.8.1",
-    "yoga-layout": "^2.0.1"
+    "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
-    "@types/howler": "^2.2.11"
+    "@types/howler": "^2.2.11",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "author": "Samuel Ronce",
   "license": "MIT",
@@ -38,7 +44,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+    "build": "vite build",
+    "dev": "vite build --watch"
   }
 }

package/src/components/Button.ts

@@ -0,0 +1,399 @@
+import { effect, signal, computed, isSignal, Signal } from "@signe/reactive";
+import { FederatedPointerEvent } from "pixi.js";
+import { h } from "../engine/signal";
+import { useDefineProps } from "../hooks/useProps";
+import { Container } from "./Container";
+import { Rect, Circle, Ellipse } from "./Graphic";
+import { Text } from "./Text";
+import { ControlsDirective } from "../directives/Controls";
+import { JoystickControls } from "../directives/JoystickControls";
+import { Element } from "../engine/reactive";
+
+/**
+ * Button states for visual feedback
+ */
+export enum ButtonState {
+  Normal = "normal",
+  Hover = "hover",
+  Pressed = "pressed",
+  Disabled = "disabled"
+}
+
+/**
+ * Button style configuration for different visual approaches
+ */
+export interface ButtonStyle {
+  /** Background color for each state */
+  backgroundColor?: {
+    [ButtonState.Normal]?: string;
+    [ButtonState.Hover]?: string;
+    [ButtonState.Pressed]?: string;
+    [ButtonState.Disabled]?: string;
+  };
+  /** Border configuration */
+  border?: {
+    color?: string;
+    width?: number;
+    radius?: number;
+  };
+  /** Text styling */
+  text?: {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+  };
+  /** Sprite textures for each state (alternative to backgroundColor) */
+  textures?: {
+    [ButtonState.Normal]?: string;
+    [ButtonState.Hover]?: string;
+    [ButtonState.Pressed]?: string;
+    [ButtonState.Disabled]?: string;
+  };
+}
+
+/**
+ * Properties for the Button component
+ */
+export interface ButtonProps {
+  /** Button text content */
+  text?: string;
+  /** Button disabled state */
+  disabled?: boolean;
+  /** Click event handler */
+  click?: (event: FederatedPointerEvent) => void;
+  /** Hover enter event handler */
+  hoverEnter?: (event: FederatedPointerEvent) => void;
+  /** Hover leave event handler */
+  hoverLeave?: (event: FederatedPointerEvent) => void;
+  /** Press down event handler */
+  pressDown?: (event: FederatedPointerEvent) => void;
+  /** Press up event handler */
+  pressUp?: (event: FederatedPointerEvent) => void;
+  /** Visual style configuration */
+  style?: ButtonStyle;
+  /** Button width */
+  width?: number;
+  /** Button height */
+  height?: number;
+  /** Button position X */
+  x?: number;
+  /** Button position Y */
+  y?: number;
+  /** Button alpha/opacity */
+  alpha?: number;
+  /** Button visibility */
+  visible?: boolean;
+  /** Button cursor */
+  cursor?: string;
+  /** Controls instance to automatically apply button events to (e.g., ControlsDirective or JoystickControls) */
+  controls?: ControlsDirective | JoystickControls | any;
+  /** Name of the control to trigger with applyControl when button is clicked */
+  controlName?: string;
+  /** Shape of the button background: 'rect', 'circle', or 'ellipse' */
+  shape?: 'rect' | 'circle' | 'ellipse';
+  /** Custom background component or element (replaces default background if provided) */
+  background?: Element | any;
+  /** Custom children components for button content (takes priority over text if provided) */
+  children?: Element[];
+  /** Focus index for the button */
+  tabindex?: number | Signal<number>;
+}
+
+/**
+ * Creates a Button component with interactive states and customizable styling.
+ * 
+ * This component provides a fully interactive button with visual feedback
+ * for different states (normal, hover, pressed, disabled). It supports both
+ * sprite-based and graphics-based rendering approaches.
+ * 
+ * The button is built using a Container with background and text elements,
+ * providing reactive state management and event handling.
+ * 
+ * ## Features
+ * 
+ * - **Controls Integration**: Automatically trigger controls via `applyControl` when clicked
+ * - **Multiple Shapes**: Support for rect, circle, and ellipse shapes
+ * - **Custom Content**: Use children components for custom button content
+ * - **Custom Background**: Provide a custom background component
+ * 
+ * @param props - Button configuration including text, styling, controls, shape, and event handlers
+ * @returns A reactive Button component
+ * @example
+ * ```typescript
+ * // Simple button with text and click handler
+ * const simpleButton = Button({
+ *   text: "Click Me",
+ *   click: () => console.log("Button clicked!"),
+ *   width: 150,
+ *   height: 50
+ * });
+ * 
+ * // Button with controls integration
+ * const jumpButton = Button({
+ *   text: "Jump",
+ *   controls: controlsInstance,
+ *   controlName: "jump",
+ *   width: 120,
+ *   height: 40
+ * });
+ * 
+ * // Circular button
+ * const circleButton = Button({
+ *   text: "Action",
+ *   shape: "circle",
+ *   width: 100,
+ *   height: 100
+ * });
+ * 
+ * // Button with custom content (children)
+ * const customButton = Button({
+ *   shape: "circle",
+ *   width: 80,
+ *   height: 80,
+ *   children: [
+ *     h(Sprite, { image: "icon.png", width: 50, height: 50 })
+ *   ]
+ * });
+ * 
+ * // Styled button with custom colors
+ * const styledButton = Button({
+ *   text: "Styled Button",
+ *   style: {
+ *     backgroundColor: {
+ *       normal: "#28a745",
+ *       hover: "#218838",
+ *       pressed: "#1e7e34",
+ *       disabled: "#6c757d"
+ *     },
+ *     border: {
+ *       radius: 8,
+ *       width: 2,
+ *       color: "#ffffff"
+ *     },
+ *     text: {
+ *       fontSize: 18,
+ *       color: "#ffffff"
+ *     }
+ *   }
+ * });
+ * 
+ * // Sprite-based button
+ * const spriteButton = Button({
+ *   text: "Play Game",
+ *   style: {
+ *     textures: {
+ *       normal: "/assets/button-normal.png",
+ *       hover: "/assets/button-hover.png",
+ *       pressed: "/assets/button-pressed.png"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export function Button(props: ButtonProps) {
+  // Internal state signals
+  const currentState = signal(ButtonState.Normal);
+  const isPressed = signal(false);
+  const isHovered = signal(false);
+
+  // Define reactive props with defaults
+  const defineProps = useDefineProps(props);
+  const { text, disabled, width, height, style, shape, controlName } = defineProps({
+    text: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 120
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    },
+    shape: {
+      type: String,
+      default: "rect"
+    },
+    controlName: {
+      type: String,
+      default: undefined
+    }
+  });
+
+  // Helper function to get controls instance (handles signals like Joystick)
+  const getControls = () => {
+    if (!props.controls) return null;
+    if (isSignal(props.controls)) {
+      return props.controls();
+    }
+    return props.controls;
+  };
+
+  // Update button state based on disabled and interaction states
+  effect(() => {
+    const isDisabled = disabled();
+    const pressed = isPressed();
+    const hovered = isHovered();
+
+    if (isDisabled) {
+      currentState.set(ButtonState.Disabled);
+    } else if (pressed) {
+      currentState.set(ButtonState.Pressed);
+    } else if (hovered) {
+      currentState.set(ButtonState.Hover);
+    } else {
+      currentState.set(ButtonState.Normal);
+    }
+  });
+
+  // Event handlers
+  const eventHandlers = {
+    pointerenter: (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        isHovered.set(true);
+        props.hoverEnter?.(event);
+      }
+    },
+    pointerleave: (event: FederatedPointerEvent) => {
+      isHovered.set(false);
+      isPressed.set(false);
+      props.hoverLeave?.(event);
+    },
+    pointerdown: async (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        isPressed.set(true);
+        props.pressDown?.(event);
+
+        // Apply control if controls and controlName are provided
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name, true);
+        }
+      }
+    },
+    pointerup: async (event: FederatedPointerEvent) => {
+      if (!disabled() && isPressed()) {
+        isPressed.set(false);
+        props.pressUp?.(event);
+
+        // Apply control release if controls and controlName are provided
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name, false);
+        }
+      }
+    },
+    pointertap: async (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        props.click?.(event);
+
+        // Apply control if controls and controlName are provided (press and release)
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name);
+        }
+      }
+    }
+  };
+
+  // Generate background element
+  const getBackgroundElement = () => {
+    // If custom background is provided, use it
+    if (props.background) {
+      return props.background;
+    }
+
+    // Otherwise, use shape-based background
+    const currentShape = shape();
+    const bgColor = computed(() => {
+      const currentStyle = style();
+      const backgroundColor = currentStyle.backgroundColor || {
+        [ButtonState.Normal]: "#007bff",
+        [ButtonState.Hover]: "#0056b3",
+        [ButtonState.Pressed]: "#004085",
+        [ButtonState.Disabled]: "#6c757d"
+      };
+      const state = currentState();
+      return backgroundColor[state] || backgroundColor[ButtonState.Normal];
+    });
+
+    if (currentShape === 'circle') {
+      // For circle, use the smaller dimension as radius
+      const radius = computed(() => Math.min(width(), height()) / 2);
+      return h(Circle, {
+        radius: radius,
+        x: computed(() => width() / 2),
+        y: computed(() => height() / 2),
+        color: bgColor
+      });
+    } else if (currentShape === 'ellipse') {
+      return h(Ellipse, {
+        width: width,
+        height: height,
+        color: bgColor
+      });
+    } else {
+      // Default: rect
+      return h(Rect, {
+        width: width,
+        height: height,
+        color: bgColor
+      });
+    }
+  };
+
+  // Generate content element(s)
+  const getContentElements = () => {
+    // If children are provided, use them (priority over text)
+    if (props.children && props.children.length > 0) {
+      return props.children;
+    }
+
+    // Otherwise, use text
+    return [
+      h(Text, {
+        text: text,
+        x: computed(() => width() / 2),
+        y: computed(() => height() / 2),
+        anchor: { x: 0.5, y: 0.5 },
+        style: computed(() => {
+          const currentStyle = style();
+          const textStyle = currentStyle.text || {};
+          return {
+            fontSize: textStyle.fontSize || 16,
+            fontFamily: textStyle.fontFamily || "Arial",
+            fill: textStyle.color || "#ffffff"
+          };
+        })()
+      })
+    ];
+  };
+
+  // Return Container with h() children
+  return h(Container, {
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height,
+    alpha: props.alpha,
+    visible: props.visible,
+    cursor: props.cursor || "pointer",
+    tabindex: props.tabindex,
+    ...eventHandlers
+  }, [
+    getBackgroundElement(),
+    ...getContentElements()
+  ]);
+}