neo.mjs 10.0.0-beta.2 → 10.0.0-beta.4

package/learn/guides/userinteraction/form_fields/ComboBox.md

@@ -0,0 +1,241 @@
+# ComboBox Field
+
+The `Neo.form.field.ComboBox` is a powerful and flexible input component that provides a dropdown list for selecting one or multiple items. It combines the functionality of a text input field with a list, allowing users to either type to filter options or select directly from a predefined set of choices.
+
+## 1. Basic Usage
+
+At its simplest, a `ComboBox` can be configured with a static array of data.
+
+```javascript live-preview
+import ComboBox      from '../../src/form/field/ComboBox.mjs';
+import FormContainer from '../../src/form/Container.mjs';
+
+class MainView extends FormContainer {
+    static config = {
+        className: 'MyComboBoxForm',
+        layout   : {ntype: 'vbox', align: 'start'},
+        items    : [{
+            module       : ComboBox,
+            labelPosition: 'inline',
+            labelText    : 'Select a Fruit',
+            name         : 'selectedFruit',
+            width        : 200,
+
+            store: { // Inline store configuration
+                data: [
+                    {id: 'apple',  name: 'Apple'},
+                    {id: 'banana', name: 'Banana'},
+                    {id: 'orange', name: 'Orange'},
+                    {id: 'grape',  name: 'Grape'}
+                ]
+            }
+        }]
+    }
+}
+
+MainView = Neo.setupClass(MainView);
+```
+
+In this example:
+*   The `store` config is an inline object that gets automatically converted into a `Neo.data.Store`.
+*   The `id` property of each data item is used as the internal value, and `name` is used for display by default.
+*   **Note**: If your data uses different property names for the unique identifier or display value (e.g., `cityId` instead of `id`), you must explicitly define a `model` (even inline) within the `store` config and set the `keyProperty` to match your unique identifier.
+
+## 2. Data Integration with `Neo.data.Store`
+
+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';
+
+// Define a Model for your data
+class CountryModel extends Model {
+    static config = {
+        className: 'CountryModel',
+        fields: [
+            {name: 'id',   type: 'String'},
+            {name: 'name', type: 'String'}
+        ]
+    }
+}
+
+// Define a Store class
+class CountriesStore extends Store {
+    static config = {
+        className: 'CountriesStore',
+        model    : CountryModel,
+        autoLoad : true,
+        url      : '/path/to/your/countries.json' // Example: fetch data from a URL
+    }
+}
+
+class CountryComboBoxForm extends Neo.form.Container {
+    static config = {
+        className: 'CountryComboBoxForm',
+        layout   : {ntype: 'vbox', align: 'start'},
+        items    : [{
+            module   : ComboBox,
+            labelText: 'Select a Country',
+            name     : 'selectedCountry',
+            store    : CountriesStore // Pass the Store Class
+        }]
+    }
+}
+```
+
+### Passing Models and Stores: Flexibility in Configuration
+
+Neo.mjs offers significant flexibility in how you configure models and stores for your components. For both the `model` config within a `Store` and the `store` config within a data-bound component (like `ComboBox`), you can typically pass one of three types:
+
+1.  **Configuration Object**: A plain JavaScript object containing the properties for the model or store. Neo.mjs will automatically create an instance from this object. This is convenient for inline, simple definitions.
+    ```javascript readonly
+    // Example: Inline Store config for ComboBox
+    store: {
+        model: { // Model config object
+            fields: [{name: 'id'}, {name: 'name'}]
+        },
+        data: [{id: 1, name: 'Item 1'}]
+    }
+    ```
+
+2.  **Class Reference**: A direct reference to the class (e.g., `MyStoreClass`, `MyModelClass`). Neo.mjs will automatically instantiate this class when the component or store is created. This is the most common and recommended approach for reusable definitions.
+    ```javascript readonly
+    // Example: Passing a Store Class to ComboBox
+    import MyStoreClass from './MyStoreClass.mjs';
+
+    // ...
+    items: [{
+        module: ComboBox,
+        store : MyStoreClass // Pass the Store Class
+    }]
+    ```
+    ```javascript readonly
+    // Example: Passing a Model Class to a Store
+    import MyModelClass from './MyModelClass.mjs';
+
+    class MyStoreClass extends Neo.data.Store {
+        static config = {
+            model: MyModelClass // Pass the Model Class
+        }
+    }
+    ```
+
+3.  **Instance**: A pre-created instance of the model or store. This is useful when you need a single, shared instance across multiple components (e.g., a singleton store for application-wide settings or a store that's managed externally).
+    ```javascript readonly
+    // Example: Passing a Store Instance to ComboBox
+    const mySharedStore = Neo.create({
+        module: Neo.data.Store,
+        // ... store configs
+    });
+
+    // ...
+    items: [{
+        module: ComboBox,
+        store : mySharedStore // Pass the Store Instance
+    }]
+    ```
+    While less common for `model` configs (as models are typically instantiated by stores), you could theoretically pass a `Model` instance if a custom scenario required it.
+
+Choosing the appropriate method depends on your application's architecture, reusability needs, and whether you require shared or independent data instances.
+
+## 3. Key Configuration Options
+
+The `ComboBox` offers several configurations to control its behavior and appearance:
+
+*   **`displayField`**: (Default: `'name'`) The name of the field in the store's records that will be displayed in the dropdown list and the input field.
+*   **`valueField`**: (Default: `'id'`) The name of the field in the store's records that will be used as the actual value of the `ComboBox` when selected. This is the value returned by `getSubmitValue()`.
+*   **`forceSelection`**: (Default: `true`) If `true`, the `ComboBox` will only allow values that match an existing record in its store. If the user types a value that doesn't match, the field will be cleared on blur.
+*   **`editable`**: (Default: `true`) If `true`, the user can type into the input field. If `false`, the input field is read-only, and selection can only be made from the dropdown list.
+*   **`filterDelay`**: (Default: `50`) The time in milliseconds to delay between user input and applying the filter to the dropdown list. Useful for performance with large stores.
+*   **`typeAhead`**: (Default: `true`) If `true`, as the user types, the `ComboBox` will attempt to complete the input with the first matching record from the store, displaying the suggestion as a hint.
+*   **`triggerAction`**: (Default: `'all'`) Controls what happens when the dropdown trigger is clicked.
+    *   `'all'`: Shows all list items, regardless of current input.
+    *   `'filtered'`: Shows only items that match the current input field's value.
+*   **`listConfig`**: An object that allows you to configure the underlying `Neo.list.Base` component used for the dropdown. For example, you can enable checkboxes for multi-selection (though `ComboBox` itself is typically single-select, `Chip` extends it for multi-select).
+
+```javascript live-preview
+import ComboBox      from '../../src/form/field/ComboBox.mjs';
+import FormContainer from '../../src/form/Container.mjs';
+
+class MainView extends FormContainer {
+    static config = {
+        className: 'AdvancedComboBox',
+        layout   : {ntype: 'vbox', align: 'start'},
+        items    : [{
+            module        : ComboBox,
+            displayField  : 'cityName',
+            editable      : true,
+            filterDelay   : 200,
+            forceSelection: false, // Allow custom input
+            labelText     : 'Search for a City',
+            name          : 'citySearch',
+            triggerAction : 'filtered',
+            typeAhead     : true,
+            valueField    : 'cityId',
+            width         : 300,
+
+            store: {
+                keyProperty: 'cityId',
+                model      : {fields: [{name: 'cityId', type: 'String'}, {name: 'cityName', type: 'String'}]},
+                
+                data: [
+                    {cityId: 'ny',  cityName: 'New York'},
+                    {cityId: 'la',  cityName: 'Los Angeles'},
+                    {cityId: 'chi', cityName: 'Chicago'},
+                    {cityId: 'hou', cityName: 'Houston'}
+                ]
+            }
+        }]
+    }
+}
+
+MainView = Neo.setupClass(MainView);
+```
+
+## 4. Events
+
+The `ComboBox` field emits several events that you can listen to for custom logic:
+
+*   **`change`**: Inherited from `Neo.form.field.Base`, fired when the field's `value` config changes.
+*   **`userChange`**: Inherited from `Neo.form.field.Base`, fired when the field's value changes due to direct user interaction (e.g., typing or selecting from the list).
+*   **`select`**: Specific to `ComboBox`, fired when an item is selected from the dropdown list. The event object contains the `record` that was selected.
+
+```javascript live-preview
+import ComboBox      from '../../src/form/field/ComboBox.mjs';
+import FormContainer from '../../src/form/Container.mjs';
+
+class MainView extends FormContainer {
+    static config = {
+        className: 'ComboBoxWithEvents',
+        layout   : {ntype: 'vbox', align: 'start'},
+        items    : [{
+            module       : ComboBox,
+            labelPosition: 'top',
+            labelText    : 'Choose an Option',
+            name         : 'option',
+
+            store: {
+                data: [
+                    {id: 1, name: 'Option A'},
+                    {id: 2, name: 'Option B'}
+                ]
+            },
+            listeners: {
+                select: function(data) {
+                    Neo.Main.log({value: `Selected record: ${data.value.name}`}); // data.value is the selected record
+                },
+                change: function(data) {
+                    Neo.Main.log({value: `Field value changed (record or null): ${data.value?.name || data.value}`});
+                },
+                userChange: function(data) { // text input
+                    Neo.Main.log({value: `User interacted, new value: ${data.value}`});
+                }
+            }
+        }]
+    }
+}
+
+MainView = Neo.setupClass(MainView);
+```

package/learn/tree.json

@@ -1,54 +1,65 @@
 {"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": "Main Thread Addons: Interacting with the Browser", "parentId": "InDepth",                            "id": "guides.MainThreadAddons"},
-        {"name": "User Input (Forms)",                               "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
-        {"name": "Component and Container Basics",                   "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                          "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
-        {"name": "Custom Components",                                "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
-        {"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": "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": "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.2",
+    "version"        : "10.0.0-beta.4",
     "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",

package/resources/scss/src/apps/portal/learn/ContentComponent.scss

@@ -63,6 +63,15 @@
         color: #3E63DD;
     }
 
+    h2.neo-h2,
+    h3.neo-h3 {
+        code {
+            font-family: inherit !important;
+            font-size  : 1em !important;
+            font-weight: inherit !important;
+        }
+    }
+
     .lab {
         box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         font-size    : 1em;

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -1,4 +1,5 @@
 import DefaultConfig from './DefaultConfig.mjs';
+import {isDescriptor}  from './core/ConfigSymbols.mjs';
 
 const
     camelRegex   = /-./g,
@@ -514,8 +515,8 @@ Neo = globalThis.Neo = Object.assign({
                     autoGenerateGetSet(element, key)
                 }
 
-                    // only apply properties which have no setters inside the prototype chain
-                // those will get applied on create (Neo.core.Base -> initConfig)
+                // Only apply properties which have no setters inside the prototype chain.
+                // Those will get applied on create (Neo.core.Base -> initConfig)
                 else if (!Neo.hasPropertySetter(element, key)) {
                     Object.defineProperty(element, key, {
                         enumerable: true,
@@ -682,18 +683,24 @@ function autoGenerateGetSet(proto, key) {
         throw('Config ' + key + '_ (' + proto.className + ') already has a set method, use beforeGet, beforeSet & afterSet instead')
     }
 
+    const
+        _key      = '_' + key,
+        uKey      = key[0].toUpperCase() + key.slice(1),
+        beforeGet = 'beforeGet' + uKey,
+        beforeSet = 'beforeSet' + uKey,
+        afterSet  = 'afterSet'  + uKey;
+
     if (!Neo[getSetCache]) {
         Neo[getSetCache] = {}
     }
 
     if (!Neo[getSetCache][key]) {
-        Neo[getSetCache][key] = {
+        const publicDescriptor = {
             get() {
                 let me        = this,
-                    beforeGet = `beforeGet${key[0].toUpperCase() + key.slice(1)}`,
                     hasNewKey = Object.hasOwn(me[configSymbol], key),
                     newKey    = me[configSymbol][key],
-                    value     = hasNewKey ? newKey : me['_' + key];
+                    value     = hasNewKey ? newKey : me[_key];
 
                 if (Array.isArray(value)) {
                     if (key !== 'items') {
@@ -704,8 +711,8 @@ function autoGenerateGetSet(proto, key) {
                 }
 
                 if (hasNewKey) {
-                    me[key] = value; // we do want to trigger the setter => beforeSet, afterSet
-                    value = me['_' + key]; // return the value parsed by the setter
+                    me[key] = value;  // We do want to trigger the setter => beforeSet, afterSet
+                    value = me[_key]; // Return the value parsed by the setter
                     delete me[configSymbol][key]
                 }
 
@@ -715,18 +722,14 @@ function autoGenerateGetSet(proto, key) {
 
                 return value
             },
-
             set(value) {
-                if (value === undefined) {
-                    return
-                }
+                if (value === undefined) return;
+
+                const config = this.getConfig(key);
+                if (!config) return;
 
                 let me        = this,
-                    _key      = '_' + key,
-                    uKey      = key[0].toUpperCase() + key.slice(1),
-                    beforeSet = 'beforeSet' + uKey,
-                    afterSet  = 'afterSet'  + uKey,
-                    oldValue  = me[_key];
+                    oldValue  = config.get(); // Get the old value from the Config instance
 
                 // every set call has to delete the matching symbol
                 delete me[configSymbol][key];
@@ -735,34 +738,39 @@ function autoGenerateGetSet(proto, key) {
                     value = Neo.clone(value, true, true)
                 }
 
-                // we do want to store the value before the beforeSet modification as well,
-                // since it could get pulled by other beforeSet methods of different configs
-                me[_key] = value;
-
                 if (typeof me[beforeSet] === 'function') {
                     value = me[beforeSet](value, oldValue);
 
                     // If they don't return a value, that means no change
                     if (value === undefined) {
-                        me[_key] = oldValue;
                         return
                     }
-
-                    me[_key] = value;
                 }
 
-                if (
-                    (key === 'vnode' && value !== oldValue) || // vnode trees can be huge, avoid a deep comparison
-                    !Neo.isEqual(value, oldValue)
-                ) {
+                // Set the new value into the Config instance
+                // The config.set() method will return true if the value actually changed.
+                if (config.set(value)) {
                     me[afterSet]?.(value, oldValue);
                     me.afterSetConfig?.(key, value, oldValue)
                 }
             }
-        }
+        };
+
+        const privateDescriptor = {
+            get() {
+                return this.getConfig(key)?.get();
+            },
+            set(value) {
+                this.getConfig(key)?.setRaw(value);
+            }
+        };
+
+        Neo[getSetCache][key]  = publicDescriptor;
+        Neo[getSetCache][_key] = privateDescriptor;
     }
 
-    Object.defineProperty(proto, key, Neo[getSetCache][key])
+    Object.defineProperty(proto, key,  Neo[getSetCache][key]);
+    Object.defineProperty(proto, _key, Neo[getSetCache][_key])
 }
 
 /**