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

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.

package/learn/comparisons/NeoVsExtJs.md

@@ -0,0 +1,178 @@
+# Neo.mjs vs Ext.js
+
+Neo.mjs is a comprehensive JavaScript ecosystem for building high-performance, multi-threaded web applications. Unlike legacy frameworks like Ext.js that are architecturally bound to a single thread and a rigid, monolithic build system, 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 Ext.js. While both are designed for building complex enterprise-grade applications, they employ fundamentally different strategies to achieve their goals. We will explore their approaches to **architecture, rendering, component models, and development workflow**, highlighting the upgrade path from Ext.js's legacy model to Neo.mjs's modern, worker-based paradigm.
+
+## A Look Back: Ext.js's Legacy and Current Landscape
+
+Ext.js emerged in 2007 as a groundbreaking JavaScript framework, offering unparalleled capabilities for building rich,
+enterprise-grade web applications. Its comprehensive component library, sophisticated class system, and robust data
+management were truly innovative and years ahead of their time, establishing it as a dominant force in complex UI
+development.
+
+However, the landscape of web development has evolved at an unprecedented pace. While Ext.js continues to exist and
+receive updates, the perception within the developer community, particularly over the last 5-7 years, has been one of
+**stagnation and a significant lag in adopting modern web standards and paradigms**. The framework has struggled to
+keep pace with the rapid advancements in JavaScript, browser capabilities, and developer expectations for performance
+and workflow. This has often led to experienced solution engineers, including those with deep expertise in Ext.js
+internals, being brought in to perform extensive performance tuning and framework-level debugging on large-scale
+Ext.js implementations, highlighting the inherent challenges.
+
+It is precisely this deep understanding of the limitations of existing frameworks, gained from extensive
+experience with their large-scale implementations, that motivated the creation of Neo.mjs. **Crucially,
+Neo.mjs was built from the ground up with a completely new and independent architecture**, representing a
+deliberate and complete break from legacy constraints and ensuring a truly modern and unburdened foundation.
+
+This context is important for understanding why many developers, who once relied on Ext.js for its power and
+comprehensiveness, are now actively seeking modern alternatives that can deliver similar enterprise-grade capabilities
+with contemporary performance, architecture, and development workflows. Neo.mjs, in contrast, has been built from the
+ground up to embrace these modern advancements, offering a level of innovation and agility that directly addresses the
+perceived stagnation in Ext.js's recent evolution.
+
+## Core Similarities: Enterprise Application Development
+
+Both Neo.mjs and Ext.js share common ground in building large-scale, enterprise-grade user interfaces:
+
+*   **Comprehensive Frameworks:** Both are full-fledged frameworks (not just libraries) providing a wide array of
+  features out-of-the-box, including a rich component library, data management, and application structure.
+*   **Class-Based Architecture:** Both heavily rely on a class-based object-oriented programming (OOP) model for
+  structuring applications. This includes a foundational `Base` class (`Ext.core.Base` in Ext.js, `Neo.core.Base`
+  in Neo.mjs) providing core functionalities like class creation, configuration management, and event systems.
+*   **Component-Based UI:** Both promote building UIs as a composition of reusable components.
+*   **Declarative UI (Initial Definition):** Both allow for declarative definition of UI components and
+    layouts for initial rendering. However, their approaches to *updating* the UI declaratively differ
+    significantly, as explored in the "Rendering Mechanism" section.
+*   **Data Management:** Both provide robust data management layers (Stores, Models) for handling application data.
+
+## Key Differences: Modern Architecture & Performance
+
+This is where the two frameworks diverge significantly, with Neo.mjs addressing many of the historical challenges and
+limitations of Ext.js.
+
+### 1. Overall Architecture: Main Thread Blocking vs. Worker-Based
+
+*   **Ext.js: Main Thread Bound & Synchronous Operations**
+    * Ext.js applications run entirely on the Main JavaScript Thread. All component rendering, layout calculations,
+      data processing, and event handling occur on this single thread.
+    * **Implication:** Ext.js applications, especially complex ones with large data sets or intricate layouts, are
+      prone to Main Thread blocking. This leads to UI freezes, unresponsiveness, and a poor user experience. Its
+      synchronous nature for many operations exacerbates this issue.
+
+*   **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. This directly solves the Main
+      Thread blocking issues common in Ext.js.
+
+### 2. Rendering Mechanism & DOM Interaction
+
+*   **Ext.js: Direct DOM Manipulation & String-Based Rendering**
+    *   Ext.js components often directly manipulate the DOM. While it has its own rendering engine, it frequently relies
+        on generating HTML strings (`outerHTML`, `innerHTML`) and injecting them into the DOM. Its template system, often
+        using `x-template` or similar string-based approaches, typically results in **full DOM replacements** for updates,
+        rather than granular changes.
+    *   **Performance Consideration:** Frequent direct DOM manipulations and string-based rendering can be inefficient and
+        lead to numerous browser reflows/repaints, especially for dynamic updates. The lack of granular updates means even
+        small data changes can trigger large, expensive DOM re-creations.
+    *   **XSS Risk:** String-based rendering can introduce Cross-Site Scripting (XSS) vulnerabilities if not handled carefully.
+
+*   **Neo.mjs: Virtual DOM (Off-Main-Thread Diffing & Optimized Direct DOM API Updates)**
+    *   Neo.mjs uses a Virtual DOM. Your `createVdom()` method (within functional components) returns a plain JavaScript
+        object representing the desired UI structure. **This VDOM is defined using simple nested JavaScript objects and
+        arrays, akin to a JSON-like description of the DOM. Crucially, Neo.mjs's VDOM objects are mutable.**
+    *   **Off-Main-Thread Diffing:** The VDOM diffing process occurs in a dedicated **VDom Worker**, offloading this
+        computational work from the Main Thread.
+    *   **Surgical Direct DOM API Updates (`Neo.main.DeltaUpdates` & `DomApiRenderer`):** The VDom Worker sends "deltas"
+        (minimal change instructions) to the Main Thread. `Neo.main.DeltaUpdates` then applies these changes using direct
+        DOM APIs. For inserting new subtrees, `DomApiRenderer` builds detached `DocumentFragments` and inserts them in a
+        single, atomic operation. For updates to existing nodes, `DeltaUpdates` directly manipulates attributes, classes,
+        styles, and content using native DOM methods.
+    *   **Benefit:** This approach minimizes costly browser reflows/repaints, enhances security (by avoiding `innerHTML`
+        for updates), and ensures highly efficient, surgical DOM updates. Neo.mjs components are **completely decoupled
+        from the real DOM**, residing in the App Worker and never directly reading from or writing to the DOM.
+
+### 3. Reactivity & Change Detection
+
+*   **Ext.js: Traditional Event-Driven & Explicit Setter-Based Updates**
+    *   Ext.js relies on a traditional event-driven model for reactivity. Components fire events, and other components or
+        controllers listen to these events.
+    *   **No True Reactivity:** Ext.js does not possess a modern, fine-grained reactivity system. Data changes are not
+        automatically propagated to the UI. Developers *must* explicitly call setter methods (e.g.,
+        `component.setTitle('New Title')`, `record.set('fieldName', 'newValue')`) to update values. Simply assigning a
+        new value to a property (e.g., `component.title = 'New Title'`) will **not** update the UI.
+    *   **Change Detection:** Updates are often triggered manually or through specific framework mechanisms, which can
+        sometimes lead to developers needing to explicitly refresh components or views.
+
+*   **Neo.mjs: True, Fine-Grained Reactivity**
+    *   Neo.mjs is built on a modern, fine-grained reactivity system powered by `Neo.core.Config` and `Neo.core.Effect`. When a reactive config or state changes, only the specific parts of the UI that depend on it are automatically updated.
+    *   Developers can simply change a value (`this.myConfig = 'new value'`), and the UI updates automatically and efficiently. There is no need for manual event listeners or explicit setter calls to trigger UI changes. This dramatically simplifies development, reduces boilerplate, and eliminates a common source of bugs.
+
+### 4. Development Workflow & Modern JavaScript
+
+*   **Ext.js: Legacy JavaScript & Build Tools**
+    *   Ext.js's foundational architecture is rooted in pre-ES5 (conceptually ES4-like) paradigms, and it does not fully
+        leverage modern JavaScript capabilities. While newer versions support ES6+, the core framework still carries
+        significant legacy baggage.
+    *   **Build Process:** Typically involves a complex build process with Sencha Cmd for compilation, minification,
+        and code splitting.
+    *   **Debugging:** Debugging can be challenging due to the transpiled and often obfuscated code, requiring extensive
+        use of source maps.
+
+*   **Neo.mjs: Zero Builds Dev Mode & Native ES Modules**
+    *   Neo.mjs champions a **"zero builds" instant development mode** as its primary workflow, 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.
+    *   **Deployment Flexibility:** Provides optimized build environments (`dist/esm`, `dist/production`) for deployment,
+        maintaining modularity or thread-specific bundling.
+
+### 5. Component Model & Extensibility
+
+*   **Ext.js: Rich Component Library & XTypes**
+    *   Ext.js provides an extremely rich and comprehensive set of UI components (grids, forms, charts, etc.) out-of-the-box.
+        Components are instantiated using `xtypes`.
+    *   **Monolithic Design & No Lazy-Loading:** Ext.js components are often large, self-contained units not inherently
+        designed for granular, on-demand lazy-loading. Applications are typically bundled into large, monolithic
+        JavaScript files, impacting initial load times.
+    *   **Extensibility:** Highly extensible through its class system, mixins, and plugins. However, its proprietary
+        class system and synchronous nature can limit the scope and performance of extensions, and debugging can be challenging.
+    *   **Class-Based Only:** Ext.js is exclusively class-based. It does not natively support the modern functional
+        component paradigm, making it challenging to adopt contemporary UI development patterns.
+
+*   **Neo.mjs: A Modern, Dual Component Model**
+    *   Neo.mjs offers a flexible, dual component model. Developers can use a powerful, full-featured class-based system (`Neo.component.Base`) that will feel familiar yet superior to Ext.js developers, or they can adopt a modern, lightweight functional component paradigm using the `defineComponent()` API with hooks.
+    *   This provides a clear upgrade path and allows teams to choose the best tool for the job, from complex enterprise grids to simple, declarative UI functions. Its component library achieves feature parity with many of Ext.js's offerings, but with technically superior, modular, and more performant implementations.
+    *   **Superior Extensibility:** Leveraging native ES Modules, a clean class hierarchy, mixins, and plugins, Neo.mjs offers a more modern and performant level of extensibility. The worker-based architecture enables extensions that run off the Main Thread, opening new possibilities for high-performance features without impacting UI responsiveness.
+
+## Conclusion: Why Neo.mjs is a Modern Successor to Ext.js
+
+While Ext.js has been a powerful tool for building enterprise applications, Neo.mjs offers fundamental architectural and
+modern development advantages that directly address many of Ext.js's historical limitations, leading to superior technical
+performance, responsiveness, and maintainability.
+Notably, Neo.mjs being built on the latest fully supported ES features, ensures a truly modern and unburdened foundation.
+
+Indeed, as members of the Neo.mjs community state, "Neo.mjs is what Sencha should have built, but were incapable of."
+This sentiment is further reinforced by the belief that "Neo.mjs is the ideal framework to migrate to, coming from Ext.js."
+
+*   **Unblocked Main Thread & Inherent Performance:** Neo.mjs's worker-based architecture fundamentally shifts application
+    logic off the Main Thread, directly solving the UI blocking issues common in Ext.js applications.
+*   **Optimized & Precise DOM Updates:** By leveraging a VDom and surgical direct DOM API updates, Neo.mjs achieves highly
+    efficient and smooth visual updates, avoiding the performance pitfalls of frequent direct DOM manipulation
+    and string-based rendering.
+*   **Modern Reactivity:** Neo.mjs's fine-grained reactivity system provides precise and automatic updates, simplifying
+    state management and reducing the need for manual event handling compared to Ext.js's traditional event-driven model.
+*   **Streamlined Development Workflow:** The "zero builds" development mode and native ES Module approach offer a
+    significantly faster and more transparent development experience compared to Ext.js's often complex build
+    processes and legacy JavaScript.
+*   **Linear Effort for 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.
+
+For organizations and developers looking for a modern, performant, and maintainable framework to build complex
+enterprise-grade web applications, Neo.mjs presents a compelling and technically superior successor to Ext.js.

