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

package/dist/engine/animation.d.ts

@@ -0,0 +1,72 @@
+import { WritableSignal, Signal } from '@signe/reactive';
+import { Tick } from '../directives/Scheduler';
+export interface AnimateOptions<T> {
+    duration?: number;
+    ease?: (t: number) => number;
+    onUpdate?: (value: T) => void;
+    onComplete?: () => void;
+    tick?: Signal<Tick>;
+}
+export interface AnimatedState<T> {
+    current: T;
+    start: T;
+    end: T;
+}
+export 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;
+    pause: () => void;
+    resume: () => void;
+}
+export 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.
+ *
+ * If a tick signal is provided in options, the animation will use the engine's tick system.
+ * Otherwise, it will automatically use the global tick signal from the Canvas context if available.
+ * If no tick signal is available, it will use requestAnimationFrame by default.
+ *
+ * @param initialValue The initial value of the signal.
+ * @param options The animation options. Can include a `tick` signal to use a specific tick system.
+ * @returns The animated signal.
+ * @example
+ * ```ts
+ * // Automatically uses the Canvas tick system if available, otherwise requestAnimationFrame
+ * const animatedValue = animatedSignal(0, { duration: 1000 });
+ * animatedValue.set(10);
+ *
+ * // Explicitly using a specific tick signal
+ * mount((element) => {
+ *   const tickSignal = element.props.context.tick;
+ *   const animatedValue = animatedSignal(0, { duration: 1000, tick: tickSignal });
+ *   animatedValue.set(10);
+ * });
+ * ```
+ */
+export 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)
+ * ])
+ * ```
+ */
+export declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]): Promise<void>;
+//# sourceMappingURL=animation.d.ts.map

package/dist/engine/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/engine/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,cAAc,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAa/C,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;CACrB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,OAAO,EAAE,CAAC,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,EAAE,CAAC,CAAC;CACR;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IACvE,IAAI,CAAC,CAAC;IACN,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,aAAa,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,OAAO,CAErE;AAkDD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,OAAO,GAAE,cAAc,CAAC,CAAC,CAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAwHrG;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,iBAQnG"}

package/dist/engine/bootstrap.d.ts

@@ -0,0 +1,48 @@
+import { Application, ApplicationOptions } from 'pixi.js';
+import { ComponentFunction } from './signal';
+/**
+ * Extended options for bootstrapCanvas that includes component registration configuration.
+ *
+ * @property components - Optional mapping of component names to their classes (can include mocks for testing)
+ * @property autoRegister - If true (default), registers all default components before applying custom components. If false, only registers the specified components.
+ */
+export interface BootstrapOptions extends ApplicationOptions {
+    components?: {
+        [name: string]: any;
+    };
+    autoRegister?: boolean;
+    enableLayout?: boolean;
+}
+/**
+ * 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.
+ * @param options - Optional bootstrap options including ApplicationOptions and component registration configuration.
+ * @returns A Promise that resolves to the rendered canvas element.
+ * @throws {Error} If the provided element is not a Canvas component.
+ *
+ * @example
+ * ```typescript
+ * // Default: all components registered automatically
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   width: 800,
+ *   height: 600
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With mocks for testing
+ * import { mockComponents } from '@canvasengine/testing';
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   components: mockComponents,
+ *   autoRegister: false
+ * });
+ * ```
+ */
+export declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => Promise<{
+    canvasElement: import('./reactive').Element<import('..').ComponentInstance>;
+    app: Application<import('pixi.js').Renderer>;
+}>;
+//# sourceMappingURL=bootstrap.d.ts.map

package/dist/engine/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/engine/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAK,MAAM,UAAU,CAAC;AAOhD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,UAAU,CAAC,EAAE;QACX,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;KACrB,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,eAAe,GAAU,aAAa,WAAW,GAAG,IAAI,EAAE,QAAQ,iBAAiB,CAAC,GAAG,CAAC,EAAE,UAAU,gBAAgB;;;EA6ChI,CAAC"}

package/dist/engine/directive.d.ts

@@ -0,0 +1,13 @@
+import { Element } from './reactive';
+export declare const directives: {
+    [key: string]: any;
+};
+export declare abstract class Directive {
+    abstract onDestroy(element: Element<any>): any;
+    abstract onInit(element: Element<any>): any;
+    abstract onMount(element: Element<any>): any;
+    abstract onUpdate(props: any, element: Element<any>): any;
+}
+export declare function registerDirective(name: string, directive: any): void;
+export declare function applyDirective(element: Element<any>, directiveName: string): any;
+//# sourceMappingURL=directive.d.ts.map

package/dist/engine/directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directive.d.ts","sourceRoot":"","sources":["../../src/engine/directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,eAAO,MAAM,UAAU,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAO,CAAA;AAEpD,8BAAsB,SAAS;IAC3B,QAAQ,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IACxC,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAG,OAAO,CAAC,GAAG,CAAC;IACtC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;CACtD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,QAE7D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,OAO1E"}

package/dist/engine/reactive.d.ts

@@ -0,0 +1,134 @@
+import { Signal } from '@signe/reactive';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { ComponentInstance } from '../components/DisplayObject';
+import { Directive } from './directive';
+export interface Props {
+    [key: string]: any;
+}
+type NestedSignalObjects = {
+    [Key in string]: NestedSignalObjects | Signal<any>;
+};
+export 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>;
+    isFrozen: boolean;
+}
+type FlowResult = {
+    elements: Element[];
+    prev?: Element;
+    fullElements?: Element[];
+};
+type FlowObservable = Observable<FlowResult>;
+export declare const isElement: (value: any) => value is Element;
+export declare const isPrimitive: (value: any) => boolean;
+export declare function registerComponent(name: any, component: any): void;
+/**
+ * Registers all default CanvasEngine components.
+ *
+ * This function imports and registers all core components that are available by default.
+ * It's called automatically by bootstrapCanvas() if no custom component configuration is provided.
+ *
+ * Components register themselves when their modules are imported, so this function ensures
+ * all component modules are loaded. Since components call registerComponent() at module load time,
+ * importing them will automatically register them synchronously.
+ *
+ * @example
+ * ```typescript
+ * // Register all default components manually
+ * registerAllComponents();
+ *
+ * // Now you can use any component
+ * const sprite = createComponent('Sprite', { image: 'hero.png' });
+ * ```
+ */
+export declare function registerAllComponents(): void;
+/**
+ * Checks if all dependencies are ready (not undefined).
+ * Handles signals synchronously and promises asynchronously.
+ * For reactive signals, sets up subscriptions to mount when all become ready.
+ *
+ * @param deps - Array of signals, promises, or direct values
+ * @returns Promise<boolean> - true if all dependencies are ready
+ */
+export declare function checkDependencies(deps: any[]): Promise<boolean>;
+export declare function waitForDependencies(deps: any[]): Promise<void>;
+/**
+ * Checks if an element is currently frozen.
+ * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),
+ * or when any of its parent elements are frozen (recursive freeze propagation).
+ *
+ * @param element - The element to check
+ * @returns `true` if the element is frozen, `false` otherwise
+ */
+export declare function isElementFrozen(element: Element): boolean;
+/**
+ * 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.
+ */
+export 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.
+ */
+export declare function loop<T>(itemsSubject: any, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
+/**
+ * Conditionally creates and destroys elements based on condition signals with support for else if and else.
+ *
+ * @description This function creates conditional rendering with support for multiple conditions (if/else if/else pattern).
+ * It evaluates conditions in order and renders the first matching condition's element.
+ * The function maintains full reactivity with signals and ensures proper cleanup of elements.
+ *
+ * @param {Signal<boolean> | boolean | (() => boolean)} condition - A signal, boolean, or function that determines whether to create an element.
+ * @param {Function} createElementFn - A function that returns an element or a promise that resolves to an element.
+ * @param {...Array} additionalConditions - Additional conditions for else if and else cases.
+ *   Can be:
+ *   - A function for else case: `() => Element | Promise<Element>`
+ *   - An array for else if case: `[Signal<boolean> | boolean | (() => boolean), () => Element | Promise<Element>]`
+ * @returns {Observable} An observable that emits the created element based on the matching condition.
+ *
+ * @example
+ * ```typescript
+ * // Simple if/else
+ * cond(
+ *   signal(isVisible),
+ *   () => h(Container),
+ *   () => h(Text, { text: 'Hidden' }) // else
+ * );
+ *
+ * // Multiple else if + else
+ * cond(
+ *   signal(status === 'loading'),
+ *   () => h(LoadingSpinner),
+ *   [signal(status === 'error'), () => h(ErrorMessage)], // else if
+ *   [signal(status === 'success'), () => h(SuccessMessage)], // else if
+ *   () => h(DefaultMessage) // else
+ * );
+ * ```
+ */
+export declare function cond(condition: Signal<boolean> | boolean | (() => boolean), createElementFn: () => Element | Promise<Element>, ...additionalConditions: Array<(() => Element | Promise<Element>) | [Signal<boolean> | boolean | (() => boolean), () => Element | Promise<Element>]>): FlowObservable;
+export {};
+//# sourceMappingURL=reactive.d.ts.map

package/dist/engine/reactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../../src/engine/reactive.ts"],"names":[],"mappings":"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"}

package/dist/engine/signal.d.ts

@@ -0,0 +1,71 @@
+import { Subscription } from 'rxjs';
+import { Element } from './reactive';
+import { Tick } from '../directives/Scheduler';
+type MountFunction = (fn: (element: Element) => void) => void;
+export type ComponentFunction<P = {}> = (props: P) => Element | Promise<Element>;
+export declare let currentSubscriptionsTracker: ((subscription: Subscription) => void) | null;
+export 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);
+ *   }
+ * });
+ * ```
+ */
+export 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);
+ * });
+ * ```
+ */
+export 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,
+      *   }),
+ * );
+ * ```
+ */
+export declare function h<C extends ComponentFunction<any>>(componentFunction: C | Element, props?: Parameters<C>[0], ...children: any[]): ReturnType<C>;
+export {};
+//# sourceMappingURL=signal.d.ts.map

