@rpgjs/client 5.0.0-alpha.21 → 5.0.0-alpha.23

package/dist/Game/Object.d.ts

@@ -0,0 +1,111 @@
+import { Hooks, RpgCommonPlayer } from '@rpgjs/common';
+import { RpgClientEngine } from '../RpgClientEngine';
+export declare abstract class RpgClientObject extends RpgCommonPlayer {
+    abstract type: string;
+    emitParticleTrigger: import('canvasengine').Trigger<any>;
+    particleName: import('canvasengine').WritableSignal<string>;
+    animationCurrentIndex: import('canvasengine').WritableSignal<number>;
+    animationIsPlaying: import('canvasengine').WritableSignal<boolean>;
+    _param: import('canvasengine').WritableObjectSignal<{}>;
+    frames: {
+        x: number;
+        y: number;
+        ts: number;
+    }[];
+    graphicsSignals: import('canvasengine').WritableArraySignal<any[]>;
+    _component: {};
+    flashTrigger: import('canvasengine').Trigger<any>;
+    constructor();
+    get hooks(): Hooks;
+    get engine(): RpgClientEngine<unknown>;
+    private animationSubscription?;
+    /**
+     * Trigger a flash animation on this sprite
+     *
+     * This method triggers a flash effect using CanvasEngine's flash directive.
+     * The flash can be configured with various options including type (alpha, tint, or both),
+     * duration, cycles, and color.
+     *
+     * ## Design
+     *
+     * The flash uses a trigger system that is connected to the flash directive in the
+     * character component. This allows for flexible configuration and can be triggered
+     * from both server events and client-side code.
+     *
+     * @param options - Flash configuration options
+     * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')
+     * @param options.duration - Duration of the flash animation in milliseconds (default: 300)
+     * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)
+     * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)
+     * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)
+     *
+     * @example
+     * ```ts
+     * // Simple flash with default settings (alpha flash)
+     * player.flash();
+     *
+     * // Flash with red tint
+     * player.flash({ type: 'tint', tint: 0xff0000 });
+     *
+     * // Flash with both alpha and tint
+     * player.flash({
+     *   type: 'both',
+     *   alpha: 0.5,
+     *   tint: 0xff0000,
+     *   duration: 200,
+     *   cycles: 2
+     * });
+     *
+     * // Quick damage flash
+     * player.flash({
+     *   type: 'tint',
+     *   tint: 0xff0000,
+     *   duration: 150,
+     *   cycles: 1
+     * });
+     * ```
+     */
+    flash(options?: {
+        type?: 'alpha' | 'tint' | 'both';
+        duration?: number;
+        cycles?: number;
+        alpha?: number;
+        tint?: number | string;
+    }): void;
+    /**
+     * Reset animation state when animation changes externally
+     *
+     * This method should be called when the animation changes due to movement
+     * or other external factors to ensure the animation system doesn't get stuck
+     *
+     * @example
+     * ```ts
+     * // Reset when player starts moving
+     * player.resetAnimationState();
+     * ```
+     */
+    resetAnimationState(): void;
+    /**
+     * Set a custom animation for a specific number of times
+     *
+     * Plays a custom animation for the specified number of repetitions.
+     * The animation system prevents overlapping animations and automatically
+     * returns to the previous animation when complete.
+     *
+     * @param animationName - Name of the animation to play
+     * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+     *
+     * @example
+     * ```ts
+     * // Play attack animation 3 times
+     * player.setAnimation('attack', 3);
+     *
+     * // Play continuous spell animation
+     * player.setAnimation('spell');
+     * ```
+     */
+    setAnimation(animationName: string, nbTimes?: number): void;
+    showComponentAnimation(id: string, params: any): void;
+    isEvent(): boolean;
+    isPlayer(): boolean;
+}

