@mulsense/xnew 0.6.0 → 0.6.2

package/dist/xnew.js

@@ -223,6 +223,12 @@
             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);
             }
@@ -273,7 +279,7 @@
         }
         basic(props) {
             const execute = (event) => {
-                props.listener({ event, type: event.type });
+                props.listener({ event });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -283,7 +289,7 @@
         resize(props) {
             const observer = new ResizeObserver((entries) => {
                 for (const entry of entries) {
-                    props.listener({ type: 'resize' });
+                    props.listener({});
                     break;
                 }
             });
@@ -292,9 +298,47 @@
                 observer.unobserve(props.element);
             };
         }
+        change(props) {
+            const execute = (event) => {
+                let value = null;
+                if (event.target.type === 'checkbox') {
+                    value = event.target.checked;
+                }
+                else if (event.target.type === 'range' || event.target.type === 'number') {
+                    value = parseFloat(event.target.value);
+                }
+                else {
+                    value = event.target.value;
+                }
+                props.listener({ event, value });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
+        input(props) {
+            const execute = (event) => {
+                let value = null;
+                if (event.target.type === 'checkbox') {
+                    value = event.target.checked;
+                }
+                else if (event.target.type === 'range' || event.target.type === 'number') {
+                    value = parseFloat(event.target.value);
+                }
+                else {
+                    value = event.target.value;
+                }
+                props.listener({ event, value });
+            };
+            props.element.addEventListener(props.type, execute, props.options);
+            return () => {
+                props.element.removeEventListener(props.type, execute);
+            };
+        }
         click(props) {
             const execute = (event) => {
-                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                props.listener({ event, position: pointer(props.element, event).position });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -304,7 +348,7 @@
         click_outside(props) {
             const execute = (event) => {
                 if (props.element.contains(event.target) === false) {
-                    props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                    props.listener({ event, position: pointer(props.element, event).position });
                 }
             };
             document.addEventListener(props.type.split('.')[0], execute, props.options);
@@ -314,7 +358,7 @@
         }
         pointer(props) {
             const execute = (event) => {
-                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                props.listener({ event, position: pointer(props.element, event).position });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -323,7 +367,7 @@
         }
         mouse(props) {
             const execute = (event) => {
-                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                props.listener({ event, position: pointer(props.element, event).position });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -332,7 +376,7 @@
         }
         touch(props) {
             const execute = (event) => {
-                props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                props.listener({ event, position: pointer(props.element, event).position });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -342,7 +386,7 @@
         pointer_outside(props) {
             const execute = (event) => {
                 if (props.element.contains(event.target) === false) {
-                    props.listener({ event, type: props.type, position: pointer(props.element, event).position });
+                    props.listener({ event, position: pointer(props.element, event).position });
                 }
             };
             document.addEventListener(props.type.split('.')[0], execute, props.options);
@@ -352,7 +396,7 @@
         }
         wheel(props) {
             const execute = (event) => {
-                props.listener({ event, type: props.type, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } });
+                props.listener({ event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } });
             };
             props.element.addEventListener(props.type, execute, props.options);
             return () => {
@@ -372,7 +416,7 @@
                         const position = pointer(props.element, event).position;
                         const delta = { x: position.x - previous.x, y: position.y - previous.y };
                         if (props.type === 'dragmove') {
-                            props.listener({ event, type: props.type, position, delta });
+                            props.listener({ event, position, delta });
                         }
                         previous = position;
                     }
@@ -381,7 +425,7 @@
                     if (event.pointerId === id) {
                         const position = pointer(props.element, event).position;
                         if (props.type === 'dragend') {
-                            props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                            props.listener({ event, position, delta: { x: 0, y: 0 } });
                         }
                         remove();
                     }
@@ -390,7 +434,7 @@
                     if (event.pointerId === id) {
                         const position = pointer(props.element, event).position;
                         if (props.type === 'dragend') {
-                            props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                            props.listener({ event, position, delta: { x: 0, y: 0 } });
                         }
                         remove();
                     }
@@ -399,7 +443,7 @@
                 window.addEventListener('pointerup', pointerup);
                 window.addEventListener('pointercancel', pointercancel);
                 if (props.type === 'dragstart') {
-                    props.listener({ event, type: props.type, position, delta: { x: 0, y: 0 } });
+                    props.listener({ event, position, delta: { x: 0, y: 0 } });
                 }
             };
             function remove() {
@@ -428,7 +472,7 @@
                 map.set(event.pointerId, position);
                 isActive = map.size === 2 ? true : false;
                 if (isActive === true && props.type === 'gesturestart') {
-                    props.listener({ event, type: props.type });
+                    props.listener({ event });
                 }
             };
             const dragmove = ({ event, position, delta }) => {
@@ -455,7 +499,7 @@
                     //     }
                     // }
                     if (props.type === 'gesturemove') {
-                        props.listener({ event, type: props.type, scale });
+                        props.listener({ event, scale });
                     }
                 }
                 map.set(event.pointerId, position);
@@ -463,7 +507,7 @@
             const dragend = ({ event }) => {
                 map.delete(event.pointerId);
                 if (isActive === true && props.type === 'gestureend') {
-                    props.listener({ event, type: props.type, scale: 1.0 });
+                    props.listener({ event, scale: 1.0 });
                 }
                 isActive = false;
             };
@@ -487,7 +531,7 @@
             const execute = (event) => {
                 if (props.type === 'keydown' && event.repeat)
                     return;
-                props.listener({ event, type: props.type, code: event.code });
+                props.listener({ event, code: event.code });
             };
             window.addEventListener(props.type, execute, props.options);
             return () => {
@@ -505,7 +549,7 @@
                         x: (keymap['ArrowLeft'] ? -1 : 0) + (keymap['ArrowRight'] ? +1 : 0),
                         y: (keymap['ArrowUp'] ? -1 : 0) + (keymap['ArrowDown'] ? +1 : 0)
                     };
-                    props.listener({ event, type: props.type, code: event.code, vector });
+                    props.listener({ event, code: event.code, vector });
                 }
             };
             const keyup = (event) => {
@@ -515,7 +559,7 @@
                         x: (keymap['ArrowLeft'] ? -1 : 0) + (keymap['ArrowRight'] ? +1 : 0),
                         y: (keymap['ArrowUp'] ? -1 : 0) + (keymap['ArrowDown'] ? +1 : 0)
                     };
-                    props.listener({ event, type: props.type, code: event.code, vector });
+                    props.listener({ event, code: event.code, vector });
                 }
             };
             window.addEventListener('keydown', keydown, props.options);
@@ -536,7 +580,7 @@
                         x: (keymap['KeyA'] ? -1 : 0) + (keymap['KeyD'] ? +1 : 0),
                         y: (keymap['KeyW'] ? -1 : 0) + (keymap['KeyS'] ? +1 : 0)
                     };
-                    props.listener({ event, type: props.type, code: event.code, vector });
+                    props.listener({ event, code: event.code, vector });
                 }
             };
             const keyup = (event) => {
@@ -546,7 +590,7 @@
                         x: (keymap['KeyA'] ? -1 : 0) + (keymap['KeyD'] ? +1 : 0),
                         y: (keymap['KeyW'] ? -1 : 0) + (keymap['KeyS'] ? +1 : 0)
                     };
