@mulsense/xnew 0.6.1 → 0.6.3

package/dist/xnew.mjs

@@ -207,6 +207,21 @@ class Timer {
     }
 }
 
+function addEvent(target, type, execute, options) {
+    let initalized = false;
+    const id = setTimeout(() => {
+        initalized = true;
+        target.addEventListener(type, execute, options);
+    }, 0);
+    return () => {
+        if (initalized === false) {
+            clearTimeout(id);
+        }
+        else {
+            target.removeEventListener(type, execute);
+        }
+    };
+}
 class Eventor {
     constructor() {
         this.map = new MapMap();
@@ -214,53 +229,62 @@ class Eventor {
     add(element, type, listener, options) {
         const props = { element, type, listener, options };
         let finalize;
-        if (props.type === 'resize') {
-            finalize = this.resize(props);
-        }
-        else if (props.type === 'change') {
-            finalize = this.change(props);
-        }
-        else if (props.type === 'input') {
-            finalize = this.input(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);
+        if (props.type.indexOf('window.') === 0) {
+            if (['window.keydown', 'window.keyup'].includes(props.type)) {
+                finalize = this.window_key(props);
+            }
+            else if (['window.keydown.arrow', 'window.keyup.arrow'].includes(props.type)) {
+                finalize = this.window_key_arrow(props);
+            }
+            else if (['window.keydown.wasd', 'window.keyup.wasd'].includes(props.type)) {
+                finalize = this.window_key_wasd(props);
+            }
+            else {
+                finalize = this.window_basic(props);
+            }
         }
-        else if (['keydown.wasd', 'keyup.wasd'].includes(props.type)) {
-            finalize = this.key_wasd(props);
+        else if (props.type.indexOf('document.') === 0) {
+            {
+                finalize = this.document_basic(props);
+            }
         }
         else {
-            finalize = this.basic(props);
+            if (props.type === 'resize') {
+                finalize = this.element_resize(props);
+            }
+            else if (props.type === 'change') {
+                finalize = this.element_change(props);
+            }
+            else if (props.type === 'input') {
+                finalize = this.element_input(props);
+            }
+            else if (props.type === 'wheel') {
+                finalize = this.element_wheel(props);
+            }
+            else if (props.type === 'click') {
+                finalize = this.element_click(props);
+            }
+            else if (props.type === 'click.outside') {
+                finalize = this.element_click_outside(props);
+            }
+            else if (['pointerdown', 'pointermove', 'pointerup', 'pointerover', 'pointerout'].includes(props.type)) {
+                finalize = this.element_pointer(props);
+            }
+            else if (['pointerdown.outside', 'pointermove.outside', 'pointerup.outside'].includes(props.type)) {
+                finalize = this.element_pointer_outside(props);
+            }
+            else if (['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout'].includes(props.type)) {
+                finalize = this.element_mouse(props);
+            }
+            else if (['touchstart', 'touchmove', 'touchend', 'touchcancel'].includes(props.type)) {
+                finalize = this.element_touch(props);
+            }
+            else if (['dragstart', 'dragmove', 'dragend'].includes(props.type)) {
+                finalize = this.element_drag(props);
+            }
+            else {
+                finalize = this.element_basic(props);
+            }
         }
         this.map.set(props.type, props.listener, finalize);
     }
@@ -271,16 +295,12 @@ class Eventor {
             this.map.delete(type, listener);
         }
     }
-    basic(props) {
-        const execute = (event) => {
+    element_basic(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    resize(props) {
+    element_resize(props) {
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 props.listener({});
@@ -292,8 +312,8 @@ class Eventor {
             observer.unobserve(props.element);
         };
     }
-    change(props) {
-        const execute = (event) => {
+    element_change(props) {
+        return addEvent(props.element, props.type, (event) => {
             let value = null;
             if (event.target.type === 'checkbox') {
                 value = event.target.checked;
@@ -305,14 +325,10 @@ class Eventor {
                 value = event.target.value;
             }
             props.listener({ event, value });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    input(props) {
-        const execute = (event) => {
+    element_input(props) {
+        return addEvent(props.element, props.type, (event) => {
             let value = null;
             if (event.target.type === 'checkbox') {
                 value = event.target.checked;
@@ -324,88 +340,56 @@ class Eventor {
                 value = event.target.value;
             }
             props.listener({ event, value });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    click(props) {
-        const execute = (event) => {
+    element_click(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event, position: pointer(props.element, event).position });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    click_outside(props) {
-        const execute = (event) => {
+    element_click_outside(props) {
+        return addEvent(document, props.type.split('.')[0], (event) => {
             if (props.element.contains(event.target) === false) {
                 props.listener({ event, position: pointer(props.element, event).position });
             }
-        };
-        document.addEventListener(props.type.split('.')[0], execute, props.options);
-        return () => {
-            document.removeEventListener(props.type.split('.')[0], execute);
-        };
+        }, props.options);
     }
-    pointer(props) {
-        const execute = (event) => {
+    element_pointer(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event, position: pointer(props.element, event).position });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    mouse(props) {
-        const execute = (event) => {
+    element_mouse(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event, position: pointer(props.element, event).position });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    touch(props) {
-        const execute = (event) => {
+    element_touch(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event, position: pointer(props.element, event).position });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    pointer_outside(props) {
-        const execute = (event) => {
+    element_pointer_outside(props) {
+        return addEvent(document, props.type.split('.')[0], (event) => {
             if (props.element.contains(event.target) === false) {
                 props.listener({ event, position: pointer(props.element, event).position });
             }
-        };
-        document.addEventListener(props.type.split('.')[0], execute, props.options);
-        return () => {
-            document.removeEventListener(props.type.split('.')[0], execute);
-        };
+        }, props.options);
     }
-    wheel(props) {
-        const execute = (event) => {
+    element_wheel(props) {
+        return addEvent(props.element, props.type, (event) => {
             props.listener({ event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } });
-        };
-        props.element.addEventListener(props.type, execute, props.options);
-        return () => {
-            props.element.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    drag(props) {
+    element_drag(props) {
         let pointermove = null;
         let pointerup = null;
         let pointercancel = null;
-        const pointerdown = (event) => {
+        const pointerdown = addEvent(props.element, 'pointerdown', (event) => {
             const id = event.pointerId;
             const position = pointer(props.element, event).position;
             let previous = position;
-            pointermove = (event) => {
+            pointermove = addEvent(window, '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 };
@@ -414,8 +398,8 @@ class Eventor {
                     }
                     previous = position;
                 }
-            };
-            pointerup = (event) => {
+            }, props.options);
+            pointerup = addEvent(window, 'pointerup', (event) => {
                 if (event.pointerId === id) {
                     const position = pointer(props.element, event).position;
                     if (props.type === 'dragend') {
@@ -423,8 +407,8 @@ class Eventor {
                     }
                     remove();
                 }
-            };
-            pointercancel = (event) => {
+            }, props.options);
+            pointercancel = addEvent(window, 'pointercancel', (event) => {
                 if (event.pointerId === id) {
                     const position = pointer(props.element, event).position;
                     if (props.type === 'dragend') {
@@ -432,168 +416,102 @@ class Eventor {
                     }
                     remove();
                 }
-            };
-            window.addEventListener('pointermove', pointermove);
-            window.addEventListener('pointerup', pointerup);
-            window.addEventListener('pointercancel', pointercancel);
+            }, props.options);
             if (props.type === 'dragstart') {
                 props.listener({ event, position, delta: { x: 0, y: 0 } });
             }
-        };
+        }, props.options);
         function remove() {
-            if (pointermove)
-                window.removeEventListener('pointermove', pointermove);
-            if (pointerup)
-                window.removeEventListener('pointerup', pointerup);
-            if (pointercancel)
-                window.removeEventListener('pointercancel', pointercancel);
+            pointermove === null || pointermove === void 0 ? void 0 : pointermove();
             pointermove = null;
+            pointerup === null || pointerup === void 0 ? void 0 : pointerup();
             pointerup = null;
+            pointercancel === null || pointercancel === void 0 ? void 0 : pointercancel();
             pointercancel = null;
         }
-        props.element.addEventListener('pointerdown', pointerdown, props.options);
         return () => {
-            props.element.removeEventListener('pointerdown', pointerdown);
+            pointerdown();
             remove();
         };
     }
-    gesture(props) {
-        let isActive = false;
-        const map = new Map();
-        const element = props.element;
-        const options = props.options;
-        const dragstart = ({ event, position }) => {
-            map.set(event.pointerId, position);
-            isActive = map.size === 2 ? true : false;
-            if (isActive === true && props.type === 'gesturestart') {
-                props.listener({ event });
-            }
-        };
-        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, scale });
-                }
-            }
-            map.set(event.pointerId, position);
-        };
-        const dragend = ({ event }) => {
-            map.delete(event.pointerId);
-            if (isActive === true && props.type === 'gestureend') {
-                props.listener({ event, scale: 1.0 });
-            }
-            isActive = false;
-        };
-        this.add(element, 'dragstart', dragstart, options);
-        this.add(element, 'dragmove', dragmove, options);
-        this.add(element, 'dragend', dragend, options);
-        function getOthers(id) {
-            const backup = map.get(id);
-            map.delete(id);
-            const others = [...map.values()];
-            map.set(id, backup);
-            return others;
-        }
-        return () => {
-            this.remove('dragstart', dragstart);
-            this.remove('dragmove', dragmove);
-            this.remove('dragend', dragend);
-        };
+    window_basic(props) {
+        const type = props.type.substring('window.'.length);
+        return addEvent(window, type, (event) => {
+            props.listener({ event });
+        }, props.options);
     }
-    key(props) {
-        const execute = (event) => {
-            if (props.type === 'keydown' && event.repeat)
+    window_key(props) {
+        const type = props.type.substring(props.type.indexOf('.') + 1);
+        return addEvent(window, type, (event) => {
+            if (event.repeat)
                 return;
             props.listener({ event, code: event.code });
-        };
-        window.addEventListener(props.type, execute, props.options);
-        return () => {
-            window.removeEventListener(props.type, execute);
-        };
+        }, props.options);
     }
-    key_arrow(props) {
+    window_key_arrow(props) {
         const keymap = {};
-        const keydown = (event) => {
+        const keydown = addEvent(window, 'keydown', (event) => {
             if (event.repeat)
                 return;
             keymap[event.code] = 1;
-            if (props.type === 'keydown.arrow' && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+            if (props.type === 'window.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, code: event.code, vector });
             }
-        };
-        const keyup = (event) => {
+        }, props.options);
+        const keyup = addEvent(window, 'keyup', (event) => {
             keymap[event.code] = 0;
-            if (props.type === 'keyup.arrow' && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+            if (props.type === 'window.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, code: event.code, vector });
             }
-        };
-        window.addEventListener('keydown', keydown, props.options);
-        window.addEventListener('keyup', keyup, props.options);
+        }, props.options);
         return () => {
-            window.removeEventListener('keydown', keydown);
-            window.removeEventListener('keyup', keyup);
+            keydown();
+            keyup();
         };
     }
-    key_wasd(props) {
+    window_key_wasd(props) {
         const keymap = {};
-        const keydown = (event) => {
+        const finalize1 = addEvent(window, 'keydown', (event) => {
             if (event.repeat)
                 return;
             keymap[event.code] = 1;
-            if (props.type === 'keydown.wasd' && ['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
+            if (props.type === 'window.keydown.wasd' && ['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
                 const vector = {
                     x: (keymap['KeyA'] ? -1 : 0) + (keymap['KeyD'] ? +1 : 0),
                     y: (keymap['KeyW'] ? -1 : 0) + (keymap['KeyS'] ? +1 : 0)
                 };
                 props.listener({ event, code: event.code, vector });
             }
-        };
-        const keyup = (event) => {
+        }, props.options);
+        const finalize2 = addEvent(window, 'keyup', (event) => {
             keymap[event.code] = 0;
-            if (props.type === 'keyup.wasd' && ['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
+            if (props.type === 'window.keyup.wasd' && ['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
                 const vector = {
                     x: (keymap['KeyA'] ? -1 : 0) + (keymap['KeyD'] ? +1 : 0),
                     y: (keymap['KeyW'] ? -1 : 0) + (keymap['KeyS'] ? +1 : 0)
                 };
                 props.listener({ event, code: event.code, vector });
             }
-        };
-        window.addEventListener('keydown', keydown, props.options);
-        window.addEventListener('keyup', keyup, props.options);
+        }, props.options);
         return () => {
-            window.removeEventListener('keydown', keydown);
-            window.removeEventListener('keyup', keyup);
+            finalize1();
+            finalize2();
         };
     }
+    document_basic(props) {
+        const type = props.type.substring('document.'.length);
+        return addEvent(document, type, (event) => {
+            props.listener({ event });
+        }, props.options);
+    }
 }
 function pointer(element, event) {
     const rect = element.getBoundingClientRect();
@@ -713,7 +631,7 @@ class Unit {
             baseComponent = (unit) => { };
         }
         const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-        this._ = { parent, target, baseElement, baseContext, baseComponent, props: props !== null && props !== void 0 ? props : {} };
+        this._ = { parent, target, baseElement, baseContext, baseComponent, props };
         parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
         Unit.initialize(this, null);
     }
@@ -735,8 +653,10 @@ class Unit {
         }
     }
     reboot() {
-        var _a, _b;
-        const anchor = (_b = (_a = this._.elements[0]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) !== null && _b !== void 0 ? _b : null;
+        let anchor = null;
+        if (this._.nestElements[0] && this._.nestElements[0].owned === true) {
+            anchor = this._.nestElements[0].element.nextElementSibling;
+        }
         Unit.stop(this);
         Unit.finalize(this);
         Unit.initialize(this, anchor);
@@ -754,7 +674,7 @@ class Unit {
             protected: false,
             ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
             children: [],
-            elements: [],
+            nestElements: [],
             promises: [],
             components: [],
             listeners: new MapMap(),
@@ -779,10 +699,12 @@ class Unit {
             [...unit._.systems.finalize].reverse().forEach(({ execute }) => execute());
             unit.off();
             unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
-            if (unit._.elements.length > 0) {
-                unit._.baseElement.removeChild(unit._.elements[0]);
-                unit._.currentElement = unit._.baseElement;
+            for (const { element, owned } of unit._.nestElements.reverse()) {
+                if (owned === true) {
+                    element.remove();
+                }
             }
+            unit._.currentElement = unit._.baseElement;
             // reset defines
             Object.keys(unit._.defines).forEach((key) => {
                 delete unit[key];
@@ -791,28 +713,35 @@ class Unit {
             unit._.state = 'finalized';
         }
     }
-    static nest(unit, tag, textContent) {
-        const match = tag.match(/<((\w+)[^>]*?)\/?>/);
-        if (match !== null) {
-            let element;
-            if (unit._.anchor !== null) {
-                unit._.anchor.insertAdjacentHTML('beforebegin', `<${match[1]}></${match[2]}>`);
-                element = unit._.anchor.previousElementSibling;
-                unit._.anchor = null;
+    static nest(unit, target, textContent) {
+        if (target instanceof HTMLElement || target instanceof SVGElement) {
+            unit._.nestElements.push({ element: target, owned: false });
+            unit._.currentElement = target;
+            return target;
+        }
+        else {
+            const match = target.match(/<((\w+)[^>]*?)\/?>/);
+            if (match !== null) {
+                let element;
+                if (unit._.anchor !== null) {
+                    unit._.anchor.insertAdjacentHTML('beforebegin', `<${match[1]}></${match[2]}>`);
+                    element = unit._.anchor.previousElementSibling;
+                    unit._.anchor = null;
+                }
+                else {
+                    unit._.currentElement.insertAdjacentHTML('beforeend', `<${match[1]}></${match[2]}>`);
+                    element = unit._.currentElement.children[unit._.currentElement.children.length - 1];
+                }
+                unit._.currentElement = element;
+                if (textContent !== undefined) {
+                    element.textContent = textContent.toString();
+                }
+                unit._.nestElements.push({ element, owned: true });
+                return element;
             }
             else {
-                unit._.currentElement.insertAdjacentHTML('beforeend', `<${match[1]}></${match[2]}>`);
-                element = unit._.currentElement.children[unit._.currentElement.children.length - 1];
+                throw new Error(`xnew.nest: invalid html string [${target}]`);
             }
-            unit._.currentElement = element;
-            if (textContent !== undefined) {
-                element.textContent = textContent.toString();
-            }
-            unit._.elements.push(element);
-            return element;
-        }
-        else {
-            throw new Error(`xnew.nest: invalid html string [${tag}]`);
         }
     }
     static extend(unit, component, props) {
@@ -823,7 +752,7 @@ class Unit {
         else {
             const backupComponent = unit._.currentComponent;
             unit._.currentComponent = component;
-            const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+            const defines = (_a = component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
             unit._.currentComponent = backupComponent;
             Unit.component2units.add(component, unit);
             unit._.components.push(component);
@@ -1023,22 +952,22 @@ const xnew$1 = Object.assign(function (...args) {
 }, {
     /**
      * Creates a nested HTML/SVG element within the current component
-     * @param tag - HTML or SVG tag string (e.g., '<div class="my-class">', '<span style="color:red">', '<svg viewBox="0 0 24 24">')
+     * @param target - HTML or SVG tag string (e.g., '<div class="my-class">', '<span style="color:red">', '<svg viewBox="0 0 24 24">')
      * @returns The created HTML/SVG element
      * @throws Error if called after component initialization
      * @example
      * const div = xnew.nest('<div>')
      * div.textContent = 'Hello'
      */
-    nest(tag) {
+    nest(target) {
         try {
             if (Unit.currentUnit._.state !== 'invoked') {
                 throw new Error('xnew.nest can not be called after initialized.');
             }
-            return Unit.nest(Unit.currentUnit, tag);
+            return Unit.nest(Unit.currentUnit, target);
         }
         catch (error) {
-            console.error('xnew.nest(tag: string): ', error);
+            console.error('xnew.nest(target: HTMLElement | SVGElement | string): ', error);
             throw error;
         }
     },
@@ -1058,7 +987,8 @@ const xnew$1 = Object.assign(function (...args) {
             }
             const defines = Unit.extend(Unit.currentUnit, component, props);
             if (typeof component === 'function') {
-                return Unit.context(Unit.currentUnit, component, Unit.currentUnit);
+                Unit.context(Unit.currentUnit, component, Unit.currentUnit);
+                Unit.context(Unit.currentUnit._.parent, component, Unit.currentUnit);
             }
             return defines;
         }
@@ -1267,48 +1197,39 @@ const xnew$1 = Object.assign(function (...args) {
     },
 });
 
-function OpenAndClose(unit, { open = false } = {}) {
+function OpenAndClose(unit, { open = true, transition = { duration: 200, easing: 'ease' } }) {
     let state = open ? 1.0 : 0.0;
-    let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
+    let sign = open ? +1 : -1;
     let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
     return {
-        toggle(duration = 200, easing = 'ease') {
-            if (direction === null || direction < 0) {
-                unit.open(duration, easing);
-            }
-            else {
-                unit.close(duration, easing);
-            }
+        toggle() {
+            sign < 0 ? unit.open() : unit.close();
         },
-        open(duration = 200, easing = 'ease') {
-            if (direction === null || direction < 0) {
-                direction = +1;
-                const d = 1 - state;
-                timer === null || timer === void 0 ? void 0 : timer.clear();
-                timer = xnew$1.transition((x) => {
-                    const y = x < 1.0 ? (1 - x) * d : 0.0;
-                    state = 1.0 - y;
-                    xnew$1.emit('-transition', { state });
-                }, duration * d, easing)
-                    .timeout(() => {
-                    xnew$1.emit('-opened', { state });
-                });
-            }
+        open() {
+            var _a, _b;
+            sign = +1;
+            const d = 1 - state;
+            const duration = ((_a = transition === null || transition === void 0 ? void 0 : transition.duration) !== null && _a !== void 0 ? _a : 200) * d;
+            const easing = (_b = transition === null || transition === void 0 ? void 0 : transition.easing) !== null && _b !== void 0 ? _b : 'ease';
+            timer === null || timer === void 0 ? void 0 : timer.clear();
+            timer = xnew$1.transition((x) => {
+                state = 1.0 - (x < 1.0 ? (1 - x) * d : 0.0);
+                xnew$1.emit('-transition', { state });
+            }, duration, easing)
+                .timeout(() => xnew$1.emit('-opened', { state }));
         },
-        close(duration = 200, easing = 'ease') {
-            if (direction === null || direction > 0) {
-                direction = -1;
-                const d = state;
-                timer === null || timer === void 0 ? void 0 : timer.clear();
-                timer = xnew$1.transition((x) => {
-                    const y = x < 1.0 ? (1 - x) * d : 0.0;
-                    state = y;
-                    xnew$1.emit('-transition', { state });
-                }, duration * d, easing)
-                    .timeout(() => {
-                    xnew$1.emit('-closed', { state });
-                });
-            }
+        close() {
+            var _a, _b;
+            sign = -1;
+            const d = state;
+            const duration = ((_a = transition === null || transition === void 0 ? void 0 : transition.duration) !== null && _a !== void 0 ? _a : 200) * d;
+            const easing = (_b = transition === null || transition === void 0 ? void 0 : transition.easing) !== null && _b !== void 0 ? _b : 'ease';
+            timer === null || timer === void 0 ? void 0 : timer.clear();
+            timer = xnew$1.transition((x) => {
+                state = x < 1.0 ? (1 - x) * d : 0.0;
+                xnew$1.emit('-transition', { state });
+            }, duration, easing)
+                .timeout(() => xnew$1.emit('-closed', { state }));
         },
     };
 }
@@ -1321,17 +1242,14 @@ function Accordion(unit) {
         outer.style.opacity = state.toString();
     });
 }
-function Modal(unit, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
+function Popup(unit) {
     const system = xnew$1.context(OpenAndClose);
     system.on('-closed', () => unit.finalize());
-    xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
-    unit.on('click', ({ event }) => system.close());
-    const outer = xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0;"">`);
-    xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
-    unit.on('click', ({ event }) => event.stopPropagation());
-    outer.style.background = background;
+    system.open();
+    xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000; opacity: 0;">');
+    unit.on('click', ({ event }) => event.target === unit.element && system.close());
     system.on('-transition', ({ state }) => {
-        outer.style.opacity = state.toString();
+        unit.element.style.opacity = state.toString();
     });
 }
 
@@ -1383,7 +1301,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         target.element.style.left = `${vector.x * size / 4}px`;
         target.element.style.top = `${vector.y * size / 4}px`;
         const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
-        xnew$1.emit(nexttype, { type: nexttype, vector });
+        xnew$1.emit(nexttype, { vector });
     });
     unit.on('dragend', () => {
         const size = unit.element.clientWidth;
@@ -1391,7 +1309,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         target.element.style.filter = '';
         target.element.style.left = `${vector.x * size / 4}px`;
         target.element.style.top = `${vector.y * size / 4}px`;
-        xnew$1.emit('-up', { type: '-up', vector });
+        xnew$1.emit('-up', { vector });
     });
 }
 function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
@@ -1456,54 +1374,42 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
     });
 }
 
-function GUIPanel(unit, { name, open = false, params }) {
+const currentColorA = 'color-mix(in srgb, currentColor 70%, transparent)';
+const currentColorB = 'color-mix(in srgb, currentColor 10%, transparent)';
+function Panel(unit, { name, open = false, params }) {
     const object = params !== null && params !== void 0 ? params : {};
     xnew$1.extend(Group, { name, open });
     return {
         group({ name, open, params }, inner) {
             const group = xnew$1((unit) => {
-                xnew$1.extend(GUIPanel, { name, open, params: params !== null && params !== void 0 ? params : object });
+                xnew$1.extend(Panel, { name, open, params: params !== null && params !== void 0 ? params : object });
                 inner(unit);
             });
-            group.on('-eventcapture', ({ event, key, value }) => {
-                xnew$1.emit('-eventcapture', { event, key, value });
-            });
             return group;
         },
         button(key) {
             const button = xnew$1(Button, { key });
-            button.on('click', ({ event }) => {
-                xnew$1.emit('-eventcapture', { event, key });
-            });
             return button;
         },
         select(key, { options = [] } = {}) {
             var _a, _b;
             object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options[0]) !== null && _b !== void 0 ? _b : '';
             const select = xnew$1(Select, { key, value: object[key], options });
-            select.on('input', ({ event, value }) => {
-                xnew$1.emit('-eventcapture', { event, key, value });
-            });
+            select.on('input', ({ value }) => object[key] = value);
             return select;
         },
         range(key, options = {}) {
-            var _a;
-            object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : 0;
+            var _a, _b;
+            object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options.min) !== null && _b !== void 0 ? _b : 0;
             const number = xnew$1(Range, Object.assign({ key, value: object[key] }, options));
-            number.on('input', ({ event, value }) => {
-                object[key] = value;
-                xnew$1.emit('-eventcapture', { event, key, value });
-            });
+            number.on('input', ({ value }) => object[key] = value);
             return number;
         },
         checkbox(key) {
             var _a;
             object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : false;
             const checkbox = xnew$1(Checkbox, { key, value: object[key] });
-            checkbox.on('input', ({ event, value }) => {
-                object[key] = value;
-                xnew$1.emit('-eventcapture', { event, key, value });
-            });
+            checkbox.on('input', ({ value }) => object[key] = value);
             return checkbox;
         },
         separator() {
@@ -1514,7 +1420,7 @@ function GUIPanel(unit, { name, open = false, params }) {
 function Group(group, { name, open = false }) {
     xnew$1.extend(OpenAndClose, { open });
     if (name) {
-        xnew$1('<div style="display: flex; align-items: center; cursor: pointer;">', (unit) => {
+        xnew$1('<div style="height: 2rem; margin: 0.125rem 0; display: flex; align-items: center; cursor: pointer; user-select: none;">', (unit) => {
             unit.on('click', () => group.toggle());
             xnew$1('<svg viewBox="0 0 12 12" style="width: 1rem; height: 1rem; margin-right: 0.25rem;" fill="none" stroke="currentColor">', (unit) => {
                 xnew$1('<path d="M6 2 10 6 6 10" />');
@@ -1526,11 +1432,11 @@ function Group(group, { name, open = false }) {
     xnew$1.extend(Accordion);
 }
 function Button(unit, { key = '' }) {
-    xnew$1.nest('<button style="margin: 0.125rem; padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">');
+    xnew$1.nest('<button style="margin: 0.125rem 0; height: 2rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">');
     unit.element.textContent = key;
     unit.on('pointerover', () => {
-        unit.element.style.background = 'rgba(0, 0, 128, 0.1)';
-        unit.element.style.borderColor = 'blue';
+        unit.element.style.background = currentColorB;
+        unit.element.style.borderColor = currentColorA;
     });
     unit.on('pointerout', () => {
         unit.element.style.background = '';
@@ -1544,31 +1450,101 @@ function Button(unit, { key = '' }) {
     });
 }
 function Separator(unit) {
-    xnew$1.nest('<div style="margin: 0.5rem 0; border-top: 1px solid;">');
+    xnew$1.nest(`<div style="margin: 0.5rem 0; border-top: 1px solid ${currentColorA};">`);
 }
 function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
-    xnew$1.nest(`<div style="margin: 0.125rem;">`);
-    const status = xnew$1('<div style="display: flex; justify-content: space-between;">', (unit) => {
-        xnew$1('<div style="flex: 1;">', key);
-        xnew$1('<div key="status" style="flex: none;">', value);
+    value = value !== null && value !== void 0 ? value : min;
+    xnew$1.nest(`<div style="position: relative; height: 2rem; margin: 0.125rem 0; cursor: pointer; user-select: none;">`);
+    // fill bar
+    const ratio = (value - min) / (max - min);
+    const fill = xnew$1(`<div style="position: absolute; top: 0; left: 0; bottom: 0; width: ${ratio * 100}%; background: ${currentColorB}; border: 1px solid ${currentColorA}; border-radius: 0.25rem; transition: width 0.05s;">`);
+    // overlay labels
+    const status = xnew$1('<div style="position: absolute; inset: 0; padding: 0 0.5rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">', (unit) => {
+        xnew$1('<div>', key);
+        xnew$1('<div key="status">', value);
     });
-    xnew$1.nest(`<input type="range" name="${key}" min="${min}" max="${max}" step="${step}" value="${value}" style="width: 100%; cursor: pointer;">`);
+    // hidden native input for interaction
+    xnew$1.nest(`<input type="range" name="${key}" min="${min}" max="${max}" step="${step}" value="${value}" style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;">`);
     unit.on('input', ({ event }) => {
-        status.element.querySelector('[key="status"]').textContent = event.target.value;
+        const v = Number(event.target.value);
+        const r = (v - min) / (max - min);
+        fill.element.style.width = `${r * 100}%`;
+        status.element.querySelector('[key="status"]').textContent = String(v);
     });
 }
 function Checkbox(unit, { key = '', value } = {}) {
-    xnew$1.nest(`<label style="margin: 0.125rem; display: flex; align-items: center; cursor: pointer;">`);
+    xnew$1.nest(`<div style="position: relative; height: 2rem; margin: 0.125rem 0; padding: 0 0.5rem; display: flex; align-items: center; cursor: pointer; user-select: none;">`);
     xnew$1('<div style="flex: 1;">', key);
-    xnew$1.nest(`<input type="checkbox" name="${key}" ${value ? 'checked' : ''} style="margin-right: 0.25rem;">`);
+    const box = xnew$1(`<div style="width: 1.25rem; height: 1.25rem; border: 1px solid ${currentColorA}; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; transition: background 0.1s;">`, () => {
+        xnew$1(`<svg viewBox="0 0 12 12" style="width: 1.25rem; height: 1.25rem; opacity: 0; transition: opacity 0.1s;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+            xnew$1('<path d="M2 6 5 9 10 3" />');
+        });
+    });
+    const check = box.element.querySelector('svg');
+    const update = (checked) => {
+        box.element.style.background = checked ? currentColorB : '';
+        check.style.opacity = checked ? '1' : '0';
+    };
+    update(!!value);
+    xnew$1.nest(`<input type="checkbox" name="${key}" ${value ? 'checked' : ''} style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;">`);
+    unit.on('input', ({ event, value }) => {
+        update(value);
+    });
 }
-function Select(unit, { key = '', value, options = [] } = {}) {
-    xnew$1.nest(`<div style="margin: 0.125rem; display: flex; align-items: center;">`);
+function Select(_, { key = '', value, options = [] } = {}) {
+    var _a;
+    const initial = (_a = value !== null && value !== void 0 ? value : options[0]) !== null && _a !== void 0 ? _a : '';
+    xnew$1.nest(`<div style="position: relative; height: 2rem; margin: 0.125rem 0; padding: 0 0.5rem; display: flex; align-items: center;">`);
     xnew$1('<div style="flex: 1;">', key);
-    xnew$1.nest(`<select name="${key}" style="padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">`);
-    for (const option of options) {
-        xnew$1(`<option value="${option}" ${option === value ? 'selected' : ''}>`, option);
-    }
+    const native = xnew$1(`<select name="${key}" style="display: none;">`, () => {
+        for (const option of options) {
+            xnew$1(`<option value="${option}" ${option === initial ? 'selected' : ''}>`, option);
+        }
+    });
+    const button = xnew$1(`<div style="height: 2rem; padding: 0 1.5rem 0 0.5rem; display: flex; align-items: center; border: 1px solid ${currentColorA}; border-radius: 0.25rem; cursor: pointer; user-select: none; min-width: 3rem; white-space: nowrap;">`, initial);
+    xnew$1(`<svg viewBox="0 0 12 12" style="position: absolute; right: 1.0rem; width: 0.75rem; height: 0.75rem; pointer-events: none;" fill="none" stroke="${currentColorA}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`, () => {
+        xnew$1('<path d="M2 4 6 8 10 4" />');
+    });
+    button.on('click', () => {
+        xnew$1((list) => {
+            xnew$1.nest(`<div style="position: fixed; border: 1px solid ${currentColorA}; border-radius: 0.25rem; overflow: hidden; z-index: 1000;">`);
+            const updatePosition = () => {
+                const rect = button.element.getBoundingClientRect();
+                list.element.style.right = (window.innerWidth - rect.right) + 'px';
+                list.element.style.top = rect.bottom + 'px';
+                list.element.style.minWidth = rect.width + 'px';
+            };
+            updatePosition();
+            list.element.style.background = getEffectiveBg(button.element);
+            window.addEventListener('scroll', updatePosition, true);
+            list.on('finalize', () => window.removeEventListener('scroll', updatePosition, true));
+            for (const option of options) {
+                const item = xnew$1(`<div style="height: 2rem; padding: 0 0.5rem; display: flex; align-items: center; cursor: pointer; user-select: none;">`, option);
+                item.on('pointerover', () => item.element.style.background = currentColorB);
+                item.on('pointerout', () => item.element.style.background = '');
+                item.on('click', () => {
+                    button.element.textContent = option;
+                    native.element.value = option;
+                    native.element.dispatchEvent(new Event('input', { bubbles: false }));
+                    list.finalize();
+                });
+            }
+            list.on('click.outside', () => {
+                list.finalize();
+            });
+        });
+    });
+    xnew$1.nest(native.element);
+}
+function getEffectiveBg(el) {
+    let current = el.parentElement;
+    while (current) {
+        const bg = getComputedStyle(current).backgroundColor;
+        if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent')
+            return bg;
+        current = current.parentElement;
+    }
+    return 'Canvas';
 }
 
 const context = new window.AudioContext();
@@ -1800,9 +1776,9 @@ const basics = {
     OpenAndClose,
     AnalogStick,
     DPad,
-    GUIPanel,
+    Panel,
     Accordion,
-    Modal,
+    Popup,
 };
 const audio = {
     load(path) {