package/dist/Game/TransitionManager.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Manages active transitions in the game
+ *
+ * This class handles the lifecycle of screen transitions, such as fade effects,
+ * slide transitions, or any custom transition components. It maintains a list
+ * of currently active transitions and provides methods to start and finish them.
+ *
+ * ## Design
+ *
+ * - Uses signals to track active transitions reactively
+ * - Each transition has a unique ID for identification
+ * - Transitions automatically remove themselves when finished via onFinish callback
+ * - Supports multiple simultaneous transitions if needed
+ *
+ * @example
+ * ```ts
+ * const manager = new TransitionManager();
+ *
+ * // Start a fade transition
+ * manager.start('fade', { duration: 1000 });
+ *
+ * // Check active transitions
+ * console.log(manager.current()); // Array of active transitions
+ * ```
+ */
+export declare class TransitionManager {
+    /**
+     * Signal containing all currently active transitions
+     *
+     * Each transition object contains:
+     * - id: Unique identifier
+     * - props: Properties passed to the transition component
+     * - onFinish: Callback to remove the transition when complete
+     */
+    current: import('canvasengine').WritableArraySignal<any[]>;
+    /**
+     * Start a new transition
+     *
+     * Creates a new transition instance with the given props and adds it to
+     * the active transitions list. The transition will be automatically removed
+     * when it calls its onFinish callback.
+     *
+     * @param props - Properties to pass to the transition component (must include onFinish)
+     * @returns The created transition object with id and onFinish callback
+     *
+     * @example
+     * ```ts
+     * const transition = manager.start({
+     *   duration: 1000,
+     *   color: 'black',
+     *   onFinish: () => console.log('Transition complete')
+     * });
+     * ```
+     */
+    start(props: any): any;
+}

package/dist/RpgClientEngine.d.ts

@@ -1,12 +1,12 @@
-import { Context } from '@signe/di';
 import { AbstractWebsocket } from './services/AbstractSocket';
 import { Direction } from '@rpgjs/common';
 import { RpgClientMap } from './Game/Map';
 import { AnimationManager } from './Game/AnimationManager';
