docs(release-notes): Update Hero Story 2 for Grid Rewrite (#9341)

Author: tobiu

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

@@ -114,19 +114,35 @@ sequenceDiagram
 
 ## 🏎️ Hero Story 2: Grid Supremacy (The Ultimate Flex)
 
-The DevIndex UI is a torture test. It renders live, animated data charts ("Living Sparklines") inside every single row of a 50k record grid, alongside complex icon components and country flags, while a 3D particle simulation ("Luminous Flux") runs in the header.
+The DevIndex UI is a torture test. It renders live, animated data charts ("Living Sparklines") inside every single row of a 50k-record grid, alongside complex icon components and country flags, while a 3D particle simulation ("Luminous Flux") runs in the header.
 
-**The Challenge:** High-frequency scrolling a 50k-row grid causes severe DOM trashing and layout shifts in single-threaded architectures. The Main Thread simply cannot calculate virtualized DOM nodes *and* execute heavy physics for 50+ canvas animations simultaneously.
+**The Challenge:** High-frequency scrolling a 50k-row grid causes severe DOM thrashing in traditional architectures. Previously, `Neo.grid.Body` acted as a monolithic renderer. While we had component-based columns before, they manually created and destroyed instances for the mounted row range, relying on expensive `moveNode` operations as rows cycled. The Main Thread simply cannot calculate virtualized DOM node insertions, removals, or reorders *while* executing heavy physics for 50+ canvas animations without dropping frames.
 
-**The Solution: Quintuple-Threaded Architecture & Component-Based Rows**
+**The Solution: Component-Based Rows & The Quintuple-Threaded Architecture**
 
-To achieve O(1) scrolling performance and constant memory usage, we broke the monolithic Grid Body down. Every row is now its own standalone `Neo.grid.Row` component, and we aggressively split the workload across five independent actors:
+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:
 
-1.  **Granular Updates (App Worker & VDom Worker):** When a cell changes, the App Worker only regenerates that specific cell's VDOM. The VDom worker calculates the diffs.
-2.  **Fixed-DOM-Order Strategy (Main Thread):** As you scroll, rows leaving the top of the viewport are teleported to the bottom and handed new data (Row & Cell Pooling).
-    *   *The Flex:* When you scroll the 50,000-record DevIndex grid, there are **ZERO structural DOM mutations** (`insertBefore`, `removeChild`). There can be 600 deltas in a single tick, but they are exclusively fast CSS `transform: translate3d` and textContent updates. The DOM order never changes, eliminating expensive layout recalculations.
-3.  **"Living Sparklines" & Sparse Animation (Canvas Worker):** We transferred ownership of the `<canvas>` DOM nodes to a dedicated Canvas Worker using the `OffscreenCanvas` API. To prevent GPU overload, it uses a "Sparse Animation Strategy"—only a random subset of visible charts actively pulse with data packets at any given frame.
-4.  **The "Show Off" Header Effect:** To prove the Main Thread is completely unblocked by the Grid's heavy layout thrashing 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, keeping the frame rate locked at 60fps.
+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`.
+   * *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):**
+   * We extended the zero-mutation philosophy to horizontal scrolling. Each row implements a "Full Pool Rendering" strategy, generating a fixed-size array of cell nodes based on the `gridBody.cellPoolSize`.
+   * Unused cells are kept as lightweight placeholders (`display: none`). When scrolling horizontally, cells are simply recycled by updating their data attributes (`data-field`, `data-record-id`) and position, without ever altering the VDOM children array length or order.
+
+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):** 
+   * We transferred ownership of the `<canvas>` DOM nodes inside the grid cells to a dedicated Canvas Worker using the `OffscreenCanvas` API. 
+   * 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.
+
+**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.
 
 ---