package/dist/engine/signal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal.d.ts","sourceRoot":"","sources":["../../src/engine/signal.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACb,MAAM,MAAM,CAAC;AAEd,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,KAAK,aAAa,GAAG,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC;AAG9D,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AAEjF,eAAO,IAAI,2BAA2B,EAAE,CAAC,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,IAAW,CAAC;AAC7F,eAAO,IAAI,YAAY,EAAE,aAAa,GAAG,IAAW,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,QAEnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,QAiBnE;AAqGD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,CAAC,CAAC,CAAC,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAChD,iBAAiB,EAAE,CAAC,GAAG,OAAO,EAC9B,KAAK,GAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAA0B,EAChD,GAAG,QAAQ,EAAE,GAAG,EAAE,GACjB,UAAU,CAAC,CAAC,CAAC,CAqBf"}

package/dist/engine/trigger.d.ts

@@ -0,0 +1,54 @@
+export interface Listen<T = any> {
+    config: T | undefined;
+    seed: {
+        config: T | undefined;
+        value: number;
+        resolve: (value: any) => void;
+    };
+}
+export 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
+ */
+export 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' })
+ * ```
+ */
+export 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
+ * @returns Subscription that can be unsubscribed to stop listening
+ * @throws Error if triggerSignal is not a valid trigger
+ * @example
+ * ```ts
+ * const click = trigger()
+ *
+ * const subscription = on(click, () => {
+ *   console.log('Click triggered')
+ * })
+ *
+ * // Later, to stop listening:
+ * subscription.unsubscribe()
+ * ```
+ */
+export declare function on(triggerSignal: any, callback: (config: any) => void | Promise<void>): import('rxjs').Subscription;
+//# sourceMappingURL=trigger.d.ts.map

package/dist/engine/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/engine/trigger.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG;IAC7B,MAAM,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,GAAG,SAAS,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;KAC/B,CAAC;CACH;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,GAAG;IAC9B,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,MAAM,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;CACrC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,CAEvD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,YAAY,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CA2B7D;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,+BAmCrF"}

package/dist/engine/utils.d.ts

@@ -0,0 +1,89 @@
+import { ObservablePoint } from 'pixi.js';
+/**
+ * Checks if code is running in a browser environment
+ * @returns {boolean} True if running in browser, false otherwise
+ */
+export declare function isBrowser(): boolean;
+/**
+ * Returns current high-resolution timestamp
+ * @returns {number} Current time in milliseconds
+ */
+export declare function preciseNow(): number;
+/**
+ * Converts frames per second to milliseconds
+ * @param {number} fps - Frames per second
+ * @returns {number} Milliseconds per frame
+ */
+export 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
+ */
+export declare function isPromise(value: any): boolean;
+export 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
+ */
+export declare function isFunction(val: unknown): boolean;
+/**
+ * Checks if a value is a plain object (not an instance of a class)
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is a plain object (not null, not array, not instance), false otherwise
+ * @example
+ * ```ts
+ * isObject({}) // true
+ * isObject(new Date()) // false
+ * isObject([]) // false
+ * isObject(null) // false
+ * ```
+ */
+export declare function isObject(val: unknown): boolean;
+export declare function isObservable(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
+ */
+export 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
+ */
+export declare function get(obj: Record<string, any>, path: string): any;
+/**
+ * Logs a message to console
+ * @param {any} text - Message to log
+ */
+export declare function log(text: any): void;
+/**
+ * Logs an error message to console
+ * @param {any} text - Error message to log
+ */
+export 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
+ */
+export 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
+ */
+export declare function calculateDistance(x1: number, y1: number, x2: number, y2: number): number;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/engine/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAGzC;;;GAGG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;GAGG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAEnC;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1C;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAE7C;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,CAiBvD;AAyBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAEhD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAE9C;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAElD;AAED;;;;;;;GAOG;AACH,wBAAgB,GAAG,CACf,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACxB,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EACvB,KAAK,EAAE,GAAG,EACV,eAAe,UAAQ,GACxB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CA0BrB;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,CAY/D;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAEnC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAErC;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAC9B,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAC5D,IAAI,CAaN;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC7B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACX,MAAM,CAIR"}

package/dist/hooks/addContext.d.ts

@@ -0,0 +1,2 @@
+export declare const addContext: (element: any, key: any, value: any) => void;
+//# sourceMappingURL=addContext.d.ts.map

package/dist/hooks/addContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addContext.d.ts","sourceRoot":"","sources":["../../src/hooks/addContext.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,YAAO,EAAE,QAAG,EAAE,UAAK,SAK7C,CAAA"}

package/dist/hooks/useFocus.d.ts

@@ -0,0 +1,60 @@
+import { Signal } from '@signe/reactive';
+import { Element } from '../engine/reactive';
+/**
+ * Get the current focus index signal for a container
+ *
+ * Returns a reactive signal that updates when the focus index changes.
+ *
+ * @param containerId - Container identifier
+ * @returns Signal for current focus index, or null if container not found
+ *
+ * @example
+ * ```typescript
+ * const focusIndex = useFocusIndex('myContainer');
+ * effect(() => {
+ *   console.log('Current focus index:', focusIndex?.());
+ * });
+ * ```
+ */
+export declare function useFocusIndex(containerId: string): Signal<number | null> | null;
+/**
+ * Get the current focused element signal for a container
+ *
+ * Returns a reactive signal that updates when the focused element changes.
+ *
+ * @param containerId - Container identifier
+ * @returns Signal for current focused element, or null if container not found
+ *
+ * @example
+ * ```typescript
+ * const focusedElement = useFocusedElement('myContainer');
+ * effect(() => {
+ *   const element = focusedElement?.();
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export declare function useFocusedElement(containerId: string): Signal<Element | null> | null;
+/**
+ * Hook to react to focus changes
+ *
+ * Sets up a reactive effect that calls the callback whenever the focus changes.
+ *
+ * @param containerId - Container identifier
+ * @param callback - Function to call when focus changes
+ * @returns Cleanup function to unsubscribe
+ *
+ * @example
+ * ```typescript
+ * useFocusChange('myContainer', (index, element) => {
+ *   console.log('Focus changed to index', index);
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export declare function useFocusChange(containerId: string, callback: (index: number | null, element: Element | null) => void): () => void;
+//# sourceMappingURL=useFocus.d.ts.map

package/dist/hooks/useFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAI7C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAE/E;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAEpF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,GAChE,MAAM,IAAI,CAoBZ"}

package/dist/hooks/useProps.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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
+ */
+export 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"
+ */
+export declare const useDefineProps: (props: any) => (schema?: PropSchema) => any;
+export {};
+//# sourceMappingURL=useProps.d.ts.map

package/dist/hooks/useProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useProps.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GAAI,UAAK,EAAE,aAAa,KAAG,GAe/C,CAAA;AAED,KAAK,QAAQ,GAAG,iBAAiB,GAAG,iBAAiB,GAAG,kBAAkB,GAC1D,mBAAmB,GAAG,iBAAiB,GAAG,gBAAgB,GAC1D,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC;AAErD,UAAU,UAAU;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC;CACnD;AAED,KAAK,UAAU,GAAG;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAAG,UAAU,CAAC;CACrD,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,GAAG,MAC7B,SAAS,UAAU,QAyD9B,CAAA"}

package/dist/hooks/useRef.d.ts

@@ -0,0 +1,4 @@
+import { Element } from '../engine/reactive';
+import { ComponentInstance } from '../components/DisplayObject';
+export declare function useRef(element: Element<ComponentInstance>, ref: string): Element<ComponentInstance> | null;
+//# sourceMappingURL=useRef.d.ts.map

package/dist/hooks/useRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,wBAAgB,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAiB1G"}