@mulsense/xnew 0.6.2 → 0.6.4

package/dist/xnew.mjs

@@ -96,7 +96,19 @@ class MapMap extends Map {
 }
 
 //----------------------------------------------------------------------------------------------------
-// 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) {
@@ -122,91 +134,88 @@ class AnimationTicker {
 }
 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();
@@ -214,53 +223,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 +289,12 @@ class Eventor {
             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({});
@@ -292,8 +306,8 @@ class Eventor {
             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;
@@ -305,14 +319,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 addEventListener(props.element, props.type, (event) => {
             let value = null;
             if (event.target.type === 'checkbox') {
                 value = event.target.checked;
@@ -324,88 +334,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 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 };
@@ -414,8 +392,8 @@ class Eventor {
                     }
                     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') {
@@ -423,8 +401,8 @@ class Eventor {
                     }
                     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') {
@@ -432,168 +410,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 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();
@@ -606,58 +518,52 @@ function pointer(element, event) {
 //----------------------------------------------------------------------------------------------------
 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) {
@@ -665,27 +571,32 @@ class UnitTimer {
             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
 //----------------------------------------------------------------------------------------------------
@@ -700,20 +611,21 @@ class Unit {
             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);
     }
@@ -735,8 +647,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 +668,7 @@ class Unit {
             protected: false,
             ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
             children: [],
-            elements: [],
+            nestElements: [],
             promises: [],
             components: [],
             listeners: new MapMap(),
@@ -779,10 +693,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,42 +707,58 @@ 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) {
+    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.`);
@@ -931,9 +863,9 @@ class Unit {
             }
         }
     }
-    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+/);
@@ -1013,54 +945,46 @@ const xnew$1 = Object.assign(function (...args) {
     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);
@@ -1098,8 +1022,15 @@ const xnew$1 = Object.assign(function (...args) {
     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);
@@ -1115,11 +1046,11 @@ const xnew$1 = Object.assign(function (...args) {
      */
     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) {
@@ -1214,27 +1145,27 @@ const xnew$1 = Object.assign(function (...args) {
     },
     /**
      * 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
@@ -1250,7 +1181,7 @@ const xnew$1 = Object.assign(function (...args) {
      * }, 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.
@@ -1267,33 +1198,39 @@ const xnew$1 = Object.assign(function (...args) {
     },
 });
 
-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'));
         },
     };
 }
@@ -1301,23 +1238,19 @@ function Accordion(unit) {
     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();
     });
 }
 
@@ -1339,14 +1272,14 @@ function Screen(unit, { aspect, fit = 'contain' } = {}) {
 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">');
@@ -1369,7 +1302,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;
@@ -1377,12 +1310,12 @@ 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 } = {}) {
     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">',
@@ -1442,6 +1375,8 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
     });
 }
 
+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 });
@@ -1486,9 +1421,9 @@ function Panel(unit, { name, open = false, params }) {
 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)`);
             });
@@ -1498,11 +1433,11 @@ function Group(group, { name, open = false }) {
     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 = '';
@@ -1516,16 +1451,16 @@ function Button(unit, { key = '' }) {
     });
 }
 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);
     });
@@ -1539,16 +1474,16 @@ function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
     });
 }
 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);
@@ -1557,12 +1492,59 @@ function Checkbox(unit, { key = '', value } = {}) {
         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';
     }
 }
 
@@ -1797,7 +1779,7 @@ const basics = {
     DPad,
     Panel,
     Accordion,
-    Modal,
+    Popup,
 };
 const audio = {
     load(path) {