@mulsense/xnew 0.5.2 → 0.5.3

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,7 +671,8 @@
                 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: [],
@@ -600,7 +680,7 @@
                 listeners: new MapMap(),
                 defines: {},
                 systems: { start: [], update: [], render: [], stop: [], finalize: [] },
-                eventManager: new EventManager(),
+                eventor: new Eventor(),
             });
             // nest html element
             if (typeof unit._.target === 'string') {
@@ -633,11 +713,8 @@
                 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,20 +728,17 @@
                 }
                 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;
@@ -677,12 +751,13 @@
                 }
                 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)
-                    wrapper.get = Unit.wrap(unit, descriptor.get);
+                    wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
                 if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                    wrapper.set = Unit.wrap(unit, descriptor.set);
+                    wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
                 if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                    wrapper.value = Unit.wrap(unit, descriptor.value);
+                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
                 }
                 else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
                     wrapper.writable = true;
@@ -735,10 +810,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 +860,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 +883,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 +896,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 +913,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 +929,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;
             }
         },
@@ -976,6 +963,9 @@
          */
         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 +1100,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 +1158,114 @@
         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 }));
+        let state = open ? 1.0 : 0.0;
+        let sign = open ? +1 : -1;
+        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();
-                }
-                else if (unit.state === 0.0) {
-                    unit.open();
-                }
+                sign > 0 ? unit.close() : unit.open();
             },
             open() {
-                if (unit.state === 0.0) {
-                    xnew$1.transition((x) => xnew$1.emit('-transition', { state: x }), duration, easing);
-                }
+                if (sign < 0)
+                    transition();
             },
             close() {
-                if (unit.state === 1.0) {
-                    xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing);
-                }
-            }
+                if (sign > 0)
+                    transition();
+            },
+        };
+        function transition() {
+            sign *= -1;
+            const d = sign > 0 ? 1 - state : state;
+            timer.clear();
+            timer = xnew$1.transition((x) => {
+                const y = x < 1.0 ? (1 - x) * d : 0.0;
+                state = sign > 0 ? 1.0 - y : y;
+                xnew$1.emit('-transition', { state });
+            }, duration * d, easing);
+        }
+    }
+    function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
+        xnew$1.context('xnew.modal', unit);
+        let state = 0.0;
+        let timer = xnew$1.transition((x) => {
+            state = x;
+            xnew$1.emit('-transition', { state });
+        }, duration, easing);
+        return {
+            close() {
+                const d = state;
+                timer.clear();
+                timer = xnew$1.transition((x) => {
+                    state = x < 1.0 ? (1 - x) * d : 0.0;
+                    xnew$1.emit('-transition', { state });
+                }, duration * d, easing)
+                    .timeout(() => unit.finalize());
+            },
         };
     }
 
-    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 +1320,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;">`);
@@ -1603,7 +1616,7 @@
         Modal,
         Accordion,
         AnalogStick,
-        DirectionalPad,
+        DPad,
     };
     const audio = {
         load(path) {