neo.mjs 6.18.0 → 6.18.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.18.0'
+         * @member {String} version='6.18.1'
          */
-        version: '6.18.0'
+        version: '6.18.1'
     }
 
     /**

package/apps/portal/view/home/MainContainer.mjs

@@ -3,6 +3,7 @@ import Colors     from './parts/Colors.mjs';
 import Container  from '../../../../src/container/Base.mjs';
 import Features   from './parts/Features.mjs';
 import Helix      from './parts/Helix.mjs';
+import How        from './parts/How.mjs';
 import HelloWorld from './parts/HelloWorld.mjs';
 import MainNeo    from './parts/MainNeo.mjs';
 
@@ -29,8 +30,9 @@ class MainContainer extends Container {
             MainNeo,
             Features,
             HelloWorld,
-            Colors,
             Helix,
+            Colors,
+            How,
             AfterMath
         ],
         /**
@@ -39,11 +41,38 @@ class MainContainer extends Container {
         scrollable: true,
 
         domListeners: [{
+            intersect(data) {
+                Neo.getComponent(data.targetId)?.activate?.()
+            },
             scroll(event) {
                 this.toggleCls('hide-sidebar', event.scrollTop > 80)
             }
         }]
     }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me             = this,
+            {id, windowId} = me;
+
+        value && setTimeout(() => {
+            Neo.main.addon.IntersectionObserver.register({
+                callback : 'isVisible',
+                id,
+                observe  : ['.page'],
+                root     : `#${id}`,
+                threshold: 1.0,
+                windowId
+            })
+        }, 50)
+    }
 }
 
 Neo.setupClass(MainContainer);

package/apps/portal/view/home/parts/Colors.mjs

@@ -31,26 +31,43 @@ class Colors extends Container {
             items : [{
                 cls : 'neo-h1',
                 flex: 'none',
-                html: 'Colors Dashboard'
+                html: 'Amazing Potential',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Expand the widgets into multiple Windows'
+                html: 'Socket Data',
+                vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-content',
                 flex: 'none',
-                html: 'The State Management will continue to work.'
+                vdom: {tag: 'p'},
+                html: [
+                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button',
+                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be',
+                    'undocked into their own windows. In fact, the entire demo can be undocked.'
+                ].join('')
+            }, {
+                flex: 'none',
+                html: 'But the demo differs from the helix example because the data is provided via a <i>socket</i>.',
+                vdom: {tag: 'p'}
+            }, {
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as',
+                    'stock market trading data and medical or scientific telemetry.'
+                ].join('')
             }]
         }, {
             module: Container,
             flex  : '2',
-            style : {background: 'grey', padding: '20px'},
+            style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
             items : [{
-                module    : LivePreview,
-                activeView: 'preview',
-                cls       : ['page-live-preview'],
-                height    : '100%',
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
 
                 value: [
                     "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
@@ -67,6 +84,13 @@ class Colors extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    activate() {
+        this.getReference('live-preview').activeView = 'preview'
+    }
 }
 
 Neo.setupClass(Colors);

package/apps/portal/view/home/parts/Helix.mjs

@@ -12,14 +12,17 @@ class Helix extends Container {
          * @protected
          */
         className: 'Portal.view.home.parts.Helix',
-
+        /**
+         * @member {String[]} cls=['page','cool-stuff']
+         */
         cls: ['page', 'cool-stuff'],
