@mulsense/xnew 0.5.2 → 0.5.4

package/dist/xnew.js

@@ -143,11 +143,11 @@
                 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);
             });
@@ -205,7 +205,7 @@
         }
     }
 
-    class EventManager {
+    class Eventor {
         constructor() {
             this.map = new MapMap();
         }
@@ -525,12 +525,93 @@
     // 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;
@@ -545,15 +626,14 @@
             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);
         }
@@ -582,7 +662,6 @@
             Unit.initialize(this, anchor);
         }
         static initialize(unit, anchor) {
-            var _a, _b;
             const backup = Unit.currentUnit;
             Unit.currentUnit = unit;
             unit._ = Object.assign(unit._, {
@@ -592,15 +671,16 @@
                 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') {
@@ -618,26 +698,21 @@
                 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) {
@@ -651,47 +726,53 @@
                 }
                 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)
@@ -735,10 +816,6 @@
             });
             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;
@@ -789,15 +866,16 @@
             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);
                 }
             }
         }
@@ -811,7 +889,7 @@
                     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) {
@@ -824,7 +902,7 @@
             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));
                     }
@@ -841,92 +919,10 @@
     // 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
@@ -939,29 +935,26 @@
         }
         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;
             }
         },
@@ -969,13 +962,16 @@
          * 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) {
@@ -1110,6 +1106,15 @@
                 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);
@@ -1159,100 +1164,111 @@
         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());
-            }
         };
     }
 
@@ -1307,7 +1323,7 @@
             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;">`);
@@ -1600,10 +1616,9 @@
 
     const basics = {
         Screen,
-        Modal,
-        Accordion,
+        OpenAndClose,
         AnalogStick,
-        DirectionalPad,
+        DPad,
     };
     const audio = {
         load(path) {