@peter.naydenov/cuts 1.0.0

package/Changelog.md

@@ -0,0 +1,7 @@
+# Release History
+
+
+### 1.0.0 (2024-05-08)
+- [x] Initial release;
+
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Peter Naydenov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Migration.guide.md

@@ -0,0 +1 @@
+# Migration Guides

package/README.md

@@ -0,0 +1,94 @@
+# Cuts (@peter.naydenov/cuts)
+
+![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/peterNaydenov/cuts/main)
+![GitHub License](https://img.shields.io/github/license/peterNaydenov/cuts)
+![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%40peter.naydenov%2Fcuts)
+
+
+In filmmaking, a change of scene is typically referred to as a "**cut**". Cuts are an essential part of film editing and are used to create a cohesive narrative by connecting different scenes together.
+
+Let's define SPA application as a set of scenes (pages/visual states) and each scene discribes a visual elements on the page and possible user interaction ( mouse, keyboard, etc.). **Cuts** controls the flow among scenes in SPA application.
+
+When all interactions can be described in the **Scene** data models, means that the components (react,vue, svelte or any other framework) can be used as simple template engines - to render only html.
+
+
+
+
+## Installation
+
+```
+npm install @peter.naydenov/cuts
+```
+
+
+
+## Usage
+
+```js
+import cuts from '@peter.naydenov/cuts'
+
+const script = cuts ();
+
+script.setScenes () // provide list of Scenes to the app
+script.setDependencies () // add object to the "dependencies" object. This object will be passed to the Scene "show" method
+// script is ready to use
+script.show ({ scene : 'sceneName'}) // change the current Scene
+
+```
+
+
+
+
+
+## Screen Cuts Methods Overview
+
+```js
+  setScenes       : 'Provide list of scenes to the app'
+, show            : 'Change the current scene'
+, hide            : 'Hide the current scene'
+, listScenes      : 'List of loaded Scene names'
+, listShortcuts   : 'List shortcuts per Scene. Provide the name of the Scene'
+, setDependencies : 'Add object to the "dependencies" object. This object will be passed to the Scene "show" method'
+, getDependencies : 'Returns the "dependencies" object'
+, enablePlugin    : 'Enable a shortcut plugin. Available after version 1.1.0'
+, disablePlugin   : 'Disable a shortcut plugin. Available after version 1.1.0'
+, emit            : 'Emit an event. Available after version 2.0.0'
+```
+
+
+
+## Scene
+
+Scene is a data model that describes how to render the scene and how the user will interact with it ( mouse, keyboard, etc.):
+
+```js
+{
+    show    // method. Returns a promise
+  , hide    // method. Returns a promise
+  , parents // list of parent Scene names.
+  // ... shortcuts for all user interactions with the screen ( mouse, keyboard, etc.)
+  // Shortcuts are implemented with @peter.naydenov/shortcuts
+}
+```
+
+
+Scenes can be `visible`(show) and `unvisible`(hide), also some scenes can be a child of another scene. Every scene can be treated as a visual state of the application. All provided to script `Scenes` are available on demand by calling them with a simple instruction `show({scene:sceneName})`. What should be visible and what should be unvisible is managed by the library.
+
+
+
+
+
+## Links
+- [History of changes](https://github.com/PeterNaydenov/cuts/blob/main/Changelog.md)
+- [Learn how shortcuts are implemented](https://github.com/PeterNaydenov/shortcuts)
+
+
+
+
+## Credits
+'@peter.naydenov/cuts' was created and supported by Peter Naydenov.
+
+
+
+## License
+'@peter.naydenov/cuts' is released under the [MIT License](http://opensource.org/licenses/MIT).

package/cypress.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    supportFile: false,
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});

package/dist/cuts.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@peter.naydenov/shortcuts"),n=require("ask-for-promise"),r=require("@peter.naydenov/log");function*t(e,n,r,t){let s=null;if(null===e)return yield*t.map((e=>[e,"show"])),void(yield[r,"show"]);if(!t||0===t.length)return n?(yield[e,"hide"],n.reverse(),yield*n.map((e=>[e,"hide"])),void(yield[r,"show"])):(yield[e,"hide"],void(yield[r,"show"]));if(t.includes(e)){for(let n=t.indexOf(e)+1;n<t.length;n++)yield[t[n],"show"];yield[r,"show"]}else{if(!n)return yield[e,"hide"],void(yield*t.map((e=>[e,"show"])));if(t.every(((e,r)=>n[r]===t[r]&&(s=r,!0))),null==s)return yield[e,"hide"],n.reverse(),yield*n.map((e=>[e,"hide"])),yield*t.map((e=>[e,"show"])),void(yield[r,"show"]);yield[e,"hide"];for(let e=n.length;e>s+1;e--)yield[n[e-1],"hide"];for(let e=s+1;e<t.length;e++)yield[t[e],"show"];yield[r,"show"]}}function s(e){return function(n,...r){const{askForPromise:t,deps:s}=e;return function(){const e=t();return n({task:e,dependencies:s()},...r),e.promise}}}var o={hide:function(e,n){return function(r=1){const{askForPromise:t,shortcutMngr:s,setInstruction:o}=e,{currentScene:i,currentParents:c,scenes:u}=n,l=t(),d=[],a=c.length>0;let h;return s.pause(),d.push(o(u[i].hide)),a||(n.currentScene=null),a&&"*"===r&&[...c].reverse().forEach((e=>{h=n.currentParents.pop(),n.currentScene=h,d.push(o(u[e].hide))})),a&&!["*",1].includes(r)&&c.slice("-"+(r-1)).reverse().map((e=>{h=n.currentParents.pop(),n.currentScene=h,d.push(o(u[e].hide))})),(r=t.sequence(d)).onComplete((()=>{s.changeContext(n.currentScene),l.done()})),l.promise}},listShortcuts:function(e,n){return function(e){const{scenes:r,sceneNames:t}=n;if(!t.has(e))return null;const{show:s,hide:o,parents:i,...c}=r[e];return Object.keys(c)}},setScenes:function(e,n){return function(r){const{shortcutMngr:t}=e;r.forEach((({name:e,scene:r})=>{r.parents||(r.parents=[]),n.scenes[e]=r,n.sceneNames.add(e);const{show:s,hide:o,parents:i,...c}=r,u={};u[e]=c,t.load(u)}))}},show:function(e,n){return function({scene:r,options:t={ssr:!1}},...s){const{shortcutMngr:o,askForPromise:i,log:c,findInstructions:u,setInstruction:l}=e,d=i(),{opened:a,scenes:h,sceneNames:p}=n;if(!p.has(r)&&c)return c({message:`Scene ${r} is not available.`,level:1,type:"error"}),d.done(),d.promise;if(!a&&t.ssr)return n.opened=!0,n.currentPage=r,o.changeContext(r),d.done(),d.promise;const{show:f,parents:m}=h[r];if("*"===m[0])return f().then((()=>d.done())),n.currentParents.push(n.currentPage),n.currentPage=r,d.promise;if(!(m.forEach((e=>p.has(e)))||!0))return c&&c({message:`Some of '${r}' parent scenes are not set.`,level:1,type:"error"}),d.done(),d.promise;function g([e,r]){if("show"===r)n.currentScene&&n.currentParents.push(n.currentScene),n.currentScene=e;else{let e=n.currentParents.pop();n.currentScene=e}return h[e][r]}n.currentParents||(n.currentParents=[]);const y=u(n.currentScene,n.currentParents,r,m),P=[];for(let e of y)[e].map(g).map((e=>P.push(l(e),...s)));return i.sequence(P).onComplete((()=>{n.opened=!0,o.changeContext(r),d.done()})),d.promise}}};module.exports=function(i={logLevel:0}){const c=e.shortcuts(),u=i.logLevel||0,l=r({level:u}),d={currentScene:null,currentParents:null,sceneNames:new Set,scenes:{},opened:!1},a={},h={},p={shortcutMngr:c,API:a,inAPI:h,findInstructions:t,askForPromise:n,setInstruction:s({askForPromise:n,deps:c.getDependencies}),log:l};return Object.entries(o).forEach((([e,n])=>{e.startsWith("_")?h[e]=n(p,d):a[e]=n(p,d)})),a.setDependencies=e=>c.setDependencies(e),a.getDependencies=()=>c.getDependencies(),a.setNote=n=>e.shortcuts.setNote(n),a.listScenes=()=>[...d.sceneNames],a.enablePlugin=(e,n)=>c.enablePlugin(e,n),a.disablePlugin=e=>c.disablePlugin(e),a.emit=(e,...n)=>c.emit(e,...n),a};

package/dist/cuts.esm.mjs

@@ -0,0 +1 @@
+import{shortcuts as e}from"@peter.naydenov/shortcuts";import n from"ask-for-promise";import r from"@peter.naydenov/log";function*t(e,n,r,t){let s=null;if(null===e)return yield*t.map((e=>[e,"show"])),void(yield[r,"show"]);if(!t||0===t.length)return n?(yield[e,"hide"],n.reverse(),yield*n.map((e=>[e,"hide"])),void(yield[r,"show"])):(yield[e,"hide"],void(yield[r,"show"]));if(t.includes(e)){for(let n=t.indexOf(e)+1;n<t.length;n++)yield[t[n],"show"];yield[r,"show"]}else{if(!n)return yield[e,"hide"],void(yield*t.map((e=>[e,"show"])));if(t.every(((e,r)=>n[r]===t[r]&&(s=r,!0))),null==s)return yield[e,"hide"],n.reverse(),yield*n.map((e=>[e,"hide"])),yield*t.map((e=>[e,"show"])),void(yield[r,"show"]);yield[e,"hide"];for(let e=n.length;e>s+1;e--)yield[n[e-1],"hide"];for(let e=s+1;e<t.length;e++)yield[t[e],"show"];yield[r,"show"]}}function s(e){return function(n,...r){const{askForPromise:t,deps:s}=e;return function(){const e=t();return n({task:e,dependencies:s()},...r),e.promise}}}var o={hide:function(e,n){return function(r=1){const{askForPromise:t,shortcutMngr:s,setInstruction:o}=e,{currentScene:i,currentParents:c,scenes:u}=n,l=t(),d=[],a=c.length>0;let h;return s.pause(),d.push(o(u[i].hide)),a||(n.currentScene=null),a&&"*"===r&&[...c].reverse().forEach((e=>{h=n.currentParents.pop(),n.currentScene=h,d.push(o(u[e].hide))})),a&&!["*",1].includes(r)&&c.slice("-"+(r-1)).reverse().map((e=>{h=n.currentParents.pop(),n.currentScene=h,d.push(o(u[e].hide))})),(r=t.sequence(d)).onComplete((()=>{s.changeContext(n.currentScene),l.done()})),l.promise}},listShortcuts:function(e,n){return function(e){const{scenes:r,sceneNames:t}=n;if(!t.has(e))return null;const{show:s,hide:o,parents:i,...c}=r[e];return Object.keys(c)}},setScenes:function(e,n){return function(r){const{shortcutMngr:t}=e;r.forEach((({name:e,scene:r})=>{r.parents||(r.parents=[]),n.scenes[e]=r,n.sceneNames.add(e);const{show:s,hide:o,parents:i,...c}=r,u={};u[e]=c,t.load(u)}))}},show:function(e,n){return function({scene:r,options:t={ssr:!1}},...s){const{shortcutMngr:o,askForPromise:i,log:c,findInstructions:u,setInstruction:l}=e,d=i(),{opened:a,scenes:h,sceneNames:p}=n;if(!p.has(r)&&c)return c({message:`Scene ${r} is not available.`,level:1,type:"error"}),d.done(),d.promise;if(!a&&t.ssr)return n.opened=!0,n.currentPage=r,o.changeContext(r),d.done(),d.promise;const{show:f,parents:m}=h[r];if("*"===m[0])return f().then((()=>d.done())),n.currentParents.push(n.currentPage),n.currentPage=r,d.promise;if(!(m.forEach((e=>p.has(e)))||!0))return c&&c({message:`Some of '${r}' parent scenes are not set.`,level:1,type:"error"}),d.done(),d.promise;function g([e,r]){if("show"===r)n.currentScene&&n.currentParents.push(n.currentScene),n.currentScene=e;else{let e=n.currentParents.pop();n.currentScene=e}return h[e][r]}n.currentParents||(n.currentParents=[]);const y=u(n.currentScene,n.currentParents,r,m),P=[];for(let e of y)[e].map(g).map((e=>P.push(l(e),...s)));return i.sequence(P).onComplete((()=>{n.opened=!0,o.changeContext(r),d.done()})),d.promise}}};function i(i={logLevel:0}){const c=e(),u=i.logLevel||0,l=r({level:u}),d={currentScene:null,currentParents:null,sceneNames:new Set,scenes:{},opened:!1},a={},h={},p={shortcutMngr:c,API:a,inAPI:h,findInstructions:t,askForPromise:n,setInstruction:s({askForPromise:n,deps:c.getDependencies}),log:l};return Object.entries(o).forEach((([e,n])=>{e.startsWith("_")?h[e]=n(p,d):a[e]=n(p,d)})),a.setDependencies=e=>c.setDependencies(e),a.getDependencies=()=>c.getDependencies(),a.setNote=n=>e.setNote(n),a.listScenes=()=>[...d.sceneNames],a.enablePlugin=(e,n)=>c.enablePlugin(e,n),a.disablePlugin=e=>c.disablePlugin(e),a.emit=(e,...n)=>c.emit(e,...n),a}export{i as default};

package/dist/cuts.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).cuts=t()}(this,(function(){"use strict";var e={_normalizeWithPlugins:function(e,t){return function(e){const n=t.shortcuts;Object.keys(n).forEach((t=>{Object.entries(n[t]).forEach((([r,o])=>{const s=e(r);s!==r&&(delete n[t][r],n[t][s]=o)}))}))}},_readShortcutWithPlugins:function(e,t){return function(n){const{inAPI:r}=e,o=n.split(":")[0],s=r._systemAction(o,"none");let c=n;return-1!==s&&(c=t.plugins[s].shortcutName(n)),c}},_systemAction:function(e,t){return function(e,n,r=null){return t.plugins.findIndex((t=>t.getPrefix()===e&&(t[n]&&t[n](r),!0)))}},changeContext:function(e,t){const{shortcuts:n,currentContext:r}=t,{ev:o}=e;return function(e=!1){const s=r.name;if(!e)return o.reset(),void(r.name=null);s!==e&&(n[e]?(n[s]&&o.reset(),r.name=e,t.plugins.forEach((t=>t.contextChange(e))),Object.entries(n[e]).forEach((([e,t])=>{t.forEach((t=>o.on(e,t)))})),o.on("*",((...e)=>{t.exposeShortcut&&t.exposeShortcut(...e)}))):o.emit("@shortcuts-error",`Context '${e}' does not exist`))}},listShortcuts:function(e,t){const n=t.shortcuts;return function(e=null){if(null!=e){let t=n[e];return null==t?null:Object.entries(t).map((([e,t])=>e))}return Object.keys(n).map((e=>{let t={};return t.context=e,t.shortcuts=Object.entries(n[e]).map((([e,t])=>e)),t}))}},load:function(e,t){const{shortcuts:n,plugins:r}=t,{API:{changeContext:o,getContext:s}}=e;return function(e){const t=s(),c=r.map((e=>e.getPrefix().toUpperCase()));let i=!1;Object.entries(e).forEach((([e,o])=>{e===t&&(i=!0),n[e]={},Object.entries(o).forEach((([t,o])=>{let s=t,i=t.toUpperCase().trim(),u=c.map(((e,t)=>i.startsWith(e)?t:null)).filter((e=>null!==e));if(u.length){let e=u[0];s=r[e].shortcutName(t)}o instanceof Function&&(o=[o]),n[e][s]=o}))})),i&&(o(),o(t))}},unload:function(e,t){const{currentContext:n,shortcuts:r}=t,{ev:o}=e;return function(e){n.name!==e?r[e]?delete r[e]:o.emit("shortcuts-error",`Context '${e}' does not exist`):o.emit("shortcuts-error",`Context '${e}' can't be removed during is current active context. Change the context first`)}}};function t(t={}){const n=new function(){let e={"*":[]},t={},n=[],r=!1,o="";return{on:function(t,n){e[t]||(e[t]=[]),e[t].push(n)},once:function(e,n){"*"!==e&&(t[e]||(t[e]=[]),t[e].push(n))},off:function(n,r){if(r)return e[n]&&(e[n]=e[n].filter((e=>e!==r))),t[n]&&(t[n]=t[n].filter((e=>e!==r))),e[n]&&0===e[n].length&&delete e[n],void(t[n]&&0===t[n].length&&delete e[n]);t[n]&&delete t[n],e[n]&&delete e[n]},reset:function(){e={"*":[]},t={},n=[]},emit:function(){const[s,...c]=arguments;function i(t){let r=!1;"*"!==t&&(n.includes(t)||(e[t].every((e=>{const t=e(...c);return"string"!=typeof t||"STOP"!==t.toUpperCase()||(r=!0,!1)})),r||e["*"].forEach((e=>e(s,...c)))))}if(r&&(console.log(`${o} Event "${s}" was triggered.`),c.length>0&&(console.log("Arguments:"),console.log(...c),console.log("^----"))),"*"!==s){if(t[s]){if(n.includes(s))return;t[s].forEach((e=>e(...c))),delete t[s]}e[s]&&i(s)}else Object.keys(e).forEach((e=>i(e)))},stop:function(r){if("*"!==r)n.push(r);else{const r=Object.keys(e),o=Object.keys(t);n=[...o,...r]}},start:function(e){n="*"!==e?n.filter((t=>e!=t)):[]},debug:function(e,t){r=!!e,t&&"string"==typeof t&&(o=t)}}},r={},o={},s={currentContext:{name:null,note:null},shortcuts:{},plugins:[],exposeShortcut:!(!t.onShortcut||"function"!=typeof t.onShortcut)&&t.onShortcut},c={ev:n,inAPI:r,API:o,extra:{}};return o.enablePlugin=(e,t={})=>{const n=e.name;if(-1===r._systemAction(n,"none")){let n;n=e(c,s,t),s.plugins.push(n)}},o.disablePlugin=e=>{const t=r._systemAction(e,"destroy");-1!==t&&(s.plugins=s.plugins.filter(((e,n)=>n!==t)))},o.mutePlugin=e=>r._systemAction(e,"mute"),o.unmutePlugin=e=>r._systemAction(e,"unmute"),o.getContext=()=>s.currentContext.name,o.getNote=()=>s.currentContext.note,o.setNote=(e=null)=>{"string"!=typeof e&&null!=e||(s.currentContext.note=e)},o.pause=(e="*")=>{let t=r._readShortcutWithPlugins(e);n.stop(t)},o.resume=(e="*")=>{const t=r._readShortcutWithPlugins(e);n.start(t)},o.emit=(e,...t)=>n.emit(r._readShortcutWithPlugins(e),...t),o.listContexts=()=>Object.keys(s.shortcuts),o.setDependencies=e=>c.extra={...c.extra,...e},o.getDependencies=()=>c.extra,Object.entries(e).forEach((([e,t])=>{e.startsWith("_")?r[e]=t(c,s):o[e]=t(c,s)})),o}function n(e){let t,n=!1;return e?(t=function(e){let t=e.map((e=>r())),n=t.map((e=>e.promise));return t.promises=n,t.onComplete=o(Promise.all(n)),t}(e),n=!0):t=r(),t.timeout=function(e,t){let n;return n=e?Promise.all(t.promises):t.promise,function(e,r){let s,c=new Promise(((t,o)=>{s=setTimeout((()=>{t(r),Promise.resolve(n)}),e)}));return n.then((()=>clearTimeout(s))),t.onComplete=o(Promise.race([n,c])),t}}(n,t),t}function r(){let e,t;const n=new Promise(((n,r)=>{e=n,t=r}));return{promise:n,done:e,cancel:t,onComplete:o(n)}}function o(e){return function(t){e.then((e=>t(e)))}}function s({message:e,level:t,type:n,logLevel:r}){if(0===r)return null;if(r<t)return null;const o=`[Debug]: ${e}`;switch(n){case"warn":console.warn(o);break;case"error":console.error(o);break;default:console.log(o)}return o}function c(e={},t=s){return function({message:n,type:r,level:o,...s}){const{level:c,type:i,defaultMessageLevel:u}=Object.assign({},{level:1e3,type:"log",defaultMessageLevel:1},e);return r||(r=i),o||(o=u),t({message:n,type:r,level:o,logLevel:c,...s})}}function*i(e,t,n,r){let o=null;if(null===e)return yield*r.map((e=>[e,"show"])),void(yield[n,"show"]);if(!r||0===r.length)return t?(yield[e,"hide"],t.reverse(),yield*t.map((e=>[e,"hide"])),void(yield[n,"show"])):(yield[e,"hide"],void(yield[n,"show"]));if(r.includes(e)){for(let t=r.indexOf(e)+1;t<r.length;t++)yield[r[t],"show"];yield[n,"show"]}else{if(!t)return yield[e,"hide"],void(yield*r.map((e=>[e,"show"])));if(r.every(((e,n)=>t[n]===r[n]&&(o=n,!0))),null==o)return yield[e,"hide"],t.reverse(),yield*t.map((e=>[e,"hide"])),yield*r.map((e=>[e,"show"])),void(yield[n,"show"]);yield[e,"hide"];for(let e=t.length;e>o+1;e--)yield[t[e-1],"hide"];for(let e=o+1;e<r.length;e++)yield[r[e],"show"];yield[n,"show"]}}function u(e){return function(t,...n){const{askForPromise:r,deps:o}=e;return function(){const e=r();return t({task:e,dependencies:o()},...n),e.promise}}}n.sequence=function(e,...t){const r=n(),o=[],s=function*(e){for(const t of e)yield t}(e);return function e(t,...n){t.done?r.done(o):t.value(...n).then((t=>{o.push(t),e(s.next(),...n,t)}))}(s.next(),...t),r},n.all=function(e,...t){const r=n(),o=[],s=e.map(((e,n)=>"function"==typeof e?e(...t).then((e=>o[n]=e)):e.then((e=>o[n]=e))));return Promise.all(s).then((()=>r.done(o))),r};var l={hide:function(e,t){return function(n=1){const{askForPromise:r,shortcutMngr:o,setInstruction:s}=e,{currentScene:c,currentParents:i,scenes:u}=t,l=r(),a=[],f=i.length>0;let h;return o.pause(),a.push(s(u[c].hide)),f||(t.currentScene=null),f&&"*"===n&&[...i].reverse().forEach((e=>{h=t.currentParents.pop(),t.currentScene=h,a.push(s(u[e].hide))})),f&&!["*",1].includes(n)&&i.slice("-"+(n-1)).reverse().map((e=>{h=t.currentParents.pop(),t.currentScene=h,a.push(s(u[e].hide))})),(n=r.sequence(a)).onComplete((()=>{o.changeContext(t.currentScene),l.done()})),l.promise}},listShortcuts:function(e,t){return function(e){const{scenes:n,sceneNames:r}=t;if(!r.has(e))return null;const{show:o,hide:s,parents:c,...i}=n[e];return Object.keys(i)}},setScenes:function(e,t){return function(n){const{shortcutMngr:r}=e;n.forEach((({name:e,scene:n})=>{n.parents||(n.parents=[]),t.scenes[e]=n,t.sceneNames.add(e);const{show:o,hide:s,parents:c,...i}=n,u={};u[e]=i,r.load(u)}))}},show:function(e,t){return function({scene:n,options:r={ssr:!1}},...o){const{shortcutMngr:s,askForPromise:c,log:i,findInstructions:u,setInstruction:l}=e,a=c(),{opened:f,scenes:h,sceneNames:d}=t;if(!d.has(n)&&i)return i({message:`Scene ${n} is not available.`,level:1,type:"error"}),a.done(),a.promise;if(!f&&r.ssr)return t.opened=!0,t.currentPage=n,s.changeContext(n),a.done(),a.promise;const{show:p,parents:m}=h[n];if("*"===m[0])return p().then((()=>a.done())),t.currentParents.push(t.currentPage),t.currentPage=n,a.promise;if(!(m.forEach((e=>d.has(e)))||!0))return i&&i({message:`Some of '${n}' parent scenes are not set.`,level:1,type:"error"}),a.done(),a.promise;function g([e,n]){if("show"===n)t.currentScene&&t.currentParents.push(t.currentScene),t.currentScene=e;else{let e=t.currentParents.pop();t.currentScene=e}return h[e][n]}t.currentParents||(t.currentParents=[]);const y=u(t.currentScene,t.currentParents,n,m),P=[];for(let e of y)[e].map(g).map((e=>P.push(l(e),...o)));return c.sequence(P).onComplete((()=>{t.opened=!0,s.changeContext(n),a.done()})),a.promise}}};return function(e={logLevel:0}){const r=t(),o=c({level:e.logLevel||0}),s={currentScene:null,currentParents:null,sceneNames:new Set,scenes:{},opened:!1},a={},f={},h={shortcutMngr:r,API:a,inAPI:f,findInstructions:i,askForPromise:n,setInstruction:u({askForPromise:n,deps:r.getDependencies}),log:o};return Object.entries(l).forEach((([e,t])=>{e.startsWith("_")?f[e]=t(h,s):a[e]=t(h,s)})),a.setDependencies=e=>r.setDependencies(e),a.getDependencies=()=>r.getDependencies(),a.setNote=e=>t.setNote(e),a.listScenes=()=>[...s.sceneNames],a.enablePlugin=(e,t)=>r.enablePlugin(e,t),a.disablePlugin=e=>r.disablePlugin(e),a.emit=(e,...t)=>r.emit(e,...t),a}}));

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="public/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>No demo yet!</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/main.js

@@ -0,0 +1,26 @@
+import './style.css'
+import javascriptLogo from './javascript.svg'
+import viteLogo from '/vite.svg'
+// import { setupCounter } from './counter.js'
+
+import top from './src/main.js'
+
+document.querySelector('#app').innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Vite!</h1>
+    <div class="card">
+      <button id="counter" data-click="count" data-quick-click type="button">0</button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`
+
+top ()

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@peter.naydenov/cuts",
+  "description": "SPA scene manager",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "Peter Naydenov",
+  "main": "./dist/cuts.umd.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/cuts.esm.mjs",
+      "require": "./dist/cuts.cjs",
+      "default": "./dist/cuts.umd.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c",
+    "preview": "vite preview",
+    "test": "mocha test-mocha/*.js",
+    "cypress": "cypress open --component --browser chrome"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PeterNaydenov/screen-cuts.git"
+  },
+  "devDependencies": {
+    "@peter.naydenov/visual-controller-for-vue3": "^2.1.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "c8": "^9.1.0",
+    "chai": "^5.1.0",
+    "cypress": "^13.8.1",
+    "mocha": "^10.4.0",
+    "rollup": "^4.17.2",
+    "vite": "^5.2.11",
+    "vue": "^3.4.26"
+  },
+  "dependencies": {
+    "@peter.naydenov/log": "^1.1.0",
+    "@peter.naydenov/shortcuts": "^3.1.1",
+    "ask-for-promise": "^2.0.3"
+  },
+  "keywords": [
+    "script",
+    "visual",
+    "state",
+    "manager"
+  ]
+}

package/rollup.config.js

@@ -0,0 +1,43 @@
+import resolve    from '@rollup/plugin-node-resolve'
+import commonjs   from '@rollup/plugin-commonjs'
+import terser     from '@rollup/plugin-terser';
+
+
+export default [
+	// browser-friendly UMD build
+	{
+		input: 'src/main.js',
+		output: {
+			name: 'cuts',
+			file: 'dist/cuts.umd.js',
+			format: 'umd'
+		},
+		plugins: [
+			resolve(), // so Rollup can find `ms`
+			commonjs() // so Rollup can convert `ms` to an ES module
+			, terser()
+		]
+	},
+
+	// CommonJS (for Node) and ES module (for bundlers) build.
+	// (We could have three entries in the configuration array
+	// instead of two, but it's quicker to generate multiple
+	// builds from a single configuration where possible, using
+	// an array for the `output` option, where we can specify
+	// `file` and `format` for each target)
+	{
+		input: 'src/main.js',
+		external: [
+                'ask-for-promise',
+                '@peter.naydenov/log', 
+                '@peter.naydenov/shortcuts'
+            ],
+		output: [
+			{ file: 'dist/cuts.cjs'    , format: 'cjs' },
+			{ file: 'dist/cuts.esm.mjs', format: 'es' }
+		],
+		plugins: [ terser() ]
+	}
+];
+
+

package/src/findInstructions.js

@@ -0,0 +1,75 @@
+'use strict'
+
+
+function* findInstructions ( currentName, currentParents, targetName, targetParents ) {
+    let backToName, backIndex=null;
+    
+    if ( currentName === null ) {   // When the scene manager is just started
+            yield* targetParents.map ( name => [ name, 'show' ])
+            yield [ targetName, 'show' ]
+            return
+        } 
+
+    if ( !targetParents || targetParents.length === 0 ) {  // Need to close all current parents, then open the target
+            if ( !currentParents ) {
+                    yield [ currentName, 'hide' ]
+                    yield [ targetName, 'show'   ]
+                    return
+                }
+            yield [ currentName, 'hide' ]
+            currentParents.reverse ()
+            yield* currentParents.map ( name => [ name, 'hide' ])
+            yield [ targetName, 'show'   ]
+            return
+        }
+
+    if ( targetParents.includes ( currentName ) ) {   // Target is a subpage of the current page. No closing needed.
+            let id = targetParents.indexOf ( currentName );
+            for ( let i = id+1; i < targetParents.length; i++ ) {
+                    yield [ targetParents[i], 'show' ]
+                }
+            yield [ targetName, 'show' ]
+            return
+        }
+
+    if ( !currentParents ) {
+            yield [ currentName, 'hide' ]
+            yield* targetParents.map ( name => [ name, 'show' ])
+            return
+        }
+
+    targetParents.every ( (name,i) => {
+                if ( currentParents[i] === targetParents[i] ) {  
+                            backToName = name
+                            backIndex = i
+                            return true
+                    }
+                else {
+                            return false
+                    }
+        })
+
+    if ( backIndex == null ) { // different branches  - close all current parents, then open the target branch
+                yield [ currentName, 'hide' ]
+                currentParents.reverse ()
+                yield* currentParents.map ( name => [ name, 'hide' ])
+                yield* targetParents.map ( name => [ name, 'show' ])
+                yield [ targetName, 'show' ]
+                return
+        }
+
+    yield [ currentName, 'hide' ]
+    for ( let i = currentParents.length; i > backIndex+1; i-- ) {
+                yield [ currentParents[i-1], 'hide' ]
+        }
+    for ( let i = backIndex+1; i < targetParents.length; i++ ) {
+                yield [ targetParents[i], 'show' ]
+        }
+    yield [ targetName, 'show' ]
+} // findInstructions func.
+
+
+
+export default findInstructions
+
+

package/src/main.js

@@ -0,0 +1,124 @@
+'use strict'
+/**
+ *  Cuts
+ *  ===============
+ *  
+ *  SPA Scene manager.
+ *  
+ *  History notes:
+ *    - Started as @peter.naydenov/screen-writer on gitHub for the first time on 2023-11-24;
+ *    - Version 2.0.0 of screen-writer. Works with shortcuts@3.0.1. Published on March 6th, 2024;
+ *    - Rename to @peter.naydenov/cuts 
+ *      Changes in documentation and some methods were renamed accordingly. 
+ *      Version 1.0.0. 
+ *      Published on May 8th, 2024;
+ * 
+ */
+
+
+import { shortcuts }   from '@peter.naydenov/shortcuts'      // Docs : https://github.com/PeterNaydenov/shortcuts
+import askForPromise   from 'ask-for-promise'                // Docs : https://github.com/PeterNaydenov/ask-for-promise
+import createLog       from '@peter.naydenov/log'            // Docs : https://github.com/PeterNaydenov/log
+
+import findInstructions from './findInstructions.js'
+import setInstruction   from './setInstruction.js'
+import methods          from './methods/index.js'
+
+
+
+
+
+function main ( cfg= {logLevel:0} ) {
+     const 
+          shortcutMngr = shortcuts ()
+        , logLevel = cfg.logLevel || 0
+        , log = createLog ({ level:logLevel })
+        , state = {     
+                     currentScene   : null       // Current scene name;
+                   , currentParents : null       // Current scene parents if any;
+                   , sceneNames     : new Set () // Set with all loaded scenes;
+                   , scenes         : {}         // Collection of all scenes;
+                   , opened         : false      // Flag to indicate if the scene manager is opened
+                }
+        , API = {}
+        , inAPI = {}
+        , dependencies = { 
+                             shortcutMngr
+                           , API
+                           , inAPI
+                           , findInstructions
+                           , askForPromise
+                           , setInstruction : setInstruction ({ askForPromise, deps: shortcutMngr.getDependencies })
+                           , log
+                        }
+        ;
+
+        Object.entries ( methods ).forEach ( ([name, fn]) => {
+                        if ( name.startsWith ( '_' ) )   inAPI[name] = fn ( dependencies, state )
+                        else                             API[name]   = fn ( dependencies, state )
+                })
+        
+        /**
+         * @function setDependencies
+         * @description Set dependencies for the Scenes
+         * @param {*} deps - dependencies objects
+         * @returns void
+         */
+        API.setDependencies = deps  => shortcutMngr.setDependencies ( deps )
+
+        /**
+         * @function getDependencies
+         * @description Get dependencies for the Scenes
+         * @returns {*} - dependencies objects
+         */
+        API.getDependencies = () => shortcutMngr.getDependencies ()
+
+        /**
+         * @function setNote
+         * @param {string} note - note, provided to action functions
+         * @returns void
+         */
+        API.setNote         = note => shortcuts.setNote ( note )
+
+        /**
+         * @function listScenes
+         * @description List all loaded Scene names
+         * @returns {Array.<string>} - list of scene names
+         */
+        API.listScenes = () => [ ...state.sceneNames ]
+
+        /**
+         * @function enablePlugin
+         * @description Enable a shortcut plugin
+         * @param {function} plugin - plugin library
+         * @param {*} options - plugin options
+         * @returns void
+         */
+        API.enablePlugin = (plugin,options) => shortcutMngr.enablePlugin ( plugin, options )
+
+        /**
+         * @function disablePlugin
+         * @description Disable a shortcut plugin
+         * @param {string} pluginName - plugin name
+         * @returns void
+         */
+        API.disablePlugin = ( pluginName )  => shortcutMngr.disablePlugin ( pluginName )
+
+
+        /**
+         * @function emit
+         * @description Emit an event
+         * @param {string} event - event name
+         * @param {*} data - event data
+         * @returns void
+         */
+        API.emit = ( event, ...args ) => shortcutMngr.emit ( event, ...args )
+
+        return API
+} // main func.
+
+
+
+export default main
+
+

package/src/methods/hide.js

@@ -0,0 +1,53 @@
+'use strict'
+
+
+
+function hide ( dependencies, state ) {
+/**
+ * @function hide
+ * @description Hide the current scene and returns to the parent one
+ * @param {number|string} endSteps - number of steps to end or '*' to end all scenes to the root
+ * @returns {Promise} - promise that resolves when the process 'end' is completed
+ */
+return function hide ( endSteps=1 ) {
+    const
+          { askForPromise, shortcutMngr, setInstruction } = dependencies
+        , { currentScene, currentParents, scenes } = state
+        , hideTask = askForPromise ()
+        , instructions = []
+        , hasParents = currentParents.length > 0
+        ;
+    let el;
+    
+    shortcutMngr.pause ()   // Stop all shortcuts
+    instructions.push ( setInstruction ( scenes[currentScene].hide ))   // Set instruction to hide current scene
+
+    if ( !hasParents )    state.currentScene = null
+    
+    if ( hasParents && endSteps === '*' ) {
+                [...currentParents].reverse().forEach ( name => {
+                                                        el = state.currentParents.pop ();
+                                                        state.currentScene = el
+                                                        instructions.push ( setInstruction ( scenes[name].hide)) 
+                                                })
+        }
+    if ( hasParents && ![ '*', 1].includes(endSteps) ) {
+                currentParents.slice ( `-${endSteps-1}` ).reverse().map ( name => {
+                                                        el = state.currentParents.pop ();
+                                                        state.currentScene = el
+                                                        instructions.push ( setInstruction (scenes[name].hide))
+                                                })
+        }
+    endSteps = askForPromise.sequence ( instructions )
+    endSteps.onComplete ( () => {
+                    shortcutMngr.changeContext ( state.currentScene )   // If state.currentScene is null, then all shortcuts are switched off and currentContext is null
+                    hideTask.done () 
+            })
+    return hideTask.promise
+}} // hide func.
+
+
+
+export default hide
+
+

package/src/methods/index.js

@@ -0,0 +1,13 @@
+
+import hide          from './hide.js'
+import listShortcuts from './listShortcuts.js'
+import setScenes     from './setScenes.js'
+import show          from './show.js'
+
+
+export default {
+              hide
+            , listShortcuts
+            , setScenes
+            , show
+        }

package/src/methods/listShortcuts.js

@@ -0,0 +1,21 @@
+'use strict'
+
+function listShortcuts ( dependencies, state ) {
+/**
+ * @function listShortcuts
+ * @description List all shortcuts for Scene
+ * @param {string} sceneName - name of the scene to list shortcuts for.
+ * @returns {(Array.<string>|null)} - list of shortcuts for the scene or null if page not found
+ */
+return function listShortcuts ( sceneName ) {
+    const { scenes, sceneNames } = state;
+    if ( ! sceneNames.has ( sceneName ) )   return null
+    const { show, hide, parents, ...shortcuts } = scenes[sceneName];
+    return Object.keys ( shortcuts )
+}} // listShortcuts func.
+
+
+
+export default listShortcuts
+
+

package/src/methods/setScenes.js

@@ -0,0 +1,36 @@
+'use strict'
+
+/** 
+ * @type sceneDescription
+ * @param {string} name - name of the scene
+ * @param {object} scene - object should contain 'show' and 'hide' + shortcuts and action functions
+ */
+
+function setScenes ( dependencies, state ) {
+/**
+ * @function setScenes
+ * @param {Array} sceneDescription - list of objects with name and scene. Scene should be a Scene model.
+ * @returns { void }
+ */
+return function setScenes ( list ) {
+    const { shortcutMngr } = dependencies;
+    list.forEach ( ({name, scene }) => {
+                    if ( !scene.parents ) scene.parents = []
+                    state.scenes[name] = scene
+                    state.sceneNames.add ( name )
+                    
+                    const 
+                          { show, hide, parents, ...shortcuts } = scene
+                        , context = {}
+                        ;
+                    
+                    context[name] = shortcuts
+                    shortcutMngr.load ( context )
+            })
+}} // setScenes func.
+
+
+
+export default setScenes
+
+

package/src/methods/show.js

@@ -0,0 +1,105 @@
+'use strict'
+
+
+
+function show ( dependencies, state ) {
+/**
+ * @function show
+ * @description Switch to the requested scene
+ * @param {Object} request - request object
+ * @param {string} request.scene - requested scene name
+ * @param {Object} request.options - options object. Optional
+ * @param {boolean} request.options.ssr - flag to indicate if the scene is already rendered(ssr: server side rendering). Optional
+ * @param {Array} args - arguments to pass to the scene method. Optional
+ * @returns {Promise} - promise that resolves when the process to 'show' is completed
+ */
+return function show ({scene:requestedScene, options={ssr:false}}, ...args ) {
+    const 
+          { shortcutMngr, askForPromise, log, findInstructions, setInstruction } = dependencies
+        , showTask = askForPromise ()
+        , { opened, scenes, sceneNames } = state
+        ;
+        
+    if ( !sceneNames.has ( requestedScene ) ) {
+            if ( log ) {
+                            log ({
+                                      message: `Scene ${requestedScene} is not available.`
+                                    , level : 1
+                                    , type  : 'error'
+                                })
+                            showTask.done ()
+                            return showTask.promise
+                }
+        }
+
+    if ( !opened && options.ssr ) {  // Check for Server side rendering on first scene load only
+                // Executes only once when the scene manager is started
+                state.opened = true
+                state.currentPage = requestedScene
+                shortcutMngr.changeContext ( requestedScene )
+                showTask.done ()
+                return showTask.promise
+        }
+    
+    const { show, parents } = scenes[requestedScene];
+    
+    if ( parents[0] === '*' ) {
+                show ().then ( () => showTask.done ()   )
+                state.currentParents.push ( state.currentPage )
+                state.currentPage = requestedScene
+                return showTask.promise
+        }
+    
+    let checkParents = parents.forEach ( name => sceneNames.has ( name )   ) || true ;
+    if ( !checkParents ) {
+                if ( log ) {
+                                log ({
+                                          message: `Some of '${requestedScene}' parent scenes are not set.`
+                                        , level : 1
+                                        , type  : 'error'
+                                    })
+                    }
+                showTask.done ()
+                return showTask.promise
+        }
+
+    function getStep ([name, action]) {   // Returns a scene function(hide or show) according to instructions
+                if ( action === 'show' ) {
+                        if ( state.currentScene )   state.currentParents.push ( state.currentScene )
+                        state.currentScene = name
+                    }
+                else {
+                        let el = state.currentParents.pop ();
+                        state.currentScene = el
+                    }
+                return scenes[name][action]
+        } // getStep func.
+
+    if ( !state.currentParents )   state.currentParents = []  
+    const 
+            g = findInstructions ( state.currentScene, state.currentParents, requestedScene, parents )
+          , instructions = []
+          ;
+          
+    for ( let inst of g ) {
+                [inst]
+                    .map ( getStep )
+                    .map ( step => instructions.push ( setInstruction(step),...args ))
+                    // Note:  Methods 'show' and 'hide' are async, but we need to provide them a data, 
+                    //        so we need to wrap them in a another function that returns a promise
+        }
+                       
+    const goingTask = askForPromise.sequence ( instructions );  // Execute open steps(show and hide) in sequence
+    goingTask.onComplete ( () => {
+                        state.opened = true
+                        shortcutMngr.changeContext ( requestedScene )
+                        showTask.done () 
+                })
+    return showTask.promise
+}} // show func.
+
+
+
+export default show
+
+

package/src/setInstruction.js

@@ -0,0 +1,17 @@
+'use strict'
+
+function setInstruction ( dependencies ) {
+return function setInstruction ( fn, ...args ) {
+    const { askForPromise, deps } = dependencies; 
+    return function applyInstruction () {
+                    const task = askForPromise ();
+                    fn ({ task, dependencies:deps() }, ...args )
+                    return task.promise
+                } // applyInstruction func.
+}} // setInstruction func.
+
+
+
+export default setInstruction
+
+

package/test/01-general.cy.js

@@ -0,0 +1,243 @@
+'use strict'
+
+import VisualController from '@peter.naydenov/visual-controller-for-vue3' // Docs : https://github.com/PeterNaydenov/visual-controller-for-vue3
+import { expect } from 'chai'
+import cuts from '../src/main.js'
+import { pluginClick } from '@peter.naydenov/shortcuts'
+
+import Dummy from './dummy.vue'
+import Red from './red.vue'
+import Blue from './blue.vue'
+import Gray from './gray.vue'
+
+
+
+describe ( 'General', () => {
+    
+    it ( 'Start a sreenWriter. ScreenWriter API', () => {
+                const script = cuts ();
+                expect ( script ).to.have.property ( 'show' )
+                expect ( script ).to.have.property ( 'hide' )
+                expect ( script ).to.have.property ( 'setScenes' )
+                expect ( script ).to.have.property ( 'setNote' )
+                expect ( script ).to.have.property ( 'listScenes' )
+                expect ( script ).to.have.property ( 'listShortcuts' )
+                expect ( script ).to.have.property ( 'setDependencies' )
+                expect ( script ).to.have.property ( 'getDependencies' )
+        }) // it start a director
+
+
+
+    it ( 'Load a top level page', done => {
+                let 
+                      render = false
+                    , click = false
+                    , html = new VisualController ()
+                    ;
+                const 
+                      script = cuts ()
+                    , d = document.querySelector ('[data-cy-root]')
+                    , testScene = { 
+                                      show : ({ task, dependencies }) => {
+                                                const { html } = dependencies;
+                                                html.publish ( Red, {}, 'container' )
+                                                render = true
+                                                task.done ()
+                                            }
+                                    , hide : ({task, dependencies}) => {
+                                                const { html } = dependencies;
+                                                html.destroy ( 'container' )
+                                                task.done ()
+                                            }
+                                    , 'click: left-1' : ({dependencies,target}) => {
+                                                    click = true
+                                                }
+                            }
+                    ;
+                script.enablePlugin ( pluginClick )
+                d.id = 'root'
+                html.publish ( Dummy, {}, 'root' ) 
+
+                cy.wait ( 0 )
+                    .then ( () => {
+                            script.setDependencies ({ html })
+                            script.setScenes ([ 
+                                                  { name:'test', scene:testScene } 
+                                            ])
+                            script.show ({ scene : 'test' })
+                            // cy.get ( '#target' ).click ()
+                        })
+                    .then ( () => {
+                            expect ( render ).to.be.true
+                            // expect ( click ).to.be.true
+                            return cy.wait ( 0 )
+                        })
+                    .then ( () => {
+                            return script.hide ()
+                        })
+                    .then ( () => {
+                            const pageContent = document.getElementById('container').innerHTML
+                            expect ( pageContent ).to.be.empty
+                            done ()
+                        })
+        }) // it load a top level page
+
+
+
+    it ( 'Load a deep level page', done => {
+            let 
+                  render = false
+                , click = false
+                , html = new VisualController ()
+                ;
+            const 
+                  script = cuts ()
+                , d = document.querySelector ('[data-cy-root]' )
+                , testScene = { 
+                                  show : ({ task, dependencies }) => {
+                                            const { html } = dependencies;
+                                            html.publish ( Red, {}, 'container' )
+                                            render = true
+                                            task.done ()
+                                        }
+                                , hide : ({task, dependencies}) => {
+                                            const { html } = dependencies;
+                                            html.destroy ( 'container' )
+                                            task.done ()
+                                        }
+                                , parents : [ 'blue' ]
+                                , 'click: 1-left' : ({dependencies,target}) => { // Order in the event name after the prefix is not important
+                                                click = true
+                                            }
+                        }
+                , bluePage = {
+                                      show : ({ task, dependencies }) => {
+                                                const { html } = dependencies;
+                                                html.publish ( Blue, {}, 'blue' )
+                                                task.done ()
+                                            }
+                                    , hide : ({task, dependencies}) => {
+                                                const { html } = dependencies;
+                                                html.destroy ( 'blue' )
+                                                task.done ()
+                                            }
+                                    , 'click: left-1' : ({dependencies,target}) => {}
+                        }
+                ;
+            script.enablePlugin ( pluginClick )
+            d.id = 'root'
+            html.publish ( Dummy, {}, 'root' )
+
+            cy.wait ( 0 )
+                .then ( () => {
+                        script.setDependencies ({ html })
+                        script.setScenes ([ 
+                                              { name:'test' , scene : testScene } 
+                                            , { name: 'blue', scene : bluePage  }
+                                        ])
+                        script.show ({ scene: 'test' })
+                        cy.get ( '#target' ).click ()
+                    })
+                .then ( () => {
+                        expect ( render ).to.be.true
+                        expect ( click ).to.be.true
+                        return cy.wait ( 0 )
+                    })
+                .then ( () => {
+                        return script.hide ( '*' )
+                    })
+                .then ( () => {
+                        const pageContent = document.getElementById('container').innerHTML
+                        expect ( pageContent ).to.be.empty
+                        done ()
+                    })
+        }) // it load a deep level page
+
+
+
+    it ( 'Turn to other branch', done => {
+            let 
+                  render = false
+                , click = false
+                , html = new VisualController ()
+                ;
+            const 
+                  script = cuts ()
+                , d = document.querySelector ('[data-cy-root]' )
+                , testScene = { 
+                                  show : ({ task, dependencies }) => {
+                                            const { html } = dependencies;
+                                            html.publish ( Red, {}, 'subgray' )   // subgray is inside 'blue' component
+                                            render = true
+                                            task.done ()
+                                        }
+                                , hide : ({task, dependencies}) => {
+                                            const { html } = dependencies;
+                                            html.destroy ( 'subgray' )
+                                            task.done ()
+                                        }
+                                , parents : [ 'blue' ]
+                                , 'click: left-1' : ({dependencies,target}) => {
+                                                click = true
+                                            }
+                        }
+                , bluePage = {
+                                      show : ({ task, dependencies }) => {
+                                                const { html } = dependencies;
+                                                html.publish ( Blue, {}, 'blue' )
+                                                task.done ()
+                                            }
+                                    , hide : ({task, dependencies}) => {
+                                                const { html } = dependencies;
+                                                html.destroy ( 'blue' )
+                                                task.done ()
+                                            }
+                                    , 'click: left-1' : ({dependencies,target}) => {}
+                        }
+                , grayPage = {
+                                      show : ({ task, dependencies }) => {
+                                                const { html } = dependencies;
+                                                html.publish ( Gray, {}, 'subgray' )
+                                                task.done ()
+                                            }
+                                    , hide : ({task, dependencies}) => {
+                                                const { html } = dependencies;
+                                                html.destroy ( 'subgray' )
+                                                task.done ()
+                                            }
+                                    , parents : [ 'blue' ]
+                                    , 'click: left-1' : ({dependencies,target}) => {}
+                        }
+                ;
+            script.enablePlugin ( pluginClick )
+            d.id = 'root'
+            html.publish ( Dummy, {}, 'root' )
+
+            cy.wait ( 0 )
+                .then ( () => {
+                        script.setDependencies ({ html })
+                        script.setScenes ([ 
+                                              { name:'test', scene  : testScene } 
+                                            , { name: 'blue', scene : bluePage  }
+                                            , { name: 'gray', scene : grayPage  }
+                                        ])
+                        script.show ({ scene : 'test' })
+                        cy.get ( '#target' ).click ()
+                    })
+                .then ( () => {
+                        expect ( render ).to.be.true
+                        expect ( click ).to.be.true
+                        return cy.wait ( 0 )
+                    })
+                .then ( () => script.show ({ scene : 'gray' }  ))
+                .then ( () => {
+                        const 
+                              red = document.querySelectorAll ( '.red' )
+                            , blue = document.querySelectorAll ( '.gray' )
+                            ;
+                        expect ( blue.length ).to.be.equal ( 1 )
+                        expect ( red.length ).to.be.equal  ( 0 )
+                        done ()
+                    })
+    }) // it turn to other branch
+}) // describe

package/test/blue.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="blue">
+        <div id="subgray"></div>
+    </div>
+</template>
+
+<style scoped>
+    .blue {
+        width: 200px;
+        height: 200px;
+        background-color: skyblue;
+    }
+</style>

package/test/dummy.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <h1>Test</h1>
+        <p id="target">Test <a href="#">lorem ipsum</a></p>
+        <div id="container">
+            
+        </div>
+        <div id="blue"></div>
+        <div id="gray"></div>
+    </div>
+</template>
+
+<style>
+:root {
+    --blue: #007bff;
+    --gray: #6c757d;
+    --link-color: rgb(204, 51, 10);
+}
+
+body.dark {
+    --background-color: #000;
+    --link-color: rgb(249, 249, 249);
+    background-color: var(--background-color);
+}
+
+#target {
+    --blue: var(--link-color);
+     color: var(--blue);
+}
+
+#target a {
+    color: var(--link-color);
+}
+</style>

package/test/gray.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="gray">
+    </div>
+</template>
+
+<style scoped>
+    .gray {
+        width: 100px;
+        height: 100px;
+        background-color: gray;
+    }
+</style>

package/test/red.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="red">llm</div>
+</template>
+
+<style scoped>
+    .red {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+    }
+</style>

package/test-mocha/01-findPosition.js

@@ -0,0 +1,109 @@
+'use strict'
+
+import findInstructions from "../src/findInstructions.js"
+import { expect } from 'chai'
+
+
+describe ( 'Find a Position', () => { 
+
+
+
+ it ( 'Switch top level pages', () => {
+        let result = []
+        let g = findInstructions ( 'old', undefined, 'new', undefined );
+
+        for ( const n of g ) {    result.push ( n )   }
+
+        expect ( result.length ).to.be.equal ( 2 )
+        expect ( result[0][0] ).to.be.equal ( 'old' )
+        expect ( result[0][1] ).to.be.equal ( 'hide' )
+
+        expect ( result[1][0] ).to.be.equal ( 'new' )
+        expect ( result[1][1] ).to.be.equal ( 'show' )
+ }) // it switch top level pages
+
+
+
+ it ( 'Switch from child page to top level page', () => {
+    let result = [];
+    let g = findInstructions ( 'old', ['one','two'], 'new', undefined );
+
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result[0]).to.be.deep.equal ( ['old', 'hide'] )
+    expect ( result[1]).to.be.deep.equal ( ['two', 'hide'] )
+    expect ( result[2]).to.be.deep.equal ( ['one', 'hide'] )
+    expect ( result[3]).to.be.deep.equal ( ['new', 'show'] )
+}) // it switch from child page to top level page
+
+
+
+it ( 'Switch to child page', () => {
+    let result = [];
+    let g = findInstructions ( 'old', ['bla'], 'new', ['old','two','three'] );
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result ).to.have.lengthOf ( 3 )
+    expect ( result[0]).to.be.deep.equal ( ['two', 'show'] )
+    expect ( result[1]).to.be.deep.equal ( ['three', 'show'] )
+    expect ( result[2]).to.be.deep.equal ( ['new', 'show'] )
+}) // it switch to child page
+
+
+
+it ( 'From child page to other siblings page', () => {
+    let result = [];
+    let g = findInstructions ( 'old', ['two', 'three'], 'new', ['two','three'] );
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result ).to.have.lengthOf ( 2 )
+    expect ( result[0]).to.be.deep.equal ( ['old', 'hide'] )
+    expect ( result[1]).to.be.deep.equal ( ['new', 'show'] )
+}) // it from top level page to not own child page
+
+
+
+it ( 'From top level page to not own child page', () => {
+    let result = [];
+    let g = findInstructions ( 'old', undefined, 'new', ['two','three'] );
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result ).to.have.lengthOf ( 3 )
+    expect ( result[0]).to.be.deep.equal ( ['old', 'hide'] )
+    expect ( result[1]).to.be.deep.equal ( ['two', 'show'] )
+    expect ( result[2]).to.be.deep.equal ( ['three', 'show'] )
+}) // it from top level page to not own child page
+
+
+
+it ( 'Long chain of parents', () => {
+    let result = [];
+    let g = findInstructions ( 'old', [ 'one', 'branch' ], 'new', [ 'one','two','three'] );
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result ).to.have.lengthOf ( 5 )
+    expect ( result[0]).to.be.deep.equal ( ['old', 'hide'] )
+    expect ( result[1]).to.be.deep.equal ( ['branch', 'hide'] )
+    expect ( result[2]).to.be.deep.equal ( ['two', 'show'] )
+    expect ( result[3]).to.be.deep.equal ( ['three', 'show'] )
+    expect ( result[4]).to.be.deep.equal ( ['new', 'show'] )
+}) // it long chain of parents
+
+
+
+it ( 'Different branches', () => {
+    let result = [];
+    let g = findInstructions ( 'old', [ 'something', 'branch' ], 'new', [ 'one','two','three'] );
+    for ( const n of g ) {   result.push ( n )   }
+
+    expect ( result ).to.have.lengthOf ( 7 )
+    expect ( result[0]).to.be.deep.equal ( ['old', 'hide'] )
+    expect ( result[1]).to.be.deep.equal ( ['branch', 'hide'] )
+    expect ( result[2]).to.be.deep.equal ( ['something', 'hide'] )
+    expect ( result[3]).to.be.deep.equal ( ['one', 'show'] )
+    expect ( result[4]).to.be.deep.equal ( ['two', 'show'] )
+    expect ( result[5]).to.be.deep.equal ( ['three', 'show'] )
+    expect ( result[6]).to.be.deep.equal ( ['new', 'show'] )
+}) // it long chain of parents
+
+}) // describe

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})