canvasengine 1.3.0 → 2.0.0-beta.10

package/dist/index.d.ts

@@ -0,0 +1,1137 @@
+import * as _signe_reactive from '@signe/reactive';
+import { WritableSignal, Signal, WritableArraySignal, WritableObjectSignal } from '@signe/reactive';
+export * from '@signe/reactive';
+import { Subscription, Subject, Observable } from 'rxjs';
+export { isObservable } from 'rxjs';
+import { Node } from 'yoga-layout';
+import * as PIXI from 'pixi.js';
+import { ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
+export { Howler } from 'howler';
+import * as popmotion from 'popmotion';
+
+interface AnimateOptions<T> {
+    duration?: number;
+    ease?: (t: number) => number;
+    onUpdate?: (value: T) => void;
+    onComplete?: () => void;
+}
+interface AnimatedState<T> {
+    current: T;
+    start: T;
+    end: T;
+}
+interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
+    (): T;
+    set: (newValue: T, options?: AnimateOptions<T>) => Promise<void>;
+    animatedState: WritableSignal<AnimatedState<T>>;
+    update: (updater: (value: T) => T) => void;
+}
+declare function isAnimatedSignal(signal: WritableSignal<any>): boolean;
+/**
+ * Creates an animated signal with the given initial value and animation options.
+ * It's a writable signal that can be animated using popmotion. Properties of the animated signal are:
+ * - current: the current value of the signal.
+ * - start: the start value of the animation.
+ * - end: the end value of the animation.
+ *
+ * @param initialValue The initial value of the signal.
+ * @param options The animation options.
+ * @returns The animated signal.
+ * @example
+ * const animatedValue = animatedSignal(0, { duration: 1000 });
+ * animatedValue.set(10);
+ * animatedValue.update((value) => value + 1);
+ * console.log(animatedValue()); // 11
+ *
+ * animatedValue.animatedState() // { current: 10, start: 10, end: 11 }
+ */
+declare function animatedSignal<T>(initialValue: T, options?: AnimateOptions<T>): AnimatedSignal<T>;
+/**
+ * Executes a sequence of animations. If an array is provided as an element in the sequence,
+ * those animations will be executed in parallel.
+ *
+ * @param sequence Array of animation functions or arrays of animation functions for parallel execution
+ * @returns Promise that resolves when all animations are complete
+ * @example
+ * ```ts
+ * await animatedSequence([
+ *   () => value1.set(10),
+ *   [
+ *     () => value2.set(20),
+ *     () => value3.set(30)
+ *   ],
+ *   () => value1.set(0)
+ * ])
+ * ```
+ */
+declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]): Promise<void>;
+
+type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
+
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+type Size = number | `${number}%`;
+type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>;
+interface DisplayObjectProps {
+    attach?: any;
+    ref?: string;
+    x?: SignalOrPrimitive<number>;
+    y?: SignalOrPrimitive<number>;
+    width?: SignalOrPrimitive<Size>;
+    height?: SignalOrPrimitive<Size>;
+    children?: any[];
+    flexDirection?: FlexDirection;
+    justifyContent?: JustifyContent;
+    alpha?: SignalOrPrimitive<number>;
+    margin?: EdgeSize;
+    padding?: EdgeSize;
+    border?: EdgeSize;
+    absolute?: SignalOrPrimitive<boolean>;
+    scale?: SignalOrPrimitive<{
+        x: number;
+        y: number;
+    } | number>;
+    anchor?: SignalOrPrimitive<{
+        x: number;
+        y: number;
+    }>;
+    skew?: SignalOrPrimitive<{
+        x: number;
+        y: number;
+    }>;
+    tint?: SignalOrPrimitive<number>;
+    rotation?: SignalOrPrimitive<number>;
+    angle?: SignalOrPrimitive<number>;
+    zIndex?: SignalOrPrimitive<number>;
+    roundPixels?: SignalOrPrimitive<boolean>;
+    cursor?: SignalOrPrimitive<string>;
+    visible?: SignalOrPrimitive<boolean>;
+    pivot?: SignalOrPrimitive<{
+        x: number;
+        y: number;
+    }>;
+    filters?: any[];
+    blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
+    blur?: SignalOrPrimitive<number>;
+    click?: PIXI.FederatedEventHandler;
+    mousedown?: PIXI.FederatedEventHandler;
+    mouseenter?: PIXI.FederatedEventHandler;
+    mouseleave?: PIXI.FederatedEventHandler;
+    mousemove?: PIXI.FederatedEventHandler;
+    mouseout?: PIXI.FederatedEventHandler;
+    mouseover?: PIXI.FederatedEventHandler;
+    mouseup?: PIXI.FederatedEventHandler;
+    mouseupoutside?: PIXI.FederatedEventHandler;
+    pointercancel?: PIXI.FederatedEventHandler;
+    pointerdown?: PIXI.FederatedEventHandler;
+    pointerenter?: PIXI.FederatedEventHandler;
+    pointerleave?: PIXI.FederatedEventHandler;
+    pointermove?: PIXI.FederatedEventHandler;
+    pointerout?: PIXI.FederatedEventHandler;
+    pointerover?: PIXI.FederatedEventHandler;
+    pointertap?: PIXI.FederatedEventHandler;
+    pointerup?: PIXI.FederatedEventHandler;
+    pointerupoutside?: PIXI.FederatedEventHandler;
+    rightclick?: PIXI.FederatedEventHandler;
+    rightdown?: PIXI.FederatedEventHandler;
+    rightup?: PIXI.FederatedEventHandler;
+    rightupoutside?: PIXI.FederatedEventHandler;
+    tap?: PIXI.FederatedEventHandler;
+    touchcancel?: PIXI.FederatedEventHandler;
+    touchend?: PIXI.FederatedEventHandler;
+    touchendoutside?: PIXI.FederatedEventHandler;
+    touchmove?: PIXI.FederatedEventHandler;
+    touchstart?: PIXI.FederatedEventHandler;
+    wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
+}
+
+interface ComponentInstance extends PixiMixins.ContainerOptions {
+    id?: string;
+    children?: ComponentInstance[];
+    onInit?(props: Props): void;
+    onUpdate?(props: Props): void;
+    onDestroy?(parent: Element): void;
+    onMount?(context: Element, index?: number): void;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+}
+declare const EVENTS: string[];
+declare function DisplayObject(extendClass: any): {
+    new (): {
+        [x: string]: any;
+        "__#1@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: Props;
+        isMounted: boolean;
+        _anchorPoints: ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: _signe_reactive.WritableSignal<number>;
+        displayHeight: _signe_reactive.WritableSignal<number>;
+        overrideProps: string[];
+        node: Node;
+        readonly yoga: any;
+        readonly deltaRatio: any;
+        onInit(props: any): void;
+        onMount({ parent, props }: Element</*elided*/ any>, index?: number): void;
+        effectSize(width: Size, height: Size): void;
+        applyFlexLayout(): void;
+        "__#1@#flexRender"(props: any): void;
+        onUpdate(props: any): void;
+        onDestroy(): void;
+        getComputedLayout(): {
+            left: number;
+            right: number;
+            top: number;
+            bottom: number;
+            width: number;
+            height: number;
+        };
+        applyComputedLayout(): void;
+        calculateLayout(): void;
+        setFlexDirection(direction: FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        "__#1@#setAlign"(methodName: string, align: AlignContent): void;
+        setAlignContent(align: AlignContent): void;
+        setAlignSelf(align: AlignContent): void;
+        setAlignItems(align: AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        "__#1@#setEdgeSize"(methodName: string, size: EdgeSize): void;
+        setPosition(position: EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: EdgeSize): void;
+        setMargin(margin: EdgeSize): void;
+        setGap(gap: EdgeSize): void;
+        setBorder(border: EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        calculateBounds(): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+    };
+    [x: string]: any;
+};
+
+interface Props {
+    [key: string]: any;
+}
+type ArrayChange<T> = {
+    type: "add" | "remove" | "update" | "init" | "reset";
+    index?: number;
+    items: T[];
+};
+type ObjectChange<T> = {
+    type: "add" | "remove" | "update" | "init" | "reset";
+    key?: string;
+    value?: T;
+    items: T[];
+};
+type NestedSignalObjects = {
+    [Key in string]: NestedSignalObjects | Signal<any>;
+};
+interface Element<T = ComponentInstance> {
+    tag: string;
+    props: Props;
+    componentInstance: T;
+    propSubscriptions: Subscription[];
+    effectSubscriptions: Subscription[];
+    effectMounts: (() => void)[];
+    effectUnmounts: ((element?: Element) => void)[];
+    propObservables: NestedSignalObjects | undefined;
+    parent: Element | null;
+    context?: {
+        [key: string]: any;
+    };
+    directives: {
+        [key: string]: Directive;
+    };
+    destroy: () => void;
+    allElements: Subject<void>;
+}
+type FlowResult = {
+    elements: Element[];
+    prev?: Element;
+    fullElements?: Element[];
+};
+type FlowObservable = Observable<FlowResult>;
+declare const isElement: (value: any) => value is Element;
+declare const isPrimitive: (value: any) => boolean;
+declare function registerComponent(name: any, component: any): void;
+/**
+ * Creates a virtual element or a representation thereof, with properties that can be dynamically updated based on BehaviorSubjects.
+ *
+ * @param {string} tag - The tag name of the element to create.
+ * @param {Object} props - An object containing properties for the element. Each property can either be a direct value
+ *                         or an array where the first element is a function that returns a value based on input parameters,
+ *                         and the second element is an array of BehaviorSubjects. The property is updated dynamically
+ *                         using the combineLatest RxJS operator to wait for all BehaviorSubjects to emit.
+ * @returns {Object} An object representing the created element, including tag name and dynamic properties.
+ */
+declare function createComponent(tag: string, props?: Props): Element;
+/**
+ * Observes a BehaviorSubject containing an array or object of items and dynamically creates child elements for each item.
+ *
+ * @param {WritableArraySignal<T> | WritableObjectSignal<T>} itemsSubject - A signal that emits an array or object of items.
+ * @param {Function} createElementFn - A function that takes an item and returns an element representation.
+ * @returns {Observable} An observable that emits the list of created child elements.
+ */
+declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
+/**
+ * Conditionally creates and destroys elements based on a condition signal.
+ *
+ * @param {Signal<boolean> | boolean} condition - A signal or boolean that determines whether to create an element.
+ * @param {Function} createElementFn - A function that returns an element or a promise that resolves to an element.
+ * @returns {Observable} An observable that emits the created or destroyed element.
+ */
+declare function cond(condition: Signal<boolean> | boolean, createElementFn: () => Element | Promise<Element>): FlowObservable;
+
+declare abstract class Directive {
+    abstract onDestroy(): any;
+    abstract onInit(element: Element<any>): any;
+    abstract onMount(element: Element<any>): any;
+    abstract onUpdate(props: any): any;
+}
+
+interface Tick {
+    timestamp: number;
+    deltaTime: number;
+    frame: number;
+    deltaRatio: number;
+}
+
+type MountFunction = (fn: (element: Element) => void) => void;
+type ComponentFunction<P = {}> = (props: P) => Element | Promise<Element>;
+declare let currentSubscriptionsTracker: ((subscription: Subscription) => void) | null;
+declare let mountTracker: MountFunction | null;
+/**
+ * Registers a mount function to be called when the component is mounted.
+ * To unmount the component, the function must return a function that will be called by the engine.
+ *
+ * @param {(element: Element) => void} fn - The function to be called on mount.
+ * @example
+ * ```ts
+ * mount((el) => {
+ *   console.log('mounted', el);
+ * });
+ * ```
+ * Unmount the component by returning a function:
+ * ```ts
+ * mount((el) => {
+ *   console.log('mounted', el);
+ *   return () => {
+ *     console.log('unmounted', el);
+ *   }
+ * });
+ * ```
+ */
+declare function mount(fn: (element: Element) => void): void;
+/**
+ * Registers a tick function to be called on each tick of the component's context.
+ * @param {(tickValue: Tick, element: Element) => void} fn - The function to be called on each tick.
+ * @example
+ * ```ts
+ * tick((tickValue, el) => {
+ *   console.log('tick', tickValue, el);
+ * });
+ * ```
+ */
+declare function tick(fn: (tickValue: Tick, element: Element) => void): void;
+/**
+ * Add tracking for subscriptions and mounts, then create an element from a component function.
+ * @template C
+ * @param {C} componentFunction - The component function to create an element from.
+ * @param {Parameters<C>[0]} [props={}] - The props to pass to the component function.
+ * @param {...any[]} children - The children elements of the component.
+ * @returns {ReturnType<C>}
+ * @example
+ * ```ts
+ * const el = h(MyComponent, {
+ *   x: 100,
+ *   y: 100,
+ * });
+ * ```
+ *
+ * with children:
+ * ```ts
+ * const el = h(MyComponent, {
+ *   x: 100,
+ *   y: 100,
+ * },
+ *   h(MyChildComponent, {
+ *     x: 50,
+ *     y: 50,
+ *   }),
+ * );
+ * ```
+ */
+declare function h<C extends ComponentFunction<any>>(componentFunction: C, props?: Parameters<C>[0], ...children: any[]): ReturnType<C>;
+
+interface CanvasProps extends Props {
+    cursorStyles?: () => any;
+    width?: SignalOrPrimitive<Size>;
+    height?: SignalOrPrimitive<Size>;
+    canvasEl?: HTMLElement;
+    selector?: string;
+    isRoot?: boolean;
+    tick?: any;
+    class?: SignalOrPrimitive<string>;
+}
+declare const Canvas: ComponentFunction<CanvasProps>;
+
+interface ContainerProps extends DisplayObjectProps {
+    sortableChildren?: boolean;
+}
+declare const Container: ComponentFunction<ContainerProps>;
+
+interface GraphicsProps extends DisplayObjectProps {
+    draw?: (graphics: Graphics$1) => void;
+}
+interface RectProps extends DisplayObjectProps {
+    width: number;
+    height: number;
+    color: string;
+}
+interface CircleProps extends DisplayObjectProps {
+    radius: number;
+    color: string;
+}
+interface EllipseProps extends DisplayObjectProps {
+    width: number;
+    height: number;
+    color: string;
+}
+interface TriangleProps extends DisplayObjectProps {
+    base: number;
+    height: number;
+    color: string;
+}
+interface SvgProps extends DisplayObjectProps {
+    svg: string;
+}
+declare function Graphics(props: GraphicsProps): Element<ComponentInstance>;
+declare function Rect(props: RectProps): Element<ComponentInstance>;
+declare function Circle(props: CircleProps): Element<ComponentInstance>;
+declare function Ellipse(props: EllipseProps): Element<ComponentInstance>;
+declare function Triangle(props: TriangleProps): Element<ComponentInstance>;
+declare function Svg(props: SvgProps): Element<ComponentInstance>;
+
+declare function Scene(props: any): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
+
+declare function ParticlesEmitter(props: any): Element<ComponentInstance>;
+
+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;
+}
+interface FrameOptions extends TransformOptions {
+    time: number;
+    frameX?: number;
+    frameY?: number;
+}
+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;
+    };
+}
+type AnimationFrames = FrameOptions[][] | ((...args: any) => FrameOptions[][]);
+interface TexturesOptions extends TextureOptions, TransformOptions {
+    animations: AnimationFrames;
+}
+interface SpritesheetOptions extends TransformOptions, TextureOptions {
+    /**
+    * Object containing all animations.
+    * The key to the object is the name of the animation. The value is a two-dimensional array
+    *
+    * ```ts
+    * textures: {
+    *      myanim: {
+    *         animations: [
+    *              [ { time: 0, frameX: 0, frameY: 0 } ]
+    *         ]
+    *      }
+    * }
+    * ```
+    *
+    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
+    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
+    *
+    * Here are the properties:
+    *
+    * * `time`: Time in frame
+    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
+    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
+    * * `opacity`
+    * * `pivot`
+    * * `anchor`
+    * * `rotation`
+    * * `angle`
+    * * `scale`
+    * * `skew`
+    * * `x`
+    * * `y`
+    * * `visible`
+    * * `sound`: The sound that will be played during the frame
+    *
+    * ---
+    * **Extract Animation of Spritesheet**
+    *
+    * Sometimes the animation is part of the image
+    *
+    * ```ts
+    * textures: {
+    *      myanim: {
+    *          rectWidth: 64,
+    *          rectHeight: 64,
+    *          framesWidth: 10,
+    *          framesHeight: 2,
+    *          offset: {x: 0, y: 230},
+    *          sound: 'my-sound-id', // You can put a sound just for the animation
+    *          animations: [
+    *               [ { time: 0, frameX: 0, frameY: 0 } ]
+    *          ]
+    *      }
+    * }
+    * ```
+    *
+    * Above, we can specify which part we want to recover
+    *
+    * 1. We go to the position {0, 230} of the image (`offset`)
+    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
+    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
+    *
+    * ---
+    *
+    * **Advanced**
+    *
+    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
+    *
+    * Full example:
+    *
+    * ```ts
+    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
+    *
+    * @Spritesheet({
+    *      id: 'chest',
+    *      image: require('./assets/chest.png'),
+    *      width: 124,
+    *      height: 61,
+    *      framesHeight: 2,
+    *      framesWidth: 4,
+    *      textures: {
+    *          [Animation.Stand]: {
+    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
+    *          }
+    *      })
+    * })
+    * export class Chest  { }
+    * ```
+    *
+    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
+    *
+    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example:
+    *
+    * ```ts
+    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
+    *
+    * @Spritesheet({
+    *      id: 'chest',
+    *      image: require('./assets/chest.png'),
+    *      width: 124,
+    *      height: 61,
+    *      framesHeight: 2,
+    *      framesWidth: 4,
+    *      textures: {
+    *          [Animation.Stand]: {
+    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
+    *          }
+    *      }
+    * })
+    * export class Chest implements ISpriteCharacter {
+    *      onCharacterStand(sprite: RpgSprite) {
+    *         sprite.animation.play(Animation.Stand, ['hello'])
+    *      }
+    * }
+    * ```
+    *
+    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
+    * @memberof Spritesheet
+    * */
+    textures?: {
+        [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>;
+    };
+}
+
+type Image = {
+    image: string;
+};
+type TextureOptionsMerging = TextureOptions & {
+    spriteWidth: number;
+    spriteHeight: number;
+    sound?: string;
+} & Image & TransformOptions;
+type SpritesheetOptionsMerging = TextureOptionsMerging & SpritesheetOptions;
+interface SpriteProps extends DisplayObjectProps {
+    sheet?: {
+        definition?: SpritesheetOptionsMerging;
+        playing?: string;
+        params?: any;
+        onFinish?: () => void;
+    };
+    scaleMode?: number;
+    image?: string;
+    rectangle?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    context?: {
+        tick: Signal;
+    };
+}
+interface SpritePropsWithImage extends Omit<SpriteProps, "sheet"> {
+    image: string;
+    rectangle?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+interface SpritePropsWithSheet extends Omit<SpriteProps, "image" | "rectangle"> {
+    sheet: {
+        definition: SpritesheetOptionsMerging;
+        playing?: string;
+        params?: any;
+        onFinish?: () => void;
+    };
+    loader?: {
+        onProgress?: (progress: number) => void;
+        onComplete?: (texture: Texture) => void;
+    };
+}
+type SpritePropTypes = SpritePropsWithImage | SpritePropsWithSheet;
+declare const Sprite: ComponentFunction<SpritePropTypes>;
+
+interface VideoProps {
+    src: string;
+    paused?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    loader?: {
+        onComplete?: (texture: Texture) => void;
+        onProgress?: (progress: number) => void;
+    };
+}
+declare function Video(props: VideoProps): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
+
+interface TextProps extends DisplayObjectProps {
+    text?: string;
+    style?: Partial<TextStyle>;
+    color?: string;
+    size?: string;
+    fontFamily?: string;
+    typewriter?: {
+        speed?: number;
+        start?: () => void;
+        onComplete?: () => void;
+        skip?: () => void;
+    };
+}
+declare function Text(props: TextProps): Element<ComponentInstance>;
+
+interface TilingSpriteProps extends DisplayObjectProps {
+    image?: string;
+    tileScale?: {
+        x: number;
+        y: number;
+    };
+    tilePosition?: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    height?: number;
+}
+declare function TilingSprite(props: TilingSpriteProps): Element<ComponentInstance>;
+
+interface ViewportProps {
+    screenWidth?: number;
+    screenHeight?: number;
+    worldWidth?: number;
+    worldHeight?: number;
+    clamp?: boolean | {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    [key: string]: any;
+}
+declare function Viewport(props: ViewportProps): Element<ComponentInstance>;
+
+interface NineSliceSpriteProps extends DisplayObjectProps {
+    image?: string;
+    texture?: Texture;
+    width?: number;
+    height?: number;
+    leftWidth?: number;
+    rightWidth?: number;
+    topHeight?: number;
+    bottomHeight?: number;
+    roundPixels?: boolean;
+}
+declare function NineSliceSprite(props: NineSliceSpriteProps): Element<ComponentInstance>;
+
+interface Listen<T = any> {
+    config: T | undefined;
+    seed: {
+        config: T | undefined;
+        value: number;
+        resolve: (value: any) => void;
+    };
+}
+interface Trigger<T = any> {
+    start: () => Promise<void>;
+    listen: () => Listen<T> | undefined;
+}
+/**
+ * Checks if the given argument is a Trigger object
+ * @param arg - The value to check
+ * @returns True if the argument is a Trigger object
+ */
+declare function isTrigger(arg: any): arg is Trigger<any>;
+/**
+ * Creates a new trigger that can be used to pass data between components
+ * @param globalConfig - Optional configuration data to be passed when the trigger is activated
+ * @returns A Trigger object with start and listen methods
+ * @example
+ * ```ts
+ * const myTrigger = trigger()
+ *
+ * on(myTrigger, (data) => {
+ *   console.log('Triggered with data:', data)
+ * })
+ *
+ * myTrigger.start({ message: 'Hello' })
+ * ```
+ */
+declare function trigger<T = any>(globalConfig?: T): Trigger<T>;
+/**
+ * Subscribes to a trigger and executes a callback when the trigger is activated
+ * @param triggerSignal - The trigger to subscribe to
+ * @param callback - Function to execute when the trigger is activated
+ * @throws Error if triggerSignal is not a valid trigger
+ * @example
+ * ```ts
+ * const click = trigger()
+ *
+ * on(click, () => {
+ *   console.log('Click triggered')
+ * })
+ * ```
+ */
+declare function on(triggerSignal: any, callback: (config: any) => void | Promise<void>): void;
+
+/**
+ * Bootstraps a canvas element and renders it to the DOM.
+ *
+ * @param rootElement - The HTML element where the canvas will be rendered. Can be null.
+ * @param canvas - A Promise that resolves to an Element representing the canvas component.
+ * @returns A Promise that resolves to the rendered canvas element.
+ * @throws {Error} If the provided element is not a Canvas component.
+ */
+declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => Promise<Element<ComponentInstance>>;
+
+/**
+ * Converts props into reactive signals if they are primitive values.
+ *
+ * @param {object} props - The properties to convert.
+ * @param {object} [defaults={}] - Default values for properties.
+ * @returns {object} An object with reactive signals.
+ *
+ * @example
+ * const props = useProps({ count: 0, name: "John" });
+ * console.log(props.count()); // 0
+ * props.count.set(1);
+ * console.log(props.count()); // 1
+ */
+declare const useProps: (props: any, defaults?: {}) => any;
+type PropType = NumberConstructor | StringConstructor | BooleanConstructor | FunctionConstructor | ObjectConstructor | ArrayConstructor | null | (new (...args: any[]) => any);
+interface PropConfig {
+    type?: PropType | PropType[];
+    required?: boolean;
+    default?: any | ((props: any) => any);
+    validator?: (value: any, props: any) => boolean;
+}
+type PropSchema = {
+    [key: string]: PropType | PropType[] | PropConfig;
+};
+/**
+ * Validates and defines properties based on a schema.
+ *
+ * @param {object} props - The properties to validate.
+ * @returns {function} A function that takes a schema and returns validated properties.
+ *
+ * @example
+ * const schema = {
+ *   age: { type: Number, required: true },
+ *   name: { type: String, default: "Anonymous" }
+ * };
+ * const validatedProps = useDefineProps({ age: 25 })(schema);
+ * console.log(validatedProps.age()); // 25
+ * console.log(validatedProps.name()); // "Anonymous"
+ */
+declare const useDefineProps: (props: any) => (schema?: PropSchema) => any;
+
+declare const Easing: {
+    linear: popmotion.Easing;
+    easeIn: popmotion.Easing;
+    easeInOut: popmotion.Easing;
+    easeOut: popmotion.Easing;
+    circIn: popmotion.Easing;
+    circInOut: popmotion.Easing;
+    circOut: popmotion.Easing;
+    backIn: popmotion.Easing;
+    backInOut: popmotion.Easing;
+    backOut: popmotion.Easing;
+    anticipate: popmotion.Easing;
+    bounceIn: popmotion.Easing;
+    bounceInOut: (p: number) => number;
+    bounceOut: (p: number) => number;
+};
+
+/**
+ * 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)");
+ */
+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<PIXI.TextureSource<any>>;
+        matrix: Matrix;
+    };
+}
+
+/**
+ * Checks if code is running in a browser environment
+ * @returns {boolean} True if running in browser, false otherwise
+ */
+declare function isBrowser(): boolean;
+/**
+ * Returns current high-resolution timestamp
+ * @returns {number} Current time in milliseconds
+ */
+declare function preciseNow(): number;
+/**
+ * Converts frames per second to milliseconds
+ * @param {number} fps - Frames per second
+ * @returns {number} Milliseconds per frame
+ */
+declare function fps2ms(fps: number): number;
+/**
+ * Checks if a value is a Promise
+ * @param {any} value - Value to check
+ * @returns {boolean} True if value is a Promise, false otherwise
+ */
+declare function isPromise(value: any): boolean;
+declare function arrayEquals(a: any[], b: any[]): boolean;
+/**
+ * Checks if a value is a function
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is a function, false otherwise
+ */
+declare function isFunction(val: unknown): boolean;
+/**
+ * Checks if a value is a plain object
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ */
+declare function isObject(val: unknown): boolean;
+/**
+ * Sets a value in an object using a dot notation path
+ * @param {Record<string, any>} obj - Target object
+ * @param {string | string[]} path - Path to set value at (e.g., 'a.b.c' or ['a', 'b', 'c'])
+ * @param {any} value - Value to set
+ * @param {boolean} onlyPlainObject - If true, only creates plain objects in path
+ * @returns {Record<string, any>} Modified object
+ */
+declare function set(obj: Record<string, any>, path: string | string[], value: any, onlyPlainObject?: boolean): Record<string, any>;
+/**
+ * Gets a value from an object using a dot notation path
+ * @param {Record<string, any>} obj - Source object
+ * @param {string} path - Path to get value from (e.g., 'a.b.c')
+ * @returns {any} Value at path or undefined if not found
+ */
+declare function get(obj: Record<string, any>, path: string): any;
+/**
+ * Logs a message to console
+ * @param {any} text - Message to log
+ */
+declare function log(text: any): void;
+/**
+ * Logs an error message to console
+ * @param {any} text - Error message to log
+ */
+declare function error(text: any): void;
+/**
+ * Sets the position of an ObservablePoint using various input formats
+ * @param {ObservablePoint} observablePoint - The point to modify
+ * @param {Object | number | [number, number]} point - New position value
+ */
+declare function setObservablePoint(observablePoint: ObservablePoint, point: {
+    x: number;
+    y: number;
+} | number | [number, number]): void;
+/**
+ * Calculates the Euclidean distance between two points
+ * @param {number} x1 - X coordinate of first point
+ * @param {number} y1 - Y coordinate of first point
+ * @param {number} x2 - X coordinate of second point
+ * @param {number} y2 - Y coordinate of second point
+ * @returns {number} Distance between the points
+ */
+declare function calculateDistance(x1: number, y1: number, x2: number, y2: number): number;
+
+declare const utils_arrayEquals: typeof arrayEquals;
+declare const utils_calculateDistance: typeof calculateDistance;
+declare const utils_error: typeof error;
+declare const utils_fps2ms: typeof fps2ms;
+declare const utils_get: typeof get;
+declare const utils_isBrowser: typeof isBrowser;
+declare const utils_isFunction: typeof isFunction;
+declare const utils_isObject: typeof isObject;
+declare const utils_isPromise: typeof isPromise;
+declare const utils_log: typeof log;
+declare const utils_preciseNow: typeof preciseNow;
+declare const utils_set: typeof set;
+declare const utils_setObservablePoint: typeof setObservablePoint;
+declare namespace utils {
+  export { utils_arrayEquals as arrayEquals, utils_calculateDistance as calculateDistance, utils_error as error, utils_fps2ms as fps2ms, utils_get as get, utils_isBrowser as isBrowser, utils_isFunction as isFunction, utils_isObject as isObject, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
+}
+
+export { type AnimateOptions, type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, type ObjectChange, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };