@mulsense/xnew 0.6.0 → 0.6.1

package/dist/addons/xpixi.js

@@ -28,7 +28,7 @@
             xnew(Root, { canvas });
         },
         nest(object) {
-            xnew.extend(Nest, { object });
+            xnew(Nest, { object });
             return object;
         },
         get renderer() {

package/dist/addons/xpixi.mjs

@@ -6,7 +6,7 @@ var xpixi = {
         xnew(Root, { canvas });
     },
     nest(object) {
-        xnew.extend(Nest, { object });
+        xnew(Nest, { object });
         return object;
     },
     get renderer() {

package/dist/addons/xrapier2d.js

@@ -6,7 +6,7 @@
 
     var xrapier2d = {
         initialize({ gravity = { x: 0.0, y: -9.81 } } = {}) {
-            xnew.extend(Root, { gravity });
+            xnew(Root, { gravity });
         },
         get world() {
             var _a;

package/dist/addons/xrapier2d.mjs

@@ -3,7 +3,7 @@ import RAPIER from '@dimforge/rapier2d-compat';
 
 var xrapier2d = {
     initialize({ gravity = { x: 0.0, y: -9.81 } } = {}) {
-        xnew.extend(Root, { gravity });
+        xnew(Root, { gravity });
     },
     get world() {
         var _a;

package/dist/addons/xthree.js

@@ -68,6 +68,9 @@
         unit.on('finalize', () => {
             parent.remove(object);
         });
+        return {
+            get threeObject() { return object; },
+        };
     }
 
     return xthree;

package/dist/addons/xthree.mjs

@@ -46,6 +46,9 @@ function Nest(unit, { object }) {
     unit.on('finalize', () => {
         parent.remove(object);
     });
+    return {
+        get threeObject() { return object; },
+    };
 }
 
 export { xthree as default };

package/dist/xnew.d.ts

@@ -34,6 +34,8 @@ declare class Eventor {
     remove(type: string, listener: Function): void;
     private basic;
     private resize;
+    private change;
+    private input;
     private click;
     private click_outside;
     private pointer;
@@ -147,7 +149,7 @@ declare class Unit {
     off(type?: string, listener?: Function): void;
     static on(unit: Unit, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     static off(unit: Unit, type: string, listener?: Function): void;
-    static emit(type: string, ...args: any[]): void;
+    static emit(type: string, props?: object): void;
 }
 
 interface CreateUnit {
@@ -173,13 +175,17 @@ interface CreateUnit {
     (target: HTMLElement | SVGElement | string, Component?: Function | string, props?: Object): Unit;
 }
 
-declare function OpenAndClose(unit: Unit, { state: initialState }?: {
-    state?: number;
+declare function OpenAndClose(unit: Unit, { open }?: {
+    open?: boolean;
 }): {
     toggle(duration?: number, easing?: string): void;
     open(duration?: number, easing?: string): void;
     close(duration?: number, easing?: string): void;
 };
+declare function Accordion(unit: Unit): void;
+declare function Modal(unit: Unit, { background }?: {
+    background?: string;
+}): void;
 
 type ScreenFit = 'contain' | 'cover';
 declare function Screen(unit: Unit, { aspect, fit }?: {
@@ -206,6 +212,26 @@ declare function DPad(unit: Unit, { diagonal, stroke, strokeOpacity, strokeWidth
     fillOpacity?: number;
 }): void;
 
+interface GUIPanelOptions {
+    name?: string;
+    open?: boolean;
+    params?: Record<string, any>;
+}
+declare function GUIPanel(unit: Unit, { name, open, params }: GUIPanelOptions): {
+    group({ name, open, params }: GUIPanelOptions, inner: Function): Unit;
+    button(key: string): Unit;
+    select(key: string, { options }?: {
+        options?: string[];
+    }): Unit;
+    range(key: string, options?: {
+        min?: number;
+        max?: number;
+        step?: number;
+    }): Unit;
+    checkbox(key: string): Unit;
+    separator(): void;
+};
+
 type SynthesizerOptions = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;
@@ -255,7 +281,7 @@ declare const xnew: CreateUnit & {
     extend(component: Function, props?: Object): {
         [key: string]: any;
     };
-    context(key: any, value?: any): any;
+    context(component: Function): any;
     promise(promise: Promise<any>): UnitPromise;
     then(callback: Function): UnitPromise;
     catch(callback: Function): UnitPromise;
@@ -273,6 +299,9 @@ declare const xnew: CreateUnit & {
         OpenAndClose: typeof OpenAndClose;
         AnalogStick: typeof AnalogStick;
         DPad: typeof DPad;
+        GUIPanel: typeof GUIPanel;
+        Accordion: typeof Accordion;
+        Modal: typeof Modal;
     };
     audio: {
         load(path: string): UnitPromise;

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,8 +1273,8 @@
         },
     });
 
-    function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
-        let state = Math.max(0.0, Math.min(1.0, initialState));
+    function OpenAndClose(unit, { open = false } = {}) {
+        let state = open ? 1.0 : 0.0;
         let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
         let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
         return {
@@ -1248,10 +1294,10 @@
                     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' });
+                        xnew$1.emit('-transition', { state });
                     }, duration * d, easing)
                         .timeout(() => {
-                        xnew$1.emit('-opened', { state, type: '-opened' });
+                        xnew$1.emit('-opened', { state });
                     });
                 }
             },
@@ -1263,15 +1309,37 @@
                     timer = xnew$1.transition((x) => {
                         const y = x < 1.0 ? (1 - x) * d : 0.0;
                         state = y;
-                        xnew$1.emit('-transition', { state, type: '-transition' });
+                        xnew$1.emit('-transition', { state });
                     }, duration * d, easing)
                         .timeout(() => {
-                        xnew$1.emit('-closed', { state, type: '-closed' });
+                        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, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
+        const system = xnew$1.context(OpenAndClose);
+        system.on('-closed', () => unit.finalize());
+        xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
+        unit.on('click', ({ event }) => system.close());
+        const outer = xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0;"">`);
+        xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
+        unit.on('click', ({ event }) => event.stopPropagation());
+        outer.style.background = background;
+        system.on('-transition', ({ state }) => {
+            outer.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 +1365,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 +1379,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 +1427,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 +1450,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,10 +1458,125 @@
             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 GUIPanel(unit, { name, open = false, params }) {
+        const object = params !== null && params !== void 0 ? params : {};
+        xnew$1.extend(Group, { name, open });
+        return {
+            group({ name, open, params }, inner) {
+                const group = xnew$1((unit) => {
+                    xnew$1.extend(GUIPanel, { name, open, params: params !== null && params !== void 0 ? params : object });
+                    inner(unit);
+                });
+                group.on('-eventcapture', ({ event, key, value }) => {
+                    xnew$1.emit('-eventcapture', { event, key, value });
+                });
+                return group;
+            },
+            button(key) {
+                const button = xnew$1(Button, { key });
+                button.on('click', ({ event }) => {
+                    xnew$1.emit('-eventcapture', { event, key });
+                });
+                return button;
+            },
+            select(key, { options = [] } = {}) {
+                var _a, _b;
+                object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options[0]) !== null && _b !== void 0 ? _b : '';
+                const select = xnew$1(Select, { key, value: object[key], options });
+                select.on('input', ({ event, value }) => {
+                    xnew$1.emit('-eventcapture', { event, key, value });
+                });
+                return select;
+            },
+            range(key, options = {}) {
+                var _a;
+                object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : 0;
+                const number = xnew$1(Range, Object.assign({ key, value: object[key] }, options));
+                number.on('input', ({ event, value }) => {
+                    object[key] = value;
+                    xnew$1.emit('-eventcapture', { event, key, value });
+                });
+                return number;
+            },
+            checkbox(key) {
+                var _a;
+                object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : false;
+                const checkbox = xnew$1(Checkbox, { key, value: object[key] });
+                checkbox.on('input', ({ event, value }) => {
+                    object[key] = value;
+                    xnew$1.emit('-eventcapture', { event, key, value });
+                });
+                return checkbox;
+            },
+            separator() {
+                xnew$1(Separator);
+            }
+        };
+    }
+    function Group(group, { name, open = false }) {
+        xnew$1.extend(OpenAndClose, { open });
+        if (name) {
+            xnew$1('<div style="display: flex; align-items: center; cursor: pointer;">', (unit) => {
+                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; padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">');
+        unit.element.textContent = key;
+        unit.on('pointerover', () => {
+            unit.element.style.background = 'rgba(0, 0, 128, 0.1)';
+            unit.element.style.borderColor = 'blue';
+        });
+        unit.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;">');
+    }
+    function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
+        xnew$1.nest(`<div style="margin: 0.125rem;">`);
+        const status = xnew$1('<div style="display: flex; justify-content: space-between;">', (unit) => {
+            xnew$1('<div style="flex: 1;">', key);
+            xnew$1('<div key="status" style="flex: none;">', value);
+        });
+        xnew$1.nest(`<input type="range" name="${key}" min="${min}" max="${max}" step="${step}" value="${value}" style="width: 100%; cursor: pointer;">`);
+        unit.on('input', ({ event }) => {
+            status.element.querySelector('[key="status"]').textContent = event.target.value;
+        });
+    }
+    function Checkbox(unit, { key = '', value } = {}) {
+        xnew$1.nest(`<label style="margin: 0.125rem; display: flex; align-items: center; cursor: pointer;">`);
+        xnew$1('<div style="flex: 1;">', key);
+        xnew$1.nest(`<input type="checkbox" name="${key}" ${value ? 'checked' : ''} style="margin-right: 0.25rem;">`);
+    }
+    function Select(unit, { key = '', value, options = [] } = {}) {
+        xnew$1.nest(`<div style="margin: 0.125rem; display: flex; align-items: center;">`);
+        xnew$1('<div style="flex: 1;">', key);
+        xnew$1.nest(`<select name="${key}" style="padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">`);
+        for (const option of options) {
+            xnew$1(`<option value="${option}" ${option === value ? 'selected' : ''}>`, option);
+        }
+    }
+
     const context = new window.AudioContext();
     const master = context.createGain();
     //----------------------------------------------------------------------------------------------------
@@ -1632,6 +1806,9 @@
         OpenAndClose,
         AnalogStick,
         DPad,
+        GUIPanel,
+        Accordion,
+        Modal,
     };
     const audio = {
         load(path) {

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,8 +1267,8 @@ 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));
+function OpenAndClose(unit, { open = false } = {}) {
+    let state = open ? 1.0 : 0.0;
     let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
     let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
     return {
@@ -1242,10 +1288,10 @@ function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
                 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' });
+                    xnew$1.emit('-transition', { state });
                 }, duration * d, easing)
                     .timeout(() => {
-                    xnew$1.emit('-opened', { state, type: '-opened' });
+                    xnew$1.emit('-opened', { state });
                 });
             }
         },
@@ -1257,15 +1303,37 @@ function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
                 timer = xnew$1.transition((x) => {
                     const y = x < 1.0 ? (1 - x) * d : 0.0;
                     state = y;
-                    xnew$1.emit('-transition', { state, type: '-transition' });
+                    xnew$1.emit('-transition', { state });
                 }, duration * d, easing)
                     .timeout(() => {
-                    xnew$1.emit('-closed', { state, type: '-closed' });
+                    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, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
+    const system = xnew$1.context(OpenAndClose);
+    system.on('-closed', () => unit.finalize());
+    xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
+    unit.on('click', ({ event }) => system.close());
+    const outer = xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0;"">`);
+    xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
+    unit.on('click', ({ event }) => event.stopPropagation());
+    outer.style.background = background;
+    system.on('-transition', ({ state }) => {
+        outer.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 +1359,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 +1373,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 +1421,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 +1444,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,10 +1452,125 @@ 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 GUIPanel(unit, { name, open = false, params }) {
+    const object = params !== null && params !== void 0 ? params : {};
+    xnew$1.extend(Group, { name, open });
+    return {
+        group({ name, open, params }, inner) {
+            const group = xnew$1((unit) => {
+                xnew$1.extend(GUIPanel, { name, open, params: params !== null && params !== void 0 ? params : object });
+                inner(unit);
+            });
+            group.on('-eventcapture', ({ event, key, value }) => {
+                xnew$1.emit('-eventcapture', { event, key, value });
+            });
+            return group;
+        },
+        button(key) {
+            const button = xnew$1(Button, { key });
+            button.on('click', ({ event }) => {
+                xnew$1.emit('-eventcapture', { event, key });
+            });
+            return button;
+        },
+        select(key, { options = [] } = {}) {
+            var _a, _b;
+            object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options[0]) !== null && _b !== void 0 ? _b : '';
+            const select = xnew$1(Select, { key, value: object[key], options });
+            select.on('input', ({ event, value }) => {
+                xnew$1.emit('-eventcapture', { event, key, value });
+            });
+            return select;
+        },
+        range(key, options = {}) {
+            var _a;
+            object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : 0;
+            const number = xnew$1(Range, Object.assign({ key, value: object[key] }, options));
+            number.on('input', ({ event, value }) => {
+                object[key] = value;
+                xnew$1.emit('-eventcapture', { event, key, value });
+            });
+            return number;
+        },
+        checkbox(key) {
+            var _a;
+            object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : false;
+            const checkbox = xnew$1(Checkbox, { key, value: object[key] });
+            checkbox.on('input', ({ event, value }) => {
+                object[key] = value;
+                xnew$1.emit('-eventcapture', { event, key, value });
+            });
+            return checkbox;
+        },
+        separator() {
+            xnew$1(Separator);
+        }
+    };
+}
+function Group(group, { name, open = false }) {
+    xnew$1.extend(OpenAndClose, { open });
+    if (name) {
+        xnew$1('<div style="display: flex; align-items: center; cursor: pointer;">', (unit) => {
+            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; padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">');
+    unit.element.textContent = key;
+    unit.on('pointerover', () => {
+        unit.element.style.background = 'rgba(0, 0, 128, 0.1)';
+        unit.element.style.borderColor = 'blue';
+    });
+    unit.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;">');
+}
+function Range(unit, { key = '', value, min = 0, max = 100, step = 1 }) {
+    xnew$1.nest(`<div style="margin: 0.125rem;">`);
+    const status = xnew$1('<div style="display: flex; justify-content: space-between;">', (unit) => {
+        xnew$1('<div style="flex: 1;">', key);
+        xnew$1('<div key="status" style="flex: none;">', value);
+    });
+    xnew$1.nest(`<input type="range" name="${key}" min="${min}" max="${max}" step="${step}" value="${value}" style="width: 100%; cursor: pointer;">`);
+    unit.on('input', ({ event }) => {
+        status.element.querySelector('[key="status"]').textContent = event.target.value;
+    });
+}
+function Checkbox(unit, { key = '', value } = {}) {
+    xnew$1.nest(`<label style="margin: 0.125rem; display: flex; align-items: center; cursor: pointer;">`);
+    xnew$1('<div style="flex: 1;">', key);
+    xnew$1.nest(`<input type="checkbox" name="${key}" ${value ? 'checked' : ''} style="margin-right: 0.25rem;">`);
+}
+function Select(unit, { key = '', value, options = [] } = {}) {
+    xnew$1.nest(`<div style="margin: 0.125rem; display: flex; align-items: center;">`);
+    xnew$1('<div style="flex: 1;">', key);
+    xnew$1.nest(`<select name="${key}" style="padding: 0.125rem; border: 1px solid; border-radius: 0.25rem; cursor: pointer;">`);
+    for (const option of options) {
+        xnew$1(`<option value="${option}" ${option === value ? 'selected' : ''}>`, option);
+    }
+}
+
 const context = new window.AudioContext();
 const master = context.createGain();
 //----------------------------------------------------------------------------------------------------
@@ -1626,6 +1800,9 @@ const basics = {
     OpenAndClose,
     AnalogStick,
     DPad,
+    GUIPanel,
+    Accordion,
+    Modal,
 };
 const audio = {
     load(path) {

package/package.json

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