docs(release-notes): Enhance Hero Story 2 with architecture diagram and zero-allocation details (#9341)

Author: tobiu

resources/content/release-notes/v12.0.0.md

@@ -122,12 +122,37 @@ The DevIndex UI is a torture test. It renders live, animated data charts ("Livin
 
 To achieve true O(1) scrolling performance and constant memory usage, we completely shattered the monolithic Grid Body. Every row is now its own standalone `Neo.grid.Row` component, and we aggressively split the workload across five independent actors:
 
+```mermaid
+flowchart TD
+    subgraph Browser Engine
+        Main(Main Thread<br/>DOM Updates & Native Scroll)
+    end
+    
+    subgraph Neo.mjs Workers
+        App(App Worker<br/>Row Pooling, Logic & Streaming)
+        VDom(VDom Worker<br/>Tree Diffing & Deltas)
+        Data(Data Worker<br/>Sorting & Filtering)
+        Canvas(Canvas Worker<br/>OffscreenCanvas Rendering)
+    end
+
+    Main -->|Scroll Event| App
+    Main -->|OffscreenCanvas Transfer| Canvas
+    
+    App -->|Update TimeScale| Canvas
+    App -->|VDOM JSON| VDom
+    App -->|Request Data| Data
+    
+    Data -->|Return Sorted Array| App
+    VDom -->|DOM Deltas| Main
+    Canvas -->|60fps Render Loop| Main
+```
+
 1. **Component-Based Rows & Granular Updates (App Worker):**
    * Editing a record now triggers a VDOM update *only* for that specific `Neo.grid.Row` instance. 
    * **Resilient Lifecycle:** Component columns (like our Living Sparklines) are now standard children of the `Row` component. Because the row itself is never destroyed, the framework's standard lifecycle manages cell components automatically, permanently eliminating the dreaded "Zombie Canvas" bugs.
 
 2. **The "Fixed-DOM-Order" Strategy (Main Thread):** 
-   * We upgraded `Neo.grid.Body` to enforce strict **Row Pooling**. As you scroll, rows leaving the top of the viewport are teleported to the bottom via CSS `translate3d`.
+   * We upgraded `Neo.grid.Body` to enforce strict **Row Pooling**. As you scroll, rows leaving the top of the viewport are recycled in place via CSS `translate3d`.
    * *The Flex:* When you scroll the 50,000-record DevIndex grid, there are **ZERO structural DOM mutations** (`insertBefore`, `removeChild`, `moveNode`). There can be 600 deltas in a single tick, but they are exclusively fast CSS transforms and `textContent` updates. The DOM order never changes, effectively eliminating layout recalculations.
 
 3. **"Full Pool Rendering" for Cells (O(1) Horizontal Scroll):**
@@ -137,10 +162,14 @@ To achieve true O(1) scrolling performance and constant memory usage, we complet
 4. **Main-Thread Drag & Kinetic Scrolling:**
    * We introduced `Neo.main.addon.GridDragScroll`. Instead of passing high-frequency `mousemove` events back and forth between workers, drag-to-scroll logic now runs directly on the Main Thread. It features physics-based inertial scrolling with exponential decay friction, delivering a buttery-smooth, native-like touch and drag experience.
 
-5. **"Living Sparklines" & Sparse Animation (Canvas Worker):** 
+5. **"Living Sparklines" & Zero-Allocation Physics (Canvas Worker):** 
    * We transferred ownership of the `<canvas>` DOM nodes inside the grid cells to a dedicated Canvas Worker using the `OffscreenCanvas` API. 
+   * To maintain a strict 16ms frame budget (60fps) without Garbage Collection (GC) stutters, the physics engine uses a **Zero-Allocation** strategy (cached geometry, pre-allocated `CanvasGradient` objects).
    * To prevent GPU overload, it uses a **"Sparse Animation Strategy"**. A single master loop randomly selects *one* chart to pulse with a "Data Packet" every few seconds. This creates the visual impression of a highly active, living system ("The Server Room Effect") while keeping actual GPU load equivalent to rendering just a single chart.
 
+6. **Performance Theater: The "Show Off" Effect:** 
+   * To prove the Main Thread is completely unblocked by the Grid's layout during a scroll, we intentionally **double the animation speed** of the complex 3D Luminous Flux header when you scroll. The Canvas worker smoothly accelerates the physics `timeScale` while the grid scrolls underneath it, proving visually that heavy canvas operations cannot block the App Worker's scrolling logic.
+
 **The Best Part: Zero Migration Effort**
 Despite being a fundamental, ground-up rewrite of the framework's most complex component, the new Grid is a **100% drop-in replacement**. All your existing grid configurations, custom cell renderers, and stores will work out of the box with massively upgraded performance.