-                    props.listener({ event, type: props.type, code: event.code, vector });
+                    props.listener({ event, code: event.code, vector });
                 }
             };
             window.addEventListener('keydown', keydown, props.options);
@@ -675,7 +719,7 @@
                 baseComponent = (unit) => { };
             }
             const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-            this._ = { parent, target, baseElement, baseContext, baseComponent, props };
+            this._ = { parent, target, baseElement, baseContext, baseComponent, props: props !== null && props !== void 0 ? props : {} };
             parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
             Unit.initialize(this, null);
         }
@@ -907,7 +951,9 @@
         }
         static on(unit, type, listener, options) {
             const snapshot = Unit.snapshot(Unit.currentUnit);
-            const execute = (...args) => Unit.scope(snapshot, listener, ...args);
+            const execute = (props) => {
+                Unit.scope(snapshot, listener, Object.assign({ type }, props));
+            };
             if (SYSTEM_EVENTS.includes(type)) {
                 unit._.systems[type].push({ listener, execute });
             }
@@ -936,7 +982,7 @@
                 Unit.type2units.delete(type, unit);
             }
         }
-        static emit(type, ...args) {
+        static emit(type, props = {}) {
             var _a, _b;
             const current = Unit.currentUnit;
             if (type[0] === '+') {
@@ -944,12 +990,12 @@
                     var _a;
                     const find = [unit, ...unit._.ancestors].find(u => u._.protected === true);
                     if (find === undefined || current._.ancestors.includes(find) === true || current === find) {
-                        (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(...args));
+                        (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(props));
                     }
                 });
             }
             else if (type[0] === '-') {
-                (_b = current._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach((item) => item.execute(...args));
+                (_b = current._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach((item) => item.execute(props));
             }
         }
     }
