@mulsense/xnew 0.6.2 → 0.6.4

package/dist/xnew.js

@@ -102,7 +102,19 @@
     }
 
     //----------------------------------------------------------------------------------------------------
-    // ticker
+    // visibility change
+    //----------------------------------------------------------------------------------------------------
+    class Visibility {
+        constructor(callback) {
+            this.listener = () => callback === null || callback === void 0 ? void 0 : callback(document.hidden === false);
+            document.addEventListener('visibilitychange', this.listener);
+        }
+        clear() {
+            document.removeEventListener('visibilitychange', this.listener);
+        }
+    }
+    //----------------------------------------------------------------------------------------------------
+    // animation ticker
     //----------------------------------------------------------------------------------------------------
     class AnimationTicker {
         constructor(callback, fps = 60) {
@@ -128,91 +140,88 @@
     }
     class Timer {
         constructor(options) {
+            var _a, _b;
             this.options = options;
-            this.startid = null;
-            this.endid = null;
-            this.time = 0.0;
-            this.counter = 0;
-            this.offset = 0.0;
-            this.status = 0;
-            this.ticker = new AnimationTicker((time) => {
-                var _a, _b;
-                let p = Math.min(this.elapsed() / this.options.duration, 1.0);
-                if (this.options.easing === 'ease-out') {
-                    p = Math.pow((1.0 - Math.pow((1.0 - p), 2.0)), 0.5);
-                }
-                else if (this.options.easing === 'ease-in') {
-                    p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
-                }
-                else if (this.options.easing === 'ease' || this.options.easing === 'ease-in-out') {
-                    // p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
-                    const bias = (this.options.easing === 'ease') ? 0.7 : 1.0;
-                    const s = Math.pow(p, bias);
-                    p = s * s * (3 - 2 * s);
-                }
-                (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, p);
-            });
-            this.visibilitychange = () => document.hidden === false ? this._start() : this._stop();
-            document.addEventListener('visibilitychange', this.visibilitychange);
-            this.startid = setTimeout(() => {
-                var _a, _b;
-                (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 0.0);
-            }, 0);
+            this.id = null;
+            this.time = { start: 0.0, processed: 0.0 };
+            this.request = true;
+            this.ticker = new AnimationTicker(() => this.animation());
+            this.visibility = new Visibility((visible) => visible ? this._start() : this._stop());
+            (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 0.0);
             this.start();
         }
-        clear() {
-            if (this.startid !== null) {
-                clearTimeout(this.startid);
-                this.startid = null;
+        animation() {
+            var _a, _b;
+            let p = Math.min(this.elapsed() / this.options.duration, 1.0);
+            if (this.options.easing === 'ease-out') {
+                p = Math.pow((1.0 - Math.pow((1.0 - p), 2.0)), 0.5);
+            }
+            else if (this.options.easing === 'ease-in') {
+                p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
+            }
+            else if (this.options.easing === 'ease' || this.options.easing === 'ease-in-out') {
+                const bias = (this.options.easing === 'ease') ? 0.7 : 1.0;
+                const s = p ** bias;
+                p = s * s * (3 - 2 * s);
             }
-            if (this.endid !== null) {
-                clearTimeout(this.endid);
-                this.endid = null;
+            (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, p);
+        }
+        clear() {
+            if (this.id !== null) {
+                clearTimeout(this.id);
+                this.id = null;
             }
-            document.removeEventListener('visibilitychange', this.visibilitychange);
+            this.visibility.clear();
             this.ticker.clear();
         }
         elapsed() {
-            return this.offset + (this.endid !== null ? (Date.now() - this.time) : 0);
+            return this.time.processed + (this.id !== null ? (Date.now() - this.time.start) : 0);
         }
         start() {
-            this.status = 1;
+            this.request = true;
             this._start();
         }
         stop() {
             this._stop();
-            this.status = 0;
+            this.request = false;
         }
         _start() {
-            if (this.status === 1 && this.endid === null) {
-                this.endid = setTimeout(() => {
+            if (this.request === true && this.id === null) {
+                this.id = setTimeout(() => {
                     var _a, _b, _c, _d;
+                    this.id = null;
+                    this.time = { start: 0.0, processed: 0.0 };
                     (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 1.0);
-                    (_d = (_c = this.options).timeout) === null || _d === void 0 ? void 0 : _d.call(_c);
-                    this.endid = null;
-                    this.time = 0.0;
-                    this.offset = 0.0;
-                    this.counter++;
-                    if (this.options.iterations === 0 || this.counter < this.options.iterations) {
-                        this.start();
-                    }
-                    else {
-                        this.clear();
-                    }
-                }, this.options.duration - this.offset);
-                this.time = Date.now();
+                    (_d = (_c = this.options).callback) === null || _d === void 0 ? void 0 : _d.call(_c);
+                    this.clear();
+                }, this.options.duration - this.time.processed);
+                this.time.start = Date.now();
             }
         }
         _stop() {
-            if (this.status === 1 && this.endid !== null) {
-                this.offset = this.offset + Date.now() - this.time;
-                clearTimeout(this.endid);
-                this.endid = null;
-                this.time = 0.0;
+            if (this.request === true && this.id !== null) {
+                this.time.processed = this.time.processed + Date.now() - this.time.start;
+                clearTimeout(this.id);
+                this.id = null;
             }
         }
     }
 
+    function addEventListener(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();
@@ -220,53 +229,62 @@
         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);
         }
@@ -277,16 +295,12 @@
                 this.map.delete(type, listener);
             }
         }
-        basic(props) {
-            const execute = (event) => {
+        element_basic(props) {
+            return addEventListener(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({});
@@ -298,8 +312,8 @@
                 observer.unobserve(props.element);
             };
         }
-        change(props) {
-            const execute = (event) => {
+        element_change(props) {
+            return addEventListener(props.element, props.type, (event) => {
                 let value = null;
                 if (event.target.type === 'checkbox') {
                     value = event.target.checked;
@@ -311,14 +325,10 @@
                     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 addEventListener(props.element, props.type, (event) => {
                 let value = null;
                 if (event.target.type === 'checkbox') {
                     value = event.target.checked;
@@ -330,88 +340,56 @@
                     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 addEventListener(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 addEventListener(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 addEventListener(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 addEventListener(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 addEventListener(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 addEventListener(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 addEventListener(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 = addEventListener(props.element, 'pointerdown', (event) => {
                 const id = event.pointerId;
                 const position = pointer(props.element, event).position;
                 let previous = position;
-                pointermove = (event) => {
+                pointermove = addEventListener(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 };
@@ -420,8 +398,8 @@
                         }
                         previous = position;
                     }
-                };
-                pointerup = (event) => {
+                }, props.options);
+                pointerup = addEventListener(window, 'pointerup', (event) => {
                     if (event.pointerId === id) {
                         const position = pointer(props.element, event).position;
                         if (props.type === 'dragend') {
@@ -429,8 +407,8 @@
                         }
                         remove();
                     }
-                };
-                pointercancel = (event) => {
+                }, props.options);
+                pointercancel = addEventListener(window, 'pointercancel', (event) => {
                     if (event.pointerId === id) {
                         const position = pointer(props.element, event).position;
                         if (props.type === 'dragend') {
@@ -438,168 +416,102 @@
                         }
                         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 addEventListener(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 addEventListener(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.listener({ event });
+            }, props.options);
         }
-        key_arrow(props) {
+        window_key_arrow(props) {
             const keymap = {};
-            const keydown = (event) => {
+            const keydown = addEventListener(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 });
+                    props.listener({ event, vector });
                 }
-            };
-            const keyup = (event) => {
+            }, props.options);
+            const keyup = addEventListener(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 });
+                    props.listener({ event, 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 = addEventListener(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 });
+                    props.listener({ event, vector });
                 }
-            };
-            const keyup = (event) => {
+            }, props.options);
+            const finalize2 = addEventListener(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 });
+                    props.listener({ event, 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 addEventListener(document, type, (event) => {
+                props.listener({ event });
+            }, props.options);
+        }
     }
     function pointer(element, event) {
         const rect = element.getBoundingClientRect();
@@ -612,58 +524,52 @@
     //----------------------------------------------------------------------------------------------------
     const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
     class UnitPromise {
-        constructor(promise, component) {
+        constructor(promise, Component) {
             this.promise = promise;
-            this.component = component;
-        }
-        then(callback) {
-            const snapshot = Unit.snapshot(Unit.currentUnit);
-            this.promise = this.promise.then((...args) => Unit.scope(snapshot, callback, ...args));
-            return this;
-        }
-        catch(callback) {
-            const snapshot = Unit.snapshot(Unit.currentUnit);
-            this.promise = this.promise.catch((...args) => Unit.scope(snapshot, callback, ...args));
-            return this;
+            this.Component = Component;
         }
-        finally(callback) {
+        then(callback) { return this.wrap('then', callback); }
+        catch(callback) { return this.wrap('catch', callback); }
+        finally(callback) { return this.wrap('finally', callback); }
+        wrap(key, callback) {
             const snapshot = Unit.snapshot(Unit.currentUnit);
-            this.promise = this.promise.finally(() => Unit.scope(snapshot, callback));
+            this.promise = this.promise[key]((...args) => Unit.scope(snapshot, callback, ...args));
             return this;
         }
     }
     class UnitTimer {
-        constructor(options) {
+        constructor() {
+            this.unit = null;
             this.stack = [];
-            this.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
         }
         clear() {
+            var _a;
             this.stack = [];
-            this.unit.finalize();
+            (_a = this.unit) === null || _a === void 0 ? void 0 : _a.finalize();
+            this.unit = null;
         }
-        timeout(timeout, duration = 0) {
-            UnitTimer.execute(this, { timeout, duration, iterations: 1 });
-            return this;
+        timeout(callback, duration = 0) {
+            return UnitTimer.execute(this, { callback, duration }, 1);
         }
-        iteration(timeout, duration = 0, iterations = -1) {
-            UnitTimer.execute(this, { timeout, duration, iterations });
-            return this;
+        interval(callback, duration = 0, iterations = 0) {
+            return UnitTimer.execute(this, { callback, duration }, iterations);
         }
         transition(transition, duration = 0, easing) {
-            UnitTimer.execute(this, { transition, duration, iterations: 1, easing });
-            return this;
+            return UnitTimer.execute(this, { transition, duration, easing }, 1);
         }
-        static execute(timer, options) {
-            if (timer.unit._.state === 'finalized') {
-                timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
+        static execute(timer, options, iterations) {
+            const props = { options, iterations, snapshot: Unit.snapshot(Unit.currentUnit) };
+            if (timer.unit === null || timer.unit._.state === 'finalized') {
+                timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, props);
             }
             else if (timer.stack.length === 0) {
-                timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+                timer.stack.push(props);
                 timer.unit.on('finalize', () => UnitTimer.next(timer));
             }
             else {
-                timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+                timer.stack.push(props);
             }
+            return timer;
         }
         static next(timer) {
             if (timer.stack.length > 0) {
@@ -671,27 +577,32 @@
                 timer.unit.on('finalize', () => UnitTimer.next(timer));
             }
         }
-        static Component(unit, { options, snapshot }) {
+        static Component(unit, { options, iterations, snapshot }) {
             let counter = 0;
-            const timer = new Timer({
-                transition: (p) => {
-                    if (options.transition)
-                        Unit.scope(snapshot, options.transition, p);
-                },
-                timeout: () => {
-                    if (options.transition)
-                        Unit.scope(snapshot, options.transition, 1.0);
-                    if (options.timeout)
-                        Unit.scope(snapshot, options.timeout);
-                    if (options.iterations && counter >= options.iterations - 1) {
-                        unit.finalize();
-                    }
-                    counter++;
-                }, duration: options.duration, iterations: options.iterations, easing: options.easing
-            });
+            let timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
+            function callback() {
+                if (options.callback)
+                    Unit.scope(snapshot, options.callback);
+                if (iterations <= 0 || counter < iterations - 1) {
+                    timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
+                }
+                else {
+                    unit.finalize();
+                }
+                counter++;
+            }
+            function transition(value) {
+                if (options.transition)
+                    Unit.scope(snapshot, options.transition, { value });
+            }
             unit.on('finalize', () => timer.clear());
         }
     }
+    function DefaultComponent(unit, { text }) {
+        if (text !== undefined) {
+            unit.element.textContent = text;
+        }
+    }
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
@@ -706,20 +617,21 @@
                 baseElement = parent._.currentElement;
             }
             else {
-                baseElement = document.body;
+                baseElement = (document === null || document === void 0 ? void 0 : document.body) ? document.body : null;
             }
             let baseComponent;
             if (typeof component === 'function') {
                 baseComponent = component;
             }
-            else if (component !== undefined) {
-                baseComponent = (unit) => { unit.element.textContent = component.toString(); };
+            else if (typeof component === 'string' || typeof component === 'number') {
+                baseComponent = DefaultComponent;
+                props = { text: component.toString() };
             }
             else {
-                baseComponent = (unit) => { };
+                baseComponent = DefaultComponent;
             }
             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);
         }
@@ -741,8 +653,10 @@
             }
         }
         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);
@@ -760,7 +674,7 @@
                 protected: false,
                 ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
                 children: [],
-                elements: [],
+                nestElements: [],
                 promises: [],
                 components: [],
                 listeners: new MapMap(),
@@ -785,10 +699,12 @@
                 [...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];
@@ -797,42 +713,58 @@
                 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) {
+        static extend(unit, Component, props) {
             var _a;
-            if (unit._.components.includes(component) === true) {
+            if (unit._.components.includes(Component) === true) {
                 throw new Error(`The component is already extended.`);
             }
             else {
                 const backupComponent = unit._.currentComponent;
-                unit._.currentComponent = component;
-                const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+                unit._.currentComponent = Component;
+                const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
+                if (unit._.parent && Component !== DefaultComponent) {
+                    if (Component === unit._.baseComponent) {
+                        Unit.context(unit._.parent, Component, unit);
+                    }
+                    else {
+                        Unit.context(unit, Component, unit);
+                        Unit.context(unit._.parent, Component, unit);
+                    }
+                }
                 unit._.currentComponent = backupComponent;
-                Unit.component2units.add(component, unit);
-                unit._.components.push(component);
+                Unit.component2units.add(Component, unit);
+                unit._.components.push(Component);
                 Object.keys(defines).forEach((key) => {
                     if (unit[key] !== undefined && unit._.defines[key] === undefined) {
                         throw new Error(`The property "${key}" already exists.`);
@@ -937,9 +869,9 @@
                 }
             }
         }
-        static find(component) {
+        static find(Component) {
             var _a;
-            return [...((_a = Unit.component2units.get(component)) !== null && _a !== void 0 ? _a : [])];
+            return [...((_a = Unit.component2units.get(Component)) !== null && _a !== void 0 ? _a : [])];
         }
         on(type, listener, options) {
             const types = type.trim().split(/\s+/);
@@ -1019,54 +951,46 @@
         else {
             target = null;
         }
-        const component = args.shift();
+        const Component = args.shift();
         const props = args.shift();
-        const unit = new Unit(Unit.currentUnit, target, component, props);
-        if (typeof component === 'function') {
-            Unit.context(Unit.currentUnit, component, unit);
-        }
-        return unit;
+        return new Unit(Unit.currentUnit, target, Component, props);
     }, {
         /**
          * 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;
             }
         },
         /**
          * Extends the current component with another component's functionality
-         * @param component - Component function to extend with
-         * @param props - Optional properties to pass to the extended component
+         * @param Component - component function to extend with
+         * @param props - optional properties to pass to the extended component
          * @returns defines returned by the extended component
          * @throws Error if called after component initialization
          * @example
          * const api = xnew.extend(BaseComponent, { data: {} })
          */
-        extend(component, props) {
+        extend(Component, props) {
             try {
                 if (Unit.currentUnit._.state !== 'invoked') {
                     throw new Error('xnew.extend can not be called after initialized.');
                 }
-                const defines = Unit.extend(Unit.currentUnit, component, props);
-                if (typeof component === 'function') {
-                    return Unit.context(Unit.currentUnit, component, Unit.currentUnit);
-                }
-                return defines;
+                return Unit.extend(Unit.currentUnit, Component, props);
             }
             catch (error) {
                 console.error('xnew.extend(component: Function, props?: Object): ', error);
@@ -1104,8 +1028,15 @@
         promise(promise) {
             try {
                 const component = Unit.currentUnit._.currentComponent;
-                Unit.currentUnit._.promises.push(new UnitPromise(promise, component));
-                return Unit.currentUnit._.promises[Unit.currentUnit._.promises.length - 1];
+                let unitPromise;
+                if (promise instanceof Unit) {
+                    unitPromise = new UnitPromise(Promise.all(promise._.promises.map(p => p.promise)), component);
+                }
+                else {
+                    unitPromise = new UnitPromise(promise, component);
+                }
+                Unit.currentUnit._.promises.push(unitPromise);
+                return unitPromise;
             }
             catch (error) {
                 console.error('xnew.promise(promise: Promise<any>): ', error);
@@ -1121,11 +1052,11 @@
          */
         then(callback) {
             try {
-                const component = Unit.currentUnit._.currentComponent;
+                const Component = Unit.currentUnit._.currentComponent;
                 const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .then((results) => {
-                    callback(results.filter((_result, index) => promises[index].component !== null && promises[index].component === component));
+                    callback(results.filter((_, index) => promises[index].Component !== null && promises[index].Component === Component));
                 });
             }
             catch (error) {
@@ -1220,27 +1151,27 @@
         },
         /**
          * Executes a callback once after a delay, managed by component lifecycle
-         * @param timeout - Function to execute after Duration
+         * @param callback - Function to execute after Duration
          * @param duration - Duration in milliseconds
          * @returns Object with clear() method to cancel the timeout
          * @example
          * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
          * // Cancel if needed: timer.clear()
          */
-        timeout(timeout, duration = 0) {
-            return new UnitTimer({ timeout, duration, iterations: 1 });
+        timeout(callback, duration = 0) {
+            return new UnitTimer().timeout(callback, duration);
         },
         /**
          * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-         * @param timeout - Function to execute at each duration
+         * @param callback - Function to execute at each duration
          * @param duration - Duration in milliseconds
          * @returns Object with clear() method to stop the interval
          * @example
          * const timer = xnew.interval(() => console.log('Tick'), 1000)
          * // Stop when needed: timer.clear()
          */
-        interval(timeout, duration, iterations = 0) {
-            return new UnitTimer({ timeout, duration, iterations });
+        interval(callback, duration, iterations = 0) {
+            return new UnitTimer().interval(callback, duration, iterations);
         },
         /**
          * Creates a transition animation with easing, executing callback with progress values
@@ -1256,7 +1187,7 @@
          * }, 300)
          */
         transition(transition, duration = 0, easing = 'linear') {
-            return new UnitTimer({ transition, duration, easing, iterations: 1 });
+            return new UnitTimer().transition(transition, duration, easing);
         },
         /**
          * Call this method within a component function to enable protection.
@@ -1273,33 +1204,39 @@
         },
     });
 
-    function OpenAndClose(unit, { open = false }) {
-        let state = open ? 1.0 : 0.0;
+    function OpenAndClose(unit, { open = true, transition = { duration: 200, easing: 'ease' } }) {
+        let value = open ? 1.0 : 0.0;
         let sign = open ? +1 : -1;
-        let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
+        let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { value }));
         return {
-            toggle(duration = 200, easing = 'ease') {
-                sign < 0 ? unit.open(duration, easing) : unit.close(duration, easing);
+            toggle() {
+                sign < 0 ? unit.open() : unit.close();
             },
-            open(duration = 200, easing = 'ease') {
+            open() {
+                var _a, _b;
                 sign = +1;
-                const d = 1 - state;
+                const d = 1 - value;
+                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 * d, easing)
-                    .timeout(() => xnew$1.emit('-opened', { state }));
+                timer = xnew$1.transition(({ value: x }) => {
+                    value = 1.0 - (x < 1.0 ? (1 - x) * d : 0.0);
+                    xnew$1.emit('-transition', { value });
+                }, duration, easing)
+                    .timeout(() => xnew$1.emit('-opened'));
             },
-            close(duration = 200, easing = 'ease') {
+            close() {
+                var _a, _b;
                 sign = -1;
-                const d = state;
+                const d = value;
+                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 * d, easing)
-                    .timeout(() => xnew$1.emit('-closed', { state }));
+                timer = xnew$1.transition(({ value: x }) => {
+                    value = x < 1.0 ? (1 - x) * d : 0.0;
+                    xnew$1.emit('-transition', { value });
+                }, duration, easing)
+                    .timeout(() => xnew$1.emit('-closed'));
             },
         };
     }
@@ -1307,23 +1244,19 @@
         const system = xnew$1.context(OpenAndClose);
         const outer = xnew$1.nest('<div style="overflow: hidden;">');
         const inner = xnew$1.nest('<div style="display: flex; flex-direction: column; box-sizing: border-box;">');
-        system.on('-transition', ({ state }) => {
-            outer.style.height = state < 1.0 ? inner.offsetHeight * state + 'px' : 'auto';
-            outer.style.opacity = state.toString();
+        system.on('-transition', ({ value }) => {
+            outer.style.height = value < 1.0 ? inner.offsetHeight * value + 'px' : 'auto';
+            outer.style.opacity = value.toString();
         });
     }
-    function Modal(unit) {
+    function Popup(unit) {
         const system = xnew$1.context(OpenAndClose);
-        system.open();
         system.on('-closed', () => unit.finalize());
-        xnew$1.nest('<div style="position: absolute; inset: 0; z-index: 1000; opacity: 0;">');
-        unit.on('click', ({ event }) => {
-            if (event.target === unit.element) {
-                system.close();
-            }
-        });
-        system.on('-transition', ({ state }) => {
-            unit.element.style.opacity = state.toString();
+        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', ({ value }) => {
+            unit.element.style.opacity = value.toString();
         });
     }
 
@@ -1345,14 +1278,14 @@
     function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
         xnew$1.nest(`<svg
         viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; select: none;
+        style="position: absolute; width: 100%; height: 100%; user-select: none;
         stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
     ">`);
     }
     function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
         xnew$1((unit) => {
             xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
             xnew$1('<polygon points="32  7 27 13 37 13">');
@@ -1375,7 +1308,7 @@
             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;
@@ -1383,12 +1316,12 @@
             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 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
         const polygons = [
             '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
             '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1448,6 +1381,8 @@
         });
     }
 
+    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 });
@@ -1492,9 +1427,9 @@
     function Group(group, { name, open = false }) {
         xnew$1.extend(OpenAndClose, { open });
         if (name) {
-            xnew$1('<div style="height: 2rem; margin: 0.125rem 0; display: flex; align-items: center; cursor: pointer; user-select: none;">', (unit) => {
+            xnew$1('<div style="height: 2em; margin: 0.125em 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('<svg viewBox="0 0 12 12" style="width: 1em; height: 1em; margin-right: 0.25em;" fill="none" stroke="currentColor">', (unit) => {
                     xnew$1('<path d="M6 2 10 6 6 10" />');
                     group.on('-transition', ({ state }) => unit.element.style.transform = `rotate(${state * 90}deg)`);
                 });
@@ -1504,11 +1439,11 @@
         xnew$1.extend(Accordion);
     }
     function Button(unit, { key = '' }) {
-        xnew$1.nest('<button style="margin: 0.125rem; height: 2rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">');
+        xnew$1.nest('<button style="margin: 0.125em 0; height: 2em; border: 1px solid; border-radius: 0.25em; cursor: pointer;">');
         unit.element.textContent = key;
         unit.on('pointerover', () => {
-            unit.element.style.background = 'color-mix(in srgb, currentColor 5%, transparent)';
-            unit.element.style.borderColor = 'color-mix(in srgb, currentColor 40%, transparent)';
+            unit.element.style.background = currentColorB;
+            unit.element.style.borderColor = currentColorA;
         });
         unit.on('pointerout', () => {
             unit.element.style.background = '';
@@ -1522,16 +1457,16 @@
         });
     }
     function Separator(unit) {
-        xnew$1.nest('<div style="margin: 0.5rem 0; border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent);">');
+        xnew$1.nest(`<div style="margin: 0.5em 0; border-top: 1px solid ${currentColorA};">`);
     }
     function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
         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;">`);
+        xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 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: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 0.25rem; transition: width 0.05s;">`);
+        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.25em; transition: width 0.05s;">`);
         // overlay labels
-        const status = xnew$1('<div style="position: absolute; inset: 0; padding: 0 0.25rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">', (unit) => {
+        const status = xnew$1('<div style="position: absolute; inset: 0; padding: 0 0.5em; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">', (unit) => {
             xnew$1('<div>', key);
             xnew$1('<div key="status">', value);
         });
@@ -1545,16 +1480,16 @@
         });
     }
     function Checkbox(unit, { key = '', value } = {}) {
-        xnew$1.nest(`<div style="position: relative; height: 2rem; margin: 0.125rem 0; padding: 0 0.25rem; display: flex; align-items: center; cursor: pointer; user-select: none;">`);
+        xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`);
         xnew$1('<div style="flex: 1;">', key);
-        const box = xnew$1('<div style="width: 1.25rem; height: 1.25rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); 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="color-mix(in srgb, currentColor 80%, transparent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">', () => {
+        const box = xnew$1(`<div style="width: 1.25em; height: 1.25em; border: 1px solid ${currentColorA}; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; transition: background 0.1s;">`, () => {
+            xnew$1(`<svg viewBox="0 0 12 12" style="width: 1.25em; height: 1.25em; 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 ? 'color-mix(in srgb, currentColor 5%, transparent)' : '';
+            box.element.style.background = checked ? currentColorB : '';
             check.style.opacity = checked ? '1' : '0';
         };
         update(!!value);
@@ -1563,12 +1498,59 @@
             update(value);
         });
     }
-    function Select(unit, { key = '', value, options = [] } = {}) {
-        xnew$1.nest(`<div style="height: 2rem; margin: 0.125rem 0; padding: 0 0.25rem; 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: 2em; margin: 0.125em 0; padding: 0 0.5em; display: flex; align-items: center;">`);
         xnew$1('<div style="flex: 1;">', key);
-        xnew$1.nest(`<select name="${key}" style="height: 2rem; padding: 0.25rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 0.25rem; cursor: pointer; user-select: none;">`);
-        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: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid ${currentColorA}; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
+        xnew$1(`<svg viewBox="0 0 12 12" style="position: absolute; right: 1.0em; width: 0.75em; height: 0.75em; 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(OpenAndClose, { open: false });
+                xnew$1.extend(Popup);
+                xnew$1.nest('<div style="position: absolute; padding: 0.25em 0;">');
+                list.on('render', () => {
+                    const rect = button.element.getBoundingClientRect();
+                    list.element.style.right = (window.innerWidth - rect.right) + 'px';
+                    list.element.style.top = rect.bottom + 'px';
+                    list.element.style.background = getEffectiveBg(button.element);
+                });
+                xnew$1.extend(Accordion);
+                xnew$1.nest(`<div style="position: relative; border: 1px solid ${currentColorA}; border-radius: 0.25em; overflow: hidden;">`);
+                for (const option of options) {
+                    const item = xnew$1(`<div style="height: 2em; padding: 0 0.5em; 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';
         }
     }
 
@@ -1803,7 +1785,7 @@
         DPad,
         Panel,
         Accordion,
-        Modal,
+        Popup,
     };
     const audio = {
         load(path) {