@mulsense/xnew 0.6.0 → 0.6.2

package/dist/xnew.mjs

@@ -217,6 +217,12 @@ class Eventor {
         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);
         }
@@ -267,7 +273,7 @@ class Eventor {
     }
     basic(props) {
         const execute = (event) => {
-            props.listener({ event, type: event.type });
+            props.listener({ event });
         };
         props.element.addEventListener(props.type, execute, props.options);
         return () => {
@@ -277,7 +283,7 @@ class Eventor {
     resize(props) {
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
-                props.listener({ type: 'resize' });
+                props.listener({});
                 break;
             }
         });
@@ -286,9 +292,47 @@ class Eventor {
             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 () => {
@@ -298,7 +342,7 @@ class Eventor {
     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);
@@ -308,7 +352,7 @@ class Eventor {
     }
     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 () => {
@@ -317,7 +361,7 @@ class Eventor {
     }
     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 () => {
@@ -326,7 +370,7 @@ class Eventor {
     }
     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 () => {
@@ -336,7 +380,7 @@ class Eventor {
     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);
@@ -346,7 +390,7 @@ class Eventor {
     }
     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 () => {
@@ -366,7 +410,7 @@ class Eventor {
                     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;
                 }
@@ -375,7 +419,7 @@ class Eventor {
                 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();
                 }
@@ -384,7 +428,7 @@ class Eventor {
                 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();
                 }
@@ -393,7 +437,7 @@ class Eventor {
             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() {
@@ -422,7 +466,7 @@ class Eventor {
             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 }) => {
@@ -449,7 +493,7 @@ class Eventor {
                 //     }
                 // }
                 if (props.type === 'gesturemove') {
-                    props.listener({ event, type: props.type, scale });
+                    props.listener({ event, scale });
                 }
             }
             map.set(event.pointerId, position);
@@ -457,7 +501,7 @@ class Eventor {
         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;
         };
@@ -481,7 +525,7 @@ class Eventor {
         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 () => {
@@ -499,7 +543,7 @@ class Eventor {
                     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) => {
@@ -509,7 +553,7 @@ class Eventor {
                     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);
@@ -530,7 +574,7 @@ class Eventor {
                     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) => {
@@ -540,7 +584,7 @@ class Eventor {
                     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);
@@ -669,7 +713,7 @@ class Unit {
             baseComponent = (unit) => { };
         }
         const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-        this._ = { parent, target, baseElement, baseContext, baseComponent, props };
+        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);
     }
@@ -901,7 +945,9 @@ class Unit {
     }
     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 });
         }
@@ -930,7 +976,7 @@ class Unit {
             Unit.type2units.delete(type, unit);
         }
     }
-    static emit(type, ...args) {
+    static emit(type, props = {}) {
         var _a, _b;
         const current = Unit.currentUnit;
         if (type[0] === '+') {
@@ -938,12 +984,12 @@ class Unit {
                 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));
         }
     }
 }
@@ -1221,51 +1267,59 @@ const xnew$1 = Object.assign(function (...args) {
     },
 });
 
-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;">');
@@ -1291,14 +1345,8 @@ function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strok
     ">`);
 }
 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">');
@@ -1311,34 +1359,30 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         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">',
@@ -1363,10 +1407,11 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
         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;
@@ -1385,7 +1430,7 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
         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 };
@@ -1393,8 +1438,132 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
         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();
@@ -1626,6 +1795,9 @@ const basics = {
     OpenAndClose,
     AnalogStick,
     DPad,
+    Panel,
+    Accordion,
+    Modal,
 };
 const audio = {
     load(path) {

package/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.6.0",
+  "version": "0.6.2",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",