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

package/examples/preloadingAssets/view/MainContainer.mjs

@@ -16,10 +16,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.preloadingAssets.view.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**

package/examples/stateProvider/advanced/MainContainer.mjs

@@ -18,6 +18,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.advanced.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/dialog/EditUserDialog.mjs

@@ -23,10 +23,12 @@ class EditUserDialog extends Dialog {
         },
         /**
          * @member {Neo.controller.Component} controller=EditUserDialogController
+         * @reactive
          */
         controller: EditUserDialogController,
         /**
          * @member {String} title='Edit User'
+         * @reactive
          */
         title: 'Edit User',
         /**

package/examples/stateProvider/dialog/MainContainer.mjs

@@ -16,6 +16,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.dialog.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/extendedClass/MainContainer.mjs

@@ -17,10 +17,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.extendedClass.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object|Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider,
         /**

package/examples/stateProvider/inline/MainContainer.mjs

@@ -17,6 +17,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.inline.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/inlineNoStateProvider/MainContainer.mjs

@@ -16,6 +16,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.inlineNoStateProvider.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/inlineNoStateProvider/MainContainerController.mjs

@@ -13,10 +13,12 @@ class MainContainerController extends Controller {
         className: 'Neo.examples.stateProvider.inlineNoStateProvider.MainContainerController',
         /**
          * @member {String} button1Text_='Button 1'
+         * @reactive
          */
         button1Text_: 'Button 1',
         /**
          * @member {String} button1Text_='Button 2'
+         * @reactive
          */
         button2Text_: 'Button 2'
     }

package/examples/stateProvider/multiWindow/EditUserDialog.mjs

