@mulsense/xnew 0.1.5 → 0.1.7

package/dist/xnew.js

@@ -223,7 +223,7 @@
     }
 
     //----------------------------------------------------------------------------------------------------
-    // Utils
+    // defines
     //----------------------------------------------------------------------------------------------------
     const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
     class UnitPromise {
@@ -798,61 +798,58 @@
         Unit.current._.captures.push({ checker, execute: Unit.wrap(Unit.current, (unit) => execute(unit)) });
     };
 
-    function UserEvent(self) {
-        const unit = xnew$1();
-        unit.on('pointerdown', (event) => self.emit('-pointerdown', { event, position: getPosition(self.element, event) }));
-        unit.on('pointermove', (event) => self.emit('-pointermove', { event, position: getPosition(self.element, event) }));
-        unit.on('pointerup', (event) => self.emit('-pointerup', { event, position: getPosition(self.element, event) }));
-        unit.on('wheel', (event) => self.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
+    function PointerEvent(unit) {
+        const internal = xnew$1();
+        internal.on('pointerdown', (event) => unit.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
+        internal.on('pointermove', (event) => unit.emit('-pointermove', { event, position: getPosition(unit.element, event) }));
+        internal.on('pointerup', (event) => unit.emit('-pointerup', { event, position: getPosition(unit.element, event) }));
+        internal.on('wheel', (event) => unit.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
+        internal.on('mouseover', (event) => unit.emit('-mouseover', { event, position: getPosition(unit.element, event) }));
+        internal.on('mouseout', (event) => unit.emit('-mouseout', { event, position: getPosition(unit.element, event) }));
         const drag = xnew$1(DragEvent);
-        drag.on('-dragstart', (...args) => self.emit('-dragstart', ...args));
-        drag.on('-dragmove', (...args) => self.emit('-dragmove', ...args));
-        drag.on('-dragend', (...args) => self.emit('-dragend', ...args));
-        drag.on('-dragcancel', (...args) => self.emit('-dragcancel', ...args));
+        drag.on('-dragstart', (...args) => unit.emit('-dragstart', ...args));
+        drag.on('-dragmove', (...args) => unit.emit('-dragmove', ...args));
+        drag.on('-dragend', (...args) => unit.emit('-dragend', ...args));
+        drag.on('-dragcancel', (...args) => unit.emit('-dragcancel', ...args));
         const gesture = xnew$1(GestureEvent);
-        gesture.on('-gesturestart', (...args) => self.emit('-gesturestart', ...args));
-        gesture.on('-gesturemove', (...args) => self.emit('-gesturemove', ...args));
-        gesture.on('-gestureend', (...args) => self.emit('-gestureend', ...args));
-        gesture.on('-gesturecancel', (...args) => self.emit('-gesturecancel', ...args));
-        const keyborad = xnew$1(Keyboard);
-        keyborad.on('-keydown', (...args) => self.emit('-keydown', ...args));
-        keyborad.on('-keyup', (...args) => self.emit('-keyup', ...args));
-        keyborad.on('-arrowkeydown', (...args) => self.emit('-arrowkeydown', ...args));
-        keyborad.on('-arrowkeyup', (...args) => self.emit('-arrowkeyup', ...args));
+        gesture.on('-gesturestart', (...args) => unit.emit('-gesturestart', ...args));
+        gesture.on('-gesturemove', (...args) => unit.emit('-gesturemove', ...args));
+        gesture.on('-gestureend', (...args) => unit.emit('-gestureend', ...args));
+        gesture.on('-gesturecancel', (...args) => unit.emit('-gesturecancel', ...args));
     }
-    function DragEvent(self) {
+    function DragEvent(unit) {
         xnew$1().on('pointerdown', (event) => {
             const id = event.pointerId;
-            const position = getPosition(self.element, event);
+            const position = getPosition(unit.element, event);
             let previous = position;
             xnew$1(() => {
                 xnew$1.listener(window).on('pointermove', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
+                        const position = getPosition(unit.element, event);
                         const delta = { x: position.x - previous.x, y: position.y - previous.y };
-                        self.emit('-dragmove', { event, position, delta });
+                        unit.emit('-dragmove', { event, position, delta });
                         previous = position;
                     }
                 });
                 xnew$1.listener(window).on('pointerup', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
-                        self.emit('-dragend', { event, position, });
+                        const position = getPosition(unit.element, event);
+                        unit.emit('-dragend', { event, position, });
                         xnew$1.listener(window).off();
                     }
                 });
                 xnew$1.listener(window).on('pointercancel', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
-                        self.emit('-dragcancel', { event, position, });
+                        const position = getPosition(unit.element, event);
+                        unit.emit('-dragcancel', { event, position, });
                         xnew$1.listener(window).off();
                     }
                 });
             });
-            self.emit('-dragstart', { event, position });
+            unit.emit('-dragstart', { event, position });
         });
     }
