canvasengine 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/components/types/Spritesheet.d.ts

@@ -0,0 +1,248 @@
+export interface TransformOptions {
+    /**
+     * The global value of opacity (between 0 and 1)
+     *
+     * @prop {number} [opacity]
+     * @memberof Spritesheet
+     * */
+    opacity?: number;
+    /**
+     * The global value of pivot.
+     *
+     * Invariant under rotation, scaling, and skewing. The projection of into the parent's space of the pivot is equal to position, regardless of the other three transformations. In other words, It is the center of rotation, scaling, and skewing.
+     *
+     * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
+     *
+     * ```ts
+     * pivot: [0.5, 0.8]
+     * ```
+     *
+     * @prop {Array<number>} [pivot]
+     * @memberof Spritesheet
+     * */
+    pivot?: number[];
+    /**
+    * The global value of anchor.
+    *
+    * Position of the origin point
+    *
+    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
+    *
+    * ```ts
+    * anchor: [0.5, 0.8]
+    * ```
+    *
+    * @prop {Array<number>} [anchor]
+    * @memberof Spritesheet
+    * */
+    anchor?: number[];
+    /**
+     * Defines the actual size of the sprite that is inside a larger rectangle.
+     * For example, if the texture rectangle is 192x192 while the character, which is in the center, is only 64x64 then set `spriteRealSize: 64`. This way the character will be well positioned in relation to the animations that have a different rectangle
+     *
+     * > You can also put `spriteRealSize: { width: 64, height: 64 }` but be aware that the width is not concerned because it will always be centered while the height depends on the hitbox
+     *
+     * @prop {{ width: number, height: number } | number} [spriteRealSize]
+     * @since 3.2.0
+     * @memberof Spritesheet
+     * */
+    spriteRealSize?: {
+        width: number;
+        height: number;
+    } | number;
+    /**
+     * The global value of rotation
+     *
+     * Rotation. This will rotate the display object's projection by this angle (in radians).
+     *
+     * @prop {number} [angle]
+     * @memberof Spritesheet
+     * */
+    angle?: number;
+    /**
+     * The global value of rotation
+     *
+     * Rotation. This is an alias for rotation, but in degrees.
+     *
+     * @prop {number} [rotation]
+     * @memberof Spritesheet
+     * */
+    rotation?: number;
+    /**
+    * The global value of scale.
+    *
+    * Scaling. This will stretch (or compress) the display object's projection. The scale factors are along the local coordinate axes. In other words, the display object is scaled before rotated or skewed. The center of scaling is the pivot.
+    *
+    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
+    *
+    * ```ts
+    * scale: [0.5, 0.8]
+    * ```
+    *
+    * @prop {Array<number>} [scale]
+    * @memberof Spritesheet
+    * */
+    scale?: number[];
+    /**
+    * The global value of skew.
+    *
+    * Skewing. This can be used to deform a rectangular display object into a parallelogram.
+    *
+    * In PixiJS, skew has a slightly different behaviour than the conventional meaning. It can be thought of the net rotation applied to the coordinate axes (separately). For example, if "skew.x" is ⍺ and "skew.y" is β, then the line x = 0 will be rotated by ⍺ (y = -x*cot⍺) and the line y = 0 will be rotated by β (y = x*tanβ). A line y = x*tanϴ (i.e. a line at angle ϴ to the x-axis in local-space) will be rotated by an angle between ⍺ and β.
+    *
+    * It can be observed that if skew is applied equally to both axes, then it will be equivalent to applying a rotation. Indeed, if "skew.x" = -ϴ and "skew.y" = ϴ, it will produce an equivalent of "rotation" = ϴ.
+    *
+    * Another quite interesting observation is that "skew.x", "skew.y", rotation are communtative operations. Indeed, because rotation is essentially a careful combination of the two.
+    *
+    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
+    *
+    * @prop {Array<number>} [skew]
+    * @memberof Spritesheet
+    * */
+    skew?: number[];
+    /**
+    * The global value of X translation
+    *
+    * @prop {number} [x]
+    * @memberof Spritesheet
+    * */
+    x?: number;
+    /**
+    * The global value of Y translation
+    *
+    * @prop {number} [y]
+    * @memberof Spritesheet
+    * */
+    y?: number;
+    /**
+     * The global value of visible
+     *
+     * @prop {boolean} [visible]
+     * @memberof Spritesheet
+     * */
+    visible?: boolean;
+    /**
+    * Define the sound that will be played for all animations in the spritesheet. Remember to create the sound before with the @Sound decorator
+    *
+    * @prop {string} [sound]
+    * @memberof Spritesheet
+    * */
+    sound?: string;
+}
+export interface FrameOptions extends TransformOptions {
+    time: number;
+    frameX?: number;
+    frameY?: number;
+}
+export interface TextureOptions {
+    /**
+    * The number of frames on the width
+    *
+    * @prop {number} framesWidth
+    * @memberof Spritesheet
+    * */
+    framesWidth?: number;
+    /**
+     * The number of frames on the height
+     *
+     * @prop {number} framesHeight
+     * @memberof Spritesheet
+     * */
+    framesHeight?: number;
+    /**
+    * The width of the image (in pixels)
+    *
+    * @prop {number} width
+    * @memberof Spritesheet
+    * */
+    width?: number;
+    /**
+     * The height of the image (in pixels)
+     *
+     * @prop {number} height
+     * @memberof Spritesheet
+     * */
+    height?: number;
+    /**
+    * Takes a width of a rectangle in the image. Equivalent to `width / framesWidth`
+    *
+    * @prop {number} [rectWidth]
+    * @memberof Spritesheet
+    * */
+    rectWidth?: number;
+    /**
+    * Takes a height of a rectangle in the image. Equivalent to `height / framesHeight`
+    *
+    * @prop {number} [rectHeight]
+    * @memberof Spritesheet
+    * */
+    rectHeight?: number;
+    /**
+    * To take the texture, start at a well defined X and Y position. Otherwise, it starts at 0,0
+    *
+    * @prop {number} [offset]
+    * @memberof Spritesheet
+    * */
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+export type AnimationFrames = FrameOptions[][] | ((...args: any) => FrameOptions[][]);
+export interface TexturesOptions extends TextureOptions, TransformOptions {
+    animations: AnimationFrames;
+}
+export interface SpritesheetOptions extends TransformOptions, TextureOptions {
+    textures?: {
+        [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>;
+    };
+}
+type SpritesheetImageOptions = SpritesheetOptions & {
+    /**
+     * The link to the image
+     *
+     * > Do not use the `images` property
+     * > Remember to wrap the link to the image with the `require` function.
+     *
+     * ```ts
+     * image: require('./assets/hero.png')
+     * ```
+     *
+     * @prop {string} [image]
+     * @memberof Spritesheet
+     * */
+    image?: string;
+    /**
+    * Spritesheet identifier.
+    *
+    * > Do not use the `images` property
+    *
+    * @prop {string} [id]
+    * @memberof Spritesheet
+    * */
+    id: string;
+};
+type SpritesheetImagesOptions = SpritesheetOptions & {
+    /**
+     * Put the different images that are concerned by the properties below.
+     * The key of the object is the identifier of the spritesheet and the value and the link to the image.
+     *
+     * > Remember to wrap the link to the image with the `require` function.
+     *
+     * ```ts
+     * images: {
+     *    hero: require('./assets/hero.png')
+     * }
+     * ```
+     *
+     * @prop { { [id: string]: string } } [images]
+     * @memberof Spritesheet
+     * */
+    images?: {
+        [id: string]: string;
+    };
+};
+export declare function Spritesheet(options: SpritesheetImageOptions): any;
+export declare function Spritesheet(options: SpritesheetImagesOptions): any;
+export {};
+//# sourceMappingURL=Spritesheet.d.ts.map

package/dist/components/types/Spritesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spritesheet.d.ts","sourceRoot":"","sources":["../../../src/components/types/Spritesheet.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC7B;;;;;SAKK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;;;;;;;SAaK;IACL,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAEhB;;;;;;;;;;;;;QAaI;IACJ,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IAEjB;;;;;;;;;SASK;IACL,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAA;IAE3D;;;;;;;SAOK;IACL,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;;SAOK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;;;;;;;;;QAaI;IACJ,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAEhB;;;;;;;;;;;;;;;QAeI;IACJ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IAEf;;;;;QAKI;IACJ,CAAC,CAAC,EAAE,MAAM,CAAA;IAEV;;;;;QAKI;IACJ,CAAC,CAAC,EAAE,MAAM,CAAA;IAEV;;;;;SAKK;IACL,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;QAKI;IACJ,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC3B;;;;;QAKI;IACJ,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;SAKK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;QAKI;IACJ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;SAKK;IACL,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;QAKI;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;QAKI;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;QAKI;IACJ,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACpC;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,YAAY,EAAE,EAAE,CAAC,CAAA;AAErF,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,gBAAgB;IACrE,UAAU,EAAE,eAAe,CAAA;CAC9B;AAED,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB,EAAE,cAAc;IACxE,QAAQ,CAAC,EAAE;QACP,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;KAC1F,CAAA;CACJ;AAED,KAAK,uBAAuB,GAAG,kBAAkB,GAAG;IAChD;;;;;;;;;;;;SAYK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;QAOI;IACJ,EAAE,EAAE,MAAM,CAAA;CACb,CAAA;AACD,KAAK,wBAAwB,GAAG,kBAAkB,GAAG;IACjD;;;;;;;;;;;;;;SAcK;IACL,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;CACpC,CAAA;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,uBAAuB,OAAC;AAC7D,wBAAgB,WAAW,CAAC,OAAO,EAAE,wBAAwB,OAAC"}

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

@@ -0,0 +1,4 @@
+import { Signal } from '@signe/reactive';
+import { AnimatedSignal } from '../../engine/animation';
+export type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC"}

package/dist/directives/Controls.d.ts

@@ -0,0 +1,112 @@
+import { Directive } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { Controls } from './ControlsBase';
+import { KeyboardControls } from './KeyboardControls';
+import { GamepadControls } from './GamepadControls';
+import { JoystickControls } from './JoystickControls';
+/**
+ * Controls directive that coordinates keyboard, gamepad, and joystick input systems
+ *
+ * This directive automatically activates keyboard, gamepad, and joystick controls when available.
+ * The gamepad is automatically enabled if joypad.js is detected in the environment.
+ *
+ * All systems share the same control configuration and can work simultaneously.
+ *
+ * @example
+ * ```html
+ * <Sprite
+ *   image="path/to/image.png"
+ *   controls={controlsConfig}
+ *   x={x}
+ *   y={y}
+ * />
+ * ```
+ */
+export declare class ControlsDirective extends Directive {
+    private keyboardControls;
+    private gamepadControls;
+    private joystickControls;
+    private freezeSubscription;
+    private element;
+    /**
+     * Initialize the controls directive
+     * Sets up keyboard, gamepad, and joystick controls if available
+     */
+    onInit(element: Element<any>): void;
+    /**
+     * Mount hook (no specific action needed)
+     */
+    onMount(element: Element<any>): void;
+    /**
+     * Update controls configuration
+     * Updates both keyboard and gamepad controls
+     */
+    onUpdate(props: any, element: Element<any>): void;
+    /**
+     * Cleanup and destroy all control systems
+     */
+    onDestroy(element: Element<any>): void;
+    /**
+     * Get a control by input name
+     * Delegates to keyboard controls (primary system)
+     *
+     * @param inputName - Name of the input/key
+     * @returns BoundKey if found, undefined otherwise
+     */
+    getControl(inputName: string): import('./ControlsBase').BoundKey;
+    /**
+     * Get all bound controls
+     * Delegates to keyboard controls (primary system)
+     *
+     * @returns Object mapping input names to BoundKey objects
+     */
+    getControls(): {
+        [key: string]: import('./ControlsBase').BoundKey;
+    };
+    /**
+     * Apply a control action programmatically
+     * Applies to both keyboard and gamepad if available
+     *
+     * @param controlName - Name of the control
+     * @param isDown - Whether the control is pressed (true) or released (false)
+     * @param payload - Optional payload to pass to keyDown/keyUp callbacks (e.g., { power: 0.8 })
+     * @returns Promise that resolves when the action is complete
+     */
+    applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void>;
+    /**
+     * Stop listening to inputs
+     * Stops keyboard, gamepad, and joystick input processing
+     */
+    stopInputs(): void;
+    /**
+     * Resume listening to inputs
+     * Resumes keyboard, gamepad, and joystick input processing
+     */
+    listenInputs(): void;
+    /**
+     * Get the current controls configuration
+     * Returns keyboard controls options (both systems share the same config)
+     *
+     * @returns The controls options object
+     */
+    get options(): Controls;
+    /**
+     * Get the keyboard controls instance
+     *
+     * @returns KeyboardControls instance or null
+     */
+    get keyboard(): KeyboardControls | null;
+    /**
+     * Get the gamepad controls instance
+     *
+     * @returns GamepadControls instance or null
+     */
+    get gamepad(): GamepadControls | null;
+    /**
+     * Get the joystick controls instance
+     *
+     * @returns JoystickControls instance or null
+     */
+    get joystick(): JoystickControls | null;
+}
+//# sourceMappingURL=Controls.d.ts.map

package/dist/directives/Controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../src/directives/Controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAmB,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAgB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAiB,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,oBAAoB,CAAC;AAItE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;IAC5C,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,OAAO,CAAwB;IAEvC;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IA6C5B;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IAsB1C;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IAwB/B;;;;;;OAMG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM;IAI5B;;;;;OAKG;IACH,WAAW;;;IAIX;;;;;;;;OAQG;IACG,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;IAYhG;;;OAGG;IACH,UAAU;IAYV;;;OAGG;IACH,YAAY;IAYZ;;;;;OAKG;IACH,IAAI,OAAO,IAAI,QAAQ,CAEtB;IAED;;;;OAIG;IACH,IAAI,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAEtC;IAED;;;;OAIG;IACH,IAAI,OAAO,IAAI,eAAe,GAAG,IAAI,CAEpC;IAED;;;;OAIG;IACH,IAAI,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAEtC;CACJ"}

package/dist/directives/ControlsBase.d.ts

@@ -0,0 +1,199 @@
+export interface ControlOptions {
+    repeat?: boolean;
+    bind: string | string[];
+    keyUp?: Function;
+    keyDown?: Function;
+    throttle?: number;
+    delay?: number | {
+        duration: number;
+        otherControls?: (string)[];
+    };
+}
+export interface Controls {
+    [controlName: string]: ControlOptions;
+}
+export type BoundKey = {
+    actionName: string;
+    options: ControlOptions;
+    parameters?: any;
+};
+/**
+ * Abstract base class for control systems (keyboard, gamepad, etc.)
+ *
+ * This class provides common functionality shared across all control implementations:
+ * - Input binding and management
+ * - Control configuration
+ * - Input state management
+ * - Common methods for querying and triggering controls
+ *
+ * @example
+ * ```ts
+ * class MyControls extends ControlsBase {
+ *   protected setupListeners() {
+ *     // Setup specific input listeners
+ *   }
+ *
+ *   protected cleanup() {
+ *     // Cleanup specific resources
+ *   }
+ *
+ *   protected preStep() {
+ *     // Process inputs each frame
+ *   }
+ * }
+ * ```
+ */
+export declare abstract class ControlsBase {
+    protected boundKeys: {
+        [keyName: string]: BoundKey;
+    };
+    protected stop: boolean;
+    protected _controlsOptions: Controls;
+    protected interval: any;
+    protected serverFps: number;
+    /**
+     * Setup input listeners specific to this control implementation
+     * Must be implemented by subclasses
+     */
+    protected abstract setupListeners(): void;
+    /**
+     * Cleanup resources specific to this control implementation
+     * Must be implemented by subclasses
+     */
+    protected abstract cleanup(): void;
+    /**
+     * Process inputs each step/frame
+     * Must be implemented by subclasses
+     */
+    protected abstract preStep(): void;
+    /**
+     * Start the control processing loop
+     * Initializes listeners and starts the interval
+     */
+    start(): void;
+    /**
+     * Stop the control processing and cleanup resources
+     */
+    destroy(): void;
+    /**
+     * Bind a key/input to a control action
+     *
+     * @param keys - Single key or array of keys to bind
+     * @param actionName - Name of the control action
+     * @param options - Control options (repeat, keyDown, keyUp, etc.)
+     * @param parameters - Optional parameters to pass to the control callbacks
+     */
+    protected bindKey(keys: string | string[], actionName: string, options: ControlOptions, parameters?: object): void;
+    /**
+     * Apply an input action for a bound key
+     * Can be overridden by subclasses for custom behavior
+     *
+     * @param keyName - Name of the key/input to process
+     */
+    protected applyInput(keyName: string): void;
+    /**
+     * Get a control by input name
+     *
+     * @param inputName - Name of the input/key
+     * @returns BoundKey if found, undefined otherwise
+     * @example
+     * ```ts
+     * const control = controls.getControl('up');
+     * if (control) {
+     *   console.log(control.actionName); // 'up'
+     * }
+     * ```
+     */
+    getControl(inputName: string): BoundKey | undefined;
+    /**
+     * Get all bound controls
+     *
+     * @returns Object mapping input names to BoundKey objects
+     * @example
+     * ```ts
+     * const allControls = controls.getControls();
+     * console.log(Object.keys(allControls)); // ['up', 'down', 'left', 'right', ...]
+     * ```
+     */
+    getControls(): {
+        [key: string]: BoundKey;
+    };
+    /**
+     * Apply a control action programmatically
+     *
+     * Must be implemented by subclasses to provide input-specific behavior
+     *
+     * @param controlName - Name or identifier of the control
+     * @param isDown - Whether the control is pressed down (true) or released (false)
+     * @returns Promise that resolves when the control action is complete
+     * @example
+     * ```ts
+     * // Press a control
+     * await controls.applyControl('action', true);
+     *
+     * // Release a control
+     * await controls.applyControl('action', false);
+     *
+     * // Press and release (default)
+     * await controls.applyControl('action');
+     * ```
+     */
+    abstract applyControl(controlName: string | number, isDown?: boolean): Promise<void>;
+    /**
+     * Stop listening to inputs
+     * Input events will be ignored until listenInputs() is called
+     *
+     * @example
+     * ```ts
+     * controls.stopInputs();
+     * // ... later
+     * controls.listenInputs();
+     * ```
+     */
+    stopInputs(): void;
+    /**
+     * Resume listening to inputs after stopInputs() was called
+     *
+     * @example
+     * ```ts
+     * controls.stopInputs();
+     * // ... later
+     * controls.listenInputs();
+     * ```
+     */
+    listenInputs(): void;
+    /**
+     * Configure controls with input mappings
+     *
+     * This method sets up the binding between input keys/buttons and control actions.
+     * It clears existing bindings and creates new ones based on the provided configuration.
+     *
+     * @param inputs - Control configuration object
+     * @example
+     * ```ts
+     * controls.setInputs({
+     *   up: {
+     *     repeat: true,
+     *     bind: 'up',
+     *     keyDown() {
+     *       console.log('Up pressed');
+     *     }
+     *   },
+     *   action: {
+     *     bind: ['space', 'enter'],
+     *     keyDown() {
+     *       console.log('Action triggered');
+     *     }
+     *   }
+     * });
+     * ```
+     */
+    setInputs(inputs: Controls): void;
+    /**
+     * Get the current controls configuration
+     *
+     * @returns The controls options object
+     */
+    get options(): Controls;
+}
+//# sourceMappingURL=ControlsBase.d.ts.map

package/dist/directives/ControlsBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsBase.d.ts","sourceRoot":"","sources":["../../src/directives/ControlsBase.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;KAC9B,CAAC;CACL;AAED,MAAM,WAAW,QAAQ;IACrB,CAAC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC;CACzC;AAED,MAAM,MAAM,QAAQ,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,8BAAsB,YAAY;IAC9B,SAAS,CAAC,SAAS,EAAE;QACjB,CAAC,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAA;KAC9B,CAAK;IACN,SAAS,CAAC,IAAI,EAAE,OAAO,CAAQ;IAC/B,SAAS,CAAC,gBAAgB,EAAE,QAAQ,CAAK;IACzC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAA;IACvB,SAAS,CAAC,SAAS,EAAE,MAAM,CAAK;IAEhC;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,IAAI;IAEzC;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,IAAI,IAAI;IAElC;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,IAAI,IAAI;IAElC;;;OAGG;IACH,KAAK;IAOL;;OAEG;IACH,OAAO;IAOP;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,CAAC,EAAE,MAAM;IAU3G;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM;IAepC;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS;IAInD;;;;;;;;;OASG;IACH,WAAW,IAAI;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAE;IAI1C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAEpF;;;;;;;;;;OAUG;IACH,UAAU;IAIV;;;;;;;;;OASG;IACH,YAAY;IAIZ;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,SAAS,CAAC,MAAM,EAAE,QAAQ;IAiB1B;;;;OAIG;IACH,IAAI,OAAO,IAAI,QAAQ,CAEtB;CACJ"}

package/dist/directives/Drag.d.ts

@@ -0,0 +1,69 @@
+import { Container, FederatedPointerEvent } from 'pixi.js';
+import { Directive } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { SignalOrPrimitive } from '../components/types';
+export type DragProps = {
+    move?: (event: FederatedPointerEvent) => void;
+    start?: () => void;
+    end?: () => void;
+    snap?: SignalOrPrimitive<number>;
+    direction?: SignalOrPrimitive<'x' | 'y' | 'all'>;
+    keyToPress?: SignalOrPrimitive<string[]>;
+    viewport?: {
+        edgeThreshold?: SignalOrPrimitive<number>;
+        maxSpeed?: SignalOrPrimitive<number>;
+    };
+};
+export declare class Drop extends Directive {
+    private elementRef;
+    onInit(element: Element<Container>): void;
+    onMount(element: Element<Container>): void;
+    onUpdate(): void;
+    onDestroy(): void;
+}
+export declare class Drag extends Directive {
+    private elementRef;
+    private stageRef;
+    private offsetInParent;
+    private isDragging;
+    private viewport;
+    private animationFrameId;
+    private lastPointerPosition;
+    private pressedKeys;
+    private pointerIsDown;
+    private onDragMoveHandler;
+    private onDragEndHandler;
+    private onDragStartHandler;
+    private onKeyDownHandler;
+    private onKeyUpHandler;
+    private subscriptions;
+    onInit(element: Element<Container>): void;
+    onMount(element: Element<Container>): void;
+    get dragProps(): any;
+    get axis(): {
+        x: boolean;
+        y: boolean;
+    };
+    /**
+     * Updates element position when dragging and starts continuous viewport movement
+     * @param event The pointer event that triggered the drag move
+     */
+    private onDragMove;
+    /**
+     * Moves the viewport if the dragged element is near screen edges
+     * @param globalPosition The global pointer position
+     */
+    private updateViewportPosition;
+    /**
+     * Handles drag end event and stops viewport movement
+     */
+    private onDragEnd;
+    onKeyDown(event: KeyboardEvent): void;
+    onKeyUp(event: KeyboardEvent): void;
+    private areRequiredKeysPressed;
+    private onPointerDown;
+    private startDrag;
+    onUpdate(props: any): void;
+    onDestroy(): void;
+}
+//# sourceMappingURL=Drag.d.ts.map

package/dist/directives/Drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["../../src/directives/Drag.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAoB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAqB,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAK7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE;QACP,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1C,QAAQ,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;KACxC,CAAC;CACL,CAAA;AAED,qBAAa,IAAK,SAAQ,SAAS;IAC/B,OAAO,CAAC,UAAU,CAAmC;IAErD,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC;IAIlC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC;IAInC,QAAQ;IAER,SAAS;CAGZ;AAED,qBAAa,IAAK,SAAQ,SAAS;IAC/B,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,iBAAiB,CAAoD;IAC7E,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,kBAAkB,CAAoD;IAC9E,OAAO,CAAC,gBAAgB,CAA4C;IACpE,OAAO,CAAC,cAAc,CAA4C;IAElE,OAAO,CAAC,aAAa,CAAsB;IAE3C,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC;IASlC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC;IA6CnC,IAAI,SAAS,QAaZ;IAED,IAAI,IAAI;;;MAaP;IAED;;;OAGG;IACH,OAAO,CAAC,UAAU;IA2ClB;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA4D9B;;OAEG;IACH,OAAO,CAAC,SAAS;IAejB,SAAS,CAAC,KAAK,EAAE,aAAa;IAS9B,OAAO,CAAC,KAAK,EAAE,aAAa;IAQ5B,OAAO,CAAC,sBAAsB;IAqC9B,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,SAAS;IASjB,QAAQ,CAAC,KAAK,KAAA;IAOd,SAAS;CAqBZ"}