package/learn/comparisons/NeoVsNextJs.md

@@ -0,0 +1,124 @@
+# Neo.mjs vs Next.js
+
+Neo.mjs and Next.js are both powerful JavaScript frameworks, but they operate with fundamentally different architectural
+philosophies and excel in distinct domains. This document aims to clarify their core strengths and illustrate how they
+can be used in complementary ways, rather than as direct competitors.
+
+*   **Neo.mjs:** A comprehensive, multi-threaded frontend ecosystem designed for building highly performant, complex,
+    and interactive Single-Page Applications (SPAs) where Main Thread responsiveness is paramount.
+*   **Next.js:** A React framework specializing in Server-Side Rendering (SSR), Static Site Generation (SSG), and API
+    routes, primarily focused on delivering content-rich, SEO-optimized web experiences.
+
+## 1. Core Philosophy & Architecture
+
+### Neo.mjs: Client-Side, Multi-Threaded for UI Responsiveness
+
+Neo.mjs is architected from the ground up to leverage a multi-threaded environment within the browser. Its core philosophy
+is to offload computationally intensive tasks from the Main UI Thread to ensure a consistently responsive user experience.
+
+*   **App Worker:** Runs the application logic, state management, and component structure.
+*   **Main Thread:** Dedicated to rendering the virtual DOM and handling user events, kept almost entirely free.
+*   **Data Worker:** Manages data fetching and processing.
+*   **VDom Worker:** Handles virtual DOM diffing and patching.
+
+This architecture guarantees that the main thread remains unblocked, resulting in smooth animations, fast user interactions,
+and a highly performant application, especially for complex and data-intensive UIs.
+
+### Next.js: Server-Side First for Content & SEO
+
+Next.js is a React framework that extends React's capabilities with powerful server-side rendering and static site generation
+features. Its primary goal is to improve performance and SEO by pre-rendering pages on the server or at build time.
+
+*   **Server-Side Rendering (SSR):** Pages are rendered on the server for each request, providing up-to-date content and
+    improving initial load times.
+*   **Static Site Generation (SSG):** Pages are generated at build time, resulting in extremely fast-loading static HTML
+    files, ideal for content that doesn't change frequently.
+*   **API Routes:** Built-in backend capabilities allow for creating serverless functions directly within the Next.js
+    project, simplifying full-stack development.
+
+Next.js excels at building content-heavy websites, blogs, and e-commerce applications where initial page load time and
+SEO are critical.
+
+## 2. Primary Use Cases
+
+Given their distinct architectures, Neo.mjs and Next.js naturally fit different primary use cases, though they can also
+complement each other.
+
+### Neo.mjs: Complex, Interactive SPAs & Enterprise Applications
+
+Neo.mjs is ideally suited for applications that demand high levels of interactivity, real-time data processing, and
+guaranteed UI responsiveness, even under heavy load.
+
+*   **Rich Data Dashboards:** Building complex dashboards with numerous interactive components, charts, and real-time updates.
+*   **Enterprise-Grade SPAs:** Large-scale business applications requiring robust architecture, high performance, and maintainability.
+*   **Interactive Tools & Editors:** Applications where user input directly manipulates complex UI elements or data structures.
+*   **Any application where Main Thread responsiveness is a critical non-functional requirement.**
+
+### Neo.mjs: Multi-Window / Multi-Screen Applications
+
+Neo.mjs's multi-threaded architecture extends naturally to support complex multi-window and multi-screen application scenarios.
+This is a capability rarely found in other frameworks and offers significant advantages for specific use cases.
+
+*   **Shared Data & State:** Raw data and application state can be seamlessly shared and synchronized across multiple
+    connected browser windows or even different screens (e.g., a main application window and a separate pop-out dashboard
+    or control panel). This significantly reduces network traffic as data is fetched once and distributed locally.
+*   **Synchronized UI:** Changes in one window can instantly reflect in others, ensuring all connected views are fully in sync.
+*   **Component Tree Mobility:** Neo.mjs can move entire component trees (UI elements and their associated logic) between
+    different browser windows while maintaining the same underlying JavaScript instances. This enables dynamic, flexible
+    user interfaces where users can customize their workspace by arranging application parts across multiple displays.
+*   **Reduced Traffic:** With data and logic shared and synchronized locally, the need to re-fetch or re-process information
+    for each window is eliminated, leading to a more efficient and responsive user experience.
+
+This capability is particularly valuable for enterprise applications, trading platforms, control centers, or any scenario
+where users need to monitor and interact with complex data across multiple views simultaneously.
+
+### Next.js: Content-Driven Websites & SEO-Critical Applications
+
+Next.js is a leading choice for applications where content delivery, fast initial page loads, and search engine
+optimization are paramount.
+
+*   **Marketing Websites & Blogs:** Delivering static or server-rendered content quickly and efficiently.
+*   **E-commerce Frontends:** Providing fast, SEO-friendly product pages and checkout flows.
+*   **Portfolios & Documentation Sites:** Static content that benefits from pre-rendering.
+*   **Applications requiring a robust backend for data fetching and API management.**
+
+### Complementary Use Cases: The Best of Both Worlds
+
+It's important to note that Neo.mjs and Next.js are not mutually exclusive. They can be used together to leverage their
+respective strengths:
+
+*   **Next.js as a Content Shell:** Use Next.js to handle the public-facing, SEO-optimized content (e.g., landing pages,
+    blog posts). When a user navigates to a highly interactive section (e.g., a complex dashboard or a data visualization
+    tool), a Neo.mjs application can be seamlessly embedded or loaded as a separate SPA.
+*   **Next.js for API Backend:** Utilize Next.js's API Routes to build a robust backend for data fetching and business
+    logic, while a Neo.mjs application consumes these APIs to power its rich client-side UI.
+
+## 3. Architectural Trade-offs
+
+| Feature                 | Neo.mjs                                 | Next.js                                 |
+| ----------------------- | --------------------------------------- | --------------------------------------- |
+| **Primary Focus**       | Client-Side UI Responsiveness           | Server-Side Content Delivery & SEO      |
+| **Core Architecture**   | Multi-Threaded (Worker-Based)           | Single-Threaded (React + Node.js)       |
+| **Rendering Strategy**  | Client-Side (Off-Main-Thread VDOM)      | SSR, SSG, CSR (Main Thread React VDOM)  |
+| **Main Thread Impact**  | Minimal (Logic in Workers)              | Significant (All React/DOM work)        |
+| **SEO**                 | Requires pre-rendering solution         | Built-in (SSR/SSG)                      |
+| **Initial Load**        | Fast for Returning Users (Client-side caching) | Fast for First-Time Users (SSR/SSG)     |
+| **Backend Integration** | Via standard APIs                       | Built-in API Routes                     |
+| **Navigation Model**    | Single-Page Application (SPA)           | Page-Based (MPA with client-side routing) |
+
+## Conclusion
+
+Choosing between Neo.mjs and Next.js depends entirely on your application's primary requirements. If your goal is to
+build a highly interactive, performant, and responsive client-side application that can handle complex UIs and heavy
+data processing without blocking the Main Thread, Neo.mjs is the superior choice. Neo.mjs's architecture, leveraging
+Service Workers for aggressive client-side caching of application code, results in near-instant load times for
+returning users, significantly reducing network traffic as only raw data needs to be fetched from the backend.
+Furthermore, its Single-Page Application (SPA) model ensures seamless navigation without full browser reloads, providing
+a fluid and highly engaging user experience for interactive applications.
+
+If your priority is delivering SEO-friendly, content-rich web pages with fast initial load times for first-time users,
+and you prefer a React-based full-stack framework, Next.js is an excellent solution.
+
+For many modern web projects, the most powerful approach might involve combining their strengths, using Next.js for
+content delivery and API services, and embedding or integrating Neo.mjs for the most demanding
+interactive client-side experiences.