@mulsense/xnew 0.6.6 → 0.6.8

package/dist/addons/xpixi.js

@@ -52,7 +52,7 @@
         })).then((value) => {
             renderer = value;
         });
-        let scene = new PIXI__namespace.Container();
+        const scene = new PIXI__namespace.Container();
         return {
             get renderer() { return renderer; },
             get scene() { return scene; },

package/dist/addons/xpixi.mjs

@@ -30,7 +30,7 @@ function Root(unit, { canvas }) {
     })).then((value) => {
         renderer = value;
     });
-    let scene = new PIXI.Container();
+    const scene = new PIXI.Container();
     return {
         get renderer() { return renderer; },
         get scene() { return scene; },

package/dist/xnew.d.ts

@@ -57,16 +57,21 @@ interface Snapshot {
 }
 interface Internal {
     parent: Unit | null;
+    ancestors: Unit[];
+    children: Unit[];
     state: string;
     tostart: boolean;
     protected: boolean;
+    promises: UnitPromise[];
+    results: Record<string, any>;
+    defines: Record<string, any>;
+    systems: Record<string, {
+        listener: Function;
+        execute: Function;
+    }[]>;
     currentElement: UnitElement;
     currentContext: Context;
     currentComponent: Function | null;
-    ancestors: Unit[];
-    children: Unit[];
-    promises: UnitPromise[];
-    results: Record<string, any>;
     nestElements: {
         element: UnitElement;
         owned: boolean;
@@ -77,11 +82,6 @@ interface Internal {
         Component: Function | null;
         execute: Function;
     }>;
-    defines: Record<string, any>;
-    systems: Record<string, {
-        listener: Function;
-        execute: Function;
-    }[]>;
     eventor: Eventor;
 }
 declare class Unit {
@@ -179,10 +179,13 @@ declare function Accordion(unit: Unit): void;
 declare function Popup(unit: Unit): void;
 
 type ScreenFit = 'contain' | 'cover';
-declare function Screen(unit: Unit, { aspect, fit }?: {
-    aspect?: number;
+declare function Screen(unit: Unit, { width, height, fit }?: {
+    width?: number;
+    height?: number;
     fit?: ScreenFit;
-}): void;
+}): {
+    readonly canvas: UnitElement;
+};
 
 declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
     stroke?: string;
@@ -208,7 +211,7 @@ interface PanelOptions {
     open?: boolean;
     params?: Record<string, any>;
 }
-declare function Panel(unit: Unit, { name, open, params }: PanelOptions): {
+declare function Panel(unit: Unit, { params }: PanelOptions): {
     group({ name, open, params }: PanelOptions, inner: Function): Unit;
     button(key: string): Unit;
     select(key: string, { value, items }?: {
@@ -227,6 +230,12 @@ declare function Panel(unit: Unit, { name, open, params }: PanelOptions): {
     separator(): void;
 };
 
+declare function Flow(unit: Unit): {
+    get scene(): Unit | null;
+    set scene(value: Unit);
+    next(Component: Function, props?: any): void;
+};
+
 type SynthesizerOptions = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;
@@ -276,15 +285,14 @@ declare const xnew: CreateUnit & {
     extend(Component: Function, props?: Object): {
         [key: string]: any;
     };
-    context(component: Function): any;
+    context(key: any): any;
     promise(promise: Function | Promise<any> | Unit): UnitPromise;
     then(callback: Function): UnitPromise;
     catch(callback: Function): UnitPromise;
-    resolve(value?: any): void;
-    reject(reason?: any): void;
+    commit(object?: Record<string, any>): void;
     finally(callback: Function): UnitPromise;
     scope(callback: any): any;
-    find(component: Function): Unit[];
+    find(Component: Function): Unit[];
     emit(type: string, ...args: any[]): void;
     timeout(callback: Function, duration?: number): UnitTimer;
     interval(callback: Function, duration: number, iterations?: number): UnitTimer;
@@ -299,6 +307,7 @@ declare const xnew: CreateUnit & {
         Panel: typeof Panel;
         Accordion: typeof Accordion;
         Popup: typeof Popup;
+        Flow: typeof Flow;
     };
     audio: {
         load(path: string): UnitPromise;

package/dist/xnew.js

@@ -621,7 +621,6 @@
                 });
                 Unit.unit2Contexts.delete(unit);
                 unit._.currentContext = { previous: null };
-                // reset defines
                 Object.keys(unit._.defines).forEach((key) => {
                     delete unit[key];
                 });
@@ -663,6 +662,10 @@
             else {
                 const backupComponent = unit._.currentComponent;
                 unit._.currentComponent = Component;
+                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);
@@ -766,6 +769,8 @@
         }
         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;
             }
@@ -934,7 +939,6 @@
         const Component = args.shift();
         const props = args.shift();
         const unit = new Unit(Unit.currentUnit, target, Component, props);
-        Unit.addContext(Unit.currentUnit, unit, Component, unit);
         return unit;
     }, {
         /**
@@ -973,7 +977,6 @@
                     throw new Error('xnew.extend can not be called after initialized.');
                 }
                 const defines = Unit.extend(Unit.currentUnit, Component, props);
-                Unit.addContext(Unit.currentUnit, Unit.currentUnit, Component, Unit.currentUnit);
                 return defines;
             }
             catch (error) {
@@ -1014,9 +1017,8 @@
                 const Component = Unit.currentUnit._.currentComponent;
                 let unitPromise;
                 if (promise instanceof Unit) {
-                    const unit = promise;
-                    unitPromise = new UnitPromise(Promise.all(unit._.promises.map(p => p.promise)), Component)
-                        .then(() => unit._.results);
+                    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);
@@ -1042,12 +1044,8 @@
         then(callback) {
             try {
                 const currentUnit = Unit.currentUnit;
-                const Component = Unit.currentUnit._.currentComponent;
-                const promises = Unit.currentUnit._.promises;
-                return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
-                    .then(() => {
-                    callback(currentUnit._.results);
-                });
+                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);
@@ -1063,8 +1061,7 @@
          */
         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) {
@@ -1073,18 +1070,18 @@
             }
         },
         /**
-         * Assigns a value to the current unit's promise
-         * @param object - object to assign to the promise
+         * Commits a value to the current unit's promise results
+         * @param object - object to commit to the promise
          * @returns void
          * @example
-         * xnew.assign({ data: 123});
+         * xnew.commit({ data: 123});
          */
-        assign(object) {
+        commit(object) {
             try {
                 Object.assign(Unit.currentUnit._.results, object);
             }
             catch (error) {
-                console.error('xnew.assign(object?: Record<string, any>): ', error);
+                console.error('xnew.commit(object?: Record<string, any>): ', error);
                 throw error;
             }
         },
@@ -1097,8 +1094,7 @@
          */
         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) {
@@ -1266,7 +1262,8 @@
         });
     }
 
-    function Screen(unit, { aspect, fit = 'contain' } = {}) {
+    function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
+        const aspect = width / height;
         xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
         xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
         if (fit === 'contain') {
@@ -1276,6 +1273,10 @@
             unit.element.style.flexShrink = '0';
             unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
         }
+        const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
+        return {
+            get canvas() { return canvas.element; }
+        };
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1284,14 +1285,14 @@
     function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
         xnew$1.nest(`<svg
         viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; user-select: none;
+        style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
         stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
     ">`);
     }
     function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
         xnew$1((unit) => {
             xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
             xnew$1('<polygon points="32  7 27 13 37 13">');
@@ -1327,7 +1328,7 @@
     }
     function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
         const polygons = [
             '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
             '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1389,13 +1390,13 @@
 
     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,7 +1438,7 @@
                 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);
             });
