neo.mjs 10.0.0-beta.3 → 10.0.0-beta.5

package/learn/guides/{Layouts.md → uibuildingblocks/Layouts.md}

@@ -17,7 +17,7 @@ Depending on the `ntype`, additional properties can be provided to customize the
 
 Example:
 
-```javascript
+```javascript readonly
 layout: {
     ntype: 'vbox',
     align: 'center'
@@ -66,33 +66,33 @@ sections or forms where elements flow from top to bottom.
 
 ```javascript live-preview
 import Container from '../container/Base.mjs';
-import Button from '../button/Base.mjs';
+import Button    from '../button/Base.mjs';
 
-class VBoxExample extends Container {
+class MainView extends Container {
     static config = {
         className: 'Example.view.VBoxExample',
         layout: {
             ntype: 'vbox',
             align: 'center', // Center items horizontally
-            pack: 'center'   // Center items vertically
+            pack : 'center'  // Center items vertically
         },
         items: [{
             module: Button,
-            text: 'Button 1',
-            width: 100
+            text  : 'Button 1',
+            width : 100
         }, {
             module: Button,
-            text: 'Button 2',
-            width: 150
+            text  : 'Button 2',
+            width : 150
         }, {
             module: Button,
-            text: 'Button 3',
-            flex: 1 // This button will expand to fill remaining vertical space
+            text  : 'Button 3',
+            flex  : 1 // This button will expand to fill remaining vertical space
         }]
     }
 }
 
-Neo.setupClass(VBoxExample);
+MainView = Neo.setupClass(MainView);
 ```
 
 #### 2. HBox Layout (`ntype: 'hbox'`)
@@ -121,34 +121,34 @@ navigation menus, or any scenario where elements need to be displayed side-by-si
 **Example:**
 
 ```javascript live-preview
+import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
-import Button from '../button/Base.mjs';
 
-class HBoxExample extends Container {
+class MainView extends Container {
     static config = {
         className: 'Example.view.HBoxExample',
         layout: {
             ntype: 'hbox',
             align: 'center', // Center items vertically
-            pack: 'start'    // Pack items to the left
+            pack : 'start'   // Pack items to the left
         },
         items: [{
             module: Button,
-            text: 'Button A',
+            text  : 'Button A',
             height: 50
         }, {
             module: Button,
-            text: 'Button B',
+            text  : 'Button B',
             height: 70
         }, {
             module: Button,
-            text: 'Button C',
-            flex: 1 // This button will expand to fill remaining horizontal space
+            text  : 'Button C',
+            flex  : 1 // This button will expand to fill remaining horizontal space
         }]
     }
 }
 
-Neo.setupClass(HBoxExample);
+MainView = Neo.setupClass(MainView);
 ```
 
 #### 3. Card Layout (`ntype: 'card'`)
@@ -174,51 +174,53 @@ hidden.
 **Example:**
 
 ```javascript live-preview
+import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
-import Button from '../button/Base.mjs';
 
-class CardExample extends Container {
+class MainView extends Container {
     static config = {
         className: 'Example.view.CardExample',
+        ntype    : 'card-example-container',
         layout: {
             ntype: 'card',
             activeIndex: 0 // Start with the first card active
         },
-        items: [{
+        itemDefaults: {
             module: Container,
-            cls: 'card-panel',
+            cls   : 'card-panel',
+            layout: 'base'
+        },
+        items: [{
             items: [{
                 module: Button,
-                text: 'Go to Card 2',
-                handler: function() {
-                    this.up('container').layout.activeIndex = 1;
+                text  : 'Go to Card 2',
+                handler() {
+                    this.up('card-example-container').layout.activeIndex = 1
                 }
             }],
             style: {
                 backgroundColor: '#e0f7fa',
-                padding: '20px',
-                textAlign: 'center'
+                padding        : '20px',
+                textAlign      : 'center'
             }
         }, {
-            module: Container,
-            cls: 'card-panel',
             items: [{
                 module: Button,
-                text: 'Go to Card 1',
-                handler: function() {
-                    this.up('container').layout.activeIndex = 0;
+                text  : 'Go to Card 1',
+                handler() {
+                    this.up('card-example-container').layout.activeIndex = 0
                 }
             }],
             style: {
                 backgroundColor: '#fff3e0',
-                padding: '20px',
-                textAlign: 'center'
+                padding        : '20px',
+                textAlign      : 'center'
             }
         }]
     }
 }
 
-Neo.setupClass(CardExample);
+MainView = Neo.setupClass(MainView);
 ```
 
 #### Lazy Loading with Card Layouts
@@ -230,7 +232,7 @@ This is achieved by defining the `module` property of an item within the `items`
 dynamic `import()` statement. For example, in the Portal app's `Viewport.mjs`,
 modules are lazy-loaded like this:
 
-```javascript
+```javascript readonly
 items: [
     {module: () => import('./home/MainContainer.mjs')},
     {module: () => import('./learn/MainContainer.mjs')},
@@ -243,4 +245,4 @@ module, and then creates the component instance. This ensures that resources are
 needed.
 
 This is just the beginning of understanding layouts in Neo.mjs. In subsequent sections, we will explore more advanced
-layout types and concepts like nesting layouts for complex UI structures.
+layout types and concepts like nesting layouts for complex UI structures.

package/learn/guides/{form_fields → userinteraction/form_fields}/ComboBox.md

@@ -46,9 +46,9 @@ In this example:
 For more complex scenarios, especially when dealing with large datasets or remote data, it's best practice to use a separate `Neo.data.Store` instance.
 
 ```javascript readonly
-import ComboBox     from '../../src/form/field/ComboBox.mjs';
-import Store        from '../../src/data/Store.mjs';
-import Model        from '../../src/data/Model.mjs';
+import ComboBox from '../../src/form/field/ComboBox.mjs';
+import Store    from '../../src/data/Store.mjs';
+import Model    from '../../src/data/Model.mjs';
 
 // Define a Model for your data
 class CountryModel extends Model {

package/learn/tree.json

@@ -1,59 +1,66 @@
 {"data": [
-    {"name": "Using These Topics",                                   "parentId": null,                                 "id": "UsingTheseTopics" },
-    {"name": "Benefits",                                             "parentId": null,                "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                                    "parentId": "Benefits",                           "id": "benefits.Introduction"},
-        {"name": "Off the Main Thread",                              "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
-        {"name": "4 Environments",                                   "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
-        {"name": "Unified Config System",                            "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
-        {"name": "RPC Layer",                                        "parentId": "Benefits",                           "id": "benefits.RPCLayer"},
-        {"name": "Extreme Speed",                                    "parentId": "Benefits",                           "id": "benefits.Speed"},
-        {"name": "Multi-Window Applications",                        "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
-        {"name": "Quick Application Development",                    "parentId": "Benefits",                           "id": "benefits.Quick"},
-        {"name": "Complexity and Effort",                            "parentId": "Benefits",                           "id": "benefits.Effort"},
-        {"name": "Forms Engine",                                     "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",                    "parentId": "Benefits",                           "id": "benefits.Features"},
-    {"name": "Getting Started",                                      "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                            "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
-        {"name": "Workspaces and Applications",                      "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
-        {"name": "Describing a View",                                "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
-        {"name": "Events",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
-        {"name": "Component References",                             "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
-        {"name": "Extending Classes",                                "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
-        {"name": "Config",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
-        {"name": "Shared Bindable Data",                             "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
-    {"name": "Guides",                                               "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
-        {"name": "Application Bootstrap",                            "parentId": "InDepth",                            "id": "guides.ApplicationBootstrap"},
-        {"name": "Instance Lifecycle",                               "parentId": "InDepth",                            "id": "guides.InstanceLifecycle"},
-        {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "InDepth",                            "id": "guides.DeclarativeComponentTreesVsImperativeVdom"},
-        {"name": "Shared Bindable Data (State Providers)",           "parentId": "InDepth",                            "id": "guides.StateProviders"},
-        {"name": "Working with VDom",                                "parentId": "InDepth",                            "id": "guides.WorkingWithVDom"},
-        {"name": "Config System Deep Dive",                          "parentId": "InDepth",                            "id": "guides.ConfigSystemDeepDive"},
-        {"name": "Extending Neo Classes",                            "parentId": "InDepth",                            "id": "guides.ExtendingNeoClasses"},
-        {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "InDepth",                            "id": "guides.MainThreadAddons"},
-        {"name": "User Input (Forms)",                               "parentId": "InDepth",                            "id": "guides.Forms"},
-        {"name": "Form Fields",                                      "parentId": "InDepth",           "isLeaf": false, "id": "guides.form_fields"},
-            {"name": "ComboBox",                                     "parentId": "guides.form_fields",                 "id": "guides.form_fields.ComboBox"},
-        {"name": "Component and Container Basics",                   "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                          "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts"},
-        {"name": "Custom Components",                                "parentId": "InDepth",                            "id": "guides.CustomComponents"},
-        {"name": "Events",                                           "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
-            {"name": "Custom Events",                                "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
-            {"name": "DOM Events",                                   "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
-        {"name": "Portal App",                                       "parentId": "InDepth",                            "id": "guides.PortalApp"},
-        {"name": "Tables (Stores)",                                  "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
-        {"name": "Multi-Window Applications",                        "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
-        {"name": "Mixins",                                           "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
-        {"name": "Collections",                                      "parentId": "InDepth",                            "id": "guides.Collections"},
-        {"name": "Records",                                          "parentId": "InDepth",                            "id": "guides.Records"},
-    {"name": "Tutorials",                                            "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                              "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
-        {"name": "Earthquakes",                                      "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
-        {"name": "Todo List",                                        "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
-    {"name": "JavaScript Classes",                                   "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",                 "parentId": "JavaScript",                         "id": "javascript.Classes"},
-        {"name": "Overriding Methods",                               "parentId": "JavaScript",                         "id": "javascript.Overrides"},
-        {"name": "Other JavaScript Class Features",                  "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
-        {"name": "Super",                                            "parentId": "JavaScript",                         "id": "javascript.Super"},
-        {"name": "New Node",                                         "parentId": "JavaScript",                         "id": "javascript.NewNode"},
-    {"name": "Glossary",                                             "parentId": null,                                 "id": "Glossary"}
+    {"name": "Using These Topics",                                       "parentId": null,                                                  "id": "UsingTheseTopics" },
+    {"name": "Benefits",                                                 "parentId": null,                                 "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                                        "parentId": "Benefits",                                            "id": "benefits/Introduction"},
+        {"name": "Off the Main Thread",                                  "parentId": "Benefits",                                            "id": "benefits/OffTheMainThread"},
+        {"name": "4 Environments",                                       "parentId": "Benefits",                                            "id": "benefits/FourEnvironments"},
+        {"name": "Unified Config System",                                "parentId": "Benefits",                                            "id": "benefits/ConfigSystem"},
+        {"name": "RPC Layer",                                            "parentId": "Benefits",                                            "id": "benefits/RPCLayer"},
+        {"name": "Extreme Speed",                                        "parentId": "Benefits",                                            "id": "benefits/Speed"},
+        {"name": "Multi-Window Applications",                            "parentId": "Benefits",                                            "id": "benefits/MultiWindow"},
+        {"name": "Quick Application Development",                        "parentId": "Benefits",                                            "id": "benefits/Quick"},
+        {"name": "Complexity and Effort",                                "parentId": "Benefits",                                            "id": "benefits/Effort"},
+        {"name": "Forms Engine",                                         "parentId": "Benefits",                                            "id": "benefits/FormsEngine"},
+        {"name": "Features and Benefits Summary",                        "parentId": "Benefits",                                            "id": "benefits/Features"},
+    {"name": "Getting Started",                                          "parentId": null,                                 "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                                "parentId": "GettingStarted",                                      "id": "gettingstarted/Setup"},
+        {"name": "Workspaces and Applications",                          "parentId": "GettingStarted",                                      "id": "gettingstarted/Workspaces"},
+        {"name": "Describing a View",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/DescribingTheUI"},
+        {"name": "Events",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Events"},
+        {"name": "Component References",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/References"},
+        {"name": "Extending Classes",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/Extending"},
+        {"name": "Config",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Config"},
+        {"name": "Shared Bindable Data",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/ComponentModels"},
+    {"name": "Guides",                                                   "parentId": null,                                 "isLeaf": false, "id": "guides",  "collapsed": true},
+        {"name": "Fundamentals & Core Concepts",                         "parentId": "guides",                             "isLeaf": false, "id": "guides/fundamentals", "collapsed": true},
+            {"name": "Application Bootstrap",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ApplicationBootstrap"},
+            {"name": "Instance Lifecycle",                               "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/InstanceLifecycle"},
+            {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeComponentTreesVsImperativeVdom"},
+            {"name": "Declarative VDOM with Effects",                    "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeVDOMWithEffects"},
+            {"name": "Config System Deep Dive",                          "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ConfigSystemDeepDive"},
+            {"name": "Extending Neo Classes",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ExtendingNeoClasses"},
+            {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/MainThreadAddons"},
+        {"name": "UI Building Blocks",                                   "parentId": "guides",                             "isLeaf": false, "id": "guides/uibuildingblocks", "collapsed": true},
+            {"name": "Component and Container Basics",                   "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/ComponentsAndContainers"},
+            {"name": "Layouts",                                          "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/Layouts"},
+            {"name": "Custom Components",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/CustomComponents"},
+            {"name": "Working with VDom",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/WorkingWithVDom"},
+        {"name": "Data Handling",                                        "parentId": "guides",                             "isLeaf": false, "id": "guides/datahandling", "collapsed": true},
+            {"name": "Collections",                                      "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Collections"},
+            {"name": "Records",                                          "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Records"},
+            {"name": "Grids",                                            "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Grids"},
+            {"name": "Tables (Stores)",                                  "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Tables", "hidden": true},
+            {"name": "Shared Bindable Data (State Providers)",           "parentId": "guides/datahandling",                                 "id": "guides/datahandling/StateProviders"},
+        {"name": "User Interaction & Advanced Features",                 "parentId": "guides",                             "isLeaf": false, "id": "guides/userinteraction", "collapsed": true},
+            {"name": "User Input (Forms)",                               "parentId": "guides/userinteraction",                              "id": "guides/userinteraction/Forms"},
+            {"name": "Form Fields",                                      "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/form_fields"},
+                {"name": "ComboBox",                                     "parentId": "guides/userinteraction/form_fields",                  "id": "guides/userinteraction/form_fields/ComboBox"},
+            {"name": "Events",                                           "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/events"},
+                {"name": "Custom Events",                                "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/CustomEvents"},
+                {"name": "DOM Events",                                   "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/DomEvents"},
+        {"name": "Specific Applications/Features",                       "parentId": "guides",                             "isLeaf": false, "id": "guides/SpecificFeatures", "collapsed": true},
+            {"name": "Multi-Window Applications",                        "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/MultiWindow", "hidden":  true},
+            {"name": "Mixins",                                           "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/Mixins", "hidden": true},
+            {"name": "Portal App",                                       "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/PortalApp"},
+    {"name": "Tutorials",                                                "parentId": null,                                 "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                                  "parentId": "Tutorials",                                           "id": "tutorials/RSP", "hidden": true},
+        {"name": "Earthquakes",                                          "parentId": "Tutorials",                                           "id": "tutorials/Earthquakes"},
+        {"name": "Todo List",                                            "parentId": "Tutorials",                                           "id": "tutorials/TodoList"},
+    {"name": "JavaScript Classes",                                       "parentId": null,                                 "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",                     "parentId": "JavaScript",                                          "id": "javascript/Classes"},
+        {"name": "Overriding Methods",                                   "parentId": "JavaScript",                                          "id": "javascript/Overrides"},
+        {"name": "Other JavaScript Class Features",                      "parentId": "JavaScript",                                          "id": "javascript/ClassFeatures"},
+        {"name": "Super",                                                "parentId": "JavaScript",                                          "id": "javascript/Super"},
+        {"name": "New Node",                                             "parentId": "JavaScript",                                          "id": "javascript/NewNode"},
+    {"name": "Glossary",                                                 "parentId": null,                                                  "id": "Glossary"}
 ]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-beta.3",
+    "version"        : "10.0.0-beta.5",
     "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {
@@ -86,7 +86,7 @@
         "fs-extra"                     : "^11.3.0",
         "highlightjs-line-numbers.js"  : "^2.9.0",
         "html-minifier-terser"         : "^7.2.0",
-        "inquirer"                     : "^12.6.3",
+        "inquirer"                     : "^12.7.0",
         "marked"                       : "^16.0.0",
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
@@ -96,7 +96,7 @@
         "siesta-lite"                  : "5.5.2",
         "terser"                       : "^5.43.1",
         "url"                          : "^0.11.4",
-        "webpack"                      : "^5.99.9",
+        "webpack"                      : "^5.100.0",
         "webpack-cli"                  : "^6.0.1",
         "webpack-dev-server"           : "^5.2.2",
         "webpack-hook-plugin"          : "^1.0.7",

package/src/DefaultConfig.mjs

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