-    function GestureEvent(self) {
+    function GestureEvent(unit) {
         const drag = xnew$1(DragEvent);
         let isActive = false;
         const map = new Map();
@@ -860,7 +857,7 @@
             map.set(event.pointerId, Object.assign({}, position));
             isActive = map.size === 2 ? true : false;
             if (isActive === true) {
-                self.emit('-gesturestart', {});
+                unit.emit('-gesturestart', {});
             }
         });
         drag.on('-dragmove', ({ event, position, delta }) => {
@@ -886,20 +883,20 @@
                 //         rotate = sign > 0.0 ? +angle : -angle;
                 //     }
                 // }
-                self.emit('-gesturemove', { event, position, delta, scale });
+                unit.emit('-gesturemove', { event, position, delta, scale });
             }
             map.set(event.pointerId, position);
         });
         drag.on('-dragend', ({ event }) => {
             if (isActive === true) {
-                self.emit('-gestureend', {});
+                unit.emit('-gestureend', {});
             }
             isActive = false;
             map.delete(event.pointerId);
         });
         drag.on('-dragcancel', ({ event }) => {
             if (isActive === true) {
-                self.emit('-gesturecancel', { event });
+                unit.emit('-gesturecancel', { event });
             }
             isActive = false;
             map.delete(event.pointerId);
@@ -912,21 +909,26 @@
             return others;
         }
     }