@@ -1227,51 +1273,59 @@
         },
     });
 
-    function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
-        let state = Math.max(0.0, Math.min(1.0, initialState));
-        let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
+    function OpenAndClose(unit, { open = false }) {
+        let state = open ? 1.0 : 0.0;
+        let sign = open ? +1 : -1;
         let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
         return {
             toggle(duration = 200, easing = 'ease') {
-                if (direction === null || direction < 0) {
-                    unit.open(duration, easing);
-                }
-                else {
-                    unit.close(duration, easing);
-                }
+                sign < 0 ? unit.open(duration, easing) : unit.close(duration, easing);
             },
             open(duration = 200, easing = 'ease') {
-                if (direction === null || direction < 0) {
-                    direction = +1;
-                    const d = 1 - state;
-                    timer === null || timer === void 0 ? void 0 : timer.clear();
-                    timer = xnew$1.transition((x) => {
-                        const y = x < 1.0 ? (1 - x) * d : 0.0;
-                        state = 1.0 - y;
-                        xnew$1.emit('-transition', { state, type: '-transition' });
-                    }, duration * d, easing)
-                        .timeout(() => {
-                        xnew$1.emit('-opened', { state, type: '-opened' });
-                    });
-                }
+                sign = +1;
+                const d = 1 - state;
+                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 }));
             },
             close(duration = 200, easing = 'ease') {
-                if (direction === null || direction > 0) {
-                    direction = -1;
-                    const d = state;
-                    timer === null || timer === void 0 ? void 0 : timer.clear();
-                    timer = xnew$1.transition((x) => {
-                        const y = x < 1.0 ? (1 - x) * d : 0.0;
-                        state = y;
-                        xnew$1.emit('-transition', { state, type: '-transition' });
-                    }, duration * d, easing)
-                        .timeout(() => {
-                        xnew$1.emit('-closed', { state, type: '-closed' });
-                    });
-                }
+                sign = -1;
+                const d = state;
+                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 }));
             },
         };
     }
+    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();
+        });
+    }
+    function Modal(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();
+        });
+    }
 
     function Screen(unit, { aspect, fit = 'contain' } = {}) {
         xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
@@ -1297,14 +1351,8 @@
     ">`);
     }
     function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-        const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-        xnew$1(outer).on('resize', () => {
-            newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            inner.style.width = `${newsize}px`;
-            inner.style.height = `${newsize}px`;
-        });
+        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((unit) => {
             xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
             xnew$1('<polygon points="32  7 27 13 37 13">');
@@ -1317,34 +1365,30 @@
             xnew$1('<circle cx="32" cy="32" r="14">');
         });
         unit.on('dragstart dragmove', ({ type, position }) => {
-            const x = position.x - newsize / 2;
-            const y = position.y - newsize / 2;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+            const size = unit.element.clientWidth;
+            const x = position.x - size / 2;
+            const y = position.y - size / 2;
+            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
             const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
             const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
             target.element.style.filter = 'brightness(80%)';
-            target.element.style.left = `${vector.x * newsize / 4}px`;
-            target.element.style.top = `${vector.y * newsize / 4}px`;
+            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 });
         });
         unit.on('dragend', () => {
+            const size = unit.element.clientWidth;
             const vector = { x: 0, y: 0 };
             target.element.style.filter = '';
-            target.element.style.left = `${vector.x * newsize / 4}px`;
-            target.element.style.top = `${vector.y * newsize / 4}px`;
+            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 });
         });
     }
     function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
-        const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-        xnew$1(outer).on('resize', () => {
-            newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            inner.style.width = `${newsize}px`;
-            inner.style.height = `${newsize}px`;
-        });
+        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;">`);
         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">',