@@ -23,10 +23,12 @@ class EditUserDialog extends Dialog {
         },
         /**
          * @member {Neo.controller.Component} controller=EditUserDialogController
+         * @reactive
          */
         controller: EditUserDialogController,
         /**
          * @member {String} title='Edit User'
+         * @reactive
          */
         title: 'Edit User',
         /**
@@ -49,6 +51,7 @@ class EditUserDialog extends Dialog {
         }],
         /**
          * @member {Object} wrapperStyle={height: '300px',width : '400px'}
+         * @reactive
          */
         wrapperStyle: {
             height: '300px',

package/examples/stateProvider/multiWindow/MainContainer.mjs

@@ -27,6 +27,7 @@ class MainContainer extends Panel {
         },
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/multiWindow/Viewport.mjs

@@ -14,6 +14,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.stateProvider.multiWindow.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**

package/examples/stateProvider/nestedData/MainContainer.mjs

@@ -17,6 +17,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.stateProvider.nestedData.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**

package/examples/stateProvider/table/MainContainer.mjs

@@ -19,6 +19,7 @@ class MainContainer extends Viewport {
         layout: {ntype: 'fit'},
         /**
          * @member {Object|Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider,
         /**

package/examples/table/covid/MainContainer.mjs

@@ -14,10 +14,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.table.covid.MainContainer',
         /**
          * @member {Object[]} items=[TableContainer]
+         * @reactive
          */
         items: [TableContainer],
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**

package/examples/table/covid/Store.mjs

@@ -18,6 +18,7 @@ class Store extends BaseStore {
         keyProperty: 'country',
         /**
          * @member {Neo.data.Model} model=Model
+         * @reactive
          */
         model: Model,
         /**

package/examples/table/covid/TableContainer.mjs

@@ -16,6 +16,7 @@ class TableContainer extends BaseTableContainer {
         className: 'Neo.examples.table.covid.TableContainer',
         /**
          * @member {String[]} cls=['covid-country-table']
+         * @reactive
          */
         cls: ['covid-country-table'],
         /**
@@ -99,10 +100,12 @@ class TableContainer extends BaseTableContainer {
         }],
         /**
          * @member {Neo.controller.Component} controller=TableContainerController
+         * @reactive
          */
         controller: TableContainerController,
         /**
          * @member {Object[]} store=MainStore
+         * @reactive
          */
         store: Store
     }

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -28,14 +28,17 @@ class EditUserDialog extends Dialog {
         },
         /**
          * @member {Boolean} modal=true
+         * @reactive
          */
         modal: true,
         /**
          * @member {Record|null} record_=null
+         * @reactive
          */
         record_: null,
         /**
          * @member {String} title='Edit User'
+         * @reactive
          */
         title: 'Edit User',
         /**

package/examples/table/nestedRecordFields/Viewport.mjs

@@ -16,6 +16,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.table.nestedRecordFields.Viewport',
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider,
         /**

package/examples/todoList/version1/MainComponent.mjs

@@ -75,7 +75,7 @@ class MainComponent extends Component {
                     style: {cursor: 'pointer', width: '20px'}
                 }, {
                     vtype: 'text',
-                    html : item.text
+                    text : item.text
                 }]
             })
         });

package/examples/toolbar/breadcrumb/view/MainContainer.mjs

@@ -15,6 +15,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.toolbar.breadcrumb.view.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
@@ -102,6 +103,7 @@ class MainContainer extends Viewport {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'start'},
         /**

package/examples/toolbar/paging/store/Users.mjs

@@ -27,6 +27,7 @@ class Users extends Store {
         autoSort: false,
         /**
          * @member {Neo.data.Model} model=UserModel
+         * @reactive
          */
         model: UserModel,
         /**

package/examples/toolbar/paging/view/AddUserDialog.mjs

@@ -46,14 +46,17 @@ class AddUserDialog extends Dialog {
         }],
         /**
          * @member {Boolean} resizable=false
+         * @reactive
          */
         resizable: false,
         /**
          * @member {String} title='Edit User'
+         * @reactive
          */
         title: 'Add User',
         /**
          * @member {Object} wrapperStyle={height:'300px',width:'400px'}
+         * @reactive
          */
         wrapperStyle: {
             height: '300px',

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -17,6 +17,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.toolbar.paging.view.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
@@ -89,10 +90,12 @@ class MainContainer extends Viewport {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider,
         /**

package/examples/treeAccordion/MainContainer.mjs

@@ -117,7 +117,7 @@ class MainContainer extends ConfigurationViewport {
 
                 store: store,
 
-                /**
+                /*
                  * We are using data-binding.
                  * Here is an example for listener and controller
                  */
@@ -180,7 +180,7 @@ class MainContainer extends ConfigurationViewport {
 
     /**
      *
-     * @param data
+     * @param {Object} data
      */
     onRemoveDomButtonClick(data) {
         let accordion = this.exampleComponent.items[0];

package/examples/worker/task/MainContainer.mjs

@@ -14,6 +14,7 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.worker.task.MainContainer',
         /**
          * @member {Object} layout={ntype:'vbox'}
+         * @reactive
          */
         layout: {ntype: 'vbox'},
         /**

package/learn/Glossary.md

@@ -1,3 +1,4 @@
+# Glossary
 
 This glossary provides definitions for key terms and concepts used throughout the Neo.mjs documentation. Understanding
 these terms is essential for grasping the framework's unique architecture and capabilities.

package/learn/UsingTheseTopics.md

@@ -1,3 +1,4 @@
+# Using These Topics
 
 ***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

package/learn/benefits/ConfigSystem.md

@@ -1,3 +1,5 @@
+# Unified Config System
+
 A Declarative Approach to Application Building
 
 ## Introduction

package/learn/benefits/Effort.md

@@ -1,3 +1,4 @@
+# Complexity and Effort
 
 ## A Strategic Investment
 

package/learn/benefits/Features.md

@@ -1,3 +1,4 @@
+# Features and Benefits Summary
 
 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

package/learn/benefits/FormsEngine.md

@@ -1,3 +1,4 @@
+# Forms Engine
 
 ## Simplifying Complex Data Input
 

package/learn/benefits/FourEnvironments.md

@@ -1,3 +1,5 @@
+# 4 Environments
+
 ## Introduction
 
 Neo.mjs was the very first frontend framework, which enabled full support for a ***zero builds instant development mode***,

package/learn/benefits/Introduction.md

@@ -1,3 +1,5 @@
+# Introduction
+
 ## Why Organizations Choose Neo.mjs
 
 Are your development teams burdened by slow build times, the debugging complexities introduced by transpilation and

package/learn/benefits/MultiWindow.md

@@ -1,4 +1,6 @@
-## Multi-Window Applications: Unleashing Desktop-Class Experiences
+# Multi-Window Applications
+
+## Unleashing Desktop-Class Experiences
 
 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

package/learn/benefits/OffTheMainThread.md

@@ -1,3 +1,5 @@
+# Off the Main Thread
+
 ## How many Cores are on a Computer or Smartphone?
 In case you are using a Mac, you can click on the top-left Apple Icon,
 then on "About this Mac" and it will show you something like:

package/learn/benefits/Quick.md

@@ -1,3 +1,5 @@
+# Quick Application Development
+
 ## Rapid Application Development with Neo.mjs
 
 In today's fast-paced development landscape, speed and efficiency are paramount. Neo.mjs is engineered to dramatically

package/learn/benefits/RPCLayer.md

@@ -1,3 +1,5 @@
+# RPC Layer
+
 ## Seamless Communication Across Threads and Beyond
 
 In a multi-threaded architecture like Neo.mjs, efficient and seamless communication between different execution contexts

package/learn/benefits/Speed.md

@@ -1,3 +1,5 @@
+# Extreme Speed
+
 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.

package/learn/comparisons/NeoVsAngular.md

@@ -0,0 +1,90 @@
+# Neo.mjs vs Angular
+
+Neo.mjs is a comprehensive JavaScript ecosystem for building high-performance, multi-threaded web applications. Unlike frameworks like Angular that require a complex, mandatory build process even for development, Neo.mjs is a self-contained system with **zero runtime dependencies**. It provides a complete, out-of-the-box solution that includes four distinct development and deployment environments, from a revolutionary zero-builds development mode to thread-optimized production bundles.
+
+This article provides a focused comparison between the Neo.mjs ecosystem and Angular. While both are used to build modern user interfaces, they employ fundamentally different architectural and rendering strategies to achieve their goals. We will explore their approaches to **rendering, reactivity, and DOM updates**, highlighting the trade-offs between Angular's Main-Thread-bound, build-centric model and Neo.mjs's holistic, worker-based paradigm.
+
+## Core Similarities: Building Modern UIs
+
+Both Neo.mjs and Angular share common ground in building modern user interfaces:
+
+*   **Component-Based Architecture (with a distinction):** Both frameworks promote building UIs as a composition of reusable components. However, Neo.mjs extends this concept with `Neo.core.Base`, allowing any class-based entity (like controllers, models, or routers) to leverage the framework's powerful class system, even if they don't directly render UI. This contrasts with frameworks where non-visual logic might often be shoehorned into component structures.
+*   **Declarative UI:** Developers describe *what* the UI should look like for a given state, and the framework handles *how* to update the DOM.
+*   **Reactive Programming:** Both leverage reactive programming principles. Angular heavily uses RxJS for reactivity and change detection. Neo.mjs uses its own fine-grained reactivity system based on `Neo.core.Config` and `Effect`, which conceptually aligns with the "signals" pattern for highly efficient, granular updates.
+*   **Comprehensive & Opinionated Frameworks:** Both provide a structured and opinionated way to build applications, offering extensive out-of-the-box solutions. However, their *nature* of opinionation differs, as explored in "Framework Rigidity vs. Flexible Structure."
+
+## Key Differences: Architectural & Rendering Strategies
+
+This is where the two frameworks diverge significantly, each offering unique trade-offs and advantages.
+
+### 1. Overall Architecture: Main Thread vs. Worker-Based
+
+*   **Angular: Main Thread Focused**
+    *   Angular applications run predominantly on the Main JavaScript Thread of the browser. All component logic, change detection, VDOM reconciliation (if used), and direct DOM manipulation occur on this single thread.
+    *   **Implication:** While Angular is highly optimized (e.g., with Ahead-of-Time (AOT) compilation and Ivy renderer), complex computations, large state updates, or extensive component trees can still block the Main Thread, leading to UI jank and unresponsiveness. Angular's change detection mechanism, even with optimizations, can become a bottleneck in very large applications.
+
+*   **Neo.mjs: Worker-Based (Main Thread + App Worker + VDom Worker)**
+    *   Neo.mjs's defining feature is its multi-threaded architecture. Application logic (component instances, state, business logic, `vdomEffect`s) runs in a dedicated **App Worker**, separate from the Main Thread. The VDOM diffing occurs in a **VDom Worker**.
+    *   Communication between workers and the Main Thread happens via asynchronous message passing.
+    *   **Benefit:** This architecture keeps the Main Thread almost entirely free and responsive, preventing UI freezes even during heavy computations or complex application logic. It inherently leverages multi-core CPUs for parallel processing, leading to superior UI responsiveness and performance under heavy load.
+
+### 2. Rendering Mechanism & Change Detection
+
+*   **Angular: Template-Based & Zone.js/Ivy Change Detection**
+    *   Angular uses templates (HTML with Angular-specific syntax) to define UI. These templates are compiled into renderable instructions.
+    *   **Change Detection:** Angular traditionally relies on Zone.js to monkey-patch asynchronous browser APIs, detecting when data changes and triggering a change detection cycle. The Ivy renderer further optimizes this by compiling templates into more efficient instructions.
+    *   **VDOM:** Angular does not use a traditional Virtual DOM in the same way React does. Its Ivy renderer directly updates the DOM based on detected changes.
+    *   **Performance Consideration (Two-Way Binding & Direct DOM Access):** Angular's two-way data binding, while convenient, inherently ties the application's data model directly to the DOM. This often leads to frequent DOM read/write operations. Since **DOM read/write access is significantly slower (often 20x or more) compared to pure JavaScript logic**, this can cause performance bottlenecks and UI jank in complex applications with many bindings, as each change detection cycle can trigger a cascade of expensive DOM manipulations on the Main Thread.
+    *   **DOM Pollution:** Angular often adds numerous internal `data-set` attributes to the real DOM for its own tracking and debugging purposes. While functional, this can lead to a less clean and more verbose DOM structure.
+    *   **Immutability Considerations:** While Angular doesn't enforce immutability, performance optimizations like `OnPush` change detection often benefit significantly from immutable data patterns. This can introduce a cognitive burden for developers to manage data immutably for optimal performance.
+
+*   **Neo.mjs: Off-Thread, Scoped VDOM & Atomic Insertion**
+    *   Neo.mjs uses a Virtual DOM defined by plain JavaScript objects. The diffing process happens in a VDom Worker, keeping the Main Thread free.
+    *   **Scoped VDOM (Encapsulation & Performance):** Neo.mjs's VDOM is **scoped by default**. When a parent component renders, its children are represented by simple `{componentId: '...'}` placeholders. This provides two key advantages: 1) **Performance:** A parent's update never processes the complex VDOM of its children, keeping update payloads extremely small. 2) **Encapsulation:** It is architecturally impossible for a parent to accidentally manipulate a child's internal VDOM structure, enforcing clear ownership.
+    *   **Atomic Insertion:** For insertions, the Main Thread receives a VNode structure and uses `DomApiRenderer` to **build the entire new DOM subtree in memory**, completely detached from the live document. This fully constructed fragment is then inserted into the live DOM in a **single, atomic operation**.
+    *   **Fine-Grained Reactivity vs. Zone.js:** Instead of Angular's Zone.js, which broadly detects changes, Neo.mjs uses a precise, `Effect`-based system. When a piece of state (`config`) changes, only the `createVdom` functions that *directly depend* on that state are re-executed, ensuring optimal performance by default.
+
+### 3. Component Model & State Management
+
+*   **Angular: Modules, Components, Services, Dependency Injection**
+    *   Angular applications are structured around NgModules, components (with templates and decorators), and services. Dependency Injection (DI) is a core concept for managing dependencies and state.
+    *   **State Management:** Often relies on services for shared state, or third-party libraries like NgRx (RxJS-based state management).
+
+*   **Neo.mjs: Class-Based & Functional Components, State Providers**
+    *   Neo.mjs offers a dual component model. Developers can use a robust class-based system (`Neo.component.Base`) for complex, stateful components, or leverage modern, lightweight functional components via the `defineComponent()` API.
+    *   This functional approach uses hooks like `useConfig()` for state, providing a clean, declarative way to build UI while benefiting from Neo.mjs's underlying fine-grained reactivity.
+    *   **State Management:** Features integrated state providers and a unified config system for managing and sharing bindable data across the component tree, often simplifying cross-component communication compared to traditional DI or prop passing.
+
+### 4. Build Process & Development Workflow
+
+*   **Angular: Comprehensive CLI & Mandatory Build Process**
+    *   Angular relies heavily on its CLI for scaffolding, development, and building. It has a mandatory and often complex build process (Webpack, TypeScript compilation, Ahead-of-Time (AOT) compilation) even for development.
+    *   **Implication:** This leads to slower development server startup times, requires source maps for debugging transpiled and bundled code, and can introduce debugging challenges due to the abstraction layer between the source code and what runs in the browser. For Angular, a build step is an inherent part of the development workflow.
+
+*   **Neo.mjs: The Revolutionary Zero Builds Development Mode**
+    *   Neo.mjs champions a **"zero builds" instant development mode** as its primary workflow. This means developers create and debug their applications entirely within this instant environment, leveraging native ES Modules, ES6 classes, and dynamic imports directly in the browser.
+    *   **Benefit:** This offers unparalleled speed and debugging clarity. Code changes are reflected instantly without any compilation step. Developers work directly with the real code in the browser's dev tools, eliminating the need for source maps and vastly simplifying debugging. This is a fundamental departure from the build-centric development paradigm of Angular and most other modern frameworks.
+    *   **Deployment Flexibility:** While development is zero-builds, Neo.mjs provides optimized build environments for deployment:
+        *   **`dist/esm`:** Deploys as native ES Modules, preserving the dev mode's file structure for efficient modular loading in modern browsers.
+        *   **`dist/production`:** Generates highly optimized, thread-specific bundles using Webpack for maximum compatibility and minification.
+        *   **Dynamic Module Loading:** Neo.mjs uniquely supports dynamically loading code-based modules (even with arbitrary `import` statements) from different environments at runtime, a powerful feature for plugin architectures or user-generated code that most other frameworks struggle with due to their static build graphs.
+
+### Other Considerations:
+
+*   **Framework Rigidity vs. Flexible Structure:** Angular is often perceived as a "straightjacket" due to its highly opinionated and prescriptive nature, dictating specific patterns (e.g., NgModules, decorators, strict DI) that can limit flexibility and make it challenging to deviate from "the Angular way." Neo.mjs, while also a comprehensive framework, offers a different kind of opinionation. Its core architectural choices (worker-based, unified config system, `Neo.core.Base` for any class-based entity) provide a robust structure, but within that structure, it offers significant flexibility (e.g., plain JS for VDOM, choice of functional or class components, integrated features reducing external dependencies), allowing developers more freedom without sacrificing consistency.
+
+*   **TypeScript:** Angular is built with TypeScript and strongly encourages its use. Neo.mjs is written in plain JavaScript but supports TypeScript usage.
+*   **Learning Curve:** Angular has a reputation for a steeper learning curve due to its opinionated structure, extensive concepts (modules, decorators, DI, RxJS), and reliance on its CLI. Neo.mjs also has an initial learning curve (especially its worker architecture), but its core concepts are often simpler once understood.
+*   **Ecosystem & Maturity:** Angular has a large, mature ecosystem backed by Google. Neo.mjs has a smaller but dedicated community, with a focus on framework-level solutions and integrated features.
+*   **Dependency Management (Batteries Included):** Angular projects often involve a large `node_modules` directory and can lead to complex dependency trees and version conflicts. Neo.mjs, in contrast, is a "batteries included" framework. It literally has zero real runtime dependencies outside of its own core. This native ES Module approach and integrated framework, significantly reduces this complexity, offering a much leaner and more controlled dependency management experience.
+
+## Conclusion: Why Neo.mjs Offers Significant Technical Advantages Over Angular
+
+While Angular is a powerful and widely adopted framework, Neo.mjs offers fundamental architectural advantages that can lead to superior technical performance and responsiveness, particularly in demanding applications:
+
+*   **Unblocked Main Thread & Inherent Performance:** Neo.mjs's unique worker-based architecture fundamentally shifts application logic off the Main Thread. This ensures the UI remains fluid and responsive, even during heavy computations, leading to inherently higher performance ceilings without the need for extensive manual optimizations.
+*   **Optimized & Precise DOM Updates:** Through off-Main-Thread VDOM diffing, sophisticated batching, and surgical direct DOM API updates, Neo.mjs achieves highly efficient and smooth visual updates, precisely targeting changes and avoiding unnecessary re-renders, often more granularly than Angular's zone-based change detection.
+*   **Linear Effort for Complexity:** Unlike frameworks where effort can grow exponentially with application complexity, Neo.mjs's unified config system, predictable component lifecycle, and modular design enable a more linear relationship between complexity and development effort, leading to faster development cycles and lower maintenance costs in the long run.
+*   **Streamlined Development Workflow:** The "zero builds" development mode and native ES Module approach offer a significantly faster and more transparent development experience compared to Angular's mandatory build process.
+
+The choice between them depends on the specific application's needs. For applications where guaranteed Main Thread responsiveness, high performance under load, leveraging multi-core processing, and a streamlined development workflow are paramount, Neo.mjs presents a compelling and technically superior alternative.