@@ -1560,6 +1561,24 @@
         }
     }
 
+    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();
     //----------------------------------------------------------------------------------------------------
@@ -1792,6 +1811,7 @@
         Panel,
         Accordion,
         Popup,
+        Flow,
     };
     const audio = {
         load(path) {

package/dist/xnew.mjs

@@ -615,7 +615,6 @@ class Unit {
             });
             Unit.unit2Contexts.delete(unit);
             unit._.currentContext = { previous: null };
-            // reset defines
             Object.keys(unit._.defines).forEach((key) => {
                 delete unit[key];
             });
@@ -657,6 +656,10 @@ class Unit {
         else {
             const backupComponent = unit._.currentComponent;
             unit._.currentComponent = Component;
+            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);
@@ -760,6 +763,8 @@ class Unit {
     }
     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;
         }
@@ -928,7 +933,6 @@ const xnew$1 = Object.assign(function (...args) {
     const Component = args.shift();
     const props = args.shift();
     const unit = new Unit(Unit.currentUnit, target, Component, props);
-    Unit.addContext(Unit.currentUnit, unit, Component, unit);
     return unit;
 }, {
     /**
@@ -967,7 +971,6 @@ const xnew$1 = Object.assign(function (...args) {
                 throw new Error('xnew.extend can not be called after initialized.');
             }
             const defines = Unit.extend(Unit.currentUnit, Component, props);
-            Unit.addContext(Unit.currentUnit, Unit.currentUnit, Component, Unit.currentUnit);
             return defines;
         }
         catch (error) {
@@ -1008,9 +1011,8 @@ const xnew$1 = Object.assign(function (...args) {
             const Component = Unit.currentUnit._.currentComponent;
             let unitPromise;
             if (promise instanceof Unit) {
-                const unit = promise;
-                unitPromise = new UnitPromise(Promise.all(unit._.promises.map(p => p.promise)), Component)
-                    .then(() => unit._.results);
+                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);
@@ -1036,12 +1038,8 @@ const xnew$1 = Object.assign(function (...args) {
     then(callback) {
         try {
             const currentUnit = Unit.currentUnit;
-            const Component = Unit.currentUnit._.currentComponent;
-            const promises = Unit.currentUnit._.promises;
-            return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
-                .then(() => {
-                callback(currentUnit._.results);
-            });
+            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);
@@ -1057,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) {
@@ -1067,18 +1064,18 @@ const xnew$1 = Object.assign(function (...args) {
         }
     },
     /**
-     * Assigns a value to the current unit's promise
-     * @param object - object to assign to the promise
+     * Commits a value to the current unit's promise results
+     * @param object - object to commit to the promise
      * @returns void
      * @example
-     * xnew.assign({ data: 123});
+     * xnew.commit({ data: 123});
      */
-    assign(object) {
+    commit(object) {
         try {
             Object.assign(Unit.currentUnit._.results, object);
         }
         catch (error) {
-            console.error('xnew.assign(object?: Record<string, any>): ', error);
+            console.error('xnew.commit(object?: Record<string, any>): ', error);
             throw error;
         }
     },
@@ -1091,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) {
@@ -1260,7 +1256,8 @@ function Popup(unit) {
     });
 }
 
-function Screen(unit, { aspect, fit = 'contain' } = {}) {
+function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
+    const aspect = width / height;
     xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
     xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
     if (fit === 'contain') {
@@ -1270,6 +1267,10 @@ function Screen(unit, { aspect, fit = 'contain' } = {}) {
         unit.element.style.flexShrink = '0';
         unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
     }
+    const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
+    return {
+        get canvas() { return canvas.element; }
+    };
 }
 
 //----------------------------------------------------------------------------------------------------
@@ -1278,14 +1279,14 @@ function Screen(unit, { aspect, fit = 'contain' } = {}) {
 function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
     xnew$1.nest(`<svg
         viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; user-select: none;
+        style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
         stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
     ">`);
 }
 function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
     xnew$1((unit) => {
         xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
         xnew$1('<polygon points="32  7 27 13 37 13">');
@@ -1321,7 +1322,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
 }
 function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+    xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
     const polygons = [
         '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
         '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1383,13 +1384,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;
@@ -1431,7 +1432,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);
         });
@@ -1554,6 +1555,24 @@ function Select(_, { key = '', value, items = [] } = {}) {
     }
 }
 
+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();
 //----------------------------------------------------------------------------------------------------
@@ -1786,6 +1805,7 @@ const basics = {
     Panel,
     Accordion,
     Popup,
+    Flow,
 };
 const audio = {
     load(path) {

package/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.6.6",
+  "version": "0.6.8",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",