@mulsense/xnew 0.1.8 → 0.1.10

package/dist/xnew.js

@@ -4,102 +4,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.xnew = factory());
 })(this, (function () { 'use strict';
 
-    //----------------------------------------------------------------------------------------------------
-    // ticker
-    //----------------------------------------------------------------------------------------------------
-    class Ticker {
-        constructor(callback) {
-            const self = this;
-            this.id = null;
-            let previous = 0;
-            ticker();
-            function ticker() {
-                const time = Date.now();
-                const interval = 1000 / 60;
-                if (time - previous > interval * 0.9) {
-                    callback(time);
-                    previous = time;
-                }
-                self.id = requestAnimationFrame(ticker);
-            }
-        }
-        clear() {
-            if (this.id !== null) {
-                cancelAnimationFrame(this.id);
-                this.id = null;
-            }
-        }
-    }
-    //----------------------------------------------------------------------------------------------------
-    // timer
-    //----------------------------------------------------------------------------------------------------
-    class Timer {
-        constructor(timeout, transition, delay, loop = false) {
-            var _a;
-            this.timeout = timeout;
-            this.transition = transition;
-            this.delay = delay;
-            this.loop = loop;
-            this.id = null;
-            this.time = 0.0;
-            this.offset = 0.0;
-            this.status = 0;
-            this.ticker = new Ticker((time) => { var _a; return (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsed() / this.delay); });
-            this.visibilitychange = () => document.hidden === false ? this._start() : this._stop();
-            document.addEventListener('visibilitychange', this.visibilitychange);
-            if (this.delay > 0.0) {
-                (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, 0.0);
-            }
-            this.start();
-        }
-        clear() {
-            if (this.id !== null) {
-                clearTimeout(this.id);
-                this.id = null;
-            }
-            document.removeEventListener('visibilitychange', this.visibilitychange);
-            this.ticker.clear();
-        }
-        elapsed() {
-            return this.offset + (this.id !== null ? (Date.now() - this.time) : 0);
-        }
-        start() {
-            this.status = 1;
-            this._start();
-        }
-        stop() {
-            this._stop();
-            this.status = 0;
-        }
-        _start() {
-            if (this.status === 1 && this.id === null) {
-                this.id = setTimeout(() => {
-                    var _a;
-                    this.timeout();
-                    (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, 1.0);
-                    this.id = null;
-                    this.time = 0.0;
-                    this.offset = 0.0;
-                    if (this.loop) {
-                        this.start();
-                    }
-                    else {
-                        this.clear();
-                    }
-                }, this.delay - this.offset);
-                this.time = Date.now();
-            }
-        }
-        _stop() {
-            if (this.status === 1 && this.id !== null) {
-                this.offset = this.offset + Date.now() - this.time;
-                clearTimeout(this.id);
-                this.id = null;
-                this.time = 0.0;
-            }
-        }
-    }
-
     //----------------------------------------------------------------------------------------------------
     // map set
     //----------------------------------------------------------------------------------------------------
@@ -198,30 +102,141 @@
     }
 
     //----------------------------------------------------------------------------------------------------
-    // utils
+    // ticker
     //----------------------------------------------------------------------------------------------------
-    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;
+    class Ticker {
+        constructor(callback) {
+            const self = this;
+            this.id = null;
+            let previous = 0;
+            ticker();
+            function ticker() {
+                const time = Date.now();
+                const interval = 1000 / 60;
+                if (time - previous > interval * 0.9) {
+                    callback(time);
+                    previous = time;
+                }
+                self.id = requestAnimationFrame(ticker);
+            }
         }
-        catch(callback) {
-            this.promise = this.promise.catch(Unit.wrap(Unit.current, callback));
-            return this;
+        clear() {
+            if (this.id !== null) {
+                cancelAnimationFrame(this.id);
+                this.id = null;
+            }
         }
-        finally(callback) {
-            this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
-            return this;
+    }
+    //----------------------------------------------------------------------------------------------------
+    // timer
+    //----------------------------------------------------------------------------------------------------
+    class Timer {
+        constructor(transition, timeout, interval, { loop = false, easing = 'linear' } = {}) {
+            var _a;
+            this.transition = transition;
+            this.timeout = timeout;
+            this.interval = interval !== null && interval !== void 0 ? interval : 0;
+            this.loop = loop;
+            this.easing = easing;
+            this.id = null;
+            this.time = 0.0;
+            this.offset = 0.0;
+            this.status = 0;
+            this.ticker = new Ticker((time) => {
+                var _a;
+                let p = Math.min(this.elapsed() / this.interval, 1.0);
+                if (easing === 'ease-out') {
+                    p = Math.pow((1.0 - Math.pow((1.0 - p), 2.0)), 0.5);
+                }
+                else if (easing === 'ease-in') {
+                    p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
+                }
+                else if (easing === 'ease') {
+                    p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+                }
+                else if (easing === 'ease-in-out') {
+                    p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+                }
+                (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, p);
+            });
+            this.visibilitychange = () => document.hidden === false ? this._start() : this._stop();
+            document.addEventListener('visibilitychange', this.visibilitychange);
+            if (this.interval > 0.0) {
+                (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, 0.0);
+            }
+            this.start();
+        }
+        clear() {
+            if (this.id !== null) {
+                clearTimeout(this.id);
+                this.id = null;
+            }
+            document.removeEventListener('visibilitychange', this.visibilitychange);
+            this.ticker.clear();
+        }
+        elapsed() {
+            return this.offset + (this.id !== null ? (Date.now() - this.time) : 0);
+        }
+        start() {
+            this.status = 1;
+            this._start();
+        }
+        stop() {
+            this._stop();
+            this.status = 0;
+        }
+        _start() {
+            if (this.status === 1 && this.id === null) {
+                this.id = setTimeout(() => {
+                    var _a, _b;
+                    (_a = this.timeout) === null || _a === void 0 ? void 0 : _a.call(this);
+                    (_b = this.transition) === null || _b === void 0 ? void 0 : _b.call(this, 1.0);
+                    this.id = null;
+                    this.time = 0.0;
+                    this.offset = 0.0;
+                    this.loop ? this.start() : this.clear();
+                }, this.interval - this.offset);
+                this.time = Date.now();
+            }
+        }
+        _stop() {
+            if (this.status === 1 && this.id !== null) {
+                this.offset = this.offset + Date.now() - this.time;
+                clearTimeout(this.id);
+                this.id = null;
+                this.time = 0.0;
+            }
         }
     }
+
+    //----------------------------------------------------------------------------------------------------
+    // utils
+    //----------------------------------------------------------------------------------------------------
+    const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
     class Unit {
-        constructor(parent, target, component, props) {
+        constructor(parent, ...args) {
             var _a;
+            let target;
+            if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
+                target = args.shift(); // an existing html element
+            }
+            else if (typeof args[0] === 'string' && args[0].match(/<((\w+)[^>]*?)\/?>/)) {
+                target = args.shift();
+            }
+            else if (typeof args[0] === 'string') {
+                const query = args.shift();
+                target = document.querySelector(query);
+                if (target === null)
+                    throw new Error(`'${query}' can not be found.`);
+            }
+            else {
+                target = null;
+            }
+            const component = args.shift();
+            const props = args.shift();
             let baseElement;
             if (target instanceof HTMLElement || target instanceof SVGElement) {
                 baseElement = target;
@@ -274,6 +289,9 @@
             Unit.finalize(this);
             Unit.initialize(this, anchor);
         }
+        append(...args) {
+            new Unit(this, ...args);
+        }
         static initialize(unit, anchor) {
             const backup = Unit.current;
             Unit.current = unit;
@@ -315,7 +333,7 @@
                 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));
+                unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
                 if (unit._.elements.length > 0) {
                     unit._.baseElement.removeChild(unit._.elements[0]);
                     unit._.currentElement = unit._.baseElement;
@@ -353,7 +371,7 @@
         static extend(unit, component, props) {
             var _a;
             unit._.components.push(component);
-            Unit.componentUnits.add(component, unit);
+            Unit.component2units.add(component, unit);
             const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
             Object.keys(defines).forEach((key) => {
                 if (unit[key] !== undefined && unit._.defines[key] === undefined) {
@@ -361,12 +379,10 @@
                 }
                 const descriptor = Object.getOwnPropertyDescriptor(defines, key);
                 const wrapper = { configurable: true, enumerable: true };
-                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) {
+                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
                     wrapper.get = Unit.wrap(unit, descriptor.get);
-                }
-                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
+                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
                     wrapper.set = Unit.wrap(unit, descriptor.set);
-                }
                 if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
                     wrapper.value = Unit.wrap(unit, descriptor.value);
                 }
@@ -452,7 +468,7 @@
         }
         static find(component) {
             var _a;
-            return [...((_a = Unit.componentUnits.get(component)) !== null && _a !== void 0 ? _a : [])];
+            return [...((_a = Unit.component2units.get(component)) !== null && _a !== void 0 ? _a : [])];
         }
         on(type, listener, options) {
             if (this._.state === 'finalized')
@@ -464,7 +480,7 @@
                 if (this._.listeners1.has(type, listener) === false) {
                     const execute = Unit.wrap(Unit.current, listener);
                     this._.listeners1.set(type, listener, [this.element, execute]);
-                    Unit.typeUnits.add(type, this);
+                    Unit.type2units.add(type, this);
                     if (/^[A-Za-z]/.test(type)) {
                         this.element.addEventListener(type, execute, options);
                     }
@@ -488,7 +504,7 @@
                     }
                 });
                 if (this._.listeners1.has(type) === false) {
-                    Unit.typeUnits.delete(type, this);
+                    Unit.type2units.delete(type, this);
                 }
             });
         }
@@ -497,7 +513,7 @@
             if (this._.state === 'finalized')
                 return;
             if (type[0] === '+') {
-                (_a = Unit.typeUnits.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
+                (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
                     (_a = unit._.listeners1.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
                 });
@@ -531,36 +547,87 @@
             });
         }
     }