-
+        /**
+         * @member {Object} responsive
+         */
         responsive: {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
@@ -31,26 +34,55 @@ class Helix extends Container {
             items : [{
                 cls : 'neo-h1',
                 flex: 'none',
-                html: 'Interactive Views'
+                html: 'Extreme Speed',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Expand the widget into multiple Windows'
+                html: '40,000 Updates /s',
+                vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-content',
+                cls : 'neo-h3',
                 flex: 'none',
-                html: 'The State Management will continue to work.'
+                vdom: {tag: 'p'},
+
+                html: [
+                    'This demo shows the Neo.mjs helix component, along with a "Helix Controls" panel. ',
+                    'Move your cursor over the helix, then rapidly scroll left and right to rotate, and up and down to zoom. ',
+                    'As you do, look at the delta updates counter at the top. ',
+                    'Neo.mjs easily handles 40,000 updates per second, and beyond.'
+                ].join('')
+            }, {
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'Multi-Window',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Seamless and Simple',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+
+                html: [
+                    'Click on the small window icon in the Helix Controls title bar and the controls open in their own window ',
+                    'which can be moved to a separate monitor. But the application logic doesn\'t care — ',
+                    'the logic updates the controls just like before, and framework seamlessly handles updating the DOM across windows.'
+                ].join('')
             }]
         }, {
             module: Container,
             flex  : '2',
-            style : {background: 'grey', padding: '20px'},
+            style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
             items : [{
-                module    : LivePreview,
-                activeView: 'preview',
-                cls       : ['page-live-preview'],
-                height    : '100%',
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
 
                 value: [
                     "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
@@ -68,6 +100,13 @@ class Helix extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    activate() {
+        this.getReference('live-preview').activeView = 'preview'
+    }
 }
 
 Neo.setupClass(Helix);

package/apps/portal/view/home/parts/HelloWorld.mjs

@@ -44,15 +44,18 @@ class HelloWorld extends Container {
                 cls : 'neo-h1',
                 id  : 'neo-hello-world-h1',
                 flex: 'none',
-                html: 'Hello World'
+                html: 'Hello World',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Your first code snippet'
+                html: 'Your first code snippet',
+                vdom: {tag: 'h2'}
             }, {
                 cls : 'neo-content',
                 flex: 'none',
-                html: 'If you understand these lines, you are ready to start with Neo.mjs'
+                html: 'If you understand these lines, you are ready to start with Neo.mjs',
+                vdom: {tag: 'p'}
             }]
         }, {
             module: LivePreviewContainer,

package/apps/portal/view/home/parts/How.mjs

@@ -0,0 +1,66 @@
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * @class Portal.view.home.parts.How
+ * @extends Neo.container.Base
+ */
+class How extends Container {
+    static config = {
+        className: 'Portal.view.home.parts.How',
+        /**
+         * @member {String[]} cls=['page','cool-stuff']
+         */
+        cls: ['page', 'cool-stuff'],
+        /**
+         * @member {Object} responsive
+         */
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'How?',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'How Does Neo.mjs Do It?',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'When a Neo.mjs app launches three webworkers are spawned: one that holds app logic, one for tracking delta DOM updates, ',
+                    'and one for backend calls. Each webworker runs in its own thread, and thus, in its own processor core. ',
+                    'This means these processes run in parallel: your app logic isn\'t affected by DOM changes or ',
+                    'by Ajax or socket calls. If you have processor-intensive tasks you can easily run them in their own threads.'
+                ].join('')
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'lightgray', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                flex : 'none',
+                style: {width: '100%'},
+                vdom : {tag: 'img', src: 'https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png'}
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(How);
+
+export default How;

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -13,7 +13,7 @@ class MainNeo extends Container {
          */
         className: 'Portal.view.home.parts.MainNeo',
 
-        cls: ['page', 'landing-page'],
+        cls: ['page', 'portal-home-main-neo'],
 
         layout: {ntype: 'vbox', align: 'center', pack: 'center'},
         /**
@@ -24,9 +24,10 @@ class MainNeo extends Container {
             cls   : ['vector'],
             flex  : 'none',
         }, {
-            cls : 'neo-h1',
+            cls : ['neo-h1'],
             flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces'
+            html: 'The High-Performance Web Framework for Next Generation Interfaces',
+            vdom: {tag: 'h1'}
         }, {
             module: Container,
             cls   : ['button-group'],

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.18.0'
+         * @member {String} version='6.18.1'
          */
-        version: '6.18.0'
+        version: '6.18.1'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.18.0",
+    "version": "6.18.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/deck/learnneo/pages/Events.md

@@ -53,27 +53,31 @@ A `Neo.controller.Component` is a simple class associated with a component class
 instance of its associated controller is automatically created. 
 
 <pre data-neo>
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
-import TextField  from  '../../../../src/form/field/Text.mjs';
+import Base from '../../../../src/controller/Component.mjs';
 
-class MainViewController extends Controller {
+class MainViewController extends Base {
     static config = {
-        className: 'Example.view.MainViewController'
+        className: 'Example.view.MainViewController',
     }
     onChange(data) {
-        Neo.Main.log({value: data.value})
+        Neo.Main.log({value: data.value});
     }
+
 }
 Neo.setupClass(MainViewController);
 
 
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
 class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
+
         controller: MainViewController,
-        layout    : {ntype:'vbox', align:'start'},
-        items     : [{
+        className: 'Example.view.MainView',
+
+        layout   : {ntype:'vbox', align:'start'},
+        items: [{
             module   : TextField,
             labelText: 'Name',
             listeners: {
@@ -85,6 +89,8 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
+
+
 (It's important to keep in mind that in Neo.mjs, all class definitions are coded in their own
 source file: one class per file. In the examples we're putting all the relevant classes together
 to make it easier to see the source code for every class being used. But in an 

package/resources/data/deck/learnneo/pages/GuideEvents.md

@@ -1,4 +1,4 @@
-As you read in the Getting Started > Events topic, components, stores, and many other objects fire events.
+As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic, components, stores, and many other objects fire events.
 
 
 <pre data-neo>
@@ -32,12 +32,12 @@ Neo.setupClass(MainView);
 
 ### In-line
 
-The event listener function can be coded in-line. Normally, you want event handlers to be in a view's controller, 
-but for very simple situation it can be convenient to use this syntax.
+The event listener function can be coded in-line. Normally you want event handlers to be in a view's 
+controller, but for very simple situation it can be convenient to use this syntax.
 
 <pre data-neo>
 import Container from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -45,10 +45,10 @@ class MainView extends Container {
         layout   : {ntype:'vbox', align:'start'},
 
         items: [{
-            module   : Button,
-            text: 'Button',
-            listeners: { 
-                click: button => Neo.Main.log('Click!');
+            module   : TextField,
+            labelText: 'Name',
+            listeners: {
+                change: data => Neo.Main.log({value:data.value})
             }
         }]
     }
@@ -59,12 +59,12 @@ Neo.setupClass(MainView);
 ### As a view method
 
 You can also use the `up.` qualifier to specify a method in the component's parent view. Like the
-in-line syntax above, using `up.` might be convenient for simple event handlers, or when you 
-simply haven't gotten around to definining a view's controller.
+in-line syntax you saw above, using the `up.` syntax might be convenient for simple classees, 
+or when you simply haven't gotten around to defining a view's controller.
 
 <pre data-neo>
 import Container from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -72,16 +72,15 @@ class MainView extends Container {
         layout   : {ntype:'vbox', align:'start'},
 
         items: [{
-            module   : Button,
-            text: 'Button',
-            listeners: {
-                click: 'up.onButtonClick'
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'up.foo'
             }
         }]
     }
-
-    onButtonClick(){
-        Neo.Main.log(arguments);
+    foo(data){
+        Neo.Main.log({value:data.value})
     }
 }
 Neo.setupClass(MainView);
@@ -89,12 +88,136 @@ Neo.setupClass(MainView);
 
 ### As a controller method
 
+Despite the examples above, the most correct way of setting up event handlers is to use a controller.
+Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
+also created. 
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
 ## Adding listeners procedurally
 
 Event listeners are normally specified declaratively, via the `listeners: {}` config. But occasionally you need to add
 a listener proccedurally.
 
-Any obversable class has an `addListener` method. There's also an easier to type version called `on`.
+Any obversable class has an `addListener` method, along with an easier-to-type version called `on`.
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+    onComponentConstructed(){
+        debugger
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log('foo' + {value:data.value}
+    }
+
+    // This is a controller lifecycle method run after the controller's view has been constructed
+    onComponentConstructed(){
+        // Note the use of this.getReference() -- that's used to get a component reference with the specified name
+        this.getReference('nameTextfield').on('change', this.foo, this)
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            reference: 'nameTextfield', // This component can be fetched using this.getReference('nameTextfield')
+            labelText: 'Name'
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
 
 
 

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -1,55 +1,54 @@
 .learnneo-header-toolbar {
-  border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid #f2f2f2;
 
-  .logo {
-    margin-left: 1em;
-  }
-
-  .neo-button {
-    margin-left: 10px;
-
-    &.no-text {
-      margin-left: 0;
-      width: 1.2em;
-
-      &.github-button {
-        margin-left: 5em;
-      }
-
-      .neo-button-glyph {
-        font-size: 24px;
-      }
+    .logo {
+        margin-left: 1em;
     }
 
-    .neo-button-glyph {
-      &.neo-logo-blue {
-        background-image: url("../../../../../../../resources/images/logo/neo_logo_primary.svg");
-        height: 24px;
-        width: 24px;
-      }
+    .neo-button {
+        margin-left: 10px;
+
+        &.no-text {
+            margin-left: 0;
+            width      : 1.2em;
+
+            &.github-button {
+                margin-left: 5em;
+            }
+
+            .neo-button-glyph {
+                font-size: 24px;
+            }
+        }
+
+        .neo-button-glyph {
+            &.neo-logo-blue {
+                background-image: url("../../../../../../resources/images/logo/neo_logo_primary.svg");
+                height          : 24px;
+                width           : 24px;
+            }
+        }
     }
-  }
 
-  .separate-bar {
-    position: absolute;
-    right: 20px;
-    top: 60px;
-    width: 40px;
-
-    z-index: 9;
-    transform: rotate(0);
-    animation: fade-in-animation 200ms linear;
-  }
+    .separate-bar {
+        animation: fade-in-animation 200ms linear;
+        position: absolute;
+        right   : 20px;
+        top     : 60px;
+        transform: rotate(0);
+        width   : 40px;
+        z-index  : 9;
+    }
 
-  // find parallel class hide-sidebar
-  &:has(+div .hide-sidebar) .separate-bar {
-    animation: fade-animation 200ms linear forwards;
-  }
+    // find parallel class hide-sidebar
+    &:has(+div .hide-sidebar) .separate-bar {
+        animation: fade-animation 200ms linear forwards;
+    }
 }
 
 .vector {
-  animation: fade-and-scale-animation auto linear;
-  animation-timeline: --page-scroll;
+    animation: fade-and-scale-animation auto linear;
+    animation-timeline: --page-scroll;
 }
 
 //@scroll-timeline --page-scroll {
@@ -61,70 +60,71 @@
 
 /* Style and position the progress bar */
 #progress {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  height: 2px;
-  width: 100%;
-  background: var(--button-background-color);
-  background: var(--sem-color-surface-primary-background);
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--button-background-color);
+    background: var(--sem-color-surface-primary-background);
 
-  scale: 0 1;
-  transform-origin: left;
+    scale: 0 1;
+    transform-origin: left;
 
-  /* Attach the animation using an anonymous Scroll Progress Timeline */
-  animation: grow-progress linear;
-  animation-timeline: --page-scroll;
+    /* Attach the animation using an anonymous Scroll Progress Timeline */
+    animation: grow-progress linear;
+    animation-timeline: --page-scroll;
 }
 
 @keyframes grow-progress {
-  to { scale: 1 1; }
+    to {
+        scale: 1 1;
+    }
 }
 
 .hello-world {
-  animation-timeline: view(block 100% -500%);
+    animation-timeline: view(block 100% -500%);
 
-  animation-name: appear-animation;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-name: appear-animation;
+    animation-fill-mode: both;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-animation {
-  0% {
-    transform: translateX(-400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(-400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 .cool-stuff {
-  animation-timeline: view(block 100% -500%);
-
-  animation-name: appear-cool-stuff;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-timeline       : view(block 100% -500%);
+    animation-name           : appear-cool-stuff;
+    animation-fill-mode      : both;
+    animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-cool-stuff {
-  0% {
-    transform: translateX(400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 
@@ -133,65 +133,83 @@
 //}
 
 .portal-home-maincontainer {
-  scroll-timeline: --page-scroll block;
+    scroll-timeline: --page-scroll block;
 }
 
 @keyframes rotateAnimation {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes fade-and-scale-animation {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  12%, 100% {
-    opacity: 0;
-    transform: scale(1.5);
-  }
+    0% {
+        opacity  : 1;
+        transform: scale(1);
+    }
+    12%, 100% {
+        opacity  : 0;
+        transform: scale(1.5);
+    }
 }
 
 @keyframes fade-in-animation {
-  from { opacity: 0; right: -10px}
-  to   { opacity: 1; right: 20px;}
+    from {
+        opacity: 0;
+        right  : -10px
+    }
+    to {
+        opacity: 1;
+        right  : 20px;
+    }
 }
+
 @keyframes fade-animation {
-  from { opacity: 1; right: 20px;}
-  to   { opacity: 0; right: -10px}
+    from {
+        opacity: 1;
+        right  : 20px;
+    }
+    to {
+        opacity: 0;
+        right  : -10px
+    }
 }
 
 .button-group {
-  overflow: visible;
+    overflow: visible;
 }
 
 .get-started-button {
-  opacity: 0;
-  animation: show-get-started-button 400ms 1300ms linear forwards;
+    opacity  : 0;
+    animation: show-get-started-button 400ms 1300ms linear forwards;
 }
 
 .neo-github {
-  opacity: 0;
-  animation: show-github-button 600ms 1150ms linear forwards;
+    opacity  : 0;
+    animation: show-github-button 600ms 1150ms linear forwards;
 }
 
 @keyframes show-get-started-button {
-  from {
-    opacity: 0;
-    transform: translate(70px, 30px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(70px, 30px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }
+
 @keyframes show-github-button {
-  from {
-    opacity: 0;
-    transform: translate(-70px, 50px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(-70px, 50px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -9,11 +9,17 @@
 
         .neo-h1 {
             font-size: min(max(5.5vw, 30px), 64px);
+            text-align   : center;
+            margin       : 0;
+            line-height  : 1em;
         }
 
         .neo-h2 {
             font-size: min(max(3.5vw, 24px), 44px);
-        }
+            text-align   : center;
+            margin       : 0;
+            line-height  : 1em;
+            }
 
         .neo-content {
             font-size: min(max(2.3vw, 16px), 30px);
@@ -24,27 +30,8 @@
         }
     }
 
-    .button-group {
-        display       : flex !important;
-        flex-direction: row-reverse !important;
-        gap           : 8px !important;
-    }
-
     .neo-h1 {
-        font-size    : 32px;
-        font-weight  : 600;
-        text-align   : center;
-        margin-bottom: 1.25em;
-    }
-
-    .vector {
-        background-image   : url("../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
-        background-position: center center;
-        background-repeat  : no-repeat;
-        background-size    : contain;
-        height             : 10vW;
-        margin             : 0 0 3rem 0;
-        max-height         : 130px;
-        width              : 100%;
+        font-size  : 32px;
+        font-weight: 600;
     }
 }

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -0,0 +1,22 @@
+.portal-home-main-neo.page {
+    .button-group {
+        display       : flex !important;
+        flex-direction: row-reverse !important;
+        gap           : 8px !important;
+    }
+
+    .neo-h1 {
+        margin-bottom: 1.25em;
+    }
+
+    .vector {
+        background-image   : url("../../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
+        background-position: center center;
+        background-repeat  : no-repeat;
+        background-size    : contain;
+        height             : 10vW;
+        margin             : 0 0 3rem 0;
+        max-height         : 130px;
+        width              : 100%;
+    }
+}

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.18.0'
+     * @default '6.18.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.18.0'
+    version: '6.18.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -13,8 +13,10 @@ import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
 
 const
-    lengthRE = /^\d+\w+$/,
-    addUnits = value => value == null ? value : isNaN(value) ? value : `${value}px`;
+    addUnits          = value => value == null ? value : isNaN(value) ? value : `${value}px`,
+    closestController = Symbol.for('closestController'),
+    closestModel      = Symbol.for('closestModel'),
+    lengthRE          = /^\d+\w+$/;
 
 /**
  * @class Neo.component.Base
@@ -577,9 +579,11 @@ class Base extends CoreBase {
     afterSetDomListeners(value, oldValue) {
         let me = this;
 
-        me.getController()?.parseDomListeners(me);
+        if (value?.[0] || oldValue?.[0]) {
+            me.getController()?.parseDomListeners(me);
 
-        DomEventManager.updateDomListeners(me, value, oldValue)
+            DomEventManager.updateDomListeners(me, value, oldValue)
+        }
     }
 
     /**
@@ -1240,7 +1244,7 @@ class Base extends CoreBase {
      * Creates a KeyNavigation instance if needed.
      * @param {Object} value
      * @param {Object} oldValue
-     * @returns {Neo.util.KeyNavigation}
+     * @returns {Neo.util.KeyNavigation|null}
      * @protected
      */
     beforeSetKeys(value, oldValue) {
@@ -1503,10 +1507,10 @@ class Base extends CoreBase {
         const result = [];
 
         if (this.floating) {
-            result.push('neo-floating');
+            result.push('neo-floating')
         }
 
-        return result;
+        return result
     }
 
     /**
@@ -1543,7 +1547,24 @@ class Base extends CoreBase {
      * @returns {Neo.controller.Component|null}
      */
     getController(ntype) {
-        return this.getConfigInstanceByNtype('controller', ntype)
+        let me = this,
+            controller;
+
+        if (!ntype) {
+            controller = me[closestController];
+
+            if (controller) {
+                return controller
+            }
+        }
+
+        controller = me.getConfigInstanceByNtype('controller', ntype);
+
+        if (!ntype) {
+            me[closestController] = controller;
+        }
+
+        return controller
     }
 
     /**
@@ -1553,7 +1574,7 @@ class Base extends CoreBase {
      * @returns {Promise<Neo.util.Rectangle>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
-        const result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
+        let result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
 
         if (Array.isArray(result)) {
             return result.map(rect => Rectangle.clone(rect))
@@ -1572,7 +1593,24 @@ class Base extends CoreBase {
             return null
         }
 
-        return this.getConfigInstanceByNtype('model', ntype)
+        let me = this,
+            model;
+
+        if (!ntype) {
+            model = me[closestModel];
+
+            if (model) {
+                return model
+            }
+        }
+
+        model = me.getConfigInstanceByNtype('model', ntype);
+
+        if (!ntype) {
+            me[closestModel] = model
+        }
+
+        return model
     }
 
     /**

package/src/core/Observable.mjs

@@ -33,12 +33,28 @@ class Observable extends Base {
      * @returns {String|null} eventId null in case an object gets passed as the name (multiple ids)
      */
     addListener(name, opts, scope, eventId, data, order) {
-        let me         = this,
-            delay      = 0,
-            nameObject = typeof name === 'object',
-            once       = false,
+        let me            = this,
+            delay         = 0,
+            eventIdObject = typeof eventId === 'object',
+            nameObject    = typeof name    === 'object',
+            once          = false,
+            optsType      = typeof opts,
             listener, existing, eventConfig;
 
+        /*
+         * let us support the following format too:
+         *
+         * currentWorker.on('connected', () => {
+         *     Base.sendRemotes(className, remote)
+         * }, me, {once: true})
+         */
+        if (eventIdObject && optsType === 'function') {
+            eventId.fn = opts;
+            opts     = eventId;
+            optsType = 'object';
+            eventId  = null;
+        }
+
         if (nameObject) {
             if (name.hasOwnProperty('delay')) {
                 delay = name.delay;
@@ -62,16 +78,16 @@ class Observable extends Base {
                     me.addListener(key, {delay, fn: value, once, scope})
                 }
             })
-        } else if (typeof opts === 'object') {
+        } else if (optsType === 'object') {
             delay    = delay   || opts.delay;
             eventId  = eventId || opts.eventId;
             listener = opts.fn;
             once     = once    || opts.once;
             order    = order   || opts.order;
             scope    = scope   || opts.scope
-        } else if (typeof opts === 'function') {
+        } else if (optsType === 'function') {
             listener = opts
-        } else if (typeof opts === 'string') {
+        } else if (optsType === 'string') {
             listener = opts // VC hook, can get parsed after onConstructed in case the view uses the parent VC
         } else {
             throw new Error('Invalid addListener call: ' + name)

package/src/main/addon/IntersectionObserver.mjs

@@ -77,6 +77,25 @@ class NeoIntersectionObserver extends Base {
         })
     }
 
+    /**
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
+    isVisible(entries, observer) {
+        let me = this,
+            data, path, target;
+
+        entries.forEach(entry => {
+            target = entry.target;
+            data   = target.dataset && {...target.dataset} || null;
+            path   = DomEvents.getPathFromElement(entry.target).map(e => DomEvents.getTargetData(e));
+
+            if (entry.isIntersecting) {
+                me.sendMessage({data, id: observer.rootId, isIntersecting: true, path, targetId: target.id})
+            }
+        })
+    }
+
     /**
      * Add more or new items into an existing observer instance
      * @param {Object} data
@@ -128,7 +147,7 @@ class NeoIntersectionObserver extends Base {
      */
     register(data) {
         let me            = this,
-            cache         = me.cache,
+            {cache}       = me,
             {id, observe} = data,
             observer;
 

package/src/model/Component.mjs

@@ -153,12 +153,14 @@ class Component extends Base {
      * @protected
      */
     beforeSetStores(value, oldValue) {
-        let controller = this.component.getController();
+        if (value) {
+            let controller = this.component.getController();
 
-        value && Object.entries(value).forEach(([key, storeValue]) => {
-            controller?.parseConfig(storeValue);
-            value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
-        });
+            Object.entries(value).forEach(([key, storeValue]) => {
+                controller?.parseConfig(storeValue);
+                value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
+            })
+        }
 
         return value
     }
@@ -445,13 +447,13 @@ class Component extends Base {
      * @returns {Neo.model.Component|null}
      */
     getParent() {
-        let me = this;
+        let {parent} = this;
 
-        if (me.parent) {
-            return me.parent
+        if (parent) {
+            return parent
         }
 
-        return me.component.parent?.getModel() || null
+        return this.component.parent?.getModel() || null
     }
 
     /**