+import { TransitionManager } from './Game/TransitionManager';
 import { Observable } from 'rxjs';
 import * as PIXI from "pixi.js";
 export declare class RpgClientEngine<T = any> {
-    context: Context;
+    context: any;
     private guiService;
     private webSocket;
     private loadMapService;
@@ -21,6 +21,7 @@ export declare class RpgClientEngine<T = any> {
     spritesheets: Map<string, any>;
     sounds: Map<string, any>;
     componentAnimations: any[];
+    transitions: any[];
     private spritesheetResolver?;
     private soundResolver?;
     particleSettings: {
@@ -31,6 +32,10 @@ export declare class RpgClientEngine<T = any> {
     playerIdSignal: import('canvasengine').WritableSignal<string | null>;
     spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
     spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
+    /** ID of the sprite that the camera should follow. null means follow the current player */
+    cameraFollowTargetId: import('canvasengine').WritableSignal<string | null>;
+    /** Trigger for map shake animation */
+    mapShakeTrigger: import('canvasengine').Trigger<any>;
     private predictionEnabled;
     private prediction?;
     private readonly SERVER_CORRECTION_THRESHOLD;
@@ -40,7 +45,7 @@ export declare class RpgClientEngine<T = any> {
     private pingInterval;
     private readonly PING_INTERVAL_MS;
     private lastInputTime;
-    constructor(context: Context);
+    constructor(context: any);
     /**
      * Assigns a CanvasEngine KeyboardControls instance to the dependency injection context
      *
@@ -291,18 +296,96 @@ export declare class RpgClientEngine<T = any> {
      * ```
      */
     stopSound(soundId: string): void;
+    /**
+     * Stop all currently playing sounds
+     *
+     * This method stops all sounds that are currently playing.
+     * Useful when changing maps to prevent sound overlap.
+     *
+     * @example
+     * ```ts
+     * // Stop all sounds
+     * engine.stopAllSounds();
+     * ```
+     */
+    stopAllSounds(): void;
+    /**
+     * Set the camera to follow a specific sprite
+     *
+     * This method changes which sprite the camera viewport should follow.
+     * The camera will smoothly animate to the target sprite if smoothMove options are provided.
+     *
+     * ## Design
+     *
+     * The camera follow target is stored in a signal that is read by sprite components.
+     * Each sprite checks if it should be followed by comparing its ID with the target ID.
+     * When smoothMove options are provided, the viewport animation is handled by CanvasEngine's
+     * viewport system.
+     *
+     * @param targetId - The ID of the sprite to follow. Set to null to follow the current player
+     * @param smoothMove - Animation options. Can be a boolean (default: true) or an object with time and ease
+     * @param smoothMove.time - Duration of the animation in milliseconds (optional)
+     * @param smoothMove.ease - Easing function name from https://easings.net (optional)
+     *
+     * @example
+     * ```ts
+     * // Follow another player with default smooth animation
+     * engine.setCameraFollow(otherPlayerId, true);
+     *
+     * // Follow an event with custom smooth animation
+     * engine.setCameraFollow(eventId, {
+     *   time: 1000,
+     *   ease: "easeInOutQuad"
+     * });
+     *
+     * // Follow without animation (instant)
+     * engine.setCameraFollow(targetId, false);
+     *
+     * // Return to following current player
+     * engine.setCameraFollow(null);
+     * ```
+     */
+    setCameraFollow(targetId: string | null, smoothMove?: boolean | {
+        time?: number;
+        ease?: string;
+    }): void;
     addParticle(particle: any): any;
     /**
      * Add a component to render behind sprites
      * Components added with this method will be displayed with a lower z-index than the sprite
      *
-     * @param component - The component to add behind sprites
-     * @returns The added component
+     * Supports multiple formats:
+     * 1. Direct component: `ShadowComponent`
+     * 2. Configuration object: `{ component: LightHalo, props: {...} }`
+     * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`
+     * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+     *
+     * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+     * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+     *
+     * @param component - The component to add behind sprites, or a configuration object
+     * @param component.component - The component function to render
+     * @param component.props - Static props object or function that receives the sprite object and returns props
+     * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+     * @returns The added component or configuration
      *
      * @example
      * ```ts
      * // Add a shadow component behind all sprites
      * engine.addSpriteComponentBehind(ShadowComponent);
+     *
+     * // Add a component with static props
+     * engine.addSpriteComponentBehind({
+     *   component: LightHalo,
+     *   props: { radius: 30 }
+     * });
+     *
+     * // Add a component with dynamic props and dependencies
+     * engine.addSpriteComponentBehind({
+     *   component: HealthBar,
+     *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+     *   dependencies: (object) => [object.hp, object.param.maxHp]
+     * });
      * ```
      */
     addSpriteComponentBehind(component: any): any;
@@ -310,16 +393,45 @@ export declare class RpgClientEngine<T = any> {
      * Add a component to render in front of sprites
      * Components added with this method will be displayed with a higher z-index than the sprite
      *
-     * @param component - The component to add in front of sprites
-     * @returns The added component
+     * Supports multiple formats:
+     * 1. Direct component: `HealthBarComponent`
+     * 2. Configuration object: `{ component: StatusIndicator, props: {...} }`
+     * 3. With dynamic props: `{ component: HealthBar, props: (object) => {...} }`
+     * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+     *
+     * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+     * The object (sprite) is passed to the dependencies function to allow sprite-specific dependency resolution.
+     *
+     * @param component - The component to add in front of sprites, or a configuration object
+     * @param component.component - The component function to render
+     * @param component.props - Static props object or function that receives the sprite object and returns props
+     * @param component.dependencies - Function that receives the sprite object and returns an array of Signals
+     * @returns The added component or configuration
      *
      * @example
      * ```ts
      * // Add a health bar component in front of all sprites
      * engine.addSpriteComponentInFront(HealthBarComponent);
+     *
+     * // Add a component with static props
+     * engine.addSpriteComponentInFront({
+     *   component: StatusIndicator,
+     *   props: { type: 'poison' }
+     * });
+     *
+     * // Add a component with dynamic props and dependencies
+     * engine.addSpriteComponentInFront({
+     *   component: HealthBar,
+     *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+     *   dependencies: (object) => [object.hp, object.param.maxHp]
+     * });
      * ```
      */
-    addSpriteComponentInFront(component: any): any;
+    addSpriteComponentInFront(component: any | {
+        component: any;
+        props: (object: any) => any;
+        dependencies?: (object: any) => any[];
+    }): any;
     /**
      * Add a component animation to the engine
      *
@@ -371,6 +483,137 @@ export declare class RpgClientEngine<T = any> {
      * ```
      */
     getComponentAnimation(id: string): AnimationManager;
+    /**
+     * Add a transition to the engine
+     *
+     * Transitions are screen effects that can be displayed during scene changes,
+     * map loading, or any other moment where a visual transition is needed.
+     * They are displayed on top of the entire canvas and can have custom props
+     * that can be functions (similar to ComponentAnimation).
+     *
+     * @param transition - The transition configuration
+     * @param transition.id - Unique identifier for the transition
+     * @param transition.component - The component function to render
+     * @param transition.props - Optional props to pass to the component (can be a function)
+     * @returns The added transition configuration
+     *
+     * @example
+     * ```ts
+     * // Add a fade transition
+     * engine.addTransition({
+     *   id: 'fade',
+     *   component: FadeComponent
+     * });
+     *
+     * // Add a transition with props
+     * engine.addTransition({
+     *   id: 'slide',
+     *   component: SlideComponent,
+     *   props: { direction: 'left', duration: 500 }
+     * });
+     *
+     * // Add a transition with function props
+     * engine.addTransition({
+     *   id: 'custom',
+     *   component: CustomTransition,
+     *   props: (engine) => ({ width: engine.width(), height: engine.height() })
+     * });
+     * ```
+     */
+    addTransition(transition: {
+        component: any;
+        id: string;
+        props?: any | ((engine: RpgClientEngine) => any);
+    }): {
+        component: any;
+        id: string;
+        props?: any | ((engine: RpgClientEngine) => any);
+    };
+    /**
+     * Remove a transition from the engine
+     *
+     * Removes a transition by its ID. This will not affect any currently
+     * running transitions, only prevent new ones from being started.
+     *
+     * @param id - The unique identifier of the transition to remove
+     * @returns true if the transition was found and removed, false otherwise
+     *
+     * @example
+     * ```ts
+     * // Remove a transition
+     * engine.removeTransition('fade');
+     * ```
+     */
+    removeTransition(id: string): boolean;
+    /**
+     * Modify an existing transition
+     *
+     * Updates the component or props of an existing transition. This will
+     * not affect any currently running transitions, only future ones.
+     *
+     * @param id - The unique identifier of the transition to modify
+     * @param updates - The updates to apply (component and/or props)
+     * @returns true if the transition was found and modified, false otherwise
+     *
+     * @example
+     * ```ts
+     * // Update transition props
+     * engine.modifyTransition('fade', {
+     *   props: { duration: 2000, color: 'white' }
+     * });
+     *
+     * // Update transition component
+     * engine.modifyTransition('fade', {
+     *   component: NewFadeComponent
+     * });
+     * ```
+     */
+    modifyTransition(id: string, updates: {
+        component?: any;
+        props?: any | ((engine: RpgClientEngine) => any);
+    }): boolean;
+    /**
+     * Get a transition by its ID
+     *
+     * Retrieves the TransitionManager instance for a specific transition,
+     * which can be used to start the transition.
+     *
+     * @param id - The unique identifier of the transition
+     * @returns The TransitionManager instance for the transition
+     * @throws Error if the transition is not found
+     *
+     * @example
+     * ```ts
+     * // Get a transition and start it
+     * const fadeTransition = engine.getTransition('fade');
+     * fadeTransition.start({ duration: 1000 });
+     * ```
+     */
+    getTransition(id: string): TransitionManager;
+    /**
+     * Start a transition
+     *
+     * Convenience method to start a transition by its ID. This combines
+     * getTransition and start into a single call. The transition will
+     * automatically receive an onFinish callback to remove itself when done.
+     *
+     * @param id - The unique identifier of the transition to start
+     * @param props - Additional props to pass to the transition component
+     * @returns The created transition object
+     *
+     * @example
+     * ```ts
+     * // Start a fade transition
+     * engine.startTransition('fade', { duration: 1000, color: 'black' });
+     *
+     * // Start with onFinish callback
+     * engine.startTransition('fade', {
+     *   duration: 1000,
+     *   onFinish: () => console.log('Fade complete')
+     * });
+     * ```
+     */
+    startTransition(id: string, props?: any): any;
     processInput({ input }: {
         input: Direction;
     }): Promise<void>;
@@ -385,7 +628,7 @@ export declare class RpgClientEngine<T = any> {
     private getLocalPlayerState;
     private applyAuthoritativeState;
     private initializePredictionController;
-    getCurrentPlayer(): import('./Game/Player').RpgClientPlayer;
+    getCurrentPlayer(): import('.').RpgClientPlayer;
     /**
      * Clear client prediction states for cleanup
      *
@@ -399,6 +642,60 @@ export declare class RpgClientEngine<T = any> {
      * ```
      */
     clearClientPredictionStates(): void;
+    /**
+     * Trigger a flash animation on a sprite
+     *
+     * This method allows you to trigger a flash effect on any sprite from client-side code.
+     * The flash can be configured with various options including type (alpha, tint, or both),
+     * duration, cycles, and color.
+     *
+     * ## Design
+     *
+     * The flash is applied directly to the sprite object using its flash trigger.
+     * This is useful for client-side visual feedback, UI interactions, or local effects
+     * that don't need to be synchronized with the server.
+     *
+     * @param spriteId - The ID of the sprite to flash. If not provided, flashes the current player
+     * @param options - Flash configuration options
+     * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')
+     * @param options.duration - Duration of the flash animation in milliseconds (default: 300)
+     * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)
+     * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)
+     * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)
+     *
+     * @example
+     * ```ts
+     * // Flash the current player with default settings
+     * engine.flash();
+     *
+     * // Flash a specific sprite with red tint
+     * engine.flash('sprite-id', { type: 'tint', tint: 0xff0000 });
+     *
+     * // Flash with both alpha and tint for dramatic effect
+     * engine.flash(undefined, {
+     *   type: 'both',
+     *   alpha: 0.5,
+     *   tint: 0xff0000,
+     *   duration: 200,
+     *   cycles: 2
+     * });
+     *
+     * // Quick damage flash on current player
+     * engine.flash(undefined, {
+     *   type: 'tint',
+     *   tint: 'red',
+     *   duration: 150,
+     *   cycles: 1
+     * });
+     * ```
+     */
+    flash(spriteId?: string, options?: {
+        type?: 'alpha' | 'tint' | 'both';
+        duration?: number;
+        cycles?: number;
+        alpha?: number;
+        tint?: number | string;
+    }): void;
     private applyServerAck;
     /**
      * Replay unacknowledged inputs from a given frame to resimulate client prediction

package/dist/components/gui/mobile/index.d.ts

@@ -0,0 +1,8 @@
+export declare const withMobile: () => {
+    gui: {
+        id: string;
+        component: any;
+        autoDisplay: boolean;
+        dependencies: () => (import('canvasengine').ComputedSignal<import('../../..').RpgClientPlayer> | import('canvasengine').WritableSignal<true | undefined>)[];
+    }[];
+};

package/dist/components/prebuilt/index.d.ts

@@ -16,3 +16,4 @@
  * ```
  */
 export { default as HpBar } from './hp-bar.ce';
+export { default as LightHalo } from './light-halo.ce';

package/dist/index.d.ts

@@ -9,10 +9,16 @@ export * from './module';
 export * from './Gui/Gui';
 export * from './components/gui';
 export * from './components/animations';
+export * from './components/prebuilt';
 export * from './presets';
 export * from './components';
 export * from './components/gui';
 export * from './Sound';
 export * from './Resource';
 export { Context } from '@signe/di';
-export * from './services/keyboardControls';
+export { KeyboardControls, Input } from 'canvasengine';
+export { Control } from './services/keyboardControls';
+export { RpgClientObject } from './Game/Object';
+export { RpgClientPlayer } from './Game/Player';
+export { RpgClientEvent } from './Game/Event';
+export { withMobile } from './components/gui/mobile';

package/dist/index.js

@@ -9,12 +9,18 @@ export { RpgGui } from './index9.js';
 export { default as DialogboxComponent } from './index10.js';
 export { default as BoxComponent } from './index11.js';
 export { PrebuiltComponentAnimations } from './index12.js';
-export { Presets } from './index13.js';
-export { default as EventLayerComponent } from './index14.js';
-export { default as CharacterComponent } from './index15.js';
-export { default as HpBar } from './index16.js';
-export { RpgSound, Sound, getSoundMetadata } from './index17.js';
-export { RpgResource } from './index18.js';
-export { Context } from './index19.js';
-export { KeyboardControls, provideKeyboardControls } from './index20.js';
+export { default as HpBar } from './index13.js';
+export { default as LightHalo } from './index14.js';
+export { Presets } from './index15.js';
+export { default as EventLayerComponent } from './index16.js';
+export { default as CharacterComponent } from './index17.js';
+export { RpgSound, Sound, getSoundMetadata } from './index18.js';
+export { RpgResource } from './index19.js';
+export { Context } from './index20.js';
+export { Input, KeyboardControls } from 'canvasengine';
+export { Control } from './index21.js';
+export { RpgClientObject } from './index22.js';
+export { RpgClientPlayer } from './index23.js';
+export { RpgClientEvent } from './index24.js';
+export { withMobile } from './index25.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index10.js

@@ -1,5 +1,5 @@
 import { useProps, useDefineProps, signal, animatedSignal, computed, trigger, mount, effect, h, Container, Rect, cond, Text, Sprite } from 'canvasengine';
-import component$1 from './index44.js';
+import component$1 from './index47.js';
 import { inject } from './index6.js';
 import { RpgClientEngine } from './index2.js';
 

package/dist/index11.js

@@ -1,14 +1,15 @@
 import { useProps, useDefineProps, computed, h, Container, Rect } from 'canvasengine';
 import { RpgClientEngine } from './index2.js';
-import './index26.js';
+import './index32.js';
 import '@rpgjs/common';
-import './index19.js';
+import './index20.js';
 import { inject } from './index6.js';
 import 'rxjs';
-import './index27.js';
-import './index17.js';
-import '@canvasengine/presets';
+import './index33.js';
 import './index18.js';
+import 'pixi.js';
+import '@canvasengine/presets';
+import './index19.js';
 
 function component($$props) {
         useProps($$props);

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"names":[],"mappings":";;;;;;;;;;;;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI;AAC5I,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;AACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,WAAW,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;AAClN,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACvM,QAAQ,OAAO;AACf,MAAM;;;;"}
+{"version":3,"file":"index11.js","sources":["../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI;AAC5I,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;AACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,WAAW,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;AAClN,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACvM,QAAQ,OAAO;AACf,MAAM;;;;"}

package/dist/index12.js

@@ -1,5 +1,5 @@
-import component$1 from './index28.js';
-import component from './index29.js';
+import component$1 from './index34.js';
+import component from './index35.js';
 
 const PrebuiltComponentAnimations = {
   Hit: component$1,