@mulsense/xnew 0.1.1 → 0.1.3

package/dist/xnew.js

@@ -4,6 +4,23 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.xnew = factory());
 })(this, (function () { 'use strict';
 
+    function ResizeEvent(resize) {
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                resize.emit('-resize');
+                break;
+            }
+        });
+        if (resize.element) {
+            observer.observe(resize.element);
+        }
+        resize.on('finalize', () => {
+            if (resize.element) {
+                observer.unobserve(resize.element);
+            }
+        });
+    }
+
     //----------------------------------------------------------------------------------------------------
     // ticker
     //----------------------------------------------------------------------------------------------------
@@ -108,56 +125,42 @@
         }
     }
 
-    //----------------------------------------------------------------------------------------------------
-    // map ex
-    //----------------------------------------------------------------------------------------------------
-    class MapEx {
-        constructor() {
-            this.map = new Map;
-        }
-        get size() {
-            return this.map.size;
-        }
-        forEach(callback) {
-            this.map.forEach(callback);
-        }
-        clear() {
-            this.map.clear();
-        }
-    }
     //----------------------------------------------------------------------------------------------------
     // map set
     //----------------------------------------------------------------------------------------------------
-    class MapSet extends MapEx {
+    class MapSet extends Map {
         has(key, value) {
             var _a, _b;
             if (value === undefined) {
-                return this.map.has(key);
+                return super.has(key);
             }
             else {
-                return (_b = (_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.has(value)) !== null && _b !== void 0 ? _b : false;
+                return (_b = (_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.has(value)) !== null && _b !== void 0 ? _b : false;
             }
         }
-        get(key) {
-            return this.map.get(key);
-        }
-        keys() {
-            return this.map.keys();
-        }
         add(key, value) {
             var _a;
-            this.map.set(key, ((_a = this.map.get(key)) !== null && _a !== void 0 ? _a : new Set).add(value));
+            super.set(key, ((_a = super.get(key)) !== null && _a !== void 0 ? _a : new Set).add(value));
             return this;
         }
+        keys(key) {
+            var _a, _b;
+            if (key === undefined) {
+                return super.keys();
+            }
+            else {
+                return (_b = (_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : [].values();
+            }
+        }
         delete(key, value) {
             var _a, _b, _c, _d;
             let ret = false;
             if (value === undefined) {
-                ret = (((_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key) : false;
+                ret = (((_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? super.delete(key) : false;
             }
             else {
-                ret = (_c = (_b = this.map.get(key)) === null || _b === void 0 ? void 0 : _b.delete(value)) !== null && _c !== void 0 ? _c : false;
-                (((_d = this.map.get(key)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key);
+                ret = (_c = (_b = super.get(key)) === null || _b === void 0 ? void 0 : _b.delete(value)) !== null && _c !== void 0 ? _c : false;
+                (((_d = super.get(key)) === null || _d === void 0 ? void 0 : _d.size) === 0) && super.delete(key);
             }
             return ret;
         }
@@ -165,131 +168,71 @@
     //----------------------------------------------------------------------------------------------------
     // map map
     //----------------------------------------------------------------------------------------------------
-    class MapMap extends MapEx {
+    class MapMap extends Map {
         has(key1, key2) {
             var _a, _b;
             if (key2 === undefined) {
-                return this.map.has(key1);
+                return super.has(key1);
             }
             else {
-                return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2)) !== null && _b !== void 0 ? _b : false;
+                return (_b = (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2)) !== null && _b !== void 0 ? _b : false;
             }
         }
-        set(key1, key2, value) {
+        set(key1, key2OrValue, value) {
             var _a;
-            this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new Map).set(key2, value));
+            if (value === undefined) {
+                // 2 args: directly set Map<Key2, Value>
+                super.set(key1, key2OrValue);
+            }
+            else {
+                // 3 args: set nested value
+                super.set(key1, ((_a = super.get(key1)) !== null && _a !== void 0 ? _a : new Map).set(key2OrValue, value));
+            }
             return this;
         }
         get(key1, key2) {
             var _a;
             if (key2 === undefined) {
-                return this.map.get(key1);
+                return super.get(key1);
             }
             else {
-                return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
+                return (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
             }
         }
         keys(key1) {
             var _a, _b;
             if (key1 === undefined) {
-                return this.map.keys();
+                return super.keys();
             }
             else {
-                return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
+                return (_b = (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : [].values();
             }
         }
         delete(key1, key2) {
             var _a, _b, _c, _d;
             let ret = false;
             if (key2 === undefined) {
-                ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
-            }
-            else {
-                ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2)) !== null && _c !== void 0 ? _c : false;
-                (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
-            }
-            return ret;
-        }
-    }
-    //----------------------------------------------------------------------------------------------------
-    // map map map
-    //----------------------------------------------------------------------------------------------------
-    class MapMapMap extends MapEx {
-        has(key1, key2, key3) {
-            var _a, _b;
-            if (key2 === undefined) {
-                return this.map.has(key1);
-            }
-            else {
-                return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2, key3)) !== null && _b !== void 0 ? _b : false;
-            }
-        }
-        set(key1, key2, key3, value) {
-            var _a;
-            this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new MapMap).set(key2, key3, value));
-            return this;
-        }
-        get(key1, key2, key3) {
-            var _a, _b;
-            if (key2 === undefined) {
-                return this.map.get(key1);
-            }
-            else if (key3 === undefined) {
-                return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
-            }
-            else {
-                return (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.get(key2, key3);
-            }
-        }
-        keys(key1, key2) {
-            var _a, _b, _c, _d, _e;
-            if (key1 === undefined) {
-                return this.map.keys();
-            }
-            else if (key2 === undefined) {
-                return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
-            }
-            else {
-                return (_e = (_d = (_c = this.map.get(key1)) === null || _c === void 0 ? void 0 : _c.get(key2)) === null || _d === void 0 ? void 0 : _d.keys()) !== null && _e !== void 0 ? _e : (function* () { })();
-            }
-        }
-        delete(key1, key2, key3) {
-            var _a, _b, _c, _d;
-            let ret = false;
-            if (key2 === undefined) {
-                ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
+                ret = (((_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? super.delete(key1) : false;
             }
             else {
-                ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2, key3)) !== null && _c !== void 0 ? _c : false;
-                (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
+                ret = (_c = (_b = super.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2)) !== null && _c !== void 0 ? _c : false;
+                (((_d = super.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && super.delete(key1);
             }
             return ret;
         }
     }
 
     //----------------------------------------------------------------------------------------------------
-    // Constants
+    // Definitions
     //----------------------------------------------------------------------------------------------------
-    const LIFECYCLE_EVENTS = ['start', 'update', 'stop', 'finalize'];
-    const LIFECYCLE_STATES = {
-        INVOKED: 'invoked',
-        INITIALIZED: 'initialized',
-        STARTED: 'started',
-        STOPPED: 'stopped',
-        PRE_FINALIZED: 'pre finalized',
-        FINALIZED: 'finalized',
-    };
-    const CUSTOM_EVENT_PREFIX = {
-        GLOBAL: '+',
-        INTERNAL: '-',
-    };
+    const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
     //----------------------------------------------------------------------------------------------------
-    // unit main
+    // Unit
     //----------------------------------------------------------------------------------------------------
     class Unit {
         constructor(target, component, props) {
-            var _a, _b, _c, _d, _e;
-            const parent = UnitScope.current;
+            var _a, _b, _c;
+            const parent = Unit.current;
             let baseElement;
             if (target instanceof HTMLElement || target instanceof SVGElement) {
                 baseElement = target;
@@ -298,27 +241,29 @@
                 baseElement = (_a = parent._.currentElement) !== null && _a !== void 0 ? _a : parent._.baseElement;
             }
             else {
-                baseElement = (_c = (_b = document.currentScript) === null || _b === void 0 ? void 0 : _b.parentElement) !== null && _c !== void 0 ? _c : document.body;
+                baseElement = document.body;
             }
-            let baseComponent = null;
+            let baseComponent;
             if (typeof component === 'function') {
                 baseComponent = component;
             }
             else if (typeof component === 'string') {
                 baseComponent = (self) => { self.element.textContent = component; };
             }
+            else {
+                baseComponent = (self) => { };
+            }
+            const baseContext = (_b = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _b !== void 0 ? _b : null;
             this._ = {
-                root: (_d = parent === null || parent === void 0 ? void 0 : parent._.root) !== null && _d !== void 0 ? _d : this,
                 parent,
                 target,
+                baseElement,
+                baseContext,
                 baseComponent,
                 props,
-                baseElement,
-                nextNest: { element: baseElement, position: 'beforeend' },
-                baseContext: UnitScope.get(parent),
             };
-            ((_e = parent === null || parent === void 0 ? void 0 : parent._.children) !== null && _e !== void 0 ? _e : Unit.roots).push(this);
-            Unit.initialize(this);
+            ((_c = parent === null || parent === void 0 ? void 0 : parent._.children) !== null && _c !== void 0 ? _c : Unit.roots).push(this);
+            Unit.initialize(this, { element: baseElement, position: 'beforeend' });
         }
         get element() {
             return this._.currentElement;
@@ -342,99 +287,50 @@
         }
         reboot() {
             Unit.stop(this);
-            let trace = this._.currentElement;
-            while (trace.parentElement && trace.parentElement !== this._.baseElement) {
-                trace = trace.parentElement;
+            let first = this._.currentElement;
+            while (first.parentElement && first.parentElement !== this._.baseElement) {
+                first = first.parentElement;
             }
-            if (trace.parentElement === this._.baseElement) {
-                this._.nextNest.element = trace.nextElementSibling;
-                this._.nextNest.position = 'beforebegin';
+            let nextNest;
+            if (first.parentElement === this._.baseElement && first.nextElementSibling) {
+                nextNest = { element: first.nextElementSibling, position: 'beforebegin' };
             }
-            Unit.finalize(this);
-            Unit.initialize(this);
-        }
-        get components() {
-            return this._.components;
-        }
-        on(type, listener, options) {
-            try {
-                if (typeof type === 'string') {
-                    const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
-                    filtered.forEach((type) => {
-                        this._.system[type].push(listener);
-                    });
-                }
-                UnitEvent.on(this, type, listener, options);
-            }
-            catch (error) {
-                console.error('unit.on(type, listener, option?): ', error);
-            }
-            return this;
-        }
-        off(type, listener) {
-            try {
-                if (type === undefined) {
-                    this._.system = { start: [], update: [], stop: [], finalize: [] };
-                }
-                else if (typeof type === 'string') {
-                    const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
-                    filtered.forEach((type) => {
-                        if (listener === undefined) {
-                            this._.system[type] = [];
-                        }
-                        else {
-                            this._.system[type] = this._.system[type].filter((l) => l !== listener);
-                        }
-                    });
-                }
-                UnitEvent.off(this, type, listener);
-            }
-            catch (error) {
-                console.error('unit.off(type, listener): ', error);
-            }
-            return this;
-        }
-        emit(type, ...args) {
-            try {
-                UnitEvent.emit(this, type, ...args);
-            }
-            catch (error) {
-                console.error('unit.emit(type, ...args): ', error);
+            else {
+                nextNest = { element: this._.baseElement, position: 'beforeend' };
             }
+            Unit.finalize(this);
+            Unit.initialize(this, nextNest);
         }
-        //----------------------------------------------------------------------------------------------------
-        // internal
-        //----------------------------------------------------------------------------------------------------
-        static initialize(unit) {
+        static initialize(unit, nextNest) {
             var _a;
             unit._ = Object.assign(unit._, {
+                nextNest,
                 children: [],
-                components: [],
+                components: new Set(),
+                listeners: new MapMap(),
+                sublisteners: new MapMap(),
                 captures: [],
-                state: LIFECYCLE_STATES.INVOKED,
+                state: 'invoked',
                 tostart: true,
                 currentElement: unit._.baseElement,
-                upcount: 0,
-                resolved: false,
+                currentContext: unit._.baseContext,
                 defines: {},
                 system: { start: [], update: [], stop: [], finalize: [] },
             });
-            UnitScope.initialize(unit, unit._.baseContext);
+            Unit.current = unit;
             // nest html element
             if (typeof unit._.target === 'string') {
                 Unit.nest(unit, unit._.target);
             }
             // setup component
             if (typeof unit._.baseComponent === 'function') {
-                UnitScope.execute({ unit, context: null, element: null }, () => Unit.extend(unit, unit._.baseComponent, unit._.props));
+                Unit.extend(unit, unit._.baseComponent, unit._.props);
             }
             // whether the unit promise was resolved
-            (_a = UnitPromise.get(unit)) === null || _a === void 0 ? void 0 : _a.then(() => {
-                unit._.resolved = true;
-            });
-            unit._.state = LIFECYCLE_STATES.INITIALIZED;
+            (_a = UnitPromise.get(unit)) === null || _a === void 0 ? void 0 : _a.then(() => unit._.state = 'initialized');
+            // setup capture
             let current = unit;
-            while (current !== null) {
+            while (1) {
                 let captured = false;
                 for (const capture of current._.captures) {
                     if (capture.checker(unit)) {
@@ -442,25 +338,27 @@
                         captured = true;
                     }
                 }
-                if (captured === false) {
+                if (captured === false && current._.parent !== null) {
                     current = current._.parent;
                 }
                 else {
                     break;
                 }
             }
+            Unit.current = unit._.parent;
         }
         static finalize(unit) {
-            if (unit._.state !== LIFECYCLE_STATES.FINALIZED && unit._.state !== LIFECYCLE_STATES.PRE_FINALIZED) {
-                unit._.state = LIFECYCLE_STATES.PRE_FINALIZED;
+            if (unit._.state !== 'finalized' && unit._.state !== 'pre-finalized') {
+                unit._.state = 'pre-finalized';
                 unit._.children.forEach((child) => child.finalize());
                 unit._.system.finalize.forEach((listener) => {
-                    UnitScope.execute(UnitScope.snapshot(unit), listener);
+                    Unit.scope(Unit.snapshot(unit), listener);
+                });
+                unit.off();
+                Unit.suboff(unit, null);
+                unit._.components.forEach((component) => {
+                    Unit.componentUnits.delete(component, unit);
                 });
-                UnitEvent.off(unit);
-                UnitEvent.suboff(unit, null);
-                UnitScope.finalize(unit);
-                UnitComponent.finalize(unit);
                 UnitPromise.finalize(unit);
                 while (unit._.currentElement !== unit._.baseElement && unit._.currentElement.parentElement !== null) {
                     const parent = unit._.currentElement.parentElement;
@@ -469,12 +367,12 @@
                 }
                 // reset defines
                 Object.keys(unit._.defines).forEach((key) => {
-                    if (!LIFECYCLE_EVENTS.includes(key)) {
+                    if (SYSTEM_EVENTS.includes(key) === false) {
                         delete unit[key];
                     }
                 });
                 unit._.defines = {};
-                unit._.state = LIFECYCLE_STATES.FINALIZED;
+                unit._.state = 'finalized';
             }
         }
         static nest(unit, tag) {
@@ -496,66 +394,61 @@
         }
         static extend(unit, component, props) {
             var _a;
-            unit._.components.push(component);
-            UnitComponent.add(unit, component);
+            unit._.components.add(component);
+            Unit.componentUnits.add(component, unit);
             const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
-            const snapshot = UnitScope.snapshot(unit);
             Object.keys(defines).forEach((key) => {
-                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
                 if (unit[key] !== undefined && unit._.defines[key] === undefined) {
                     throw new Error(`The property "${key}" already exists.`);
                 }
-                const newDescriptor = { configurable: true, enumerable: true };
+                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+                const wrappedDesc = { configurable: true, enumerable: true };
                 if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) {
-                    newDescriptor.get = (...args) => UnitScope.execute(snapshot, descriptor.get, ...args);
+                    wrappedDesc.get = Unit.wrap(descriptor.get);
                 }
                 if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
-                    newDescriptor.set = (...args) => UnitScope.execute(snapshot, descriptor.set, ...args);
+                    wrappedDesc.set = Unit.wrap(descriptor.set);
                 }
                 if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                    newDescriptor.value = (...args) => UnitScope.execute(snapshot, descriptor.value, ...args);
+                    wrappedDesc.value = Unit.wrap(descriptor.value);
                 }
                 else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
-                    newDescriptor.writable = true;
-                    newDescriptor.value = descriptor.value;
+                    wrappedDesc.writable = true;
+                    wrappedDesc.value = descriptor.value;
                 }
-                Object.defineProperty(unit._.defines, key, newDescriptor);
-                Object.defineProperty(unit, key, newDescriptor);
+                Object.defineProperty(unit._.defines, key, wrappedDesc);
+                Object.defineProperty(unit, key, wrappedDesc);
             });
         }
         static start(unit, time) {
-            if (!unit._.resolved || !unit._.tostart)
+            if (unit._.tostart === false)
                 return;
-            const { state } = unit._;
-            if (state === LIFECYCLE_STATES.INVOKED || state === LIFECYCLE_STATES.INITIALIZED || state === LIFECYCLE_STATES.STOPPED) {
-                unit._.state = LIFECYCLE_STATES.STARTED;
+            if (unit._.state === 'initialized' || unit._.state === 'stopped') {
+                unit._.state = 'started';
                 unit._.children.forEach((child) => Unit.start(child, time));
                 unit._.system.start.forEach((listener) => {
-                    UnitScope.execute(UnitScope.snapshot(unit), listener);
+                    Unit.scope(Unit.snapshot(unit), listener);
                 });
             }
-            else if (state === LIFECYCLE_STATES.STARTED) {
+            else if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.start(child, time));
             }
         }
         static stop(unit) {
-            if (unit._.state === LIFECYCLE_STATES.STARTED) {
-                unit._.state = LIFECYCLE_STATES.STOPPED;
+            if (unit._.state === 'started') {
+                unit._.state = 'stopped';
                 unit._.children.forEach((child) => Unit.stop(child));
                 unit._.system.stop.forEach((listener) => {
-                    UnitScope.execute(UnitScope.snapshot(unit), listener);
+                    Unit.scope(Unit.snapshot(unit), listener);
                 });
             }
         }
         static update(unit, time) {
-            if (unit._.state === LIFECYCLE_STATES.STARTED) {
+            if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.update(child, time));
-                if (unit._.state === LIFECYCLE_STATES.STARTED) {
-                    unit._.system.update.forEach((listener) => {
-                        UnitScope.execute(UnitScope.snapshot(unit), listener, unit._.upcount);
-                    });
-                    unit._.upcount++;
-                }
+                unit._.system.update.forEach((listener) => {
+                    Unit.scope(Unit.snapshot(unit), listener);
+                });
             }
         }
         static ticker(time) {
@@ -570,40 +463,25 @@
             Ticker.clear(Unit.ticker);
             Ticker.set(Unit.ticker);
         }
-    }
-    Unit.roots = [];
-    Unit.reset();
-    //----------------------------------------------------------------------------------------------------
-    // unit scope
-    //----------------------------------------------------------------------------------------------------
-    class UnitScope {
-        static initialize(unit, context) {
-            if (context !== null) {
-                UnitScope.contexts.set(unit, context);
-            }
-        }
-        static finalize(unit) {
-            UnitScope.contexts.delete(unit);
-        }
-        static set(unit, context) {
-            UnitScope.contexts.set(unit, context);
-        }
-        static get(unit) {
-            var _a;
-            return (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null;
+        //----------------------------------------------------------------------------------------------------
+        // scope
+        //----------------------------------------------------------------------------------------------------
+        static wrap(listener) {
+            const snapshot = Unit.snapshot(Unit.current);
+            return (...args) => Unit.scope(snapshot, listener, ...args);
         }
-        static execute(snapshot, func, ...args) {
-            if (!snapshot)
+        static scope(snapshot, func, ...args) {
+            if (snapshot === null)
                 return;
-            const current = UnitScope.current;
+            const current = Unit.current;
             let context = null;
             let element = null;
             try {
-                UnitScope.current = snapshot.unit;
+                Unit.current = snapshot.unit;
                 if (snapshot.unit !== null) {
                     if (snapshot.context !== null) {
-                        context = UnitScope.get(snapshot.unit);
-                        UnitScope.contexts.set(snapshot.unit, snapshot.context);
+                        context = snapshot.unit._.currentContext;
+                        snapshot.unit._.currentContext = snapshot.context;
                     }
                     if (snapshot.element !== null) {
                         element = snapshot.unit._.currentElement;
@@ -616,10 +494,10 @@
                 throw error;
             }
             finally {
-                UnitScope.current = current;
+                Unit.current = current;
                 if (snapshot.unit !== null) {
                     if (context !== null) {
-                        UnitScope.contexts.set(snapshot.unit, context);
+                        snapshot.unit._.currentContext = context;
                     }
                     if (element !== null) {
                         snapshot.unit._.currentElement = element;
@@ -627,151 +505,96 @@
                 }
             }
         }
-        static snapshot(unit = UnitScope.current) {
-            if (unit !== null) {
-                return { unit, context: UnitScope.get(unit), element: unit.element };
-            }
-            return null;
+        static snapshot(unit) {
+            return { unit, context: unit._.currentContext, element: unit._.currentElement };
         }
         static stack(unit, key, value) {
-            UnitScope.contexts.set(unit, { stack: UnitScope.get(unit), key, value });
+            unit._.currentContext = { stack: unit._.currentContext, key, value };
         }
         static trace(unit, key) {
-            for (let context = UnitScope.get(unit); context !== null; context = context.stack) {
+            for (let context = unit._.currentContext; context !== null; context = context.stack) {
                 if (context.key === key) {
                     return context.value;
                 }
             }
         }
-    }
-    UnitScope.current = null;
-    UnitScope.contexts = new Map();
-    //----------------------------------------------------------------------------------------------------
-    // unit component
-    //----------------------------------------------------------------------------------------------------
-    class UnitComponent {
-        static finalize(unit) {
-            var _a;
-            (_a = UnitComponent.components.get(unit)) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
-                UnitComponent.units.delete(component, unit);
-            });
-            UnitComponent.components.delete(unit);
-        }
-        static add(unit, component) {
-            UnitComponent.components.add(unit, component);
-            UnitComponent.units.add(component, unit);
+        get components() {
+            return this._.components;
         }
         static find(component) {
             var _a;
-            return [...((_a = UnitComponent.units.get(component)) !== null && _a !== void 0 ? _a : [])];
+            return [...((_a = Unit.componentUnits.get(component)) !== null && _a !== void 0 ? _a : [])];
         }
-    }
-    UnitComponent.components = new MapSet();
-    UnitComponent.units = new MapSet();
-    //----------------------------------------------------------------------------------------------------
-    // unit event
-    //----------------------------------------------------------------------------------------------------
-    class UnitEvent {
-        static on(unit, type, listener, options) {
-            if (typeof type !== 'string' || type.trim() === '') {
-                throw new Error('"type" is invalid.');
-            }
-            else if (typeof listener !== 'function') {
-                throw new Error('"listener" is invalid.');
-            }
-            const snapshot = UnitScope.snapshot();
-            const types = type.trim().split(/\s+/);
-            types.forEach((type) => {
-                if (!UnitEvent.listeners.has(unit, type, listener)) {
-                    const execute = (...args) => {
-                        UnitScope.execute(snapshot, listener, ...args);
-                    };
-                    UnitEvent.listeners.set(unit, type, listener, [unit.element, execute]);
-                    UnitEvent.units.add(type, unit);
+        on(type, listener, options) {
+            if (this._.state === 'finalized')
+                return;
+            type.trim().split(/\s+/).forEach((type) => {
+                if (SYSTEM_EVENTS.includes(type)) {
+                    this._.system[type].push(listener);
+                }
+                if (this._.listeners.has(type, listener) === false) {
+                    const execute = Unit.wrap(listener);
+                    this._.listeners.set(type, listener, [this.element, execute]);
+                    Unit.typeUnits.add(type, this);
                     if (/^[A-Za-z]/.test(type)) {
-                        unit.element.addEventListener(type, execute, options);
+                        this.element.addEventListener(type, execute, options);
                     }
                 }
             });
         }
-        static off(unit, type, listener) {
-            if (typeof type === 'string' && type.trim() === '') {
-                throw new Error('"type" is invalid.');
-            }
-            else if (listener !== undefined && typeof listener !== 'function') {
-                throw new Error('"listener" is invalid.');
-            }
-            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.listeners.keys(unit)];
+        off(type, listener) {
+            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
             types.forEach((type) => {
-                const listeners = listener ? [listener] : [...UnitEvent.listeners.keys(unit, type)];
-                listeners.forEach((lis) => {
-                    const tuple = UnitEvent.listeners.get(unit, type, lis);
+                if (SYSTEM_EVENTS.includes(type)) {
+                    this._.system[type] = this._.system[type].filter((lis) => listener ? lis !== listener : false);
+                }
+                (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((lis) => {
+                    const tuple = this._.listeners.get(type, lis);
                     if (tuple !== undefined) {
                         const [target, execute] = tuple;
-                        UnitEvent.listeners.delete(unit, type, lis);
+                        this._.listeners.delete(type, lis);
                         if (/^[A-Za-z]/.test(type)) {
                             target.removeEventListener(type, execute);
                         }
                     }
                 });
-                if (!UnitEvent.listeners.has(unit, type)) {
-                    UnitEvent.units.delete(type, unit);
+                if (this._.listeners.has(type) === false) {
+                    Unit.typeUnits.delete(type, this);
                 }
             });
         }
-        static emit(unit, type, ...args) {
+        emit(type, ...args) {
             var _a, _b;
-            if (typeof type !== 'string') {
-                throw new Error('The argument [type] is invalid.');
-            }
-            else if ((unit === null || unit === void 0 ? void 0 : unit._.state) === LIFECYCLE_STATES.FINALIZED) {
-                throw new Error('This function can not be called after finalized.');
-            }
-            if (type[0] === CUSTOM_EVENT_PREFIX.GLOBAL) {
-                (_a = UnitEvent.units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
+            if (this._.state === 'finalized')
+                return;
+            if (type[0] === '+') {
+                (_a = Unit.typeUnits.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
-                    (_a = UnitEvent.listeners.get(unit, type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
+                    (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
                 });
             }
-            else if (type[0] === CUSTOM_EVENT_PREFIX.INTERNAL && unit !== null) {
-                (_b = UnitEvent.listeners.get(unit, type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
+            else if (type[0] === '-') {
+                (_b = this._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
             }
         }
         static subon(unit, target, type, listener, options) {
-            if (typeof type !== 'string' || type.trim() === '') {
-                throw new Error('"type" is invalid.');
-            }
-            else if (typeof listener !== 'function') {
-                throw new Error('"listener" is invalid.');
-            }
-            const snapshot = UnitScope.snapshot();
-            const types = type.trim().split(/\s+/);
-            types.forEach((type) => {
-                if (!UnitEvent.sublisteners.has(unit, type, listener)) {
-                    const execute = (...args) => {
-                        UnitScope.execute(snapshot, listener, ...args);
-                    };
-                    UnitEvent.sublisteners.set(unit, type, listener, [target, execute]);
+            type.trim().split(/\s+/).forEach((type) => {
+                if (unit._.sublisteners.has(type, listener) === false) {
+                    const execute = Unit.wrap(listener);
+                    unit._.sublisteners.set(type, listener, [target, execute]);
                     target.addEventListener(type, execute, options);
                 }
             });
         }
         static suboff(unit, target, type, listener) {
-            if (typeof type === 'string' && type.trim() === '') {
-                throw new Error('"type" is invalid.');
-            }
-            else if (listener !== undefined && typeof listener !== 'function') {
-                throw new Error('"listener" is invalid.');
-            }
-            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.sublisteners.keys(unit)];
+            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...unit._.sublisteners.keys()];
             types.forEach((type) => {
-                const listeners = listener ? [listener] : [...UnitEvent.sublisteners.keys(unit, type)];
-                listeners.forEach((lis) => {
-                    const tuple = UnitEvent.sublisteners.get(unit, type, lis);
+                (listener ? [listener] : [...unit._.sublisteners.keys(type)]).forEach((lis) => {
+                    const tuple = unit._.sublisteners.get(type, lis);
                     if (tuple !== undefined) {
                         const [element, execute] = tuple;
                         if (target === null || target === element) {
-                            UnitEvent.sublisteners.delete(unit, type, lis);
+                            unit._.sublisteners.delete(type, lis);
                             element.removeEventListener(type, execute);
                         }
                     }
@@ -779,9 +602,17 @@
             });
         }
     }
-    UnitEvent.units = new MapSet;
-    UnitEvent.listeners = new MapMapMap;
-    UnitEvent.sublisteners = new MapMapMap;
+    Unit.roots = [];
+    Unit.current = null;
+    //----------------------------------------------------------------------------------------------------
+    // component
+    //----------------------------------------------------------------------------------------------------
+    Unit.componentUnits = new MapSet();
+    //----------------------------------------------------------------------------------------------------
+    // event
+    //----------------------------------------------------------------------------------------------------
+    Unit.typeUnits = new MapSet();
+    Unit.reset();
     //----------------------------------------------------------------------------------------------------
     // unit promise
     //----------------------------------------------------------------------------------------------------
@@ -790,18 +621,15 @@
             this.promise = new Promise(executor);
         }
         then(callback) {
-            const snapshot = UnitScope.snapshot();
-            this.promise = this.promise.then((...args) => UnitScope.execute(snapshot, callback, ...args));
+            this.promise = this.promise.then(Unit.wrap(callback));
             return this;
         }
         catch(callback) {
-            const snapshot = UnitScope.snapshot();
-            this.promise = this.promise.catch((...args) => UnitScope.execute(snapshot, callback, ...args));
+            this.promise = this.promise.catch(Unit.wrap(callback));
             return this;
         }
         finally(callback) {
-            const snapshot = UnitScope.snapshot();
-            this.promise = this.promise.finally((...args) => UnitScope.execute(snapshot, callback, ...args));
+            this.promise = this.promise.finally(Unit.wrap(callback));
             return this;
         }
         static get(unit) {
@@ -812,20 +640,14 @@
             UnitPromise.promises.delete(unit);
         }
         static execute(unit, promise) {
+            const inner = promise !== null && promise !== void 0 ? promise : UnitPromise.get(unit);
+            const unitPromise = new UnitPromise((resolve, reject) => {
+                inner.then((...args) => resolve(...args)).catch((...args) => reject(...args));
+            });
             if (promise !== undefined) {
-                const upromise = new UnitPromise((resolve, reject) => {
-                    promise.then((...args) => resolve(...args)).catch((...args) => reject(...args));
-                });
-                UnitPromise.promises.add(unit, upromise);
-                return upromise;
-            }
-            else {
-                const promiseall = UnitPromise.get(unit);
-                const upromise = new UnitPromise((resolve, reject) => {
-                    promiseall.then((...args) => resolve(...args)).catch((...args) => reject(...args));
-                });
-                return upromise;
+                UnitPromise.promises.add(unit, unitPromise);
             }
+            return unitPromise;
         }
     }
     UnitPromise.promises = new MapSet();
@@ -838,8 +660,7 @@
             }
             else if (typeof args[0] === 'string') {
                 const str = args.shift(); // a selector for an existing html element
-                const match = str.match(/<([^>]*)\/?>/);
-                if (match) {
+                if (str.match(/<([^>]*)\/?>/)) {
                     target = str;
                 }
                 else {
@@ -856,7 +677,7 @@
             return unit;
         };
         fn.nest = (tag) => {
-            const current = UnitScope.current;
+            const current = Unit.current;
             if ((current === null || current === void 0 ? void 0 : current._.state) === 'invoked') {
                 const element = Unit.nest(current, tag);
                 if (element instanceof HTMLElement || element instanceof SVGElement) {
@@ -871,7 +692,7 @@
             }
         };
         fn.extend = (component, props) => {
-            const current = UnitScope.current;
+            const current = Unit.current;
             if ((current === null || current === void 0 ? void 0 : current._.state) === 'invoked') {
                 return Unit.extend(current, component, props);
             }
@@ -881,16 +702,16 @@
         };
         fn.context = (key, value = undefined) => {
             try {
-                const unit = UnitScope.current;
+                const unit = Unit.current;
                 if (typeof key !== 'string') {
                     throw new Error('The argument [key] is invalid.');
                 }
                 else if (unit !== null) {
                     if (value !== undefined) {
-                        UnitScope.stack(unit, key, value);
+                        Unit.stack(unit, key, value);
                     }
                     else {
-                        return UnitScope.trace(unit, key);
+                        return Unit.trace(unit, key);
                     }
                 }
                 else {
@@ -903,8 +724,8 @@
         };
         fn.promise = (promise) => {
             try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current, promise);
+                if (Unit.current !== null) {
+                    return UnitPromise.execute(Unit.current, promise);
                 }
                 else {
                     throw new Error('No current unit.');
@@ -917,8 +738,8 @@
         };
         fn.then = (callback) => {
             try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).then(callback);
+                if (Unit.current !== null) {
+                    return UnitPromise.execute(Unit.current).then(callback);
                 }
                 else {
                     throw new Error('No current unit.');
@@ -931,8 +752,8 @@
         };
         fn.catch = (callback) => {
             try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).catch(callback);
+                if (Unit.current !== null) {
+                    return UnitPromise.execute(Unit.current).catch(callback);
                 }
                 else {
                     throw new Error('No current unit.');
@@ -945,8 +766,8 @@
         };
         fn.finally = (callback) => {
             try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).finally(callback);
+                if (Unit.current !== null) {
+                    return UnitPromise.execute(Unit.current).finally(callback);
                 }
                 else {
                     throw new Error('No current unit.');
@@ -960,8 +781,8 @@
         fn.fetch = (url, options) => {
             try {
                 const promise = fetch(url, options);
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current, promise);
+                if (Unit.current !== null) {
+                    return UnitPromise.execute(Unit.current, promise);
                 }
                 else {
                     throw new Error('No current unit.');
@@ -973,12 +794,14 @@
             }
         };
         fn.scope = (callback) => {
-            const snapshot = UnitScope.snapshot();
-            return (...args) => UnitScope.execute(snapshot, callback, ...args);
+            if (Unit.current !== null) {
+                const snapshot = Unit.snapshot(Unit.current);
+                return (...args) => Unit.scope(snapshot, callback, ...args);
+            }
         };
         fn.find = (component) => {
             if (typeof component === 'function') {
-                return UnitComponent.find(component);
+                return Unit.find(component);
             }
             else {
                 throw new Error(`The argument [component] is invalid.`);
@@ -986,22 +809,22 @@
         };
         fn.append = (base, ...args) => {
             if (typeof base === 'function') {
-                for (let unit of UnitComponent.find(base)) {
-                    UnitScope.execute(UnitScope.snapshot(unit), xnew$1, ...args);
+                for (let unit of Unit.find(base)) {
+                    Unit.scope(Unit.snapshot(unit), xnew$1, ...args);
                 }
             }
             else if (base instanceof Unit) {
-                UnitScope.execute(UnitScope.snapshot(base), xnew$1, ...args);
+                Unit.scope(Unit.snapshot(base), xnew$1, ...args);
             }
             else {
                 throw new Error(`The argument [component] is invalid.`);
             }
         };
         fn.timeout = (callback, delay) => {
-            const snapshot = UnitScope.snapshot();
+            const snapshot = Unit.snapshot(Unit.current);
             const unit = xnew$1((self) => {
                 const timer = new Timer(() => {
-                    UnitScope.execute(snapshot, callback);
+                    Unit.scope(snapshot, callback);
                     self.finalize();
                 }, null, delay);
                 self.on('finalize', () => {
@@ -1011,10 +834,10 @@
             return { clear: () => unit.finalize() };
         };
         fn.interval = (callback, delay) => {
-            const snapshot = UnitScope.snapshot();
+            const snapshot = Unit.snapshot(Unit.current);
             const unit = xnew$1((self) => {
                 const timer = new Timer(() => {
-                    UnitScope.execute(snapshot, callback);
+                    Unit.scope(snapshot, callback);
                 }, null, delay, true);
                 self.on('finalize', () => {
                     timer.clear();
@@ -1023,13 +846,13 @@
             return { clear: () => unit.finalize() };
         };
         fn.transition = (callback, interval, easing = 'linear') => {
-            const snapshot = UnitScope.snapshot();
+            const snapshot = Unit.snapshot(Unit.current);
             let stacks = [];
             let unit = xnew$1(Local, { callback, interval, easing });
             let isRunning = true;
             function Local(self, { callback, interval, easing }) {
                 const timer = new Timer(() => {
-                    UnitScope.execute(snapshot, callback, 1.0);
+                    Unit.scope(snapshot, callback, 1.0);
                     self.finalize();
                 }, (progress) => {
                     if (progress < 1.0) {
@@ -1045,7 +868,7 @@
                         else if (easing === 'ease-in-out') {
                             progress = (1.0 - Math.cos(progress * Math.PI)) / 2.0;
                         }
-                        UnitScope.execute(snapshot, callback, progress);
+                        Unit.scope(snapshot, callback, progress);
                     }
                 }, interval);
                 self.on('finalize', () => {
@@ -1077,38 +900,21 @@
         fn.listener = function (target) {
             return {
                 on(type, listener, options) {
-                    UnitEvent.subon(UnitScope.current, target, type, listener, options);
+                    Unit.subon(Unit.current, target, type, listener, options);
                 },
                 off(type, listener) {
-                    UnitEvent.suboff(UnitScope.current, target, type, listener);
+                    Unit.suboff(Unit.current, target, type, listener);
                 }
             };
         };
         fn.capture = function (checker, execute) {
-            const current = UnitScope.current;
-            const snapshot = UnitScope.snapshot();
-            current._.captures.push({ checker, execute: (unit) => UnitScope.execute(snapshot, execute, unit) });
+            const current = Unit.current;
+            const snapshot = Unit.snapshot(Unit.current);
+            current._.captures.push({ checker, execute: (unit) => Unit.scope(snapshot, execute, unit) });
         };
         return fn;
     })();
 
-    function ResizeEvent(self) {
-        const observer = new ResizeObserver(xnew$1.scope((entries) => {
-            for (const entry of entries) {
-                self.emit('-resize');
-                break;
-            }
-        }));
-        if (self.element) {
-            observer.observe(self.element);
-        }
-        self.on('finalize', () => {
-            if (self.element) {
-                observer.unobserve(self.element);
-            }
-        });
-    }
-
     function UserEvent(self) {
         const unit = xnew$1();
         unit.on('pointerdown', (event) => self.emit('-pointerdown', { event, position: getPosition(self.element, event) }));
@@ -1319,18 +1125,13 @@
 
     function ModalFrame(frame, {} = {}) {
         xnew$1.context('xnew.modalframe', frame);
-        xnew$1.nest('<div style="position: fixed; inset: 0;">');
-        let content = null;
-        xnew$1.capture((unit) => unit.components.includes(ModalContent), (unit) => {
-            content = unit;
-        });
-        xnew$1().on('click', (event) => {
-            frame === null || frame === void 0 ? void 0 : frame.close();
+        xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
+        xnew$1.capture((unit) => unit.components.has(ModalContent), (unit) => {
         });
+        xnew$1().on('click', (event) => frame === null || frame === void 0 ? void 0 : frame.close());
         return {
             close() {
                 frame.emit('-close');
-                content === null || content === void 0 ? void 0 : content.deselect();
             }
         };
     }
@@ -1339,40 +1140,28 @@
         const div = xnew$1.nest('<div style="width: 100%; height: 100%; opacity: 0;">');
         div.style.background = background;
         xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
-        xnew$1().on('click', (event) => {
-            event.stopPropagation();
-        });
-        let status = 0;
+        xnew$1().on('click', (event) => event.stopPropagation());
         xnew$1.timeout(() => frame.emit('-open'));
         frame.on('-open', () => {
             xnew$1.transition((x) => {
-                status = x;
-                frame.emit('-transition', { status });
-                content.transition(status);
+                div.style.opacity = x.toString();
             }, duration, easing);
         });
         frame.on('-close', () => {
             xnew$1.transition((x) => {
-                status = 1.0 - x;
-                frame.emit('-transition', { status });
-                content.transition(status);
+                div.style.opacity = (1.0 - x).toString();
             }, duration, easing).next(() => frame.finalize());
         });
-        return {
-            transition(status) {
-                div.style.opacity = status.toString();
-            }
-        };
     }
 
     function TabFrame(frame, { select = 0 } = {}) {
         xnew$1.context('xnew.tabframe', frame);
         const buttons = [];
         const contents = [];
-        xnew$1.capture((unit) => unit.components.includes(TabButton), (unit) => {
+        xnew$1.capture((unit) => unit.components.has(TabButton), (unit) => {
             buttons.push(unit);
         });
-        xnew$1.capture((unit) => unit.components.includes(TabContent), (unit) => {
+        xnew$1.capture((unit) => unit.components.has(TabContent), (unit) => {
             contents.push(unit);
         });
         frame.on('-click', ({ unit }) => execute(buttons.indexOf(unit)));
@@ -1416,7 +1205,7 @@
     function AccordionFrame(frame, {} = {}) {
         xnew$1.context('xnew.accordionframe', frame);
         let content = null;
-        xnew$1.capture((unit) => unit.components.includes(AccordionContent), (unit) => {
+        xnew$1.capture((unit) => unit.components.has(AccordionContent), (unit) => {
             content = unit;
         });
         return {
@@ -1440,10 +1229,10 @@
             }
         };
     }
-    function AccordionButton(button, {} = {}) {
+    function AccordionHeader(header, {} = {}) {
         const frame = xnew$1.context('xnew.accordionframe');
         xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
-        button.on('click', () => frame.toggle());
+        header.on('click', () => frame.toggle());
     }
     function AccordionBullet(bullet, { type = 'arrow' } = {}) {
         const frame = xnew$1.context('xnew.accordionframe');
@@ -1508,20 +1297,6 @@
         };
     }
 
-    function PanelFrame(frame) {
-        xnew$1.context('xnew.panelframe', frame);
-    }
-    function PanelGroup(group, { name, open = false } = {}) {
-        xnew$1.extend(AccordionFrame);
-        xnew$1((button) => {
-            xnew$1.nest('<div style="margin: 0.2em 0;">');
-            xnew$1.extend(AccordionButton);
-            xnew$1(AccordionBullet);
-            xnew$1('<div>', name);
-        });
-        xnew$1.extend(AccordionContent, { open });
-    }
-
     function DragFrame(frame, { x = 0, y = 0 } = {}) {
         const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
         xnew$1.context('xnew.dragframe', { frame, absolute });
@@ -1554,7 +1329,7 @@
         ${stroke ? `stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};` : ''}
     ">`);
     }
-    function VirtualStick(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+    function TouchStick(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
         strokeWidth /= (size / 100);
         xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
         xnew$1((self) => {
@@ -1598,7 +1373,7 @@
             return { x: Math.cos(a) * d, y: Math.sin(a) * d };
         }
     }
-    function VirtualDPad(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+    function TouchDPad(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
         strokeWidth /= (size / 100);
         xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
         const polygons = [
@@ -1660,7 +1435,7 @@
             return vector;
         }
     }
-    function VirtualButton(self, { size = 80, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+    function TouchButton(self, { size = 80, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
         strokeWidth /= (size / 100);
         xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
         const target = xnew$1((self) => {
@@ -1985,20 +1760,18 @@
         ModalFrame,
         ModalContent,
         AccordionFrame,
-        AccordionButton,
+        AccordionHeader,
         AccordionBullet,
         AccordionContent,
         TabFrame,
         TabButton,
         TabContent,
-        PanelFrame,
-        PanelGroup,
         InputFrame,
         DragFrame,
         DragTarget,
-        VirtualStick,
-        VirtualDPad,
-        VirtualButton,
+        TouchStick,
+        TouchDPad,
+        TouchButton,
     };
     const audio = {
         synthesizer