@mulsense/xnew 0.1.9 → 0.1.10

package/README.md

@@ -1,46 +1,46 @@
-# xnew
-`xnew` is a JavaScript / TypeScript library for component-oriented programming,
-providing a flexible architecture well-suited for applications with dynamic scenes and games.
-
-[**Visit the xnew website**](https://mulsense.github.io/xnew)
-
-<div>
-    <img src="website/static/img/introduction.svg" width="500" alt="xnew introduction" />
-</div>
-
-## Setup
-
-### Via CDN
-Include the following script in your HTML file:
-```html
-<script src="https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.js"></script>
-```
-
-### Via CDN (ESM)
-Use the ES module version with an import map:
-```html
-<script type="importmap">
-{
-    "imports": {
-        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.mjs"
-    }
-}
-</script>
-
-<script type="module">
-import xnew from '@mulsense/xnew';
-
-// Your code here
-</script>
-```
-
-### Via npm
-Install `xnew` using npm:
-```bash
-npm install @mulsense/xnew@0.1.x
-```
-
-Then import it in your JavaScript file:
-```js
-import xnew from '@mulsense/xnew';
-```
+# xnew
+`xnew` is a JavaScript / TypeScript library for component-oriented programming,
+providing a flexible architecture well-suited for applications with dynamic scenes and games.
+
+[**Visit the xnew website**](https://mulsense.github.io/xnew)
+
+<div>
+    <img src="website/static/img/introduction.svg" width="500" alt="xnew introduction" />
+</div>
+
+## Setup
+
+### Via CDN
+Include the following script in your HTML file:
+```html
+<script src="https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.js"></script>
+```
+
+### Via CDN (ESM)
+Use the ES module version with an import map:
+```html
+<script type="importmap">
+{
+    "imports": {
+        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.mjs"
+    }
+}
+</script>
+
+<script type="module">
+import xnew from '@mulsense/xnew';
+
+// Your code here
+</script>
+```
+
+### Via npm
+Install `xnew` using npm:
+```bash
+npm install @mulsense/xnew@0.1.x
+```
+
+Then import it in your JavaScript file:
+```js
+import xnew from '@mulsense/xnew';
+```

package/dist/types/audio/loader.d.ts

@@ -1,12 +1,16 @@
+import { AudioNodeMap } from './audio';
 export declare function load(path: string): AudioFile;
 declare class AudioFile {
     data: any;
     startTime: number | null;
-    source: AudioBufferSourceNode;
-    amp: GainNode;
+    nodes: AudioNodeMap;
     constructor(path: string);
     isReady(): boolean;
     get promise(): Promise<void>;
+    set volume(value: number);
+    get volume(): number;
+    set loop(value: boolean);
+    get loop(): boolean;
     play(offset?: number): void;
     pause(): number | undefined;
 }

package/dist/types/basics/Event.d.ts

@@ -1,3 +1,4 @@
-import { xnew } from '../core/xnew';
-export declare function ResizeEvent(self: any): void;
-export declare function UserEvent(self: xnew.Unit): void;
+import { Unit } from '../core/unit';
+export declare function ResizeEvent(resize: Unit): void;
+export declare function KeyboardEvent(unit: Unit): void;
+export declare function PointerEvent(unit: Unit): void;

package/dist/types/basics/Touch.d.ts

@@ -8,14 +8,15 @@ export declare function TouchStick(self: xnew.Unit, { size, fill, fillOpacity, s
     strokeWidth?: number | undefined;
     strokeLinejoin?: string | undefined;
 }): void;
-export declare function TouchDPad(self: xnew.Unit, { size, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
-    size?: number | undefined;
-    fill?: string | undefined;
-    fillOpacity?: number | undefined;
-    stroke?: string | undefined;
-    strokeOpacity?: number | undefined;
-    strokeWidth?: number | undefined;
-    strokeLinejoin?: string | undefined;
+export declare function DirectionalPad(self: xnew.Unit, { size, diagonal, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
+    size?: number;
+    diagonal?: boolean;
+    fill?: string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinejoin?: string;
 }): void;
 export declare function TouchButton(self: xnew.Unit, { size, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
     size?: number | undefined;

package/dist/types/core/time.d.ts

@@ -6,15 +6,19 @@ export declare class Ticker {
 export declare class Timer {
     private timeout;
     private transition;
-    private delay;
+    private interval;
     private loop;
+    private easing;
     private id;
     private time;
     private offset;
     private status;
     private visibilitychange;
     private ticker;
-    constructor(timeout: Function, transition: Function | null, delay: number, loop?: boolean);
+    constructor(transition: Function | null, timeout: Function | null, interval?: number, { loop, easing }?: {
+        loop?: boolean;
+        easing?: string;
+    });
     clear(): void;
     elapsed(): number;
     start(): void;

package/dist/types/core/unit.d.ts

@@ -33,13 +33,6 @@ interface UnitInternal {
     defines: Record<string, any>;
     systems: Record<string, Function[]>;
 }
-export declare class UnitPromise {
-    private promise;
-    constructor(promise: Promise<any>);
-    then(callback: Function): UnitPromise;
-    catch(callback: Function): UnitPromise;
-    finally(callback: Function): UnitPromise;
-}
 export declare class Unit {
     [key: string]: any;
     _: UnitInternal;
@@ -77,4 +70,41 @@ export declare class Unit {
     static subon(unit: Unit, target: UnitElement | Window | Document, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     static suboff(unit: Unit, target: UnitElement | Window | Document | null, type?: string, listener?: Function): void;
 }
+export declare class UnitPromise {
+    private promise;
+    constructor(promise: Promise<any>);
+    then(callback: Function): UnitPromise;
+    catch(callback: Function): UnitPromise;
+    finally(callback: Function): UnitPromise;
+}
+export declare class UnitTimer {
+    private unit;
+    private stack;
+    constructor({ transition, timeout, interval, easing, loop }: {
+        transition?: Function;
+        timeout?: Function;
+        interval: number;
+        easing?: string;
+        loop?: boolean;
+    });
+    clear(): void;
+    timeout(timeout: Function, interval?: number): this;
+    transition(transition: Function, interval?: number, easing?: string): this;
+    static execute(timer: UnitTimer, { transition, timeout, interval, easing, loop }: {
+        transition?: Function;
+        timeout?: Function;
+        interval: number;
+        easing?: string;
+        loop?: boolean;
+    }): void;
+    static next(timer: UnitTimer): void;
+    static Component(unit: Unit, { snapshot, transition, timeout, interval, loop, easing }: {
+        snapshot: Snapshot;
+        transition?: Function;
+        timeout?: Function;
+        interval?: number;
+        loop?: boolean;
+        easing?: string;
+    }): void;
+}
 export {};

package/dist/types/core/xnew.d.ts

@@ -121,24 +121,24 @@ export declare const xnew: CreateUnit & {
     find(component: Function): Unit[];
     /**
      * Executes a callback once after a delay, managed by component lifecycle
-     * @param callback - Function to execute after delay
-     * @param delay - Delay in milliseconds
+     * @param timeout - Function to execute after Interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to cancel the timeout
      * @example
      * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
      * // Cancel if needed: timer.clear()
      */
-    timeout(callback: Function, delay?: number): any;
+    timeout(timeout: Function, interval?: number): any;
     /**
      * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-     * @param callback - Function to execute at each interval
-     * @param delay - Interval duration in milliseconds
+     * @param timeout - Function to execute at each interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to stop the interval
      * @example
      * const timer = xnew.interval(() => console.log('Tick'), 1000)
      * // Stop when needed: timer.clear()
      */
-    interval(callback: Function, delay: number): any;
+    interval(timeout: Function, interval: number): any;
     /**
      * Creates a transition animation with easing, executing callback with progress values
      * @param callback - Function called with progress value (0.0 to 1.0)
@@ -146,13 +146,13 @@ export declare const xnew: CreateUnit & {
      * @param easing - Easing function: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' (default: 'linear')
      * @returns Object with clear() and next() methods for controlling transitions
      * @example
-     * xnew.transition(progress => {
-     *   element.style.opacity = progress
-     * }, 500, 'ease-out').next(progress => {
-     *   element.style.transform = `scale(${progress})`
+     * xnew.transition(p => {
+     *   element.style.opacity = p
+     * }, 500, 'ease-out').transition(p => {
+     *   element.style.transform = `scale(${p})`
      * }, 300)
      */
-    transition(callback: Function, interval: number, easing?: string): any;
+    transition(transition: Function, interval?: number, easing?: string): any;
     /**
      * Creates an event listener manager for a target element with automatic cleanup
      * @param target - Element, Window, or Document to attach listeners to

package/dist/types/index.d.ts

@@ -1,13 +1,11 @@
 import { xnew as base } from './core/xnew';
 import { Unit } from './core/unit';
-import { ResizeEvent } from './basics/ResizeEvent';
-import { PointerEvent } from './basics/PointerEvent';
-import { KeyboardEvent } from './basics/KeyboardEvent';
+import { AccordionFrame, AccordionHeader, AccordionBullet, AccordionContent } from './basics/Accordion';
+import { ResizeEvent, PointerEvent, KeyboardEvent } from './basics/Event';
 import { Screen } from './basics/Screen';
 import { InputFrame } from './basics/Input';
 import { ModalFrame, ModalContent } from './basics/Modal';
 import { TabFrame, TabButton, TabContent } from './basics/Tab';
-import { AccordionFrame, AccordionHeader, AccordionBullet, AccordionContent } from './basics/Accordion';
 import { DragFrame, DragTarget } from './basics/Drag';
 import { AnalogStick, DirectionalPad } from './basics/Controller';
 import { audio } from './audio/audio';

package/dist/xnew.d.ts

@@ -59,13 +59,6 @@ interface UnitInternal {
     defines: Record<string, any>;
     systems: Record<string, Function[]>;
 }
-declare class UnitPromise {
-    private promise;
-    constructor(promise: Promise<any>);
-    then(callback: Function): UnitPromise;
-    catch(callback: Function): UnitPromise;
-    finally(callback: Function): UnitPromise;
-}
 declare class Unit {
     [key: string]: any;
     _: UnitInternal;
@@ -103,6 +96,13 @@ declare class Unit {
     static subon(unit: Unit, target: UnitElement | Window | Document, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     static suboff(unit: Unit, target: UnitElement | Window | Document | null, type?: string, listener?: Function): void;
 }
+declare class UnitPromise {
+    private promise;
+    constructor(promise: Promise<any>);
+    then(callback: Function): UnitPromise;
+    catch(callback: Function): UnitPromise;
+    finally(callback: Function): UnitPromise;
+}
 
 interface CreateUnit {
     /**
@@ -226,24 +226,24 @@ declare const xnew$1: CreateUnit & {
     find(component: Function): Unit[];
     /**
      * Executes a callback once after a delay, managed by component lifecycle
-     * @param callback - Function to execute after delay
-     * @param delay - Delay in milliseconds
+     * @param timeout - Function to execute after Interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to cancel the timeout
      * @example
      * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
      * // Cancel if needed: timer.clear()
      */
-    timeout(callback: Function, delay?: number): any;
+    timeout(timeout: Function, interval?: number): any;
     /**
      * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-     * @param callback - Function to execute at each interval
-     * @param delay - Interval duration in milliseconds
+     * @param timeout - Function to execute at each interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to stop the interval
      * @example
      * const timer = xnew.interval(() => console.log('Tick'), 1000)
      * // Stop when needed: timer.clear()
      */
-    interval(callback: Function, delay: number): any;
+    interval(timeout: Function, interval: number): any;
     /**
      * Creates a transition animation with easing, executing callback with progress values
      * @param callback - Function called with progress value (0.0 to 1.0)
@@ -251,13 +251,13 @@ declare const xnew$1: CreateUnit & {
      * @param easing - Easing function: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' (default: 'linear')
      * @returns Object with clear() and next() methods for controlling transitions
      * @example
-     * xnew.transition(progress => {
-     *   element.style.opacity = progress
-     * }, 500, 'ease-out').next(progress => {
-     *   element.style.transform = `scale(${progress})`
+     * xnew.transition(p => {
+     *   element.style.opacity = p
+     * }, 500, 'ease-out').transition(p => {
+     *   element.style.transform = `scale(${p})`
      * }, 300)
      */
-    transition(callback: Function, interval: number, easing?: string): any;
+    transition(transition: Function, interval?: number, easing?: string): any;
     /**
      * Creates an event listener manager for a target element with automatic cleanup
      * @param target - Element, Window, or Document to attach listeners to
@@ -283,11 +283,29 @@ declare const xnew$1: CreateUnit & {
     capture(execute: (unit: Unit) => boolean | void): void;
 };
 
-declare function ResizeEvent(resize: Unit): void;
-
-declare function PointerEvent(unit: Unit): void;
+declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
+    open?: boolean;
+    duration?: number;
+    easing?: string;
+}): {
+    toggle(): void;
+    open(): void;
+    close(): void;
+};
+declare function AccordionHeader(header: Unit, {}?: {}): void;
+declare function AccordionBullet(bullet: Unit, { type }?: {
+    type?: string;
+}): void;
+declare function AccordionContent(content: Unit, {}?: {}): {
+    transition({ element, rate }: {
+        element: HTMLElement;
+        rate: number;
+    }): void;
+};
 
+declare function ResizeEvent(resize: Unit): void;
 declare function KeyboardEvent(unit: Unit): void;
+declare function PointerEvent(unit: Unit): void;
 
 declare function Screen(screen: Unit, { width, height, fit }?: {
     width?: number | undefined;
@@ -339,26 +357,6 @@ declare function TabContent(content: Unit, { key }?: {
     }): void;
 };
 
-declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
-    open?: boolean;
-    duration?: number;
-    easing?: string;
-}): {
-    toggle(): void;
-    open(): void;
-    close(): void;
-};
-declare function AccordionHeader(header: Unit, {}?: {}): void;
-declare function AccordionBullet(bullet: Unit, { type }?: {
-    type?: string;
-}): void;
-declare function AccordionContent(content: Unit, {}?: {}): {
-    transition({ element, rate }: {
-        element: HTMLElement;
-        rate: number;
-    }): void;
-};
-
 declare function DragFrame(frame: Unit, { x, y }?: {
     x?: number;
     y?: number;