@mulsense/xnew 0.1.2 → 0.1.4

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
     //----------------------------------------------------------------------------------------------------
@@ -206,22 +223,38 @@
     }
 
     //----------------------------------------------------------------------------------------------------
-    // Definitions
+    // Utils
     //----------------------------------------------------------------------------------------------------
     const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+    class UnitPromise {
+        constructor(promise) {
+            this.promise = promise;
+        }
+        then(callback) {
+            this.promise = this.promise.then(Unit.wrap(Unit.current, callback));
+            return this;
+        }
+        catch(callback) {
+            this.promise = this.promise.catch(Unit.wrap(Unit.current, callback));
+            return this;
+        }
+        finally(callback) {
+            this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
+            return this;
+        }
+    }
     //----------------------------------------------------------------------------------------------------
     // Unit
     //----------------------------------------------------------------------------------------------------
     class Unit {
-        constructor(target, component, props) {
-            var _a, _b, _c;
-            const parent = UnitScope.current;
+        constructor(parent, target, component, props) {
+            var _a;
             let baseElement;
             if (target instanceof HTMLElement || target instanceof SVGElement) {
                 baseElement = target;
             }
             else if (parent !== null) {
-                baseElement = (_a = parent._.currentElement) !== null && _a !== void 0 ? _a : parent._.baseElement;
+                baseElement = parent._.currentElement;
             }
             else {
                 baseElement = document.body;
@@ -236,20 +269,17 @@
             else {
                 baseComponent = (self) => { };
             }
-            this._ = {
-                parent,
-                target,
-                baseContext: (_b = UnitScope.contexts.get(parent)) !== null && _b !== void 0 ? _b : null,
-                baseElement,
-                baseComponent,
-                props,
-            };
-            ((_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' });
+            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 };
+            parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
+            Unit.initialize(this, null);
         }
         get element() {
             return this._.currentElement;
         }
+        get components() {
+            return this._.components;
+        }
         start() {
             this._.tostart = true;
         }
@@ -263,88 +293,66 @@
             if (this._.parent) {
                 this._.parent._.children = this._.parent._.children.filter((unit) => unit !== this);
             }
-            else {
-                Unit.roots = Unit.roots.filter((unit) => unit !== this);
-            }
         }
         reboot() {
+            var _a, _b;
             Unit.stop(this);
-            let first = this._.currentElement;
-            while (first.parentElement && first.parentElement !== this._.baseElement) {
-                first = first.parentElement;
-            }
-            let nextNest;
-            if (first.parentElement === this._.baseElement && first.nextElementSibling) {
-                nextNest = { element: first.nextElementSibling, position: 'beforebegin' };
-            }
-            else {
-                nextNest = { element: this._.baseElement, position: 'beforeend' };
-            }
+            const anchorElement = (_b = (_a = this._.elements[0]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) !== null && _b !== void 0 ? _b : null;
             Unit.finalize(this);
-            Unit.initialize(this, nextNest);
+            Unit.initialize(this, anchorElement);
         }
-        static initialize(unit, nextNest) {
-            var _a;
+        static initialize(unit, anchor) {
+            const backup = Unit.current;
+            Unit.current = unit;
             unit._ = Object.assign(unit._, {
-                nextNest,
-                children: [],
-                components: new Set(),
-                listeners: new MapMap(),
-                sublisteners: new MapMap(),
-                captures: [],
+                currentElement: unit._.baseElement,
+                currentContext: unit._.baseContext,
+                anchor,
                 state: 'invoked',
                 tostart: true,
-                currentElement: unit._.baseElement,
+                children: [],
+                elements: [],
+                promises: [],
+                captures: [],
+                components: [],
+                listeners1: new MapMap(),
+                listeners2: new MapMap(),
                 defines: {},
-                system: { start: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], update: [], stop: [], finalize: [] },
             });
-            UnitScope.initialize(unit, unit._.baseContext);
             // 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._.state = 'initialized');
+            Promise.all(unit._.promises).then(() => unit._.state = 'initialized');
             // setup capture
-            let current = unit;
-            while (1) {
-                let captured = false;
+            let captured = false;
+            for (let current = unit; current !== null && captured === false; current = current._.parent) {
                 for (const capture of current._.captures) {
                     if (capture.checker(unit)) {
                         capture.execute(unit);
                         captured = true;
                     }
                 }
-                if (captured === false && current._.parent !== null) {
-                    current = current._.parent;
-                }
-                else {
-                    break;
-                }
             }
+            Unit.current = backup;
         }
         static finalize(unit) {
             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._.systems.finalize.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
                 unit.off();
                 Unit.suboff(unit, null);
                 unit._.components.forEach((component) => {
                     Unit.componentUnits.delete(component, unit);
                 });
-                UnitScope.finalize(unit);
-                UnitPromise.finalize(unit);
-                while (unit._.currentElement !== unit._.baseElement && unit._.currentElement.parentElement !== null) {
-                    const parent = unit._.currentElement.parentElement;
-                    parent.removeChild(unit._.currentElement);
-                    unit._.currentElement = parent;
+                if (unit._.elements.length > 0) {
+                    unit._.baseElement.removeChild(unit._.elements[0]);
+                    unit._.currentElement = unit._.baseElement;
                 }
                 // reset defines
                 Object.keys(unit._.defines).forEach((key) => {
@@ -360,22 +368,26 @@
             const match = tag.match(/<((\w+)[^>]*?)\/?>/);
             if (match !== null) {
                 let element;
-                unit._.nextNest.element.insertAdjacentHTML(unit._.nextNest.position, `<${match[1]}></${match[2]}>`);
-                if (unit._.nextNest.position === 'beforebegin') {
-                    element = unit._.nextNest.element.previousElementSibling;
+                if (unit._.anchor !== null) {
+                    unit._.anchor.insertAdjacentHTML('beforebegin', `<${match[1]}></${match[2]}>`);
+                    element = unit._.anchor.previousElementSibling;
+                    unit._.anchor = null;
                 }
                 else {
-                    element = unit.element.children[unit.element.children.length - 1];
+                    unit._.currentElement.insertAdjacentHTML('beforeend', `<${match[1]}></${match[2]}>`);
+                    element = unit._.currentElement.children[unit._.currentElement.children.length - 1];
                 }
-                unit._.nextNest.element = element;
-                unit._.nextNest.position = 'beforeend';
                 unit._.currentElement = element;
+                unit._.elements.push(element);
+                return element;
+            }
+            else {
+                throw new Error(`Invalid tag: ${tag}`);
             }
-            return unit.element;
         }
         static extend(unit, component, props) {
             var _a;
-            unit._.components.add(component);
+            unit._.components.push(component);
             Unit.componentUnits.add(component, unit);
             const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
             Object.keys(defines).forEach((key) => {
@@ -385,13 +397,13 @@
                 const descriptor = Object.getOwnPropertyDescriptor(defines, key);
                 const wrappedDesc = { configurable: true, enumerable: true };
                 if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) {
-                    wrappedDesc.get = UnitScope.wrap(descriptor.get);
+                    wrappedDesc.get = Unit.wrap(unit, descriptor.get);
                 }
                 if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
-                    wrappedDesc.set = UnitScope.wrap(descriptor.set);
+                    wrappedDesc.set = Unit.wrap(unit, descriptor.set);
                 }
                 if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                    wrappedDesc.value = UnitScope.wrap(descriptor.value);
+                    wrappedDesc.value = Unit.wrap(unit, descriptor.value);
                 }
                 else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
                     wrappedDesc.writable = true;
@@ -407,9 +419,7 @@
             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._.systems.start.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
             else if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.start(child, time));
@@ -419,33 +429,66 @@
             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._.systems.stop.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
         }
         static update(unit, time) {
             if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.update(child, time));
-                unit._.system.update.forEach((listener) => {
-                    UnitScope.execute(UnitScope.snapshot(unit), listener);
-                });
+                unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
         }
         static ticker(time) {
-            Unit.roots.forEach((unit) => {
-                Unit.start(unit, time);
-                Unit.update(unit, time);
-            });
+            if (Unit.root !== null) {
+                Unit.start(Unit.root, time);
+                Unit.update(Unit.root, time);
+            }
         }
         static reset() {
-            Unit.roots.forEach((unit) => unit.finalize());
-            Unit.roots = [];
+            var _a;
+            (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
+            Unit.root = new Unit(null, null);
+            Unit.current = Unit.root;
             Ticker.clear(Unit.ticker);
             Ticker.set(Unit.ticker);
         }
-        get components() {
-            return this._.components;
+        //----------------------------------------------------------------------------------------------------
+        // scope
+        //----------------------------------------------------------------------------------------------------
+        static wrap(unit, listener) {
+            const snapshot = Unit.snapshot(unit);
+            return (...args) => Unit.scope(snapshot, listener, ...args);
+        }
+        static scope(snapshot, func, ...args) {
+            const current = Unit.current;
+            const backup = Unit.snapshot(snapshot.unit);
+            try {
+                Unit.current = snapshot.unit;
+                snapshot.unit._.currentContext = snapshot.context;
+                snapshot.unit._.currentElement = snapshot.element;
+                return func(...args);
+            }
+            catch (error) {
+                throw error;
+            }
+            finally {
+                Unit.current = current;
+                snapshot.unit._.currentContext = backup.context;
+                snapshot.unit._.currentElement = backup.element;
+            }
+        }
+        static snapshot(unit) {
+            return { unit, context: unit._.currentContext, element: unit._.currentElement };
+        }
+        static stack(unit, key, value) {
+            unit._.currentContext = { stack: unit._.currentContext, key, value };
+        }
+        static trace(unit, key) {
+            for (let context = unit._.currentContext; context !== null; context = context.stack) {
+                if (context.key === key) {
+                    return context.value;
+                }
+            }
         }
         static find(component) {
             var _a;
@@ -456,11 +499,11 @@
                 return;
             type.trim().split(/\s+/).forEach((type) => {
                 if (SYSTEM_EVENTS.includes(type)) {
-                    this._.system[type].push(listener);
+                    this._.systems[type].push(listener);
                 }
-                if (this._.listeners.has(type, listener) === false) {
-                    const execute = UnitScope.wrap(listener);
-                    this._.listeners.set(type, listener, [this.element, execute]);
+                if (this._.listeners1.has(type, listener) === false) {
+                    const execute = Unit.wrap(this, listener);
+                    this._.listeners1.set(type, listener, [this.element, execute]);
                     Unit.typeUnits.add(type, this);
                     if (/^[A-Za-z]/.test(type)) {
                         this.element.addEventListener(type, execute, options);
@@ -469,22 +512,22 @@
             });
         }
         off(type, listener) {
-            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
+            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners1.keys()];
             types.forEach((type) => {
                 if (SYSTEM_EVENTS.includes(type)) {
-                    this._.system[type] = this._.system[type].filter((lis) => listener ? lis !== listener : false);
+                    this._.systems[type] = this._.systems[type].filter((lis) => listener ? lis !== listener : false);
                 }
-                (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((lis) => {
-                    const tuple = this._.listeners.get(type, lis);
+                (listener ? [listener] : [...this._.listeners1.keys(type)]).forEach((lis) => {
+                    const tuple = this._.listeners1.get(type, lis);
                     if (tuple !== undefined) {
                         const [target, execute] = tuple;
-                        this._.listeners.delete(type, lis);
+                        this._.listeners1.delete(type, lis);
                         if (/^[A-Za-z]/.test(type)) {
                             target.removeEventListener(type, execute);
                         }
                     }
                 });
-                if (this._.listeners.has(type) === false) {
+                if (this._.listeners1.has(type) === false) {
                     Unit.typeUnits.delete(type, this);
                 }
             });
@@ -496,31 +539,31 @@
             if (type[0] === '+') {
                 (_a = Unit.typeUnits.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
-                    (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
+                    (_a = unit._.listeners1.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
                 });
             }
             else if (type[0] === '-') {
-                (_b = this._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
+                (_b = this._.listeners1.get(type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
             }
         }
         static subon(unit, target, type, listener, options) {
             type.trim().split(/\s+/).forEach((type) => {
-                if (unit._.sublisteners.has(type, listener) === false) {
-                    const execute = UnitScope.wrap(listener);
-                    unit._.sublisteners.set(type, listener, [target, execute]);
+                if (unit._.listeners2.has(type, listener) === false) {
+                    const execute = Unit.wrap(unit, listener);
+                    unit._.listeners2.set(type, listener, [target, execute]);
                     target.addEventListener(type, execute, options);
                 }
             });
         }
         static suboff(unit, target, type, listener) {
-            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...unit._.sublisteners.keys()];
+            const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...unit._.listeners2.keys()];
             types.forEach((type) => {
-                (listener ? [listener] : [...unit._.sublisteners.keys(type)]).forEach((lis) => {
-                    const tuple = unit._.sublisteners.get(type, lis);
+                (listener ? [listener] : [...unit._.listeners2.keys(type)]).forEach((lis) => {
+                    const tuple = unit._.listeners2.get(type, lis);
                     if (tuple !== undefined) {
                         const [element, execute] = tuple;
                         if (target === null || target === element) {
-                            unit._.sublisteners.delete(type, lis);
+                            unit._.listeners2.delete(type, lis);
                             element.removeEventListener(type, execute);
                         }
                     }
@@ -528,406 +571,230 @@
             });
         }
     }
-    Unit.roots = [];
-    //----------------------------------------------------------------------------------------------------
-    // component
-    //----------------------------------------------------------------------------------------------------
+    Unit.root = null;
     Unit.componentUnits = new MapSet();
     //----------------------------------------------------------------------------------------------------
     // event
     //----------------------------------------------------------------------------------------------------
     Unit.typeUnits = new MapSet();
     Unit.reset();
-    //----------------------------------------------------------------------------------------------------
-    // unit scope
-    //----------------------------------------------------------------------------------------------------
-    class UnitScope {
-        static initialize(unit, context) {
-            if (context !== null) {
-                UnitScope.contexts.set(unit, context);
+
+    const xnew$1 = function (...args) {
+        let target;
+        if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
+            target = args.shift(); // an existing html element
+        }
+        else if (typeof args[0] === 'string') {
+            const str = args.shift(); // a selector for an existing html element
+            if (str.match(/<([^>]*)\/?>/)) {
+                target = str;
+            }
+            else {
+                target = document.querySelector(str);
+                if (target == null) {
+                    throw new Error(`'${str}' can not be found.`);
+                }
             }
         }
-        static finalize(unit) {
-            UnitScope.contexts.delete(unit);
+        else {
+            target = null;
         }
-        static wrap(listener) {
-            const snapshot = UnitScope.snapshot();
-            return (...args) => UnitScope.execute(snapshot, listener, ...args);
+        return new Unit(Unit.current, target, ...args);
+    };
+    xnew$1.nest = (tag) => {
+        var _a;
+        if (((_a = Unit.current) === null || _a === void 0 ? void 0 : _a._.state) === 'invoked') {
+            return Unit.nest(Unit.current, tag);
         }
-        static execute(snapshot, func, ...args) {
-            var _a;
-            if (snapshot === null)
-                return;
-            const current = UnitScope.current;
-            let context = null;
-            let element = null;
-            try {
-                UnitScope.current = snapshot.unit;
-                if (snapshot.unit !== null) {
-                    if (snapshot.context !== null) {
-                        context = (_a = UnitScope.contexts.get(snapshot.unit)) !== null && _a !== void 0 ? _a : null;
-                        UnitScope.contexts.set(snapshot.unit, snapshot.context);
-                    }
-                    if (snapshot.element !== null) {
-                        element = snapshot.unit._.currentElement;
-                        snapshot.unit._.currentElement = snapshot.element;
-                    }
-                }
-                return func(...args);
-            }
-            catch (error) {
-                throw error;
+        else {
+            throw new Error('This function can not be called after initialized.');
+        }
+    };
+    xnew$1.extend = (component, props) => {
+        var _a;
+        if (((_a = Unit.current) === null || _a === void 0 ? void 0 : _a._.state) === 'invoked') {
+            return Unit.extend(Unit.current, component, props);
+        }
+        else {
+            throw new Error('This function can not be called after initialized.');
+        }
+    };
+    xnew$1.context = (key, value = undefined) => {
+        try {
+            if (value !== undefined) {
+                Unit.stack(Unit.current, key, value);
             }
-            finally {
-                UnitScope.current = current;
-                if (snapshot.unit !== null) {
-                    if (context !== null) {
-                        UnitScope.contexts.set(snapshot.unit, context);
-                    }
-                    if (element !== null) {
-                        snapshot.unit._.currentElement = element;
-                    }
-                }
+            else {
+                return Unit.trace(Unit.current, key);
             }
         }
-        static snapshot(unit = UnitScope.current) {
-            var _a;
-            if (unit !== null) {
-                return { unit, context: (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null, element: unit.element };
-            }
-            return null;
+        catch (error) {
+            console.error('xnew.context(key, value?): ', error);
         }
-        static stack(unit, key, value) {
-            var _a;
-            UnitScope.contexts.set(unit, { stack: (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null, key, value });
+    };
+    xnew$1.promise = (promise) => {
+        try {
+            Unit.current._.promises.push(promise);
+            return new UnitPromise(promise);
         }
-        static trace(unit, key) {
-            var _a;
-            for (let context = (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null; context !== null; context = context.stack) {
-                if (context.key === key) {
-                    return context.value;
-                }
-            }
+        catch (error) {
+            console.error('xnew.promise(mix): ', error);
+            throw error;
         }
-    }
-    UnitScope.current = null;
-    UnitScope.contexts = new Map();
-    //----------------------------------------------------------------------------------------------------
-    // unit promise
-    //----------------------------------------------------------------------------------------------------
-    class UnitPromise {
-        constructor(executor) {
-            this.promise = new Promise(executor);
+    };
+    xnew$1.then = (callback) => {
+        try {
+            return new UnitPromise(Promise.all(Unit.current._.promises)).then(callback);
         }
-        then(callback) {
-            this.promise = this.promise.then(UnitScope.wrap(callback));
-            return this;
+        catch (error) {
+            console.error('xnew.then(mix): ', error);
+            throw error;
         }
-        catch(callback) {
-            this.promise = this.promise.catch(UnitScope.wrap(callback));
-            return this;
+    };
+    xnew$1.catch = (callback) => {
+        try {
+            return new UnitPromise(Promise.all(Unit.current._.promises)).catch(callback);
         }
-        finally(callback) {
-            this.promise = this.promise.finally(UnitScope.wrap(callback));
-            return this;
+        catch (error) {
+            console.error('xnew.catch(mix): ', error);
+            throw error;
         }
-        static get(unit) {
-            var _a;
-            return Promise.all([...((_a = UnitPromise.promises.get(unit)) !== null && _a !== void 0 ? _a : [])].map((unitPromise) => unitPromise.promise));
+    };
+    xnew$1.finally = (callback) => {
+        try {
+            return new UnitPromise(Promise.all(Unit.current._.promises)).finally(callback);
         }
-        static finalize(unit) {
-            UnitPromise.promises.delete(unit);
+        catch (error) {
+            console.error('xnew.finally(mix): ', error);
+            throw error;
         }
-        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) {
-                UnitPromise.promises.add(unit, unitPromise);
+    };
+    xnew$1.fetch = (url, options) => {
+        try {
+            const promise = fetch(url, options);
+            Unit.current._.promises.push(promise);
+            return new UnitPromise(promise);
+        }
+        catch (error) {
+            console.error('xnew.promise(mix): ', error);
+            throw error;
+        }
+    };
+    xnew$1.scope = (callback) => {
+        const snapshot = Unit.snapshot(Unit.current);
+        return (...args) => Unit.scope(snapshot, callback, ...args);
+    };
+    xnew$1.find = (component) => {
+        if (typeof component === 'function') {
+            return Unit.find(component);
+        }
+        else {
+            throw new Error(`The argument [component] is invalid.`);
+        }
+    };
+    xnew$1.append = (base, ...args) => {
+        if (typeof base === 'function') {
+            for (let unit of Unit.find(base)) {
+                Unit.scope(Unit.snapshot(unit), xnew$1, ...args);
             }
-            return unitPromise;
         }
-    }
-    UnitPromise.promises = new MapSet();
-
-    const xnew$1 = (() => {
-        const fn = function (...args) {
-            let target;
-            if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
-                target = args.shift(); // an existing html element
-            }
-            else if (typeof args[0] === 'string') {
-                const str = args.shift(); // a selector for an existing html element
-                if (str.match(/<([^>]*)\/?>/)) {
-                    target = str;
-                }
-                else {
-                    target = document.querySelector(str);
-                    if (target == null) {
-                        throw new Error(`'${str}' can not be found.`);
+        else if (base instanceof Unit) {
+            Unit.scope(Unit.snapshot(base), xnew$1, ...args);
+        }
+        else {
+            throw new Error(`The argument [component] is invalid.`);
+        }
+    };
+    xnew$1.timeout = (callback, delay) => {
+        const snapshot = Unit.snapshot(Unit.current);
+        const unit = xnew$1((self) => {
+            const timer = new Timer(() => {
+                Unit.scope(snapshot, callback);
+                self.finalize();
+            }, null, delay);
+            self.on('finalize', () => {
+                timer.clear();
+            });
+        });
+        return { clear: () => unit.finalize() };
+    };
+    xnew$1.interval = (callback, delay) => {
+        const snapshot = Unit.snapshot(Unit.current);
+        const unit = xnew$1((self) => {
+            const timer = new Timer(() => {
+                Unit.scope(snapshot, callback);
+            }, null, delay, true);
+            self.on('finalize', () => {
+                timer.clear();
+            });
+        });
+        return { clear: () => unit.finalize() };
+    };
+    xnew$1.transition = (callback, interval, easing = 'linear') => {
+        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(() => {
+                Unit.scope(snapshot, callback, 1.0);
+                self.finalize();
+            }, (progress) => {
+                if (progress < 1.0) {
+                    if (easing === 'ease-out') {
+                        progress = Math.pow((1.0 - Math.pow((1.0 - progress), 2.0)), 0.5);
                     }
-                }
-            }
-            else {
-                target = null;
-            }
-            const unit = new Unit(target, ...args);
-            return unit;
-        };
-        fn.nest = (tag) => {
-            const current = UnitScope.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) {
-                    return element;
-                }
-                else {
-                    throw new Error('');
-                }
-            }
-            else {
-                throw new Error('This function can not be called after initialized.');
-            }
-        };
-        fn.extend = (component, props) => {
-            const current = UnitScope.current;
-            if ((current === null || current === void 0 ? void 0 : current._.state) === 'invoked') {
-                return Unit.extend(current, component, props);
-            }
-            else {
-                throw new Error('This function can not be called after initialized.');
-            }
-        };
-        fn.context = (key, value = undefined) => {
-            try {
-                const unit = UnitScope.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);
+                    else if (easing === 'ease-in') {
+                        progress = Math.pow((1.0 - Math.pow((1.0 - progress), 0.5)), 2.0);
                     }
-                    else {
-                        return UnitScope.trace(unit, key);
+                    else if (easing === 'ease') {
+                        progress = (1.0 - Math.cos(progress * Math.PI)) / 2.0;
                     }
-                }
-                else {
-                    return undefined;
-                }
-            }
-            catch (error) {
-                console.error('xnew.context(key, value?): ', error);
-            }
-        };
-        fn.promise = (promise) => {
-            try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current, promise);
-                }
-                else {
-                    throw new Error('No current unit.');
-                }
-            }
-            catch (error) {
-                console.error('xnew.promise(mix): ', error);
-                throw error;
-            }
-        };
-        fn.then = (callback) => {
-            try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).then(callback);
-                }
-                else {
-                    throw new Error('No current unit.');
-                }
-            }
-            catch (error) {
-                console.error('xnew.then(mix): ', error);
-                throw error;
-            }
-        };
-        fn.catch = (callback) => {
-            try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).catch(callback);
-                }
-                else {
-                    throw new Error('No current unit.');
-                }
-            }
-            catch (error) {
-                console.error('xnew.catch(mix): ', error);
-                throw error;
-            }
-        };
-        fn.finally = (callback) => {
-            try {
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current).finally(callback);
-                }
-                else {
-                    throw new Error('No current unit.');
-                }
-            }
-            catch (error) {
-                console.error('xnew.finally(mix): ', error);
-                throw error;
-            }
-        };
-        fn.fetch = (url, options) => {
-            try {
-                const promise = fetch(url, options);
-                if (UnitScope.current !== null) {
-                    return UnitPromise.execute(UnitScope.current, promise);
-                }
-                else {
-                    throw new Error('No current unit.');
-                }
-            }
-            catch (error) {
-                console.error('xnew.promise(mix): ', error);
-                throw error;
-            }
-        };
-        fn.scope = (callback) => {
-            const snapshot = UnitScope.snapshot();
-            return (...args) => UnitScope.execute(snapshot, callback, ...args);
-        };
-        fn.find = (component) => {
-            if (typeof component === 'function') {
-                return Unit.find(component);
-            }
-            else {
-                throw new Error(`The argument [component] is invalid.`);
-            }
-        };
-        fn.append = (base, ...args) => {
-            if (typeof base === 'function') {
-                for (let unit of Unit.find(base)) {
-                    UnitScope.execute(UnitScope.snapshot(unit), xnew$1, ...args);
-                }
-            }
-            else if (base instanceof Unit) {
-                UnitScope.execute(UnitScope.snapshot(base), xnew$1, ...args);
-            }
-            else {
-                throw new Error(`The argument [component] is invalid.`);
-            }
-        };
-        fn.timeout = (callback, delay) => {
-            const snapshot = UnitScope.snapshot();
-            const unit = xnew$1((self) => {
-                const timer = new Timer(() => {
-                    UnitScope.execute(snapshot, callback);
-                    self.finalize();
-                }, null, delay);
-                self.on('finalize', () => {
-                    timer.clear();
-                });
-            });
-            return { clear: () => unit.finalize() };
-        };
-        fn.interval = (callback, delay) => {
-            const snapshot = UnitScope.snapshot();
-            const unit = xnew$1((self) => {
-                const timer = new Timer(() => {
-                    UnitScope.execute(snapshot, callback);
-                }, null, delay, true);
-                self.on('finalize', () => {
-                    timer.clear();
-                });
-            });
-            return { clear: () => unit.finalize() };
-        };
-        fn.transition = (callback, interval, easing = 'linear') => {
-            const snapshot = UnitScope.snapshot();
-            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);
-                    self.finalize();
-                }, (progress) => {
-                    if (progress < 1.0) {
-                        if (easing === 'ease-out') {
-                            progress = Math.pow((1.0 - Math.pow((1.0 - progress), 2.0)), 0.5);
-                        }
-                        else if (easing === 'ease-in') {
-                            progress = Math.pow((1.0 - Math.pow((1.0 - progress), 0.5)), 2.0);
-                        }
-                        else if (easing === 'ease') {
-                            progress = (1.0 - Math.cos(progress * Math.PI)) / 2.0;
-                        }
-                        else if (easing === 'ease-in-out') {
-                            progress = (1.0 - Math.cos(progress * Math.PI)) / 2.0;
-                        }
-                        UnitScope.execute(snapshot, callback, progress);
+                    else if (easing === 'ease-in-out') {
+                        progress = (1.0 - Math.cos(progress * Math.PI)) / 2.0;
                     }
-                }, interval);
-                self.on('finalize', () => {
-                    timer.clear();
-                    isRunning = false;
-                    execute();
-                });
-            }
-            let timer = null;
-            function execute() {
-                if (isRunning === false && stacks.length > 0) {
-                    const props = stacks.shift();
-                    unit = xnew$1(Local, props);
-                    isRunning = true;
+                    Unit.scope(snapshot, callback, progress);
                 }
-            }
-            function clear() {
-                stacks = [];
-                unit.finalize();
-            }
-            function next(callback, interval, easing = 'linear') {
-                stacks.push({ callback, interval, easing });
+            }, interval);
+            self.on('finalize', () => {
+                timer.clear();
+                isRunning = false;
                 execute();
-                return timer;
+            });
+        }
+        let timer = null;
+        function execute() {
+            if (isRunning === false && stacks.length > 0) {
+                const props = stacks.shift();
+                unit = xnew$1(Local, props);
+                isRunning = true;
             }
-            timer = { clear, next };
+        }
+        function clear() {
+            stacks = [];
+            unit.finalize();
+        }
+        function next(callback, interval, easing = 'linear') {
+            stacks.push({ callback, interval, easing });
+            execute();
             return timer;
-        };
-        fn.listener = function (target) {
-            return {
-                on(type, listener, options) {
-                    Unit.subon(UnitScope.current, target, type, listener, options);
-                },
-                off(type, listener) {
-                    Unit.suboff(UnitScope.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) });
-        };
-        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);
+        timer = { clear, next };
+        return timer;
+    };
+    xnew$1.listener = function (target) {
+        return {
+            on(type, listener, options) {
+                Unit.subon(Unit.current, target, type, listener, options);
+            },
+            off(type, listener) {
+                Unit.suboff(Unit.current, target, type, listener);
             }
-        });
-    }
+        };
+    };
+    xnew$1.capture = function (checker, execute) {
+        Unit.current._.captures.push({ checker, execute: Unit.wrap(Unit.current, (unit) => execute(unit)) });
+    };
 
     function UserEvent(self) {
         const unit = xnew$1();
@@ -1139,18 +1006,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.has(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.includes(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();
             }
         };
     }
@@ -1159,40 +1021,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.has(TabButton), (unit) => {
+        xnew$1.capture((unit) => unit.components.includes(TabButton), (unit) => {
             buttons.push(unit);
         });
-        xnew$1.capture((unit) => unit.components.has(TabContent), (unit) => {
+        xnew$1.capture((unit) => unit.components.includes(TabContent), (unit) => {
             contents.push(unit);
         });
         frame.on('-click', ({ unit }) => execute(buttons.indexOf(unit)));
@@ -1236,7 +1086,7 @@
     function AccordionFrame(frame, {} = {}) {
         xnew$1.context('xnew.accordionframe', frame);
         let content = null;
-        xnew$1.capture((unit) => unit.components.has(AccordionContent), (unit) => {
+        xnew$1.capture((unit) => unit.components.includes(AccordionContent), (unit) => {
             content = unit;
         });
         return {
@@ -1260,10 +1110,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');
@@ -1328,20 +1178,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 });
@@ -1374,7 +1210,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) => {
@@ -1418,7 +1254,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 = [
@@ -1480,7 +1316,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) => {
@@ -1805,20 +1641,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