@mulsense/xnew 0.3.7 → 0.4.1

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,10 +206,323 @@
         }
     }
 
-    //----------------------------------------------------------------------------------------------------
-    // utils
-    //----------------------------------------------------------------------------------------------------
-    const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
+
+    class EventManager {
+        constructor() {
+            this.map = new MapMap();
+        }
+        add(props) {
+            let finalize;
+            if (props.type === 'resize') {
+                finalize = this.resize(props);
+            }
+            else if (props.type === 'wheel') {
+                finalize = this.wheel(props);
+            }
+            else if (props.type === 'click') {
+                finalize = this.click(props);
+            }
+            else if (props.type === 'click.outside') {
+                finalize = this.click_outside(props);
+            }
+            else if (['pointerdown', 'pointermove', 'pointerup', 'pointerover', 'pointerout'].includes(props.type)) {
+                finalize = this.pointer(props);
+            }
+            else if (['pointerdown.outside', 'pointermove.outside', 'pointerup.outside'].includes(props.type)) {
+                finalize = this.pointer_outside(props);
+            }
+            else if (['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout'].includes(props.type)) {
+                finalize = this.mouse(props);
+            }
+            else if (['touchstart', 'touchmove', 'touchend', 'touchcancel'].includes(props.type)) {
+                finalize = this.touch(props);
+            }
+            else if (['dragstart', 'dragmove', 'dragend'].includes(props.type)) {
+                finalize = this.drag(props);
+            }
+            else if (['gesturestart', 'gesturemove', 'gestureend'].includes(props.type)) {
+                finalize = this.gesture(props);
+            }
+            else if (['keydown', 'keyup'].includes(props.type)) {
+                finalize = this.key(props);
+            }
+            else if (['keydown.arrow', 'keyup.arrow'].includes(props.type)) {
+                finalize = this.key_arrow(props);
+            }
+            else {
+                finalize = this.basic(props);
+            }
+            this.map.set(props.type, props.listener, finalize);
+        }
+        remove({ type, listener }) {
+            const finalize = this.map.get(type, listener);
+            if (finalize) {
+                finalize();
+                this.map.delete(type, listener);
+            }
+        }
+        basic(props) {
+            const execute = (event) => {
+                props.listener({ event, type: event.type });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        resize(props) {
+            const observer = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    props.listener({ type: 'resize' });
+                    break;
+                }
+            });
+            observer.observe(props.element);
+            return () => {
+                observer.unobserve(props.element);
+            };
+        }
+        click(props) {
+            const execute = (event) => {
+                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        click_outside(props) {
+            const execute = (event) => {
+                if (props.element.contains(event.target) === false) {
+                    props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                }
+            };
+            document.addEventListener(props.type.split('.')[0], execute, props.options);
+            return () => {
+                document.removeEventListener(props.type.split('.')[0], execute);
+            };
+        }
+        pointer(props) {
+            const execute = (event) => {
+                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        mouse(props) {
+            const execute = (event) => {
+                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        touch(props) {
+            const execute = (event) => {
+                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        pointer_outside(props) {
+            const execute = (event) => {
+                if (props.element.contains(event.target) === false) {
+                    props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                }
+            };
+            document.addEventListener(props.type.split('.')[0], execute, props.options);
+            return () => {
+                document.removeEventListener(props.type.split('.')[0], execute);
+            };
+        }
+        wheel(props) {
+            const execute = (event) => {
+                props.listener({ event, type: props.type, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        drag(props) {
+            let pointermove = null;
+            let pointerup = null;
+            let pointercancel = null;
+            const pointerdown = (event) => {
+                const id = event.pointerId;
+                const position = pointer(props.element, event).position;
+                let previous = position;
+                pointermove = (event) => {
+                    if (event.pointerId === id) {
+                        const position = pointer(props.element, event).position;
+                        const delta = { x: position.x - previous.x, y: position.y - previous.y };
+                        if (props.type === 'dragmove') {
+                            props.listener({ event, type: props.type, position, delta });
+                        }
+                        previous = position;
+                    }
+                };
+                pointerup = (event) => {
+                    if (event.pointerId === id) {
+                        const position = pointer(props.element, event).position;
+                        if (props.type === 'dragend') {
+                            props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                        }
+                        remove();
+                    }
+                };
+                pointercancel = (event) => {
+                    if (event.pointerId === id) {
+                        const position = pointer(props.element, event).position;
+                        if (props.type === 'dragend') {
+                            props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                        }
+                        remove();
+                    }
+                };
+                window.addEventListener('pointermove', pointermove);
+                window.addEventListener('pointerup', pointerup);
+                window.addEventListener('pointercancel', pointercancel);
+                if (props.type === 'dragstart') {
+                    props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                }
+            };
+            function remove() {
+                if (pointermove)
+                    window.removeEventListener('pointermove', pointermove);
+                if (pointerup)
+                    window.removeEventListener('pointerup', pointerup);
+                if (pointercancel)
+                    window.removeEventListener('pointercancel', pointercancel);
+                pointermove = null;
+                pointerup = null;
+                pointercancel = null;
+            }
+            props.element.addEventListener('pointerdown', pointerdown, props.options);
+            return () => {
+                props.element.removeEventListener('pointerdown', pointerdown);
+                remove();
+            };
+        }
+        gesture(props) {
+            let isActive = false;
+            const map = new Map();
+            const element = props.element;
+            const options = props.options;
+            const dragstart = ({ event, position }) => {
+                map.set(event.pointerId, position);
+                isActive = map.size === 2 ? true : false;
+                if (isActive === true && props.type === 'gesturestart') {
+                    props.listener({ event, type: props.type });
+                }
+            };
+            const dragmove = ({ event, position, delta }) => {
+                if (map.size >= 2 && isActive === true) {
+                    const a = map.get(event.pointerId);
+                    const b = getOthers(event.pointerId)[0];
+                    let scale = 0.0;
+                    {
+                        const v = { x: a.x - b.x, y: a.y - b.y };
+                        const s = v.x * v.x + v.y * v.y;
+                        scale = 1 + (s > 0.0 ? (v.x * delta.x + v.y * delta.y) / s : 0);
+                    }
+                    // let rotate = 0.0;
+                    // {
+                    //     const c = { x: a.x + delta.x, y: a.y + delta.y };
+                    //     const v1 = { x: a.x - b.x, y: a.y - b.y };
+                    //     const v2 = { x: c.x - b.x, y: c.y - b.y };
+                    //     const l1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+                    //     const l2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+                    //     if (l1 > 0.0 && l2 > 0.0) {
+                    //         const angle = Math.acos((v1.x * v2.x + v1.y * v2.y) / (l1 * l2));
+                    //         const sign = v1.x * v2.y - v1.y * v2.x;
+                    //         rotate = sign > 0.0 ? +angle : -angle;
+                    //     }
+                    // }
+                    if (props.type === 'gesturemove') {
+                        props.listener({ event, type: props.type, scale });
+                    }
+                }
+                map.set(event.pointerId, position);
+            };
+            const dragend = ({ event }) => {
+                map.delete(event.pointerId);
+                if (isActive === true && props.type === 'gestureend') {
+                    props.listener({ event, type: props.type, scale: 1.0 });
+                }
+                isActive = false;
+            };
+            this.add({ element, options, type: 'dragstart', listener: dragstart });
+            this.add({ element, options, type: 'dragmove', listener: dragmove });
+            this.add({ element, options, type: 'dragend', listener: dragend });
+            function getOthers(id) {
+                const backup = map.get(id);
+                map.delete(id);
+                const others = [...map.values()];
+                map.set(id, backup);
+                return others;
+            }
+            return () => {
+                this.remove({ type: 'dragstart', listener: dragstart });
+                this.remove({ type: 'dragmove', listener: dragmove });
+                this.remove({ type: 'dragend', listener: dragend });
+            };
+        }
+        key(props) {
+            const execute = (event) => {
+                if (props.type === 'keydown' && event.repeat)
+                    return;
+                props.listener({ event, type: props.type, code: event.code });
+            };
+            window.addEventListener(props.type, execute, props.options);
+            return () => {
+                window.removeEventListener(props.type, execute);
+            };
+        }
+        key_arrow(props) {
+            const keymap = {};
+            const keydown = (event) => {
+                if (event.repeat)
+                    return;
+                keymap[event.code] = 1;
+                if (props.type === 'keydown.arrow' && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+                    const vector = {
+                        x: (keymap['ArrowLeft'] ? -1 : 0) + (keymap['ArrowRight'] ? +1 : 0),
+                        y: (keymap['ArrowUp'] ? -1 : 0) + (keymap['ArrowDown'] ? +1 : 0)
+                    };
+                    props.listener({ event, type: props.type, code: event.code, vector });
+                }
+            };
+            const keyup = (event) => {
+                keymap[event.code] = 0;
+                if (props.type === 'keyup.arrow' && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+                    const vector = {
+                        x: (keymap['ArrowLeft'] ? -1 : 0) + (keymap['ArrowRight'] ? +1 : 0),
+                        y: (keymap['ArrowUp'] ? -1 : 0) + (keymap['ArrowDown'] ? +1 : 0)
+                    };
+                    props.listener({ event, type: props.type, code: event.code, vector });
+                }
+            };
+            window.addEventListener('keydown', keydown, props.options);
+            window.addEventListener('keyup', keyup, props.options);
+            return () => {
+                window.removeEventListener('keydown', keydown);
+                window.removeEventListener('keyup', keyup);
+            };
+        }
+    }
+    function pointer(element, event) {
+        const rect = element.getBoundingClientRect();
+        const position = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+        return { position };
+    }
+
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
@@ -285,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,
@@ -302,7 +615,8 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], process: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], update: [], render: [], stop: [], finalize: [] },
+                eventManager: new EventManager(),
             });
             // nest html element
             if (typeof unit._.target === 'string') {
@@ -312,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) {
@@ -398,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));
@@ -408,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);
@@ -442,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) {
@@ -478,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.element.addEventListener(type, 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) {
-                        this._.listeners.delete(type, listener);
-                        if (/^[A-Za-z]/.test(type)) {
-                            item.element.removeEventListener(type, 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;
@@ -529,6 +849,7 @@
             }
         }
     }
+    Unit.currentComponent = () => { };
     Unit.component2units = new MapSet();
     //----------------------------------------------------------------------------------------------------
     // event
@@ -543,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;
         }
     }
@@ -561,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 = [];
@@ -581,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); });
             }
         }
