@mulsense/xnew 0.1.0

package/dist/xnew.mjs

@@ -0,0 +1,2005 @@
+//----------------------------------------------------------------------------------------------------
+// ticker
+//----------------------------------------------------------------------------------------------------
+class Ticker {
+    static ticker() {
+        const time = Date.now();
+        const interval = 1000 / 60;
+        if (time - Ticker.previous > interval * 0.8) {
+            Ticker.callbacks.forEach((callback) => callback(time));
+            Ticker.previous = time;
+        }
+        Ticker.animation = requestAnimationFrame(Ticker.ticker);
+    }
+    static set(callback) {
+        if (Ticker.animation === null && typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {
+            Ticker.previous = Date.now();
+            Ticker.animation = requestAnimationFrame(Ticker.ticker);
+        }
+        Ticker.callbacks.add(callback);
+    }
+    static clear(callback) {
+        Ticker.callbacks.delete(callback);
+    }
+}
+Ticker.animation = null;
+Ticker.callbacks = new Set;
+Ticker.previous = 0.0;
+//----------------------------------------------------------------------------------------------------
+// timer
+//----------------------------------------------------------------------------------------------------
+class Timer {
+    constructor(timeout, transition, delay, loop = false) {
+        var _a, _b;
+        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 = (time) => {
+            var _a;
+            (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsed() / this.delay);
+        };
+        (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, 0.0);
+        if (this.delay <= 0) {
+            timeout();
+            (_b = this.transition) === null || _b === void 0 ? void 0 : _b.call(this, 1.0);
+        }
+        else {
+            if (document instanceof Document) {
+                this.visibilitychange = () => document.hidden === false ? this._start() : this._stop();
+                document.addEventListener('visibilitychange', this.visibilitychange);
+            }
+            this.start();
+            Ticker.set(this.ticker);
+        }
+    }
+    clear() {
+        if (this.id !== null) {
+            clearTimeout(this.id);
+            this.id = null;
+        }
+        if (document instanceof Document && this.visibilitychange !== undefined) {
+            document.removeEventListener('visibilitychange', this.visibilitychange);
+        }
+        Ticker.clear(this.ticker);
+    }
+    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(() => {
+                this.timeout();
+                this.id = null;
+                this.time = 0.0;
+                this.offset = 0.0;
+                if (this.loop) {
+                    this.start();
+                }
+            }, 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 ex
+//----------------------------------------------------------------------------------------------------
+class MapEx {
+    constructor() {
+        this.map = new Map;
+    }
+    get size() {
+        return this.map.size;
+    }
+    forEach(callback) {
+        this.map.forEach(callback);
+    }
+    clear() {
+        this.map.clear();
+    }
+}
+//----------------------------------------------------------------------------------------------------
+// map set
+//----------------------------------------------------------------------------------------------------
+class MapSet extends MapEx {
+    has(key, value) {
+        var _a, _b;
+        if (value === undefined) {
+            return this.map.has(key);
+        }
+        else {
+            return (_b = (_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.has(value)) !== null && _b !== void 0 ? _b : false;
+        }
+    }
+    get(key) {
+        return this.map.get(key);
+    }
+    keys() {
+        return this.map.keys();
+    }
+    add(key, value) {
+        var _a;
+        this.map.set(key, ((_a = this.map.get(key)) !== null && _a !== void 0 ? _a : new Set).add(value));
+        return this;
+    }
+    delete(key, value) {
+        var _a, _b, _c, _d;
+        let ret = false;
+        if (value === undefined) {
+            ret = (((_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key) : false;
+        }
+        else {
+            ret = (_c = (_b = this.map.get(key)) === null || _b === void 0 ? void 0 : _b.delete(value)) !== null && _c !== void 0 ? _c : false;
+            (((_d = this.map.get(key)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key);
+        }
+        return ret;
+    }
+}
+//----------------------------------------------------------------------------------------------------
+// map map
+//----------------------------------------------------------------------------------------------------
+class MapMap extends MapEx {
+    has(key1, key2) {
+        var _a, _b;
+        if (key2 === undefined) {
+            return this.map.has(key1);
+        }
+        else {
+            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2)) !== null && _b !== void 0 ? _b : false;
+        }
+    }
+    set(key1, key2, value) {
+        var _a;
+        this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new Map).set(key2, value));
+        return this;
+    }
+    get(key1, key2) {
+        var _a;
+        if (key2 === undefined) {
+            return this.map.get(key1);
+        }
+        else {
+            return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
+        }
+    }
+    keys(key1) {
+        var _a, _b;
+        if (key1 === undefined) {
+            return this.map.keys();
+        }
+        else {
+            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
+        }
+    }
+    delete(key1, key2) {
+        var _a, _b, _c, _d;
+        let ret = false;
+        if (key2 === undefined) {
+            ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
+        }
+        else {
+            ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2)) !== null && _c !== void 0 ? _c : false;
+            (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
+        }
+        return ret;
+    }
+}
+//----------------------------------------------------------------------------------------------------
+// map map map
+//----------------------------------------------------------------------------------------------------
+class MapMapMap extends MapEx {
+    has(key1, key2, key3) {
+        var _a, _b;
+        if (key2 === undefined) {
+            return this.map.has(key1);
+        }
+        else {
+            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2, key3)) !== null && _b !== void 0 ? _b : false;
+        }
+    }
+    set(key1, key2, key3, value) {
+        var _a;
+        this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new MapMap).set(key2, key3, value));
+        return this;
+    }
+    get(key1, key2, key3) {
+        var _a, _b;
+        if (key2 === undefined) {
+            return this.map.get(key1);
+        }
+        else if (key3 === undefined) {
+            return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
+        }
+        else {
+            return (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.get(key2, key3);
+        }
+    }
+    keys(key1, key2) {
+        var _a, _b, _c, _d, _e;
+        if (key1 === undefined) {
+            return this.map.keys();
+        }
+        else if (key2 === undefined) {
+            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
+        }
+        else {
+            return (_e = (_d = (_c = this.map.get(key1)) === null || _c === void 0 ? void 0 : _c.get(key2)) === null || _d === void 0 ? void 0 : _d.keys()) !== null && _e !== void 0 ? _e : (function* () { })();
+        }
+    }
+    delete(key1, key2, key3) {
+        var _a, _b, _c, _d;
+        let ret = false;
+        if (key2 === undefined) {
+            ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
+        }
+        else {
+            ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2, key3)) !== null && _c !== void 0 ? _c : false;
+            (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
+        }
+        return ret;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------
+// Constants
+//----------------------------------------------------------------------------------------------------
+const LIFECYCLE_EVENTS = ['start', 'update', 'stop', 'finalize'];
+const LIFECYCLE_STATES = {
+    INVOKED: 'invoked',
+    INITIALIZED: 'initialized',
+    STARTED: 'started',
+    STOPPED: 'stopped',
+    PRE_FINALIZED: 'pre finalized',
+    FINALIZED: 'finalized',
+};
+const CUSTOM_EVENT_PREFIX = {
+    GLOBAL: '+',
+    INTERNAL: '-',
+};
+//----------------------------------------------------------------------------------------------------
+// unit main
+//----------------------------------------------------------------------------------------------------
+class Unit {
+    constructor(target, component, props) {
+        var _a, _b, _c, _d, _e;
+        const parent = UnitScope.current;
+        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;
+        }
+        else {
+            baseElement = (_c = (_b = document.currentScript) === null || _b === void 0 ? void 0 : _b.parentElement) !== null && _c !== void 0 ? _c : document.body;
+        }
+        let baseComponent = null;
+        if (typeof component === 'function') {
+            baseComponent = component;
+        }
+        else if (typeof component === 'string') {
+            baseComponent = (self) => { self.element.textContent = component; };
+        }
+        this._ = {
+            root: (_d = parent === null || parent === void 0 ? void 0 : parent._.root) !== null && _d !== void 0 ? _d : this,
+            parent,
+            target,
+            baseComponent,
+            props,
+            baseElement,
+            nextNest: { element: baseElement, position: 'beforeend' },
+            baseContext: UnitScope.get(parent),
+        };
+        ((_e = parent === null || parent === void 0 ? void 0 : parent._.children) !== null && _e !== void 0 ? _e : Unit.roots).push(this);
+        Unit.initialize(this);
+    }
+    get element() {
+        return this._.currentElement;
+    }
+    start() {
+        this._.tostart = true;
+    }
+    stop() {
+        this._.tostart = false;
+        Unit.stop(this);
+    }
+    finalize() {
+        Unit.stop(this);
+        Unit.finalize(this);
+        if (this._.parent) {
+            this._.parent._.children = this._.parent._.children.filter((unit) => unit !== this);
+        }
+        else {
+            Unit.roots = Unit.roots.filter((unit) => unit !== this);
+        }
+    }
+    reboot() {
+        Unit.stop(this);
+        let trace = this._.currentElement;
+        while (trace.parentElement && trace.parentElement !== this._.baseElement) {
+            trace = trace.parentElement;
+        }
+        if (trace.parentElement === this._.baseElement) {
+            this._.nextNest.element = trace.nextElementSibling;
+            this._.nextNest.position = 'beforebegin';
+        }
+        Unit.finalize(this);
+        Unit.initialize(this);
+    }
+    get components() {
+        return this._.components;
+    }
+    on(type, listener, options) {
+        try {
+            if (typeof type === 'string') {
+                const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
+                filtered.forEach((type) => {
+                    this._.system[type].push(listener);
+                });
+            }
+            UnitEvent.on(this, type, listener, options);
+        }
+        catch (error) {
+            console.error('unit.on(type, listener, option?): ', error);
+        }
+        return this;
+    }
+    off(type, listener) {
+        try {
+            if (type === undefined) {
+                this._.system = { start: [], update: [], stop: [], finalize: [] };
+            }
+            else if (typeof type === 'string') {
+                const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
+                filtered.forEach((type) => {
+                    if (listener === undefined) {
+                        this._.system[type] = [];
+                    }
+                    else {
+                        this._.system[type] = this._.system[type].filter((l) => l !== listener);
+                    }
+                });
+            }
+            UnitEvent.off(this, type, listener);
+        }
+        catch (error) {
+            console.error('unit.off(type, listener): ', error);
+        }
+        return this;
+    }
+    emit(type, ...args) {
+        try {
+            UnitEvent.emit(this, type, ...args);
+        }
+        catch (error) {
+            console.error('unit.emit(type, ...args): ', error);
+        }
+    }
+    //----------------------------------------------------------------------------------------------------
+    // internal
+    //----------------------------------------------------------------------------------------------------
+    static initialize(unit) {
+        var _a;
+        unit._ = Object.assign(unit._, {
+            children: [],
+            components: [],
+            captures: [],
+            state: LIFECYCLE_STATES.INVOKED,
+            tostart: true,
+            currentElement: unit._.baseElement,
+            upcount: 0,
+            resolved: false,
+            defines: {},
+            system: { 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));
+        }
+        // whether the unit promise was resolved
+        (_a = UnitPromise.get(unit)) === null || _a === void 0 ? void 0 : _a.then(() => {
+            unit._.resolved = true;
+        });
+        unit._.state = LIFECYCLE_STATES.INITIALIZED;
+        let current = unit;
+        while (current !== null) {
+            let captured = false;
+            for (const capture of current._.captures) {
+                if (capture.checker(unit)) {
+                    capture.execute(unit);
+                    captured = true;
+                }
+            }
+            if (captured === false) {
+                current = current._.parent;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    static finalize(unit) {
+        if (unit._.state !== LIFECYCLE_STATES.FINALIZED && unit._.state !== LIFECYCLE_STATES.PRE_FINALIZED) {
+            unit._.state = LIFECYCLE_STATES.PRE_FINALIZED;
+            unit._.children.forEach((child) => child.finalize());
+            unit._.system.finalize.forEach((listener) => {
+                UnitScope.execute(UnitScope.snapshot(unit), listener);
+            });
+            UnitEvent.off(unit);
+            UnitEvent.suboff(unit, null);
+            UnitScope.finalize(unit);
+            UnitComponent.finalize(unit);
+            UnitPromise.finalize(unit);
+            while (unit._.currentElement !== unit._.baseElement && unit._.currentElement.parentElement !== null) {
+                const parent = unit._.currentElement.parentElement;
+                parent.removeChild(unit._.currentElement);
+                unit._.currentElement = parent;
+            }
+            // reset defines
+            Object.keys(unit._.defines).forEach((key) => {
+                if (!LIFECYCLE_EVENTS.includes(key)) {
+                    delete unit[key];
+                }
+            });
+            unit._.defines = {};
+            unit._.state = LIFECYCLE_STATES.FINALIZED;
+        }
+    }
+    static nest(unit, tag) {
+        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;
+            }
+            else {
+                element = unit.element.children[unit.element.children.length - 1];
+            }
+            unit._.nextNest.element = element;
+            unit._.nextNest.position = 'beforeend';
+            unit._.currentElement = element;
+        }
+        return unit.element;
+    }
+    static extend(unit, component, props) {
+        var _a;
+        unit._.components.push(component);
+        UnitComponent.add(unit, component);
+        const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+        const snapshot = UnitScope.snapshot(unit);
+        Object.keys(defines).forEach((key) => {
+            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+            if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                throw new Error(`The property "${key}" already exists.`);
+            }
+            const newDescriptor = { configurable: true, enumerable: true };
+            if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) {
+                newDescriptor.get = (...args) => UnitScope.execute(snapshot, descriptor.get, ...args);
+            }
+            if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
+                newDescriptor.set = (...args) => UnitScope.execute(snapshot, descriptor.set, ...args);
+            }
+            if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                newDescriptor.value = (...args) => UnitScope.execute(snapshot, descriptor.value, ...args);
+            }
+            else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
+                newDescriptor.writable = true;
+                newDescriptor.value = descriptor.value;
+            }
+            Object.defineProperty(unit._.defines, key, newDescriptor);
+            Object.defineProperty(unit, key, newDescriptor);
+        });
+    }
+    static start(unit, time) {
+        if (!unit._.resolved || !unit._.tostart)
+            return;
+        const { state } = unit._;
+        if (state === LIFECYCLE_STATES.INVOKED || state === LIFECYCLE_STATES.INITIALIZED || state === LIFECYCLE_STATES.STOPPED) {
+            unit._.state = LIFECYCLE_STATES.STARTED;
+            unit._.children.forEach((child) => Unit.start(child, time));
+            unit._.system.start.forEach((listener) => {
+                UnitScope.execute(UnitScope.snapshot(unit), listener);
+            });
+        }
+        else if (state === LIFECYCLE_STATES.STARTED) {
+            unit._.children.forEach((child) => Unit.start(child, time));
+        }
+    }
+    static stop(unit) {
+        if (unit._.state === LIFECYCLE_STATES.STARTED) {
+            unit._.state = LIFECYCLE_STATES.STOPPED;
+            unit._.children.forEach((child) => Unit.stop(child));
+            unit._.system.stop.forEach((listener) => {
+                UnitScope.execute(UnitScope.snapshot(unit), listener);
+            });
+        }
+    }
+    static update(unit, time) {
+        if (unit._.state === LIFECYCLE_STATES.STARTED) {
+            unit._.children.forEach((child) => Unit.update(child, time));
+            if (unit._.state === LIFECYCLE_STATES.STARTED) {
+                unit._.system.update.forEach((listener) => {
+                    UnitScope.execute(UnitScope.snapshot(unit), listener, unit._.upcount);
+                });
+                unit._.upcount++;
+            }
+        }
+    }
+    static ticker(time) {
+        Unit.roots.forEach((unit) => {
+            Unit.start(unit, time);
+            Unit.update(unit, time);
+        });
+    }
+    static reset() {
+        Unit.roots.forEach((unit) => unit.finalize());
+        Unit.roots = [];
+        Ticker.clear(Unit.ticker);
+        Ticker.set(Unit.ticker);
+    }
+}
+Unit.roots = [];
+Unit.reset();
+//----------------------------------------------------------------------------------------------------
+// unit scope
+//----------------------------------------------------------------------------------------------------
+class UnitScope {
+    static initialize(unit, context) {
+        if (context !== null) {
+            UnitScope.contexts.set(unit, context);
+        }
+    }
+    static finalize(unit) {
+        UnitScope.contexts.delete(unit);
+    }
+    static set(unit, context) {
+        UnitScope.contexts.set(unit, context);
+    }
+    static get(unit) {
+        var _a;
+        return (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null;
+    }
+    static execute(snapshot, func, ...args) {
+        if (!snapshot)
+            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 = UnitScope.get(snapshot.unit);
+                    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;
+        }
+        finally {
+            UnitScope.current = current;
+            if (snapshot.unit !== null) {
+                if (context !== null) {
+                    UnitScope.contexts.set(snapshot.unit, context);
+                }
+                if (element !== null) {
+                    snapshot.unit._.currentElement = element;
+                }
+            }
+        }
+    }
+    static snapshot(unit = UnitScope.current) {
+        if (unit !== null) {
+            return { unit, context: UnitScope.get(unit), element: unit.element };
+        }
+        return null;
+    }
+    static stack(unit, key, value) {
+        UnitScope.contexts.set(unit, { stack: UnitScope.get(unit), key, value });
+    }
+    static trace(unit, key) {
+        for (let context = UnitScope.get(unit); context !== null; context = context.stack) {
+            if (context.key === key) {
+                return context.value;
+            }
+        }
+    }
+}
+UnitScope.current = null;
+UnitScope.contexts = new Map();
+//----------------------------------------------------------------------------------------------------
+// unit component
+//----------------------------------------------------------------------------------------------------
+class UnitComponent {
+    static finalize(unit) {
+        var _a;
+        (_a = UnitComponent.components.get(unit)) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
+            UnitComponent.units.delete(component, unit);
+        });
+        UnitComponent.components.delete(unit);
+    }
+    static add(unit, component) {
+        UnitComponent.components.add(unit, component);
+        UnitComponent.units.add(component, unit);
+    }
+    static find(component) {
+        var _a;
+        return [...((_a = UnitComponent.units.get(component)) !== null && _a !== void 0 ? _a : [])];
+    }
+}
+UnitComponent.components = new MapSet();
+UnitComponent.units = new MapSet();
+//----------------------------------------------------------------------------------------------------
+// unit event
+//----------------------------------------------------------------------------------------------------
+class UnitEvent {
+    static on(unit, type, listener, options) {
+        if (typeof type !== 'string' || type.trim() === '') {
+            throw new Error('"type" is invalid.');
+        }
+        else if (typeof listener !== 'function') {
+            throw new Error('"listener" is invalid.');
+        }
+        const snapshot = UnitScope.snapshot();
+        const types = type.trim().split(/\s+/);
+        types.forEach((type) => {
+            if (!UnitEvent.listeners.has(unit, type, listener)) {
+                const execute = (...args) => {
+                    UnitScope.execute(snapshot, listener, ...args);
+                };
+                UnitEvent.listeners.set(unit, type, listener, [unit.element, execute]);
+                UnitEvent.units.add(type, unit);
+                if (/^[A-Za-z]/.test(type)) {
+                    unit.element.addEventListener(type, execute, options);
+                }
+            }
+        });
+    }
+    static off(unit, type, listener) {
+        if (typeof type === 'string' && type.trim() === '') {
+            throw new Error('"type" is invalid.');
+        }
+        else if (listener !== undefined && typeof listener !== 'function') {
+            throw new Error('"listener" is invalid.');
+        }
+        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.listeners.keys(unit)];
+        types.forEach((type) => {
+            const listeners = listener ? [listener] : [...UnitEvent.listeners.keys(unit, type)];
+            listeners.forEach((lis) => {
+                const tuple = UnitEvent.listeners.get(unit, type, lis);
+                if (tuple !== undefined) {
+                    const [target, execute] = tuple;
+                    UnitEvent.listeners.delete(unit, type, lis);
+                    if (/^[A-Za-z]/.test(type)) {
+                        target.removeEventListener(type, execute);
+                    }
+                }
+            });
+            if (!UnitEvent.listeners.has(unit, type)) {
+                UnitEvent.units.delete(type, unit);
+            }
+        });
+    }
+    static emit(unit, type, ...args) {
+        var _a, _b;
+        if (typeof type !== 'string') {
+            throw new Error('The argument [type] is invalid.');
+        }
+        else if ((unit === null || unit === void 0 ? void 0 : unit._.state) === LIFECYCLE_STATES.FINALIZED) {
+            throw new Error('This function can not be called after finalized.');
+        }
+        if (type[0] === CUSTOM_EVENT_PREFIX.GLOBAL) {
+            (_a = UnitEvent.units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
+                var _a;
+                (_a = UnitEvent.listeners.get(unit, type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
+            });
+        }
+        else if (type[0] === CUSTOM_EVENT_PREFIX.INTERNAL && unit !== null) {
+            (_b = UnitEvent.listeners.get(unit, type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
+        }
+    }
+    static subon(unit, target, type, listener, options) {
+        if (typeof type !== 'string' || type.trim() === '') {
+            throw new Error('"type" is invalid.');
+        }
+        else if (typeof listener !== 'function') {
+            throw new Error('"listener" is invalid.');
+        }
+        const snapshot = UnitScope.snapshot();
+        const types = type.trim().split(/\s+/);
+        types.forEach((type) => {
+            if (!UnitEvent.sublisteners.has(unit, type, listener)) {
+                const execute = (...args) => {
+                    UnitScope.execute(snapshot, listener, ...args);
+                };
+                UnitEvent.sublisteners.set(unit, type, listener, [target, execute]);
+                target.addEventListener(type, execute, options);
+            }
+        });
+    }
+    static suboff(unit, target, type, listener) {
+        if (typeof type === 'string' && type.trim() === '') {
+            throw new Error('"type" is invalid.');
+        }
+        else if (listener !== undefined && typeof listener !== 'function') {
+            throw new Error('"listener" is invalid.');
+        }
+        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.sublisteners.keys(unit)];
+        types.forEach((type) => {
+            const listeners = listener ? [listener] : [...UnitEvent.sublisteners.keys(unit, type)];
+            listeners.forEach((lis) => {
+                const tuple = UnitEvent.sublisteners.get(unit, type, lis);
+                if (tuple !== undefined) {
+                    const [element, execute] = tuple;
+                    if (target === null || target === element) {
+                        UnitEvent.sublisteners.delete(unit, type, lis);
+                        element.removeEventListener(type, execute);
+                    }
+                }
+            });
+        });
+    }
+}
+UnitEvent.units = new MapSet;
+UnitEvent.listeners = new MapMapMap;
+UnitEvent.sublisteners = new MapMapMap;
+//----------------------------------------------------------------------------------------------------
+// unit promise
+//----------------------------------------------------------------------------------------------------
+class UnitPromise {
+    constructor(executor) {
+        this.promise = new Promise(executor);
+    }
+    then(callback) {
+        const snapshot = UnitScope.snapshot();
+        this.promise = this.promise.then((...args) => UnitScope.execute(snapshot, callback, ...args));
+        return this;
+    }
+    catch(callback) {
+        const snapshot = UnitScope.snapshot();
+        this.promise = this.promise.catch((...args) => UnitScope.execute(snapshot, callback, ...args));
+        return this;
+    }
+    finally(callback) {
+        const snapshot = UnitScope.snapshot();
+        this.promise = this.promise.finally((...args) => UnitScope.execute(snapshot, callback, ...args));
+        return this;
+    }
+    static get(unit) {
+        var _a;
+        return Promise.all([...((_a = UnitPromise.promises.get(unit)) !== null && _a !== void 0 ? _a : [])].map((unitPromise) => unitPromise.promise));
+    }
+    static finalize(unit) {
+        UnitPromise.promises.delete(unit);
+    }
+    static execute(unit, promise) {
+        if (promise !== undefined) {
+            const upromise = new UnitPromise((resolve, reject) => {
+                promise.then((...args) => resolve(...args)).catch((...args) => reject(...args));
+            });
+            UnitPromise.promises.add(unit, upromise);
+            return upromise;
+        }
+        else {
+            const promiseall = UnitPromise.get(unit);
+            const upromise = new UnitPromise((resolve, reject) => {
+                promiseall.then((...args) => resolve(...args)).catch((...args) => reject(...args));
+            });
+            return upromise;
+        }
+    }
+}
+UnitPromise.promises = 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
+            const match = str.match(/<([^>]*)\/?>/);
+            if (match) {
+                target = str;
+            }
+            else {
+                target = document.querySelector(str);
+                if (target == null) {
+                    throw new Error(`'${str}' can not be found.`);
+                }
+            }
+        }
+        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 {
+                    return UnitScope.trace(unit, key);
+                }
+            }
+            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 UnitComponent.find(component);
+        }
+        else {
+            throw new Error(`The argument [component] is invalid.`);
+        }
+    };
+    fn.append = (base, ...args) => {
+        if (typeof base === 'function') {
+            for (let unit of UnitComponent.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);
+                }
+            }, 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;
+            }
+        }
+        function clear() {
+            stacks = [];
+            unit.finalize();
+        }
+        function next(callback, interval, easing = 'linear') {
+            stacks.push({ callback, interval, easing });
+            execute();
+            return timer;
+        }
+        timer = { clear, next };
+        return timer;
+    };
+    fn.listener = function (target) {
+        return {
+            on(type, listener, options) {
+                UnitEvent.subon(UnitScope.current, target, type, listener, options);
+            },
+            off(type, listener) {
+                UnitEvent.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);
+        }
+    });
+}
+
+function UserEvent(self) {
+    const unit = xnew$1();
+    unit.on('pointerdown', (event) => self.emit('-pointerdown', { event, position: getPosition(self.element, event) }));
+    unit.on('pointermove', (event) => self.emit('-pointermove', { event, position: getPosition(self.element, event) }));
+    unit.on('pointerup', (event) => self.emit('-pointerup', { event, position: getPosition(self.element, event) }));
+    unit.on('wheel', (event) => self.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
+    const drag = xnew$1(DragEvent);
+    drag.on('-dragstart', (...args) => self.emit('-dragstart', ...args));
+    drag.on('-dragmove', (...args) => self.emit('-dragmove', ...args));
+    drag.on('-dragend', (...args) => self.emit('-dragend', ...args));
+    drag.on('-dragcancel', (...args) => self.emit('-dragcancel', ...args));
+    const gesture = xnew$1(GestureEvent);
+    gesture.on('-gesturestart', (...args) => self.emit('-gesturestart', ...args));
+    gesture.on('-gesturemove', (...args) => self.emit('-gesturemove', ...args));
+    gesture.on('-gestureend', (...args) => self.emit('-gestureend', ...args));
+    gesture.on('-gesturecancel', (...args) => self.emit('-gesturecancel', ...args));
+    const keyborad = xnew$1(Keyboard);
+    keyborad.on('-keydown', (...args) => self.emit('-keydown', ...args));
+    keyborad.on('-keyup', (...args) => self.emit('-keyup', ...args));
+    keyborad.on('-arrowkeydown', (...args) => self.emit('-arrowkeydown', ...args));
+    keyborad.on('-arrowkeyup', (...args) => self.emit('-arrowkeyup', ...args));
+}
+function DragEvent(self) {
+    xnew$1().on('pointerdown', (event) => {
+        const id = event.pointerId;
+        const position = getPosition(self.element, event);
+        let previous = position;
+        xnew$1(() => {
+            xnew$1.listener(window).on('pointermove', (event) => {
+                if (event.pointerId === id) {
+                    const position = getPosition(self.element, event);
+                    const delta = { x: position.x - previous.x, y: position.y - previous.y };
+                    self.emit('-dragmove', { event, position, delta });
+                    previous = position;
+                }
+            });
+            xnew$1.listener(window).on('pointerup', (event) => {
+                if (event.pointerId === id) {
+                    const position = getPosition(self.element, event);
+                    self.emit('-dragend', { event, position, });
+                    xnew$1.listener(window).off();
+                }
+            });
+            xnew$1.listener(window).on('pointercancel', (event) => {
+                if (event.pointerId === id) {
+                    const position = getPosition(self.element, event);
+                    self.emit('-dragcancel', { event, position, });
+                    xnew$1.listener(window).off();
+                }
+            });
+        });
+        self.emit('-dragstart', { event, position });
+    });
+}
+function GestureEvent(self) {
+    const drag = xnew$1(DragEvent);
+    let isActive = false;
+    const map = new Map();
+    drag.on('-dragstart', ({ event, position }) => {
+        map.set(event.pointerId, Object.assign({}, position));
+        isActive = map.size === 2 ? true : false;
+        if (isActive === true) {
+            self.emit('-gesturestart', {});
+        }
+    });
+    drag.on('-dragmove', ({ event, position, delta }) => {
+        if (map.size >= 2 && isActive === true) {
+            const a = map.get(event.pointerId);
+            const b = getOthers(event.pointerId)[0];
+            let scale = 0.0;
+            {
+                const v = { x: a.x - b.x, y: a.y - b.y };
+                const s = v.x * v.x + v.y * v.y;
+                scale = 1 + (s > 0.0 ? (v.x * delta.x + v.y * delta.y) / s : 0);
+            }
+            // let rotate = 0.0;
+            // {
+            //     const c = { x: a.x + delta.x, y: a.y + delta.y };
+            //     const v1 = { x: a.x - b.x, y: a.y - b.y };
+            //     const v2 = { x: c.x - b.x, y: c.y - b.y };
+            //     const l1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+            //     const l2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+            //     if (l1 > 0.0 && l2 > 0.0) {
+            //         const angle = Math.acos((v1.x * v2.x + v1.y * v2.y) / (l1 * l2));
+            //         const sign = v1.x * v2.y - v1.y * v2.x;
+            //         rotate = sign > 0.0 ? +angle : -angle;
+            //     }
+            // }
+            self.emit('-gesturemove', { event, position, delta, scale });
+        }
+        map.set(event.pointerId, position);
+    });
+    drag.on('-dragend', ({ event }) => {
+        if (isActive === true) {
+            self.emit('-gestureend', {});
+        }
+        isActive = false;
+        map.delete(event.pointerId);
+    });
+    drag.on('-dragcancel', ({ event }) => {
+        if (isActive === true) {
+            self.emit('-gesturecancel', { event });
+        }
+        isActive = false;
+        map.delete(event.pointerId);
+    });
+    function getOthers(id) {
+        const backup = map.get(id);
+        map.delete(id);
+        const others = [...map.values()];
+        map.set(id, backup);
+        return others;
+    }
+}
+function Keyboard(self) {
+    const state = {};
+    xnew$1.listener(window).on('keydown', (event) => {
+        state[event.code] = 1;
+        self.emit('-keydown', { event, code: event.code });
+    });
+    xnew$1.listener(window).on('keyup', (event) => {
+        state[event.code] = 0;
+        self.emit('-keyup', { event, code: event.code });
+    });
+    xnew$1.listener(window).on('keydown', (event) => {
+        self.emit('-arrowkeydown', { event, code: event.code, vector: getVector() });
+    });
+    xnew$1.listener(window).on('keyup', (event) => {
+        self.emit('-arrowkeyup', { event, 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 getPosition(element, event) {
+    const rect = element.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+}
+
+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;">');
+    const absolute = xnew$1.nest('<div style="position: absolute; margin: auto;">');
+    const canvas = xnew$1.nest(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none;">`);
+    xnew$1(wrapper, ResizeEvent).on('-resize', resize);
+    resize();
+    function resize() {
+        const aspect = size.width / size.height;
+        const style = { width: '100%', height: '100%', top: 0, left: 0, bottom: 0, right: 0 };
+        if (fit === 'contain') {
+            if (wrapper.clientWidth < wrapper.clientHeight * aspect) {
+                style.height = Math.floor(wrapper.clientWidth / aspect) + 'px';
+            }
+            else {
+                style.width = Math.floor(wrapper.clientHeight * aspect) + 'px';
+            }
+        }
+        else if (fit === 'cover') {
+            if (wrapper.clientWidth < wrapper.clientHeight * aspect) {
+                style.width = Math.floor(wrapper.clientHeight * aspect) + 'px';
+                style.left = Math.floor((wrapper.clientWidth - wrapper.clientHeight * aspect) / 2) + 'px';
+                style.right = 'auto';
+            }
+            else {
+                style.height = Math.floor(wrapper.clientWidth / aspect) + 'px';
+                style.top = Math.floor((wrapper.clientHeight - wrapper.clientWidth / aspect) / 2) + 'px';
+                style.bottom = 'auto';
+            }
+        }
+        else ;
+        Object.assign(absolute.style, style);
+    }
+    return {
+        get canvas() {
+            return canvas;
+        },
+        resize(width, height) {
+            size.width = width;
+            size.height = height;
+            canvas.setAttribute('width', width + 'px');
+            canvas.setAttribute('height', height + 'px');
+            resize();
+        },
+        get scale() {
+            return { x: size.width / canvas.clientWidth, y: size.height / canvas.clientHeight };
+        }
+    };
+}
+
+function InputFrame(frame, {} = {}) {
+    xnew$1.nest('<div>');
+    xnew$1.capture((unit) => unit.element.tagName.toLowerCase() === 'input', (unit) => {
+        const element = unit.element;
+        xnew$1.listener(element).on('input', (event) => {
+            frame.emit('-input', { event });
+        });
+        xnew$1.listener(element).on('change', (event) => {
+            frame.emit('-change', { event });
+        });
+        xnew$1.listener(element).on('click', (event) => {
+            frame.emit('-click', { event });
+        });
+    });
+}
+
+function ModalFrame(frame, {} = {}) {
+    xnew$1.context('xnew.modalframe', frame);
+    xnew$1.nest('<div style="position: fixed; inset: 0;">');
+    let content = null;
+    xnew$1.capture((unit) => unit.components.includes(ModalContent), (unit) => {
+        content = unit;
+    });
+    xnew$1().on('click', (event) => {
+        frame === null || frame === void 0 ? void 0 : frame.close();
+    });
+    return {
+        close() {
+            frame.emit('-close');
+            content === null || content === void 0 ? void 0 : content.deselect();
+        }
+    };
+}
+function ModalContent(content, { duration = 200, easing = 'ease', background = 'rgba(0, 0, 0, 0.1)' } = {}) {
+    const frame = xnew$1.context('xnew.modalframe');
+    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.timeout(() => frame.emit('-open'));
+    frame.on('-open', () => {
+        xnew$1.transition((x) => {
+            status = x;
+            frame.emit('-transition', { status });
+            content.transition(status);
+        }, duration, easing);
+    });
+    frame.on('-close', () => {
+        xnew$1.transition((x) => {
+            status = 1.0 - x;
+            frame.emit('-transition', { status });
+            content.transition(status);
+        }, duration, easing).next(() => frame.finalize());
+    });
+    return {
+        transition(status) {
+            div.style.opacity = status.toString();
+        }
+    };
+}
+
+function TabFrame(frame, { select = 0 } = {}) {
+    xnew$1.context('xnew.tabframe', frame);
+    const buttons = [];
+    const contents = [];
+    xnew$1.capture((unit) => unit.components.includes(TabButton), (unit) => {
+        buttons.push(unit);
+    });
+    xnew$1.capture((unit) => unit.components.includes(TabContent), (unit) => {
+        contents.push(unit);
+    });
+    frame.on('-click', ({ unit }) => execute(buttons.indexOf(unit)));
+    const timeout = xnew$1.timeout(() => execute(select));
+    function execute(index) {
+        timeout.clear();
+        const button = buttons[index];
+        const content = contents[index];
+        buttons.filter((item) => item !== button).forEach((item) => item.deselect());
+        contents.filter((item) => item !== content).forEach((item) => item.deselect());
+        button.select();
+        content.select();
+    }
+}
+function TabButton(button, {} = {}) {
+    const frame = xnew$1.context('xnew.tabframe');
+    xnew$1.nest('<div>');
+    button.on('click', () => frame.emit('-click', { unit: button }));
+    return {
+        select() {
+            Object.assign(button.element.style, { opacity: 1.0, cursor: 'text' });
+        },
+        deselect() {
+            Object.assign(button.element.style, { opacity: 0.6, cursor: 'pointer' });
+        }
+    };
+}
+function TabContent(self, {} = {}) {
+    xnew$1.context('xnew.tabframe');
+    xnew$1.nest('<div>');
+    return {
+        select() {
+            Object.assign(self.element.style, { display: 'block' });
+        },
+        deselect() {
+            Object.assign(self.element.style, { display: 'none' });
+        }
+    };
+}
+
+function AccordionFrame(frame, {} = {}) {
+    xnew$1.context('xnew.accordionframe', frame);
+    let content = null;
+    xnew$1.capture((unit) => unit.components.includes(AccordionContent), (unit) => {
+        content = unit;
+    });
+    return {
+        toggle() {
+            if ((content === null || content === void 0 ? void 0 : content.status) === 1.0) {
+                frame.emit('-close');
+            }
+            else if ((content === null || content === void 0 ? void 0 : content.status) === 0.0) {
+                frame.emit('-open');
+            }
+        },
+        open() {
+            if ((content === null || content === void 0 ? void 0 : content.status) === 0.0) {
+                frame.emit('-open');
+            }
+        },
+        close() {
+            if ((content === null || content === void 0 ? void 0 : content.status) === 1.0) {
+                frame.emit('-close');
+            }
+        }
+    };
+}
+function AccordionButton(button, {} = {}) {
+    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());
+}
+function AccordionBullet(bullet, { type = 'arrow' } = {}) {
+    const frame = xnew$1.context('xnew.accordionframe');
+    xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.5em; margin: 0 0.3em;">');
+    frame.on('-transition', ({ status }) => { var _a; return (_a = bullet.transition) === null || _a === void 0 ? void 0 : _a.call(bullet, status); });
+    if (type === 'arrow') {
+        const arrow = xnew$1(`<div style="width: 100%; height: 0.5em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center center;">`);
+        return {
+            transition(status) {
+                arrow.element.style.transform = `rotate(${status * 90 - 45}deg)`;
+            }
+        };
+    }
+    else if (type === 'plusminus') {
+        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 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 center;">`);
+        line2.element.style.transform = `rotate(90deg)`;
+        return {
+            transition(status) {
+                line2.element.style.opacity = `${1.0 - status}`;
+            }
+        };
+    }
+}
+function AccordionContent(content, { open = false, duration = 200, easing = 'ease' } = {}) {
+    const frame = xnew$1.context('xnew.accordionframe');
+    const outer = xnew$1.nest('<div>');
+    const inner = xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
+    let status = open ? 1.0 : 0.0;
+    outer.style.display = status ? 'block' : 'none';
+    frame.emit('-transition', { status });
+    frame.on('-open', () => {
+        xnew$1.transition((x) => {
+            status = x;
+            frame.emit('-transition', { status });
+            content.transition(status);
+        }, duration, easing);
+    });
+    frame.on('-close', () => {
+        xnew$1.transition((x) => {
+            status = 1.0 - x;
+            frame.emit('-transition', { status });
+            content.transition(status);
+        }, duration, easing);
+    });
+    return {
+        get status() {
+            return status;
+        },
+        transition(status) {
+            outer.style.display = 'block';
+            if (status === 0.0) {
+                outer.style.display = 'none';
+            }
+            else if (status < 1.0) {
+                Object.assign(outer.style, { height: inner.offsetHeight * status + 'px', overflow: 'hidden', opacity: status });
+            }
+            else {
+                Object.assign(outer.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
+            }
+        },
+    };
+}
+
+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 });
+}
+function DragTarget(target, {} = {}) {
+    const { frame, absolute } = xnew$1.context('xnew.dragframe');
+    xnew$1.nest('<div>');
+    const user = xnew$1(absolute.parentElement, UserEvent);
+    const current = { x: 0, y: 0 };
+    user.on('-dragstart', ({ event, position }) => {
+        current.x = parseFloat(absolute.style.left || '0') + position.x;
+        current.y = parseFloat(absolute.style.top || '0') + position.y;
+    });
+    user.on('-dragmove', ({ event, delta }) => {
+        current.x += delta.x;
+        current.y += delta.y;
+        absolute.style.left = `${current.x}px`;
+        absolute.style.top = `${current.y}px`;
+    });
+}
+
+//----------------------------------------------------------------------------------------------------
+// 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%; user-select: none;
+        ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
+        ${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' } = {}) {
+    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) => {
+        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1('<polygon points="50  7 40 18 60 18">');
+        xnew$1('<polygon points="50 93 40 83 60 83">');
+        xnew$1('<polygon points=" 7 50 18 40 18 60">');
+        xnew$1('<polygon points="93 50 83 40 83 60">');
+    });
+    const target = xnew$1((self) => {
+        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1('<circle cx="50" cy="50" r="23">');
+    });
+    const user = xnew$1(UserEvent);
+    user.on('-dragstart', ({ event, position }) => {
+        const vector = getVector(position);
+        target.element.style.filter = 'brightness(90%)';
+        target.element.style.left = vector.x * size / 4 + 'px';
+        target.element.style.top = vector.y * size / 4 + 'px';
+        self.emit('-down', { vector });
+    });
+    user.on('-dragmove', ({ event, position }) => {
+        const vector = getVector(position);
+        target.element.style.filter = 'brightness(90%)';
+        target.element.style.left = vector.x * size / 4 + 'px';
+        target.element.style.top = vector.y * size / 4 + 'px';
+        self.emit('-move', { vector });
+    });
+    user.on('-dragend', ({ event }) => {
+        const vector = { x: 0, y: 0 };
+        target.element.style.filter = '';
+        target.element.style.left = vector.x * size / 4 + 'px';
+        target.element.style.top = vector.y * size / 4 + 'px';
+        self.emit('-up', { vector });
+    });
+    function getVector(position) {
+        const x = position.x - size / 2;
+        const y = position.y - size / 2;
+        const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
+        const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+        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' } = {}) {
+    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 = [
+        '<polygon points="50 50 35 35 35  5 37  3 63  3 65  5 65 35">',
+        '<polygon points="50 50 35 65 35 95 37 97 63 97 65 95 65 65">',
+        '<polygon points="50 50 35 35  5 35  3 37  3 63  5 65 35 65">',
+        '<polygon points="50 50 65 35 95 35 97 37 97 63 95 65 65 65">'
+    ];
+    const targets = polygons.map((polygon) => {
+        return xnew$1((self) => {
+            xnew$1.extend(SVGTemplate, { fill, fillOpacity });
+            xnew$1(polygon);
+        });
+    });
+    xnew$1((self) => {
+        xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1('<polyline points="35 35 35  5 37  3 63  3 65  5 65 35">');
+        xnew$1('<polyline points="35 65 35 95 37 97 63 97 65 95 65 65">');
+        xnew$1('<polyline points="35 35  5 35  3 37  3 63  5 65 35 65">');
+        xnew$1('<polyline points="65 35 95 35 97 37 97 63 95 65 65 65">');
+        xnew$1('<polygon points="50 11 42 20 58 20">');
+        xnew$1('<polygon points="50 89 42 80 58 80">');
+        xnew$1('<polygon points="11 50 20 42 20 58">');
+        xnew$1('<polygon points="89 50 80 42 80 58">');
+    });
+    const user = xnew$1(UserEvent);
+    user.on('-dragstart', ({ event, position }) => {
+        const vector = getVector(position);
+        targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
+        targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
+        targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+        targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+        self.emit('-down', { vector });
+    });
+    user.on('-dragmove', ({ event, position }) => {
+        const vector = getVector(position);
+        targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
+        targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
+        targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+        targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+        self.emit('-move', { vector });
+    });
+    user.on('-dragend', ({ event }) => {
+        const vector = { x: 0, y: 0 };
+        targets[0].element.style.filter = '';
+        targets[1].element.style.filter = '';
+        targets[2].element.style.filter = '';
+        targets[3].element.style.filter = '';
+        self.emit('-up', { vector });
+    });
+    function getVector(position) {
+        const x = position.x - size / 2;
+        const y = position.y - size / 2;
+        const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+        const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
+        const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
+        vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
+        vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
+        return vector;
+    }
+}
+function VirtualButton(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) => {
+        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1('<circle cx="50" cy="50" r="40">');
+    });
+    const user = xnew$1(UserEvent);
+    user.on('-dragstart', (event) => {
+        target.element.style.filter = 'brightness(90%)';
+        self.emit('-down', event);
+    });
+    user.on('-dragend', (event) => {
+        target.element.style.filter = '';
+        self.emit('-up', event);
+    });
+}
+
+class Audio {
+    static initialize() {
+        var _a;
+        if (typeof window !== 'undefined' && window instanceof Window) {
+            Audio.context = new ((_a = window.AudioContext) !== null && _a !== void 0 ? _a : window.webkitAudioContext)();
+            Audio.master = Audio.context.createGain();
+            Audio.master.gain.value = 1.0;
+            Audio.master.connect(Audio.context.destination);
+        }
+    }
+    static connect(params) {
+        if (!Audio.context)
+            throw new Error("Audio context not initialized");
+        const nodes = {};
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            nodes[key] = Audio.context[`create${type}`]();
+            Object.keys(props).forEach((name) => {
+                var _a;
+                if (((_a = nodes[key][name]) === null || _a === void 0 ? void 0 : _a.value) !== undefined) {
+                    nodes[key][name].value = props[name];
+                }
+                else {
+                    nodes[key][name] = props[name];
+                }
+            });
+        });
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            to.forEach((to) => {
+                let dest = null;
+                if (to.indexOf('.') > 0) {
+                    dest = nodes[to.split('.')[0]][to.split('.')[1]];
+                }
+                else if (nodes[to]) {
+                    dest = nodes[to];
+                }
+                else if (to === 'master') {
+                    dest = Audio.master;
+                }
+                nodes[key].connect(dest);
+            });
+        });
+        return nodes;
+    }
+}
+Audio.context = null;
+Audio.master = null;
+Audio.initialize();
+
+function synthesizer(props, effects) {
+    return new Synthesizer(props, effects);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function isObject(val) {
+    return val !== null && typeof val === 'object';
+}
+function isNumber(val) {
+    return typeof val === 'number' && !isNaN(val);
+}
+class Synthesizer {
+    static initialize() {
+        window.addEventListener('touchstart', initialize, true);
+        window.addEventListener('mousedown', initialize, true);
+        function initialize() {
+            new Synthesizer().press(440);
+            window.removeEventListener('touchstart', initialize, true);
+            window.removeEventListener('mousedown', initialize, true);
+        }
+    }
+    constructor({ oscillator = null, filter = null, amp = null } = {}, { bmp = null, reverb = null, delay = null } = {}) {
+        this.oscillator = isObject(oscillator) ? oscillator : {};
+        this.oscillator.type = setType(this.oscillator.type, ['sine', 'triangle', 'square', 'sawtooth']);
+        this.oscillator.envelope = setEnvelope(this.oscillator.envelope, -36, +36);
+        this.oscillator.LFO = setLFO(this.oscillator.LFO, 36);
+        this.filter = isObject(filter) ? filter : {};
+        this.filter.type = setType(this.filter.type, ['lowpass', 'highpass', 'bandpass']);
+        this.filter.Q = isNumber(this.filter.Q) ? clamp(this.filter.Q, 0, 32) : 0;
+        // cutoffはundefinedを使う
+        this.filter.cutoff = isNumber(this.filter.cutoff) ? clamp(this.filter.cutoff, 4, 8192) : undefined;
+        this.filter.envelope = setEnvelope(this.filter.envelope, -36, +36);
+        this.filter.LFO = setLFO(this.filter.LFO, 36);
+        this.amp = isObject(amp) ? amp : {};
+        this.amp.envelope = setEnvelope(this.amp.envelope, 0, 1);
+        this.amp.LFO = setLFO(this.amp.LFO, 36);
+        this.bmp = isNumber(bmp) ? clamp(bmp, 60, 240) : 120;
+        this.options = { bmp: this.bmp };
+        this.reverb = isObject(reverb) ? reverb : {};
+        this.reverb.time = isNumber(this.reverb.time) ? clamp(this.reverb.time, 0, 2000) : 0.0;
+        this.reverb.mix = isNumber(this.reverb.mix) ? clamp(this.reverb.mix, 0, 1.0) : 0.0;
+        this.delay = isObject(delay) ? delay : {};
+        this.delay.time = isNumber(this.delay.time) ? clamp(this.delay.time, 0, 2000) : 0.0;
+        this.delay.feedback = isNumber(this.delay.feedback) ? clamp(this.delay.feedback, 0.0, 0.9) : 0.0;
+        this.delay.mix = isNumber(this.delay.mix) ? clamp(this.delay.mix, 0.0, 1.0) : 0.0;
+        function setType(type, list, value = 0) {
+            return list.includes(type) ? type : list[value];
+        }
+        function setEnvelope(envelope, minAmount, maxAmount) {
+            var _a, _b, _c, _d;
+            if (!isObject(envelope))
+                return null;
+            const result = {
+                amount: isNumber(envelope.amount) ? clamp(envelope.amount, minAmount, maxAmount) : 0,
+                ADSR: [
+                    isNumber((_a = envelope.ADSR) === null || _a === void 0 ? void 0 : _a[0]) ? clamp(envelope.ADSR[0], 0, 8000) : 0,
+                    isNumber((_b = envelope.ADSR) === null || _b === void 0 ? void 0 : _b[1]) ? clamp(envelope.ADSR[1], 0, 8000) : 0,
+                    isNumber((_c = envelope.ADSR) === null || _c === void 0 ? void 0 : _c[2]) ? clamp(envelope.ADSR[2], 0, 1) : 0,
+                    isNumber((_d = envelope.ADSR) === null || _d === void 0 ? void 0 : _d[3]) ? clamp(envelope.ADSR[3], 0, 8000) : 0,
+                ]
+            };
+            return result;
+        }
+        function setLFO(LFO, maxAmount) {
+            if (!isObject(LFO))
+                return null;
+            const oscTypes = ['sine', 'triangle', 'square', 'sawtooth'];
+            const type = oscTypes.includes(LFO.type)
+                ? LFO.type
+                : 'sine';
+            const result = {
+                amount: isNumber(LFO.amount) ? clamp(LFO.amount, 0, maxAmount) : 0,
+                type,
+                rate: isNumber(LFO.rate) ? clamp(LFO.rate, 1, 128) : 1,
+            };
+            return result;
+        }
+    }
+    press(frequency, duration = null, wait = 0.0) {
+        frequency = typeof frequency === 'string' ? Synthesizer.keymap[frequency] : frequency;
+        duration = typeof duration === 'string' ? (Synthesizer.notemap[duration] * 60 / this.options.bmp) : (duration !== null ? (duration / 1000) : duration);
+        const start = Audio.context.currentTime + wait / 1000;
+        let stop = null;
+        const params = {};
+        if (this.filter.type && this.filter.cutoff) {
+            params.oscillator = ['Oscillator', {}, 'filter'];
+            params.filter = ['BiquadFilter', {}, 'amp'];
+        }
+        else {
+            params.oscillator = ['Oscillator', {}, 'amp'];
+        }
+        params.amp = ['Gain', { gain: 0.0 }, 'target'];
+        params.target = ['Gain', { gain: 1.0 }, 'master'];
+        if (this.reverb.time > 0.0 && this.reverb.mix > 0.0) {
+            params.amp.push('convolver');
+            params.convolver = ['Convolver', { buffer: impulseResponse({ time: this.reverb.time }) }, 'convolverDepth'];
+            params.convolverDepth = ['Gain', { gain: 1.0 }, 'master'];
+        }
+        if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
+            params.amp.push('delay');
+            params.delay = ['Delay', {}, 'delayDepth', 'delayFeedback'];
+            params.delayDepth = ['Gain', { gain: 1.0 }, 'master'];
+            params.delayFeedback = ['Gain', { gain: this.delay.feedback }, 'delay'];
+        }
+        if (this.oscillator.LFO) {
+            params.oscillatorLFO = ['Oscillator', {}, 'oscillatorLFODepth'];
+            params.oscillatorLFODepth = ['Gain', {}, 'oscillator.frequency'];
+        }
+        if (this.filter.LFO) {
+            params.filterLFO = ['Oscillator', {}, 'filterLFODepth'];
+            params.filterLFODepth = ['Gain', {}, 'filter.frequency'];
+        }
+        if (this.amp.LFO) {
+            params.ampLFO = ['Oscillator', {}, 'ampLFODepth'];
+            params.ampLFODepth = ['Gain', {}, 'amp.gain'];
+        }
+        const nodes = Audio.connect(params);
+        nodes.oscillator.type = this.oscillator.type;
+        nodes.oscillator.frequency.value = clamp(frequency, 10.0, 5000.0);
+        if (this.filter.type && this.filter.cutoff) {
+            nodes.filter.type = this.filter.type;
+            nodes.filter.frequency.value = this.filter.cutoff;
+        }
+        if (this.reverb.time > 0.0 && this.reverb.mix > 0.0) {
+            nodes.target.gain.value *= (1.0 - this.reverb.mix);
+            nodes.convolverDepth.gain.value *= this.reverb.mix;
+        }
+        if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
+            console.log(this.delay.time / 1000);
+            nodes.delay.delayTime.value = this.delay.time / 1000;
+            nodes.target.gain.value *= (1.0 - this.delay.mix);
+            nodes.delayDepth.gain.value *= this.delay.mix;
+        }
+        {
+            if (this.oscillator.LFO) {
+                nodes.oscillatorLFODepth.gain.value = frequency * (Math.pow(2.0, this.oscillator.LFO.amount / 12.0) - 1.0);
+                nodes.oscillatorLFO.type = this.oscillator.LFO.type;
+                nodes.oscillatorLFO.frequency.value = this.oscillator.LFO.rate;
+                nodes.oscillatorLFO.start(start);
+            }
+            if (this.filter.LFO) {
+                nodes.filterLFODepth.gain.value = frequency * (Math.pow(2.0, this.filter.LFO.amount / 12.0) - 1.0);
+                nodes.filterLFO.type = this.filter.LFO.type;
+                nodes.filterLFO.frequency.value = this.filter.LFO.rate;
+                nodes.filterLFO.start(start);
+            }
+            if (this.amp.LFO) {
+                nodes.ampLFODepth.gain.value = this.amp.LFO.amount;
+                nodes.ampLFO.type = this.amp.LFO.type;
+                nodes.ampLFO.frequency.value = this.amp.LFO.rate;
+                nodes.ampLFO.start(start);
+            }
+            if (this.oscillator.envelope) {
+                const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
+                startEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
+            }
+            if (this.filter.envelope) {
+                const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
+                startEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
+            }
+            if (this.amp.envelope) {
+                startEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
+            }
+            nodes.oscillator.start(start);
+        }
+        if (duration !== null) {
+            release.call(this);
+        }
+        function release() {
+            duration = duration !== null && duration !== void 0 ? duration : (Audio.context.currentTime - start);
+            if (this.amp.envelope) {
+                const ADSR = this.amp.envelope.ADSR;
+                const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
+                const rate = adsr[0] === 0.0 ? 1.0 : Math.min(duration / adsr[0], 1.0);
+                stop = start + Math.max((adsr[0] + adsr[1]) * rate, duration) + adsr[3];
+            }
+            else {
+                stop = start + duration;
+            }
+            if (this.oscillator.LFO) {
+                nodes.oscillatorLFO.stop(stop);
+            }
+            if (this.amp.LFO) {
+                nodes.ampLFO.stop(stop);
+            }
+            if (this.oscillator.envelope) {
+                const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
+                stopEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
+            }
+            if (this.filter.envelope) {
+                const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
+                stopEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
+            }
+            if (this.amp.envelope) {
+                stopEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
+            }
+            nodes.oscillator.stop(stop);
+        }
+        function startEnvelope(param, base, amount, ADSR) {
+            const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
+            param.value = base;
+            param.setValueAtTime(base, start);
+            param.linearRampToValueAtTime(base + amount, start + adsr[0]);
+            param.linearRampToValueAtTime(base + amount * adsr[2], start + (adsr[0] + adsr[1]));
+        }
+        function stopEnvelope(param, base, amount, ADSR) {
+            const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
+            const rate = adsr[0] === 0.0 ? 1.0 : Math.min(duration / adsr[0], 1.0);
+            if (rate < 1.0) {
+                param.cancelScheduledValues(start);
+                param.setValueAtTime(base, start);
+                param.linearRampToValueAtTime(base + amount * rate, start + adsr[0] * rate);
+                param.linearRampToValueAtTime(base + amount * rate * adsr[2], start + (adsr[0] + adsr[1]) * rate);
+            }
+            param.linearRampToValueAtTime(base + amount * rate * adsr[2], start + Math.max((adsr[0] + adsr[1]) * rate, duration));
+            param.linearRampToValueAtTime(base, start + Math.max((adsr[0] + adsr[1]) * rate, duration) + adsr[3]);
+        }
+        return {
+            release: release.bind(this),
+        };
+    }
+}
+Synthesizer.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,
+    'C2': 65.406, 'C#2': 69.296, 'D2': 73.416, 'D#2': 77.782, 'E2': 82.407, 'F2': 87.307, 'F#2': 92.499, 'G2': 97.999, 'G#2': 103.826, 'A2': 110.000, 'A#2': 116.541, 'B2': 123.471,
+    'C3': 130.813, 'C#3': 138.591, 'D3': 146.832, 'D#3': 155.563, 'E3': 164.814, 'F3': 174.614, 'F#3': 184.997, 'G3': 195.998, 'G#3': 207.652, 'A3': 220.000, 'A#3': 233.082, 'B3': 246.942,
+    'C4': 261.626, 'C#4': 277.183, 'D4': 293.665, 'D#4': 311.127, 'E4': 329.628, 'F4': 349.228, 'F#4': 369.994, 'G4': 391.995, 'G#4': 415.305, 'A4': 440.000, 'A#4': 466.164, 'B4': 493.883,
+    'C5': 523.251, 'C#5': 554.365, 'D5': 587.330, 'D#5': 622.254, 'E5': 659.255, 'F5': 698.456, 'F#5': 739.989, 'G5': 783.991, 'G#5': 830.609, 'A5': 880.000, 'A#5': 932.328, 'B5': 987.767,
+    'C6': 1046.502, 'C#6': 1108.731, 'D6': 1174.659, 'D#6': 1244.508, 'E6': 1318.510, 'F6': 1396.913, 'F#6': 1479.978, 'G6': 1567.982, 'G#6': 1661.219, 'A6': 1760.000, 'A#6': 1864.655, 'B6': 1975.533,
+    'C7': 2093.005, 'C#7': 2217.461, 'D7': 2349.318, 'D#7': 2489.016, 'E7': 2637.020, 'F7': 2793.826, 'F#7': 2959.955, 'G7': 3135.963, 'G#7': 3322.438, 'A7': 3520.000, 'A#7': 3729.310, 'B7': 3951.066,
+    'C8': 4186.009,
+};
+Synthesizer.notemap = {
+    '1m': 4.000, '2n': 2.000, '4n': 1.000, '8n': 0.500, '16n': 0.250, '32n': 0.125,
+};
+Synthesizer.initialize();
+function impulseResponse({ time, decay = 2.0 }) {
+    const length = Audio.context.sampleRate * time / 1000;
+    const impulse = Audio.context.createBuffer(2, length, Audio.context.sampleRate);
+    const ch0 = impulse.getChannelData(0);
+    const ch1 = impulse.getChannelData(1);
+    for (let i = 0; i < length; i++) {
+        ch0[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
+        ch1[i] = (2 * Math.random() - 1) * Math.pow(1 - i / length, decay);
+    }
+    return impulse;
+}
+
+const basics = {
+    Screen,
+    UserEvent,
+    ResizeEvent,
+    ModalFrame,
+    ModalContent,
+    AccordionFrame,
+    AccordionButton,
+    AccordionBullet,
+    AccordionContent,
+    TabFrame,
+    TabButton,
+    TabContent,
+    PanelFrame,
+    PanelGroup,
+    InputFrame,
+    DragFrame,
+    DragTarget,
+    VirtualStick,
+    VirtualDPad,
+    VirtualButton,
+};
+const audio = {
+    synthesizer
+};
+const xnew = Object.assign(xnew$1, {
+    basics,
+    audio,
+});
+
+export { xnew as default };