-    Unit.componentUnits = new MapSet();
+    Unit.component2units = new MapSet();
     //----------------------------------------------------------------------------------------------------
     // event
     //----------------------------------------------------------------------------------------------------
-    Unit.typeUnits = new MapSet();
-
-    const xnew$1 = Object.assign(function (...args) {
-        if (Unit.root === undefined) {
-            Unit.reset();
+    Unit.type2units = new MapSet();
+    //----------------------------------------------------------------------------------------------------
+    // unit promise
+    //----------------------------------------------------------------------------------------------------
+    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;
         }
-        let target;
-        if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
-            target = args.shift(); // an existing html element
+        finally(callback) {
+            this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
+            return this;
+        }
+    }
+    //----------------------------------------------------------------------------------------------------
+    // unit timer
+    //----------------------------------------------------------------------------------------------------
+    class UnitTimer {
+        constructor({ transition, timeout, interval, easing, loop }) {
+            this.stack = [];
+            this.unit = new Unit(Unit.current, UnitTimer.Component, { snapshot: Unit.snapshot(Unit.current), transition, timeout, interval, easing, loop });
+        }
+        clear() {
+            this.unit.off();
+            this.unit.finalize();
         }
-        else if (typeof args[0] === 'string') {
-            const str = args.shift(); // a selector for an existing html element
-            if (str.match(/<([^>]*)\/?>/)) {
-                target = str;
+        timeout(timeout, interval = 0) {
+            UnitTimer.execute(this, { timeout, interval });
+            return this;
+        }
+        transition(transition, interval = 0, easing = 'linear') {
+            UnitTimer.execute(this, { transition, interval, easing });
+            return this;
+        }
+        static execute(timer, { transition, timeout, interval, easing, loop }) {
+            if (timer.unit._.state === 'finalized') {
+                timer.unit = new Unit(Unit.current, UnitTimer.Component, { snapshot: Unit.snapshot(Unit.current), transition, timeout, interval, easing, loop });
+            }
+            else if (timer.stack.length === 0) {
+                timer.stack.push({ snapshot: Unit.snapshot(Unit.current), transition, timeout, interval, easing, loop });
+                timer.unit.on('finalize', () => { UnitTimer.next(timer); });
             }
             else {
-                target = document.querySelector(str);
-                if (target == null) {
-                    throw new Error(`'${str}' can not be found.`);
-                }
+                timer.stack.push({ snapshot: Unit.snapshot(Unit.current), transition, timeout, interval, easing, loop });
             }
         }
-        else {
-            target = null;
+        static next(timer) {
+            if (timer.stack.length > 0) {
+                timer.unit = new Unit(Unit.current, UnitTimer.Component, timer.stack.shift());
+                timer.unit.on('finalize', () => { UnitTimer.next(timer); });
+            }
+        }
+        static Component(unit, { snapshot, transition, timeout, interval, loop, easing }) {
+            const timer = new Timer((x) => {
+                if (transition !== undefined)
+                    Unit.scope(snapshot, transition, x);
+            }, () => {
+                if (transition !== undefined)
+                    Unit.scope(snapshot, transition, 1.0);
+                if (timeout !== undefined)
+                    Unit.scope(snapshot, timeout);
+                unit.finalize();
+            }, interval, { loop, easing });
+            unit.on('finalize', () => timer.clear());
+        }
+    }
+
+    const xnew$1 = Object.assign(function (...args) {
+        if (Unit.root === undefined) {
+            Unit.reset();
         }
-        return new Unit(Unit.current, target, ...args);
+        return new Unit(Unit.current, ...args);
     }, {
         /**
          * Creates a nested HTML/SVG element within the current component
@@ -733,65 +800,29 @@
                 throw new Error('xnew.find(component: Function): [component] is invalid.');
             }
         },
-        /**
-         * Appends new components to existing component(s) in the tree
-         * @param anchor - Component function or Unit instance to append to
-         * @param args - Arguments to pass to xnew for creating child components
-         * @throws Error if anchor parameter is invalid
-         * @example
-         * xnew.append(MyContainer, ChildComponent, { prop: 'value' })
-         * xnew.append(unitInstance, AnotherComponent)
-         */
-        append(anchor, ...args) {
-            if (typeof anchor === 'function') {
-                const units = Unit.find(anchor);
-                Unit.scope(Unit.snapshot(units[0]), xnew$1, ...args);
-            }
-            else if (anchor instanceof Unit) {
-                Unit.scope(Unit.snapshot(anchor), xnew$1, ...args);
-            }
-            else {
-                throw new Error('xnew.append(anchor: Function | Unit, xnew arguments): [anchor] is invalid.');
-            }
-        },
         /**
          * Executes a callback once after a delay, managed by component lifecycle
-         * @param callback - Function to execute after delay
-         * @param delay - Delay in milliseconds
+         * @param timeout - Function to execute after Interval
+         * @param interval - Interval duration in milliseconds
          * @returns Object with clear() method to cancel the timeout
          * @example
          * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
          * // Cancel if needed: timer.clear()
          */
-        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, false);
-                self.on('finalize', () => timer.clear());
-            });
-            return { clear: () => unit.finalize() };
+        timeout(timeout, interval = 0) {
+            return new UnitTimer({ timeout, interval });
         },
         /**
          * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-         * @param callback - Function to execute at each interval
-         * @param delay - Interval duration in milliseconds
+         * @param timeout - Function to execute at each interval
+         * @param interval - Interval duration in milliseconds
          * @returns Object with clear() method to stop the interval
          * @example
          * const timer = xnew.interval(() => console.log('Tick'), 1000)
          * // Stop when needed: timer.clear()
          */
-        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() };
+        interval(timeout, interval) {
+            return new UnitTimer({ timeout, interval, loop: true });
         },
         /**
          * Creates a transition animation with easing, executing callback with progress values
@@ -800,61 +831,14 @@
          * @param easing - Easing function: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' (default: 'linear')
          * @returns Object with clear() and next() methods for controlling transitions
          * @example
-         * xnew.transition(progress => {
-         *   element.style.opacity = progress
-         * }, 500, 'ease-out').next(progress => {
-         *   element.style.transform = `scale(${progress})`
+         * xnew.transition(p => {
+         *   element.style.opacity = p
+         * }, 500, 'ease-out').transition(p => {
+         *   element.style.transform = `scale(${p})`
          * }, 300)
          */
-        transition(callback, interval, easing = 'linear') {
-            const snapshot = Unit.snapshot(Unit.current);
-            let stacks = [];
-            let unit = xnew$1(Local, { callback, interval, easing });
-            let isRunning = true;
-            const timer = { clear, next };
-            return timer;
-            function execute() {
-                if (isRunning === false && stacks.length > 0) {
-                    unit = xnew$1(Local, stacks.shift());
-                    isRunning = true;
-                }
-            }
-            function clear() {
-                stacks = [];
-                unit.finalize();
-            }
-            function next(callback, interval = 0, easing = 'linear') {
-                stacks.push({ callback, interval, easing });
-                execute();
-                return timer;
-            }
-            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 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;
-                        }
-                        Unit.scope(snapshot, callback, progress);
-                    }
-                }, interval);
-                self.on('finalize', () => {
-                    timer.clear();
-                    isRunning = false;
-                    execute();
-                });
-            }
+        transition(transition, interval = 0, easing = 'linear') {
+            return new UnitTimer({ transition, interval, easing });
         },
         /**
          * Creates an event listener manager for a target element with automatic cleanup
@@ -889,6 +873,84 @@
         },
     });
 
+    function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
+        const internal = xnew$1((internal) => {
+            return { frame, open, rate: 0.0, };
+        });
+        xnew$1.context('xnew.accordionframe', internal);
+        internal.on('-transition', ({ rate }) => internal.rate = rate);
+        internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
+        return {
+            toggle() {
+                if (internal.rate === 1.0) {
+                    frame.close();
+                }
+                else if (internal.rate === 0.0) {
+                    frame.open();
+                }
+            },
+            open() {
+                if (internal.rate === 0.0) {
+                    xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
+                }
+            },
+            close() {
+                if (internal.rate === 1.0) {
+                    xnew$1.transition((x) => internal.emit('-transition', { rate: 1.0 - x }), duration, easing);
+                }
+            }
+        };
+    }
+    function AccordionHeader(header, {} = {}) {
+        const internal = 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;">');
+        header.on('click', () => internal.frame.toggle());
+    }
+    function AccordionBullet(bullet, { type = 'arrow' } = {}) {
+        const internal = xnew$1.context('xnew.accordionframe');
+        xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
+        if (type === 'arrow') {
+            const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
+            arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
+            internal.on('-transition', ({ rate }) => {
+                arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
+            });
+        }
+        else if (type === 'plusminus') {
+            const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
+            const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
+            line2.element.style.transform = `rotate(90deg)`;
+            line2.element.style.opacity = `${1.0 - internal.rate}`;
+            internal.on('-transition', ({ rate }) => {
+                line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
+                line2.element.style.transform = `rotate(${rate * 180}deg)`;
+            });
+        }
+    }
+    function AccordionContent(content, {} = {}) {
+        const internal = xnew$1.context('xnew.accordionframe');
+        xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
+        xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
+        internal.on('-transition', ({ rate }) => {
+            content.transition({ element: content.element, rate });
+        });
+        return {
+            transition({ element, rate }) {
+                const wrapper = element.parentElement;
+                wrapper.style.display = 'block';
+                if (rate === 0.0) {
+                    wrapper.style.display = 'none';
+                }
+                else if (rate < 1.0) {
+                    Object.assign(wrapper.style, { height: element.offsetHeight * rate + 'px', overflow: 'hidden', opacity: rate });
+                }
+                else {
+                    Object.assign(wrapper.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
+                }
+            }
+        };
+    }
+
     function ResizeEvent(resize) {
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
@@ -905,7 +967,29 @@
             }
         });
     }
-
+    function KeyboardEvent(unit) {
+        const state = {};
+        xnew$1.listener(window).on('keydown', (event) => {
+            state[event.code] = 1;
+            unit.emit('-keydown', { event, type: '-keydown', code: event.code });
+        });
+        xnew$1.listener(window).on('keyup', (event) => {
+            state[event.code] = 0;
+            unit.emit('-keyup', { event, type: '-keyup', code: event.code });
+        });
+        xnew$1.listener(window).on('keydown', (event) => {
+            unit.emit('-arrowkeydown', { event, type: '-arrowkeydown', code: event.code, vector: getVector() });
+        });
+        xnew$1.listener(window).on('keyup', (event) => {
+            unit.emit('-arrowkeyup', { event, type: '-arrowkeyup', code: event.code, vector: getVector() });
+        });
+        function getVector() {
+            return {
+                x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
+                y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
+            };
+        }
+    }
     function PointerEvent(unit) {
         const internal = xnew$1();
         internal.on('pointerdown', (event) => unit.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
@@ -1022,30 +1106,6 @@
         return { x: event.clientX - rect.left, y: event.clientY - rect.top };
     }
 
-    function KeyboardEvent(unit) {
-        const state = {};
-        xnew$1.listener(window).on('keydown', (event) => {
-            state[event.code] = 1;
-            unit.emit('-keydown', { event, type: '-keydown', code: event.code });
-        });
-        xnew$1.listener(window).on('keyup', (event) => {
-            state[event.code] = 0;
-            unit.emit('-keyup', { event, type: '-keyup', code: event.code });
-        });
-        xnew$1.listener(window).on('keydown', (event) => {
-            unit.emit('-arrowkeydown', { event, type: '-arrowkeydown', code: event.code, vector: getVector() });
-        });
-        xnew$1.listener(window).on('keyup', (event) => {
-            unit.emit('-arrowkeyup', { event, type: '-arrowkeyup', code: event.code, vector: getVector() });
-        });
-        function getVector() {
-            return {
-                x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
-                y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
-            };
-        }
-    }
-
     function Screen(screen, { width = 640, height = 480, fit = 'contain' } = {}) {
         const size = { width, height };
         const wrapper = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
@@ -1202,84 +1262,6 @@
         };
     }
 
-    function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
-        const internal = xnew$1((internal) => {
-            return { frame, open, rate: 0.0, };
-        });
-        xnew$1.context('xnew.accordionframe', internal);
-        internal.on('-transition', ({ rate }) => internal.rate = rate);
-        internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
-        return {
-            toggle() {
-                if (internal.rate === 1.0) {
-                    frame.close();
-                }
-                else if (internal.rate === 0.0) {
-                    frame.open();
-                }
-            },
-            open() {
-                if (internal.rate === 0.0) {
-                    xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
-                }
-            },
-            close() {
-                if (internal.rate === 1.0) {
-                    xnew$1.transition((x) => internal.emit('-transition', { rate: 1.0 - x }), duration, easing);
-                }
-            }
-        };
-    }
-    function AccordionHeader(header, {} = {}) {
-        const internal = 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;">');
-        header.on('click', () => internal.frame.toggle());
-    }
-    function AccordionBullet(bullet, { type = 'arrow' } = {}) {
-        const internal = xnew$1.context('xnew.accordionframe');
-        xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
-        if (type === 'arrow') {
-            const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
-            internal.on('-transition', ({ rate }) => {
-                arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
-            });
-        }
-        else if (type === 'plusminus') {
-            const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            line2.element.style.transform = `rotate(90deg)`;
-            line2.element.style.opacity = `${1.0 - internal.rate}`;
-            internal.on('-transition', ({ rate }) => {
-                line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
-                line2.element.style.transform = `rotate(${rate * 180}deg)`;
-            });
-        }
-    }
-    function AccordionContent(content, {} = {}) {
-        const internal = xnew$1.context('xnew.accordionframe');
-        xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
-        xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
-        internal.on('-transition', ({ rate }) => {
-            content.transition({ element: content.element, rate });
-        });
-        return {
-            transition({ element, rate }) {
-                const wrapper = element.parentElement;
-                wrapper.style.display = 'block';
-                if (rate === 0.0) {
-                    wrapper.style.display = 'none';
-                }
-                else if (rate < 1.0) {
-                    Object.assign(wrapper.style, { height: element.offsetHeight * rate + 'px', overflow: 'hidden', opacity: rate });
-                }
-                else {
-                    Object.assign(wrapper.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
-                }
-            }
-        };
-    }
-
     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 });
@@ -1317,11 +1299,11 @@
     // controller
     //----------------------------------------------------------------------------------------------------
     function SVGTemplate(self, { fill = null, fillOpacity = 0.8, stroke = null, strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' }) {
-        xnew$1.nest(`<svg
-        viewBox="0 0 100 100"
-        style="position: absolute; width: 100%; height: 100%; pointer-select: none;
-        ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
-        ${stroke ? `stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};` : ''}
+        xnew$1.nest(`<svg
+        viewBox="0 0 100 100"
+        style="position: absolute; width: 100%; height: 100%; pointer-select: none;
+        ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
+        ${stroke ? `stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};` : ''}
     ">`);
     }
     function AnalogStick(self, { size, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
@@ -1473,29 +1455,41 @@
     const master = context.createGain();
     master.gain.value = 1.0;
     master.connect(context.destination);
-
-    function load(path) {
-        return new AudioFile(path);
+    window.addEventListener('touchstart', initialize, true);
+    window.addEventListener('mousedown', initialize, true);
+    function initialize() {
+        new Synthesizer({ oscillator: { type: 'sine' }, amp: { envelope: { amount: 0, ADSR: [0, 0, 0, 0] } } }).press(440);
+        window.removeEventListener('touchstart', initialize, true);
+        window.removeEventListener('mousedown', initialize, true);
     }
-    const store = new Map();
+    const audio = {
+        load(path) {
+            return new AudioFile(path);
+        },
+        synthesizer(props) {
+            return new Synthesizer(props);
+        },
+        get volume() {
+            return master.gain.value;
+        },
+        set volume(value) {
+            master.gain.value = value;
+        }
+    };
+    //----------------------------------------------------------------------------------------------------
+    // audio file
+    //----------------------------------------------------------------------------------------------------
     class AudioFile {
         constructor(path) {
-            if (store.has(path)) {
-                this.buffer = store.get(path);
-                this.promise = Promise.resolve();
-            }
-            else {
-                this.promise = fetch(path)
-                    .then((response) => response.arrayBuffer())
-                    .then((response) => context.decodeAudioData(response))
-                    .then((response) => {
-                    this.buffer = response;
-                })
-                    .catch(() => {
-                    console.warn(`"${path}" could not be loaded.`);
-                });
-                store.set(path, this.buffer);
-            }
+            this.promise = fetch(path)
+                .then((response) => response.arrayBuffer())
+                .then((response) => context.decodeAudioData(response))
+                .then((response) => {
+                this.buffer = response;
+            })
+                .catch(() => {
+                console.warn(`"${path}" could not be loaded.`);
+            });
             this.start = null;
         }
         // set volume(value: number) {
@@ -1534,17 +1528,6 @@
             }
         }
     }
-
-    function synthesizer(props) {
-        return new Synthesizer(props);
-    }
-    window.addEventListener('touchstart', initialize, true);
-    window.addEventListener('mousedown', initialize, true);
-    function initialize() {
-        new Synthesizer({ oscillator: { type: 'sine' }, amp: { envelope: { amount: 0, ADSR: [0, 0, 0, 0] } } }).press(440);
-        window.removeEventListener('touchstart', initialize, true);
-        window.removeEventListener('mousedown', initialize, true);
-    }
     const keymap = {
         'A0': 27.500, 'A#0': 29.135, 'B0': 30.868,
         'C1': 32.703, 'C#1': 34.648, 'D1': 36.708, 'D#1': 38.891, 'E1': 41.203, 'F1': 43.654, 'F#1': 46.249, 'G1': 48.999, 'G#1': 51.913, 'A1': 55.000, 'A#1': 58.270, 'B1': 61.735,
@@ -1560,23 +1543,21 @@
         '1m': 4.000, '2n': 2.000, '4n': 1.000, '8n': 0.500, '16n': 0.250, '32n': 0.125,
     };
     class Synthesizer {
-        constructor(props) {
-            this.props = props;
-        }
+        constructor(props) { this.props = props; }
         press(frequency, duration, wait) {
             var _a;
             const props = this.props;
-            const freq = typeof frequency === 'string' ? keymap[frequency] : frequency;
-            const dura = typeof duration === 'string' ? (notemap[duration] * 60 / ((_a = props.bpm) !== null && _a !== void 0 ? _a : 120)) : (typeof duration === 'number' ? (duration / 1000) : 0);
+            const fv = typeof frequency === 'string' ? keymap[frequency] : frequency;
+            const dv = typeof duration === 'string' ? (notemap[duration] * 60 / ((_a = props.bpm) !== null && _a !== void 0 ? _a : 120)) : (typeof duration === 'number' ? (duration / 1000) : 0);
             const start = context.currentTime + (wait !== null && wait !== void 0 ? wait : 0) / 1000;
             const nodes = {};
             nodes.oscillator = context.createOscillator();
             nodes.oscillator.type = props.oscillator.type;
-            nodes.oscillator.frequency.value = freq;
+            nodes.oscillator.frequency.value = fv;
             if (props.oscillator.LFO) {
                 nodes.oscillatorLFO = context.createOscillator();
                 nodes.oscillatorLFODepth = context.createGain();
-                nodes.oscillatorLFODepth.gain.value = freq * (Math.pow(2.0, props.oscillator.LFO.amount / 12.0) - 1.0);
+                nodes.oscillatorLFODepth.gain.value = fv * (Math.pow(2.0, props.oscillator.LFO.amount / 12.0) - 1.0);
                 nodes.oscillatorLFO.type = props.oscillator.LFO.type;
                 nodes.oscillatorLFO.frequency.value = props.oscillator.LFO.rate;
                 nodes.oscillatorLFO.start(start);
@@ -1589,7 +1570,7 @@
             nodes.target.gain.value = 1.0;
             nodes.amp.connect(nodes.target);
             nodes.target.connect(master);
-            if (props.filter && props.filter.type && props.filter.cutoff) {
+            if (props.filter) {
                 nodes.filter = context.createBiquadFilter();
                 nodes.filter.type = props.filter.type;
                 nodes.filter.frequency.value = props.filter.cutoff;
@@ -1611,22 +1592,22 @@
                 nodes.convolverDepth.connect(master);
             }
             if (props.oscillator.envelope) {
-                const amount = freq * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
-                startEnvelope(nodes.oscillator.frequency, freq, amount, props.oscillator.envelope.ADSR);
+                const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
+                startEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
             }
             if (props.amp.envelope) {
                 startEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
             }
-            let stop = null;
             nodes.oscillator.start(start);
-            if (dura > 0) {
+            if (dv > 0) {
                 release();
             }
             else {
                 return { release };
             }
             function release() {
-                const end = dura > 0 ? dura : (context.currentTime - start);
+                let stop = null;
+                const end = dv > 0 ? dv : (context.currentTime - start);
                 if (props.amp.envelope) {
                     const ADSR = props.amp.envelope.ADSR;
                     const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
@@ -1640,8 +1621,8 @@
                     nodes.oscillatorLFO.stop(stop);
                 }
                 if (props.oscillator.envelope) {
-                    const amount = freq * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
-                    stopEnvelope(nodes.oscillator.frequency, freq, amount, props.oscillator.envelope.ADSR);
+                    const amount = fv * (Math.pow(2.0, props.oscillator.envelope.amount / 12.0) - 1.0);
+                    stopEnvelope(nodes.oscillator.frequency, fv, amount, props.oscillator.envelope.ADSR);
                 }
                 if (props.amp.envelope) {
                     stopEnvelope(nodes.amp.gain, 0.0, props.amp.envelope.amount, props.amp.envelope.ADSR);
@@ -1660,15 +1641,15 @@
                 }, 2000);
             }
             function stopEnvelope(param, base, amount, ADSR) {
-                const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(dura / (ADSR[0] / 1000), 1.0);
+                const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(dv / (ADSR[0] / 1000), 1.0);
                 if (rate < 1.0) {
                     param.cancelScheduledValues(start);
                     param.setValueAtTime(base, start);
                     param.linearRampToValueAtTime(base + amount * rate, start + ADSR[0] / 1000 * rate);
                     param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000 * rate);
                 }
-                param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dura));
-                param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dura) + ADSR[3] / 1000);
+                param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv));
+                param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv) + ADSR[3] / 1000);
             }
             function startEnvelope(param, base, amount, ADSR) {
                 param.value = base;
@@ -1710,12 +1691,6 @@
         AnalogStick,
         DirectionalPad,
     };
-    const audio = {
-        master,
-        context,
-        synthesizer,
-        load
-    };
     const xnew = Object.assign(xnew$1, {
         basics,
         audio