@mulsense/xnew 0.4.0 → 0.4.1

package/dist/addons/xmatter.js

@@ -21,9 +21,6 @@
         const root = {};
         xnew.context('xmatter.root', root);
         root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
-        unit.on('process', () => {
-            Matter.Engine.update(root.engine);
-        });
     }
 
     return xmatter;

package/dist/addons/xmatter.mjs

@@ -18,9 +18,6 @@ function Root(unit, { engine }) {
     const root = {};
     xnew.context('xmatter.root', root);
     root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
-    unit.on('process', () => {
-        Matter.Engine.update(root.engine);
-    });
 }
 
 export { xmatter as default };

package/dist/addons/xpixi.d.ts

@@ -1,9 +1,10 @@
-import * as PIXI from 'pixi.js';
-
 declare const _default: {
-    initialize({ renderer, canvas }?: any): void;
+    initialize({ renderer, canvas }?: {
+        renderer?: any;
+        canvas?: HTMLCanvasElement | null;
+        update?: boolean;
+    }): void;
     nest(object: any): any;
-    sync(canvas: any): PIXI.Texture<PIXI.TextureSource<any>>;
     readonly renderer: any;
     readonly scene: any;
     readonly canvas: any;

package/dist/addons/xpixi.js

@@ -24,8 +24,8 @@
     var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
 
     var xpixi = {
-        initialize({ renderer = null, canvas = null } = {}) {
-            xnew.extend(Root, { renderer, canvas });
+        initialize({ renderer = null, canvas = null, update = true } = {}) {
+            xnew.extend(Root, { renderer, canvas, update });
         },
         nest(object) {
             xnew.extend(Nest, { object });
@@ -51,7 +51,7 @@
             return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
         },
     };
-    function Root(unit, { canvas }) {
+    function Root(unit, { canvas, update }) {
         const root = {};
         xnew.context('xpixi.root', root);
         root.canvas = canvas;
@@ -63,14 +63,14 @@
         root.updates = [];
         root.scene = new PIXI__namespace.Container();
         xnew.context('xpixi.object', root.scene);
-        unit.on('update', () => {
-            root.updates.forEach((update) => {
-                update();
-            });
-            if (root.renderer && root.scene) {
+        if (update === true) {
+            unit.on('update', () => {
+                root.updates.forEach((update) => {
+                    update();
+                });
                 root.renderer.render(root.scene);
-            }
-        });
+            });
+        }
     }
     function Nest(unit, { object }) {
         const parent = xnew.context('xpixi.object');

package/dist/addons/xpixi.mjs

@@ -2,8 +2,8 @@ import xnew from '@mulsense/xnew';
 import * as PIXI from 'pixi.js';
 
 var xpixi = {
-    initialize({ renderer = null, canvas = null } = {}) {
-        xnew.extend(Root, { renderer, canvas });
+    initialize({ renderer = null, canvas = null, update = true } = {}) {
+        xnew.extend(Root, { renderer, canvas, update });
     },
     nest(object) {
         xnew.extend(Nest, { object });
@@ -29,7 +29,7 @@ var xpixi = {
         return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
     },
 };
-function Root(unit, { canvas }) {
+function Root(unit, { canvas, update }) {
     const root = {};
     xnew.context('xpixi.root', root);
     root.canvas = canvas;
@@ -41,14 +41,14 @@ function Root(unit, { canvas }) {
     root.updates = [];
     root.scene = new PIXI.Container();
     xnew.context('xpixi.object', root.scene);
-    unit.on('update', () => {
-        root.updates.forEach((update) => {
-            update();
-        });
-        if (root.renderer && root.scene) {
+    if (update === true) {
+        unit.on('update', () => {
+            root.updates.forEach((update) => {
+                update();
+            });
             root.renderer.render(root.scene);
-        }
-    });
+        });
+    }
 }
 function Nest(unit, { object }) {
     const parent = xnew.context('xpixi.object');

package/dist/addons/xrapier2d.js

@@ -13,15 +13,12 @@
             return (_a = xnew.context('xrapier2d.root')) === null || _a === void 0 ? void 0 : _a.world;
         },
     };
-    function Root(self, { gravity }) {
+    function Root(unit, { gravity }) {
         const root = {};
         xnew.context('xrapier2d.root', root);
         xnew.promise(RAPIER.init()).then(() => {
             root.world = new RAPIER.World(gravity);
         });
-        self.on('process', () => {
-            root.world.step();
-        });
     }
 
     return xrapier2d;

package/dist/addons/xrapier2d.mjs

@@ -10,15 +10,12 @@ var xrapier2d = {
         return (_a = xnew.context('xrapier2d.root')) === null || _a === void 0 ? void 0 : _a.world;
     },
 };
-function Root(self, { gravity }) {
+function Root(unit, { gravity }) {
     const root = {};
     xnew.context('xrapier2d.root', root);
     xnew.promise(RAPIER.init()).then(() => {
         root.world = new RAPIER.World(gravity);
     });
-    self.on('process', () => {
-        root.world.step();
-    });
 }
 
 export { xrapier2d as default };

package/dist/addons/xrapier3d.js

@@ -13,15 +13,12 @@
             return (_a = xnew.context('xrapier3d.root')) === null || _a === void 0 ? void 0 : _a.world;
         },
     };
-    function Root(self, { gravity }) {
+    function Root(unit, { gravity }) {
         const root = {};
         xnew.context('xrapier3d.root', root);
         xnew.promise(RAPIER.init()).then(() => {
             root.world = new RAPIER.World(gravity);
         });
-        self.on('process', () => {
-            root.world.step();
-        });
     }
 
     return xrapier3d;

package/dist/addons/xrapier3d.mjs

@@ -10,15 +10,12 @@ var xrapier3d = {
         return (_a = xnew.context('xrapier3d.root')) === null || _a === void 0 ? void 0 : _a.world;
     },
 };
-function Root(self, { gravity }) {
+function Root(unit, { gravity }) {
     const root = {};
     xnew.context('xrapier3d.root', root);
     xnew.promise(RAPIER.init()).then(() => {
         root.world = new RAPIER.World(gravity);
     });
-    self.on('process', () => {
-        root.world.step();
-    });
 }
 
 export { xrapier3d as default };

package/dist/addons/xthree.d.ts

@@ -1,5 +1,12 @@
+import * as THREE from 'three';
+
 declare const _default: {
-    initialize({ renderer, canvas, camera }?: any): void;
+    initialize({ renderer, canvas, camera, update }?: {
+        renderer?: any;
+        canvas?: HTMLCanvasElement | null;
+        camera?: THREE.Camera | null;
+        update?: boolean;
+    }): void;
     nest(object: any): any;
     readonly renderer: any;
     readonly camera: any;

package/dist/addons/xthree.js

@@ -24,8 +24,8 @@
     var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
     var xthree = {
-        initialize({ renderer = null, canvas = null, camera = null } = {}) {
-            xnew.extend(Root, { renderer, canvas, camera });
+        initialize({ renderer = null, canvas = null, camera = null, update = true } = {}) {
+            xnew.extend(Root, { renderer, canvas, camera, update });
         },
         nest(object) {
             xnew.extend(Nest, { object });
@@ -46,9 +46,9 @@
         get canvas() {
             var _a;
             return (_a = xnew.context('xthree.root')) === null || _a === void 0 ? void 0 : _a.canvas;
-        }
+        },
     };
-    function Root(unit, { canvas, camera }) {
+    function Root(unit, { canvas, camera, update }) {
         const root = {};
         xnew.context('xthree.root', root);
         root.canvas = canvas;
@@ -57,9 +57,11 @@
         root.camera = camera !== null && camera !== void 0 ? camera : new THREE__namespace.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
         root.scene = new THREE__namespace.Scene();
         xnew.context('xthree.object', root.scene);
-        unit.on('update', () => {
-            root.renderer.render(root.scene, root.camera);
-        });
+        if (update === true) {
+            unit.on('update', () => {
+                root.renderer.render(root.scene, root.camera);
+            });
+        }
     }
     function Nest(unit, { object }) {
         const parent = xnew.context('xthree.object');

package/dist/addons/xthree.mjs

@@ -2,8 +2,8 @@ import xnew from '@mulsense/xnew';
 import * as THREE from 'three';
 
 var xthree = {
-    initialize({ renderer = null, canvas = null, camera = null } = {}) {
-        xnew.extend(Root, { renderer, canvas, camera });
+    initialize({ renderer = null, canvas = null, camera = null, update = true } = {}) {
+        xnew.extend(Root, { renderer, canvas, camera, update });
     },
     nest(object) {
         xnew.extend(Nest, { object });
@@ -24,9 +24,9 @@ var xthree = {
     get canvas() {
         var _a;
         return (_a = xnew.context('xthree.root')) === null || _a === void 0 ? void 0 : _a.canvas;
-    }
+    },
 };
-function Root(unit, { canvas, camera }) {
+function Root(unit, { canvas, camera, update }) {
     const root = {};
     xnew.context('xthree.root', root);
     root.canvas = canvas;
@@ -35,9 +35,11 @@ function Root(unit, { canvas, camera }) {
     root.camera = camera !== null && camera !== void 0 ? camera : new THREE.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
     root.scene = new THREE.Scene();
     xnew.context('xthree.object', root.scene);
-    unit.on('update', () => {
-        root.renderer.render(root.scene, root.camera);
-    });
+    if (update === true) {
+        unit.on('update', () => {
+            root.renderer.render(root.scene, root.camera);
+        });
+    }
 }
 function Nest(unit, { object }) {
     const parent = xnew.context('xthree.object');

package/dist/xnew.d.ts

@@ -20,12 +20,6 @@ declare class MapMap<Key1, Key2, Value> extends Map<Key1, Map<Key2, Value>> {
     delete(key1: Key1, key2: Key2): boolean;
 }
 
-declare class Ticker {
-    private id;
-    constructor(callback: Function, fps?: number);
-    clear(): void;
-}
-
 type UnitElement = HTMLElement | SVGElement;
 
 interface EventProps {
@@ -65,6 +59,7 @@ interface Snapshot {
     unit: Unit;
     context: Context;
     element: UnitElement;
+    component: Function | null;
 }
 interface Internal {
     parent: Unit | null;
@@ -87,10 +82,14 @@ interface Internal {
     components: Function[];
     listeners: MapMap<string, Function, {
         element: UnitElement;
+        component: Function | null;
         execute: Function;
     }>;
     defines: Record<string, any>;
-    systems: Record<string, Function[]>;
+    systems: Record<string, {
+        listener: Function;
+        execute: Function;
+    }[]>;
     eventManager: EventManager;
 }
 declare class Unit {
@@ -105,16 +104,16 @@ declare class Unit {
     static initialize(unit: Unit, anchor: UnitElement | null): void;
     static finalize(unit: Unit): void;
     static nest(unit: Unit, tag: string): UnitElement;
+    static currentComponent: Function;
     static extend(unit: Unit, component: Function, props?: Object): {
         [key: string]: any;
     };
     static start(unit: Unit): void;
     static stop(unit: Unit): void;
     static update(unit: Unit): void;
-    static process(unit: Unit): void;
-    static root: Unit;
-    static current: Unit;
-    static ticker: Ticker;
+    static render(unit: Unit): void;
+    static rootUnit: Unit;
+    static currentUnit: Unit;
     static reset(): void;
     static wrap(unit: Unit, listener: Function): (...args: any[]) => any;
     static scope(snapshot: Snapshot, func: Function, ...args: any[]): any;
@@ -125,6 +124,8 @@ declare class Unit {
     static type2units: MapSet<string, Unit>;
     on(type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     off(type?: string, listener?: Function): void;
+    static on(unit: Unit, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
+    static off(unit: Unit, type: string, listener?: Function): void;
     static emit(type: string, ...args: any[]): void;
 }
 declare class UnitPromise {
@@ -294,11 +295,11 @@ declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
     open(): void;
     close(): void;
 };
-declare function AccordionHeader(header: Unit, {}?: {}): void;
-declare function AccordionBullet(bullet: Unit, { type }?: {
+declare function AccordionHeader(unit: Unit, {}?: {}): void;
+declare function AccordionBullet(unit: Unit, { type }?: {
     type?: string;
 }): void;
-declare function AccordionContent(content: Unit, {}?: {}): {
+declare function AccordionContent(unit: Unit, {}?: {}): {
     transition({ element, rate }: {
         element: HTMLElement;
         rate: number;

package/dist/xnew.js

@@ -104,7 +104,7 @@
     //----------------------------------------------------------------------------------------------------
     // ticker
     //----------------------------------------------------------------------------------------------------
-    class Ticker {
+    class AnimationTicker {
         constructor(callback, fps = 60) {
             const self = this;
             this.id = null;
@@ -135,7 +135,7 @@
             this.counter = 0;
             this.offset = 0.0;
             this.status = 0;
-            this.ticker = new Ticker((time) => {
+            this.ticker = new AnimationTicker((time) => {
                 var _a, _b;
                 let p = Math.min(this.elapsed() / this.options.duration, 1.0);
                 if (this.options.easing === 'ease-out') {
@@ -206,7 +206,7 @@
         }
     }
 
-    const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
 
     class EventManager {
         constructor() {
@@ -272,12 +272,12 @@
             };
         }
         resize(props) {
-            const observer = new ResizeObserver(xnew$1.scope((entries) => {
+            const observer = new ResizeObserver((entries) => {
                 for (const entry of entries) {
                     props.listener({ type: 'resize' });
                     break;
                 }
-            }));
+            });
             observer.observe(props.element);
             return () => {
                 observer.unobserve(props.element);
@@ -416,7 +416,7 @@
             const element = props.element;
             const options = props.options;
             const dragstart = ({ event, position }) => {
-                map.set(event.pointerId, Object.assign({}, position));
+                map.set(event.pointerId, position);
                 isActive = map.size === 2 ? true : false;
                 if (isActive === true && props.type === 'gesturestart') {
                     props.listener({ event, type: props.type });
@@ -452,11 +452,11 @@
                 map.set(event.pointerId, position);
             };
             const dragend = ({ event }) => {
-                if (isActive === true) {
+                map.delete(event.pointerId);
+                if (isActive === true && props.type === 'gestureend') {
                     props.listener({ event, type: props.type, scale: 1.0 });
                 }
                 isActive = false;
-                map.delete(event.pointerId);
             };
             this.add({ element, options, type: 'dragstart', listener: dragstart });
             this.add({ element, options, type: 'dragmove', listener: dragmove });
@@ -598,8 +598,8 @@
         }
         static initialize(unit, anchor) {
             var _a, _b;
-            const backup = Unit.current;
-            Unit.current = unit;
+            const backup = Unit.currentUnit;
+            Unit.currentUnit = unit;
             unit._ = Object.assign(unit._, {
                 currentElement: unit._.baseElement,
                 currentContext: unit._.baseContext,
@@ -615,7 +615,7 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], process: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], update: [], render: [], stop: [], finalize: [] },
                 eventManager: new EventManager(),
             });
             // nest html element
@@ -626,13 +626,13 @@
             Unit.extend(unit, unit._.baseComponent, unit._.props);
             // whether the unit promise was resolved
             Promise.all(unit._.promises.map(p => p.promise)).then(() => unit._.state = 'initialized');
-            Unit.current = backup;
+            Unit.currentUnit = backup;
         }
         static finalize(unit) {
             if (unit._.state !== 'finalized' && unit._.state !== 'finalizing') {
                 unit._.state = 'finalizing';
                 unit._.children.forEach((child) => child.finalize());
-                unit._.systems.finalize.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.finalize.forEach(({ execute }) => execute());
                 unit.off();
                 unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
                 if (unit._.elements.length > 0) {
@@ -712,7 +712,7 @@
             if (unit._.state === 'initialized' || unit._.state === 'stopped') {
                 unit._.state = 'started';
                 unit._.children.forEach((child) => Unit.start(child));
-                unit._.systems.start.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.start.forEach(({ execute }) => execute());
             }
             else if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.start(child));
@@ -722,31 +722,31 @@
             if (unit._.state === 'started') {
                 unit._.state = 'stopped';
                 unit._.children.forEach((child) => Unit.stop(child));
-                unit._.systems.stop.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.stop.forEach(({ execute }) => execute());
             }
         }
         static update(unit) {
-            if (unit._.state === 'started' || unit._.state === 'stopped') {
+            if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.update(child));
-                unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.update.forEach(({ execute }) => execute());
             }
         }
-        static process(unit) {
-            if (unit._.state === 'started') {
-                unit._.children.forEach((child) => Unit.process(child));
-                unit._.systems.process.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+        static render(unit) {
+            if (unit._.state === 'started' || unit._.state === 'started' || unit._.state === 'stopped') {
+                unit._.children.forEach((child) => Unit.render(child));
+                unit._.systems.render.forEach(({ execute }) => execute());
             }
         }
         static reset() {
-            var _a, _b;
-            (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
-            Unit.current = Unit.root = new Unit(null, null);
-            (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
-            Unit.ticker = new Ticker(() => {
-                Unit.start(Unit.root);
-                Unit.process(Unit.root);
-                Unit.update(Unit.root);
+            var _a;
+            (_a = Unit.rootUnit) === null || _a === void 0 ? void 0 : _a.finalize();
+            Unit.currentUnit = Unit.rootUnit = new Unit(null, null);
+            const ticker = new AnimationTicker(() => {
+                Unit.start(Unit.rootUnit);
+                Unit.update(Unit.rootUnit);
+                Unit.render(Unit.rootUnit);
             });
+            Unit.rootUnit.on('finalize', () => ticker.clear());
         }
         static wrap(unit, listener) {
             const snapshot = Unit.snapshot(unit);
@@ -756,25 +756,27 @@
             if (snapshot.unit._.state === 'finalized') {
                 return;
             }
-            const current = Unit.current;
+            const currentUnit = Unit.currentUnit;
             const backup = Unit.snapshot(snapshot.unit);
             try {
-                Unit.current = snapshot.unit;
+                Unit.currentUnit = snapshot.unit;
                 snapshot.unit._.currentContext = snapshot.context;
                 snapshot.unit._.currentElement = snapshot.element;
+                snapshot.unit._.currentComponent = snapshot.component;
                 return func(...args);
             }
             catch (error) {
                 throw error;
             }
             finally {
-                Unit.current = current;
+                Unit.currentUnit = currentUnit;
                 snapshot.unit._.currentContext = backup.context;
                 snapshot.unit._.currentElement = backup.element;
+                snapshot.unit._.currentComponent = backup.component;
             }
         }
         static snapshot(unit) {
-            return { unit, context: unit._.currentContext, element: unit._.currentElement };
+            return { unit, context: unit._.currentContext, element: unit._.currentElement, component: unit._.currentComponent };
         }
         static context(unit, key, value) {
             if (value !== undefined) {
@@ -792,43 +794,47 @@
             return [...((_a = Unit.component2units.get(component)) !== null && _a !== void 0 ? _a : [])];
         }
         on(type, listener, options) {
-            type.trim().split(/\s+/).forEach((type) => {
-                if (SYSTEM_EVENTS.includes(type)) {
-                    this._.systems[type].push(listener);
-                }
-                if (this._.listeners.has(type, listener) === false) {
-                    const execute = Unit.wrap(Unit.current, listener);
-                    this._.listeners.set(type, listener, { element: this.element, execute });
-                    Unit.type2units.add(type, this);
-                    if (/^[A-Za-z]/.test(type)) {
-                        this._.eventManager.add({ element: this.element, type, listener: execute, options });
-                    }
-                }
-            });
+            const types = type.trim().split(/\s+/);
+            types.forEach((type) => Unit.on(this, type, listener, options));
         }
         off(type, listener) {
             const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
-            types.forEach((type) => {
-                if (SYSTEM_EVENTS.includes(type)) {
-                    this._.systems[type] = this._.systems[type].filter((lis) => listener ? lis !== listener : false);
+            types.forEach((type) => Unit.off(this, type, listener));
+        }
+        static on(unit, type, listener, options) {
+            if (SYSTEM_EVENTS.includes(type)) {
+                const execute = Unit.wrap(Unit.currentUnit, listener);
+                unit._.systems[type].push({ listener, execute });
+            }
+            if (unit._.listeners.has(type, listener) === false) {
+                const execute = Unit.wrap(Unit.currentUnit, listener);
+                unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
+                Unit.type2units.add(type, unit);
+                if (/^[A-Za-z]/.test(type)) {
+                    unit._.eventManager.add({ element: unit.element, type, listener: execute, options });
                 }
-                (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((listener) => {
-                    const item = this._.listeners.get(type, listener);
-                    if (item === undefined)
-                        return;
-                    this._.listeners.delete(type, listener);
-                    if (/^[A-Za-z]/.test(type)) {
-                        this._.eventManager.remove({ type, listener: item.execute });
-                    }
-                });
-                if (this._.listeners.has(type) === false) {
-                    Unit.type2units.delete(type, this);
+            }
+        }
+        static off(unit, type, listener) {
+            if (SYSTEM_EVENTS.includes(type)) {
+                unit._.systems[type] = unit._.systems[type].filter(({ listener: lis }) => listener ? lis !== listener : false);
+            }
+            (listener ? [listener] : [...unit._.listeners.keys(type)]).forEach((listener) => {
+                const item = unit._.listeners.get(type, listener);
+                if (item === undefined)
+                    return;
+                unit._.listeners.delete(type, listener);
+                if (/^[A-Za-z]/.test(type)) {
+                    unit._.eventManager.remove({ type, listener: item.execute });
                 }
             });
+            if (unit._.listeners.has(type) === false) {
+                Unit.type2units.delete(type, unit);
+            }
         }
         static emit(type, ...args) {
             var _a, _b;
-            const current = Unit.current;
+            const current = Unit.currentUnit;
             if (type[0] === '+') {
                 (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
@@ -843,6 +849,7 @@
             }
         }
     }
+    Unit.currentComponent = () => { };
     Unit.component2units = new MapSet();
     //----------------------------------------------------------------------------------------------------
     // event
@@ -857,15 +864,15 @@
             this.component = component;
         }
         then(callback) {
-            this.promise = this.promise.then(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.then(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
         catch(callback) {
-            this.promise = this.promise.catch(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.catch(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
         finally(callback) {
-            this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.finally(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
     }
@@ -875,7 +882,7 @@
     class UnitTimer {
         constructor(options) {
             this.stack = [];
-            this.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            this.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
         }
         clear() {
             this.stack = [];
@@ -895,19 +902,19 @@
         }
         static execute(timer, options) {
             if (timer.unit._.state === 'finalized') {
-                timer.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
             }
             else if (timer.stack.length === 0) {
-                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
                 timer.unit.on('finalize', () => { UnitTimer.next(timer); });
             }
             else {
-                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
             }
         }
         static next(timer) {
             if (timer.stack.length > 0) {
-                timer.unit = new Unit(Unit.current, UnitTimer.Component, timer.stack.shift());
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, timer.stack.shift());
                 timer.unit.on('finalize', () => { UnitTimer.next(timer); });
             }
         }
@@ -934,10 +941,10 @@
     }
 
     const xnew$1 = Object.assign(function (...args) {
-        if (Unit.root === undefined) {
+        if (Unit.rootUnit === undefined) {
             Unit.reset();
         }
-        return new Unit(Unit.current, ...args);
+        return new Unit(Unit.currentUnit, ...args);
     }, {
         /**
          * Creates a nested HTML/SVG element within the current component
@@ -950,7 +957,7 @@
          */
         nest(tag) {
             try {
-                return Unit.nest(Unit.current, tag);
+                return Unit.nest(Unit.currentUnit, tag);
             }
             catch (error) {
                 console.error('xnew.nest(tag: string): ', error);
@@ -968,7 +975,7 @@
          */
         extend(component, props) {
             try {
-                return Unit.extend(Unit.current, component, props);
+                return Unit.extend(Unit.currentUnit, component, props);
             }
             catch (error) {
                 console.error('xnew.extend(component: Function, props?: Object): ', error);
@@ -989,7 +996,7 @@
          */
         context(key, value = undefined) {
             try {
-                return Unit.context(Unit.current, key, value);
+                return Unit.context(Unit.currentUnit, key, value);
             }
             catch (error) {
                 console.error('xnew.context(key: string, value?: any): ', error);
@@ -1005,9 +1012,9 @@
          */
         promise(promise) {
             try {
-                const component = Unit.current._.currentComponent;
-                Unit.current._.promises.push(new UnitPromise(promise, component));
-                return Unit.current._.promises[Unit.current._.promises.length - 1];
+                const component = Unit.currentUnit._.currentComponent;
+                Unit.currentUnit._.promises.push(new UnitPromise(promise, component));
+                return Unit.currentUnit._.promises[Unit.currentUnit._.promises.length - 1];
             }
             catch (error) {
                 console.error('xnew.promise(promise: Promise<any>): ', error);
@@ -1023,8 +1030,8 @@
          */
         then(callback) {
             try {
-                const component = Unit.current._.currentComponent;
-                const promises = Unit.current._.promises;
+                const component = Unit.currentUnit._.currentComponent;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .then((results) => {
                     callback(results.filter((_result, index) => promises[index].component !== null && promises[index].component === component));
@@ -1044,7 +1051,7 @@
          */
         catch(callback) {
             try {
-                const promises = Unit.current._.promises;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .catch(callback);
             }
@@ -1062,7 +1069,7 @@
          */
         finally(callback) {
             try {
-                const promises = Unit.current._.promises;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .finally(callback);
             }
@@ -1081,7 +1088,7 @@
          * }), 1000)
          */
         scope(callback) {
-            const snapshot = Unit.snapshot(Unit.current);
+            const snapshot = Unit.snapshot(Unit.currentUnit);
             return (...args) => Unit.scope(snapshot, callback, ...args);
         },
         /**
@@ -1152,7 +1159,7 @@
             return new UnitTimer({ transition, duration, easing, iterations: 1 });
         },
         protect() {
-            Unit.current._.protected = true;
+            Unit.currentUnit._.protected = true;
         }
     });
 
@@ -1187,12 +1194,12 @@
             }
         };
     }
-    function AccordionHeader(header, {} = {}) {
+    function AccordionHeader(unit, {} = {}) {
         const internal = xnew$1.context('xnew.accordionframe');
         xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
-        header.on('click', () => internal.frame.toggle());
+        unit.on('click', () => internal.frame.toggle());
     }
-    function AccordionBullet(bullet, { type = 'arrow' } = {}) {
+    function AccordionBullet(unit, { type = 'arrow' } = {}) {
         const internal = xnew$1.context('xnew.accordionframe');
         xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
         if (type === 'arrow') {
@@ -1213,12 +1220,12 @@
             });
         }
     }
-    function AccordionContent(content, {} = {}) {
+    function AccordionContent(unit, {} = {}) {
         const internal = xnew$1.context('xnew.accordionframe');
         xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
         xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
         internal.on('-transition', ({ rate }) => {
-            content.transition({ element: content.element, rate });
+            unit.transition({ element: unit.element, rate });
         });
         return {
             transition({ element, rate }) {

package/dist/xnew.mjs

@@ -98,7 +98,7 @@ class MapMap extends Map {
 //----------------------------------------------------------------------------------------------------
 // ticker
 //----------------------------------------------------------------------------------------------------
-class Ticker {
+class AnimationTicker {
     constructor(callback, fps = 60) {
         const self = this;
         this.id = null;
@@ -129,7 +129,7 @@ class Timer {
         this.counter = 0;
         this.offset = 0.0;
         this.status = 0;
-        this.ticker = new Ticker((time) => {
+        this.ticker = new AnimationTicker((time) => {
             var _a, _b;
             let p = Math.min(this.elapsed() / this.options.duration, 1.0);
             if (this.options.easing === 'ease-out') {
@@ -200,7 +200,7 @@ class Timer {
     }
 }
 
-const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
+const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
 
 class EventManager {
     constructor() {
@@ -266,12 +266,12 @@ class EventManager {
         };
     }
     resize(props) {
-        const observer = new ResizeObserver(xnew$1.scope((entries) => {
+        const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 props.listener({ type: 'resize' });
                 break;
             }
-        }));
+        });
         observer.observe(props.element);
         return () => {
             observer.unobserve(props.element);
@@ -410,7 +410,7 @@ class EventManager {
         const element = props.element;
         const options = props.options;
         const dragstart = ({ event, position }) => {
-            map.set(event.pointerId, Object.assign({}, position));
+            map.set(event.pointerId, position);
             isActive = map.size === 2 ? true : false;
             if (isActive === true && props.type === 'gesturestart') {
                 props.listener({ event, type: props.type });
@@ -446,11 +446,11 @@ class EventManager {
             map.set(event.pointerId, position);
         };
         const dragend = ({ event }) => {
-            if (isActive === true) {
+            map.delete(event.pointerId);
+            if (isActive === true && props.type === 'gestureend') {
                 props.listener({ event, type: props.type, scale: 1.0 });
             }
             isActive = false;
-            map.delete(event.pointerId);
         };
         this.add({ element, options, type: 'dragstart', listener: dragstart });
         this.add({ element, options, type: 'dragmove', listener: dragmove });
@@ -592,8 +592,8 @@ class Unit {
     }
     static initialize(unit, anchor) {
         var _a, _b;
-        const backup = Unit.current;
-        Unit.current = unit;
+        const backup = Unit.currentUnit;
+        Unit.currentUnit = unit;
         unit._ = Object.assign(unit._, {
             currentElement: unit._.baseElement,
             currentContext: unit._.baseContext,
@@ -609,7 +609,7 @@ class Unit {
             components: [],
             listeners: new MapMap(),
             defines: {},
-            systems: { start: [], process: [], update: [], stop: [], finalize: [] },
+            systems: { start: [], update: [], render: [], stop: [], finalize: [] },
             eventManager: new EventManager(),
         });
         // nest html element
@@ -620,13 +620,13 @@ class Unit {
         Unit.extend(unit, unit._.baseComponent, unit._.props);
         // whether the unit promise was resolved
         Promise.all(unit._.promises.map(p => p.promise)).then(() => unit._.state = 'initialized');
-        Unit.current = backup;
+        Unit.currentUnit = backup;
     }
     static finalize(unit) {
         if (unit._.state !== 'finalized' && unit._.state !== 'finalizing') {
             unit._.state = 'finalizing';
             unit._.children.forEach((child) => child.finalize());
-            unit._.systems.finalize.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems.finalize.forEach(({ execute }) => execute());
             unit.off();
             unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
             if (unit._.elements.length > 0) {
@@ -706,7 +706,7 @@ class Unit {
         if (unit._.state === 'initialized' || unit._.state === 'stopped') {
             unit._.state = 'started';
             unit._.children.forEach((child) => Unit.start(child));
-            unit._.systems.start.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems.start.forEach(({ execute }) => execute());
         }
         else if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.start(child));
@@ -716,31 +716,31 @@ class Unit {
         if (unit._.state === 'started') {
             unit._.state = 'stopped';
             unit._.children.forEach((child) => Unit.stop(child));
-            unit._.systems.stop.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems.stop.forEach(({ execute }) => execute());
         }
     }
     static update(unit) {
-        if (unit._.state === 'started' || unit._.state === 'stopped') {
+        if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.update(child));
-            unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems.update.forEach(({ execute }) => execute());
         }
     }
-    static process(unit) {
-        if (unit._.state === 'started') {
-            unit._.children.forEach((child) => Unit.process(child));
-            unit._.systems.process.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+    static render(unit) {
+        if (unit._.state === 'started' || unit._.state === 'started' || unit._.state === 'stopped') {
+            unit._.children.forEach((child) => Unit.render(child));
+            unit._.systems.render.forEach(({ execute }) => execute());
         }
     }
     static reset() {
-        var _a, _b;
-        (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
-        Unit.current = Unit.root = new Unit(null, null);
-        (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
-        Unit.ticker = new Ticker(() => {
-            Unit.start(Unit.root);
-            Unit.process(Unit.root);
-            Unit.update(Unit.root);
+        var _a;
+        (_a = Unit.rootUnit) === null || _a === void 0 ? void 0 : _a.finalize();
+        Unit.currentUnit = Unit.rootUnit = new Unit(null, null);
+        const ticker = new AnimationTicker(() => {
+            Unit.start(Unit.rootUnit);
+            Unit.update(Unit.rootUnit);
+            Unit.render(Unit.rootUnit);
         });
+        Unit.rootUnit.on('finalize', () => ticker.clear());
     }
     static wrap(unit, listener) {
         const snapshot = Unit.snapshot(unit);
@@ -750,25 +750,27 @@ class Unit {
         if (snapshot.unit._.state === 'finalized') {
             return;
         }
-        const current = Unit.current;
+        const currentUnit = Unit.currentUnit;
         const backup = Unit.snapshot(snapshot.unit);
         try {
-            Unit.current = snapshot.unit;
+            Unit.currentUnit = snapshot.unit;
             snapshot.unit._.currentContext = snapshot.context;
             snapshot.unit._.currentElement = snapshot.element;
+            snapshot.unit._.currentComponent = snapshot.component;
             return func(...args);
         }
         catch (error) {
             throw error;
         }
         finally {
-            Unit.current = current;
+            Unit.currentUnit = currentUnit;
             snapshot.unit._.currentContext = backup.context;
             snapshot.unit._.currentElement = backup.element;
+            snapshot.unit._.currentComponent = backup.component;
         }
     }
     static snapshot(unit) {
-        return { unit, context: unit._.currentContext, element: unit._.currentElement };
+        return { unit, context: unit._.currentContext, element: unit._.currentElement, component: unit._.currentComponent };
     }
     static context(unit, key, value) {
         if (value !== undefined) {
@@ -786,43 +788,47 @@ class Unit {
         return [...((_a = Unit.component2units.get(component)) !== null && _a !== void 0 ? _a : [])];
     }
     on(type, listener, options) {
-        type.trim().split(/\s+/).forEach((type) => {
-            if (SYSTEM_EVENTS.includes(type)) {
-                this._.systems[type].push(listener);
-            }
-            if (this._.listeners.has(type, listener) === false) {
-                const execute = Unit.wrap(Unit.current, listener);
-                this._.listeners.set(type, listener, { element: this.element, execute });
-                Unit.type2units.add(type, this);
-                if (/^[A-Za-z]/.test(type)) {
-                    this._.eventManager.add({ element: this.element, type, listener: execute, options });
-                }
-            }
-        });
+        const types = type.trim().split(/\s+/);
+        types.forEach((type) => Unit.on(this, type, listener, options));
     }
     off(type, listener) {
         const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
-        types.forEach((type) => {
-            if (SYSTEM_EVENTS.includes(type)) {
-                this._.systems[type] = this._.systems[type].filter((lis) => listener ? lis !== listener : false);
+        types.forEach((type) => Unit.off(this, type, listener));
+    }
+    static on(unit, type, listener, options) {
+        if (SYSTEM_EVENTS.includes(type)) {
+            const execute = Unit.wrap(Unit.currentUnit, listener);
+            unit._.systems[type].push({ listener, execute });
+        }
+        if (unit._.listeners.has(type, listener) === false) {
+            const execute = Unit.wrap(Unit.currentUnit, listener);
+            unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
+            Unit.type2units.add(type, unit);
+            if (/^[A-Za-z]/.test(type)) {
+                unit._.eventManager.add({ element: unit.element, type, listener: execute, options });
             }
-            (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((listener) => {
-                const item = this._.listeners.get(type, listener);
-                if (item === undefined)
-                    return;
-                this._.listeners.delete(type, listener);
-                if (/^[A-Za-z]/.test(type)) {
-                    this._.eventManager.remove({ type, listener: item.execute });
-                }
-            });
-            if (this._.listeners.has(type) === false) {
-                Unit.type2units.delete(type, this);
+        }
+    }
+    static off(unit, type, listener) {
+        if (SYSTEM_EVENTS.includes(type)) {
+            unit._.systems[type] = unit._.systems[type].filter(({ listener: lis }) => listener ? lis !== listener : false);
+        }
+        (listener ? [listener] : [...unit._.listeners.keys(type)]).forEach((listener) => {
+            const item = unit._.listeners.get(type, listener);
+            if (item === undefined)
+                return;
+            unit._.listeners.delete(type, listener);
+            if (/^[A-Za-z]/.test(type)) {
+                unit._.eventManager.remove({ type, listener: item.execute });
             }
         });
+        if (unit._.listeners.has(type) === false) {
+            Unit.type2units.delete(type, unit);
+        }
     }
     static emit(type, ...args) {
         var _a, _b;
-        const current = Unit.current;
+        const current = Unit.currentUnit;
         if (type[0] === '+') {
             (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                 var _a;
@@ -837,6 +843,7 @@ class Unit {
         }
     }
 }
+Unit.currentComponent = () => { };
 Unit.component2units = new MapSet();
 //----------------------------------------------------------------------------------------------------
 // event
@@ -851,15 +858,15 @@ class UnitPromise {
         this.component = component;
     }
     then(callback) {
-        this.promise = this.promise.then(Unit.wrap(Unit.current, callback));
+        this.promise = this.promise.then(Unit.wrap(Unit.currentUnit, callback));
         return this;
     }
     catch(callback) {
-        this.promise = this.promise.catch(Unit.wrap(Unit.current, callback));
+        this.promise = this.promise.catch(Unit.wrap(Unit.currentUnit, callback));
         return this;
     }
     finally(callback) {
-        this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
+        this.promise = this.promise.finally(Unit.wrap(Unit.currentUnit, callback));
         return this;
     }
 }
@@ -869,7 +876,7 @@ class UnitPromise {
 class UnitTimer {
     constructor(options) {
         this.stack = [];
-        this.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+        this.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
     }
     clear() {
         this.stack = [];
@@ -889,19 +896,19 @@ class UnitTimer {
     }
     static execute(timer, options) {
         if (timer.unit._.state === 'finalized') {
-            timer.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
         }
         else if (timer.stack.length === 0) {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
             timer.unit.on('finalize', () => { UnitTimer.next(timer); });
         }
         else {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
         }
     }
     static next(timer) {
         if (timer.stack.length > 0) {
-            timer.unit = new Unit(Unit.current, UnitTimer.Component, timer.stack.shift());
+            timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, timer.stack.shift());
             timer.unit.on('finalize', () => { UnitTimer.next(timer); });
         }
     }
@@ -928,10 +935,10 @@ class UnitTimer {
 }
 
 const xnew$1 = Object.assign(function (...args) {
-    if (Unit.root === undefined) {
+    if (Unit.rootUnit === undefined) {
         Unit.reset();
     }
-    return new Unit(Unit.current, ...args);
+    return new Unit(Unit.currentUnit, ...args);
 }, {
     /**
      * Creates a nested HTML/SVG element within the current component
@@ -944,7 +951,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     nest(tag) {
         try {
-            return Unit.nest(Unit.current, tag);
+            return Unit.nest(Unit.currentUnit, tag);
         }
         catch (error) {
             console.error('xnew.nest(tag: string): ', error);
@@ -962,7 +969,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     extend(component, props) {
         try {
-            return Unit.extend(Unit.current, component, props);
+            return Unit.extend(Unit.currentUnit, component, props);
         }
         catch (error) {
             console.error('xnew.extend(component: Function, props?: Object): ', error);
@@ -983,7 +990,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     context(key, value = undefined) {
         try {
-            return Unit.context(Unit.current, key, value);
+            return Unit.context(Unit.currentUnit, key, value);
         }
         catch (error) {
             console.error('xnew.context(key: string, value?: any): ', error);
@@ -999,9 +1006,9 @@ const xnew$1 = Object.assign(function (...args) {
      */
     promise(promise) {
         try {
-            const component = Unit.current._.currentComponent;
-            Unit.current._.promises.push(new UnitPromise(promise, component));
-            return Unit.current._.promises[Unit.current._.promises.length - 1];
+            const component = Unit.currentUnit._.currentComponent;
+            Unit.currentUnit._.promises.push(new UnitPromise(promise, component));
+            return Unit.currentUnit._.promises[Unit.currentUnit._.promises.length - 1];
         }
         catch (error) {
             console.error('xnew.promise(promise: Promise<any>): ', error);
@@ -1017,8 +1024,8 @@ const xnew$1 = Object.assign(function (...args) {
      */
     then(callback) {
         try {
-            const component = Unit.current._.currentComponent;
-            const promises = Unit.current._.promises;
+            const component = Unit.currentUnit._.currentComponent;
+            const promises = Unit.currentUnit._.promises;
             return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                 .then((results) => {
                 callback(results.filter((_result, index) => promises[index].component !== null && promises[index].component === component));
@@ -1038,7 +1045,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     catch(callback) {
         try {
-            const promises = Unit.current._.promises;
+            const promises = Unit.currentUnit._.promises;
             return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                 .catch(callback);
         }
@@ -1056,7 +1063,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     finally(callback) {
         try {
-            const promises = Unit.current._.promises;
+            const promises = Unit.currentUnit._.promises;
             return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                 .finally(callback);
         }
@@ -1075,7 +1082,7 @@ const xnew$1 = Object.assign(function (...args) {
      * }), 1000)
      */
     scope(callback) {
-        const snapshot = Unit.snapshot(Unit.current);
+        const snapshot = Unit.snapshot(Unit.currentUnit);
         return (...args) => Unit.scope(snapshot, callback, ...args);
     },
     /**
@@ -1146,7 +1153,7 @@ const xnew$1 = Object.assign(function (...args) {
         return new UnitTimer({ transition, duration, easing, iterations: 1 });
     },
     protect() {
-        Unit.current._.protected = true;
+        Unit.currentUnit._.protected = true;
     }
 });
 
@@ -1181,12 +1188,12 @@ function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' }
         }
     };
 }
-function AccordionHeader(header, {} = {}) {
+function AccordionHeader(unit, {} = {}) {
     const internal = xnew$1.context('xnew.accordionframe');
     xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
-    header.on('click', () => internal.frame.toggle());
+    unit.on('click', () => internal.frame.toggle());
 }
-function AccordionBullet(bullet, { type = 'arrow' } = {}) {
+function AccordionBullet(unit, { type = 'arrow' } = {}) {
     const internal = xnew$1.context('xnew.accordionframe');
     xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
     if (type === 'arrow') {
@@ -1207,12 +1214,12 @@ function AccordionBullet(bullet, { type = 'arrow' } = {}) {
         });
     }
 }
-function AccordionContent(content, {} = {}) {
+function AccordionContent(unit, {} = {}) {
     const internal = xnew$1.context('xnew.accordionframe');
     xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
     xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
     internal.on('-transition', ({ rate }) => {
-        content.transition({ element: content.element, rate });
+        unit.transition({ element: unit.element, rate });
     });
     return {
         transition({ element, rate }) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mulsense/xnew",
-  "description": "JavaScript Library for Component-Oriented Programming.",
+  "description": "JavaScript / TypeScript library for component-oriented programming.",
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",
@@ -29,6 +29,11 @@
       "import": "./dist/addons/xrapier2d.mjs",
       "require": "./dist/addons/xrapier2d.js"
     },
+    "./addons/xrapier3d": {
+      "types": "./dist/addons/xrapier3d.d.ts",
+      "import": "./dist/addons/xrapier3d.mjs",
+      "require": "./dist/addons/xrapier3d.js"
+    },
     "./addons/xthree": {
       "types": "./dist/addons/xthree.d.ts",
       "import": "./dist/addons/xthree.mjs",
@@ -53,9 +58,7 @@
   "scripts": {
     "test": "jest",
     "build": "npx rollup --config rollup.config.js --bundleConfigAsCjs",
-    "dev": "npx rollup --config rollup.config.js --watch --bundleConfigAsCjs",
-    "build:addons": "npx rollup --config rollup.addons.config.js --bundleConfigAsCjs",
-    "dev:addons": "npx rollup --config rollup.addons.config.js --watch --bundleConfigAsCjs"
+    "dev": "npx rollup --config rollup.config.js --watch --bundleConfigAsCjs"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -72,7 +75,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "matter-js": "^0.20.0",
-    "onchange": "^7.1.0",
     "pixi.js": "^8.9.2",
     "rollup": "^3.3.0",
     "rollup-plugin-dts": "^6.2.1",