-    function Keyboard(self) {
+    function getPosition(element, event) {
+        const rect = element.getBoundingClientRect();
+        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    }
+
+    function KeyboardEvent(unit) {
         const state = {};
         xnew$1.listener(window).on('keydown', (event) => {
             state[event.code] = 1;
-            self.emit('-keydown', { event, code: event.code });
+            unit.emit('-keydown', { event, type: '-keydown', code: event.code });
         });
         xnew$1.listener(window).on('keyup', (event) => {
             state[event.code] = 0;
-            self.emit('-keyup', { event, code: event.code });
+            unit.emit('-keyup', { event, type: '-keyup', code: event.code });
         });
         xnew$1.listener(window).on('keydown', (event) => {
-            self.emit('-arrowkeydown', { event, code: event.code, vector: getVector() });
+            unit.emit('-arrowkeydown', { event, type: '-arrowkeydown', code: event.code, vector: getVector() });
         });
         xnew$1.listener(window).on('keyup', (event) => {
-            self.emit('-arrowkeyup', { event, code: event.code, vector: getVector() });
+            unit.emit('-arrowkeyup', { event, type: '-arrowkeyup', code: event.code, vector: getVector() });
         });
         function getVector() {
             return {
@@ -935,16 +937,12 @@
             };
         }
     }
-    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' } = {}) {
         const size = { width, height };
         const wrapper = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
         const absolute = xnew$1.nest('<div style="position: absolute; margin: auto;">');
-        const canvas = xnew$1.nest(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none;">`);
+        const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none;">`);
         xnew$1(wrapper, ResizeEvent).on('-resize', resize);
         resize();
         function resize() {
@@ -975,24 +973,23 @@
         }
         return {
             get canvas() {
-                return canvas;
+                return canvas.element;
             },
             resize(width, height) {
                 size.width = width;
                 size.height = height;
-                canvas.setAttribute('width', width + 'px');
-                canvas.setAttribute('height', height + 'px');
+                canvas.element.setAttribute('width', width + 'px');
+                canvas.element.setAttribute('height', height + 'px');
                 resize();
             },
-            get scale() {
-                return { x: size.width / canvas.clientWidth, y: size.height / canvas.clientHeight };
-            }
         };
     }
 
     function InputFrame(frame, {} = {}) {
         xnew$1.nest('<div>');
-        xnew$1.capture((unit) => unit.element.tagName.toLowerCase() === 'input', (unit) => {
+        xnew$1.capture((unit) => {
+            return unit.element.tagName.toLowerCase() === 'input';
+        }, (unit) => {
             const element = unit.element;
             xnew$1.listener(element).on('input', (event) => {
                 frame.emit('-input', { event });
@@ -1006,177 +1003,171 @@
         });
     }
 
-    function ModalFrame(frame, {} = {}) {
-        xnew$1.context('xnew.modalframe', frame);
-        xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
-        xnew$1.capture((unit) => unit.components.includes(ModalContent), (unit) => {
+    function ModalFrame(frame, { duration = 200, easing = 'ease' } = {}) {
+        const internal = xnew$1((internal) => {
+            return {};
         });
-        xnew$1().on('click', (event) => frame === null || frame === void 0 ? void 0 : frame.close());
+        xnew$1.context('xnew.modalframe', internal);
+        xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
+        xnew$1().on('click', (event) => frame.close());
+        xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
         return {
             close() {
-                frame.emit('-close');
+                xnew$1.transition((x) => internal.emit('-transition', { rate: 1.0 - x }), duration, easing)
+                    .next(() => frame.finalize());
             }
         };
     }
-    function ModalContent(content, { duration = 200, easing = 'ease', background = 'rgba(0, 0, 0, 0.1)' } = {}) {
-        const frame = xnew$1.context('xnew.modalframe');
-        const div = xnew$1.nest('<div style="width: 100%; height: 100%; opacity: 0;">');
-        div.style.background = background;
+    function ModalContent(content, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
+        const internal = xnew$1.context('xnew.modalframe');
+        xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0; background: ${background}">`);
         xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
         xnew$1().on('click', (event) => event.stopPropagation());
-        xnew$1.timeout(() => frame.emit('-open'));
-        frame.on('-open', () => {
-            xnew$1.transition((x) => {
-                div.style.opacity = x.toString();
-            }, duration, easing);
-        });
-        frame.on('-close', () => {
-            xnew$1.transition((x) => {
-                div.style.opacity = (1.0 - x).toString();
-            }, duration, easing).next(() => frame.finalize());
+        internal.on('-transition', ({ rate }) => {
+            content.transition({ element: content.element, rate });
         });
+        return {
+            transition({ element, rate }) {
+                const wrapper = element.parentElement;
+                wrapper.style.opacity = rate.toString();
+            }
+        };
     }
 
-    function TabFrame(frame, { select = 0 } = {}) {
-        xnew$1.context('xnew.tabframe', frame);
-        const buttons = [];
-        const contents = [];
-        xnew$1.capture((unit) => unit.components.includes(TabButton), (unit) => {
-            buttons.push(unit);
+    function TabFrame(frame, { select } = {}) {
+        const internal = xnew$1((internal) => {
+            const buttons = new Map();
+            const contents = new Map();
+            return { frame, buttons, contents };
         });
-        xnew$1.capture((unit) => unit.components.includes(TabContent), (unit) => {
-            contents.push(unit);
-        });
-        frame.on('-click', ({ unit }) => execute(buttons.indexOf(unit)));
-        const timeout = xnew$1.timeout(() => execute(select));
-        function execute(index) {
-            timeout.clear();
-            const button = buttons[index];
-            const content = contents[index];
-            buttons.filter((item) => item !== button).forEach((item) => item.deselect());
-            contents.filter((item) => item !== content).forEach((item) => item.deselect());
-            button.select();
-            content.select();
-        }
+        xnew$1.context('xnew.tabframe', internal);
+        xnew$1.timeout(() => internal.emit('-select', { key: select !== null && select !== void 0 ? select : [...internal.buttons.keys()][0] }));
     }
-    function TabButton(button, {} = {}) {
-        const frame = xnew$1.context('xnew.tabframe');
-        xnew$1.nest('<div>');
-        button.on('click', () => frame.emit('-click', { unit: button }));
+    function TabButton(button, { key } = {}) {
+        const internal = xnew$1.context('xnew.tabframe');
+        const div = xnew$1.nest('<div>');
+        key = key !== null && key !== void 0 ? key : (internal.buttons.size).toString();
+        internal.buttons.set(key, button);
+        button.on('click', () => {
+            internal.emit('-select', { key });
+        });
+        internal.on('-select', ({ key }) => {
+            const select = internal.buttons.get(key);
+            if (select === button) {
+                button.select({ element: div });
+            }
+            else {
+                button.deselect({ element: div });
+            }
+        });
         return {
-            select() {
-                Object.assign(button.element.style, { opacity: 1.0, cursor: 'text' });
+            select({ element }) {
+                Object.assign(element.style, { opacity: 1.0, cursor: 'text' });
             },
-            deselect() {
-                Object.assign(button.element.style, { opacity: 0.6, cursor: 'pointer' });
+            deselect({ element }) {
+                Object.assign(element.style, { opacity: 0.6, cursor: 'pointer' });
             }
         };
     }
-    function TabContent(self, {} = {}) {
-        xnew$1.context('xnew.tabframe');
-        xnew$1.nest('<div>');
+    function TabContent(content, { key } = {}) {
+        const internal = xnew$1.context('xnew.tabframe');
+        const div = xnew$1.nest('<div style="display: none;">');
+        key = key !== null && key !== void 0 ? key : (internal.contents.size).toString();
+        internal.contents.set(key, content);
+        internal.on('-select', ({ key }) => {
+            const select = internal.contents.get(key);
+            if (select === content) {
+                content.select({ element: div });
+            }
+            else {
+                content.deselect({ element: div });
+            }
+        });
         return {
-            select() {
-                Object.assign(self.element.style, { display: 'block' });
+            select({ element }) {
+                Object.assign(element.style, { display: 'block' });
             },
-            deselect() {
-                Object.assign(self.element.style, { display: 'none' });
+            deselect({ element }) {
+                Object.assign(element.style, { display: 'none' });
             }
         };
     }
 
-    function AccordionFrame(frame, {} = {}) {
-        xnew$1.context('xnew.accordionframe', frame);
-        let content = null;
-        xnew$1.capture((unit) => unit.components.includes(AccordionContent), (unit) => {
-            content = unit;
+    function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
+        const internal = xnew$1((internal) => {
+            return { frame, open, rate: 0.0, };
         });
+        xnew$1.context('xnew.accordionframe', internal);
+        internal.on('-transition', ({ rate }) => internal.rate = rate);
+        internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
         return {
             toggle() {
-                if ((content === null || content === void 0 ? void 0 : content.status) === 1.0) {
-                    frame.emit('-close');
+                if (internal.rate === 1.0) {
+                    frame.close();
                 }
-                else if ((content === null || content === void 0 ? void 0 : content.status) === 0.0) {
-                    frame.emit('-open');
+                else if (internal.rate === 0.0) {
+                    frame.open();
                 }
             },
             open() {
-                if ((content === null || content === void 0 ? void 0 : content.status) === 0.0) {
-                    frame.emit('-open');
+                if (internal.rate === 0.0) {
+                    xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
                 }
             },
             close() {
-                if ((content === null || content === void 0 ? void 0 : content.status) === 1.0) {
-                    frame.emit('-close');
+                if (internal.rate === 1.0) {
+                    xnew$1.transition((x) => internal.emit('-transition', { rate: 1.0 - x }), duration, easing);
                 }
             }
         };
     }
     function AccordionHeader(header, {} = {}) {
-        const frame = xnew$1.context('xnew.accordionframe');
+        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', () => frame.toggle());
+        header.on('click', () => internal.frame.toggle());
     }
     function AccordionBullet(bullet, { type = 'arrow' } = {}) {
-        const frame = xnew$1.context('xnew.accordionframe');
-        xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.5em; margin: 0 0.3em;">');
-        frame.on('-transition', ({ status }) => { var _a; return (_a = bullet.transition) === null || _a === void 0 ? void 0 : _a.call(bullet, status); });
+        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') {
-            const arrow = xnew$1(`<div style="width: 100%; height: 0.5em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center center;">`);
-            return {
-                transition(status) {
-                    arrow.element.style.transform = `rotate(${status * 90 - 45}deg)`;
-                }
-            };
+            const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
+            arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
+            internal.on('-transition', ({ rate }) => {
+                arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
+            });
         }
         else if (type === 'plusminus') {
-            xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center center;">`);
-            const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center center;">`);
+            const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
+            const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
             line2.element.style.transform = `rotate(90deg)`;
-            return {
-                transition(status) {
-                    line2.element.style.opacity = `${1.0 - status}`;
-                }
-            };
+            line2.element.style.opacity = `${1.0 - internal.rate}`;
+            internal.on('-transition', ({ rate }) => {
+                line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
+                line2.element.style.transform = `rotate(${rate * 180}deg)`;
+            });
         }
     }
-    function AccordionContent(content, { open = false, duration = 200, easing = 'ease' } = {}) {
-        const frame = xnew$1.context('xnew.accordionframe');
-        const outer = xnew$1.nest('<div>');
-        const inner = xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
-        let status = open ? 1.0 : 0.0;
-        outer.style.display = status ? 'block' : 'none';
-        frame.emit('-transition', { status });
-        frame.on('-open', () => {
-            xnew$1.transition((x) => {
-                status = x;
-                frame.emit('-transition', { status });
-                content.transition(status);
-            }, duration, easing);
-        });
-        frame.on('-close', () => {
-            xnew$1.transition((x) => {
-                status = 1.0 - x;
-                frame.emit('-transition', { status });
-                content.transition(status);
-            }, duration, easing);
+    function AccordionContent(content, {} = {}) {
+        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 });
         });
         return {
-            get status() {
-                return status;
-            },
-            transition(status) {
-                outer.style.display = 'block';
-                if (status === 0.0) {
-                    outer.style.display = 'none';
+            transition({ element, rate }) {
+                const wrapper = element.parentElement;
+                wrapper.style.display = 'block';
+                if (rate === 0.0) {
+                    wrapper.style.display = 'none';
                 }
-                else if (status < 1.0) {
-                    Object.assign(outer.style, { height: inner.offsetHeight * status + 'px', overflow: 'hidden', opacity: status });
+                else if (rate < 1.0) {
+                    Object.assign(wrapper.style, { height: element.offsetHeight * rate + 'px', overflow: 'hidden', opacity: rate });
                 }
                 else {
-                    Object.assign(outer.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
+                    Object.assign(wrapper.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
                 }
-            },
+            }
         };
     }
 
@@ -1187,18 +1178,30 @@
     function DragTarget(target, {} = {}) {
         const { frame, absolute } = xnew$1.context('xnew.dragframe');
         xnew$1.nest('<div>');
-        const user = xnew$1(absolute.parentElement, UserEvent);
+        const pointer = xnew$1(absolute.parentElement, PointerEvent);
         const current = { x: 0, y: 0 };
-        user.on('-dragstart', ({ event, position }) => {
-            current.x = parseFloat(absolute.style.left || '0') + position.x;
-            current.y = parseFloat(absolute.style.top || '0') + position.y;
+        const offset = { x: 0, y: 0 };
+        let dragged = false;
+        pointer.on('-dragstart', ({ event, position }) => {
+            if (target.element.contains(event.target) === false)
+                return;
+            dragged = true;
+            offset.x = position.x - parseFloat(absolute.style.left || '0');
+            offset.y = position.y - parseFloat(absolute.style.top || '0');
+            current.x = position.x - offset.x;
+            current.y = position.y - offset.y;
         });
-        user.on('-dragmove', ({ event, delta }) => {
+        pointer.on('-dragmove', ({ event, delta }) => {
+            if (dragged !== true)
+                return;
             current.x += delta.x;
             current.y += delta.y;
             absolute.style.left = `${current.x}px`;
             absolute.style.top = `${current.y}px`;
         });
+        pointer.on('-dragcancel -dragend', ({ event }) => {
+            dragged = false;
+        });
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1207,184 +1210,264 @@
     function SVGTemplate(self, { fill = null, fillOpacity = 0.8, stroke = null, strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' }) {
         xnew$1.nest(`<svg
         viewBox="0 0 100 100"
-        style="position: absolute; width: 100%; height: 100%; user-select: none;
+        style="position: absolute; width: 100%; height: 100%; pointer-select: none;
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
         ${stroke ? `stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};` : ''}
     ">`);
     }
-    function TouchStick(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<polygon points="50  7 40 18 60 18">');
-            xnew$1('<polygon points="50 93 40 83 60 83">');
-            xnew$1('<polygon points=" 7 50 18 40 18 60">');
-            xnew$1('<polygon points="93 50 83 40 83 60">');
-        });
-        const target = xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<circle cx="50" cy="50" r="23">');
-        });
-        const user = xnew$1(UserEvent);
-        user.on('-dragstart', ({ event, position }) => {
-            const vector = getVector(position);
-            target.element.style.filter = 'brightness(90%)';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-down', { vector });
-        });
-        user.on('-dragmove', ({ event, position }) => {
-            const vector = getVector(position);
-            target.element.style.filter = 'brightness(90%)';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-move', { vector });
-        });
-        user.on('-dragend', ({ event }) => {
-            const vector = { x: 0, y: 0 };
-            target.element.style.filter = '';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-up', { vector });
-        });
-        function getVector(position) {
-            const x = position.x - size / 2;
-            const y = position.y - size / 2;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
-            const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
-            return { x: Math.cos(a) * d, y: Math.sin(a) * d };
+    function AnalogStick(self, { size, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
+        let internal;
+        let newsize;
+        if (size) {
+            newsize = size;
         }
-    }
-    function TouchDPad(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        const polygons = [
-            '<polygon points="50 50 35 35 35  5 37  3 63  3 65  5 65 35">',
-            '<polygon points="50 50 35 65 35 95 37 97 63 97 65 95 65 65">',
-            '<polygon points="50 50 35 35  5 35  3 37  3 63  5 65 35 65">',
-            '<polygon points="50 50 65 35 95 35 97 37 97 63 95 65 65 65">'
-        ];
-        const targets = polygons.map((polygon) => {
-            return xnew$1((self) => {
-                xnew$1.extend(SVGTemplate, { fill, fillOpacity });
-                xnew$1(polygon);
+        else {
+            newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+            xnew$1(self.element, ResizeEvent).on('-resize', () => {
+                newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+                internal === null || internal === void 0 ? void 0 : internal.reboot();
             });
-        });
-        xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<polyline points="35 35 35  5 37  3 63  3 65  5 65 35">');
-            xnew$1('<polyline points="35 65 35 95 37 97 63 97 65 95 65 65">');
-            xnew$1('<polyline points="35 35  5 35  3 37  3 63  5 65 35 65">');
-            xnew$1('<polyline points="65 35 95 35 97 37 97 63 95 65 65 65">');
-            xnew$1('<polygon points="50 11 42 20 58 20">');
-            xnew$1('<polygon points="50 89 42 80 58 80">');
-            xnew$1('<polygon points="11 50 20 42 20 58">');
-            xnew$1('<polygon points="89 50 80 42 80 58">');
-        });
-        const user = xnew$1(UserEvent);
-        user.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%)' : '';
-            targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
-            targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
-            self.emit('-down', { vector });
-        });
-        user.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%)' : '';
-            targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
-            targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
-            self.emit('-move', { vector });
-        });
-        user.on('-dragend', ({ event }) => {
-            const vector = { x: 0, y: 0 };
-            targets[0].element.style.filter = '';
-            targets[1].element.style.filter = '';
-            targets[2].element.style.filter = '';
-            targets[3].element.style.filter = '';
-            self.emit('-up', { vector });
-        });
-        function getVector(position) {
-            const x = position.x - size / 2;
-            const y = position.y - size / 2;
-            const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
-            const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
-            vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
-            vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
-            return vector;
         }
+        internal = xnew$1(() => {
+            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((self) => {
+                xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+                xnew$1('<polygon points="50  7 40 18 60 18">');
+                xnew$1('<polygon points="50 93 40 83 60 83">');
+                xnew$1('<polygon points=" 7 50 18 40 18 60">');
+                xnew$1('<polygon points="93 50 83 40 83 60">');
+            });
+            const target = xnew$1((self) => {
+                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 }) => {
+                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';
+                self.emit('-down', { vector });
+            });
+            pointer.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';
+                self.emit('-move', { vector });
+            });
+            pointer.on('-dragend', ({ event }) => {
+                const vector = { x: 0, y: 0 };
+                target.element.style.filter = '';
+                target.element.style.left = vector.x * newsize / 4 + 'px';
+                target.element.style.top = vector.y * newsize / 4 + 'px';
+                self.emit('-up', { vector });
+            });
+            function getVector(position) {
+                const x = position.x - newsize / 2;
+                const y = position.y - newsize / 2;
+                const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+                const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+                return { x: Math.cos(a) * d, y: Math.sin(a) * d };
+            }
+        });
     }
-    function TouchButton(self, { size = 80, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        const target = xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<circle cx="50" cy="50" r="40">');
+    function DirectionalPad(self, { size, diagonal = true, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
+        let internal;
+        let newsize;
+        if (size) {
+            newsize = size;
+        }
+        else {
+            newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+            xnew$1(self.element, ResizeEvent).on('-resize', () => {
+                newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+                internal === null || internal === void 0 ? void 0 : internal.reboot();
+            });
+        }
+        internal = xnew$1(() => {
+            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;">`);
+            const polygons = [
+                '<polygon points="50 50 35 35 35  5 37  3 63  3 65  5 65 35">',
+                '<polygon points="50 50 35 65 35 95 37 97 63 97 65 95 65 65">',
+                '<polygon points="50 50 35 35  5 35  3 37  3 63  5 65 35 65">',
+                '<polygon points="50 50 65 35 95 35 97 37 97 63 95 65 65 65">'
+            ];
+            const targets = polygons.map((polygon) => {
+                return xnew$1((self) => {
+                    xnew$1.extend(SVGTemplate, { fill, fillOpacity });
+                    xnew$1(polygon);
+                });
+            });
+            xnew$1((self) => {
+                xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+                xnew$1('<polyline points="35 35 35  5 37  3 63  3 65  5 65 35">');
+                xnew$1('<polyline points="35 65 35 95 37 97 63 97 65 95 65 65">');
+                xnew$1('<polyline points="35 35  5 35  3 37  3 63  5 65 35 65">');
+                xnew$1('<polyline points="65 35 95 35 97 37 97 63 95 65 65 65">');
+                xnew$1('<polygon points="50 11 42 20 58 20">');
+                xnew$1('<polygon points="50 89 42 80 58 80">');
+                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 }) => {
+                const vector = getVector(position);
+                targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
+                targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
+                targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+                targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+                self.emit('-down', { vector });
+            });
+            pointer.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%)' : '';
+                targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+                targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+                self.emit('-move', { vector });
+            });
+            pointer.on('-dragend', ({ event }) => {
+                const vector = { x: 0, y: 0 };
+                targets[0].element.style.filter = '';
+                targets[1].element.style.filter = '';
+                targets[2].element.style.filter = '';
+                targets[3].element.style.filter = '';
+                self.emit('-up', { vector });
+            });
+            function getVector(position) {
+                const x = position.x - newsize / 2;
+                const y = position.y - newsize / 2;
+                const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+                const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+                const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
+                if (diagonal === true) {
+                    vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
+                    vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
+                }
+                else if (Math.abs(vector.x) > Math.abs(vector.y)) {
+                    vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
+                    vector.y = 0;
+                }
+                else {
+                    vector.x = 0;
+                    vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
+                }
+                return vector;
+            }
         });
-        const user = xnew$1(UserEvent);
-        user.on('-dragstart', (event) => {
-            target.element.style.filter = 'brightness(90%)';
-            self.emit('-down', event);
+    }
+
+    const context = new AudioContext();
+    const master = context.createGain();
+    master.gain.value = 1.0;
+    master.connect(context.destination);
+    function connect(params) {
+        const nodes = {};
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            nodes[key] = context[`create${type}`]();
+            const node = nodes[key];
+            Object.keys(props).forEach((name) => {
+                var _a;
+                if (((_a = node[name]) === null || _a === void 0 ? void 0 : _a.value) !== undefined) {
+                    node[name].value = props[name];
+                }
+                else {
+                    node[name] = props[name];
+                }
+            });
         });
-        user.on('-dragend', (event) => {
-            target.element.style.filter = '';
-            self.emit('-up', event);
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            to.forEach((to) => {
+                let dest = null;
+                if (to.indexOf('.') > 0) {
+                    dest = nodes[to.split('.')[0]][to.split('.')[1]];
+                }
+                else if (nodes[to]) {
+                    dest = nodes[to];
+                }
+                else if (to === 'master') {
+                    dest = master;
+                }
+                nodes[key].connect(dest);
+            });
         });
+        return nodes;
     }
 
-    class Audio {
-        static initialize() {
-            var _a;
-            if (typeof window !== 'undefined' && window instanceof Window) {
-                Audio.context = new ((_a = window.AudioContext) !== null && _a !== void 0 ? _a : window.webkitAudioContext)();
-                Audio.master = Audio.context.createGain();
-                Audio.master.gain.value = 1.0;
-                Audio.master.connect(Audio.context.destination);
+    const store = new Map();
+    function load(path) {
+        return new AudioFile(path);
+    }
+    class AudioFile {
+        constructor(path) {
+            this.data = {};
+            if (store.has(path)) {
+                this.data = store.get(path);
             }
-        }
-        static connect(params) {
-            if (!Audio.context)
-                throw new Error("Audio context not initialized");
-            const nodes = {};
-            Object.keys(params).forEach((key) => {
-                const [type, props, ...to] = params[key];
-                nodes[key] = Audio.context[`create${type}`]();
-                Object.keys(props).forEach((name) => {
-                    var _a;
-                    if (((_a = nodes[key][name]) === null || _a === void 0 ? void 0 : _a.value) !== undefined) {
-                        nodes[key][name].value = props[name];
-                    }
-                    else {
-                        nodes[key][name] = props[name];
-                    }
-                });
-            });
-            Object.keys(params).forEach((key) => {
-                const [type, props, ...to] = params[key];
-                to.forEach((to) => {
-                    let dest = null;
-                    if (to.indexOf('.') > 0) {
-                        dest = nodes[to.split('.')[0]][to.split('.')[1]];
-                    }
-                    else if (nodes[to]) {
-                        dest = nodes[to];
-                    }
-                    else if (to === 'master') {
-                        dest = Audio.master;
-                    }
-                    nodes[key].connect(dest);
+            else {
+                this.data.buffer = null;
+                this.data.promise = fetch(path)
+                    .then((response) => response.arrayBuffer())
+                    .then((response) => context.decodeAudioData(response))
+                    .then((response) => {
+                    this.data.buffer = response;
+                    this.nodes.source.buffer = this.data.buffer;
+                })
+                    .catch(() => {
+                    console.warn(`"${path}" could not be loaded.`);
                 });
+                store.set(path, this.data);
+            }
+            this.startTime = null;
+            this.nodes = connect({
+                source: ['BufferSource', {}, 'volume'],
+                volume: ['Gain', { gain: 1.0 }, 'master'],
             });
-            return nodes;
+        }
+        isReady() {
+            return this.data.buffer ? true : false;
+        }
+        get promise() {
+            return this.data.promise;
+        }
+        set volume(value) {
+            this.nodes.volume.gain.value = value;
+        }
+        get volume() {
+            return this.nodes.volume.gain.value;
+        }
+        set loop(value) {
+            this.nodes.source.loop = value;
+        }
+        get loop() {
+            return this.nodes.source.loop;
+        }
+        play(offset = 0) {
+            if (this.startTime !== null)
+                return;
+            if (this.isReady()) {
+                this.startTime = context.currentTime;
+                this.nodes.source.playbackRate.value = 1;
+                this.nodes.source.start(context.currentTime, offset / 1000);
+            }
+            else {
+                this.promise.then(() => this.play());
+            }
+        }
+        pause() {
+            if (this.startTime === null)
+                return;
+            this.nodes.source.stop(context.currentTime);
+            const elapsed = (context.currentTime - this.startTime) % this.data.buffer.duration * 1000;
+            this.startTime = null;
+            return elapsed;
         }
     }
-    Audio.context = null;
-    Audio.master = null;
-    Audio.initialize();
 
     function synthesizer(props, effects) {
         return new Synthesizer(props, effects);
@@ -1408,30 +1491,20 @@
                 window.removeEventListener('mousedown', initialize, true);
             }
         }
-        constructor({ oscillator = null, filter = null, amp = null } = {}, { bmp = null, reverb = null, delay = null } = {}) {
+        constructor({ oscillator = null, filter = null, amp = null } = {}, { bmp = null, reverb = null } = {}) {
             this.oscillator = isObject(oscillator) ? oscillator : {};
             this.oscillator.type = setType(this.oscillator.type, ['sine', 'triangle', 'square', 'sawtooth']);
             this.oscillator.envelope = setEnvelope(this.oscillator.envelope, -36, +36);
             this.oscillator.LFO = setLFO(this.oscillator.LFO, 36);
             this.filter = isObject(filter) ? filter : {};
             this.filter.type = setType(this.filter.type, ['lowpass', 'highpass', 'bandpass']);
-            this.filter.Q = isNumber(this.filter.Q) ? clamp(this.filter.Q, 0, 32) : 0;
-            // cutoffはundefinedを使う
             this.filter.cutoff = isNumber(this.filter.cutoff) ? clamp(this.filter.cutoff, 4, 8192) : undefined;
-            this.filter.envelope = setEnvelope(this.filter.envelope, -36, +36);
-            this.filter.LFO = setLFO(this.filter.LFO, 36);
             this.amp = isObject(amp) ? amp : {};
             this.amp.envelope = setEnvelope(this.amp.envelope, 0, 1);
-            this.amp.LFO = setLFO(this.amp.LFO, 36);
             this.bmp = isNumber(bmp) ? clamp(bmp, 60, 240) : 120;
-            this.options = { bmp: this.bmp };
             this.reverb = isObject(reverb) ? reverb : {};
             this.reverb.time = isNumber(this.reverb.time) ? clamp(this.reverb.time, 0, 2000) : 0.0;
             this.reverb.mix = isNumber(this.reverb.mix) ? clamp(this.reverb.mix, 0, 1.0) : 0.0;
-            this.delay = isObject(delay) ? delay : {};
-            this.delay.time = isNumber(this.delay.time) ? clamp(this.delay.time, 0, 2000) : 0.0;
-            this.delay.feedback = isNumber(this.delay.feedback) ? clamp(this.delay.feedback, 0.0, 0.9) : 0.0;
-            this.delay.mix = isNumber(this.delay.mix) ? clamp(this.delay.mix, 0.0, 1.0) : 0.0;
             function setType(type, list, value = 0) {
                 return list.includes(type) ? type : list[value];
             }
@@ -1467,46 +1540,43 @@
         }
         press(frequency, duration = null, wait = 0.0) {
             frequency = typeof frequency === 'string' ? Synthesizer.keymap[frequency] : frequency;
-            duration = typeof duration === 'string' ? (Synthesizer.notemap[duration] * 60 / this.options.bmp) : (duration !== null ? (duration / 1000) : duration);
-            const start = Audio.context.currentTime + wait / 1000;
+            duration = typeof duration === 'string' ? (Synthesizer.notemap[duration] * 60 / this.bmp) : (duration !== null ? (duration / 1000) : duration);
+            const start = context.currentTime + wait / 1000;
             let stop = null;
-            const params = {};
+            const nodes = {};
+            nodes.oscillator = context.createOscillator();
+            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 (this.filter.type && this.filter.cutoff) {
-                params.oscillator = ['Oscillator', {}, 'filter'];
-                params.filter = ['BiquadFilter', {}, 'amp'];
+                nodes.filter = context.createBiquadFilter();
+                nodes.oscillator.connect(nodes.filter);
+                nodes.filter.connect(nodes.amp);
             }
             else {
-                params.oscillator = ['Oscillator', {}, 'amp'];
+                nodes.oscillator.connect(nodes.amp);
             }
-            params.amp = ['Gain', { gain: 0.0 }, 'target'];
-            params.target = ['Gain', { gain: 1.0 }, 'master'];
             if (this.reverb.time > 0.0 && this.reverb.mix > 0.0) {
-                params.amp.push('convolver');
-                params.convolver = ['Convolver', { buffer: impulseResponse({ time: this.reverb.time }) }, 'convolverDepth'];
-                params.convolverDepth = ['Gain', { gain: 1.0 }, 'master'];
-            }
-            if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
-                params.amp.push('delay');
-                params.delay = ['Delay', {}, 'delayDepth', 'delayFeedback'];
-                params.delayDepth = ['Gain', { gain: 1.0 }, 'master'];
-                params.delayFeedback = ['Gain', { gain: this.delay.feedback }, 'delay'];
+                nodes.convolver = context.createConvolver();
+                nodes.convolver.buffer = impulseResponse({ time: this.reverb.time });
+                nodes.convolverDepth = context.createGain();
+                nodes.convolverDepth.gain.value = 1.0;
+                nodes.amp.connect(nodes.convolver);
+                nodes.convolver.connect(nodes.convolverDepth);
+                nodes.convolverDepth.connect(master);
             }
             if (this.oscillator.LFO) {
-                params.oscillatorLFO = ['Oscillator', {}, 'oscillatorLFODepth'];
-                params.oscillatorLFODepth = ['Gain', {}, 'oscillator.frequency'];
-            }
-            if (this.filter.LFO) {
-                params.filterLFO = ['Oscillator', {}, 'filterLFODepth'];
-                params.filterLFODepth = ['Gain', {}, 'filter.frequency'];
+                nodes.oscillatorLFO = context.createOscillator();
+                nodes.oscillatorLFODepth = context.createGain();
+                nodes.oscillatorLFO.connect(nodes.oscillatorLFODepth);
+                nodes.oscillatorLFODepth.connect(nodes.oscillator.frequency);
             }
-            if (this.amp.LFO) {
-                params.ampLFO = ['Oscillator', {}, 'ampLFODepth'];
-                params.ampLFODepth = ['Gain', {}, 'amp.gain'];
-            }
-            const nodes = Audio.connect(params);
             nodes.oscillator.type = this.oscillator.type;
             nodes.oscillator.frequency.value = clamp(frequency, 10.0, 5000.0);
-            if (this.filter.type && this.filter.cutoff) {
+            if (this.filter.type && this.filter.cutoff && nodes.filter) {
                 nodes.filter.type = this.filter.type;
                 nodes.filter.frequency.value = this.filter.cutoff;
             }
@@ -1514,39 +1584,17 @@
                 nodes.target.gain.value *= (1.0 - this.reverb.mix);
                 nodes.convolverDepth.gain.value *= this.reverb.mix;
             }
-            if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
-                console.log(this.delay.time / 1000);
-                nodes.delay.delayTime.value = this.delay.time / 1000;
-                nodes.target.gain.value *= (1.0 - this.delay.mix);
-                nodes.delayDepth.gain.value *= this.delay.mix;
-            }
             {
-                if (this.oscillator.LFO) {
+                if (this.oscillator.LFO && nodes.oscillatorLFO && nodes.oscillatorLFODepth) {
                     nodes.oscillatorLFODepth.gain.value = frequency * (Math.pow(2.0, this.oscillator.LFO.amount / 12.0) - 1.0);
                     nodes.oscillatorLFO.type = this.oscillator.LFO.type;
                     nodes.oscillatorLFO.frequency.value = this.oscillator.LFO.rate;
                     nodes.oscillatorLFO.start(start);
                 }
-                if (this.filter.LFO) {
-                    nodes.filterLFODepth.gain.value = frequency * (Math.pow(2.0, this.filter.LFO.amount / 12.0) - 1.0);
-                    nodes.filterLFO.type = this.filter.LFO.type;
-                    nodes.filterLFO.frequency.value = this.filter.LFO.rate;
-                    nodes.filterLFO.start(start);
-                }
-                if (this.amp.LFO) {
-                    nodes.ampLFODepth.gain.value = this.amp.LFO.amount;
-                    nodes.ampLFO.type = this.amp.LFO.type;
-                    nodes.ampLFO.frequency.value = this.amp.LFO.rate;
-                    nodes.ampLFO.start(start);
-                }
                 if (this.oscillator.envelope) {
                     const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
                     startEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
                 }
-                if (this.filter.envelope) {
-                    const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
-                    startEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
-                }
                 if (this.amp.envelope) {
                     startEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
                 }
@@ -1556,7 +1604,7 @@
                 release.call(this);
             }
             function release() {
-                duration = duration !== null && duration !== void 0 ? duration : (Audio.context.currentTime - start);
+                duration = duration !== null && duration !== void 0 ? duration : (context.currentTime - start);
                 if (this.amp.envelope) {
                     const ADSR = this.amp.envelope.ADSR;
                     const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
@@ -1566,20 +1614,13 @@
                 else {
                     stop = start + duration;
                 }
-                if (this.oscillator.LFO) {
+                if (nodes.oscillatorLFO) {
                     nodes.oscillatorLFO.stop(stop);
                 }
-                if (this.amp.LFO) {
-                    nodes.ampLFO.stop(stop);
-                }
                 if (this.oscillator.envelope) {
                     const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
                     stopEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
                 }
-                if (this.filter.envelope) {
-                    const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
-                    stopEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
-                }
                 if (this.amp.envelope) {
                     stopEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
                 }
@@ -1625,8 +1666,8 @@
     };
     Synthesizer.initialize();
     function impulseResponse({ time, decay = 2.0 }) {
-        const length = Audio.context.sampleRate * time / 1000;
-        const impulse = Audio.context.createBuffer(2, length, Audio.context.sampleRate);
+        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++) {
@@ -1638,8 +1679,9 @@
 
     const basics = {
         Screen,
-        UserEvent,
+        PointerEvent,
         ResizeEvent,
+        KeyboardEvent,
         ModalFrame,
         ModalContent,
         AccordionFrame,
@@ -1652,12 +1694,11 @@
         InputFrame,
         DragFrame,
         DragTarget,
-        TouchStick,
-        TouchDPad,
-        TouchButton,
+        AnalogStick,
+        DirectionalPad,
     };
     const audio = {
-        synthesizer
+        synthesizer, load
     };
     const xnew = Object.assign(xnew$1, {
         basics,