@mulsense/xnew 0.6.5 → 0.6.7

package/dist/xnew.mjs

@@ -517,92 +517,15 @@ 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) { return this.wrap('then', callback); }
-    catch(callback) { return this.wrap('catch', callback); }
-    finally(callback) { return this.wrap('finally', callback); }
-    wrap(key, callback) {
-        const snapshot = Unit.snapshot(Unit.currentUnit);
-        this.promise = this.promise[key]((...args) => Unit.scope(snapshot, callback, ...args));
-        return this;
-    }
-}
-class UnitTimer {
-    constructor() {
-        this.unit = null;
-        this.stack = [];
-    }
-    clear() {
-        var _a;
-        this.stack = [];
-        (_a = this.unit) === null || _a === void 0 ? void 0 : _a.finalize();
-        this.unit = null;
-    }
-    timeout(callback, duration = 0) {
-        return UnitTimer.execute(this, { callback, duration }, 1);
-    }
-    interval(callback, duration = 0, iterations = 0) {
-        return UnitTimer.execute(this, { callback, duration }, iterations);
-    }
-    transition(transition, duration = 0, easing) {
-        return UnitTimer.execute(this, { transition, duration, easing }, 1);
-    }
-    static execute(timer, options, iterations) {
-        const props = { options, iterations, snapshot: Unit.snapshot(Unit.currentUnit) };
-        if (timer.unit === null || timer.unit._.state === 'finalized') {
-            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, props);
-        }
-        else if (timer.stack.length === 0) {
-            timer.stack.push(props);
-            timer.unit.on('finalize', () => UnitTimer.next(timer));
-        }
-        else {
-            timer.stack.push(props);
-        }
-        return timer;
-    }
-    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, iterations, snapshot }) {
-        let counter = 0;
-        let timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
-        function callback() {
-            if (options.callback)
-                Unit.scope(snapshot, options.callback);
-            if (iterations <= 0 || counter < iterations - 1) {
-                timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
-            }
-            else {
-                unit.finalize();
-            }
-            counter++;
-        }
-        function transition(value) {
-            if (options.transition)
-                Unit.scope(snapshot, options.transition, { value });
-        }
-        unit.on('finalize', () => timer.clear());
-    }
-}
-function DefaultComponent(unit, { text }) {
-    if (text !== undefined) {
-        unit.element.textContent = text;
-    }
-}
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
 class Unit {
-    constructor(parent, target, component, props) {
+    constructor(parent, target, Component, props) {
         var _a;
+        const backup = Unit.currentUnit;
+        Unit.currentUnit = this;
+        parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
         let baseElement;
         if (target instanceof HTMLElement || target instanceof SVGElement) {
             baseElement = target;
@@ -614,20 +537,45 @@ class Unit {
             baseElement = (document === null || document === void 0 ? void 0 : document.body) ? document.body : null;
         }
         let baseComponent;
-        if (typeof component === 'function') {
-            baseComponent = component;
+        if (typeof Component === 'function') {
+            baseComponent = Component;
         }
-        else if (typeof component === 'string' || typeof component === 'number') {
-            baseComponent = DefaultComponent;
-            props = { text: component.toString() };
+        else if (typeof Component === 'string' || typeof Component === 'number') {
+            baseComponent = (unit) => { unit.element.textContent = Component.toString(); };
         }
         else {
-            baseComponent = DefaultComponent;
+            baseComponent = (unit) => { };
         }
-        const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-        this._ = { parent, target, baseElement, baseContext, baseComponent, props };
-        parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
-        Unit.initialize(this, null);
+        const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { previous: null };
+        this._ = {
+            parent,
+            state: 'invoked',
+            tostart: true,
+            protected: false,
+            currentElement: baseElement,
+            currentContext: baseContext,
+            currentComponent: null,
+            ancestors: parent ? [parent, ...parent._.ancestors] : [],
+            children: [],
+            nestElements: [],
+            promises: [],
+            results: {},
+            Components: [],
+            listeners: new MapMap(),
+            defines: {},
+            systems: { start: [], update: [], render: [], stop: [], finalize: [] },
+            eventor: new Eventor(),
+        };
+        // nest html element
+        if (typeof target === 'string') {
+            Unit.nest(this, target);
+        }
+        // setup Component
+        Unit.extend(this, baseComponent, props);
+        if (this._.state === 'invoked') {
+            this._.state = 'initialized';
+        }
+        Unit.currentUnit = backup;
     }
     get element() {
         return this._.currentElement;
@@ -642,77 +590,39 @@ class Unit {
     finalize() {
         Unit.stop(this);
         Unit.finalize(this);
-        if (this._.parent) {
-            this._.parent._.children = this._.parent._.children.filter((unit) => unit !== this);
-        }
-    }
-    reboot() {
-        let anchor = null;
-        if (this._.nestElements[0] && this._.nestElements[0].owned === true) {
-            anchor = this._.nestElements[0].element.nextElementSibling;
-        }
-        Unit.stop(this);
-        Unit.finalize(this);
-        Unit.initialize(this, anchor);
-    }
-    static initialize(unit, anchor) {
-        const backup = Unit.currentUnit;
-        Unit.currentUnit = unit;
-        const done = {
-            promise: null,
-            resolve: null,
-            reject: null
-        };
-        done.promise = new Promise((resolve, reject) => { done.resolve = resolve; done.reject = reject; });
-        unit._ = Object.assign(unit._, {
-            currentElement: unit._.baseElement,
-            currentContext: unit._.baseContext,
-            currentComponent: null,
-            anchor,
-            state: 'invoked',
-            tostart: true,
-            protected: false,
-            ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
-            children: [],
-            nestElements: [],
-            promises: [],
-            done,
-            components: [],
-            listeners: new MapMap(),
-            defines: {},
-            systems: { start: [], update: [], render: [], stop: [], finalize: [] },
-            eventor: new Eventor(),
-        });
-        // nest html element
-        if (typeof unit._.target === 'string') {
-            Unit.nest(unit, unit._.target);
-        }
-        // setup component
-        Unit.extend(unit, unit._.baseComponent, unit._.props);
-        // whether the unit promise was resolved
-        // Promise.all(unit._.promises.map(p => p.promise)).then(() => unit._.state = 'initialized');
-        unit._.state = 'initialized';
-        Unit.currentUnit = backup;
     }
     static finalize(unit) {
         if (unit._.state !== 'finalized' && unit._.state !== 'finalizing') {
             unit._.state = 'finalizing';
-            [...unit._.children].reverse().forEach((child) => child.finalize());
-            [...unit._.systems.finalize].reverse().forEach(({ execute }) => execute());
+            unit._.children.reverse().forEach((child) => child.finalize());
+            unit._.systems.finalize.reverse().forEach(({ execute }) => execute());
             unit.off();
-            unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
-            for (const { element, owned } of unit._.nestElements.reverse()) {
-                if (owned === true) {
-                    element.remove();
+            unit._.nestElements.reverse().filter(item => item.owned).forEach(item => item.element.remove());
+            unit._.Components.forEach((Component) => Unit.component2units.delete(Component, unit));
+            // remove contexts
+            const contexts = Unit.unit2Contexts.get(unit);
+            contexts === null || contexts === void 0 ? void 0 : contexts.forEach((context) => {
+                let temp = context.previous;
+                while (temp !== null) {
+                    if (contexts.has(temp) === false && temp.key !== undefined) {
+                        context.previous = temp;
+                        context.key = undefined;
+                        context.value = undefined;
+                        break;
+                    }
+                    temp = temp.previous;
                 }
-            }
-            unit._.currentElement = unit._.baseElement;
-            // reset defines
+            });
+            Unit.unit2Contexts.delete(unit);
+            unit._.currentContext = { previous: null };
             Object.keys(unit._.defines).forEach((key) => {
                 delete unit[key];
             });
             unit._.defines = {};
             unit._.state = 'finalized';
+            if (unit._.parent) {
+                unit._.parent._.children = unit._.parent._.children.filter((u) => u !== unit);
+            }
         }
     }
     static nest(unit, target, textContent) {
@@ -724,16 +634,8 @@ class Unit {
         else {
             const match = target.match(/<((\w+)[^>]*?)\/?>/);
             if (match !== null) {
-                let element;
-                if (unit._.anchor !== null) {
-                    unit._.anchor.insertAdjacentHTML('beforebegin', `<${match[1]}></${match[2]}>`);
-                    element = unit._.anchor.previousElementSibling;
-                    unit._.anchor = null;
-                }
-                else {
-                    unit._.currentElement.insertAdjacentHTML('beforeend', `<${match[1]}></${match[2]}>`);
-                    element = unit._.currentElement.children[unit._.currentElement.children.length - 1];
-                }
+                unit._.currentElement.insertAdjacentHTML('beforeend', `<${match[1]}></${match[2]}>`);
+                const element = unit._.currentElement.children[unit._.currentElement.children.length - 1];
                 unit._.currentElement = element;
                 if (textContent !== undefined) {
                     element.textContent = textContent.toString();
@@ -748,25 +650,20 @@ class Unit {
     }
     static extend(unit, Component, props) {
         var _a;
-        if (unit._.components.includes(Component) === true) {
-            throw new Error(`The component is already extended.`);
+        if (unit._.Components.includes(Component) === true) {
+            throw new Error(`The Component is already extended.`);
         }
         else {
             const backupComponent = unit._.currentComponent;
             unit._.currentComponent = Component;
-            const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
-            if (unit._.parent && Component !== DefaultComponent) {
-                if (Component === unit._.baseComponent) {
-                    Unit.context(unit._.parent, Component, unit);
-                }
-                else {
-                    Unit.context(unit, Component, unit);
-                    Unit.context(unit._.parent, Component, unit);
-                }
+            if (unit._.parent !== null) {
+                Unit.addContext(unit._.parent, unit, Component, unit);
             }
+            Unit.addContext(unit, unit, Component, unit);
+            const defines = (_a = Component(unit, props !== null && props !== void 0 ? props : {})) !== null && _a !== void 0 ? _a : {};
             unit._.currentComponent = backupComponent;
             Unit.component2units.add(Component, unit);
-            unit._.components.push(Component);
+            unit._.Components.push(Component);
             Object.keys(defines).forEach((key) => {
                 if (unit[key] !== undefined && unit._.defines[key] === undefined) {
                     throw new Error(`The property "${key}" already exists.`);
@@ -784,7 +681,7 @@ class Unit {
                     wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
                 }
                 else {
-                    throw new Error(`Only function properties can be defined as component defines. [${key}]`);
+                    throw new Error(`Only function properties can be defined as Component defines. [${key}]`);
                 }
                 Object.defineProperty(unit._.defines, key, wrapper);
                 Object.defineProperty(unit, key, wrapper);
@@ -844,7 +741,7 @@ class Unit {
             Unit.currentUnit = snapshot.unit;
             snapshot.unit._.currentContext = snapshot.context;
             snapshot.unit._.currentElement = snapshot.element;
-            snapshot.unit._.currentComponent = snapshot.component;
+            snapshot.unit._.currentComponent = snapshot.Component;
             return func(...args);
         }
         catch (error) {
@@ -854,21 +751,22 @@ class Unit {
             Unit.currentUnit = currentUnit;
             snapshot.unit._.currentContext = backup.context;
             snapshot.unit._.currentElement = backup.element;
-            snapshot.unit._.currentComponent = backup.component;
+            snapshot.unit._.currentComponent = backup.Component;
         }
     }
     static snapshot(unit) {
-        return { unit, context: unit._.currentContext, element: unit._.currentElement, component: unit._.currentComponent };
+        return { unit, context: unit._.currentContext, element: unit._.currentElement, Component: unit._.currentComponent };
     }
-    static context(unit, key, value) {
-        if (value !== undefined) {
-            unit._.currentContext = { stack: unit._.currentContext, key, value };
-        }
-        else {
-            for (let context = unit._.currentContext; context.stack !== null; context = context.stack) {
-                if (context.key === key)
-                    return context.value;
-            }
+    static addContext(unit, orner, key, value) {
+        unit._.currentContext = { previous: unit._.currentContext, key, value };
+        Unit.unit2Contexts.add(orner, unit._.currentContext);
+    }
+    static getContext(unit, key) {
+        for (let context = unit._.currentContext; context.previous !== null; context = context.previous) {
+            if (context.value === Unit.currentUnit && key === Unit.currentUnit._.currentComponent)
+                continue;
+            if (context.key === key)
+                return context.value;
         }
     }
     static find(Component) {
@@ -892,7 +790,7 @@ class Unit {
             unit._.systems[type].push({ listener, execute });
         }
         if (unit._.listeners.has(type, listener) === false) {
-            unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
+            unit._.listeners.set(type, listener, { element: unit.element, Component: unit._.currentComponent, execute });
             Unit.type2units.add(type, unit);
             if (/^[A-Za-z]/.test(type)) {
                 unit._.eventor.add(unit.element, type, execute, options);
@@ -934,11 +832,90 @@ class Unit {
     }
 }
 Unit.currentComponent = () => { };
+Unit.unit2Contexts = new MapSet();
 Unit.component2units = new MapSet();
 //----------------------------------------------------------------------------------------------------
 // event
 //----------------------------------------------------------------------------------------------------
 Unit.type2units = new MapSet();
+//----------------------------------------------------------------------------------------------------
+// extensions
+//----------------------------------------------------------------------------------------------------
+class UnitPromise {
+    constructor(promise, Component) {
+        this.promise = promise;
+        this.Component = Component;
+    }
+    then(callback) { return this.wrap('then', callback); }
+    catch(callback) { return this.wrap('catch', callback); }
+    finally(callback) { return this.wrap('finally', callback); }
+    wrap(key, callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise[key]((...args) => Unit.scope(snapshot, callback, ...args));
+        return this;
+    }
+}
+class UnitTimer {
+    constructor() {
+        this.unit = null;
+        this.queue = [];
+    }
+    clear() {
+        var _a;
+        this.queue = [];
+        (_a = this.unit) === null || _a === void 0 ? void 0 : _a.finalize();
+        this.unit = null;
+    }
+    timeout(callback, duration = 0) {
+        return UnitTimer.execute(this, { callback, duration }, 1);
+    }
+    interval(callback, duration = 0, iterations = 0) {
+        return UnitTimer.execute(this, { callback, duration }, iterations);
+    }
+    transition(transition, duration = 0, easing) {
+        return UnitTimer.execute(this, { transition, duration, easing }, 1);
+    }
+    static execute(timer, options, iterations) {
+        const props = { options, iterations, snapshot: Unit.snapshot(Unit.currentUnit) };
+        if (timer.unit === null || timer.unit._.state === 'finalized') {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, props);
+        }
+        else if (timer.queue.length === 0) {
+            timer.queue.push(props);
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+        else {
+            timer.queue.push(props);
+        }
+        return timer;
+    }
+    static next(timer) {
+        if (timer.queue.length > 0) {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.queue.shift());
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+    }
+    static Component(unit, { options, iterations, snapshot }) {
+        let counter = 0;
+        let timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
+        function callback() {
+            if (options.callback)
+                Unit.scope(snapshot, options.callback);
+            if (iterations <= 0 || counter < iterations - 1) {
+                timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
+            }
+            else {
+                unit.finalize();
+            }
+            counter++;
+        }
+        function transition(value) {
+            if (options.transition)
+                Unit.scope(snapshot, options.transition, { value });
+        }
+        unit.on('finalize', () => timer.clear());
+    }
+}
 
 const xnew$1 = Object.assign(function (...args) {
     if (Unit.rootUnit === undefined)
@@ -955,7 +932,8 @@ const xnew$1 = Object.assign(function (...args) {
     }
     const Component = args.shift();
     const props = args.shift();
-    return new Unit(Unit.currentUnit, target, Component, props);
+    const unit = new Unit(Unit.currentUnit, target, Component, props);
+    return unit;
 }, {
     /**
      * Creates a nested HTML/SVG element within the current component
@@ -992,7 +970,8 @@ const xnew$1 = Object.assign(function (...args) {
             if (Unit.currentUnit._.state !== 'invoked') {
                 throw new Error('xnew.extend can not be called after initialized.');
             }
-            return Unit.extend(Unit.currentUnit, Component, props);
+            const defines = Unit.extend(Unit.currentUnit, Component, props);
+            return defines;
         }
         catch (error) {
             console.error('xnew.extend(component: Function, props?: Object): ', error);
@@ -1001,7 +980,7 @@ const xnew$1 = Object.assign(function (...args) {
     },
     /**
      * Gets a context value that can be accessed in follow context
-     * @param component - component function
+     * @param key - component function
      * @returns The context value
      * @example
      * // Create unit
@@ -1011,12 +990,12 @@ const xnew$1 = Object.assign(function (...args) {
      * // Get context in child
      * const a = xnew.context(A)
      */
-    context(component) {
+    context(key) {
         try {
-            return Unit.context(Unit.currentUnit, component);
+            return Unit.getContext(Unit.currentUnit, key);
         }
         catch (error) {
-            console.error('xnew.context(component: Function): ', error);
+            console.error('xnew.context(key: any): ', error);
             throw error;
         }
     },
@@ -1029,16 +1008,17 @@ const xnew$1 = Object.assign(function (...args) {
      */
     promise(promise) {
         try {
-            const component = Unit.currentUnit._.currentComponent;
+            const Component = Unit.currentUnit._.currentComponent;
             let unitPromise;
             if (promise instanceof Unit) {
-                unitPromise = new UnitPromise(promise._.done.promise, component);
+                unitPromise = new UnitPromise(Promise.all(promise._.promises.map(p => p.promise)), Component)
+                    .then(() => promise._.results);
             }
             else if (promise instanceof Promise) {
-                unitPromise = new UnitPromise(promise, component);
+                unitPromise = new UnitPromise(promise, Component);
             }
             else {
-                unitPromise = new UnitPromise(new Promise(xnew$1.scope(promise)), component);
+                unitPromise = new UnitPromise(new Promise(xnew$1.scope(promise)), Component);
             }
             Unit.currentUnit._.promises.push(unitPromise);
             return unitPromise;
@@ -1057,12 +1037,9 @@ const xnew$1 = Object.assign(function (...args) {
      */
     then(callback) {
         try {
-            const Component = Unit.currentUnit._.currentComponent;
-            const promises = Unit.currentUnit._.promises;
-            return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
-                .then((results) => {
-                callback(results.filter((_, index) => promises[index].Component !== null && promises[index].Component === Component));
-            });
+            const currentUnit = Unit.currentUnit;
+            return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
+                .then(() => callback(currentUnit._.results));
         }
         catch (error) {
             console.error('xnew.then(callback: Function): ', error);
@@ -1078,8 +1055,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     catch(callback) {
         try {
-            const promises = Unit.currentUnit._.promises;
-            return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
+            return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
                 .catch(callback);
         }
         catch (error) {
@@ -1088,36 +1064,18 @@ const xnew$1 = Object.assign(function (...args) {
         }
     },
     /**
-     * Resolves the current unit's promise with the given value
-     * @param value - Value to resolve the promise with
+     * Commits a value to the current unit's promise results
+     * @param object - object to commit to the promise
      * @returns void
      * @example
-     * xnew.resolve('data');
+     * xnew.commit({ data: 123});
      */
-    resolve(value) {
+    commit(object) {
         try {
-            const done = Unit.currentUnit._.done;
-            done.resolve(value);
+            Object.assign(Unit.currentUnit._.results, object);
         }
         catch (error) {
-            console.error('xnew.resolve(value?: any): ', error);
-            throw error;
-        }
-    },
-    /**
-     * Rejects the current unit's promise with the given reason
-     * @param reason - Reason to reject the promise
-     * @returns void
-     * @example
-     * xnew.reject(new Error('Something went wrong'));
-     */
-    reject(reason) {
-        try {
-            const done = Unit.currentUnit._.done;
-            done.reject(reason);
-        }
-        catch (error) {
-            console.error('xnew.reject(reason?: any): ', error);
+            console.error('xnew.commit(object?: Record<string, any>): ', error);
             throw error;
         }
     },
@@ -1130,8 +1088,7 @@ const xnew$1 = Object.assign(function (...args) {
      */
     finally(callback) {
         try {
-            const promises = Unit.currentUnit._.promises;
-            return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
+            return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
                 .finally(callback);
         }
         catch (error) {
@@ -1154,19 +1111,19 @@ const xnew$1 = Object.assign(function (...args) {
     },
     /**
      * Finds all instances of a component in the component tree
-     * @param component - Component function to search for
+     * @param Component - Component function to search for
      * @returns Array of Unit instances matching the component
      * @throws Error if component parameter is invalid
      * @example
      * const buttons = xnew.find(ButtonComponent)
      * buttons.forEach(btn => btn.finalize())
      */
-    find(component) {
+    find(Component) {
         try {
-            return Unit.find(component);
+            return Unit.find(Component);
         }
         catch (error) {
-            console.error('xnew.find(component: Function): ', error);
+            console.error('xnew.find(Component: Function): ', error);
             throw error;
         }
     },
@@ -1422,13 +1379,13 @@ function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity =
 
 const currentColorA = 'color-mix(in srgb, currentColor 70%, transparent)';
 const currentColorB = 'color-mix(in srgb, currentColor 10%, transparent)';
-function Panel(unit, { name, open = false, params }) {
+function Panel(unit, { params }) {
     const object = params !== null && params !== void 0 ? params : {};
-    xnew$1.extend(Group, { name, open });
     return {
         group({ name, open, params }, inner) {
             const group = xnew$1((unit) => {
-                xnew$1.extend(Panel, { name, open, params: params !== null && params !== void 0 ? params : object });
+                xnew$1.extend(Group, { name, open });
+                xnew$1.extend(Panel, { params: params !== null && params !== void 0 ? params : object });
                 inner(unit);
             });
             return group;
@@ -1437,23 +1394,23 @@ function Panel(unit, { name, open = false, params }) {
             const button = xnew$1(Button, { key });
             return button;
         },
-        select(key, { options = [] } = {}) {
+        select(key, { value, items = [] } = {}) {
             var _a, _b;
-            object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options[0]) !== null && _b !== void 0 ? _b : '';
-            const select = xnew$1(Select, { key, value: object[key], options });
+            object[key] = (_b = (_a = value !== null && value !== void 0 ? value : object[key]) !== null && _a !== void 0 ? _a : items[0]) !== null && _b !== void 0 ? _b : '';
+            const select = xnew$1(Select, { key, value: object[key], items });
             select.on('input', ({ value }) => object[key] = value);
             return select;
         },
-        range(key, options = {}) {
-            var _a, _b;
-            object[key] = (_b = (_a = object[key]) !== null && _a !== void 0 ? _a : options.min) !== null && _b !== void 0 ? _b : 0;
-            const number = xnew$1(Range, Object.assign({ key, value: object[key] }, options));
+        range(key, { value, min = 0, max = 100, step = 1 } = {}) {
+            var _a;
+            object[key] = (_a = value !== null && value !== void 0 ? value : object[key]) !== null && _a !== void 0 ? _a : min;
+            const number = xnew$1(Range, { key, value: object[key], min, max, step });
             number.on('input', ({ value }) => object[key] = value);
             return number;
         },
-        checkbox(key) {
+        checkbox(key, { value } = {}) {
             var _a;
-            object[key] = (_a = object[key]) !== null && _a !== void 0 ? _a : false;
+            object[key] = (_a = value !== null && value !== void 0 ? value : object[key]) !== null && _a !== void 0 ? _a : false;
             const checkbox = xnew$1(Checkbox, { key, value: object[key] });
             checkbox.on('input', ({ value }) => object[key] = value);
             return checkbox;
@@ -1470,7 +1427,7 @@ function Group(group, { name, open = false }) {
             unit.on('click', () => group.toggle());
             xnew$1('<svg viewBox="0 0 12 12" style="width: 1em; height: 1em; margin-right: 0.25em;" fill="none" stroke="currentColor">', (unit) => {
                 xnew$1('<path d="M6 2 10 6 6 10" />');
-                group.on('-transition', ({ state }) => unit.element.style.transform = `rotate(${state * 90}deg)`);
+                group.on('-transition', ({ value }) => unit.element.style.transform = `rotate(${value * 90}deg)`);
             });
             xnew$1('<div>', name);
         });
@@ -1537,14 +1494,14 @@ function Checkbox(unit, { key = '', value } = {}) {
         update(value);
     });
 }
-function Select(_, { key = '', value, options = [] } = {}) {
+function Select(_, { key = '', value, items = [] } = {}) {
     var _a;
-    const initial = (_a = value !== null && value !== void 0 ? value : options[0]) !== null && _a !== void 0 ? _a : '';
+    const initial = (_a = value !== null && value !== void 0 ? value : items[0]) !== null && _a !== void 0 ? _a : '';
     xnew$1.nest(`<div style="position: relative; height: 2em; margin: 0.125em 0; padding: 0 0.5em; display: flex; align-items: center;">`);
     xnew$1('<div style="flex: 1;">', key);
     const native = xnew$1(`<select name="${key}" style="display: none;">`, () => {
-        for (const option of options) {
-            xnew$1(`<option value="${option}" ${option === initial ? 'selected' : ''}>`, option);
+        for (const item of items) {
+            xnew$1(`<option value="${item}" ${item === initial ? 'selected' : ''}>`, item);
         }
     });
     const button = xnew$1(`<div style="height: 2em; padding: 0 1.5em 0 0.5em; display: flex; align-items: center; border: 1px solid ${currentColorA}; border-radius: 0.25em; cursor: pointer; user-select: none; min-width: 3em; white-space: nowrap;">`, initial);
@@ -1564,13 +1521,13 @@ function Select(_, { key = '', value, options = [] } = {}) {
             });
             xnew$1.extend(Accordion);
             xnew$1.nest(`<div style="position: relative; border: 1px solid ${currentColorA}; border-radius: 0.25em; overflow: hidden;">`);
-            for (const option of options) {
-                const item = xnew$1(`<div style="height: 2em; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`, option);
-                item.on('pointerover', () => item.element.style.background = currentColorB);
-                item.on('pointerout', () => item.element.style.background = '');
-                item.on('click', () => {
-                    button.element.textContent = option;
-                    native.element.value = option;
+            for (const item of items) {
+                const div = xnew$1(`<div style="height: 2em; padding: 0 0.5em; display: flex; align-items: center; cursor: pointer; user-select: none;">`, item);
+                div.on('pointerover', () => div.element.style.background = currentColorB);
+                div.on('pointerout', () => div.element.style.background = '');
+                div.on('click', () => {
+                    button.element.textContent = item;
+                    native.element.value = item;
                     native.element.dispatchEvent(new Event('input', { bubbles: false }));
                     list.finalize();
                 });
@@ -1593,6 +1550,24 @@ function Select(_, { key = '', value, options = [] } = {}) {
     }
 }
 
+function Flow(unit) {
+    let scene = null;
+    return {
+        set scene(value) {
+            scene = value;
+        },
+        get scene() {
+            return scene;
+        },
+        next(Component, props) {
+            var _a;
+            // scene change
+            (_a = unit.scene) === null || _a === void 0 ? void 0 : _a.finalize();
+            unit.scene = xnew$1(Component, props);
+        }
+    };
+}
+
 const context = new window.AudioContext();
 const master = context.createGain();
 //----------------------------------------------------------------------------------------------------
@@ -1825,6 +1800,7 @@ const basics = {
     Panel,
     Accordion,
     Popup,
+    Flow,
 };
 const audio = {
     load(path) {