@@ -1369,10 +1413,11 @@
             xnew$1('<polygon points="57 32 51 27 51 37">');
         });
         unit.on('dragstart dragmove', ({ type, position }) => {
-            const x = position.x - newsize / 2;
-            const y = position.y - newsize / 2;
+            const size = unit.element.clientWidth;
+            const x = position.x - size / 2;
+            const y = position.y - size / 2;
             const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
             const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
             if (diagonal === true) {
                 vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
@@ -1391,7 +1436,7 @@
             targets[2].element.style.filter = (vector.x < 0) ? 'brightness(80%)' : '';
             targets[3].element.style.filter = (vector.x > 0) ? 'brightness(80%)' : '';
             const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
-            xnew$1.emit(nexttype, { type: nexttype, vector });
+            xnew$1.emit(nexttype, { vector });
         });
         unit.on('dragend', () => {
             const vector = { x: 0, y: 0 };
@@ -1399,8 +1444,132 @@
             targets[1].element.style.filter = '';
             targets[2].element.style.filter = '';
             targets[3].element.style.filter = '';
-            xnew$1.emit('-up', { type: '-up', vector });
+            xnew$1.emit('-up', { vector });
+        });
+    }
+
+    function Panel(unit, { name, open = false, params }) {
+        const object = params !== null && params !== void 0 ? params : {};
+        xnew$1.extend(Group, { name, open });
+        return {
+            group({ name, open, params }, inner) {
+                const group = xnew$1((unit) => {
+                    xnew$1.extend(Panel, { name, open, params: params !== null && params !== void 0 ? params : object });
+                    inner(unit);
+                });
+                return group;
+            },
+            button(key) {
+                const button = xnew$1(Button, { key });
+                return button;
+            },
+            select(key, { options = [] } = {}) {
+                var _a, _b;
+                object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options[0]) !== null && _b !== void 0 ? _b : '';
+                const select = xnew$1(Select, { key, value: object[key], options });
+                select.on('input', ({ value }) => object[key] = value);
+                return select;
+            },
+            range(key, options = {}) {
+                var _a, _b;
+                object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options.min) !== null && _b !== void 0 ? _b : 0;
+                const number = xnew$1(Range, Object.assign({ key, value: object[key] }, options));
+                number.on('input', ({ value }) => object[key] = value);
+                return number;
+            },
+            checkbox(key) {
+                var _a;
+                object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : false;
+                const checkbox = xnew$1(Checkbox, { key, value: object[key] });
+                checkbox.on('input', ({ value }) => object[key] = value);
+                return checkbox;
+            },
+            separator() {
+                xnew$1(Separator);
+            }
+        };
+    }
+    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) => {
+                unit.on('click', () => group.toggle());
+                xnew$1('<svg viewBox="0 0 12 12" style="width: 1rem; height: 1rem; margin-right: 0.25rem;" fill="none" stroke="currentColor">', (unit) => {
+                    xnew$1('<path d="M6 2 10 6 6 10" />');
+                    group.on('-transition', ({ state }) => unit.element.style.transform = `rotate(${state * 90}deg)`);
+                });
+                xnew$1('<div>', name);
+            });
+        }
+        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;">');
+        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.on('pointerout', () => {
+            unit.element.style.background = '';
+            unit.element.style.borderColor = '';
+        });
+        unit.on('pointerdown', () => {
+            unit.element.style.filter = 'brightness(0.5)';
+        });
+        unit.on('pointerup', () => {
+            unit.element.style.filter = '';
+        });
+    }
+    function Separator(unit) {
+        xnew$1.nest('<div style="margin: 0.5rem 0; border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent);">');
+    }
+    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;">`);
+        // 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;">`);
+        // 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) => {
+            xnew$1('<div>', key);
+            xnew$1('<div key="status">', value);
+        });
+        // hidden native input for interaction
+        xnew$1.nest(`<input type="range" name="${key}" min="${min}" max="${max}" step="${step}" value="${value}" style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;">`);
+        unit.on('input', ({ event }) => {
+            const v = Number(event.target.value);
+            const r = (v - min) / (max - min);
+            fill.element.style.width = `${r * 100}%`;
+            status.element.querySelector('[key="status"]').textContent = String(v);
+        });
+    }
+    function Checkbox(unit, { key = '', value } = {}) {
+        xnew$1.nest(`<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('<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">', () => {
+                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)' : '';
+            check.style.opacity = checked ? '1' : '0';
+        };
+        update(!!value);
+        xnew$1.nest(`<input type="checkbox" name="${key}" ${value ? 'checked' : ''} style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0;">`);
+        unit.on('input', ({ event, value }) => {
+            update(value);
+        });
+    }
+    function Select(unit, { key = '', value, options = [] } = {}) {
+        xnew$1.nest(`<div style="height: 2rem; margin: 0.125rem 0; padding: 0 0.25rem; 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 context = new window.AudioContext();
@@ -1632,6 +1801,9 @@
         OpenAndClose,
         AnalogStick,
         DPad,
+        Panel,
+        Accordion,
+        Modal,
     };
     const audio = {
         load(path) {