@mulsense/xnew 0.3.7 → 0.4.1

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,10 +200,323 @@ class Timer {
     }
 }
 
-//----------------------------------------------------------------------------------------------------
-// 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
 //----------------------------------------------------------------------------------------------------
@@ -279,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,
@@ -296,7 +609,8 @@ 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
         if (typeof unit._.target === 'string') {
@@ -306,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) {
@@ -392,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));
@@ -402,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);
@@ -436,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) {
@@ -472,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.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;
@@ -523,6 +843,7 @@ class Unit {
         }
     }
 }
+Unit.currentComponent = () => { };
 Unit.component2units = new MapSet();
 //----------------------------------------------------------------------------------------------------
 // event
@@ -537,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;
     }
 }
@@ -555,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 = [];
@@ -575,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); });
         }
     }
@@ -614,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
@@ -630,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);
@@ -648,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);
@@ -669,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);
@@ -685,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);
@@ -703,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));
@@ -724,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);
         }
@@ -742,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);
         }
@@ -761,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);
     },
     /**
@@ -832,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;
     }
 });
 
@@ -867,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') {
@@ -893,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 }) {
@@ -917,209 +1238,12 @@ function AccordionContent(content, {} = {}) {
     };
 }
 
-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;
@@ -1260,15 +1384,14 @@ function DragFrame(frame, { x = 0, y = 0 } = {}) {
     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');
@@ -1276,7 +1399,7 @@ function DragTarget(target, {} = {}) {
         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;
@@ -1284,9 +1407,10 @@ function DragTarget(target, {} = {}) {
         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>');
 }
 
 //----------------------------------------------------------------------------------------------------
@@ -1295,7 +1419,7 @@ function DragTarget(target, {} = {}) {
 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};` : ''}
     ">`);
@@ -1305,7 +1429,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
     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`;
@@ -1321,22 +1445,21 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
             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';
@@ -1360,7 +1483,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
     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`;
@@ -1388,8 +1511,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             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%)' : '';
@@ -1397,7 +1519,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             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%)' : '';
@@ -1405,7 +1527,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             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 = '';
@@ -1457,249 +1579,29 @@ function TextStream(unit, { text = '', speed = 50, fade = 300 } = {}) {
         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');
         }
     }
 }
@@ -3346,35 +3248,228 @@ const icons = {
     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,
@@ -3389,7 +3484,6 @@ const basics = {
     DragTarget,
     AnalogStick,
     DirectionalPad,
-    VolumeController
 };
 const audio = {
     load(path) {