@@ -620,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
@@ -636,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);
@@ -654,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);
@@ -675,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);
@@ -691,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);
@@ -709,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));
@@ -730,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);
             }
@@ -748,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);
             }
@@ -767,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);
         },
         /**
@@ -838,7 +1159,7 @@
             return new UnitTimer({ transition, duration, easing, iterations: 1 });
         },
         protect() {
-            Unit.current._.protected = true;
+            Unit.currentUnit._.protected = true;
         }
     });
 
@@ -873,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') {
@@ -899,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 }) {
@@ -923,209 +1244,12 @@
         };
     }
 
-    function ResizeEvent(resize) {
-        const observer = new ResizeObserver(xnew$1.scope((entries) => {
-            for (const entry of entries) {
-                xnew$1.emit('-resize');
-                break;
-            }
-        }));
-        if (resize.element) {
-            observer.observe(resize.element);
-        }
-        resize.on('finalize', () => {
-            if (resize.element) {
-                observer.unobserve(resize.element);
-            }
-        });
-    }
-    function DirectEvent(unit) {
-        const state = {};
-        const keydown = xnew$1.scope((event) => {
-            if (event.repeat)
-                return;
-            state[event.code] = 1;
-            xnew$1.emit('-keydown', { event, type: '-keydown', code: event.code });
-            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-                xnew$1.emit('-keydown.arrow', { event, type: '-keydown.arrow', code: event.code, vector: getVector() });
-            }
-        });
-        const keyup = xnew$1.scope((event) => {
-            state[event.code] = 0;
-            xnew$1.emit('-keyup', { event, type: '-keyup', code: event.code });
-            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-                xnew$1.emit('-keyup.arrow', { event, type: '-keyup.arrow', code: event.code, vector: getVector() });
-            }
-        });
-        window.addEventListener('keydown', keydown);
-        window.addEventListener('keyup', keyup);
-        unit.on('finalize', () => {
-            window.removeEventListener('keydown', keydown);
-            window.removeEventListener('keyup', keyup);
-        });
-        function getVector() {
-            return {
-                x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
-                y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
-            };
-        }
-        const internal = xnew$1();
-        internal.on('pointerdown', (event) => xnew$1.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointermove', (event) => xnew$1.emit('-pointermove', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerup', (event) => xnew$1.emit('-pointerup', { event, position: getPosition(unit.element, event) }));
-        internal.on('wheel', (event) => xnew$1.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
-        internal.on('click', (event) => xnew$1.emit('-click', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerover', (event) => xnew$1.emit('-pointerover', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerout', (event) => xnew$1.emit('-pointerout', { event, position: getPosition(unit.element, event) }));
-        const pointerdownoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-pointerdown.outside', { event, position: getPosition(unit.element, event) });
-            }
-        });
-        const pointerupoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-pointerup.outside', { event, position: getPosition(unit.element, event) });
-            }
-        });
-        const clickoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-click.outside', { event, position: getPosition(unit.element, event) });
-            }
-        });
-        document.addEventListener('pointerdown', pointerdownoutside);
-        document.addEventListener('pointerup', pointerupoutside);
-        document.addEventListener('click', clickoutside);
-        unit.on('finalize', () => {
-            document.removeEventListener('pointerdown', pointerdownoutside);
-            document.removeEventListener('pointerup', pointerupoutside);
-            document.removeEventListener('click', clickoutside);
-        });
-        const drag = xnew$1(DragEvent);
-        drag.on('-dragstart', (...args) => xnew$1.emit('-dragstart', ...args));
-        drag.on('-dragmove', (...args) => xnew$1.emit('-dragmove', ...args));
-        drag.on('-dragend', (...args) => xnew$1.emit('-dragend', ...args));
-        drag.on('-dragcancel', (...args) => xnew$1.emit('-dragcancel', ...args));
-        const gesture = xnew$1(GestureEvent);
-        gesture.on('-gesturestart', (...args) => xnew$1.emit('-gesturestart', ...args));
-        gesture.on('-gesturemove', (...args) => xnew$1.emit('-gesturemove', ...args));
-        gesture.on('-gestureend', (...args) => xnew$1.emit('-gestureend', ...args));
-        gesture.on('-gesturecancel', (...args) => xnew$1.emit('-gesturecancel', ...args));
-    }
-    function DragEvent(unit) {
-        const pointerdown = xnew$1.scope((event) => {
-            const id = event.pointerId;
-            const position = getPosition(unit.element, event);
-            let previous = position;
-            let connect = true;
-            const pointermove = xnew$1.scope((event) => {
-                if (event.pointerId === id) {
-                    const position = getPosition(unit.element, event);
-                    const delta = { x: position.x - previous.x, y: position.y - previous.y };
-                    xnew$1.emit('-dragmove', { event, position, delta });
-                    previous = position;
-                }
-            });
-            const pointerup = xnew$1.scope((event) => {
-                if (event.pointerId === id) {
-                    const position = getPosition(unit.element, event);
-                    xnew$1.emit('-dragend', { event, position, });
-                    remove();
-                }
-            });
-            const pointercancel = xnew$1.scope((event) => {
-                if (event.pointerId === id) {
-                    const position = getPosition(unit.element, event);
-                    xnew$1.emit('-dragcancel', { event, position, });
-                    remove();
-                }
-            });
-            window.addEventListener('pointermove', pointermove);
-            window.addEventListener('pointerup', pointerup);
-            window.addEventListener('pointercancel', pointercancel);
-            function remove() {
-                if (connect === true) {
-                    window.removeEventListener('pointermove', pointermove);
-                    window.removeEventListener('pointerup', pointerup);
-                    window.removeEventListener('pointercancel', pointercancel);
-                    connect = false;
-                }
-            }
-            xnew$1((unit) => unit.on('-finalize', remove));
-            xnew$1.emit('-dragstart', { event, position });
-        });
-        unit.on('pointerdown', pointerdown);
-    }
-    function GestureEvent(unit) {
-        const drag = xnew$1(DragEvent);
-        let isActive = false;
-        const map = new Map();
-        drag.on('-dragstart', ({ event, position }) => {
-            map.set(event.pointerId, Object.assign({}, position));
-            isActive = map.size === 2 ? true : false;
-            if (isActive === true) {
-                xnew$1.emit('-gesturestart', {});
-            }
-        });
-        drag.on('-dragmove', ({ event, position, delta }) => {
-            if (map.size >= 2 && isActive === true) {
-                const a = map.get(event.pointerId);
-                const b = getOthers(event.pointerId)[0];
-                let scale = 0.0;
-                {
-                    const v = { x: a.x - b.x, y: a.y - b.y };
-                    const s = v.x * v.x + v.y * v.y;
-                    scale = 1 + (s > 0.0 ? (v.x * delta.x + v.y * delta.y) / s : 0);
-                }
-                // let rotate = 0.0;
-                // {
-                //     const c = { x: a.x + delta.x, y: a.y + delta.y };
-                //     const v1 = { x: a.x - b.x, y: a.y - b.y };
-                //     const v2 = { x: c.x - b.x, y: c.y - b.y };
-                //     const l1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
-                //     const l2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
-                //     if (l1 > 0.0 && l2 > 0.0) {
-                //         const angle = Math.acos((v1.x * v2.x + v1.y * v2.y) / (l1 * l2));
-                //         const sign = v1.x * v2.y - v1.y * v2.x;
-                //         rotate = sign > 0.0 ? +angle : -angle;
-                //     }
-                // }
-                xnew$1.emit('-gesturemove', { event, position, delta, scale });
-            }
-            map.set(event.pointerId, position);
-        });
-        drag.on('-dragend', ({ event }) => {
-            if (isActive === true) {
-                xnew$1.emit('-gestureend', {});
-            }
-            isActive = false;
-            map.delete(event.pointerId);
-        });
-        drag.on('-dragcancel', ({ event }) => {
-            if (isActive === true) {
-                xnew$1.emit('-gesturecancel', { event });
-            }
-            isActive = false;
-            map.delete(event.pointerId);
-        });
-        function getOthers(id) {
-            const backup = map.get(id);
-            map.delete(id);
-            const others = [...map.values()];
-            map.set(id, backup);
-            return others;
-        }
-    }
-    function getPosition(element, event) {
-        const rect = element.getBoundingClientRect();
-        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
-    }
-
-    function Screen(screen, { width = 640, height = 480, fit = 'contain' } = {}) {
+    function Screen(unit, { width = 640, height = 480, fit = 'contain' } = {}) {
         const size = { width, height };
         const wrapper = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
+        unit.on('resize', resize);
         const absolute = xnew$1.nest('<div style="position: absolute; margin: auto; container-type: size; overflow: hidden;">');
         const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none; pointer-events: auto;">`);
-        xnew$1(wrapper, ResizeEvent).on('-resize', resize);
         resize();
         function resize() {
             const aspect = size.width / size.height;
@@ -1266,15 +1390,14 @@
         const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
         xnew$1.context('xnew.dragframe', { frame, absolute });
     }
-    function DragTarget(target, {} = {}) {
+    function DragTarget(unit, {} = {}) {
         const { frame, absolute } = xnew$1.context('xnew.dragframe');
-        xnew$1.nest('<div>');
-        const direct = xnew$1(absolute.parentElement, DirectEvent);
+        const target = xnew$1(absolute.parentElement);
         const current = { x: 0, y: 0 };
         const offset = { x: 0, y: 0 };
         let dragged = false;
-        direct.on('-dragstart', ({ event, position }) => {
-            if (target.element.contains(event.target) === false)
+        target.on('dragstart', ({ event, position }) => {
+            if (unit.element.contains(event.target) === false)
                 return;
             dragged = true;
             offset.x = position.x - parseFloat(absolute.style.left || '0');
@@ -1282,7 +1405,7 @@
             current.x = position.x - offset.x;
             current.y = position.y - offset.y;
         });
-        direct.on('-dragmove', ({ event, delta }) => {
+        target.on('dragmove', ({ event, delta }) => {
             if (dragged !== true)
                 return;
             current.x += delta.x;
@@ -1290,9 +1413,10 @@
             absolute.style.left = `${current.x}px`;
             absolute.style.top = `${current.y}px`;
         });
-        direct.on('-dragcancel -dragend', ({ event }) => {
+        target.on('dragend', ({ event }) => {
             dragged = false;
         });
+        xnew$1.nest('<div>');
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1301,7 +1425,7 @@
     function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
         xnew$1.nest(`<svg
         viewBox="0 0 100 100"
-        style="position: absolute; width: 100%; height: 100%; pointer-select: none;
+        style="position: absolute; width: 100%; height: 100%; select: none;
         stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
     ">`);
@@ -1311,7 +1435,7 @@
         const internal = xnew$1((unit) => {
             let newsize = Math.min(outer.clientWidth, outer.clientHeight);
             const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-            xnew$1(outer, ResizeEvent).on('-resize', () => {
+            xnew$1(outer).on('resize', () => {
                 newsize = Math.min(outer.clientWidth, outer.clientHeight);
                 inner.style.width = `${newsize}px`;
                 inner.style.height = `${newsize}px`;
@@ -1327,22 +1451,21 @@
                 xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
                 xnew$1('<circle cx="50" cy="50" r="23">');
             });
-            const direct = xnew$1(DirectEvent);
-            direct.on('-dragstart', ({ event, position }) => {
+            unit.on('dragstart', ({ event, position }) => {
                 const vector = getVector(position);
                 target.element.style.filter = 'brightness(90%)';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
                 target.element.style.top = vector.y * newsize / 4 + 'px';
                 xnew$1.emit('-down', { vector });
             });
-            direct.on('-dragmove', ({ event, position }) => {
+            unit.on('dragmove', ({ event, position }) => {
                 const vector = getVector(position);
                 target.element.style.filter = 'brightness(90%)';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
                 target.element.style.top = vector.y * newsize / 4 + 'px';
                 xnew$1.emit('-move', { vector });
             });
-            direct.on('-dragend', ({ event }) => {
+            unit.on('dragend', ({ event }) => {
                 const vector = { x: 0, y: 0 };
                 target.element.style.filter = '';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
@@ -1366,7 +1489,7 @@
         const internal = xnew$1((unit) => {
             let newsize = Math.min(outer.clientWidth, outer.clientHeight);
             const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-            xnew$1(outer, ResizeEvent).on('-resize', () => {
+            xnew$1(outer).on('resize', () => {
                 newsize = Math.min(outer.clientWidth, outer.clientHeight);
                 inner.style.width = `${newsize}px`;
                 inner.style.height = `${newsize}px`;
@@ -1394,8 +1517,7 @@
                 xnew$1('<polygon points="11 50 20 42 20 58">');
                 xnew$1('<polygon points="89 50 80 42 80 58">');
             });
-            const direct = xnew$1(DirectEvent);
-            direct.on('-dragstart', ({ event, position }) => {
+            unit.on('dragstart', ({ event, position }) => {
                 const vector = getVector(position);
                 targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
                 targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1403,7 +1525,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-down', { vector });
             });
-            direct.on('-dragmove', ({ event, position }) => {
+            unit.on('dragmove', ({ event, position }) => {
                 const vector = getVector(position);
                 targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
                 targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1411,7 +1533,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-move', { vector });
             });
-            direct.on('-dragend', ({ event }) => {
+            unit.on('dragend', ({ event }) => {
                 const vector = { x: 0, y: 0 };
                 targets[0].element.style.filter = '';
                 targets[1].element.style.filter = '';
@@ -1463,249 +1585,29 @@
             const index = Math.floor((new Date().getTime() - start) / speed);
             // Display characters up to the current index (fade in)
             for (let i = 0; i < chars.length; i++) {
-                if (i <= index) {
-                    chars[i].element.style.opacity = '1';
-                }
-            }
-            if (state === 0 && index >= text.length) {
-                action();
-            }
-        });
-        xnew$1.timeout(() => {
-            xnew$1(document.body).on('click wheel', action);
-            xnew$1(DirectEvent).on('-keydown', action);
-        }, 100);
-        function action() {
-            if (state === 0) {
-                state = 1;
-                for (let i = 0; i < chars.length; i++) {
-                    chars[i].element.style.opacity = '1';
-                }
-                xnew$1.emit('-complete');
-            }
-            else if (state === 1) {
-                state = 2;
-                xnew$1.emit('-next');
-            }
-        }
-    }
-
-    const context = window.AudioContext ? new window.AudioContext() : (null);
-    const master = context ? context.createGain() : (null);
-    if (context) {
-        master.gain.value = 0.1;
-        master.connect(context.destination);
-    }
-    class AudioFile {
-        constructor(path) {
-            this.promise = fetch(path)
-                .then((response) => response.arrayBuffer())
-                .then((response) => context.decodeAudioData(response))
-                .then((response) => { this.buffer = response; })
-                .catch(() => {
-                console.warn(`"${path}" could not be loaded.`);
-            });
-            this.amp = context.createGain();
-            this.amp.gain.value = 1.0;
-            this.amp.connect(master);
-            this.fade = context.createGain();
-            this.fade.gain.value = 1.0;
-            this.fade.connect(this.amp);
-            this.source = null;
-            this.played = null;
-        }
-        set volume(value) {
-            this.amp.gain.value = value;
-        }
-        get volume() {
-            return this.amp.gain.value;
-        }
-        play({ offset = 0, fade = 0, loop = false } = {}) {
-            if (this.buffer !== undefined && this.played === null) {
-                this.source = context.createBufferSource();
-                this.source.buffer = this.buffer;
-                this.source.loop = loop;
-                this.source.connect(this.fade);
-                this.played = context.currentTime;
-                this.source.playbackRate.value = 1;
-                this.source.start(context.currentTime, offset / 1000);
-                // Apply fade-in effect if fade duration is specified
-                if (fade > 0) {
-                    this.fade.gain.setValueAtTime(0, context.currentTime);
-                    this.fade.gain.linearRampToValueAtTime(1.0, context.currentTime + fade / 1000);
-                }
-                this.source.onended = () => {
-                    var _a;
-                    this.played = null;
-                    (_a = this.source) === null || _a === void 0 ? void 0 : _a.disconnect();
-                    this.source = null;
-                };
-            }
-        }
-        pause({ fade = 0 } = {}) {
-            var _a, _b;
-            if (this.buffer !== undefined && this.played !== null) {
-                const elapsed = (context.currentTime - this.played) % this.buffer.duration * 1000;
-                // Apply fade-out effect if fade duration is specified
-                if (fade > 0) {
-                    this.fade.gain.setValueAtTime(1.0, context.currentTime);
-                    this.fade.gain.linearRampToValueAtTime(0, context.currentTime + fade / 1000);
-                    (_a = this.source) === null || _a === void 0 ? void 0 : _a.stop(context.currentTime + fade / 1000);
-                }
-                else {
-                    (_b = this.source) === null || _b === void 0 ? void 0 : _b.stop(context.currentTime);
-                }
-                this.played = null;
-                return elapsed;
-            }
-        }
-        clear() {
-            var _a;
-            this.amp.disconnect();
-            this.fade.disconnect();
-            (_a = this.source) === null || _a === void 0 ? void 0 : _a.disconnect();
-        }
-    }
-    const keymap = {
-        'A0': 27.500, 'A#0': 29.135, 'B0': 30.868,
-        'C1': 32.703, 'C#1': 34.648, 'D1': 36.708, 'D#1': 38.891, 'E1': 41.203, 'F1': 43.654, 'F#1': 46.249, 'G1': 48.999, 'G#1': 51.913, 'A1': 55.000, 'A#1': 58.270, 'B1': 61.735,
-        'C2': 65.406, 'C#2': 69.296, 'D2': 73.416, 'D#2': 77.782, 'E2': 82.407, 'F2': 87.307, 'F#2': 92.499, 'G2': 97.999, 'G#2': 103.826, 'A2': 110.000, 'A#2': 116.541, 'B2': 123.471,
-        'C3': 130.813, 'C#3': 138.591, 'D3': 146.832, 'D#3': 155.563, 'E3': 164.814, 'F3': 174.614, 'F#3': 184.997, 'G3': 195.998, 'G#3': 207.652, 'A3': 220.000, 'A#3': 233.082, 'B3': 246.942,
-        'C4': 261.626, 'C#4': 277.183, 'D4': 293.665, 'D#4': 311.127, 'E4': 329.628, 'F4': 349.228, 'F#4': 369.994, 'G4': 391.995, 'G#4': 415.305, 'A4': 440.000, 'A#4': 466.164, 'B4': 493.883,
-        'C5': 523.251, 'C#5': 554.365, 'D5': 587.330, 'D#5': 622.254, 'E5': 659.255, 'F5': 698.456, 'F#5': 739.989, 'G5': 783.991, 'G#5': 830.609, 'A5': 880.000, 'A#5': 932.328, 'B5': 987.767,
-        'C6': 1046.502, 'C#6': 1108.731, 'D6': 1174.659, 'D#6': 1244.508, 'E6': 1318.510, 'F6': 1396.913, 'F#6': 1479.978, 'G6': 1567.982, 'G#6': 1661.219, 'A6': 1760.000, 'A#6': 1864.655, 'B6': 1975.533,
-        'C7': 2093.005, 'C#7': 2217.461, 'D7': 2349.318, 'D#7': 2489.016, 'E7': 2637.020, 'F7': 2793.826, 'F#7': 2959.955, 'G7': 3135.963, 'G#7': 3322.438, 'A7': 3520.000, 'A#7': 3729.310, 'B7': 3951.066,
-        'C8': 4186.009,
-    };
-    const notemap = {
-        '1m': 4.000, '2n': 2.000, '4n': 1.000, '8n': 0.500, '16n': 0.250, '32n': 0.125,
-    };
-    class Synthesizer {
-        constructor(props) { this.props = props; }
-        press(frequency, duration, wait) {
-            var _a;
-            const props = this.props;
-            const fv = typeof frequency === 'string' ? keymap[frequency] : frequency;
-            const dv = typeof duration === 'string' ? (notemap[duration] * 60 / ((_a = props.bpm) !== null && _a !== void 0 ? _a : 120)) : (typeof duration === 'number' ? (duration / 1000) : 0);
-            const start = context.currentTime + (wait !== null && wait !== void 0 ? wait : 0) / 1000;
-            const nodes = {};
-            nodes.oscillator = context.createOscillator();
-            nodes.oscillator.type = props.oscillator.type;
-            nodes.oscillator.frequency.value = fv;
-            if (props.oscillator.LFO) {
-                nodes.oscillatorLFO = context.createOscillator();
-                nodes.oscillatorLFODepth = context.createGain();
-                nodes.oscillatorLFODepth.gain.value = fv * (Math.pow(2.0, props.oscillator.LFO.amount / 12.0) - 1.0);
-                nodes.oscillatorLFO.type = props.oscillator.LFO.type;
-                nodes.oscillatorLFO.frequency.value = props.oscillator.LFO.rate;
-                nodes.oscillatorLFO.start(start);
-                nodes.oscillatorLFO.connect(nodes.oscillatorLFODepth);
-                nodes.oscillatorLFODepth.connect(nodes.oscillator.frequency);
-            }
-            nodes.amp = context.createGain();
-            nodes.amp.gain.value = 0.0;
-            nodes.target = context.createGain();
-            nodes.target.gain.value = 1.0;
-            nodes.amp.connect(nodes.target);
-            nodes.target.connect(master);
-            if (props.filter) {
-                nodes.filter = context.createBiquadFilter();
-                nodes.filter.type = props.filter.type;
-                nodes.filter.frequency.value = props.filter.cutoff;
-                nodes.oscillator.connect(nodes.filter);
-                nodes.filter.connect(nodes.amp);
-            }
-            else {
-                nodes.oscillator.connect(nodes.amp);
-            }
-            if (props.reverb) {
-                nodes.convolver = context.createConvolver();
-                nodes.convolver.buffer = impulseResponse({ time: props.reverb.time });
-                nodes.convolverDepth = context.createGain();
-                nodes.convolverDepth.gain.value = 1.0;
-                nodes.convolverDepth.gain.value *= props.reverb.mix;
-                nodes.target.gain.value *= (1.0 - props.reverb.mix);
-                nodes.amp.connect(nodes.convolver);
-                nodes.convolver.connect(nodes.convolverDepth);
-                nodes.convolverDepth.connect(master);
-            }
-            if (props.oscillator.envelope) {
-                const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
-                startEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
-            }
-            if (props.amp.envelope) {
-                startEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
-            }
-            nodes.oscillator.start(start);
-            if (dv > 0) {
-                release();
-            }
-            else {
-                return { release };
-            }
-            function release() {
-                let stop = null;
-                const end = dv > 0 ? dv : (context.currentTime - start);
-                if (props.amp.envelope) {
-                    const ADSR = props.amp.envelope.ADSR;
-                    const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
-                    const rate = adsr[0] === 0.0 ? 1.0 : Math.min(end / (adsr[0] + 0.001), 1.0);
-                    stop = start + Math.max((adsr[0] + adsr[1]) * rate, end) + adsr[3];
-                }
-                else {
-                    stop = start + end;
-                }
-                if (nodes.oscillatorLFO) {
-                    nodes.oscillatorLFO.stop(stop);
-                }
-                if (props.oscillator.envelope) {
-                    const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
-                    stopEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
-                }
-                if (props.amp.envelope) {
-                    stopEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
-                }
-                nodes.oscillator.stop(stop);
-                setTimeout(() => {
-                    var _a, _b, _c, _d, _e;
-                    nodes.oscillator.disconnect();
-                    nodes.amp.disconnect();
-                    nodes.target.disconnect();
-                    (_a = nodes.oscillatorLFO) === null || _a === void 0 ? void 0 : _a.disconnect();
-                    (_b = nodes.oscillatorLFODepth) === null || _b === void 0 ? void 0 : _b.disconnect();
-                    (_c = nodes.filter) === null || _c === void 0 ? void 0 : _c.disconnect();
-                    (_d = nodes.convolver) === null || _d === void 0 ? void 0 : _d.disconnect();
-                    (_e = nodes.convolverDepth) === null || _e === void 0 ? void 0 : _e.disconnect();
-                }, 2000);
-            }
-            function stopEnvelope(param, base, amount, ADSR) {
-                const end = dv > 0 ? dv : (context.currentTime - start);
-                const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(end / (ADSR[0] / 1000), 1.0);
-                if (rate < 1.0) {
-                    param.cancelScheduledValues(start);
-                    param.setValueAtTime(base, start);
-                    param.linearRampToValueAtTime(base + amount * rate, start + ADSR[0] / 1000 * rate);
-                    param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000 * rate);
+                if (i <= index) {
+                    chars[i].element.style.opacity = '1';
                 }
-                param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv));
-                param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, end) + ADSR[3] / 1000);
             }
-            function startEnvelope(param, base, amount, ADSR) {
-                param.value = base;
-                param.setValueAtTime(base, start);
-                param.linearRampToValueAtTime(base + amount, start + ADSR[0] / 1000);
-                param.linearRampToValueAtTime(base + amount * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000);
+            if (state === 0 && index >= text.length) {
+                action();
             }
-            function impulseResponse({ time, decay = 2.0 }) {
-                const length = context.sampleRate * time / 1000;
-                const impulse = context.createBuffer(2, length, context.sampleRate);
-                const ch0 = impulse.getChannelData(0);
-                const ch1 = impulse.getChannelData(1);
-                for (let i = 0; i < length; i++) {
-                    ch0[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
-                    ch1[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
+        });
+        xnew$1.timeout(() => {
+            xnew$1(document.body).on('click wheel', action);
+            unit.on('keydown', action);
+        }, 100);
+        function action() {
+            if (state === 0) {
+                state = 1;
+                for (let i = 0; i < chars.length; i++) {
+                    chars[i].element.style.opacity = '1';
                 }
-                return impulse;
+                xnew$1.emit('-complete');
+            }
+            else if (state === 1) {
+                state = 2;
+                xnew$1.emit('-next');
             }
         }
     }
@@ -3352,35 +3254,228 @@
         XMark(unit, props) { icon('XMark', props); },
     };
 
-    function VolumeController(unit, {} = {}) {
-        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; container-type: size;">`);
-        xnew$1.extend(DirectEvent);
-        unit.on('-pointerdown', ({ event }) => event.stopPropagation());
-        const slider = xnew$1(`<input type="range" min="0" max="100" value="${master.gain.value * 100}"
-    style="display: none; width: calc(96cqw - 100cqh); margin: 0 2cqw; cursor: pointer; pointer-events: auto;"
-    >`);
-        unit.on('-click:outside', () => slider.element.style.display = 'none');
-        const button = xnew$1((button) => {
-            xnew$1.nest('<div style="position: relative; width: 100cqh; height: 100cqh; cursor: pointer; pointer-events: auto;">');
-            let icon = xnew$1(master.gain.value > 0 ? icons.SpeakerWave : icons.SpeakerXMark);
-            return {
-                update() {
-                    icon === null || icon === void 0 ? void 0 : icon.finalize();
-                    icon = xnew$1(master.gain.value > 0 ? icons.SpeakerWave : icons.SpeakerXMark);
+    const context = window.AudioContext ? new window.AudioContext() : (null);
+    const master = context ? context.createGain() : (null);
+    if (context) {
+        master.gain.value = 0.1;
+        master.connect(context.destination);
+    }
+    class AudioFile {
+        constructor(path) {
+            this.promise = fetch(path)
+                .then((response) => response.arrayBuffer())
+                .then((response) => context.decodeAudioData(response))
+                .then((response) => { this.buffer = response; })
+                .catch(() => {
+                console.warn(`"${path}" could not be loaded.`);
+            });
+            this.amp = context.createGain();
+            this.amp.gain.value = 1.0;
+            this.amp.connect(master);
+            this.fade = context.createGain();
+            this.fade.gain.value = 1.0;
+            this.fade.connect(this.amp);
+            this.source = null;
+            this.played = null;
+        }
+        set volume(value) {
+            this.amp.gain.value = value;
+        }
+        get volume() {
+            return this.amp.gain.value;
+        }
+        play({ offset = 0, fade = 0, loop = false } = {}) {
+            if (this.buffer !== undefined && this.played === null) {
+                this.source = context.createBufferSource();
+                this.source.buffer = this.buffer;
+                this.source.loop = loop;
+                this.source.connect(this.fade);
+                this.played = context.currentTime;
+                this.source.playbackRate.value = 1;
+                this.source.start(context.currentTime, offset / 1000);
+                // Apply fade-in effect if fade duration is specified
+                if (fade > 0) {
+                    this.fade.gain.setValueAtTime(0, context.currentTime);
+                    this.fade.gain.linearRampToValueAtTime(1.0, context.currentTime + fade / 1000);
                 }
-            };
-        });
-        button.on('click', () => slider.element.style.display = slider.element.style.display !== 'none' ? 'none' : 'flex');
-        slider.on('input', (event) => {
-            master.gain.value = parseFloat(event.target.value) / 100;
-            button.update();
-        });
+                this.source.onended = () => {
+                    var _a;
+                    this.played = null;
+                    (_a = this.source) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    this.source = null;
+                };
+            }
+        }
+        pause({ fade = 0 } = {}) {
+            var _a, _b;
+            if (this.buffer !== undefined && this.played !== null) {
+                const elapsed = (context.currentTime - this.played) % this.buffer.duration * 1000;
+                // Apply fade-out effect if fade duration is specified
+                if (fade > 0) {
+                    this.fade.gain.setValueAtTime(1.0, context.currentTime);
+                    this.fade.gain.linearRampToValueAtTime(0, context.currentTime + fade / 1000);
+                    (_a = this.source) === null || _a === void 0 ? void 0 : _a.stop(context.currentTime + fade / 1000);
+                }
+                else {
+                    (_b = this.source) === null || _b === void 0 ? void 0 : _b.stop(context.currentTime);
+                }
+                this.played = null;
+                return elapsed;
+            }
+        }
+        clear() {
+            var _a;
+            this.amp.disconnect();
+            this.fade.disconnect();
+            (_a = this.source) === null || _a === void 0 ? void 0 : _a.disconnect();
+        }
+    }
+    const keymap = {
+        'A0': 27.500, 'A#0': 29.135, 'B0': 30.868,
+        'C1': 32.703, 'C#1': 34.648, 'D1': 36.708, 'D#1': 38.891, 'E1': 41.203, 'F1': 43.654, 'F#1': 46.249, 'G1': 48.999, 'G#1': 51.913, 'A1': 55.000, 'A#1': 58.270, 'B1': 61.735,
+        'C2': 65.406, 'C#2': 69.296, 'D2': 73.416, 'D#2': 77.782, 'E2': 82.407, 'F2': 87.307, 'F#2': 92.499, 'G2': 97.999, 'G#2': 103.826, 'A2': 110.000, 'A#2': 116.541, 'B2': 123.471,
+        'C3': 130.813, 'C#3': 138.591, 'D3': 146.832, 'D#3': 155.563, 'E3': 164.814, 'F3': 174.614, 'F#3': 184.997, 'G3': 195.998, 'G#3': 207.652, 'A3': 220.000, 'A#3': 233.082, 'B3': 246.942,
+        'C4': 261.626, 'C#4': 277.183, 'D4': 293.665, 'D#4': 311.127, 'E4': 329.628, 'F4': 349.228, 'F#4': 369.994, 'G4': 391.995, 'G#4': 415.305, 'A4': 440.000, 'A#4': 466.164, 'B4': 493.883,
+        'C5': 523.251, 'C#5': 554.365, 'D5': 587.330, 'D#5': 622.254, 'E5': 659.255, 'F5': 698.456, 'F#5': 739.989, 'G5': 783.991, 'G#5': 830.609, 'A5': 880.000, 'A#5': 932.328, 'B5': 987.767,
+        'C6': 1046.502, 'C#6': 1108.731, 'D6': 1174.659, 'D#6': 1244.508, 'E6': 1318.510, 'F6': 1396.913, 'F#6': 1479.978, 'G6': 1567.982, 'G#6': 1661.219, 'A6': 1760.000, 'A#6': 1864.655, 'B6': 1975.533,
+        'C7': 2093.005, 'C#7': 2217.461, 'D7': 2349.318, 'D#7': 2489.016, 'E7': 2637.020, 'F7': 2793.826, 'F#7': 2959.955, 'G7': 3135.963, 'G#7': 3322.438, 'A7': 3520.000, 'A#7': 3729.310, 'B7': 3951.066,
+        'C8': 4186.009,
+    };
+    const notemap = {
+        '1m': 4.000, '2n': 2.000, '4n': 1.000, '8n': 0.500, '16n': 0.250, '32n': 0.125,
+    };
+    class Synthesizer {
+        constructor(props) { this.props = props; }
+        press(frequency, duration, wait) {
+            var _a;
+            const props = this.props;
+            const fv = typeof frequency === 'string' ? keymap[frequency] : frequency;
+            const dv = typeof duration === 'string' ? (notemap[duration] * 60 / ((_a = props.bpm) !== null && _a !== void 0 ? _a : 120)) : (typeof duration === 'number' ? (duration / 1000) : 0);
+            const start = context.currentTime + (wait !== null && wait !== void 0 ? wait : 0) / 1000;
+            const nodes = {};
+            nodes.oscillator = context.createOscillator();
+            nodes.oscillator.type = props.oscillator.type;
+            nodes.oscillator.frequency.value = fv;
+            if (props.oscillator.LFO) {
+                nodes.oscillatorLFO = context.createOscillator();
+                nodes.oscillatorLFODepth = context.createGain();
+                nodes.oscillatorLFODepth.gain.value = fv * (Math.pow(2.0, props.oscillator.LFO.amount / 12.0) - 1.0);
+                nodes.oscillatorLFO.type = props.oscillator.LFO.type;
+                nodes.oscillatorLFO.frequency.value = props.oscillator.LFO.rate;
+                nodes.oscillatorLFO.start(start);
+                nodes.oscillatorLFO.connect(nodes.oscillatorLFODepth);
+                nodes.oscillatorLFODepth.connect(nodes.oscillator.frequency);
+            }
+            nodes.amp = context.createGain();
+            nodes.amp.gain.value = 0.0;
+            nodes.target = context.createGain();
+            nodes.target.gain.value = 1.0;
+            nodes.amp.connect(nodes.target);
+            nodes.target.connect(master);
+            if (props.filter) {
+                nodes.filter = context.createBiquadFilter();
+                nodes.filter.type = props.filter.type;
+                nodes.filter.frequency.value = props.filter.cutoff;
+                nodes.oscillator.connect(nodes.filter);
+                nodes.filter.connect(nodes.amp);
+            }
+            else {
+                nodes.oscillator.connect(nodes.amp);
+            }
+            if (props.reverb) {
+                nodes.convolver = context.createConvolver();
+                nodes.convolver.buffer = impulseResponse({ time: props.reverb.time });
+                nodes.convolverDepth = context.createGain();
+                nodes.convolverDepth.gain.value = 1.0;
+                nodes.convolverDepth.gain.value *= props.reverb.mix;
+                nodes.target.gain.value *= (1.0 - props.reverb.mix);
+                nodes.amp.connect(nodes.convolver);
+                nodes.convolver.connect(nodes.convolverDepth);
+                nodes.convolverDepth.connect(master);
+            }
+            if (props.oscillator.envelope) {
+                const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
+                startEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
+            }
+            if (props.amp.envelope) {
+                startEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
+            }
+            nodes.oscillator.start(start);
+            if (dv > 0) {
+                release();
+            }
+            else {
+                return { release };
+            }
+            function release() {
+                let stop = null;
+                const end = dv > 0 ? dv : (context.currentTime - start);
+                if (props.amp.envelope) {
+                    const ADSR = props.amp.envelope.ADSR;
+                    const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
+                    const rate = adsr[0] === 0.0 ? 1.0 : Math.min(end / (adsr[0] + 0.001), 1.0);
+                    stop = start + Math.max((adsr[0] + adsr[1]) * rate, end) + adsr[3];
+                }
+                else {
+                    stop = start + end;
+                }
+                if (nodes.oscillatorLFO) {
+                    nodes.oscillatorLFO.stop(stop);
+                }
+                if (props.oscillator.envelope) {
+                    const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
+                    stopEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
+                }
+                if (props.amp.envelope) {
+                    stopEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
+                }
+                nodes.oscillator.stop(stop);
+                setTimeout(() => {
+                    var _a, _b, _c, _d, _e;
+                    nodes.oscillator.disconnect();
+                    nodes.amp.disconnect();
+                    nodes.target.disconnect();
+                    (_a = nodes.oscillatorLFO) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    (_b = nodes.oscillatorLFODepth) === null || _b === void 0 ? void 0 : _b.disconnect();
+                    (_c = nodes.filter) === null || _c === void 0 ? void 0 : _c.disconnect();
+                    (_d = nodes.convolver) === null || _d === void 0 ? void 0 : _d.disconnect();
+                    (_e = nodes.convolverDepth) === null || _e === void 0 ? void 0 : _e.disconnect();
+                }, 2000);
+            }
+            function stopEnvelope(param, base, amount, ADSR) {
+                const end = dv > 0 ? dv : (context.currentTime - start);
+                const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(end / (ADSR[0] / 1000), 1.0);
+                if (rate < 1.0) {
+                    param.cancelScheduledValues(start);
+                    param.setValueAtTime(base, start);
+                    param.linearRampToValueAtTime(base + amount * rate, start + ADSR[0] / 1000 * rate);
+                    param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000 * rate);
+                }
+                param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv));
+                param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, end) + ADSR[3] / 1000);
+            }
+            function startEnvelope(param, base, amount, ADSR) {
+                param.value = base;
+                param.setValueAtTime(base, start);
+                param.linearRampToValueAtTime(base + amount, start + ADSR[0] / 1000);
+                param.linearRampToValueAtTime(base + amount * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000);
+            }
+            function impulseResponse({ time, decay = 2.0 }) {
+                const length = context.sampleRate * time / 1000;
+                const impulse = context.createBuffer(2, length, context.sampleRate);
+                const ch0 = impulse.getChannelData(0);
+                const ch1 = impulse.getChannelData(1);
+                for (let i = 0; i < length; i++) {
+                    ch0[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
+                    ch1[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
+                }
+                return impulse;
+            }
+        }
     }
 
     const basics = {
         Screen,
-        DirectEvent,
-        ResizeEvent,
         ModalFrame,
         ModalContent,
         AccordionFrame,
@@ -3395,7 +3490,6 @@
         DragTarget,
         AnalogStick,
         DirectionalPad,
-        VolumeController
     };
     const audio = {
         load(path) {