@mulsense/xnew 0.5.2 → 0.5.4

package/dist/xnew.mjs

@@ -137,11 +137,11 @@ class Timer {
             else if (this.options.easing === 'ease-in') {
                 p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
             }
-            else if (this.options.easing === 'ease') {
-                p = (1.0 - Math.cos(p * Math.PI)) / 2.0; // todo
-            }
-            else if (this.options.easing === 'ease-in-out') {
-                p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+            else if (this.options.easing === 'ease' || this.options.easing === 'ease-in-out') {
+                // p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+                const bias = (this.options.easing === 'ease') ? 0.7 : 1.0;
+                const s = Math.pow(p, bias);
+                p = s * s * (3 - 2 * s);
             }
             (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, p);
         });
@@ -199,7 +199,7 @@ class Timer {
     }
 }
 
-class EventManager {
+class Eventor {
     constructor() {
         this.map = new MapMap();
     }
@@ -519,12 +519,93 @@ function pointer(element, event) {
 // utils
 //----------------------------------------------------------------------------------------------------
 const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
+class UnitPromise {
+    constructor(promise, component) {
+        this.promise = promise;
+        this.component = component;
+    }
+    then(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.then((...args) => Unit.scope(snapshot, callback, ...args));
+        return this;
+    }
+    catch(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.catch((...args) => Unit.scope(snapshot, callback, ...args));
+        return this;
+    }
+    finally(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.finally(() => Unit.scope(snapshot, callback));
+        return this;
+    }
+}
+class UnitTimer {
+    constructor(options) {
+        this.stack = [];
+        this.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
+    }
+    clear() {
+        this.stack = [];
+        this.unit.finalize();
+    }
+    timeout(timeout, duration = 0) {
+        UnitTimer.execute(this, { timeout, duration, iterations: 1 });
+        return this;
+    }
+    iteration(timeout, duration = 0, iterations = -1) {
+        UnitTimer.execute(this, { timeout, duration, iterations });
+        return this;
+    }
+    transition(transition, duration = 0, easing) {
+        UnitTimer.execute(this, { transition, duration, iterations: 1, easing });
+        return this;
+    }
+    static execute(timer, options) {
+        if (timer.unit._.state === 'finalized') {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
+        }
+        else if (timer.stack.length === 0) {
+            timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+        else {
+            timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+        }
+    }
+    static next(timer) {
+        if (timer.stack.length > 0) {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.stack.shift());
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+    }
+    static Component(unit, { options, snapshot }) {
+        let counter = 0;
+        const timer = new Timer({
+            transition: (p) => {
+                if (options.transition)
+                    Unit.scope(snapshot, options.transition, p);
+            },
+            timeout: () => {
+                if (options.transition)
+                    Unit.scope(snapshot, options.transition, 1.0);
+                if (options.timeout)
+                    Unit.scope(snapshot, options.timeout);
+                if (options.iterations && counter >= options.iterations - 1) {
+                    unit.finalize();
+                }
+                counter++;
+            }, duration: options.duration, iterations: options.iterations, easing: options.easing
+        });
+        unit.on('finalize', () => timer.clear());
+    }
+}
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
 class Unit {
-    constructor(parent, target, component, props, config) {
-        var _a, _b;
+    constructor(parent, target, component, props) {
+        var _a;
         let baseElement;
         if (target instanceof HTMLElement || target instanceof SVGElement) {
             baseElement = target;
@@ -539,15 +620,14 @@ class Unit {
         if (typeof component === 'function') {
             baseComponent = component;
         }
-        else if (typeof component === 'string') {
-            baseComponent = (unit) => { unit.element.textContent = component; };
+        else if (component !== undefined) {
+            baseComponent = (unit) => { unit.element.textContent = component.toString(); };
         }
         else {
             baseComponent = (unit) => { };
         }
         const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-        const protect = (_b = config === null || config === void 0 ? void 0 : config.protect) !== null && _b !== void 0 ? _b : false;
-        this._ = { parent, target, baseElement, baseContext, baseComponent, props, config: { protect } };
+        this._ = { parent, target, baseElement, baseContext, baseComponent, props };
         parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
         Unit.initialize(this, null);
     }
@@ -576,7 +656,6 @@ class Unit {
         Unit.initialize(this, anchor);
     }
     static initialize(unit, anchor) {
-        var _a, _b;
         const backup = Unit.currentUnit;
         Unit.currentUnit = unit;
         unit._ = Object.assign(unit._, {
@@ -586,15 +665,16 @@ class Unit {
             anchor,
             state: 'invoked',
             tostart: true,
-            ancestors: [...(unit._.parent ? [unit._.parent] : []), ...((_b = (_a = unit._.parent) === null || _a === void 0 ? void 0 : _a._.ancestors) !== null && _b !== void 0 ? _b : [])],
+            protected: false,
+            ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
             children: [],
             elements: [],
             promises: [],
-            components: [],
+            extends: [],
             listeners: new MapMap(),
             defines: {},
             systems: { start: [], update: [], render: [], stop: [], finalize: [] },
-            eventManager: new EventManager(),
+            eventor: new Eventor(),
         });
         // nest html element
         if (typeof unit._.target === 'string') {
@@ -612,26 +692,21 @@ class Unit {
             unit._.children.forEach((child) => child.finalize());
             unit._.systems.finalize.forEach(({ execute }) => execute());
             unit.off();
-            unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
+            unit._.extends.forEach(({ component }) => Unit.component2units.delete(component, unit));
             if (unit._.elements.length > 0) {
                 unit._.baseElement.removeChild(unit._.elements[0]);
                 unit._.currentElement = unit._.baseElement;
             }
             // reset defines
             Object.keys(unit._.defines).forEach((key) => {
-                if (SYSTEM_EVENTS.includes(key) === false) {
-                    delete unit[key];
-                }
+                delete unit[key];
             });
             unit._.defines = {};
             unit._.state = 'finalized';
         }
     }
-    static nest(unit, htmlString, textContent) {
-        if (unit._.state !== 'invoked') {
-            throw new Error('This function can not be called after initialized.');
-        }
-        const match = htmlString.match(/<((\w+)[^>]*?)\/?>/);
+    static nest(unit, tag, textContent) {
+        const match = tag.match(/<((\w+)[^>]*?)\/?>/);
         if (match !== null) {
             let element;
             if (unit._.anchor !== null) {
@@ -645,47 +720,53 @@ class Unit {
             }
             unit._.currentElement = element;
             if (textContent !== undefined) {
-                element.textContent = textContent;
+                element.textContent = textContent.toString();
             }
             unit._.elements.push(element);
             return element;
         }
         else {
-            throw new Error(`Invalid html string: ${htmlString}`);
+            throw new Error(`xnew.nest: invalid html string [${tag}]`);
         }
     }
     static extend(unit, component, props) {
         var _a;
-        if (unit._.state !== 'invoked') {
-            throw new Error('This function can not be called after initialized.');
-        }
-        unit._.components.push(component);
-        Unit.component2units.add(component, unit);
-        const backupComponent = unit._.currentComponent;
-        unit._.currentComponent = component;
-        const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
-        unit._.currentComponent = backupComponent;
-        Object.keys(defines).forEach((key) => {
-            if (unit[key] !== undefined && unit._.defines[key] === undefined) {
-                throw new Error(`The property "${key}" already exists.`);
-            }
-            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
-            const wrapper = { configurable: true, enumerable: true };
-            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)
-                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);
-            }
-            else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
-                wrapper.writable = true;
-                wrapper.value = descriptor.value;
-            }
-            Object.defineProperty(unit._.defines, key, wrapper);
-            Object.defineProperty(unit, key, wrapper);
-        });
-        return Object.assign({}, unit._.defines);
+        const find = unit._.extends.find(({ component: c }) => c === component);
+        if (find !== undefined) {
+            throw new Error(`The component is already extended.`);
+        }
+        else {
+            const backupComponent = unit._.currentComponent;
+            unit._.currentComponent = component;
+            const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+            unit._.currentComponent = backupComponent;
+            Object.keys(defines).forEach((key) => {
+                if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                    throw new Error(`The property "${key}" already exists.`);
+                }
+                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+                const wrapper = { configurable: true, enumerable: true };
+                const snapshot = Unit.snapshot(unit);
+                if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
+                        wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
+                        wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
+                }
+                else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
+                }
+                else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
+                    wrapper.get = () => defines[key];
+                    wrapper.set = (value) => defines[key] = value;
+                }
+                Object.defineProperty(unit._.defines, key, wrapper);
+                Object.defineProperty(unit, key, wrapper);
+            });
+            Unit.component2units.add(component, unit);
+            unit._.extends.push({ component, defines });
+            return defines;
+        }
     }
     static start(unit) {
         if (unit._.tostart === false)
@@ -729,10 +810,6 @@ class Unit {
         });
         Unit.rootUnit.on('finalize', () => ticker.clear());
     }
-    static wrap(unit, listener) {
-        const snapshot = Unit.snapshot(unit);
-        return (...args) => Unit.scope(snapshot, listener, ...args);
-    }
     static scope(snapshot, func, ...args) {
         if (snapshot.unit._.state === 'finalized') {
             return;
@@ -783,15 +860,16 @@ class Unit {
         types.forEach((type) => Unit.off(this, type, listener));
     }
     static on(unit, type, listener, options) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        const execute = (...args) => Unit.scope(snapshot, listener, ...args);
         if (SYSTEM_EVENTS.includes(type)) {
-            unit._.systems[type].push({ listener, execute: Unit.wrap(Unit.currentUnit, listener) });
+            unit._.systems[type].push({ listener, execute });
         }
         if (unit._.listeners.has(type, listener) === false) {
-            const execute = Unit.wrap(Unit.currentUnit, listener);
             unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
             Unit.type2units.add(type, unit);
             if (/^[A-Za-z]/.test(type)) {
-                unit._.eventManager.add(unit.element, type, execute, options);
+                unit._.eventor.add(unit.element, type, execute, options);
             }
         }
     }
@@ -805,7 +883,7 @@ class Unit {
                 return;
             unit._.listeners.delete(type, listener);
             if (/^[A-Za-z]/.test(type)) {
-                unit._.eventManager.remove(type, item.execute);
+                unit._.eventor.remove(type, item.execute);
             }
         });
         if (unit._.listeners.has(type) === false) {
@@ -818,7 +896,7 @@ class Unit {
         if (type[0] === '+') {
             (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                 var _a;
-                const find = [unit, ...unit._.ancestors].find(u => u._.config.protect === true);
+                const find = [unit, ...unit._.ancestors].find(u => u._.protected === true);
                 if (find === undefined || current._.ancestors.includes(find) === true || current === find) {
                     (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(...args));
                 }
@@ -835,92 +913,10 @@ Unit.component2units = new MapSet();
 // event
 //----------------------------------------------------------------------------------------------------
 Unit.type2units = new MapSet();
-//----------------------------------------------------------------------------------------------------
-// unit promise
-//----------------------------------------------------------------------------------------------------
-class UnitPromise {
-    constructor(promise, component) {
-        this.promise = promise;
-        this.component = component;
-    }
-    then(callback) {
-        this.promise = this.promise.then(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-    catch(callback) {
-        this.promise = this.promise.catch(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-    finally(callback) {
-        this.promise = this.promise.finally(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-}
-//----------------------------------------------------------------------------------------------------
-// unit timer
-//----------------------------------------------------------------------------------------------------
-class UnitTimer {
-    constructor(options) {
-        this.stack = [];
-        this.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-    }
-    clear() {
-        this.stack = [];
-        this.unit.finalize();
-    }
-    timeout(timeout, duration = 0) {
-        UnitTimer.execute(this, { timeout, duration, iterations: 1 });
-        return this;
-    }
-    iteration(timeout, duration = 0, iterations = -1) {
-        UnitTimer.execute(this, { timeout, duration, iterations });
-        return this;
-    }
-    transition(transition, duration = 0, easing) {
-        UnitTimer.execute(this, { transition, duration, iterations: 1, easing });
-        return this;
-    }
-    static execute(timer, options) {
-        if (timer.unit._.state === 'finalized') {
-            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-        }
-        else if (timer.stack.length === 0) {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
-        }
-        else {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-        }
-    }
-    static next(timer) {
-        if (timer.stack.length > 0) {
-            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.stack.shift());
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
-        }
-    }
-    static Component(unit, options) {
-        let counter = 0;
-        const timer = new Timer({
-            transition: (p) => {
-                if (options.transition)
-                    Unit.scope(options.snapshot, options.transition, p);
-            },
-            timeout: () => {
-                if (options.transition)
-                    Unit.scope(options.snapshot, options.transition, 1.0);
-                if (options.timeout)
-                    Unit.scope(options.snapshot, options.timeout);
-                if (options.iterations && counter >= options.iterations - 1) {
-                    unit.finalize();
-                }
-                counter++;
-            }, duration: options.duration, iterations: options.iterations, easing: options.easing
-        });
-        unit.on('finalize', () => timer.clear());
-    }
-}
 
-function parseArguments(...args) {
+const xnew$1 = Object.assign(function (...args) {
+    if (Unit.rootUnit === undefined)
+        Unit.reset();
     let target;
     if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
         target = args.shift(); // an existing html element
@@ -933,29 +929,26 @@ function parseArguments(...args) {
     }
     const component = args.shift();
     const props = args.shift();
-    return { target, component, props };
-}
-const xnew$1 = Object.assign(function (...args) {
-    if (Unit.rootUnit === undefined)
-        Unit.reset();
-    const { target, component, props } = parseArguments(...args);
-    return new Unit(Unit.currentUnit, target, component, props, { protect: false });
+    return new Unit(Unit.currentUnit, target, component, props);
 }, {
     /**
      * Creates a nested HTML/SVG element within the current component
-     * @param htmlString - HTML or SVG tag name (e.g., '<div>', '<span>', '<svg>')
+     * @param tag - HTML or SVG tag name (e.g., '<div>', '<span>', '<svg>')
      * @returns The created HTML/SVG element
      * @throws Error if called after component initialization
      * @example
      * const div = xnew.nest('<div>')
      * div.textContent = 'Hello'
      */
-    nest(htmlString, textContent) {
+    nest(tag, textContent) {
         try {
-            return Unit.nest(Unit.currentUnit, htmlString, textContent);
+            if (Unit.currentUnit._.state !== 'invoked') {
+                throw new Error('xnew.nest can not be called after initialized.');
+            }
+            return Unit.nest(Unit.currentUnit, tag, textContent);
         }
         catch (error) {
-            console.error('xnew.nest(htmlString: string): ', error);
+            console.error('xnew.nest(tag: string): ', error);
             throw error;
         }
     },
@@ -963,13 +956,16 @@ const xnew$1 = Object.assign(function (...args) {
      * Extends the current component with another component's functionality
      * @param component - Component function to extend with
      * @param props - Optional properties to pass to the extended component
-     * @returns The extended component's return value
+     * @returns defines returned by the extended component
      * @throws Error if called after component initialization
      * @example
      * const api = xnew.extend(BaseComponent, { data: {} })
      */
     extend(component, props) {
         try {
+            if (Unit.currentUnit._.state !== 'invoked') {
+                throw new Error('xnew.extend can not be called after initialized.');
+            }
             return Unit.extend(Unit.currentUnit, component, props);
         }
         catch (error) {
@@ -1104,6 +1100,15 @@ const xnew$1 = Object.assign(function (...args) {
             throw error;
         }
     },
+    /**
+     * Emits a custom event to components
+     * @param type - Event type to emit (prefix with '+' for global events, '-' for local events)
+     * @param args - Additional arguments to pass to event listeners
+     * @returns void
+     * @example
+     * xnew.emit('+globalevent', { data: 123 }); // Global event
+     * xnew.emit('-localevent', { data: 123 }); // Local event
+     */
     emit(type, ...args) {
         try {
             return Unit.emit(type, ...args);
@@ -1153,100 +1158,111 @@ const xnew$1 = Object.assign(function (...args) {
     transition(transition, duration = 0, easing = 'linear') {
         return new UnitTimer({ transition, duration, easing, iterations: 1 });
     },
-    protect(...args) {
-        if (Unit.rootUnit === undefined)
-            Unit.reset();
-        const { target, component, props } = parseArguments(...args);
-        return new Unit(Unit.currentUnit, target, component, props, { protect: true });
+    /**
+     * Call this method within a component function to enable protection.
+     * Protected components will not respond to global events emitted via xnew.emit,
+     * and will be excluded from xnew.find searches.
+     * @example
+     * function MyComponent(unit) {
+     *   xnew.protect();
+     *   // Component logic here
+     * }
+     */
+    protect() {
+        Unit.currentUnit._.protected = true;
     },
 });
 
-function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.accordion', unit);
-    unit.on('-transition', ({ state }) => unit.state = state);
-    xnew$1.timeout(() => xnew$1.emit('-transition', { state: open ? 1.0 : 0.0 }));
+function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
+    let state = Math.max(0.0, Math.min(1.0, initialState));
+    let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
+    let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
     return {
-        state: open ? 1.0 : 0.0,
-        toggle() {
-            if (unit.state === 1.0) {
-                unit.close();
+        toggle(duration = 200, easing = 'ease') {
+            if (direction === null || direction < 0) {
+                unit.open(duration, easing);
             }
-            else if (unit.state === 0.0) {
-                unit.open();
+            else {
+                unit.close(duration, easing);
             }
         },
-        open() {
-            if (unit.state === 0.0) {
-                xnew$1.transition((x) => xnew$1.emit('-transition', { state: x }), duration, easing);
+        open(duration = 200, easing = 'ease') {
+            if (direction === null || direction < 0) {
+                direction = +1;
+                const d = 1 - state;
+                timer === null || timer === void 0 ? void 0 : timer.clear();
+                timer = xnew$1.transition((x) => {
+                    const y = x < 1.0 ? (1 - x) * d : 0.0;
+                    state = 1.0 - y;
+                    xnew$1.emit('-transition', { state, type: '-transition' });
+                }, duration * d, easing)
+                    .timeout(() => {
+                    xnew$1.emit('-opened', { state, type: '-opened' });
+                });
             }
         },
-        close() {
-            if (unit.state === 1.0) {
-                xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing);
+        close(duration = 200, easing = 'ease') {
+            if (direction === null || direction > 0) {
+                direction = -1;
+                const d = state;
+                timer === null || timer === void 0 ? void 0 : timer.clear();
+                timer = xnew$1.transition((x) => {
+                    const y = x < 1.0 ? (1 - x) * d : 0.0;
+                    state = y;
+                    xnew$1.emit('-transition', { state, type: '-transition' });
+                }, duration * d, easing)
+                    .timeout(() => {
+                    xnew$1.emit('-closed', { state, type: '-closed' });
+                });
             }
-        }
+        },
     };
 }
 
-function Screen(unit, { 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;">');
-    unit.on('resize', resize);
+function Screen(unit, { width, height, fit = 'contain' } = {}) {
+    const size = { width: width !== null && width !== void 0 ? width : 800, height: height !== null && height !== void 0 ? height : 600 };
+    const outer = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
+    xnew$1().on('resize', resize);
     const absolute = xnew$1.nest('<div style="position: absolute; margin: auto; container-type: size; overflow: hidden;">');
-    const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none; pointer-events: auto;">`);
+    const canvas = xnew$1(`<canvas width="${size.width}" height="${size.height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none; pointer-events: auto;">`);
     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';
+            const aspect = size.width / size.height;
+            if (outer.clientWidth < outer.clientHeight * aspect) {
+                style.height = Math.floor(outer.clientWidth / aspect) + 'px';
             }
             else {
-                style.width = Math.floor(wrapper.clientHeight * aspect) + 'px';
+                style.width = Math.floor(outer.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';
+            const aspect = size.width / size.height;
+            if (outer.clientWidth < outer.clientHeight * aspect) {
+                style.width = Math.floor(outer.clientHeight * aspect) + 'px';
+                style.left = Math.floor((outer.clientWidth - outer.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.height = Math.floor(outer.clientWidth / aspect) + 'px';
+                style.top = Math.floor((outer.clientHeight - outer.clientWidth / aspect) / 2) + 'px';
                 style.bottom = 'auto';
             }
         }
-        else ;
+        else if (fit === 'resize') {
+            size.width = outer.clientWidth > 0 ? outer.clientWidth : size.width;
+            size.height = outer.clientHeight > 0 ? outer.clientHeight : size.height;
+            console.log(size);
+            canvas.element.setAttribute('width', size.width + 'px');
+            canvas.element.setAttribute('height', size.height + 'px');
+        }
         Object.assign(absolute.style, style);
     }
     return {
         get canvas() {
             return canvas.element;
         },
-        resize(width, height) {
-            size.width = width;
-            size.height = height;
-            canvas.element.setAttribute('width', width + 'px');
-            canvas.element.setAttribute('height', height + 'px');
-            resize();
-        },
-    };
-}
-
-function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.modalframe', unit);
-    xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
-    unit.on('click', ({ event }) => unit.close());
-    unit.on('-transition', ({ state }) => unit.state = state);
-    xnew$1.transition((x) => xnew$1.emit('-transition', { state: x }), duration, easing);
-    return {
-        state: 0.0,
-        close() {
-            xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing)
-                .timeout(() => unit.finalize());
-        }
     };
 }
 
@@ -1301,7 +1317,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         xnew$1.emit('-up', { type: '-up', vector });
     });
 }
-function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
+function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
     let newsize = Math.min(outer.clientWidth, outer.clientHeight);
     const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
@@ -1594,10 +1610,9 @@ class Synthesizer {
 
 const basics = {
     Screen,
-    Modal,
-    Accordion,
+    OpenAndClose,
     AnalogStick,
-    DirectionalPad,
+    DPad,
 };
 const audio = {
     load(path) {