neo.mjs 9.15.0 → 9.16.0

package/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-13",
+      "datePublished": "2025-06-14",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v9.15.0'
+                html  : 'v9.16.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -5,8 +5,8 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 const
     labCloseRegex        = /<!--\s*\/lab\s*-->/g,
     labOpenRegex         = /<!--\s*lab\s*-->/g,
-    preJsRegex           = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g,
-    preNeoRegex          = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g,
+    preLivePreviewRegex  = /<pre\s+data-code-livepreview\s*>([\s\S]*?)<\/pre>/g,
+    preJsRegex           = /<pre\s+data-code-readonly\s*>([\s\S]*?)<\/pre>/g,
     preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
 
 /**
@@ -185,7 +185,7 @@ class ContentComponent extends Component {
             // Replace <pre data-neo></pre> with <div id='neo-preview-1'/>
             // and create a map keyed by ID, whose value is the javascript
             // from the <pre>
-            modifiedHtml = me.extractNeoContent(modifiedHtml, neoDivs);
+            modifiedHtml = me.extractLivePreviewContent(modifiedHtml, neoDivs);
 
             html = marked.parse(modifiedHtml);
             html = me.insertLabDivs(html);
@@ -248,11 +248,11 @@ class ContentComponent extends Component {
      * @param {Object} map
      * @returns {String}
      */
