neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.2

package/learn/benefits/Features.md

@@ -1,46 +1,64 @@
-###Multi-Window Apps
 
-- No need for a native shell (such as Electron)
-- Sharing data across Windows
-- Sharing state across Windows
-- Moving components across windows while keeping the same JS instances
+Neo.mjs is engineered to address the most pressing challenges in modern web development, offering a suite of features
+that deliver unparalleled performance, developer productivity, and architectural flexibility. Below are the core
+capabilities that set Neo.mjs apart.
 
-###Multi-threading
+## Multi-Window Applications
 
-- Following the OMT (Off the Main-Thread) paradigm
-- Your apps & the framework live within an application worker
-- Non-blocking, no-freeze, user interaction responses, even for heavy data i/o, processing, and intensive, complex screen updating
-- Additional Workers for OffscreenCanvas, Data, Delta-Updates & Tasks
-- A ServiceWorker connected to the App Worker for predictive Caching
+Neo.mjs provides native, robust support for applications spanning multiple browser windows without the need for external
+shells like Electron. This enables seamless data and state sharing across windows, allowing components to be moved between
+them while maintaining their JavaScript instances. This capability is crucial for complex enterprise applications requiring
+sophisticated multi-screen workflows. For more details, see 
+[Multi-Window Applications](#/learn/benefits.MultiWindow).
 
-###Modern JavaScript directly in your Browser
+## True Multi-threading (Off-The-Main-Thread Architecture)
 
-- The Dev-Mode runs without the need for Transpilations or Compilations
-- Using the latest ECMAScript Features, as soon as the Browser Support is there
-- Simple and powerful Debugging
-- Reduced Development Costs
+At the heart of Neo.mjs is its revolutionary Off-Main-Thread (OMT) paradigm. Your entire application, including the
+framework itself, runs within a dedicated application worker. This offloads all business logic, data processing, and
+intensive UI updates from the main thread, ensuring a consistently non-blocking, freeze-free user experience, even during
+heavy computations or data I/O. Neo.mjs further enhances this with additional workers for OffscreenCanvas, data handling,
+delta-updates, and tasks, alongside a ServiceWorker for predictive caching. Learn more about this in 
+[Off the Main Thread](#/learn/benefits.OffTheMainThread) and
+[Extreme Speed](#/learn/benefits.Speed).
 
+## Modern JavaScript Development
 
-###Powerful Component-Library
+Embrace the future of web development with Neo.mjs. Its development mode operates without the need for transpilation or
+compilation, allowing you to work directly with 100% web standards-based JavaScript. This means instant feedback, simpler
+debugging, and the ability to leverage the latest ECMAScript features as soon as browser support is available,
+significantly reducing development costs and accelerating iteration cycles. Discover the details in 
+[4 Environments](#/learn/benefits.FourEnvironments) and
+[Quick Application Development](#/learn/benefits.Quick).
 
-- Declarative component-trees
-- High order components
-- Many out-of-the-box Components, including nested lazy-loaded forms
-- Multiple themes, which can get nested
+## Powerful Component Library
 
-###Elegant State Management
+Neo.mjs offers a comprehensive and highly performant component library. Build complex user interfaces with declarative
+component trees and high-order components. The library includes a wide array of out-of-the-box components, such as 
+nested lazy-loaded forms, and supports multiple theming options that can be nested for granular control over your
+application's aesthetics. Explore the forms engine in 
+[Forms Engine](#/learn/benefits.FormsEngine).
 
-- Multiple communicating state-providers
-- Observable
-- Supporting different architectures like MVVM without enforcing them
+## Elegant State Management
 
+Manage your application's data with Neo.mjs's elegant state management system. It supports multiple communicating state
+providers and leverages observable patterns for reactive data flows. This flexible approach allows you to adopt various
+architectural patterns, like MVVM, without being rigidly enforced, giving you the freedom to choose the best fit for
+your project. More on this in 
+[Quick Application Development](#/learn/benefits.Quick).
 
-###Core Features
+## Core Architectural Features
 
-- RPC Layer (cross-realm, including Backends)
-- Extensibility
-- Scalability
-- Class Config System
-- Drag & Drop'
-- Mixins, Plugins & Main-Thread Addons
+*   **RPC Layer**: A robust Remote Procedure Call (RPC) layer facilitates seamless, cross-realm communication,
+  extending even to backend integrations. Learn more in 
+  [The Neo.mjs RPC Layer](#/learn/benefits.RPCLayer).
+*   **Extensibility & Scalability**: The framework is designed for maximum extensibility, allowing you to easily integrate
+  custom logic and scale your applications from small prototypes to large-scale enterprise solutions.
+*   **Class Config System**: A unified, declarative class config system simplifies component definition and management,
+  ensuring consistency across your entire application.
+*   **Drag & Drop**: Built-in support for intuitive drag-and-drop interactions enhances user experience.
+*   **Mixins, Plugins & Main-Thread Addons**: A rich set of tools for extending functionality, integrating third-party
+  libraries, and interacting with the main browser thread when necessary.
+
+Neo.mjs's feature set is meticulously crafted to provide a superior development experience and deliver high-performance,
+scalable, and maintainable web applications that stand out in today's demanding digital landscape.
 

package/learn/benefits/FormsEngine.md

@@ -1,9 +1,25 @@
-## Forms include a State-Provider
 
-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.
+## Simplifying Complex Data Input
 
-<pre data-code-livepreview>
+Building robust and user-friendly forms is often a significant challenge in web development. Traditional approaches can
+lead to complex state management, difficult validation, and performance bottlenecks, especially with large or dynamic
+forms. The Neo.mjs Forms Engine is designed from the ground up to simplify these complexities, offering a powerful,
+declarative, and highly efficient solution for all your data input needs.
+
+### Forms Include a State-Provider: Effortless Data Management
+
+One of the most compelling features of the Neo.mjs Forms Engine is its integrated state management. You don't need to
+manually define a separate state tree or connect external state management libraries. Instead, the form itself acts as
+a state provider, automatically managing the data for its fields.
+
+This is achieved by simply using namespaces within the `name` attribute of each field. The form engine intelligently
+structures your data based on these names, providing a clean, hierarchical data object.
+
+**Benefit**: This significantly reduces boilerplate code and simplifies data flow. Developers can focus on defining the
+form structure and validation rules, rather than wrestling with data synchronization. For businesses, this means faster
+development cycles and fewer bugs related to data handling.
+
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import FormContainer from '../form/Container.mjs';
 import TextField     from '../form/field/Text.mjs';
@@ -38,18 +54,19 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
-## Forms can get validated without being mounted
+### Forms Can Be Validated Without Being Mounted: Flexible UI Design
 
-Neo.mjs Forms live as a pure abstraction layer inside JavaScript.
-The following example is similar to the first one, but this time the form instance will not get mounted.
-Getting the field values still works like before.
+Neo.mjs forms exist as a pure abstraction layer within JavaScript, decoupled from their DOM representation. This unique
+capability allows forms to be validated and their values retrieved even if they are not currently mounted in the DOM.
 
-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.
+**Benefit**: This is incredibly powerful for complex user interfaces, such as multi-step wizards, tabbed forms, or
+forms with conditionally rendered sections. You can maintain the state and validate parts of a form that are not
+currently visible, ensuring data integrity without the performance overhead of rendering unnecessary DOM elements.
+For users, this translates to a smoother, more responsive experience, as the UI remains lightweight.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -89,43 +106,45 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
-## Nested Forms
+### Nested Forms: Unprecedented Structural Flexibility
 
-Inside the DOM, it is impossible to nest form tags.
-Neo forms can get easily mapped to other nodes:</br>
-`{module: FormContainer, tag: 'div'}`
+Unlike the limitations of HTML, where nesting `<form>` tags is not permitted, Neo.mjs allows for true nested forms.
+This is achieved by mapping form containers to generic DOM nodes (e.g., `{module: FormContainer, tag: 'div'}`).
 
-This allows us to nest forms and validate or retrieve form values of each nested form or
-for the top-level form (including all nested items) as we see fit.
+**Benefit**: This capability provides unparalleled structural flexibility, enabling you to build highly modular and
+complex forms. You can validate or retrieve values from individual nested forms, or from the top-level form (which
+includes all nested items), as needed. This promotes better organization of large forms, improves maintainability,
+and allows for fine-grained control over validation and data submission. For complex business processes, this means
+forms can accurately reflect intricate data relationships.
 
 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-code-readonly>
+```javascript readonly
 {
     account: 'My Account',
     product: {brand: 'Tesla', name: 'Car'},
     user   : {firstname: 'John', lastname: null}
 }
 'isValid: false'
-</pre>
+```
 
 The user form will log:
-<pre data-code-readonly>
+```javascript readonly
 {user: {firstname: 'John', lastname: null}}
 'isValid: false'
-</pre>
+```
 
 The product form will log:
-<pre data-code-readonly>
+```javascript readonly
 {product: {brand: 'Tesla', name: 'Car'}}
 'isValid: true'
-</pre>
+```
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -223,7 +242,7 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Bonus: Inspect the DOM Inside the `TabContainer`.
 You will notice that only the active Tab is mounted inside the DOM.
@@ -231,20 +250,21 @@ You will notice that only the active Tab is mounted inside the DOM.
 1. We can still get field values of unmounted forms
 2. We can still validate unmounted forms
 
-## Nested lazy-loaded Forms
+### Nested Lazy-Loaded Forms: Optimizing Performance for Complex UIs
 
-If you look close into the `Button` handlers of the last example:
-`getValues()` and `validate()` are both async.
+If you look closely at the `Button` handlers in the last example, you'll notice that `getValues()` and `validate()`
+are both `async` methods. The reason for this is that `form.getFields()` itself is also asynchronous: it will
+lazy-load (but not necessarily mount) missing fields when needed.
 
-The reason for this is that `form.getFields()` itself is async as well:
-It will lazy-load (but not necessarily mount) missing fields when needed.
+**Benefit**: This asynchronous, lazy-loading mechanism is crucial for optimizing the performance of complex forms.
+Instead of loading all form fields and their associated logic upfront, Neo.mjs only loads what's necessary, when it's
+needed. This results in significantly faster initial load times, reduced memory footprint, and a more responsive
+application, especially for forms with many fields or conditional sections.
 
-The lazy-loading use case is not easy to display inside the `LivePreview`,
-since it does rely on defining child modules inside their own class files
-and dynamically importing them.
+The lazy-loading use case is not easy to display inside the `LivePreview`, since it does rely on defining child modules
+inside their own class files and dynamically importing them. However, the pattern is straightforward:
 
-In a nutshell:
-<pre data-code-readonly>
+```javascript readonly
 {
     module: TabContainer,
     items : [
@@ -252,4 +272,14 @@ In a nutshell:
         {module: () => import('./MyChildForm2.mjs')}
     ]
 }
-</pre>
+```
+
+This allows for highly modular and performant form structures, where even entire sections of a form can be loaded
+on-demand, further enhancing the user experience and application efficiency.
+
+## Conclusion: A Comprehensive Solution for Form Development
+
+The Neo.mjs Forms Engine provides a comprehensive and intuitive solution for building forms of any complexity.
+By offering integrated state management, the ability to validate unmounted forms, true nested forms, and intelligent
+lazy-loading, Neo.mjs empowers developers to create highly performant, maintainable, and user-friendly data input
+experiences. This translates directly into increased developer productivity and a superior end-user experience.

package/learn/benefits/MultiWindow.md

@@ -1,10 +1,36 @@
-Neo.mjs applications can also launch using <i>shared web workers</i>, which allows you to have a single 
-application run in multiple browser windows; those windows can be moved to multiple monitors.
+## Multi-Window Applications: Unleashing Desktop-Class Experiences
 
-For example, you can have a data analysis application with a control panel on one monitor, 
-tabular data in another, and charts on another &mdash; all sharing the same data, handling events
-across windows, running seamlessly as a single application. 
+Traditional web applications are often confined to a single browser window or tab, limiting user productivity and the
+ability to manage complex workflows. Neo.mjs shatters this limitation by providing native, robust support for
+multi-window applications, enabling truly desktop-class experiences directly within the browser.
 
+Neo.mjs applications can seamlessly launch and operate across multiple browser windows, leveraging **shared web workers**.
+This allows a single application instance to run concurrently in various windows, which can even be moved to different
+monitors, all while sharing the same underlying data and application state.
+
+### Key Advantages & Use Cases:
+
+*   **Enhanced Productivity**: Users can arrange different parts of an application across multiple screens, optimizing
+    their workspace for complex tasks. Imagine a financial trading platform with real-time charts on one monitor, order
+    books on another, and a control panel on a third.
+
+*   **Seamless Data & State Sharing**: All open windows remain synchronized, sharing the same data and application state
+    in real-time. This eliminates the need for complex inter-window communication logic, as events and data flow effortlessly
+    across all connected contexts.
+
+*   **Rich User Experiences**: Beyond data analysis, this capability is transformative for applications like:
+    *   **Creative Suites**: Designers working with multiple canvases or tool palettes.
+    *   **Control Centers**: Operators monitoring various system dashboards simultaneously.
+    *   **Educational Platforms**: Students viewing course material, interactive exercises, and communication tools side-by-side.
+    *   **Customer Service Desks**: Agents managing multiple customer interactions or data sources concurrently.
+
+*   **Consistent JavaScript Instances**: Components can even be moved across windows while retaining their original
+    JavaScript instances, ensuring continuity and preventing unnecessary re-initialization.
+
+**Benefit**: For businesses, this translates to a significantly more powerful and intuitive user experience, leading to
+increased user satisfaction, reduced training times, and the ability to handle more complex tasks efficiently. For
+developers, it simplifies the creation of sophisticated multi-screen layouts, as the framework handles the underlying
+communication complexities.
 
 <details>
 <summary><h3>Example</h3></summary>
@@ -14,7 +40,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. &mdash; the code doesn't care that some code is running in a
 separate window.
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -31,6 +57,6 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 </details>

package/learn/benefits/OffTheMainThread.md

@@ -89,13 +89,13 @@ The worst case that could happen now is that your app worker will slow down and
 this will not affect your UI (rendering thread → main).
 Probably the best solution for single page apps (SPAs) as well as multi-window apps (MWAs) looks like this:
 
-<pre data-neo-component>
+```json neo-component
 {
     "cls" : "neo-worker-setup",
     "tag" : "element-loader",
     "vdom": {"src": "./resources/images/workers-focus.svg"}
 }
-</pre>
+```
 
 To prevent the app worker from handling too much logic, we can optionally spawn more workers.
 Each thread has its fixed scope. Let us take a quick look into each of them.

package/learn/benefits/Quick.md

@@ -1,16 +1,49 @@
-Neo.mjs applications can be written quickly thanks to its syntax, features, and debugging convenience.
+## Rapid Application Development with Neo.mjs
 
-## Property lifecycle hooks
-Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes,
-which makes it easy to handle value validation and transformation, and react to changes.
+In today's fast-paced development landscape, speed and efficiency are paramount. Neo.mjs is engineered to dramatically
+accelerate the application development process, enabling teams to build high-quality web applications faster and with
+less effort. This rapid development capability stems from its intuitive syntax, powerful features, and unparalleled
+debugging convenience.
 
-## Elegant state management
-Neo.mjs has elegant yet powerful state management features that make it easy to create shared, bindable data.
-For example, if two components are bound to the same property, a change to the property will automatically be
-applied to both components.
+### Property Lifecycle Hooks: Streamlined Data Flow and Validation
 
-## Simple and powerful debugging
-Debugging is easy because Neo.mjs uses standard JavaScript, the Neo.mjs class config system, and built-in 
-debugging tools. For example, while developing an application you can click on a component, and in the debugger
-easily inspect the component and update its properties — these updates are immediately reflected in the running application.
+Neo.mjs classes provide sophisticated property lifecycle hooks (e.g., `beforeGet`, `beforeSet`, `afterSet`). These
+allow developers to precisely control how properties are accessed, validated, transformed, and reacted to. This means
+you can easily implement complex logic for data validation, computed properties, or side effects directly within the
+property definition.
+
+**Benefit**: By centralizing property logic, these hooks significantly reduce boilerplate code and the potential for
+bugs. Developers spend less time writing repetitive validation or update logic and more time on core features, leading
+to faster development cycles and more robust applications.
+
+### Elegant State Management: Simplified Data Synchronization
+
+Neo.mjs offers an elegant yet powerful approach to state management, making it effortless to create shared, bindable
+data across your application. When multiple components are bound to the same data property, any change to that property
+is automatically and reactively applied to all bound components.
+
+**Benefit**: This eliminates the complexities of manual data synchronization and prop drilling, common pain points in
+other frameworks. Developers can build highly interactive UIs with confidence, knowing that data consistency is handled
+automatically. This translates to faster feature implementation, reduced debugging time, and a more predictable application
+state, ultimately accelerating time-to-market.
+
+### Simple and Powerful Debugging: Instant Feedback and Control
+
+Debugging in Neo.mjs is exceptionally straightforward and efficient. Leveraging standard JavaScript, the intuitive
+Neo.mjs class config system, and built-in debugging tools, developers gain unprecedented control and insight into their
+applications. For instance, during development, you can directly select any component in the browser's developer console,
+inspect its properties, and even update its reactive configurations on the fly. These changes are immediately reflected
+in the running application.
+
+**Benefit**: This live interaction and direct manipulation capability drastically reduces the debugging cycle. Developers
+can quickly pinpoint issues, experiment with different states, and validate changes without constant recompilations or
+reloads. This leads to a significantly more productive and less frustrating development experience, allowing teams to
+resolve issues faster and deliver features more reliably.
+
+## Conclusion: Accelerating Your Development Workflow
+
+Neo.mjs's focus on streamlined property management, elegant state synchronization, and powerful debugging tools collectively
+contributes to a development workflow that is both rapid and enjoyable. By minimizing common development hurdles, Neo.mjs
+empowers teams to deliver high-quality, performant web applications with unprecedented speed and efficiency, providing a
+clear competitive advantage.
 

package/learn/benefits/RPCLayer.md

@@ -0,0 +1,75 @@
+## Seamless Communication Across Threads and Beyond
+
+In a multi-threaded architecture like Neo.mjs, efficient and seamless communication between different execution contexts
+(Web Workers, Main Thread, and even backend services) is paramount. The Neo.mjs Remote Procedure Call (RPC) Layer
+provides a powerful abstraction that simplifies this complex inter-thread and inter-process communication, allowing
+developers to invoke methods on remote objects as if they were local.
+
+### Abstracting Cross-Worker Communication
+
+At its core, the RPC Layer eliminates the need for developers to manually handle `postMessage` calls, message parsing,
+and promise resolution when communicating between Web Workers. Whether it's your App Worker interacting with the VDom
+Worker to update the UI, or with the Data Worker to fetch and process information, the RPC Layer provides a clean,
+promise-based API.
+
+**Benefit**: This abstraction significantly reduces boilerplate code and cognitive load. Developers can focus on the
+business logic of their application rather than the intricacies of message passing between threads. This leads to faster
+development, more readable code, and fewer errors related to inter-thread communication.
+
+### Extending to Backend Integration
+
+The power of the Neo.mjs RPC Layer extends beyond just inter-worker communication within the browser. It provides a
+consistent mechanism for interacting with backend services. This means the same patterns and mental model used for
+communicating with a Data Worker can be applied to making API calls to your server.
+
+**Benefit**: A unified approach to both frontend inter-thread communication and backend integration streamlines the
+development process. It reduces the learning curve for new team members and ensures consistency in how data and
+commands are exchanged across the entire application stack.
+
+### Key Advantages:
+
+*   **Simplicity**: Invoke remote methods with a simple function call, receiving a promise that resolves with the result.
+    The RPC Layer handles serialization, deserialization, and message routing automatically.
+*   **Reduced Boilerplate**: Eliminates the need for manual message listeners, dispatchers, and complex state management
+    around asynchronous operations.
+*   **Improved Readability & Maintainability**: Code becomes cleaner and easier to understand, as the underlying
+    communication mechanism is abstracted away.
+*   **Performance**: Designed for efficiency, the RPC Layer ensures that inter-thread communication is as performant as
+    possible, minimizing overhead and contributing to the overall responsiveness of Neo.mjs applications.
+*   **Error Handling**: Provides robust error propagation across thread boundaries, making it easier to debug and handle
+    issues that arise during remote method invocations.
+
+### Conceptual Example: Consistent API for Internal and External Calls
+
+Imagine calling a method on a data service defined within the Data Worker realm (e.g., `MyApp.data.UserService`) from your App Worker:
+
+```javascript readonly
+// In your App Worker code
+const userData = await MyApp.data.UserService.fetchUser(userId);
+console.log(userData);
+```
+
+Now, consider triggering a backend request using the same RPC pattern, as seen in `apps/colors/view/ViewportController.mjs`:
+
+```javascript readonly
+// In apps/colors/view/ViewportController.mjs
+response = await Colors.backend.ColorService.read({
+    amountColors : stateProvider.getData('amountColors'),
+    amountColumns: stateProvider.getData('amountColumns'),
+    amountRows   : stateProvider.getData('amountRows')
+});
+```
+
+Notice how the syntax for invoking a method on a backend service (`Colors.backend.ColorService.read`) is virtually
+identical to invoking a method on an internal worker service (`Neo.worker.Data.getService('UserService').fetchUser`).
+This consistency is a core strength of the Neo.mjs RPC Layer.
+
+Behind the scenes, for both internal and external remote calls, the RPC Layer handles:
+1. Serializing the method call and arguments.
+2. Sending a message to the target (worker or backend).
+3. The target receiving the message, invoking the method.
+4. Serializing the result and sending it back.
+5. Resolving the promise in the caller with the received data.
+
+This powerful abstraction is a cornerstone of Neo.mjs's multi-threaded architecture, enabling developers to build
+complex, highly responsive, and scalable applications with remarkable ease.

package/learn/benefits/Speed.md

@@ -1,15 +1,20 @@
-The Neo.mjs web-worker processes are automatically run in parallel, on separate CPU cores.
+The Neo.mjs architecture leverages web workers to run application logic, data processing,
+and even parts of the rendering pipeline in parallel, on separate CPU cores.
+This offloads heavy computations from the main thread, ensuring the UI remains responsive.
 
-By contrast, other JavaScript frameworks run in a single thread, so all business logic, 
-data handling, and DOM rendering compete for CPU resources.
+By contrast, most other JavaScript frameworks operate predominantly within a single main thread.
+This means all business logic, data handling, and DOM rendering compete for the same CPU resources,
+often leading to a "janky" or unresponsive user interface during intensive operations.
 
-This means Neo.mjs applications run and render faster. This is 
-particularly beneficial for processor- and data-intensive applications, 
-and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
-easily apply over 20,000 DOM updates per second. 
+This multi-threaded approach allows Neo.mjs applications to run and render significantly faster.
+This is particularly beneficial for processor- and data-intensive applications, as well as those
+requiring rapid UI updates. In internal testing, Neo.mjs applications have consistently
+demonstrated the ability to easily apply over 20,000 DOM updates per second without
+compromising user experience.
 
-If the default four threads aren't enough, you're free to launch additional web-worker threads 
-to run other specialized logic. 
+Should your application demand even greater parallel processing power, Neo.mjs provides the
+flexibility to launch additional web worker threads to handle specialized logic or
+further distribute computational load. 
 
 
 <details><summary>Example</summary>
@@ -20,7 +25,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom &mdash; 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 &mdash; but we've never actually hit the limit.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import Helix     from '../component/Helix.mjs';
 
@@ -43,7 +48,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 

package/learn/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-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import TextField from  '../form/field/Text.mjs';
@@ -35,7 +35,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 View model properties are visible down the containment hierarchy:
 Properties introduced in a parent container will be available to any child component, and properties
@@ -55,7 +55,7 @@ usually coded as separate classes.)
 
 Below is another example.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import Panel     from  '../container/Panel.mjs';
@@ -107,7 +107,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 In this case, the main view has three child items of type `MyPanel`, each containing a label. 
 The main view has a state provider with a `foo` property, and the third child has its own state provider with a `foo` property.

package/learn/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-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -48,7 +48,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Detecting when a value changes
 
@@ -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-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -98,7 +98,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 This time if you run the code you'll see "hi there" in the view. That's because the Simple instance is
 configured with `bar: 'hi there'`, and since that's a lifecycle property the `afterSetBar()` method
@@ -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-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -149,5 +149,5 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```