@mulsense/xnew 0.3.6 → 0.4.0

package/dist/xnew.js

@@ -206,10 +206,323 @@
         }
     }
 
-    //----------------------------------------------------------------------------------------------------
-    // utils
-    //----------------------------------------------------------------------------------------------------
-    const SYSTEM_EVENTS = ['start', 'logicupdate', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['start', 'process', 'update', '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(xnew$1.scope((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, Object.assign({}, 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 }) => {
+                if (isActive === true) {
+                    props.listener({ event, type: props.type, scale: 1.0 });
+                }
+                isActive = false;
+                map.delete(event.pointerId);
+            };
+            this.add({ element, options, type: 'dragstart', listener: dragstart });
+            this.add({ element, options, type: 'dragmove', listener: dragmove });
+            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
     //----------------------------------------------------------------------------------------------------
@@ -302,7 +615,8 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], logicupdate: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], process: [], update: [], stop: [], finalize: [] },
+                eventManager: new EventManager(),
             });
             // nest html element
             if (typeof unit._.target === 'string') {
@@ -412,15 +726,15 @@
             }
         }
         static update(unit) {
-            if (unit._.state === 'started') {
+            if (unit._.state === 'started' || unit._.state === 'stopped') {
                 unit._.children.forEach((child) => Unit.update(child));
                 unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
         }
-        static logicupdate(unit) {
+        static process(unit) {
             if (unit._.state === 'started') {
-                unit._.children.forEach((child) => Unit.logicupdate(child));
-                unit._.systems.logicupdate.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.children.forEach((child) => Unit.process(child));
+                unit._.systems.process.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
         }
         static reset() {
@@ -430,7 +744,7 @@
             (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
             Unit.ticker = new Ticker(() => {
                 Unit.start(Unit.root);
-                Unit.logicupdate(Unit.root);
+                Unit.process(Unit.root);
                 Unit.update(Unit.root);
             });
         }
@@ -487,7 +801,7 @@
                     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);
+                        this._.eventManager.add({ element: this.element, type, listener: execute, options });
                     }
                 }
             });
@@ -500,11 +814,11 @@
                 }
                 (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 (item === undefined)
+                        return;
+                    this._.listeners.delete(type, listener);
+                    if (/^[A-Za-z]/.test(type)) {
+                        this._.eventManager.remove({ type, listener: item.execute });
                     }
                 });
                 if (this._.listeners.has(type) === false) {
@@ -923,279 +1237,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) => {
-            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 KeyboardEvent(keyboard) {
-        const state = {};
-        const keydown = xnew$1.scope((event) => {
-            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);
-        keyboard.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)
-            };
-        }
-    }
-    function PointerEvent(unit) {
-        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;
@@ -1336,15 +1383,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 pointer = xnew$1(absolute.parentElement, PointerEvent);
+        const target = xnew$1(absolute.parentElement);
         const current = { x: 0, y: 0 };
         const offset = { x: 0, y: 0 };
         let dragged = false;
-        pointer.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');
@@ -1352,7 +1398,7 @@
             current.x = position.x - offset.x;
             current.y = position.y - offset.y;
         });
-        pointer.on('-dragmove', ({ event, delta }) => {
+        target.on('dragmove', ({ event, delta }) => {
             if (dragged !== true)
                 return;
             current.x += delta.x;
@@ -1360,9 +1406,10 @@
             absolute.style.left = `${current.x}px`;
             absolute.style.top = `${current.y}px`;
         });
-        pointer.on('-dragcancel -dragend', ({ event }) => {
+        target.on('dragend', ({ event }) => {
             dragged = false;
         });
+        xnew$1.nest('<div>');
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1371,7 +1418,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};` : ''}
     ">`);
@@ -1381,7 +1428,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`;
@@ -1397,22 +1444,21 @@
                 xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
                 xnew$1('<circle cx="50" cy="50" r="23">');
             });
-            const pointer = xnew$1(PointerEvent);
-            pointer.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 });
             });
-            pointer.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 });
             });
-            pointer.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';
@@ -1436,7 +1482,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`;
@@ -1464,8 +1510,7 @@
                 xnew$1('<polygon points="11 50 20 42 20 58">');
                 xnew$1('<polygon points="89 50 80 42 80 58">');
             });
-            const pointer = xnew$1(PointerEvent);
-            pointer.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%)' : '';
@@ -1473,7 +1518,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-down', { vector });
             });
-            pointer.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%)' : '';
@@ -1481,7 +1526,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-move', { vector });
             });
-            pointer.on('-dragend', ({ event }) => {
+            unit.on('dragend', ({ event }) => {
                 const vector = { x: 0, y: 0 };
                 targets[0].element.style.filter = '';
                 targets[1].element.style.filter = '';
@@ -1533,249 +1578,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(KeyboardEvent).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');
             }
         }
     }
@@ -3422,37 +3247,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(PointerEvent);
-        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,
-        PointerEvent,
-        DirectEvent,
-        ResizeEvent,
-        KeyboardEvent,
         ModalFrame,
         ModalContent,
         AccordionFrame,
@@ -3467,7 +3483,6 @@
         DragTarget,
         AnalogStick,
         DirectionalPad,
-        VolumeController
     };
     const audio = {
         load(path) {