-    extractNeoContent(htmlString, map) {
+    extractLivePreviewContent(htmlString, map) {
         // 1. Replace <pre data-neo> with <div id='neo-pre-live-preview-x'/>
         // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
         // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preNeoRegex, (match, preContent) => {
+        return htmlString.replace(preLivePreviewRegex, (match, preContent) => {
             const key = Neo.core.IdGenerator.getId('pre-live-preview');
             map[key] = preContent;
             return `<div id="${key}"></div>`

package/package.json

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

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

@@ -0,0 +1,65 @@
+
+***Welcome to these Neo.mjs guides and learning resources!*** Neo.mjs is a groundbreaking JavaScript framework designed
+to help you build lightning-fast, highly scalable, and exceptionally maintainable web applications. This guide will help
+you understand the structure of these topics and get the most out of our comprehensive content.
+
+## Documentation Sections
+
+This documentation is organized into the following main sections, each serving a distinct purpose:
+
+* ***Benefits***: Describes the technical and business reasons for choosing Neo.mjs, highlighting its unique advantages.
+* ***Getting Started***: Provides installation instructions, along with fundamental concepts that are good to understand
+  before diving deeper into Neo.mjs.
+* ***Tutorials***: Offers hands-on tutorials where you'll code a few simple Neo.mjs applications.
+* ***Guides***: Contains in-depth discussions of various topics related to Neo.mjs concepts and features.
+
+## Navigating These Topics
+
+As you can see, the table of contents is on the left. Topic sections and sub-sections are shown on the right, and the
+content is here in the middle. There are "next" and "previous" buttons at the bottom of each page to make it easier to
+read several topics in sequence.
+
+## Special Features
+
+You'll find a few special features integrated into our content to enhance your learning experience:
+
+### Disclosure widgets
+
+Topics sometimes contain "disclosure" widgets, which are just `<details>` tags. These are used in cases 
+where we want to present high-level points and reveal details when the disclosure is expanded.
+
+<details>
+<summary>This is a disclosure widget</summary>
+<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
+</details>
+
+### Runnable examples
+
+Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
+
+You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
+icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
+and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
+
+<pre data-code-livepreview>
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module: Button,
+            text  : 'Button'
+        }]
+    }
+}
+
+MainView = Neo.setupClass(MainView);
+</pre>
+
+---
+
+Your journey into Neo.mjs starts here. The next page will guide you through its core benefits, or if you're ready to get
+hands-on, jump directly to [Getting Started](#/learn/gettingstarted.Setup) to build your first application.

package/resources/data/deck/learnneo/pages/benefits/ConfigSystem.md

@@ -10,7 +10,7 @@ and nested approach to their configuration, a gap that a class config system aim
 ## A bad example
 I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
-<pre data-javascript>
+<pre data-code-readonly>
 // MyComponent with an attribute
 <MyComponent myAttribute="someValue" />
 

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -3,7 +3,7 @@
 You do not need to define a state tree on your own.
 It is sufficient to just use namespaces inside the `name` attribute of each field.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import FormContainer from '../form/Container.mjs';
 import TextField     from '../form/field/Text.mjs';
@@ -49,7 +49,7 @@ Getting the field values still works like before.
 Use case: In case you have a form split into multiple pages and only one of them is mounted to keep
 the DOM minimal, you can still get all field values.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -104,7 +104,7 @@ Inside the example preview, clear the user lastname via hitting the x-button.
 Afterwards, click on the 3 buttons at the bottom and inspect the output inside the main window console carefully.
 
 The main form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {
     account: 'My Account',
     product: {brand: 'Tesla', name: 'Car'},
@@ -114,18 +114,18 @@ The main form will log:
 </pre>
 
 The user form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {user: {firstname: 'John', lastname: null}}
 'isValid: false'
 </pre>
 
 The product form will log:
-<pre data-javascript>
+<pre data-code-readonly>
 {product: {brand: 'Tesla', name: 'Car'}}
 'isValid: true'
 </pre>
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -244,7 +244,7 @@ since it does rely on defining child modules inside their own class files
 and dynamically importing them.
 
 In a nutshell:
-<pre data-javascript>
+<pre data-code-readonly>
 {
     module: TabContainer,
     items : [

package/resources/data/deck/learnneo/pages/benefits/FourEnvironments.md

@@ -1,7 +1,10 @@
 ## Introduction
 
-Neo.mjs was the very first frontend framework, which enabled full support for a zero builds instant development mode,
-while sticking to the latest ECMAScript features (e.g. the ES6 class system, modules and dynamic imports).
+Neo.mjs was the very first frontend framework, which enabled full support for a ***zero builds instant development mode***,
+while sticking to the latest ECMAScript features (e.g., the ES6 class system, modules and dynamic imports).
+This means that your ***primary development workflow*** with Neo.mjs involves creating and debugging your application
+***entirely within this instant, zero-builds environment***, with builds typically reserved only for ***deployment or
+specific testing scenarios***.
 
 Developers can save massive amounts of time when creating and debugging their apps, but at some point apps want to be
 deployed. To do this right, it is crucial to have an overview of the available environments.
@@ -122,12 +125,8 @@ The Webpack build pipeline in `dist/production` applies aggressive optimizations
 * ***Dead Code Elimination*** (Tree Shaking): Removing any code that is not actually used by the application, further
   reducing bundle size.
 
-### Broadest Browser Compatibility
-
-Bundling typically includes polyfills and transpilation for older ECMAScript features, ensuring your application runs
-smoothly even on browsers that don't fully support the latest web standards (which dist/esm relies upon).
-
 ### Simplified Single-File Deployment
+
 For environments where serving multiple module files isn't optimal, or for legacy server setups, `dist/production`
 provides the convenience of deploying just a few highly optimized bundle files.
 
@@ -185,14 +184,14 @@ it's running in.
 
 * ***Zero Builds Development Mode***: Dynamically loaded code-based modules will, naturally, load from the dev mode
   structure itself, leveraging its instant, direct-from-source capabilities.
-* `dist/esm`: When running in the `dist/esm` environment, dynamically loaded code-based modules will be sourced from
+* ***dist/esm***: When running in the `dist/esm` environment, dynamically loaded code-based modules will be sourced from
   the dist/esm structure. This means your application consistently utilizes native ES Modules for both its core and any
   dynamically extended functionalities.
-* `dist/development`: Surprisingly, when running in the `dist/development` environment (the Webpack-bundled, unminified
+* ***dist/development***: Surprisingly, when running in the `dist/development` environment (the Webpack-bundled, unminified
   version), dynamically loaded code-based modules will revert to loading from the dev mode structure. This is because
   dist/development bundles your primary application code, but it doesn't pre-bundle every potential dynamic extension.
   Relying on the dev mode for these ensures they are unminified and retain debugging fidelity.
-* `dist/production`: Similarly, if your core application is deployed in `dist/production` (the fully optimized Webpack
+* ***dist/production***: Similarly, if your core application is deployed in `dist/production` (the fully optimized Webpack
   bundle), dynamically loaded code-based modules will be sourced from the `dist/esm` structure. This is the optimal fallback,
   as `dist/esm` provides highly performant, modular, and standards-compliant loading for individual files, which is critical
   for code that wasn't part of the initial production bundle.

package/resources/data/deck/learnneo/pages/benefits/Introduction.md

@@ -1,10 +1,42 @@
-Why do organizations choose Neo.mjs?
+## Why Organizations Choose Neo.mjs
 
-- Neo.mjs provides a lightning fast user experience, and is unique in its ability to allow multi-window applications.
+Are your development teams burdened by slow build times, the debugging complexities introduced by transpilation and
+unreliable source maps, or battling UI freezes because ***traditional frameworks (like Angular, React, or Vue) often limit
+your application to a single CPU core?*** Traditional frontend development often comes with these frustrating compromises.
 
-- Neo.mjs applications scale well, from simple to extremely complex
+***Neo.mjs fundamentally redefines the web development experience, offering a solution that is both revolutionary for
+developers and unmatched in performance.***
 
-- Neo.mjs uses standards-based Javascript, without library-specific addons or special transpilation
+### Lightning-Fast Development & App-Centric Creation
 
+Forget the constant interruptions of build processes in your daily workflow. Neo.mjs empowers an instant, zero-builds
+development mode, allowing you to work directly with 100% web standards-based JavaScript. This dramatically accelerates
+your team's velocity and simplifies debugging, letting you focus purely on innovation.
 
-Read on to learn more about Neo.mjs key features and benefits...
+Moreover, Neo.mjs shifts the paradigm: instead of just writing UI components that feel like HTML, you'll ***create entire
+applications***. Thanks to its revolutionary ***Unified Config System***, you define complex application structures—from
+components and layouts to data models—purely through declarative configurations, gaining unparalleled control and efficiency.
+
+### Unparalleled Performance & Scalability
+
+Neo.mjs is engineered from the ground up for extreme performance. Unlike most frameworks that are limited to a single CPU
+core per browser tab, Neo.mjs leverages a ***truly multi-threaded architecture***. Your application logic runs ***off the
+main thread*** across dedicated Web Workers, ensuring your UI remains silky smooth, responsive, and free from freezes,
+even under heavy computation.
+
+This unique design enables your applications to scale not just in raw performance, but also in ***complexity and scope,
+growing effortlessly from a tiny proof-of-concept to a massive enterprise application with hundreds of dynamic views.***
+Features like intelligent lazy loading and runtime-built state trees ensure the framework effortlessly manages large-scale
+application growth and intricate multi-window experiences.
+
+### Architectural Brilliance & Future-Proofing
+
+Built on cutting-edge web standards, Neo.mjs embraces an "Application Worker being the Main Actor" paradigm.
+This robust architecture inherently prevents common issues like UI blocking and memory leaks. Furthermore, Neo.mjs
+uniquely handles ***dynamic, run-time module imports*** without the traditional bundler overhead, offering flexibility
+for advanced scenarios like user-editable code.
+
+---
+
+***Read on to learn more about Neo.mjs's key features and benefits, and how it can transform your web application
+development.***

package/resources/data/deck/learnneo/pages/benefits/MultiWindow.md

@@ -14,7 +14,7 @@ running the code. Even though it's running in a new window, it's still part of t
 (In this case, the app is the web site you're looking at now.) That means both the code in both windows 
 seamlessly share events, data, etc. — the code doesn't care that some code is running in a
 separate window.
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
 second — but we've never actually hit the limit.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import Helix     from '../component/Helix.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/ComponentModels.md

@@ -3,7 +3,7 @@ Neo has a feature that allows shared, bindable, data.
 A _state provider_ — `Neo.state.Provider` — instance holds properties that 
 can be bound to component properties.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import TextField from  '../form/field/Text.mjs';
@@ -55,7 +55,7 @@ usually coded as separate classes.)
 
 Below is another example.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import Panel     from  '../container/Panel.mjs';

package/resources/data/deck/learnneo/pages/gettingstarted/Config.md

@@ -17,7 +17,7 @@ Here's an example of a new component class `Simple` with three config properties
 The `Simple` class introduces syntax. It doesn't have any content, so if you run the code you won't 
 see anything. We'll change that in the next example.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -57,7 +57,7 @@ a _lifecyle property_. A lifecycle property provides methods that are run as the
 updated or accessed. You're free to implment these methods to provide business rules, normalize
 values, or have side-effects, such as updating a view or firing an event.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -110,7 +110,7 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/DescribingTheUI.md

@@ -10,7 +10,7 @@ use to describe the component you're creating> You can also access or set the pr
 
 ## A view with one component
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -46,7 +46,7 @@ Let's put a second button in the container.
 
 ## A view with two components
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

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

@@ -13,7 +13,7 @@ pairs as you need.
 The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
 (The events for any component are documented in the API docs.)
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -52,7 +52,7 @@ that with a _component controller_.
 A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
 instance of its associated controller is automatically created. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Base from '../controller/Component.mjs';
 
 class MainViewController extends Base {
@@ -116,7 +116,7 @@ automatically get lifecycle methods run before the value is assigned, after the
 before the value is accessed. We're using the _after_ method to fire a `change` event.
 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/Extending.md

@@ -5,7 +5,7 @@ to test.
 
 Consider this code. It's a panel with a header and a table. The table has a store. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Table  from '../table/Container.mjs';
@@ -48,7 +48,7 @@ If you wanted, any of the configs can be refactored into their own class. Here,
 have been refactored into their own classes, and the main view is using them. The main view is simpler and
 more abstract, and each class can be reused, tested, and maintained independently. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Store  from '../data/Store.mjs';

package/resources/data/deck/learnneo/pages/gettingstarted/References.md

@@ -10,7 +10,7 @@ There are two common ways of doing that:
 Here's an example with one button. Clicking on the button will disable it. 
 As you can see, the handler uses the component reference pass in via `data.component`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -47,7 +47,7 @@ But what if we need to get a reference to another component in the view? In that
 you tag the component you need with a `reference` config, then use `getReference()` in
 the controller.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -102,7 +102,7 @@ But app logic should never use `Neo.findFirst()` and very rarely use `up()` or `
 The following example gets a reference to the _Learn_ button at the top of this site, and changes its `text`.
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/gettingstarted/Workspaces.md

@@ -40,7 +40,7 @@ as well as create new views classes, their controllers, and other application lo
 
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
@@ -78,7 +78,7 @@ you see how a component is configured let's put a button in the container.
 First, we need to import the class that defines buttons. Then we'll describe the new button in the
 `items:[].`
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
@@ -120,7 +120,7 @@ Here's a simplified running example. The `model` and `controller` are omitted, b
 actually used in the example, and the import root path is different to reflect the location of the 
 Neo.mjs library relative to the examples.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 

package/resources/data/deck/learnneo/pages/guides/ComponentsAndContainers.md

@@ -25,7 +25,7 @@ primitive. Components introduce various properties, such as `width`, `height`, `
 
 Here's a container, with one child item.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -47,7 +47,7 @@ MainView = Neo.setupClass(MainView);
 Components also have an `html`. The `html` property is rarely used, and goes against the abstract philosophy of Neo.mjs, but
 sometimes it's handy as a placeholder as you stub out views.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -77,7 +77,7 @@ some commonly-used layouts.
 
 Fix is used when there's a single child. The component is sized to fit the container.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -98,7 +98,7 @@ MainView = Neo.setupClass(MainView);
 
 With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -125,7 +125,7 @@ MainView = Neo.setupClass(MainView);
 
 A card container has multiple child items, one of which is visible. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -177,7 +177,7 @@ MainView = Neo.setupClass(MainView);
 Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any
 other component in the framework.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {

package/resources/data/deck/learnneo/pages/guides/CustomComponents.md

@@ -9,7 +9,7 @@ Neo.mjs is class-based, which means you're free to extend any component (or any
 
 ## Lifecycle config properties
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {

package/resources/data/deck/learnneo/pages/guides/MainThreadAddonIntro.md

@@ -18,7 +18,7 @@ please return a specified `window` property." Neo.mjs
 lets you do that via `Neo.Main.getByPath()`. For
 example, the following statement logs the URL query string.
 
-<pre data-javascript>
+<pre data-code-readonly>
 const search = await Neo.Main.getByPath({path: 'window.location.search'});
 console.log(search); // Logs the search string
 </pre>

package/resources/data/deck/learnneo/pages/guides/StateProviders.md

@@ -10,7 +10,7 @@ Other libraries or frameworks often call state providers "Stores".
 
 ## Inline State Providers
 ### Direct Bindings
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -58,7 +58,7 @@ We can easily bind 1:1 to specific data props using the following syntax:</br>
 `bind: {text: data => data.hello}`
 
 ### Bindings with multiple data props
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -128,7 +128,7 @@ data.component equals to the Button instance itself. Since the Button instance d
 `getStateProvider()` will return the closest stateProvider inside the parent chain.
 
 ### Nested Inline State Providers
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -203,7 +203,7 @@ We can even change data props which live inside different stateProviders at once
 Hint: Modify the example code (Button handler) to try it out right away!
 
 ### Nested Data Properties
-<pre data-neo>
+<pre data-code-livepreview>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -262,7 +262,7 @@ Or we can directly pass the object containing the change(s):</br>
 Hint: This will not override left out nested data props (lastname in this case).
 
 ### Dialog connecting to a Container
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 import Dialog     from '../dialog/Base.mjs';
 import Panel      from '../container/Panel.mjs';
@@ -384,7 +384,7 @@ MainView = Neo.setupClass(MainView);
 When your stateProviders contain many data props or need custom logic, you can easily move them into their own classes.
 
 ### Direct Bindings
-<pre data-neo>
+<pre data-code-livepreview>
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import Label         from '../component/Label.mjs';

package/resources/data/deck/learnneo/pages/guides/events/CustomEvents.md

@@ -1,7 +1,7 @@
 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>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -35,7 +35,7 @@ MainView = Neo.setupClass(MainView);
 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>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -62,7 +62,7 @@ You can also use the `up.` qualifier to specify a method in the component's pare
 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>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -92,7 +92,7 @@ Despite the examples above, the most correct way of setting up event handlers is
 Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
 also created. 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -134,7 +134,7 @@ a listener procedurally.
 
 Any observable class has an `addListener` method, along with an easier-to-type version called `on`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -171,7 +171,7 @@ MainView = Neo.setupClass(MainView);
 
 The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -241,7 +241,7 @@ will automatically be reflected in the view model.
 To contrast syntax, and to illustrate the simplicity of a binding, let's look at two exmaples of updating a component
 to reflect the value of a text field. THe first example uses events; the second uses bindings.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
@@ -279,7 +279,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';

package/resources/data/deck/learnneo/pages/guides/events/DomEvents.md

@@ -34,7 +34,7 @@ the class. If you add `console.log(this);`, the output is most likely not want y
 For the second Button we are defining a non-bound function, in which case `this` will point
 to the Component instance.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -72,7 +72,7 @@ A good example would be `tab.header.Toolbar`, where clicking on a Button will ch
 You can use string based listeners. In case the handler method lives within the parent tree (any level),
 we need to prefix these listeners with `up.`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -107,7 +107,7 @@ to find the closest match.
 
 A good use case would be a form submit Button, where a click will trigger a communication to the backend.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
 
@@ -146,7 +146,7 @@ MainView = Neo.setupClass(MainView);
 
 We can further delegate listeners to specific DOM nodes within our Component:
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -184,7 +184,7 @@ we will get logs when clicking on the blue div too.
 
 We can prevent listeners from bubbling upwards:
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -237,7 +237,7 @@ While we could just manually order the array inside the following example,
 there can be use cases where multiple subscribers get added at run-time and developers
 can not be sure about the adding order.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {

package/resources/data/deck/learnneo/pages/javascript/Classes.md

@@ -2,7 +2,7 @@ Neo.mjs classes are standard JavaScript classes. Every source file
 you write will be a class definition, extending some Neo.mjs
 class. 
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -29,7 +29,7 @@ and create instances as needed.
 
 Let's add a `name` propery to the class.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -61,7 +61,7 @@ anywhere in the class hierarchy.
 Since our class defines a `name` property, we can specify that when creating
 the instance, using the second argument to the `create` method. 
 
-<pre data-javascript>
+<pre data-code-readonly>
 const myMammal = Neo.create(Mammal, {
     name: 'Creature'
 });
@@ -73,7 +73,7 @@ Since _you_ define those properties, you can
 look for them in class methods and use them as needed.
 Let's add a `speak()` method that uses the `name` property.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {

package/resources/data/deck/learnneo/pages/javascript/NewNode.md

@@ -1,4 +1,4 @@
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -15,7 +15,7 @@ export default Mammal;        // Makes the class available elsewhere.
 
 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {

package/resources/data/deck/learnneo/pages/javascript/Overrides.md

@@ -3,7 +3,7 @@ In Neo.mjs you sub-class and override methods in the usual way.
 Here, we'll extend `Mammal` and override the `speak()` method. 
 (For brevity, we'll exclude `export` and `import` statements.)
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -17,7 +17,7 @@ class Mammal extends Base {
 Neo.setupClass(Mammal);
 </pre>
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -38,7 +38,7 @@ Neo.setupClass(Mammal);
 Any class in the hierarchy is free to add new properties and methods. Let's add
 a property and behavior (method) to the Human class.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -53,7 +53,7 @@ class Mammal extends Base {
 }
 </pre>
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',

package/resources/data/deck/learnneo/pages/tutorials/Earthquakes.md

@@ -187,7 +187,7 @@ later in the lab.
 Use a code editor and look at `workspace/apps/earthquakes/src/view/MainView.mjs`. You'll see the 
 following class definition: 
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import MainStateProvider from './MainStateProvider.mjs';
@@ -223,7 +223,7 @@ that buttons have various configs, such as `text`, which is the button text, `ic
 is typically a FontAwesome CSS class used to show an icon, and `handler`, which specifies
 which method to run when the button is clicked. We'll use `text`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -271,7 +271,7 @@ for the classes you define.
 
 Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
 
-<pre data-javascript>
+<pre data-code-readonly>
 layout: {
     ntype: 'vbox',
     align: 'start'
@@ -422,7 +422,7 @@ its methods. Let's try that out by adding a method.
 
 Edit `apps/earthquakes/view/MainView.mjs` and add a method.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -494,7 +494,7 @@ At this point we have a application with minimal content. You also know how to d
 
 Replace the button with a table by replacing `MainView.mjs` with the following content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Table             from '../../../node_modules/neo.mjs/src/table/Container.mjs';
@@ -582,7 +582,7 @@ Let's review the code and see what it's doing.
 A store is a collection of records. A record is described in the `model` and the model's `fields`.
 Here's the config for the store.
 
-<pre data-javascript>
+<pre data-code-readonly>
 {
     module: Store,
     model: {
@@ -602,7 +602,7 @@ Here's the config for the store.
 </pre>
 
 The feed looks like this.
-<pre data-javascript>
+<pre data-code-readonly>
 {
   "data": [{
       "timestamp": "2024-09-29T16:45:14.000Z",
@@ -632,7 +632,7 @@ of items.
 
 Tables have two key configs: `store` and `columns`. Here's the columns config:
 
-<pre data-javascript>
+<pre data-code-readonly>
 columns: [{
     dataField: "timestamp",
     text: "Date",
@@ -672,7 +672,7 @@ abstract, and it allows those classes to be tested in isolation.
 
 Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
 
 class Table extends Base {
@@ -735,7 +735,7 @@ You can confirm that an instance _was created_ by using the DevTools console and
 <details>
 <summary>Here's the code</summary>
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -858,7 +858,7 @@ State Providers have two key configs: `data` and `stores`.
 
 Add a `stores` property to the state provider config that holds a copy of the store.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -972,7 +972,7 @@ value is assigned to the table's `store` property.
 
 Replace each table's `store` config with the binding.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
@@ -1033,7 +1033,7 @@ Save, refresh, and look at network traffic: you'll see a _single_ call to the we
 
 You can further prove we're using a shared instance by running these statements in the console.
 
-<pre data-javascript>
+<pre data-code-readonly>
 a = Neo.findFirst({ntype:'earthquakes-main'}).stateProvider.stores.earthquakes;
 b = Neo.find({ntype:'earthquakes-table'})[0].store;
 c = Neo.find({ntype:'earthquakes-table'})[1].store;
@@ -1056,7 +1056,7 @@ Since the starter app already provides `MainStateProvider`, all we need to do is
 
 Here's the resulting code you should place into `MainStateProvider.mjs`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import StateProvider from '../../../node_modules/neo.mjs/src/state/Provider.mjs';
 import Store         from '../../../node_modules/neo.mjs/src/data/Store.mjs';
 
@@ -1091,7 +1091,7 @@ export default Neo.setupClass(MainStateProvider);
 
 And you need to remove the `stores` config from the main view as follows.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Container         from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -1188,7 +1188,7 @@ directory, but instead, move the files to their individual locations.
 
 Edit `apps/earthquakes/neo-config.json` and add entries for the Google Maps add-on and the map key.
 
-<pre data-javascript>
+<pre data-code-readonly>
 {
     "appPath": "../../apps/earthquakes/app.mjs",
     "basePath": "../../",
@@ -1227,7 +1227,7 @@ lets us implement those via two properties:
 
 Edit `apps/earthquakes/view/MainStateProvider.mjs` and modify `fields` as follows.
 
-<pre data-javascript>
+<pre data-code-readonly>
 fields: [{
     name: "location",
 }, {
@@ -1278,7 +1278,7 @@ and show it implace of the top table. The map should be centered on Iceland. To
 
 If we replace the top table with the map, `view/MainView.mjs` ends up with this content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Container           from '../container/Base.mjs';
 import Controller          from './MainViewController.mjs';
@@ -1333,7 +1333,7 @@ export default Neo.setupClass(MainView);
  
 Add this config to the map.
 
-<pre data-javascript>
+<pre data-code-readonly>
 bind: {
     markerStore: 'stores.earthquakes'
 }
@@ -1365,7 +1365,7 @@ Table Views fire a select event, passing an object that contains a reference to
 
 Add this table config:
 
-<pre data-javascript>
+<pre data-code-readonly>
 viewConfig: {
     listeners: {
         select: (data) => console.log(data.record)
@@ -1391,7 +1391,7 @@ After changing the value you should immediately see it reflected in the table ro
 
 Now add a `markerClick` listener to the Google Map.
 
-<pre data-javascript>
+<pre data-code-readonly>
 listeners: {
     markerClick: data => console.log(data.data.record)
 }

package/resources/data/deck/learnneo/pages/tutorials/TodoList.md

@@ -3,7 +3,7 @@
 In case you did not work with neo yet, but come from a more HTML driven ecosystem,
 you could achieve the task in a similar way.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import NeoArray  from '../util/Array.mjs';
 import VdomUtil  from '../util/VDom.mjs';
@@ -116,7 +116,7 @@ MainComponent = Neo.setupClass(MainComponent);
 
 content
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import List      from '../list/Base.mjs';
 import Model     from '../data/Model.mjs';

package/resources/data/deck/learnneo/tree.json

@@ -1,5 +1,5 @@
 {"data": [
-    {"name": "Welcome!",                                   "parentId": null,                                 "id": "Welcome" },
+    {"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"},

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

@@ -63,8 +63,21 @@
         color: #3E63DD;
     }
 
-    summary::-webkit-details-marker {
-        display: none;
+    .lab {
+        box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        font-size    : 1em;
+        margin-bottom: 1em;
+        padding      : 2px 16px;
+        transition   : 0.3s;
+
+        &:hover {
+            /* On mouse-over, add a deeper shadow */
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    li::marker {
+        color: #3E63DD;
     }
 
     p {
@@ -78,17 +91,8 @@
         padding      : 12px;
     }
 
-    .lab {
-        box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-        font-size    : 1em;
-        margin-bottom: 1em;
-        padding      : 2px 16px;
-        transition   : 0.3s;
-
-        &:hover {
-            /* On mouse-over, add a deeper shadow */
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-        }
+    summary::-webkit-details-marker {
+        display: none;
     }
 }
 

package/src/DefaultConfig.mjs

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

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

@@ -1,64 +0,0 @@
-Welcome to Neo.mjs! This set of topics contains information to help you use Neo.mjs. 
-
-
-## Topics
-
-### Benefits
-
-Describes technical and business reasons for using Neo.mjs
-
-### Getting Started
-
-Install instructions, along with fundamental concepts that are good to understand before diving into Neo.mjs.
-
-### Tutorials
-
-Hands-on tutorials where you'll code a few simple Neo.mjs applications.
-
-### Guides
-
-These are in-depth discussions of various topics.
-
-## Using these topics
-
-### Layout 
-
-As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
-And content is here in the middle. There are "next" and "previous" buttons at the bottom of each page, to make it
-easier to read several topics in sequence. 
-
-### Disclosure widgets
-
-Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
-where we want to present high-level points and reveal details when the disclosure is expanded.
-
-<details>
-<summary>This is a disclosure widget</summary>
-<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
-</details>
-
-### Runnable examples
-
-Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
-
-You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
-icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
-and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
-
-<pre data-neo>
-import Button    from '../button/Base.mjs';
-import Container from '../container/Base.mjs';
-
-class MainView extends Container {
-    static config = {
-        className: 'Example.view.MainView',
-        layout   : {ntype:'vbox', align:'start'},
-        items    : [{
-            module : Button,
-            text   : 'Button'
-        }]
-    }
-}
-
-MainView = Neo.setupClass(MainView);
-</pre>