diff --git a/.ai/STACK.md b/.ai/STACK.md
index 0016d238856..b971cca8232 100644
--- a/.ai/STACK.md
+++ b/.ai/STACK.md
@@ -106,7 +106,8 @@
 **SWC pipeline (replaces Babel for everything except Jest):**
 - Rspack bundles (`rspack.config.js` + `.config/*`) - JS transpiled by `builtin:swc-loader` using targets from `browser-targets.js`
 - `handsontable/scripts/swc-transpile.mjs` - File-per-file transpiler driven by `@swc/core`; produces the `tmp/` output consumed by wrappers. Handles CJS (`build:commonjs`), ESM (`build:es`, `.mjs` output), and i18n language packs with auto-registration (`build:languages.es --lang-registration`)
-- `handsontable/scripts/parallel-build.mjs` - Build orchestrator invoked by `npm run build`; runs the Rspack and SWC tasks above concurrently where the dependency graph allows
+- `handsontable/scripts/run.mjs` - Unified dispatcher for all `npm run` scripts; reads task definitions and pipeline graphs from `handsontable/scripts/tasks.json`; runs tasks quietly with spinner on TTY, supports `--parallel` (DAG scheduler) and `--sequential` modes
+- `handsontable/scripts/tasks.json` - Single source of truth for all build/lint/test task commands, their `deps`, `mode`, and `cwd`; also defines named `pipelines` (ordered step sequences). Edit this file to add, remove, or change any build/lint/test step — do not add raw shell commands to `package.json` scripts for the core package
 
 **Linting:**
 - `.eslintrc.js` (root) - Monorepo-level ESLint config
diff --git a/.ai/TESTING.md b/.ai/TESTING.md
index 97377a5ea1c..2e741fe56b4 100644
--- a/.ai/TESTING.md
+++ b/.ai/TESTING.md
@@ -32,8 +32,6 @@ npm run test:unit --testPathPattern=cellMeta
 
 # Run specific E2E test pattern (must be run from handsontable/ directory):
 # The pattern is baked into the Rspack bundle at dump time via __ENV_ARGS__.testPathPattern.
-# rspack.config.js copies the lowercase npm_config_testpathpattern to npm_config_testPathPattern
-# so the standard npm --key=value syntax works.
 # Step 1: rebuild the test bundle with the pattern (skips full UMD build):
 npm run test:e2e.dump --testPathPattern=filters
 # Step 2: run puppeteer against the filtered bundle:
@@ -56,7 +54,7 @@ npm run test:unit -- --coverage
 - Per-run Puppeteer runner: `handsontable/test/E2ERunner-<runId>.html`
 - Generic dev runner (always regenerated alongside): `handsontable/test/E2ERunner.html`
 
-`run-puppeteer.mjs` computes the same hash from `npm_config_testpathpattern` / `npm_config_theme` and opens the matching HTML. It also binds the local HTTP server to the first free port starting at `8086` (retries on `EADDRINUSE`, up to 100 ports), so each concurrent run gets its own port. Any number of `npm run test:e2e --testPathPattern=<X>` invocations with distinct patterns (or themes) can run in parallel without further configuration -- the practical limit is machine resources, not the tooling.
+`run-puppeteer.mjs` computes the same hash from `npm_config_testpathpattern` / `npm_config_theme` (env vars set by the `test-e2e.mjs` wrapper) and opens the matching HTML. It also binds the local HTTP server to the first free port starting at `8086` (retries on `EADDRINUSE`, up to 100 ports), so each concurrent run gets its own port. Any number of `npm run test:e2e --testPathPattern=<X>` invocations with distinct patterns (or themes) can run in parallel without further configuration -- the practical limit is machine resources, not the tooling.
 
 The helper that derives the hash lives in `handsontable/.config/helper/run-id.js` -- used by both the Rspack config and the Puppeteer script so they stay in lockstep.
 
diff --git a/.changelogs/12508.json b/.changelogs/12508.json
new file mode 100644
index 00000000000..5a6e6db99cd
--- /dev/null
+++ b/.changelogs/12508.json
@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "public",
+  "title": "Fixed merged cells not following their data when columns or rows are reordered with `manualColumnMove`, `manualRowMove`, or `manualColumnFreeze`. Merges now translate with the underlying data; merges whose physical span becomes non-contiguous after a reorder auto-split into smaller merges, and any single-cell fragment left behind is dropped.",
+  "type": "fixed",
+  "issueOrPR": 12508,
+  "breaking": false,
+  "framework": "none"
+}
diff --git a/.changelogs/12514.json b/.changelogs/12514.json
new file mode 100644
index 00000000000..1a038b71776
--- /dev/null
+++ b/.changelogs/12514.json
@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "public",
+  "title": "Fixed the loading overlay resetting the grid scroll position to the top when no cell was selected before showing the overlay.",
+  "type": "fixed",
+  "issueOrPR": 12514,
+  "breaking": false,
+  "framework": "none"
+}
diff --git a/.changelogs/12515.json b/.changelogs/12515.json
new file mode 100644
index 00000000000..b12eaa36d69
--- /dev/null
+++ b/.changelogs/12515.json
@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "public",
+  "title": "Fixed manual column and row resize handle position after scrolling when `preventOverflow` is set.",
+  "type": "fixed",
+  "issueOrPR": 12515,
+  "breaking": false,
+  "framework": "none"
+}
diff --git a/.changelogs/12519.json b/.changelogs/12519.json
deleted file mode 100644
index 8c482d22440..00000000000
--- a/.changelogs/12519.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "issuesOrigin": "public",
-  "title": "Fixed the `@handsontable/angular-wrapper` ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError",
-  "type": "fixed",
-  "issueOrPR": 12519,
-  "breaking": false,
-  "framework": "angular"
-}
diff --git a/.changelogs/12533.json b/.changelogs/12533.json
new file mode 100644
index 00000000000..e54dda1f420
--- /dev/null
+++ b/.changelogs/12533.json
@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "public",
+  "title": "Fixed Prevent crash when Handsontable is initialized inside a hidden container, rowsRenderCalculator and columnsRenderCalculator on Viewport are never assigned and remain undefined.",
+  "type": "fixed",
+  "issueOrPR": 12533,
+  "breaking": false,
+  "framework": "none"
+}
diff --git a/.claude/skills/handsontable-css-dev/SKILL.md b/.claude/skills/handsontable-css-dev/SKILL.md
index 1a15dedafe5..7856bda9319 100644
--- a/.claude/skills/handsontable-css-dev/SKILL.md
+++ b/.claude/skills/handsontable-css-dev/SKILL.md
@@ -139,6 +139,6 @@ Before committing token work, mentally walk the four layers plus tests:
 2. JS token in all 3 runtime files?
 3. Registered in `validation.js` allow-list?
 4. Added to `TokenKey` in `themes.d.ts`?
-5. `npm run test:unit --prefix handsontable -- --testPathPattern=themes` passes?
+5. `npm run test:unit --prefix handsontable --testPathPattern=themes` passes?
 6. `npm run test:types --prefix handsontable` passes?
 7. Docs table updated?
diff --git a/.claude/skills/handsontable-demo-page/SKILL.md b/.claude/skills/handsontable-demo-page/SKILL.md
index c4a7bcdf2d1..28848764bad 100644
--- a/.claude/skills/handsontable-demo-page/SKILL.md
+++ b/.claude/skills/handsontable-demo-page/SKILL.md
@@ -1,20 +1,20 @@
 ---
 name: demo-page
-description: Use when creating a demo or test page for manual testing of Handsontable. Trigger when the user asks to create a demo, test page, repro page, reproduction case, manual test, or wants to verify a bug fix or feature visually. Also trigger when the user mentions dev-generated.html, dev.html, or wants to compare behavior between a released version and a local build. Use this for any PR that needs a manual testing artifact.
+description: Use when creating a demo or test page for manual testing of Handsontable. Trigger when the user asks to create a demo, test page, repro page, reproduction case, manual test, or wants to verify a bug fix or feature visually. Also trigger when the user mentions dev-generated.html, dev-pr.html, dev-latest.html, dev.html, or wants to compare behavior between a released version and a local build. Use this for any PR that needs a manual testing artifact.
 ---
 
 # Demo Page Generator
 
-Generate a self-contained HTML demo page at `handsontable/dev-generated.html` for manual testing. This file is gitignored (`dev*.html` pattern), so it never pollutes the repo.
+Generate two self-contained HTML demo pages for manual testing:
 
-The demo has two tabs so a reviewer can instantly compare behavior:
+| File | Loads from | Purpose |
+|------|-----------|---------|
+| `handsontable/dev-latest.html` | jsDelivr CDN (latest published version) | Shows the current/buggy behavior |
+| `handsontable/dev-pr.html` | Local `dist/` (built from the branch) | Shows the fix or new feature |
 
-| Tab | Loads from | Purpose |
-|-----|-----------|---------|
-| **Released** | jsDelivr CDN (latest published version) | Shows the current/buggy behavior |
-| **PR Build** | Local `dist/` (built from the branch) | Shows the fix or new feature |
+Both files are gitignored (`dev*.html` pattern), so they never pollute the repo.
 
-This side-by-side comparison makes PR review faster — the reviewer sees the bug on the Released tab and verifies the fix on the PR Build tab without switching branches.
+Each file links to the other at the top, so a reviewer can switch back and forth without losing scroll position or state context. **Two separate files means complete JS/CSS isolation** — no dual-instance loading tricks, no stylesheet toggling, no shared globals between versions.
 
 ## Step 1 — Analyze the PR context
 
@@ -41,19 +41,21 @@ If missing or stale, build:
 npm run build --prefix handsontable
 ```
 
-## Step 3 — Generate the demo page
+## Step 3 — Generate the two demo files
 
-Write `handsontable/dev-generated.html` using the template structure below. Adapt the Handsontable configuration in each tab to target the specific bug or feature being tested.
+Write both files using the templates below. Both are gitignored (`dev*.html`), so they never pollute the repo.
 
-> **File already exists?** `dev-generated.html` is always throwaway — it was generated by a previous task and contains nothing worth preserving. Skip reading it. Wipe it first with a Bash command, then write the new file:
+> **Files already exist?** Both files are throwaway — generated by a previous task. Skip reading them. Wipe them first, then write fresh:
 >
 > ```bash
-> rm handsontable/dev-generated.html
+> rm -f handsontable/dev-pr.html handsontable/dev-latest.html
 > ```
 >
-> Then use the Write tool to create the new content from scratch. Do **not** read the old file before writing.
+> Then use the Write tool to create each file from scratch.
 
-### Template structure
+Each file is a standalone single-instance page. The nav bar at the top links to the other file — the current file's link is styled as active (non-clickable) so the reviewer always knows where they are.
+
+### Template — `handsontable/dev-latest.html` (Released / CDN)
 
 ```html
 <!DOCTYPE html>
@@ -61,162 +63,148 @@ Write `handsontable/dev-generated.html` using the template structure below. Adap
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Manual Test — [short description]</title>
-
-  <!-- Released version (CDN) -->
-  <link id="css-released" rel="stylesheet"
+  <title>[short description] — Released v__RELEASED_VERSION__</title>
+  <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/handsontable@__RELEASED_VERSION__/styles/ht-theme-main.min.css">
-
-  <!-- PR Build version (local) -->
-  <link id="css-pr" rel="stylesheet" href="styles/ht-theme-main.css" disabled>
-
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 16px; background: #f5f5f5; }
-    h1 { font-size: 18px; margin-bottom: 4px; }
-
-    .tabs { display: flex; gap: 0; margin-bottom: 16px; margin-top: 12px; }
-    .tab-btn {
-      padding: 8px 20px; border: 1px solid #ccc; background: #e9e9e9;
-      cursor: pointer; font-size: 14px; transition: background 0.15s;
+    h1 { font-size: 18px; margin-bottom: 12px; }
+    nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
+    .nav-label { font-size: 13px; color: #666; margin-right: 4px; }
+    .nav-btn {
+      padding: 6px 16px; border-radius: 6px; font-size: 14px; text-decoration: none;
+      border: 1px solid #ccc;
     }
-    .tab-btn:first-child { border-radius: 6px 0 0 6px; }
-    .tab-btn:last-child { border-radius: 0 6px 6px 0; }
-    .tab-btn.active { background: #fff; font-weight: 600; border-bottom-color: #fff; }
-    .tab-btn:not(.active):hover { background: #f0f0f0; }
-
-    .tab-panel { display: none; }
-    .tab-panel.active { display: block; }
-
+    .nav-btn.active { background: #fff; font-weight: 600; border-color: #999; color: #111; pointer-events: none; }
+    .nav-btn:not(.active) { background: #e9e9e9; color: #333; }
+    .nav-btn:not(.active):hover { background: #f0f0f0; }
+    .badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
+    .badge-cdn { background: #e3f2fd; color: #1565c0; }
+    .badge-local { background: #e8f5e9; color: #2e7d32; }
     .info { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
     .info strong { color: #856404; }
-
-    .version-badge {
-      display: inline-block; font-size: 12px; padding: 2px 8px;
-      border-radius: 10px; margin-left: 8px; vertical-align: middle;
-    }
-    .version-badge.cdn { background: #e3f2fd; color: #1565c0; }
-    .version-badge.local { background: #e8f5e9; color: #2e7d32; }
   </style>
 </head>
 <body>
+  <h1>[Short description of what is being tested]</h1>
 
-  <h1>
-    [Short description of what is being tested]
-  </h1>
-
-  <div class="tabs">
-    <button class="tab-btn active" data-tab="released">
-      Released <span class="version-badge cdn">v__RELEASED_VERSION__</span>
-    </button>
-    <button class="tab-btn" data-tab="pr">
-      PR Build <span class="version-badge local">local</span>
-    </button>
-  </div>
+  <nav>
+    <span class="nav-label">Version:</span>
+    <span class="nav-btn active">Released <span class="badge badge-cdn">v__RELEASED_VERSION__</span></span>
+    <a class="nav-btn" href="dev-pr.html">PR Build <span class="badge badge-local">local</span></a>
+  </nav>
 
   <div class="info">
     <strong>How to test:</strong> [Step-by-step reproduction instructions]
   </div>
 
-  <div id="panel-released" class="tab-panel active">
-    <div id="hot-released"></div>
-  </div>
-
-  <div id="panel-pr" class="tab-panel">
-    <div id="hot-pr"></div>
-  </div>
-
-  <!-- Released version JS (CDN) -->
-  <script id="js-released"
-    src="https://cdn.jsdelivr.net/npm/handsontable@__RELEASED_VERSION__/dist/handsontable.full.min.js"></script>
+  <div id="hot-container"></div>
 
-  <!-- Save CDN Handsontable reference before local build overwrites it -->
+  <script src="https://cdn.jsdelivr.net/npm/handsontable@__RELEASED_VERSION__/dist/handsontable.full.min.js"></script>
   <script>
-    window.HandsontableReleased = window.Handsontable;
+    new Handsontable(document.getElementById('hot-container'), {
+      // === ADAPT THIS CONFIG TO THE TEST CASE ===
+      data: Handsontable.helper.createSpreadsheetData(10, 6),
+      colHeaders: true,
+      rowHeaders: true,
+      width: '100%',
+      height: 320,
+      themeName: 'ht-theme-main',
+      licenseKey: 'non-commercial-and-evaluation',
+    });
   </script>
+</body>
+</html>
+```
 
-  <!-- PR Build JS (local) -->
-  <script id="js-pr" src="dist/handsontable.full.js"></script>
-  <script>
-    window.HandsontablePR = window.Handsontable;
-  </script>
+### Template — `handsontable/dev-pr.html` (PR Build / local)
 
-  <script>
-    // ── Tab switching ─────────────────────────────────
-    const tabs = document.querySelectorAll('.tab-btn');
-    const panels = { released: document.getElementById('panel-released'), pr: document.getElementById('panel-pr') };
-    const cssReleased = document.getElementById('css-released');
-    const cssPR = document.getElementById('css-pr');
-    let hotInstances = {};
-
-    function switchTab(name) {
-      tabs.forEach(b => b.classList.toggle('active', b.dataset.tab === name));
-      Object.entries(panels).forEach(([k, p]) => p.classList.toggle('active', k === name));
-
-      // Swap stylesheets
-      cssReleased.disabled = (name !== 'released');
-      cssPR.disabled = (name !== 'pr');
-
-      // Lazy-init the grid on first visit
-      if (!hotInstances[name]) {
-        hotInstances[name] = createInstance(name);
-      } else {
-        hotInstances[name].render();
-      }
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>[short description] — PR Build</title>
+  <link rel="stylesheet" href="styles/ht-theme-main.css">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 16px; background: #f5f5f5; }
+    h1 { font-size: 18px; margin-bottom: 12px; }
+    nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
+    .nav-label { font-size: 13px; color: #666; margin-right: 4px; }
+    .nav-btn {
+      padding: 6px 16px; border-radius: 6px; font-size: 14px; text-decoration: none;
+      border: 1px solid #ccc;
     }
+    .nav-btn.active { background: #fff; font-weight: 600; border-color: #999; color: #111; pointer-events: none; }
+    .nav-btn:not(.active) { background: #e9e9e9; color: #333; }
+    .nav-btn:not(.active):hover { background: #f0f0f0; }
+    .badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
+    .badge-cdn { background: #e3f2fd; color: #1565c0; }
+    .badge-local { background: #e8f5e9; color: #2e7d32; }
+    .info { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
+    .info strong { color: #856404; }
+  </style>
+</head>
+<body>
+  <h1>[Short description of what is being tested]</h1>
 
-    tabs.forEach(btn => btn.addEventListener('click', () => switchTab(btn.dataset.tab)));
-
-    // ── Grid configuration ────────────────────────────
-    // Adapt this function to the specific bug/feature being tested.
-    function createInstance(which) {
-      const Ht = which === 'released' ? HandsontableReleased : HandsontablePR;
-      const container = which === 'released'
-        ? document.getElementById('hot-released')
-        : document.getElementById('hot-pr');
-
-      return new Ht(container, {
-        // === ADAPT THIS CONFIG TO THE TEST CASE ===
-        data: Ht.helper.createSpreadsheetData(10, 6),
-        colHeaders: true,
-        rowHeaders: true,
-        width: '100%',
-        height: 320,
-        themeName: 'ht-theme-main',
-        licenseKey: 'non-commercial-and-evaluation',
-      });
-    }
+  <nav>
+    <span class="nav-label">Version:</span>
+    <a class="nav-btn" href="dev-latest.html">Released <span class="badge badge-cdn">v__RELEASED_VERSION__</span></a>
+    <span class="nav-btn active">PR Build <span class="badge badge-local">local</span></span>
+  </nav>
+
+  <div class="info">
+    <strong>How to test:</strong> [Step-by-step reproduction instructions]
+  </div>
 
-    // Init the first tab
-    hotInstances['released'] = createInstance('released');
+  <div id="hot-container"></div>
+
+  <script src="dist/handsontable.full.js"></script>
+  <script>
+    new Handsontable(document.getElementById('hot-container'), {
+      // === ADAPT THIS CONFIG TO THE TEST CASE ===
+      data: Handsontable.helper.createSpreadsheetData(10, 6),
+      colHeaders: true,
+      rowHeaders: true,
+      width: '100%',
+      height: 320,
+      themeName: 'ht-theme-main',
+      licenseKey: 'non-commercial-and-evaluation',
+    });
   </script>
 </body>
 </html>
 ```
 
-### Filling in the template
+### Filling in the templates
 
-Replace these placeholders:
+Replace these placeholders **in both files**:
 
 | Placeholder | Value |
 |-------------|-------|
-| `__RELEASED_VERSION__` | The latest published version from `handsontable/package.json` (e.g., `17.0.1`). If the PR branch itself bumped the version, use the version from the base branch (`git show origin/develop:handsontable/package.json`). |
+| `__RELEASED_VERSION__` | The latest published version from `handsontable/package.json` (e.g., `17.0.1`). If the PR branch bumped the version, use the version from the base branch (`git show origin/develop:handsontable/package.json`). |
 | `[Short description...]` | A one-line summary, e.g., "Filters dropdown closes on Android touch" |
 | `[Step-by-step reproduction...]` | Numbered steps the reviewer should follow, e.g., "1. Double-tap cell A1. 2. The editor should open and stay open." |
 
+Keep the `<script>` config **identical in both files** — the only difference between the pages is which Handsontable build they load. That way any behavioral difference the reviewer sees is caused by the code change, not a config discrepancy.
+
 ### Adapting the config
 
-The `createInstance()` function is where all the test-specific logic goes. Tailor it based on what the PR changes:
+Tailor the Handsontable config block based on what the PR changes:
 
-**Bug fix PRs** — Configure the grid to reproduce the bug. The Released tab should exhibit the broken behavior; the PR Build tab should show it fixed. Include the minimal settings needed to trigger the issue.
+**Bug fix PRs** — Configure the grid to reproduce the bug. `dev-latest.html` should exhibit the broken behavior; `dev-pr.html` should show it fixed. Include the minimal settings needed to trigger the issue.
 
-**Feature PRs** — Configure the grid to showcase the new feature. The Released tab shows the "before" state (feature absent); the PR Build tab demonstrates the new capability.
+**Feature PRs** — Configure the grid to showcase the new feature. `dev-latest.html` shows the "before" state (feature absent); `dev-pr.html` demonstrates the new capability.
 
 **Plugin-specific** — Enable the relevant plugin with settings that exercise the changed code paths. Example for Filters:
 
 ```js
-return new Ht(container, {
-  data: Ht.helper.createSpreadsheetData(20, 6),
+new Handsontable(document.getElementById('hot-container'), {
+  data: Handsontable.helper.createSpreadsheetData(20, 6),
   colHeaders: true,
   rowHeaders: true,
   dropdownMenu: true,
@@ -228,13 +216,13 @@ return new Ht(container, {
 });
 ```
 
-**Touch/mobile testing** — Add the viewport meta tag (already in template) and keep the grid width responsive (`width: '100%'`). Mention touch-specific steps in the instructions.
+**Touch/mobile testing** — Keep the grid width responsive (`width: '100%'`). Mention touch-specific steps in the instructions.
 
-**Third-party integrations** — If the demo needs external libraries (flatpickr, Pickr, etc.), load them from CDN in both tabs. Keep versions consistent between tabs.
+**Third-party integrations** — If the demo needs external libraries (flatpickr, Pickr, etc.), load them from CDN in both files. Keep versions consistent.
 
 ### Additional CSS and external libraries
 
-If the test needs extra CSS or third-party libraries, add them to the `<head>`:
+Add them to the `<head>` of both files:
 
 ```html
 <!-- Example: flatpickr for date editor testing -->
@@ -242,8 +230,6 @@ If the test needs extra CSS or third-party libraries, add them to the `<head>`:
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 ```
 
-Load third-party libraries once (before both Handsontable scripts) so both tabs share them.
-
 ## Step 4 — Serve and verify
 
 Start a local server from the `handsontable/` directory:
@@ -252,20 +238,23 @@ Start a local server from the `handsontable/` directory:
 python3 -m http.server 8767 --directory handsontable &
 ```
 
-Verify both tabs work:
+Verify both files are reachable:
 
 ```bash
-curl -s -o /dev/null -w "%{http_code}" http://localhost:8767/dev-generated.html
+curl -s -o /dev/null -w "dev-latest: %{http_code}\n" http://localhost:8767/dev-latest.html && \
+curl -s -o /dev/null -w "dev-pr:     %{http_code}\n" http://localhost:8767/dev-pr.html
 ```
 
-The page is at: `http://localhost:8767/dev-generated.html`
+Tell the user both URLs:
+
+- `http://localhost:8767/dev-latest.html` — Released version (CDN)
+- `http://localhost:8767/dev-pr.html` — PR Build (local)
 
-Tell the user the URL so they can open it in a browser and test.
+The nav bar in each file links to the other, so the reviewer can switch back and forth without re-typing URLs.
 
 ## Important notes
 
-- The file is gitignored — it will not appear in `git status` or get committed.
-- Each tab has its own Handsontable instance. The CDN version is saved to `window.HandsontableReleased` before the local build script overwrites `window.Handsontable`.
-- Stylesheet switching uses the `disabled` attribute on `<link>` elements so only one theme is active at a time.
-- If the released version used the old CSS system (pre-v17, `dist/handsontable.full.css`), adjust the CDN CSS link accordingly.
-- For very old version comparisons, check that the API used in `createInstance()` exists in both versions.
+- Both files are gitignored (`dev*.html`) — they will not appear in `git status` or get committed.
+- Each file loads only one Handsontable build — no dual-instance tricks needed.
+- If the released version used the old CSS system (pre-v17, `dist/handsontable.full.css`), adjust the CDN CSS link in `dev-latest.html` accordingly.
+- For very old version comparisons, check that the API used in the config block exists in both versions.
diff --git a/.claude/skills/handsontable-e2e-testing/SKILL.md b/.claude/skills/handsontable-e2e-testing/SKILL.md
index cb585125020..1d6a136dff5 100644
--- a/.claude/skills/handsontable-e2e-testing/SKILL.md
+++ b/.claude/skills/handsontable-e2e-testing/SKILL.md
@@ -131,23 +131,21 @@ Use `it.flaky()` for timing-sensitive tests (auto-retries up to 3 times).
 ## Run commands
 
 - **All:** `npm run test:e2e --prefix handsontable`
-- **Targeted:** `npm run test:e2e --testPathPattern=<regex> --prefix handsontable` -- the pattern is matched against test file paths during the Rspack `.dump` step (e.g. `collapsibleColumns`, `ghostTable`, `textEditor`, `nestedHeaders/__tests__/hidingColumns`)
-- **With theme:** `npm run test:e2e --testPathPattern=<regex> --theme=horizon --prefix handsontable` (available themes: `classic`, `main`, `horizon`; default when `--theme` is omitted: `main`)
+- **Targeted:** `npm run test:e2e --prefix handsontable --testPathPattern=<regex>` -- the pattern is matched against test file paths during the Rspack `.dump` step (e.g. `collapsibleColumns`, `ghostTable`, `textEditor`, `nestedHeaders/__tests__/hidingColumns`)
+- **With theme:** `npm run test:e2e --prefix handsontable --testPathPattern=<regex> --theme=horizon` (available themes: `classic`, `main`, `horizon`; default when `--theme` is omitted: `main`)
 - **Rebuild first:** The E2E runner loads `dist/handsontable.js`. After changing `src/**`, run `npm run build --prefix handsontable` before running E2E tests.
 
-**Important:** Do NOT use `--` before `--testPathPattern`. The flag is consumed by npm during the `.dump` step (Rspack build), not by Puppeteer. Using `npm run test:e2e -- --testPathPattern=...` passes it only to the Puppeteer runner, which doesn't support it.
-
-**Parallel runs:** Multiple `npm run test:e2e --testPathPattern=<X>` invocations with different patterns (or themes) can run simultaneously. The dump step hashes `testPathPattern + theme` into a short run ID and writes per-run artifacts (`test/dist/main.entry.<runId>.js` and `test/E2ERunner-<runId>.html`), and the Puppeteer runner picks its own free port starting at `8086` (retries up to 100 ports). Nothing special needs to be passed -- just launch the commands; the practical limit is machine resources, not the tooling.
+**Parallel runs:** Multiple `npm run test:e2e --prefix handsontable --testPathPattern=<X>` invocations with different patterns (or themes) can run simultaneously. The dump step hashes `testPathPattern + theme` into a short run ID and writes per-run artifacts (`test/dist/main.entry.<runId>.js` and `test/E2ERunner-<runId>.html`), and the Puppeteer runner picks its own free port starting at `8086` (retries up to 100 ports). Nothing special needs to be passed -- just launch the commands; the practical limit is machine resources, not the tooling.
 
 **Iterating on a single area:** Prefer `test:e2e.watch` -- it leaves the dev server running and re-bundles + re-runs on every source change, so you don't have to stop and restart between edits:
 
 ```bash
-npm run test:e2e.watch --testPathPattern=filters --theme=horizon
+npm run test:e2e.watch --prefix handsontable --testPathPattern=filters --theme=horizon
 ```
 
 Under the hood it spawns the regular Rspack dump in `--watch` mode and reopens the browser page, reusing the generic `test/E2ERunner.html` (no run ID needed -- the dump and puppeteer halves share one npm process, so the flags propagate automatically).
 
-**One-shot run:** Use the combined `npm run test:e2e --testPathPattern=<regex> --theme=<theme>` -- a single npm invocation passes the flags to both dump and puppeteer via env, so there's no risk of a mismatch.
+**One-shot run:** Use `npm run test:e2e --prefix handsontable --testPathPattern=<regex> --theme=<theme>` -- the wrapper script passes the flags to both dump and puppeteer via env, so there's no risk of a mismatch.
 
 **Split dump + puppeteer** (what CI does): if you invoke the two steps in separate `npm run` commands, pass `--testPathPattern` AND `--theme` to **both**. Each `npm run` is its own npm process with its own env, and the Puppeteer script recomputes the same hash as dump to find the runner HTML -- a mismatch fails with "Runner HTML not found at ...". `.github/workflows/test.yml` is the canonical example; the same rule applies to `test:production.dump` + `test:e2e.puppeteer`.
 
diff --git a/.claude/skills/handsontable-unit-testing/SKILL.md b/.claude/skills/handsontable-unit-testing/SKILL.md
index e566600c4d4..4bbab80a603 100644
--- a/.claude/skills/handsontable-unit-testing/SKILL.md
+++ b/.claude/skills/handsontable-unit-testing/SKILL.md
@@ -40,10 +40,8 @@ For custom mocking, use `jest.fn()` for stubs and `jest.spyOn(object, 'method')`
 ## Run Commands
 
 - **All unit tests:** `npm run test:unit --prefix handsontable`
-- **Targeted:** `npm run test:unit --testPathPattern=<regex> --prefix handsontable` -- the pattern is matched against test file paths (e.g. `filters`, `ghostTable.unit`, `metaManager`)
-- **Example:** `npm run test:unit --testPathPattern=filters --prefix handsontable`
-
-**Important:** Do NOT use `--` before `--testPathPattern`. The flag is consumed by npm's script runner, not by Jest directly.
+- **Targeted:** `npm run test:unit --prefix handsontable --testPathPattern=<regex>` -- the pattern is matched against test file paths (e.g. `filters`, `ghostTable.unit`, `metaManager`)
+- **Example:** `npm run test:unit --prefix handsontable --testPathPattern=filters`
 
 ## Large Dataset Testing
 
diff --git a/.claude/skills/node-scripts-dev/SKILL.md b/.claude/skills/node-scripts-dev/SKILL.md
index a8e2ded8c25..0f6145ffdfe 100644
--- a/.claude/skills/node-scripts-dev/SKILL.md
+++ b/.claude/skills/node-scripts-dev/SKILL.md
@@ -11,9 +11,60 @@ All Node.js-side code in the monorepo -- scripts, utilities, and library modules
 
 - **Extension:** Always `.mjs` (never `.js` or `.cjs` for Node.js-side code).
 - **Location:** `scripts/` for CLI-invoked scripts. `lib/` for shared utilities and library modules. Package-specific paths are fine (e.g., `performance-tests/lib/`, `wrappers/react-wrapper/scripts/`).
-- **Invocation:** `node scripts/your-script.mjs` from `package.json` scripts.
+- **Invocation:** `node scripts/your-script.mjs` from `package.json` scripts, or as a `cmd` value in `handsontable/scripts/tasks.json` (see below).
 - **Scope:** These conventions apply to all `.mjs` files -- standalone scripts, library modules, Playwright helpers, build tooling, etc.
 
+## Adding npm scripts to the handsontable core package
+
+The `handsontable/` package uses a unified dispatcher. **Do not add raw shell commands directly to `handsontable/package.json` scripts.** Instead:
+
+1. Add the task to `handsontable/scripts/tasks.json`:
+
+```json
+"my-task": {
+  "cmd": "node scripts/my-script.mjs",
+  "deps": ["build:styles"],
+  "mode": "inherit"
+}
+```
+
+2. Add a thin shim to `package.json` that delegates to the dispatcher:
+
+```json
+"my-task": "node scripts/run.mjs my-task"
+```
+
+### tasks.json schema
+
+| Field | Required | Values | Purpose |
+|-------|----------|--------|---------|
+| `cmd` | yes | shell string | Command run via `spawn(..., { shell: true })` |
+| `deps` | no | task name array | Tasks that must complete first (resolved by DAG scheduler in parallel mode; resolved sequentially in direct invocation mode) |
+| `mode` | no | `quiet` (default) \| `inherit` \| `interactive` | `quiet` = suppress output with spinner; `inherit` = stream output (linters); `interactive` = full TTY pass-through (Jest) |
+| `cwd` | no | path relative to `handsontable/` | Working directory override |
+| `passthrough` | no | boolean | Append extra CLI flags (after `--`) to the cmd |
+| `note` | no | string | Human annotation only, ignored at runtime |
+
+### Pipeline definitions
+
+To group tasks into an ordered pipeline (e.g., a build or test sequence), add to the `pipelines` block:
+
+```json
+"pipelines": {
+  "my-pipeline": {
+    "before": ["clean"],
+    "tasks": ["my-task", "other-task"],
+    "after":  ["prepare-package-for-publish"]
+  }
+}
+```
+
+`before` and `after` steps run sequentially. `tasks` run sequentially with `--sequential` or via DAG with `--parallel`.
+
+### Other packages
+
+For wrapper packages (`wrappers/react-wrapper/`, `wrappers/angular-wrapper/`, `wrappers/vue3/`) and other monorepo packages (`performance-tests/`, `visual-tests/`), add directly to that package's `package.json` scripts as usual — those packages do not use the `run.mjs` dispatcher.
+
 ## Native module imports
 
 Always use the `node:` protocol prefix for built-in modules. This makes it explicit that the import is a Node.js built-in, not a third-party package.
diff --git a/.claude/skills/pr-creation/SKILL.md b/.claude/skills/pr-creation/SKILL.md
index b5c7b85b3af..6a2e1674bc5 100644
--- a/.claude/skills/pr-creation/SKILL.md
+++ b/.claude/skills/pr-creation/SKILL.md
@@ -37,10 +37,10 @@ npm run stylelint --prefix handsontable
 npm run build --prefix handsontable
 
 # Unit tests for the area you changed
-npm run test:unit --testPathPattern=<regex> --prefix handsontable
+npm run test:unit --prefix handsontable --testPathPattern=<regex>
 
 # E2E tests for the area you changed
-npm run test:e2e --testPathPattern=<regex> --prefix handsontable
+npm run test:e2e --prefix handsontable --testPathPattern=<regex>
 
 # If you touched a wrapper, test it too
 npm run test --prefix wrappers/react-wrapper
diff --git a/docs/README-EDITING.md b/docs/README-EDITING.md
index 5c28d5af8e0..0e827007de6 100644
--- a/docs/README-EDITING.md
+++ b/docs/README-EDITING.md
@@ -196,6 +196,8 @@ We use the following Markdown containers:
 
 These containers are processed by the `vuepress-preprocessor.mjs` plugin in `src/plugins/`, which converts the VuePress-style syntax into Astro/Starlight-compatible output.
 
+For `tip` / `warning` / `danger` / `note` callouts, the body is not full CommonMark. The preprocessor turns inline `` `code` ``, `**bold**`, and `[label](url)` into HTML (see `aside-inline-markdown.mjs`).
+
 ### Adding code examples
 
 Using the `example` Markdown container, you can add code snippets that show the code's result:
diff --git a/docs/content/guides/cell-features/merge-cells/merge-cells.md b/docs/content/guides/cell-features/merge-cells/merge-cells.md
index 76f0440066a..e9cc6f95438 100644
--- a/docs/content/guides/cell-features/merge-cells/merge-cells.md
+++ b/docs/content/guides/cell-features/merge-cells/merge-cells.md
@@ -158,6 +158,15 @@ The example below uses virtualized merged cells. It's also recommended to increa
 
 :::
 
+## Behavior during row/column reorder and column freeze
+
+When a merged cell's underlying rows or columns are reordered (through [`manualColumnMove`](@/api/options.md#manualcolumnmove), [`manualRowMove`](@/api/options.md#manualrowmove), or [`manualColumnFreeze`](@/api/options.md#manualcolumnfreeze)), Handsontable follows the merge to the new visual position. Two side effects can occur:
+
+- **Auto-split**: if the move bisects a merge so the underlying cells are no longer contiguous in the new visual order, the merge is split into separate merges, one per contiguous run. The cross-axis span (`rowspan` for column moves, `colspan` for row moves) is preserved on every fragment.
+- **Silent drop of single-cell fragments**: any resulting fragment that ends up as a single cell (`rowspan === 1 && colspan === 1`) is removed, because a single cell is no longer a merge. The [`afterMergeCells`](@/api/hooks.md#aftermergecells) hook is not fired for the dropped fragment.
+
+[`undo`](@/api/options.md#undo) and [`redo`](@/api/options.md#redo) restore the pre-move state, including any merges that were split or dropped by the reorder.
+
 ## Related keyboard shortcuts
 
 | Windows                                | macOS                                  | Action                              |  Excel  | Sheets  |
diff --git a/docs/content/guides/cell-functions/cell-function/angular/example1.ts b/docs/content/guides/cell-functions/cell-function/angular/example1.ts
index d81183a82f1..3758aa52fb5 100644
--- a/docs/content/guides/cell-functions/cell-function/angular/example1.ts
+++ b/docs/content/guides/cell-functions/cell-function/angular/example1.ts
@@ -73,7 +73,7 @@ const stockValidator = (value: Handsontable.CellValue, callback: (valid: boolean
     .htStockBarTrack {
       flex: 1;
       height: 8px;
-      background: #e5e7eb;
+      background: var(--ht-background-secondary-color);
       border-radius: 4px;
       overflow: hidden;
     }
diff --git a/docs/content/guides/cell-functions/cell-function/javascript/example1.css b/docs/content/guides/cell-functions/cell-function/javascript/example1.css
index ebb5c3d65e9..2c25609056f 100644
--- a/docs/content/guides/cell-functions/cell-function/javascript/example1.css
+++ b/docs/content/guides/cell-functions/cell-function/javascript/example1.css
@@ -10,7 +10,7 @@
 .htStockBarTrack {
   flex: 1;
   height: 8px;
-  background: #e5e7eb;
+  background: var(--ht-background-secondary-color);
   border-radius: 4px;
   overflow: hidden;
 }
diff --git a/docs/content/guides/cell-functions/cell-function/react/example1.css b/docs/content/guides/cell-functions/cell-function/react/example1.css
index ebb5c3d65e9..2c25609056f 100644
--- a/docs/content/guides/cell-functions/cell-function/react/example1.css
+++ b/docs/content/guides/cell-functions/cell-function/react/example1.css
@@ -10,7 +10,7 @@
 .htStockBarTrack {
   flex: 1;
   height: 8px;
-  background: #e5e7eb;
+  background: var(--ht-background-secondary-color);
   border-radius: 4px;
   overflow: hidden;
 }
diff --git a/docs/content/guides/cell-types/cell-type/angular/example1.ts b/docs/content/guides/cell-types/cell-type/angular/example1.ts
index 1b0a4e58a44..bac8d1a9a2c 100644
--- a/docs/content/guides/cell-types/cell-type/angular/example1.ts
+++ b/docs/content/guides/cell-types/cell-type/angular/example1.ts
@@ -1,16 +1,16 @@
 /* file: app.component.ts */
 import { Component } from '@angular/core';
 import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
-import Handsontable from 'handsontable/base';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
 import { BaseRenderer } from 'handsontable/renderers';
 
 const yellowRenderer: BaseRenderer = (instance, td, ...rest) => {
-  Handsontable.renderers.TextRenderer(instance, td, ...rest);
+  textRenderer(instance, td, ...rest);
   td.style.backgroundColor = 'yellow';
 };
 
 const greenRenderer: BaseRenderer = (instance, td, ...rest) => {
-  Handsontable.renderers.TextRenderer(instance, td, ...rest);
+  textRenderer(instance, td, ...rest);
 
   td.style.backgroundColor = 'green';
 };
diff --git a/docs/content/guides/cell-types/cell-type/cell-type.md b/docs/content/guides/cell-types/cell-type/cell-type.md
index 4f9d7478ecb..a0dbc681c12 100644
--- a/docs/content/guides/cell-types/cell-type/cell-type.md
+++ b/docs/content/guides/cell-types/cell-type/cell-type.md
@@ -608,6 +608,8 @@ Empty cells may be treated differently in different contexts, for example, the [
 
 ## Related
 
+<div class="boxes-list">
+
 - [Autocomplete cell type](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
 - [Checkbox cell type](@/guides/cell-types/checkbox-cell-type/checkbox-cell-type.md)
 - [Date cell type](@/guides/cell-types/date-cell-type/date-cell-type.md)
@@ -619,6 +621,8 @@ Empty cells may be treated differently in different contexts, for example, the [
 - [Select cell type](@/guides/cell-types/select-cell-type/select-cell-type.md)
 - [Time cell type](@/guides/cell-types/time-cell-type/time-cell-type.md)
 
+</div>
+
 ## Related articles
 
 **Related guides**
diff --git a/docs/content/guides/cell-types/cell-type/react/example1.jsx b/docs/content/guides/cell-types/cell-type/react/example1.jsx
index 2bc49bc2bf6..06cd8923f13 100644
--- a/docs/content/guides/cell-types/cell-type/react/example1.jsx
+++ b/docs/content/guides/cell-types/cell-type/react/example1.jsx
@@ -1,6 +1,6 @@
 import { HotTable } from '@handsontable/react-wrapper';
-import Handsontable from 'handsontable/base';
 import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
 
 // register Handsontable's modules
 registerAllModules();
@@ -8,12 +8,12 @@ registerAllModules();
 const ExampleComponent = () => {
   const colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
   const yellowRenderer = (instance, td, ...rest) => {
-    Handsontable.renderers.TextRenderer(instance, td, ...rest);
+    textRenderer(instance, td, ...rest);
     td.style.backgroundColor = 'yellow';
   };
 
   const greenRenderer = (instance, td, ...rest) => {
-    Handsontable.renderers.TextRenderer(instance, td, ...rest);
+    textRenderer(instance, td, ...rest);
     td.style.backgroundColor = 'green';
   };
 
diff --git a/docs/content/guides/cell-types/cell-type/react/example1.tsx b/docs/content/guides/cell-types/cell-type/react/example1.tsx
index 960773a32e9..176949d2952 100644
--- a/docs/content/guides/cell-types/cell-type/react/example1.tsx
+++ b/docs/content/guides/cell-types/cell-type/react/example1.tsx
@@ -1,6 +1,6 @@
 import { HotTable } from '@handsontable/react-wrapper';
-import Handsontable from 'handsontable/base';
 import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
 import { BaseRenderer } from 'handsontable/renderers';
 
 // register Handsontable's modules
@@ -10,12 +10,12 @@ const ExampleComponent = () => {
   const colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
 
   const yellowRenderer: BaseRenderer = (instance, td, ...rest) => {
-    Handsontable.renderers.TextRenderer(instance, td, ...rest);
+    textRenderer(instance, td, ...rest);
     td.style.backgroundColor = 'yellow';
   };
 
   const greenRenderer: BaseRenderer = (instance, td, ...rest) => {
-    Handsontable.renderers.TextRenderer(instance, td, ...rest);
+    textRenderer(instance, td, ...rest);
 
     td.style.backgroundColor = 'green';
   };
diff --git a/docs/content/guides/dialog/dialog/angular/example3.ts b/docs/content/guides/dialog/dialog/angular/example3.ts
index e7a91dae6e2..d65b23e8a3d 100644
--- a/docs/content/guides/dialog/dialog/angular/example3.ts
+++ b/docs/content/guides/dialog/dialog/angular/example3.ts
@@ -103,7 +103,7 @@ export class AppComponent implements AfterViewInit {
     autoWrapCol: true,
     autoRowSize: true,
     dialog: {
-      content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
+      content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
       closable: true,
     },
   };
diff --git a/docs/content/guides/dialog/dialog/angular/example4.ts b/docs/content/guides/dialog/dialog/angular/example4.ts
index 140ad89bd94..cc3db902711 100644
--- a/docs/content/guides/dialog/dialog/angular/example4.ts
+++ b/docs/content/guides/dialog/dialog/angular/example4.ts
@@ -1,16 +1,19 @@
 /* file: app.component.ts */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
 
 @Component({
   standalone: true,
   imports: [HotTableModule],
   selector: 'app-example4',
+  encapsulation: ViewEncapsulation.None,
   template: `
-    <div style="margin-bottom: 16px; display: flex; gap: 10px;">
-      <button (click)="showAlert()">Show Alert</button>
-      <button (click)="showConfirm()">Show Confirm</button>
-      <button (click)="showCustomConfirm()">Show custom Confirm (with solid background)</button>
+    <div class="example-controls-container">
+      <div class="controls">
+        <button type="button" (click)="showAlert()">Show Alert</button>
+        <button type="button" (click)="showConfirm()">Show Confirm</button>
+        <button type="button" (click)="showCustomConfirm()">Show custom Confirm (with solid background)</button>
+      </div>
     </div>
     <hot-table
       #hotTable
diff --git a/docs/content/guides/dialog/dialog/angular/example5.ts b/docs/content/guides/dialog/dialog/angular/example5.ts
index baec45e216a..6daaac6c3e3 100644
--- a/docs/content/guides/dialog/dialog/angular/example5.ts
+++ b/docs/content/guides/dialog/dialog/angular/example5.ts
@@ -1,11 +1,12 @@
 /* file: app.component.ts */
-import { AfterViewInit, Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ViewChild, ElementRef, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
 
 @Component({
   standalone: true,
   imports: [HotTableModule],
   selector: 'app-example5',
+  encapsulation: ViewEncapsulation.None,
   template: `
     <div class="example-controls-container">
       <div class="controls">
diff --git a/docs/content/guides/dialog/dialog/angular/example8.ts b/docs/content/guides/dialog/dialog/angular/example8.ts
index 2663612be40..2fcec0a8417 100644
--- a/docs/content/guides/dialog/dialog/angular/example8.ts
+++ b/docs/content/guides/dialog/dialog/angular/example8.ts
@@ -1,15 +1,18 @@
 /* file: app.component.ts */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
 
 @Component({
   standalone: true,
   imports: [HotTableModule],
   selector: 'app-example8',
+  encapsulation: ViewEncapsulation.None,
   template: `
-    <div style="margin-bottom: 16px; display: flex; gap: 10px;">
-      <button (click)="showDialog()">Show Dialog</button>
-      <button (click)="hideDialog()">Hide Dialog</button>
+    <div class="example-controls-container">
+      <div class="controls">
+        <button type="button" (click)="showDialog()">Show Dialog</button>
+        <button type="button" (click)="hideDialog()">Hide Dialog</button>
+      </div>
     </div>
     <hot-table
       #hotTable
diff --git a/docs/content/guides/dialog/dialog/javascript/example3.js b/docs/content/guides/dialog/dialog/javascript/example3.js
index 61e885c704d..f38ae7d5c6b 100644
--- a/docs/content/guides/dialog/dialog/javascript/example3.js
+++ b/docs/content/guides/dialog/dialog/javascript/example3.js
@@ -28,6 +28,7 @@ const data = [
 ];
 
 const container = document.getElementById('example3');
+
 const hot = new Handsontable(container, {
   data,
   colHeaders: true,
@@ -87,7 +88,7 @@ const hot = new Handsontable(container, {
   stretchH: 'all',
   dialog: {
     content:
-      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
+      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
     closable: true,
   },
   licenseKey: 'non-commercial-and-evaluation',
@@ -97,6 +98,7 @@ const hot = new Handsontable(container, {
 const dialogPlugin = hot.getPlugin('dialog');
 
 dialogPlugin.show();
+
 document.getElementById('example3-button').addEventListener('click', () => {
   dialogPlugin.hide();
 });
diff --git a/docs/content/guides/dialog/dialog/javascript/example3.ts b/docs/content/guides/dialog/dialog/javascript/example3.ts
index 283f63f54d3..648dd335d79 100644
--- a/docs/content/guides/dialog/dialog/javascript/example3.ts
+++ b/docs/content/guides/dialog/dialog/javascript/example3.ts
@@ -88,7 +88,7 @@ const hot = new Handsontable(container, {
   stretchH: 'all',
   dialog: {
     content:
-      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
+      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
     closable: true,
   },
   licenseKey: 'non-commercial-and-evaluation',
diff --git a/docs/content/guides/dialog/dialog/javascript/example4.html b/docs/content/guides/dialog/dialog/javascript/example4.html
index e2921d3c9f7..62bb333fa84 100644
--- a/docs/content/guides/dialog/dialog/javascript/example4.html
+++ b/docs/content/guides/dialog/dialog/javascript/example4.html
@@ -1,6 +1,8 @@
-<div style="margin-bottom: 16px; display: flex; gap: 10px">
-  <button id="showAlert">Show Alert</button>
-  <button id="showConfirm">Show Confirm</button>
-  <button id="showCustomConfirm">Show custom Confirm (with solid background)</button>
+<div class="example-controls-container">
+  <div class="controls">
+    <button type="button" id="showAlert">Show Alert</button>
+    <button type="button" id="showConfirm">Show Confirm</button>
+    <button type="button" id="showCustomConfirm">Show custom Confirm (with solid background)</button>
+  </div>
 </div>
 <div id="example4"></div>
diff --git a/docs/content/guides/dialog/dialog/javascript/example8.html b/docs/content/guides/dialog/dialog/javascript/example8.html
index df6a50284f3..b01d38c7c94 100644
--- a/docs/content/guides/dialog/dialog/javascript/example8.html
+++ b/docs/content/guides/dialog/dialog/javascript/example8.html
@@ -1,5 +1,7 @@
-<div style="margin-bottom: 16px; display: flex; gap: 10px">
-  <button id="showDialog">Show Dialog</button>
-  <button id="hideDialog">Hide Dialog</button>
+<div class="example-controls-container">
+  <div class="controls">
+    <button type="button" id="showDialog">Show Dialog</button>
+    <button type="button" id="hideDialog">Hide Dialog</button>
+  </div>
 </div>
 <div id="example8"></div>
diff --git a/docs/content/guides/dialog/dialog/react/example3.jsx b/docs/content/guides/dialog/dialog/react/example3.jsx
index d53642af1df..60541d5aec5 100644
--- a/docs/content/guides/dialog/dialog/react/example3.jsx
+++ b/docs/content/guides/dialog/dialog/react/example3.jsx
@@ -59,7 +59,7 @@ const ExampleComponent = () => {
       autoRowSize={true}
       dialog={{
         content:
-          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
+          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
         closable: true,
       }}
       licenseKey="non-commercial-and-evaluation"
diff --git a/docs/content/guides/dialog/dialog/react/example3.tsx b/docs/content/guides/dialog/dialog/react/example3.tsx
index f7b8e381a85..b82a81d4b36 100644
--- a/docs/content/guides/dialog/dialog/react/example3.tsx
+++ b/docs/content/guides/dialog/dialog/react/example3.tsx
@@ -60,7 +60,7 @@ const ExampleComponent = () => {
       autoRowSize={true}
       dialog={{
         content:
-          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
+          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
         closable: true,
       }}
       licenseKey="non-commercial-and-evaluation"
diff --git a/docs/content/guides/dialog/dialog/react/example4.jsx b/docs/content/guides/dialog/dialog/react/example4.jsx
index 6b9d30d3702..6b3076a115f 100644
--- a/docs/content/guides/dialog/dialog/react/example4.jsx
+++ b/docs/content/guides/dialog/dialog/react/example4.jsx
@@ -130,10 +130,12 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
-        <button onClick={showAlert}>Show Alert</button>
-        <button onClick={showConfirm}>Show Confirm</button>
-        <button onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" onClick={showAlert}>Show Alert</button>
+          <button type="button" onClick={showConfirm}>Show Confirm</button>
+          <button type="button" onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
+        </div>
       </div>
       <HotTable
         ref={hotTableRef}
diff --git a/docs/content/guides/dialog/dialog/react/example4.tsx b/docs/content/guides/dialog/dialog/react/example4.tsx
index a4917a921a9..649cd6a965f 100644
--- a/docs/content/guides/dialog/dialog/react/example4.tsx
+++ b/docs/content/guides/dialog/dialog/react/example4.tsx
@@ -130,10 +130,12 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
-        <button onClick={showAlert}>Show Alert</button>
-        <button onClick={showConfirm}>Show Confirm</button>
-        <button onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" onClick={showAlert}>Show Alert</button>
+          <button type="button" onClick={showConfirm}>Show Confirm</button>
+          <button type="button" onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
+        </div>
       </div>
       <HotTable
         ref={hotTableRef}
diff --git a/docs/content/guides/dialog/dialog/react/example8.jsx b/docs/content/guides/dialog/dialog/react/example8.jsx
index d5bc277d70f..8707ebb2a13 100644
--- a/docs/content/guides/dialog/dialog/react/example8.jsx
+++ b/docs/content/guides/dialog/dialog/react/example8.jsx
@@ -52,9 +52,11 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
-        <button onClick={showDialog}>Show Dialog</button>
-        <button onClick={hideDialog}>Hide Dialog</button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" onClick={showDialog}>Show Dialog</button>
+          <button type="button" onClick={hideDialog}>Hide Dialog</button>
+        </div>
       </div>
       <HotTable
         ref={hotTableRef}
diff --git a/docs/content/guides/dialog/dialog/react/example8.tsx b/docs/content/guides/dialog/dialog/react/example8.tsx
index c535341e622..35615858ddd 100644
--- a/docs/content/guides/dialog/dialog/react/example8.tsx
+++ b/docs/content/guides/dialog/dialog/react/example8.tsx
@@ -53,9 +53,11 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
-        <button onClick={showDialog}>Show Dialog</button>
-        <button onClick={hideDialog}>Hide Dialog</button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" onClick={showDialog}>Show Dialog</button>
+          <button type="button" onClick={hideDialog}>Hide Dialog</button>
+        </div>
       </div>
       <HotTable
         ref={hotTableRef}
diff --git a/docs/content/guides/dialog/loading/angular/example3.ts b/docs/content/guides/dialog/loading/angular/example3.ts
index 4a05d5e608d..de83a7046fa 100644
--- a/docs/content/guides/dialog/loading/angular/example3.ts
+++ b/docs/content/guides/dialog/loading/angular/example3.ts
@@ -1,18 +1,22 @@
 /* file: app.component.ts */
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
 
 @Component({
   standalone: true,
   imports: [HotTableModule],
   selector: 'app-example3',
+  encapsulation: ViewEncapsulation.None,
   template: `
-    <div style="margin-bottom: 16px; display: flex; gap: 10px">
-      <button 
-        [disabled]="isLoading" 
-        (click)="loadData()"
-        [innerHTML]="buttonText">
-      </button>
+    <div class="example-controls-container">
+      <div class="controls">
+        <button
+          type="button"
+          [disabled]="isLoading"
+          (click)="loadData()"
+          [innerHTML]="buttonText">
+        </button>
+      </div>
     </div>
     <hot-table
       #hotTable
diff --git a/docs/content/guides/dialog/loading/angular/example4.ts b/docs/content/guides/dialog/loading/angular/example4.ts
index 03675a9325c..f8e5fcdbbaf 100644
--- a/docs/content/guides/dialog/loading/angular/example4.ts
+++ b/docs/content/guides/dialog/loading/angular/example4.ts
@@ -29,12 +29,15 @@ import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/an
       [data]="hotData"
     >
     </hot-table>
-    <div style="margin-top: 16px; display: flex; gap: 10px">
-      <button 
-        [disabled]="isLoading" 
-        (click)="loadData()"
-        [innerHTML]="buttonText">
-      </button>
+    <div class="example-controls-container example-controls-below-grid">
+      <div class="controls">
+        <button
+          type="button"
+          [disabled]="isLoading"
+          (click)="loadData()"
+          [innerHTML]="buttonText">
+        </button>
+      </div>
     </div>
     <div style="margin-top: 16px;">
       <p style="padding: 0; font-size: var(--sl-text-xs); color: var(--sl-color-gray-3);">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>
diff --git a/docs/content/guides/dialog/loading/javascript/example3.html b/docs/content/guides/dialog/loading/javascript/example3.html
index d4721011cd0..e0a3721ff0f 100644
--- a/docs/content/guides/dialog/loading/javascript/example3.html
+++ b/docs/content/guides/dialog/loading/javascript/example3.html
@@ -1,4 +1,6 @@
-<div style="margin-bottom: 16px; display: flex; gap: 10px">
-  <button id="example3-loadData">Load Data</button>
+<div class="example-controls-container">
+  <div class="controls">
+    <button type="button" id="example3-loadData">Load Data</button>
+  </div>
 </div>
-<div id="example3"></div>
\ No newline at end of file
+<div id="example3"></div>
diff --git a/docs/content/guides/dialog/loading/javascript/example4.html b/docs/content/guides/dialog/loading/javascript/example4.html
index 7fe760de487..f63d12f15ab 100644
--- a/docs/content/guides/dialog/loading/javascript/example4.html
+++ b/docs/content/guides/dialog/loading/javascript/example4.html
@@ -1,11 +1,13 @@
 <div id="example4"></div>
 
-<div style="margin-top: 16px; display: flex; gap: 10px">
-  <button id="example4-loadData">Load Data</button>
+<div class="example-controls-container example-controls-below-grid">
+  <div class="controls">
+    <button type="button" id="example4-loadData">Load Data</button>
+  </div>
 </div>
 <div style="margin-top: 16px;">
   <p style="padding: 0; font-size: var(--sl-text-xs); color: var(--sl-color-gray-3);">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>
-</div>  
+</div>
 <div style="margin-top: 16px;">
   <div id="example4-pagination"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/content/guides/dialog/loading/react/example3.jsx b/docs/content/guides/dialog/loading/react/example3.jsx
index ea3d9a59bf5..8c3f3923783 100644
--- a/docs/content/guides/dialog/loading/react/example3.jsx
+++ b/docs/content/guides/dialog/loading/react/example3.jsx
@@ -109,10 +109,12 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px' }}>
-        <button id="loadData" onClick={loadData} disabled={isLoading}>
-          {data.length > 0 ? 'Reload Data' : 'Load Data'}
-        </button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" id="loadData" onClick={loadData} disabled={isLoading}>
+            {data.length > 0 ? 'Reload Data' : 'Load Data'}
+          </button>
+        </div>
       </div>
       <Table hotTableRef={hotTableRef} data={data} />
     </>
diff --git a/docs/content/guides/dialog/loading/react/example3.tsx b/docs/content/guides/dialog/loading/react/example3.tsx
index eb5ac218a29..52497e74bf0 100644
--- a/docs/content/guides/dialog/loading/react/example3.tsx
+++ b/docs/content/guides/dialog/loading/react/example3.tsx
@@ -113,10 +113,12 @@ const ExampleComponent = () => {
 
   return (
     <>
-      <div style={{ marginBottom: '16px' }}>
-        <button id="loadData" onClick={loadData} disabled={isLoading}>
-          {data.length > 0 ? 'Reload Data' : 'Load Data'}
-        </button>
+      <div className="example-controls-container">
+        <div className="controls">
+          <button type="button" id="loadData" onClick={loadData} disabled={isLoading}>
+            {data.length > 0 ? 'Reload Data' : 'Load Data'}
+          </button>
+        </div>
       </div>
       <Table hotTableRef={hotTableRef} data={data} />
     </>
diff --git a/docs/content/guides/dialog/loading/react/example4.jsx b/docs/content/guides/dialog/loading/react/example4.jsx
index 32c64b637c2..0bf9a906f60 100644
--- a/docs/content/guides/dialog/loading/react/example4.jsx
+++ b/docs/content/guides/dialog/loading/react/example4.jsx
@@ -152,10 +152,12 @@ const ExampleComponent = () => {
   return (
     <>
       <Table hotTableRef={hotTableRef} data={data} />
-      <div style={{ marginTop: '16px' }}>
-        <button id="loadData" onClick={loadData} disabled={isLoading}>
-          {data.length > 0 ? 'Reload Data' : 'Load Data'}
-        </button>
+      <div className="example-controls-container example-controls-below-grid">
+        <div className="controls">
+          <button type="button" id="loadData" onClick={loadData} disabled={isLoading}>
+            {data.length > 0 ? 'Reload Data' : 'Load Data'}
+          </button>
+        </div>
       </div>
       <div style={{ marginTop: '16px' }}>
         <p style={{ padding: 0, fontSize: 'var(--sl-text-xs)', color: 'var(--sl-color-gray-3)' }}>
diff --git a/docs/content/guides/dialog/loading/react/example4.tsx b/docs/content/guides/dialog/loading/react/example4.tsx
index d4b6a48ac0e..e079bbd3b00 100644
--- a/docs/content/guides/dialog/loading/react/example4.tsx
+++ b/docs/content/guides/dialog/loading/react/example4.tsx
@@ -152,10 +152,12 @@ const ExampleComponent = () => {
   return (
     <>
       <Table hotTableRef={hotTableRef} data={data} />
-      <div style={{ marginTop: '16px' }}>
-        <button id="loadData" onClick={loadData} disabled={isLoading}>
-          {data.length > 0 ? 'Reload Data' : 'Load Data'}
-        </button>
+      <div className="example-controls-container example-controls-below-grid">
+        <div className="controls">
+          <button type="button" id="loadData" onClick={loadData} disabled={isLoading}>
+            {data.length > 0 ? 'Reload Data' : 'Load Data'}
+          </button>
+        </div>
       </div>
       <div style={{ marginTop: '16px' }}>
         <p style={{ padding: 0, fontSize: 'var(--sl-text-xs)', color: 'var(--sl-color-gray-3)' }}>
diff --git a/docs/content/guides/formulas/formula-calculation/formula-calculation.md b/docs/content/guides/formulas/formula-calculation/formula-calculation.md
index de3bc734b40..7247478c9a1 100644
--- a/docs/content/guides/formulas/formula-calculation/formula-calculation.md
+++ b/docs/content/guides/formulas/formula-calculation/formula-calculation.md
@@ -289,7 +289,7 @@ const hyperformulaInstance = HyperFormula.buildEmpty({
   // initialize it with the `'internal-use-in-handsontable'` license key
   licenseKey: 'internal-use-in-handsontable',
 });
- 
+
 const configurationOptions: GridSettings = {
   formulas: {
     engine: hyperformulaInstance
@@ -722,7 +722,9 @@ For more information about named expressions, refer to the
 
 ## View the explainer video
 
-<iframe width="100%" src="https://www.youtube.com/embed/JJXUmACTDdk" style="border:0"></iframe>
+<div class="docs-video-embed">
+  <iframe src="https://www.youtube.com/embed/JJXUmACTDdk"></iframe>
+</div>
 
 ## Known limitations
 
diff --git a/docs/content/guides/getting-started/saving-data/angular/example1.ts b/docs/content/guides/getting-started/saving-data/angular/example1.ts
index 03a7f68a827..e15f1d07982 100644
--- a/docs/content/guides/getting-started/saving-data/angular/example1.ts
+++ b/docs/content/guides/getting-started/saving-data/angular/example1.ts
@@ -68,7 +68,7 @@ export class AppComponent {
         return;
       }
 
-      fetch('https://handsontable.com/docs/scripts/json/save.json', {
+      fetch('/docs/scripts/json/save.json', {
         method: 'POST',
         mode: 'no-cors',
         headers: {
@@ -99,7 +99,7 @@ export class AppComponent {
   loadClickCallback(event: MouseEvent): void {
     const hot = this.hotTable?.hotInstance;
 
-    fetch('https://handsontable.com/docs/scripts/json/load.json').then(
+    fetch('/docs/scripts/json/load.json').then(
       (response) => {
         response.json().then((data) => {
           hot?.loadData(data.data);
@@ -114,7 +114,7 @@ export class AppComponent {
     const hot = this.hotTable?.hotInstance;
 
     // save all cell's data
-    fetch('https://handsontable.com/docs/scripts/json/save.json', {
+    fetch('/docs/scripts/json/save.json', {
       method: 'POST',
       mode: 'no-cors',
       headers: {
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md b/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
index e70f861afae..e9e9d0e1074 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
@@ -73,7 +73,11 @@ Respect `signal` so outdated requests abort when the user sorts, filters, or cha
 
 ## More in this guide
 
+<div class="boxes-list">
+
 - [Server-side data](@/guides/getting-started/server-side-data/server-side-data.md)
 - [Migrate from client-side data](@/guides/getting-started/server-side-data/server-side-data-migration.md)
 - [Create, update, and remove](@/guides/getting-started/server-side-data/server-side-data-crud.md)
 - [Fetching, hooks, and examples](@/guides/getting-started/server-side-data/server-side-data-fetching.md)
+
+</div>
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md b/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
index a940b61074f..57a87e48cdb 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
@@ -84,7 +84,11 @@ When `onRowsUpdate` is set, Handsontable skips stacking certain edit sources on
 
 ## More in this guide
 
+<div class="boxes-list">
+
 - [Server-side data](@/guides/getting-started/server-side-data/server-side-data.md)
 - [Migrate from client-side data](@/guides/getting-started/server-side-data/server-side-data-migration.md)
 - [Configuration and query parameters](@/guides/getting-started/server-side-data/server-side-data-configuration.md)
 - [Fetching, hooks, and examples](@/guides/getting-started/server-side-data/server-side-data-fetching.md)
+
+</div>
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md b/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
index f89d06ea983..13f40b1cc1b 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
@@ -73,19 +73,55 @@ Each folder includes the same Express servers (`server-rest.mjs`, `server-graphq
 
 ## More in this guide
 
+<div class="boxes-list">
+
 - [Server-side data](@/guides/getting-started/server-side-data/server-side-data.md)
 - [Migrate from client-side data](@/guides/getting-started/server-side-data/server-side-data-migration.md)
 - [Configuration and query parameters](@/guides/getting-started/server-side-data/server-side-data-configuration.md)
 - [Create, update, and remove](@/guides/getting-started/server-side-data/server-side-data-crud.md)
 
+</div>
+
 ## Related guides
 
+<div class="boxes-list">
+
 - [Rows pagination](@/guides/rows/rows-pagination/rows-pagination.md)
 - [Rows sorting](@/guides/rows/rows-sorting/rows-sorting.md)
 - [Column filter](@/guides/columns/column-filter/column-filter.md)
 
+</div>
+
 ## Related API reference
 
-- Option: [`dataProvider`](@/api/options.md#dataprovider)
-- Plugin: [`DataProvider`](@/api/dataProvider.md)
-- Hooks: [`beforeDataProviderFetch`](@/api/hooks.md#beforedataproviderfetch), [`afterDataProviderFetch`](@/api/hooks.md#afterdataproviderfetch), [`afterDataProviderFetchError`](@/api/hooks.md#afterdataproviderfetcherror), [`afterDataProviderFetchAbort`](@/api/hooks.md#afterdataproviderfetchabort), [`hasExternalDataSource`](@/api/hooks.md#hasexternaldatasource), [`modifyRowHeader`](@/api/hooks.md#modifyrowheader) (global row index with pagination), [`beforeRowsMutation`](@/api/hooks.md#beforerowsmutation), [`afterRowsMutation`](@/api/hooks.md#afterrowsmutation), [`afterRowsMutationError`](@/api/hooks.md#afterrowsmutationerror)
+**Options**
+
+<div class="boxes-list">
+
+- [`dataProvider`](@/api/options.md#dataprovider)
+
+</div>
+
+**Plugins**
+
+<div class="boxes-list">
+
+- [`DataProvider`](@/api/dataProvider.md)
+
+</div>
+
+**Hooks**
+
+<div class="boxes-list">
+
+- [`beforeDataProviderFetch`](@/api/hooks.md#beforedataproviderfetch)
+- [`afterDataProviderFetch`](@/api/hooks.md#afterdataproviderfetch)
+- [`afterDataProviderFetchError`](@/api/hooks.md#afterdataproviderfetcherror)
+- [`afterDataProviderFetchAbort`](@/api/hooks.md#afterdataproviderfetchabort)
+- [`hasExternalDataSource`](@/api/hooks.md#hasexternaldatasource)
+- [`modifyRowHeader`](@/api/hooks.md#modifyrowheader) (global row index with pagination)
+- [`beforeRowsMutation`](@/api/hooks.md#beforerowsmutation)
+- [`afterRowsMutation`](@/api/hooks.md#afterrowsmutation)
+- [`afterRowsMutationError`](@/api/hooks.md#afterrowsmutationerror)
+
+</div>
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-migration.md b/docs/content/guides/getting-started/server-side-data/server-side-data-migration.md
index 338473eb8fc..0827a05694b 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-migration.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-migration.md
@@ -36,11 +36,15 @@ Use this checklist when moving from a full in-memory `data` array and hooks such
 
 ## More in this guide
 
+<div class="boxes-list">
+
 - [Server-side data](@/guides/getting-started/server-side-data/server-side-data.md) — overview, quick start, and demo.
 - [Configuration and query parameters](@/guides/getting-started/server-side-data/server-side-data-configuration.md)
 - [Create, update, and remove](@/guides/getting-started/server-side-data/server-side-data-crud.md)
 - [Fetching, hooks, and examples](@/guides/getting-started/server-side-data/server-side-data-fetching.md)
 
+</div>
+
 ## Result
 
 Your grid now loads and saves data server-side using the updated API.
diff --git a/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.html b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.html
new file mode 100644
index 00000000000..0e3dc4668aa
--- /dev/null
+++ b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.html
@@ -0,0 +1,3 @@
+<div id="example2">
+  <hot-table :settings="hotSettings"></hot-table>
+</div>
diff --git a/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.js b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.js
new file mode 100644
index 00000000000..489c383be9f
--- /dev/null
+++ b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.js
@@ -0,0 +1,62 @@
+import { defineComponent, h, render } from 'vue';
+import { HotTable } from '@handsontable/vue3';
+import { registerAllModules } from 'handsontable/registry';
+
+// register Handsontable's modules
+registerAllModules();
+
+// A reusable Vue 3 component that renders a cell value as an image.
+const ImageCell = defineComponent({
+  props: {
+    src: { type: String, required: true },
+  },
+  render() {
+    return h('img', {
+      src: this.src,
+      onMousedown: (event) => event.preventDefault(),
+    });
+  },
+});
+
+// Bridge function that mounts the Vue 3 component into the cell's TD element.
+// Vue's `render()` patches the existing tree on subsequent calls, so the
+// component instance is reused across re-renders.
+function imageComponentRenderer(instance, td, row, col, prop, value) {
+  const vnode = h(ImageCell, { src: value });
+
+  render(vnode, td);
+
+  return td;
+}
+
+const ExampleComponent = defineComponent({
+  data() {
+    return {
+      hotSettings: {
+        data: [
+          ['Professional JavaScript for Web Developers',
+            '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],
+          ['JavaScript: The Good Parts',
+            '/docs/img/examples/javascript-the-good-parts.jpg'],
+        ],
+        columns: [
+          {},
+          {
+            renderer: imageComponentRenderer,
+          },
+        ],
+        colHeaders: true,
+        rowHeights: 55,
+        height: 'auto',
+        autoWrapRow: true,
+        autoWrapCol: true,
+        licenseKey: 'non-commercial-and-evaluation',
+      },
+    };
+  },
+  components: {
+    HotTable,
+  },
+});
+
+export default ExampleComponent;
diff --git a/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue3-custom-renderer-example.md b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue3-custom-renderer-example.md
index 771e3bb75aa..54ae999d658 100644
--- a/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue3-custom-renderer-example.md
+++ b/docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue3-custom-renderer-example.md
@@ -3,7 +3,7 @@ type: tutorial
 id: uu0rzeo6
 title: Custom renderer in Vue 3
 metaTitle: Custom cell renderer - Vue 3 Data Grid | Handsontable
-description: Create a custom cell renderer, and use it in your Vue 3 data grid by declaring it as a function.
+description: Create a custom cell renderer, and use it in your Vue 3 data grid by declaring it as a function or as a Vue 3 component.
 permalink: /vue3-custom-renderer-example
 canonicalUrl: /vue3-custom-renderer-example
 react:
@@ -36,6 +36,21 @@ The following example is an implementation of `@handsontable/vue3` with a custom
 
 :::
 
+## Declare a renderer as a Vue 3 component
+
+You can use a Vue 3 component as a custom cell renderer by mounting it into the cell's TD element from inside the renderer function. Use Vue 3's `render(vnode, container)` API to mount the component imperatively and reuse the same component instance across re-renders -- Vue patches the existing tree instead of remounting.
+
+The renderer function receives the same arguments as a regular function-based renderer. You build a VNode from your component with `h(Component, props)` and pass it to `render()` together with the TD element. To pass static props alongside cell data, merge them into the second argument of `h()`.
+
+::: example #example2 :vue3 --html 1 --js 2
+
+@[code](@/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.html)
+@[code](@/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.js)
+
+:::
+
+If your component needs access to a Vue application context -- for example, global components, plugins, or `provide` / `inject` -- create a dedicated app per cell with `createApp(Component, props).mount(td)` instead of `render()`. Track the returned app instances so you can call `app.unmount()` when the grid is destroyed.
+
 ## Related articles
 
 **Related guides**
@@ -94,6 +109,7 @@ The following example is an implementation of `@handsontable/vue3` with a custom
 - How to declare a custom renderer function in a Vue 3 application.
 - How to read cell values and render HTML elements -- such as images -- inside cells.
 - How to assign the renderer to a specific column using the `renderer` option.
+- How to mount a Vue 3 component as a custom cell renderer with `render(vnode, td)`.
 
 ## Next steps
 
diff --git a/docs/content/guides/internationalization/language/angular/example2.html b/docs/content/guides/internationalization/language/angular/example2.html
deleted file mode 100644
index f6e097955e1..00000000000
--- a/docs/content/guides/internationalization/language/angular/example2.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div>
-  <example2-language></example2-language>
-</div>
diff --git a/docs/content/guides/internationalization/language/angular/example2.ts b/docs/content/guides/internationalization/language/angular/example2.ts
deleted file mode 100644
index 53de5674733..00000000000
--- a/docs/content/guides/internationalization/language/angular/example2.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/* file: app.component.ts */
-import { Component, ViewChild } from '@angular/core';
-import { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
-import { registerLanguageDictionary, getLanguagesDictionaries,
-   // @ts-ignore
-  arAR,
-  csCZ,
-  deCH,
-  deDE,
-  esMX,
-  frFR,
-  hrHR,
-  itIT,
-  jaJP,
-  koKR,
-  lvLV,
-  nbNO,
-  nlNL,
-  plPL,
-  ptBR,
-  ruRU,
-  srSP,
-  zhCN,
-  zhTW,
-} from 'handsontable/i18n';
-
-registerLanguageDictionary(arAR);
-registerLanguageDictionary(csCZ);
-registerLanguageDictionary(deCH);
-registerLanguageDictionary(deDE);
-registerLanguageDictionary(esMX);
-registerLanguageDictionary(frFR);
-registerLanguageDictionary(hrHR);
-registerLanguageDictionary(itIT);
-registerLanguageDictionary(jaJP);
-registerLanguageDictionary(koKR);
-registerLanguageDictionary(lvLV);
-registerLanguageDictionary(nbNO);
-registerLanguageDictionary(nlNL);
-registerLanguageDictionary(plPL);
-registerLanguageDictionary(ptBR);
-registerLanguageDictionary(ruRU);
-registerLanguageDictionary(srSP);
-registerLanguageDictionary(zhCN);
-registerLanguageDictionary(zhTW);
-
-@Component({
-  selector: 'example2-language',
-  standalone: true,
-  imports: [HotTableModule],
-  template: ` <div>
-    <div class="controls select-language">
-      <label>
-        Select language of the context menu:
-        <select [value]="language" (change)="updateHotLanguage($event)">
-          @for (lang of languageList; track lang) {
-            <option [value]="lang">{{ lang }}</option>
-          }
-        </select>
-      </label>
-    </div>
-    <div>
-      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
-    </div>
-  </div>`,
-})
-export class AppComponent {
-  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
-
-  readonly data: Array<Array<string | number>> = [
-    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
-    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
-    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
-    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
-    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
-  ];
-
-  readonly languageList = getLanguagesDictionaries().map(
-    (item) => item.languageCode
-  );
-
-  language = 'en-US';
-
-  readonly gridSettings: GridSettings = {
-    colHeaders: true,
-    rowHeaders: true,
-    contextMenu: true,
-    height: 'auto',
-    language: this.language,
-    autoWrapRow: true,
-    autoWrapCol: true
-  };
-
-  updateHotLanguage(event: any): void {
-    this.language = event.target.value;
-    this.hotTable?.hotInstance?.updateSettings({ language: this.language });
-  }
-}
-/* end-file */
-
-
-
-/* file: app.config.ts */
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { registerAllModules } from 'handsontable/registry';
-import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
-
-// register Handsontable's modules
-registerAllModules();
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    {
-      provide: HOT_GLOBAL_CONFIG,
-      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
-    },
-  ],
-};
-/* end-file */
diff --git a/docs/content/guides/internationalization/language/language.md b/docs/content/guides/internationalization/language/language.md
index c9b4d9cc11d..6fc2279de90 100644
--- a/docs/content/guides/internationalization/language/language.md
+++ b/docs/content/guides/internationalization/language/language.md
@@ -217,28 +217,6 @@ Language files were loaded after loading Handsontable.
 
 :::
 
-::: only-for react
-
-::: example #example2 :react-languages --js 1 --ts 2
-
-@[code](@/content/guides/internationalization/language/react/example2.jsx)
-@[code](@/content/guides/internationalization/language/react/example2.tsx)
-
-:::
-
-:::
-
-::: only-for angular
-
-::: example #example2 :angular-languages --ts 1 --html 2
-
-@[code](@/content/guides/internationalization/language/angular/example2.ts)
-@[code](@/content/guides/internationalization/language/angular/example2.html)
-
-:::
-
-:::
-
 ## List of translatable features
 
 Below is a list of features which can be translated:
diff --git a/docs/content/guides/internationalization/language/react/example2.jsx b/docs/content/guides/internationalization/language/react/example2.jsx
deleted file mode 100644
index 3eb3df83d5f..00000000000
--- a/docs/content/guides/internationalization/language/react/example2.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useState, useEffect } from 'react';
-import { HotTable } from '@handsontable/react-wrapper';
-import {
-  registerLanguageDictionary,
-  getLanguagesDictionaries,
-  arAR,
-  csCZ,
-  deCH,
-  deDE,
-  esMX,
-  frFR,
-  hrHR,
-  itIT,
-  jaJP,
-  koKR,
-  lvLV,
-  nbNO,
-  nlNL,
-  plPL,
-  ptBR,
-  ruRU,
-  srSP,
-  zhCN,
-  zhTW,
-} from 'handsontable/i18n';
-import { registerAllModules } from 'handsontable/registry';
-
-// register Handsontable's modules
-registerAllModules();
-registerLanguageDictionary(arAR);
-registerLanguageDictionary(csCZ);
-registerLanguageDictionary(deCH);
-registerLanguageDictionary(deDE);
-registerLanguageDictionary(esMX);
-registerLanguageDictionary(frFR);
-registerLanguageDictionary(hrHR);
-registerLanguageDictionary(itIT);
-registerLanguageDictionary(jaJP);
-registerLanguageDictionary(koKR);
-registerLanguageDictionary(lvLV);
-registerLanguageDictionary(nbNO);
-registerLanguageDictionary(nlNL);
-registerLanguageDictionary(plPL);
-registerLanguageDictionary(ptBR);
-registerLanguageDictionary(ruRU);
-registerLanguageDictionary(srSP);
-registerLanguageDictionary(zhCN);
-registerLanguageDictionary(zhTW);
-
-const ExampleComponent = () => {
-  const [language, setLanguage] = useState('en-US');
-  const [languageList, setLanguageList] = useState([]);
-
-  useEffect(() => {
-    setLanguageList(getLanguagesDictionaries());
-  }, []);
-
-  const updateHotLanguage = (event) => {
-    setLanguage(event.target.value);
-  };
-
-  return (
-    <div>
-      <div className="controls select-language">
-        <label>
-          Select language of the context menu:{' '}
-          <select value={language} onChange={updateHotLanguage}>
-            {languageList.map(({ languageCode }) => (
-              <option key={languageCode} value={languageCode}>
-                {languageCode}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-
-      <HotTable
-        data={[
-          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
-          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
-          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
-          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
-          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
-        ]}
-        colHeaders={true}
-        rowHeaders={true}
-        contextMenu={true}
-        height="auto"
-        language={language}
-        autoWrapRow={true}
-        autoWrapCol={true}
-        licenseKey="non-commercial-and-evaluation"
-      />
-    </div>
-  );
-};
-
-export default ExampleComponent;
diff --git a/docs/content/guides/internationalization/language/react/example2.tsx b/docs/content/guides/internationalization/language/react/example2.tsx
deleted file mode 100644
index 19c40d18aaa..00000000000
--- a/docs/content/guides/internationalization/language/react/example2.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useState, useEffect } from 'react';
-import { HotTable } from '@handsontable/react-wrapper';
-import {
-  registerLanguageDictionary,
-  getLanguagesDictionaries,
-  arAR,
-  csCZ,
-  deCH,
-  deDE,
-  esMX,
-  frFR,
-  hrHR,
-  itIT,
-  jaJP,
-  koKR,
-  lvLV,
-  nbNO,
-  nlNL,
-  plPL,
-  ptBR,
-  ruRU,
-  srSP,
-  zhCN,
-  zhTW,
-} from 'handsontable/i18n';
-import { registerAllModules } from 'handsontable/registry';
-
-// register Handsontable's modules
-registerAllModules();
-
-registerLanguageDictionary(arAR);
-registerLanguageDictionary(csCZ);
-registerLanguageDictionary(deCH);
-registerLanguageDictionary(deDE);
-registerLanguageDictionary(esMX);
-registerLanguageDictionary(frFR);
-registerLanguageDictionary(hrHR);
-registerLanguageDictionary(itIT);
-registerLanguageDictionary(jaJP);
-registerLanguageDictionary(koKR);
-registerLanguageDictionary(lvLV);
-registerLanguageDictionary(nbNO);
-registerLanguageDictionary(nlNL);
-registerLanguageDictionary(plPL);
-registerLanguageDictionary(ptBR);
-registerLanguageDictionary(ruRU);
-registerLanguageDictionary(srSP);
-registerLanguageDictionary(zhCN);
-registerLanguageDictionary(zhTW);
-
-const ExampleComponent = () => {
-  const [language, setLanguage] = useState('en-US');
-  const [languageList, setLanguageList] = useState([]);
-
-  useEffect(() => {
-    setLanguageList(getLanguagesDictionaries());
-  }, []);
-
-  const updateHotLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setLanguage(event.target.value);
-  };
-
-  return (
-    <div>
-      <div className="controls select-language">
-        <label>
-          Select language of the context menu:{' '}
-          <select value={language} onChange={updateHotLanguage}>
-            {languageList.map(({ languageCode }) => (
-              <option key={languageCode} value={languageCode}>
-                {languageCode}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-
-      <HotTable
-        data={[
-          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
-          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
-          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
-          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
-          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
-        ]}
-        colHeaders={true}
-        rowHeaders={true}
-        contextMenu={true}
-        height="auto"
-        language={language}
-        autoWrapRow={true}
-        autoWrapCol={true}
-        licenseKey="non-commercial-and-evaluation"
-      />
-    </div>
-  );
-};
-
-export default ExampleComponent;
diff --git a/docs/content/guides/navigation/focus-scopes/angular/example1.ts b/docs/content/guides/navigation/focus-scopes/angular/example1.ts
index fd958315fef..f42d4e4b160 100644
--- a/docs/content/guides/navigation/focus-scopes/angular/example1.ts
+++ b/docs/content/guides/navigation/focus-scopes/angular/example1.ts
@@ -62,12 +62,22 @@ import { HotTableComponent } from '@handsontable/angular-wrapper';
   styles: `
     .placeholder-input {
       max-width: 20rem;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.875rem;
+      padding: 0.4rem 0.625rem;
+      font-size: var(--sl-text-sm);
       line-height: 1.25rem;
-      color: black;
-      border: 1px solid #e4e4e7;
-      border-radius: 6px;
+      color: var(--sl-color-text);
+      background: none;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0;
+      outline: none;
+    }
+
+    .placeholder-input::placeholder {
+      color: var(--sl-color-gray-3);
+    }
+
+    .placeholder-input:focus {
+      border-color: var(--sl-color-accent);
     }
 
     .example-container {
@@ -75,10 +85,6 @@ import { HotTableComponent } from '@handsontable/angular-wrapper';
       display: flex;
       flex-direction: column;
     }
-
-    .debug-table td {
-      padding: 10px !important;
-    }
   `,
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
diff --git a/docs/content/guides/navigation/focus-scopes/angular/example2.ts b/docs/content/guides/navigation/focus-scopes/angular/example2.ts
index 23532b3018b..f67ef7a4764 100644
--- a/docs/content/guides/navigation/focus-scopes/angular/example2.ts
+++ b/docs/content/guides/navigation/focus-scopes/angular/example2.ts
@@ -62,12 +62,22 @@ import { HotTableComponent } from '@handsontable/angular-wrapper';
   styles: `
     .placeholder-input {
       max-width: 20rem;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.875rem;
+      padding: 0.4rem 0.625rem;
+      font-size: var(--sl-text-sm);
       line-height: 1.25rem;
-      color: black;
-      border: 1px solid #e4e4e7;
-      border-radius: 6px;
+      color: var(--sl-color-text);
+      background: none;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0;
+      outline: none;
+    }
+
+    .placeholder-input::placeholder {
+      color: var(--sl-color-gray-3);
+    }
+
+    .placeholder-input:focus {
+      border-color: var(--sl-color-accent);
     }
 
     .example-container {
@@ -75,10 +85,6 @@ import { HotTableComponent } from '@handsontable/angular-wrapper';
       display: flex;
       flex-direction: column;
     }
-
-    .debug-table td {
-      padding: 10px !important;
-    }
   `,
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
diff --git a/docs/content/guides/navigation/focus-scopes/javascript/example1.css b/docs/content/guides/navigation/focus-scopes/javascript/example1.css
index 7821a226282..74d0f355700 100644
--- a/docs/content/guides/navigation/focus-scopes/javascript/example1.css
+++ b/docs/content/guides/navigation/focus-scopes/javascript/example1.css
@@ -23,30 +23,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.example-container > strong {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--sl-color-white);
-  margin: 0.5rem 0 0;
-}
-
-.example-container .debug-table {
-  font-size: var(--sl-text-sm);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.example-container .debug-table td {
-  padding: 0.4rem 0.75rem !important;
-  border-bottom: 1px solid var(--sl-color-gray-5);
-  color: var(--sl-color-gray-2);
-}
-
-.example-container .debug-table td:last-child {
-  font-family: var(--sl-font-mono, ui-monospace, monospace);
-}
-
-.example-container .debug-table td code {
-  font-size: var(--sl-text-xs);
-}
diff --git a/docs/content/guides/navigation/focus-scopes/javascript/example2.css b/docs/content/guides/navigation/focus-scopes/javascript/example2.css
index 7821a226282..74d0f355700 100644
--- a/docs/content/guides/navigation/focus-scopes/javascript/example2.css
+++ b/docs/content/guides/navigation/focus-scopes/javascript/example2.css
@@ -23,30 +23,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.example-container > strong {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--sl-color-white);
-  margin: 0.5rem 0 0;
-}
-
-.example-container .debug-table {
-  font-size: var(--sl-text-sm);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.example-container .debug-table td {
-  padding: 0.4rem 0.75rem !important;
-  border-bottom: 1px solid var(--sl-color-gray-5);
-  color: var(--sl-color-gray-2);
-}
-
-.example-container .debug-table td:last-child {
-  font-family: var(--sl-font-mono, ui-monospace, monospace);
-}
-
-.example-container .debug-table td code {
-  font-size: var(--sl-text-xs);
-}
diff --git a/docs/content/guides/navigation/focus-scopes/react/example1.css b/docs/content/guides/navigation/focus-scopes/react/example1.css
index 7821a226282..74d0f355700 100644
--- a/docs/content/guides/navigation/focus-scopes/react/example1.css
+++ b/docs/content/guides/navigation/focus-scopes/react/example1.css
@@ -23,30 +23,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.example-container > strong {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--sl-color-white);
-  margin: 0.5rem 0 0;
-}
-
-.example-container .debug-table {
-  font-size: var(--sl-text-sm);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.example-container .debug-table td {
-  padding: 0.4rem 0.75rem !important;
-  border-bottom: 1px solid var(--sl-color-gray-5);
-  color: var(--sl-color-gray-2);
-}
-
-.example-container .debug-table td:last-child {
-  font-family: var(--sl-font-mono, ui-monospace, monospace);
-}
-
-.example-container .debug-table td code {
-  font-size: var(--sl-text-xs);
-}
diff --git a/docs/content/guides/navigation/focus-scopes/react/example2.css b/docs/content/guides/navigation/focus-scopes/react/example2.css
index 7821a226282..74d0f355700 100644
--- a/docs/content/guides/navigation/focus-scopes/react/example2.css
+++ b/docs/content/guides/navigation/focus-scopes/react/example2.css
@@ -23,30 +23,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.example-container > strong {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--sl-color-white);
-  margin: 0.5rem 0 0;
-}
-
-.example-container .debug-table {
-  font-size: var(--sl-text-sm);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.example-container .debug-table td {
-  padding: 0.4rem 0.75rem !important;
-  border-bottom: 1px solid var(--sl-color-gray-5);
-  color: var(--sl-color-gray-2);
-}
-
-.example-container .debug-table td:last-child {
-  font-family: var(--sl-font-mono, ui-monospace, monospace);
-}
-
-.example-container .debug-table td code {
-  font-size: var(--sl-text-xs);
-}
diff --git a/docs/content/guides/rows/row-prepopulating/angular/example1.ts b/docs/content/guides/rows/row-prepopulating/angular/example1.ts
index 594efb8f3b4..6bdceffb04d 100644
--- a/docs/content/guides/rows/row-prepopulating/angular/example1.ts
+++ b/docs/content/guides/rows/row-prepopulating/angular/example1.ts
@@ -1,137 +1,37 @@
 /* file: app.component.ts */
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
-import Handsontable from 'handsontable/base';
-import { textRenderer } from 'handsontable/renderers/textRenderer';
+import { Component } from '@angular/core';
+import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
 
 @Component({
   selector: 'app-example1',
   template: `
-    <hot-table
-      [settings]="hotSettings!" [data]="hotData">
-    </hot-table>
+    <hot-table [settings]="gridSettings" [data]="hotData"></hot-table>
   `,
   standalone: true,
   imports: [HotTableModule],
 })
-export class AppComponent implements AfterViewInit {
-  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
-
-  hotData = [
-
+export class AppComponent {
+  readonly hotData = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
   ];
 
-  hotSettings: GridSettings = {
-
+  readonly gridSettings: GridSettings = {
+    minSpareRows: 1,
+    height: 'auto',
+    autoWrapRow: true,
+    autoWrapCol: true,
   };
-
-  ngAfterViewInit() {
-    const templateValues = ['one', 'two', 'three'];
-    const data = [
-      ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
-      ['2017', 10, 11, 12, 13],
-      ['2018', 20, 11, 14, 13],
-      ['2019', 30, 15, 12, 13],
-    ];
-
-    function isEmptyRow(instance: Handsontable, row: number) {
-      const rowData = instance.getDataAtRow(row);
-
-      for (let i = 0, ilen = rowData.length; i < ilen; i++) {
-        if (rowData[i] !== null) {
-          return false;
-        }
-      }
-
-      return true;
-    }
-
-    const defaultValueRenderer = (
-      instance: Handsontable,
-      td: HTMLTableCellElement,
-      row: number,
-      col: number,
-      prop: string | number,
-      value: Handsontable.CellValue,
-      cellProperties: Handsontable.CellProperties
-    ) => {
-      if (value === null && isEmptyRow(instance, row)) {
-        value = templateValues[col];
-        td.style.color = '#999';
-      } else {
-        td.style.color = '';
-      }
-
-      textRenderer(
-        instance,
-        td,
-        row,
-        col,
-        prop,
-        value,
-        cellProperties
-      );
-    };
-
-    const hot = this.hotTable.hotInstance!;
-
-    this.hotSettings = {
-      startRows: 8,
-      startCols: 5,
-      minSpareRows: 1,
-      contextMenu: true,
-      height: 'auto',
-      licenseKey: 'non-commercial-and-evaluation',
-      cells() {
-        return { renderer: defaultValueRenderer };
-      },
-      beforeChange: function (changes) {
-        const instance = hot;
-        const columns = instance.countCols();
-        const rowColumnSeen: Record<string, boolean> = {};
-        const rowsToFill: Record<string, boolean> = {};
-        const ch = changes === null ? [] : changes!;
-
-        for (let i = 0; i < ch.length; i++) {
-          // if oldVal is empty
-          if (ch[i]![2] === null && ch[i]![3] !== null) {
-            if (isEmptyRow(instance, ch[i]![0])) {
-              // add this row/col combination to the cache so it will not be overwritten by the template
-              rowColumnSeen[`${ch[i]![0]}/${ch[i]![1]}`] = true;
-              rowsToFill[String(ch[i]![0])] = true;
-            }
-          }
-        }
-
-        for (const r in rowsToFill) {
-          if (rowsToFill.hasOwnProperty(r)) {
-            for (let c = 0; c < columns; c++) {
-              // if it is not provided by user in this change set, take the value from the template
-              if (!rowColumnSeen[`${r}/${c}`]) {
-                ch.push([Number(r), c, null, templateValues[c]]);
-              }
-            }
-          }
-        }
-      },
-      autoWrapRow: true,
-      autoWrapCol: true,
-    }
-
-    this.hotTable.hotInstance!.loadData(data);
-  }
-
 }
 /* end-file */
 
-
-
 /* file: app.config.ts */
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { registerAllModules } from 'handsontable/registry';
 import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
 
-// register Handsontable's modules
 registerAllModules();
 
 export const appConfig: ApplicationConfig = {
diff --git a/docs/content/guides/rows/row-prepopulating/angular/example2.html b/docs/content/guides/rows/row-prepopulating/angular/example2.html
new file mode 100644
index 00000000000..7de9666d333
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/angular/example2.html
@@ -0,0 +1,3 @@
+<div>
+    <app-example2></app-example2>
+</div>
diff --git a/docs/content/guides/rows/row-prepopulating/angular/example2.ts b/docs/content/guides/rows/row-prepopulating/angular/example2.ts
new file mode 100644
index 00000000000..a890a1eee06
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/angular/example2.ts
@@ -0,0 +1,84 @@
+/* file: app.component.ts */
+import { Component } from '@angular/core';
+import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
+import Handsontable from 'handsontable/base';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+const templateValues = ['one', 'two', 'three'];
+
+function isEmptyRow(instance: Handsontable, row: number) {
+  const rowData = instance.getDataAtRow(row);
+
+  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+    if (rowData[i] !== null) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const defaultValueRenderer = (
+  instance: Handsontable,
+  td: HTMLTableCellElement,
+  row: number,
+  col: number,
+  prop: string | number,
+  value: Handsontable.CellValue,
+  cellProperties: Handsontable.CellProperties
+) => {
+  if (value === null && isEmptyRow(instance, row)) {
+    value = templateValues[col];
+    td.style.color = '#999';
+  } else {
+    td.style.color = '';
+  }
+
+  textRenderer(instance, td, row, col, prop, value, cellProperties);
+};
+
+@Component({
+  selector: 'app-example2',
+  template: `
+    <hot-table [settings]="gridSettings" [data]="hotData"></hot-table>
+  `,
+  standalone: true,
+  imports: [HotTableModule],
+})
+export class AppComponent {
+  readonly hotData = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
+  ];
+
+  readonly gridSettings: GridSettings = {
+    minSpareRows: 1,
+    height: 'auto',
+    autoWrapRow: true,
+    autoWrapCol: true,
+    cells() {
+      return { renderer: defaultValueRenderer };
+    },
+  };
+}
+/* end-file */
+
+/* file: app.config.ts */
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { registerAllModules } from 'handsontable/registry';
+import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
+
+registerAllModules();
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    {
+      provide: HOT_GLOBAL_CONFIG,
+      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
+    },
+  ],
+};
+/* end-file */
diff --git a/docs/content/guides/rows/row-prepopulating/angular/example3.html b/docs/content/guides/rows/row-prepopulating/angular/example3.html
new file mode 100644
index 00000000000..e3db8213fab
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/angular/example3.html
@@ -0,0 +1,3 @@
+<div>
+    <app-example3></app-example3>
+</div>
diff --git a/docs/content/guides/rows/row-prepopulating/angular/example3.ts b/docs/content/guides/rows/row-prepopulating/angular/example3.ts
new file mode 100644
index 00000000000..307cbe304f5
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/angular/example3.ts
@@ -0,0 +1,138 @@
+/* file: app.component.ts */
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
+import Handsontable from 'handsontable/base';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+@Component({
+  selector: 'app-example3',
+  template: `
+    <hot-table
+      [settings]="hotSettings!" [data]="hotData">
+    </hot-table>
+  `,
+  standalone: true,
+  imports: [HotTableModule],
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
+
+  hotData = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
+  ];
+
+  hotSettings: GridSettings = {};
+
+  ngAfterViewInit() {
+    const templateValues = ['one', 'two', 'three'];
+
+    function isEmptyRow(instance: Handsontable, row: number) {
+      const rowData = instance.getDataAtRow(row);
+
+      for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+        if (rowData[i] !== null) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+    const defaultValueRenderer = (
+      instance: Handsontable,
+      td: HTMLTableCellElement,
+      row: number,
+      col: number,
+      prop: string | number,
+      value: Handsontable.CellValue,
+      cellProperties: Handsontable.CellProperties
+    ) => {
+      if (value === null && isEmptyRow(instance, row)) {
+        value = templateValues[col];
+        td.style.color = '#999';
+      } else {
+        td.style.color = '';
+      }
+
+      textRenderer(
+        instance,
+        td,
+        row,
+        col,
+        prop,
+        value,
+        cellProperties
+      );
+    };
+
+    this.hotSettings = {
+      startRows: 8,
+      startCols: 5,
+      minSpareRows: 1,
+      contextMenu: true,
+      height: 'auto',
+      licenseKey: 'non-commercial-and-evaluation',
+      cells() {
+        return { renderer: defaultValueRenderer };
+      },
+      beforeChange: (changes) => {
+        const instance = this.hotTable.hotInstance!;
+        const columns = instance.countCols();
+        const rowColumnSeen: Record<string, boolean> = {};
+        const rowsToFill: Record<string, boolean> = {};
+        const ch = changes === null ? [] : changes!;
+
+        for (let i = 0; i < ch.length; i++) {
+          // if oldVal is empty
+          if (ch[i]![2] === null && ch[i]![3] !== null) {
+            if (isEmptyRow(instance, ch[i]![0])) {
+              // add this row/col combination to the cache so it will not be overwritten by the template
+              rowColumnSeen[`${ch[i]![0]}/${ch[i]![1]}`] = true;
+              rowsToFill[String(ch[i]![0])] = true;
+            }
+          }
+        }
+
+        for (const r in rowsToFill) {
+          if (rowsToFill.hasOwnProperty(r)) {
+            for (let c = 0; c < columns; c++) {
+              // if it is not provided by user in this change set, take the value from the template
+              if (!rowColumnSeen[`${r}/${c}`]) {
+                ch.push([Number(r), c, null, templateValues[c]]);
+              }
+            }
+          }
+        }
+      },
+      autoWrapRow: true,
+      autoWrapCol: true,
+    }
+
+  }
+
+}
+/* end-file */
+
+
+
+/* file: app.config.ts */
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { registerAllModules } from 'handsontable/registry';
+import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
+
+// register Handsontable's modules
+registerAllModules();
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    {
+      provide: HOT_GLOBAL_CONFIG,
+      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
+    },
+  ],
+};
+/* end-file */
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example1.js b/docs/content/guides/rows/row-prepopulating/javascript/example1.js
index fdd87cfe470..70eec123b2b 100644
--- a/docs/content/guides/rows/row-prepopulating/javascript/example1.js
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example1.js
@@ -1,84 +1,18 @@
 import Handsontable from 'handsontable/base';
 import { registerAllModules } from 'handsontable/registry';
-import { textRenderer } from 'handsontable/renderers/textRenderer';
-
-// Register all Handsontable's modules.
 registerAllModules();
-
-const templateValues = ['one', 'two', 'three'];
 const data = [
-  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
-  ['2017', 10, 11, 12, 13],
-  ['2018', 20, 11, 14, 13],
-  ['2019', 30, 15, 12, 13],
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
 ];
-
-function isEmptyRow(instance, row) {
-  const rowData = instance.getDataAtRow(row);
-
-  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
-    if (rowData[i] !== null) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-const defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {
-  if (value === null && isEmptyRow(instance, row)) {
-    value = templateValues[col];
-    td.style.color = '#999';
-  } else {
-    td.style.color = '';
-  }
-
-  textRenderer(instance, td, row, col, prop, value, cellProperties);
-};
-
 const container = document.querySelector('#example1');
 const hot = new Handsontable(container, {
-  startRows: 8,
-  startCols: 5,
-  minSpareRows: 1,
-  contextMenu: true,
-  height: 'auto',
-  licenseKey: 'non-commercial-and-evaluation',
-  cells() {
-    return { renderer: defaultValueRenderer };
-  },
-  beforeChange(changes) {
-    const instance = hot;
-    const columns = instance.countCols();
-    const rowColumnSeen = {};
-    const rowsToFill = {};
-    const ch = changes === null ? [] : changes;
-
-    for (let i = 0; i < changes.length; i++) {
-      // if oldVal is empty
-      if (ch[i][2] === null && ch[i][3] !== null) {
-        if (isEmptyRow(instance, ch[i][0])) {
-          // add this row/col combination to the cache so it will not be overwritten by the template
-          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;
-          rowsToFill[ch[i][0]] = true;
-        }
-      }
-    }
-
-    for (const r in rowsToFill) {
-      if (rowsToFill.hasOwnProperty(r)) {
-        for (let c = 0; c < columns; c++) {
-          // if it is not provided by user in this change set, take the value from the template
-          if (!rowColumnSeen[`${r}/${c}`]) {
-            changes.push([Number(r), c, null, templateValues[c]]);
-          }
-        }
-      }
-    }
-  },
-  autoWrapRow: true,
-  autoWrapCol: true,
+    data,
+    minSpareRows: 1,
+    height: 'auto',
+    licenseKey: 'non-commercial-and-evaluation',
+    autoWrapRow: true,
+    autoWrapCol: true,
 });
-
-// or, use `updateData()` to replace `data` without resetting states
-hot.loadData(data);
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example1.ts b/docs/content/guides/rows/row-prepopulating/javascript/example1.ts
index 8ba8cc638ca..3af7c3b217f 100644
--- a/docs/content/guides/rows/row-prepopulating/javascript/example1.ts
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example1.ts
@@ -1,86 +1,22 @@
 import Handsontable from 'handsontable/base';
 import { registerAllModules } from 'handsontable/registry';
-import { BaseRenderer } from 'handsontable/renderers';
-import { textRenderer } from 'handsontable/renderers/textRenderer';
 
-// Register all Handsontable's modules.
 registerAllModules();
 
-const templateValues: string[] = ['one', 'two', 'three'];
-const data: (string | number)[][] = [
+const data = [
   ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
   ['2017', 10, 11, 12, 13],
   ['2018', 20, 11, 14, 13],
   ['2019', 30, 15, 12, 13],
 ];
 
-function isEmptyRow(instance: Handsontable, row: number) {
-  const rowData = instance.getDataAtRow(row);
-
-  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
-    if (rowData[i] !== null) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-const defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
-  if (value === null && isEmptyRow(instance, row)) {
-    value = templateValues[col];
-    td.style.color = '#999';
-  } else {
-    td.style.color = '';
-  }
-
-  textRenderer(instance, td, row, col, prop, value, cellProperties);
-};
-
 const container = document.querySelector('#example1')!;
 
 const hot = new Handsontable(container, {
-  startRows: 8,
-  startCols: 5,
+  data,
   minSpareRows: 1,
-  contextMenu: true,
   height: 'auto',
   licenseKey: 'non-commercial-and-evaluation',
-  cells() {
-    return { renderer: defaultValueRenderer };
-  },
-  beforeChange(changes) {
-    const instance = hot;
-    const columns = instance.countCols();
-    const rowColumnSeen = {};
-    const rowsToFill = {};
-    const ch = changes === null ? [] : (changes as Handsontable.CellChange);
-
-    for (let i = 0; i < changes.length; i++) {
-      // if oldVal is empty
-      if (ch[i][2] === null && ch[i][3] !== null) {
-        if (isEmptyRow(instance, ch[i][0])) {
-          // add this row/col combination to the cache so it will not be overwritten by the template
-          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;
-          rowsToFill[ch[i][0]] = true;
-        }
-      }
-    }
-
-    for (const r in rowsToFill) {
-      if (rowsToFill.hasOwnProperty(r)) {
-        for (let c = 0; c < columns; c++) {
-          // if it is not provided by user in this change set, take the value from the template
-          if (!rowColumnSeen[`${r}/${c}`]) {
-            changes.push([Number(r), c, null, templateValues[c]]);
-          }
-        }
-      }
-    }
-  },
   autoWrapRow: true,
   autoWrapCol: true,
 });
-
-// or, use `updateData()` to replace `data` without resetting states
-hot.loadData(data);
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example2.js b/docs/content/guides/rows/row-prepopulating/javascript/example2.js
new file mode 100644
index 00000000000..f86517a6c93
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example2.js
@@ -0,0 +1,42 @@
+import Handsontable from 'handsontable/base';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+registerAllModules();
+const templateValues = ['one', 'two', 'three'];
+const data = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
+];
+function isEmptyRow(instance, row) {
+    const rowData = instance.getDataAtRow(row);
+    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+        if (rowData[i] !== null) {
+            return false;
+        }
+    }
+    return true;
+}
+const defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+    if (value === null && isEmptyRow(instance, row)) {
+        value = templateValues[col];
+        td.style.color = '#999';
+    }
+    else {
+        td.style.color = '';
+    }
+    textRenderer(instance, td, row, col, prop, value, cellProperties);
+};
+const container = document.querySelector('#example2');
+const hot = new Handsontable(container, {
+    data,
+    minSpareRows: 1,
+    height: 'auto',
+    licenseKey: 'non-commercial-and-evaluation',
+    cells() {
+        return { renderer: defaultValueRenderer };
+    },
+    autoWrapRow: true,
+    autoWrapCol: true,
+});
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example2.ts b/docs/content/guides/rows/row-prepopulating/javascript/example2.ts
new file mode 100644
index 00000000000..c35b4fd604e
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example2.ts
@@ -0,0 +1,51 @@
+import Handsontable from 'handsontable/base';
+import { registerAllModules } from 'handsontable/registry';
+import { BaseRenderer } from 'handsontable/renderers';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+registerAllModules();
+
+const templateValues = ['one', 'two', 'three'];
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
+
+function isEmptyRow(instance: Handsontable, row: number) {
+  const rowData = instance.getDataAtRow(row);
+
+  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+    if (rowData[i] !== null) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+  if (value === null && isEmptyRow(instance, row)) {
+    value = templateValues[col];
+    td.style.color = '#999';
+  } else {
+    td.style.color = '';
+  }
+
+  textRenderer(instance, td, row, col, prop, value, cellProperties);
+};
+
+const container = document.querySelector('#example2')!;
+
+const hot = new Handsontable(container, {
+  data,
+  minSpareRows: 1,
+  height: 'auto',
+  licenseKey: 'non-commercial-and-evaluation',
+  cells() {
+    return { renderer: defaultValueRenderer };
+  },
+  autoWrapRow: true,
+  autoWrapCol: true,
+});
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example3.js b/docs/content/guides/rows/row-prepopulating/javascript/example3.js
new file mode 100644
index 00000000000..f03d7cf3526
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example3.js
@@ -0,0 +1,84 @@
+import Handsontable from 'handsontable/base';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+// Register all Handsontable's modules.
+registerAllModules();
+
+const templateValues = ['one', 'two', 'three'];
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
+
+function isEmptyRow(instance, row) {
+  const rowData = instance.getDataAtRow(row);
+
+  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+    if (rowData[i] !== null) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const defaultValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+  if (value === null && isEmptyRow(instance, row)) {
+    value = templateValues[col];
+    td.style.color = '#999';
+  } else {
+    td.style.color = '';
+  }
+
+  textRenderer(instance, td, row, col, prop, value, cellProperties);
+};
+
+const container = document.querySelector('#example3');
+const hot = new Handsontable(container, {
+  startRows: 8,
+  startCols: 5,
+  minSpareRows: 1,
+  contextMenu: true,
+  height: 'auto',
+  licenseKey: 'non-commercial-and-evaluation',
+  cells() {
+    return { renderer: defaultValueRenderer };
+  },
+  beforeChange(changes) {
+    const instance = hot;
+    const columns = instance.countCols();
+    const rowColumnSeen = {};
+    const rowsToFill = {};
+    const ch = changes === null ? [] : changes;
+
+    for (let i = 0; i < changes.length; i++) {
+      // if oldVal is empty
+      if (ch[i][2] === null && ch[i][3] !== null) {
+        if (isEmptyRow(instance, ch[i][0])) {
+          // add this row/col combination to the cache so it will not be overwritten by the template
+          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;
+          rowsToFill[ch[i][0]] = true;
+        }
+      }
+    }
+
+    for (const r in rowsToFill) {
+      if (rowsToFill.hasOwnProperty(r)) {
+        for (let c = 0; c < columns; c++) {
+          // if it is not provided by user in this change set, take the value from the template
+          if (!rowColumnSeen[`${r}/${c}`]) {
+            changes.push([Number(r), c, null, templateValues[c]]);
+          }
+        }
+      }
+    }
+  },
+  autoWrapRow: true,
+  autoWrapCol: true,
+});
+
+// or, use `updateData()` to replace `data` without resetting states
+hot.loadData(data);
diff --git a/docs/content/guides/rows/row-prepopulating/javascript/example3.ts b/docs/content/guides/rows/row-prepopulating/javascript/example3.ts
new file mode 100644
index 00000000000..04cd05ee69f
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/javascript/example3.ts
@@ -0,0 +1,86 @@
+import Handsontable from 'handsontable/base';
+import { registerAllModules } from 'handsontable/registry';
+import { BaseRenderer } from 'handsontable/renderers';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+// Register all Handsontable's modules.
+registerAllModules();
+
+const templateValues: string[] = ['one', 'two', 'three'];
+const data: (string | number)[][] = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
+
+function isEmptyRow(instance: Handsontable, row: number) {
+  const rowData = instance.getDataAtRow(row);
+
+  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+    if (rowData[i] !== null) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+  if (value === null && isEmptyRow(instance, row)) {
+    value = templateValues[col];
+    td.style.color = '#999';
+  } else {
+    td.style.color = '';
+  }
+
+  textRenderer(instance, td, row, col, prop, value, cellProperties);
+};
+
+const container = document.querySelector('#example3')!;
+
+const hot = new Handsontable(container, {
+  startRows: 8,
+  startCols: 5,
+  minSpareRows: 1,
+  contextMenu: true,
+  height: 'auto',
+  licenseKey: 'non-commercial-and-evaluation',
+  cells() {
+    return { renderer: defaultValueRenderer };
+  },
+  beforeChange(changes) {
+    const instance = hot;
+    const columns = instance.countCols();
+    const rowColumnSeen = {};
+    const rowsToFill = {};
+    const ch = changes === null ? [] : (changes as Handsontable.CellChange);
+
+    for (let i = 0; i < changes.length; i++) {
+      // if oldVal is empty
+      if (ch[i][2] === null && ch[i][3] !== null) {
+        if (isEmptyRow(instance, ch[i][0])) {
+          // add this row/col combination to the cache so it will not be overwritten by the template
+          rowColumnSeen[`${ch[i][0]}/${ch[i][1]}`] = true;
+          rowsToFill[ch[i][0]] = true;
+        }
+      }
+    }
+
+    for (const r in rowsToFill) {
+      if (rowsToFill.hasOwnProperty(r)) {
+        for (let c = 0; c < columns; c++) {
+          // if it is not provided by user in this change set, take the value from the template
+          if (!rowColumnSeen[`${r}/${c}`]) {
+            changes.push([Number(r), c, null, templateValues[c]]);
+          }
+        }
+      }
+    }
+  },
+  autoWrapRow: true,
+  autoWrapCol: true,
+});
+
+// or, use `updateData()` to replace `data` without resetting states
+hot.loadData(data);
diff --git a/docs/content/guides/rows/row-prepopulating/react/example1.jsx b/docs/content/guides/rows/row-prepopulating/react/example1.jsx
index 0a83677f90d..5e6d0f5244b 100644
--- a/docs/content/guides/rows/row-prepopulating/react/example1.jsx
+++ b/docs/content/guides/rows/row-prepopulating/react/example1.jsx
@@ -1,98 +1,25 @@
-import { useRef } from 'react';
 import { HotTable } from '@handsontable/react-wrapper';
 import { registerAllModules } from 'handsontable/registry';
-import { textRenderer } from 'handsontable/renderers/textRenderer';
 
-// register Handsontable's modules
 registerAllModules();
 
-const ExampleComponent = () => {
-  const hotRef = useRef(null);
-  const templateValues = ['one', 'two', 'three'];
-  const data = [
-    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
-    ['2017', 10, 11, 12, 13],
-    ['2018', 20, 11, 14, 13],
-    ['2019', 30, 15, 12, 13],
-  ];
-
-  function isEmptyRow(instance, row) {
-    const rowData = instance.getDataAtRow(row);
-
-    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
-      if (rowData[i] !== null) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  function defaultValueRenderer(instance, td, row, col) {
-    const args = arguments;
-
-    if (args[5] === null && isEmptyRow(instance, row)) {
-      args[5] = templateValues[col];
-      td.style.color = '#999';
-    } else {
-      td.style.color = '';
-    }
-
-    textRenderer.apply(this, args);
-  }
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
 
+const ExampleComponent = () => {
   return (
-    <>
-      <HotTable
-        ref={hotRef}
-        data={data}
-        startRows={8}
-        startCols={5}
-        minSpareRows={1}
-        contextMenu={true}
-        height="auto"
-        autoWrapRow={true}
-        autoWrapCol={true}
-        licenseKey="non-commercial-and-evaluation"
-        cells={function (row, col, prop) {
-          const cellProperties = {};
-
-          cellProperties.renderer = defaultValueRenderer;
-
-          return cellProperties;
-        }}
-        beforeChange={function (changes) {
-          const instance = hotRef.current?.hotInstance;
-          const columns = instance?.countCols() || 0;
-          const rowColumnSeen = {};
-          const rowsToFill = {};
-
-          for (let i = 0; i < changes.length; i++) {
-            const cellChanges = changes;
-
-            // if oldVal is empty
-            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {
-              if (isEmptyRow(instance, cellChanges[i][0])) {
-                // add this row/col combination to the cache so it will not be overwritten by the template
-                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;
-                rowsToFill[cellChanges[i][0]] = true;
-              }
-            }
-          }
-
-          for (const r in rowsToFill) {
-            if (rowsToFill.hasOwnProperty(r)) {
-              for (let c = 0; c < columns; c++) {
-                // if it is not provided by user in this change set, take the value from the template
-                if (!rowColumnSeen[`${r}/${c}`]) {
-                  changes.push([r, c, null, templateValues[c]]);
-                }
-              }
-            }
-          }
-        }}
-      />
-    </>
+    <HotTable
+      data={data}
+      minSpareRows={1}
+      height="auto"
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+    />
   );
 };
 
diff --git a/docs/content/guides/rows/row-prepopulating/react/example1.tsx b/docs/content/guides/rows/row-prepopulating/react/example1.tsx
index 75b2105d2ae..5e6d0f5244b 100644
--- a/docs/content/guides/rows/row-prepopulating/react/example1.tsx
+++ b/docs/content/guides/rows/row-prepopulating/react/example1.tsx
@@ -1,107 +1,25 @@
-import { useRef } from 'react';
-import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
+import { HotTable } from '@handsontable/react-wrapper';
 import { registerAllModules } from 'handsontable/registry';
-import { textRenderer } from 'handsontable/renderers/textRenderer';
-import Handsontable from 'handsontable/base';
-import { CellChange } from 'handsontable/common';
 
-// register Handsontable's modules
 registerAllModules();
 
-const ExampleComponent = () => {
-  const hotRef = useRef<HotTableRef>(null);
-
-  const templateValues = ['one', 'two', 'three'];
-  const data = [
-    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
-    ['2017', 10, 11, 12, 13],
-    ['2018', 20, 11, 14, 13],
-    ['2019', 30, 15, 12, 13],
-  ];
-
-  function isEmptyRow(instance: Handsontable, row: number) {
-    const rowData = instance.getDataAtRow(row);
-
-    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
-      if (rowData[i] !== null) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  function defaultValueRenderer(
-    this: Handsontable,
-    instance: Handsontable,
-    td: HTMLTableCellElement,
-    row: number,
-    col: number
-  ) {
-    const args = arguments;
-
-    if (args[5] === null && isEmptyRow(instance, row)) {
-      args[5] = templateValues[col];
-      td.style.color = '#999';
-    } else {
-      td.style.color = '';
-    }
-
-    textRenderer.apply(this, args as any);
-  }
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
 
+const ExampleComponent = () => {
   return (
-    <>
-      <HotTable
-        ref={hotRef}
-        data={data}
-        startRows={8}
-        startCols={5}
-        minSpareRows={1}
-        contextMenu={true}
-        height="auto"
-        autoWrapRow={true}
-        autoWrapCol={true}
-        licenseKey="non-commercial-and-evaluation"
-        cells={function (row, col, prop) {
-          const cellProperties: Handsontable.CellMeta = {};
-
-          cellProperties.renderer = defaultValueRenderer;
-
-          return cellProperties;
-        }}
-        beforeChange={function (changes) {
-          const instance = hotRef.current?.hotInstance;
-          const columns = instance?.countCols() || 0;
-          const rowColumnSeen = {};
-          const rowsToFill = {};
-
-          for (let i = 0; i < changes.length; i++) {
-            const cellChanges = changes as CellChange;
-
-            // if oldVal is empty
-            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {
-              if (isEmptyRow(instance!, cellChanges[i][0])) {
-                // add this row/col combination to the cache so it will not be overwritten by the template
-                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;
-                rowsToFill[cellChanges[i][0]] = true;
-              }
-            }
-          }
-
-          for (const r in rowsToFill) {
-            if (rowsToFill.hasOwnProperty(r)) {
-              for (let c = 0; c < columns; c++) {
-                // if it is not provided by user in this change set, take the value from the template
-                if (!rowColumnSeen[`${r}/${c}`]) {
-                  changes.push([r, c, null, templateValues[c]]);
-                }
-              }
-            }
-          }
-        }}
-      />
-    </>
+    <HotTable
+      data={data}
+      minSpareRows={1}
+      height="auto"
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+    />
   );
 };
 
diff --git a/docs/content/guides/rows/row-prepopulating/react/example2.jsx b/docs/content/guides/rows/row-prepopulating/react/example2.jsx
new file mode 100644
index 00000000000..e78cc261295
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/react/example2.jsx
@@ -0,0 +1,54 @@
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+registerAllModules();
+
+const templateValues = ['one', 'two', 'three'];
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
+
+const ExampleComponent = () => {
+  function isEmptyRow(instance, row) {
+    const rowData = instance.getDataAtRow(row);
+
+    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+      if (rowData[i] !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function defaultValueRenderer(instance, td, row, col) {
+    const args = arguments;
+
+    if (args[5] === null && isEmptyRow(instance, row)) {
+      args[5] = templateValues[col];
+      td.style.color = '#999';
+    } else {
+      td.style.color = '';
+    }
+
+    textRenderer.apply(this, args);
+  }
+
+  return (
+    <HotTable
+      data={data}
+      minSpareRows={1}
+      height="auto"
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+      cells={() => ({ renderer: defaultValueRenderer })}
+    />
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/rows/row-prepopulating/react/example2.tsx b/docs/content/guides/rows/row-prepopulating/react/example2.tsx
new file mode 100644
index 00000000000..304ce1e4cca
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/react/example2.tsx
@@ -0,0 +1,61 @@
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+import Handsontable from 'handsontable/base';
+
+registerAllModules();
+
+const templateValues = ['one', 'two', 'three'];
+const data = [
+  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+  ['2017', 10, 11, 12, 13],
+  ['2018', 20, 11, 14, 13],
+  ['2019', 30, 15, 12, 13],
+];
+
+const ExampleComponent = () => {
+  function isEmptyRow(instance: Handsontable, row: number) {
+    const rowData = instance.getDataAtRow(row);
+
+    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+      if (rowData[i] !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function defaultValueRenderer(
+    this: Handsontable,
+    instance: Handsontable,
+    td: HTMLTableCellElement,
+    row: number,
+    col: number
+  ) {
+    const args = arguments;
+
+    if (args[5] === null && isEmptyRow(instance, row)) {
+      args[5] = templateValues[col];
+      td.style.color = '#999';
+    } else {
+      td.style.color = '';
+    }
+
+    textRenderer.apply(this, args as any);
+  }
+
+  return (
+    <HotTable
+      data={data}
+      minSpareRows={1}
+      height="auto"
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+      cells={() => ({ renderer: defaultValueRenderer })}
+    />
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/rows/row-prepopulating/react/example3.jsx b/docs/content/guides/rows/row-prepopulating/react/example3.jsx
new file mode 100644
index 00000000000..0a83677f90d
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/react/example3.jsx
@@ -0,0 +1,99 @@
+import { useRef } from 'react';
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+
+// register Handsontable's modules
+registerAllModules();
+
+const ExampleComponent = () => {
+  const hotRef = useRef(null);
+  const templateValues = ['one', 'two', 'three'];
+  const data = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
+  ];
+
+  function isEmptyRow(instance, row) {
+    const rowData = instance.getDataAtRow(row);
+
+    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+      if (rowData[i] !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function defaultValueRenderer(instance, td, row, col) {
+    const args = arguments;
+
+    if (args[5] === null && isEmptyRow(instance, row)) {
+      args[5] = templateValues[col];
+      td.style.color = '#999';
+    } else {
+      td.style.color = '';
+    }
+
+    textRenderer.apply(this, args);
+  }
+
+  return (
+    <>
+      <HotTable
+        ref={hotRef}
+        data={data}
+        startRows={8}
+        startCols={5}
+        minSpareRows={1}
+        contextMenu={true}
+        height="auto"
+        autoWrapRow={true}
+        autoWrapCol={true}
+        licenseKey="non-commercial-and-evaluation"
+        cells={function (row, col, prop) {
+          const cellProperties = {};
+
+          cellProperties.renderer = defaultValueRenderer;
+
+          return cellProperties;
+        }}
+        beforeChange={function (changes) {
+          const instance = hotRef.current?.hotInstance;
+          const columns = instance?.countCols() || 0;
+          const rowColumnSeen = {};
+          const rowsToFill = {};
+
+          for (let i = 0; i < changes.length; i++) {
+            const cellChanges = changes;
+
+            // if oldVal is empty
+            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {
+              if (isEmptyRow(instance, cellChanges[i][0])) {
+                // add this row/col combination to the cache so it will not be overwritten by the template
+                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;
+                rowsToFill[cellChanges[i][0]] = true;
+              }
+            }
+          }
+
+          for (const r in rowsToFill) {
+            if (rowsToFill.hasOwnProperty(r)) {
+              for (let c = 0; c < columns; c++) {
+                // if it is not provided by user in this change set, take the value from the template
+                if (!rowColumnSeen[`${r}/${c}`]) {
+                  changes.push([r, c, null, templateValues[c]]);
+                }
+              }
+            }
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/rows/row-prepopulating/react/example3.tsx b/docs/content/guides/rows/row-prepopulating/react/example3.tsx
new file mode 100644
index 00000000000..75b2105d2ae
--- /dev/null
+++ b/docs/content/guides/rows/row-prepopulating/react/example3.tsx
@@ -0,0 +1,108 @@
+import { useRef } from 'react';
+import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+import { textRenderer } from 'handsontable/renderers/textRenderer';
+import Handsontable from 'handsontable/base';
+import { CellChange } from 'handsontable/common';
+
+// register Handsontable's modules
+registerAllModules();
+
+const ExampleComponent = () => {
+  const hotRef = useRef<HotTableRef>(null);
+
+  const templateValues = ['one', 'two', 'three'];
+  const data = [
+    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
+    ['2017', 10, 11, 12, 13],
+    ['2018', 20, 11, 14, 13],
+    ['2019', 30, 15, 12, 13],
+  ];
+
+  function isEmptyRow(instance: Handsontable, row: number) {
+    const rowData = instance.getDataAtRow(row);
+
+    for (let i = 0, ilen = rowData.length; i < ilen; i++) {
+      if (rowData[i] !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function defaultValueRenderer(
+    this: Handsontable,
+    instance: Handsontable,
+    td: HTMLTableCellElement,
+    row: number,
+    col: number
+  ) {
+    const args = arguments;
+
+    if (args[5] === null && isEmptyRow(instance, row)) {
+      args[5] = templateValues[col];
+      td.style.color = '#999';
+    } else {
+      td.style.color = '';
+    }
+
+    textRenderer.apply(this, args as any);
+  }
+
+  return (
+    <>
+      <HotTable
+        ref={hotRef}
+        data={data}
+        startRows={8}
+        startCols={5}
+        minSpareRows={1}
+        contextMenu={true}
+        height="auto"
+        autoWrapRow={true}
+        autoWrapCol={true}
+        licenseKey="non-commercial-and-evaluation"
+        cells={function (row, col, prop) {
+          const cellProperties: Handsontable.CellMeta = {};
+
+          cellProperties.renderer = defaultValueRenderer;
+
+          return cellProperties;
+        }}
+        beforeChange={function (changes) {
+          const instance = hotRef.current?.hotInstance;
+          const columns = instance?.countCols() || 0;
+          const rowColumnSeen = {};
+          const rowsToFill = {};
+
+          for (let i = 0; i < changes.length; i++) {
+            const cellChanges = changes as CellChange;
+
+            // if oldVal is empty
+            if (cellChanges[i][2] === null && cellChanges[i][3] !== null) {
+              if (isEmptyRow(instance!, cellChanges[i][0])) {
+                // add this row/col combination to the cache so it will not be overwritten by the template
+                rowColumnSeen[`${cellChanges[i][0]}/${cellChanges[i][1]}`] = true;
+                rowsToFill[cellChanges[i][0]] = true;
+              }
+            }
+          }
+
+          for (const r in rowsToFill) {
+            if (rowsToFill.hasOwnProperty(r)) {
+              for (let c = 0; c < columns; c++) {
+                // if it is not provided by user in this change set, take the value from the template
+                if (!rowColumnSeen[`${r}/${c}`]) {
+                  changes.push([r, c, null, templateValues[c]]);
+                }
+              }
+            }
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/rows/row-prepopulating/row-prepopulating.md b/docs/content/guides/rows/row-prepopulating/row-prepopulating.md
index 1e0ffaafeee..f1156c3c5dd 100644
--- a/docs/content/guides/rows/row-prepopulating/row-prepopulating.md
+++ b/docs/content/guides/rows/row-prepopulating/row-prepopulating.md
@@ -3,7 +3,7 @@ type: how-to
 id: 42px61id
 title: Row pre-populating
 metaTitle: Row pre-populating - JavaScript Data Grid | Handsontable
-description: Populate newly-added rows with predefined template values, using cell renderers.
+description: Pre-populate spare rows with default values using minSpareRows, custom placeholder renderers, or auto-filling template values.
 permalink: /row-prepopulating
 canonicalUrl: /row-prepopulating
 tags:
@@ -20,13 +20,13 @@ angular:
 searchCategory: Guides
 category: Rows
 ---
-Pre-populate new rows with default values when users add rows to the grid. Use the `afterCreateRow` hook to set initial cell values.
+Pre-populate new rows with default values when users add rows to the grid.
 
 [[toc]]
 
-## Example
+## Basic spare rows
 
-The example below shows how cell renderers can be used to populate the template values in empty rows. When a cell in the empty row is edited, the [`beforeChange`](@/api/hooks.md#beforechange) callback fills the row with the template values.
+To keep one empty row at the bottom of the grid, set [`minSpareRows`](@/api/options.md#minsparerows) to `1`.
 
 ::: only-for javascript
 
@@ -61,6 +61,80 @@ The example below shows how cell renderers can be used to populate the template
 
 :::
 
+## Spare rows with placeholder styling
+
+To hint what to enter in the spare row, add a custom cell renderer that displays greyed-out placeholder text in empty cells. The renderer checks whether the whole row is empty, then shows a template value in a lighter color.
+
+::: only-for javascript
+
+::: example #example2 --js 1 --ts 2
+
+@[code](@/content/guides/rows/row-prepopulating/javascript/example2.js)
+@[code](@/content/guides/rows/row-prepopulating/javascript/example2.ts)
+
+:::
+
+:::
+
+::: only-for react
+
+::: example #example2 :react --js 1 --ts 2
+
+@[code](@/content/guides/rows/row-prepopulating/react/example2.jsx)
+@[code](@/content/guides/rows/row-prepopulating/react/example2.tsx)
+
+:::
+
+:::
+
+::: only-for angular
+
+::: example #example2 :angular --ts 1 --html 2
+
+@[code](@/content/guides/rows/row-prepopulating/angular/example2.ts)
+@[code](@/content/guides/rows/row-prepopulating/angular/example2.html)
+
+:::
+
+:::
+
+## Auto-populating with template values
+
+For full pre-population, use the [`beforeChange`](@/api/hooks.md#beforechange) hook to fill all cells in a spare row with template values the moment the user starts editing. The `isEmptyRow()` helper detects whether the row is untouched, and the hook pushes changes for every column except the one the user is editing.
+
+::: only-for javascript
+
+::: example #example3 --js 1 --ts 2
+
+@[code](@/content/guides/rows/row-prepopulating/javascript/example3.js)
+@[code](@/content/guides/rows/row-prepopulating/javascript/example3.ts)
+
+:::
+
+:::
+
+::: only-for react
+
+::: example #example3 :react --js 1 --ts 2
+
+@[code](@/content/guides/rows/row-prepopulating/react/example3.jsx)
+@[code](@/content/guides/rows/row-prepopulating/react/example3.tsx)
+
+:::
+
+:::
+
+::: only-for angular
+
+::: example #example3 :angular --ts 1 --html 2
+
+@[code](@/content/guides/rows/row-prepopulating/angular/example3.ts)
+@[code](@/content/guides/rows/row-prepopulating/angular/example3.html)
+
+:::
+
+:::
+
 ## Pre-populate from an adjacent row
 
 You can copy values from the row above when the user inserts a new row. Use the [`afterCreateRow`](@/api/hooks.md#aftercreaterow) hook to read the source row's data and write it to the newly created row.
@@ -106,7 +180,7 @@ const hot = new Handsontable(container, {
 
 ## Result
 
-After completing this guide, your grid fills new rows with template values automatically. You can pre-populate rows from static defaults, adjacent row values, or server-fetched data.
+Your grid keeps one or more empty rows at the bottom. Depending on the approach, spare rows show greyed-out placeholder text or auto-fill all cells with template values when the user starts editing.
 
 ## Related API reference
 
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/angular/example1.ts b/docs/content/recipes/filtering-and-search/external-search-box/angular/example1.ts
index 23e21d8b283..aacdd47237d 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/angular/example1.ts
+++ b/docs/content/recipes/filtering-and-search/external-search-box/angular/example1.ts
@@ -24,6 +24,7 @@ const data = [
           id="external-search-input"
           type="search"
           placeholder="Type to highlight matching cells..."
+          style="min-width: 20rem"
           (input)="onSearch($event)"
         />
       </div>
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md b/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
index e2ac03e10de..26fe3a245e4 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
+++ b/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
@@ -26,10 +26,11 @@ In this tutorial, you will add a search input outside Handsontable that highligh
 
 ::: only-for javascript
 
-::: example #example1 :hot-recipe --js 1 --ts 2
+::: example #example1 :hot-recipe --js 1 --ts 2 --css 3
 
 @[code](@/content/recipes/filtering-and-search/external-search-box/javascript/example1.js)
 @[code](@/content/recipes/filtering-and-search/external-search-box/javascript/example1.ts)
+@[code](@/content/recipes/filtering-and-search/external-search-box/javascript/example1.css)
 
 :::
 
@@ -37,8 +38,9 @@ In this tutorial, you will add a search input outside Handsontable that highligh
 
 ::: only-for react
 
-::: example #example1 :react-advanced --js 1 --ts 2
+::: example #example1 :react-advanced --css 1 --js 2 --ts 3
 
+@[code](@/content/recipes/filtering-and-search/external-search-box/react/example1.css)
 @[code](@/content/recipes/filtering-and-search/external-search-box/react/example1.jsx)
 @[code](@/content/recipes/filtering-and-search/external-search-box/react/example1.tsx)
 :::
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.css b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.css
new file mode 100644
index 00000000000..74123b6d3c8
--- /dev/null
+++ b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.css
@@ -0,0 +1,3 @@
+#external-search-input {
+  min-width: 20rem;
+}
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/react/example1.css b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.css
new file mode 100644
index 00000000000..74123b6d3c8
--- /dev/null
+++ b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.css
@@ -0,0 +1,3 @@
+#external-search-input {
+  min-width: 20rem;
+}
diff --git a/docs/content/recipes/import-export/import-csv-excel/angular/example1.css b/docs/content/recipes/import-export/import-csv-excel/angular/example1.css
index 51ff63673c9..f7ab699f27e 100644
--- a/docs/content/recipes/import-export/import-csv-excel/angular/example1.css
+++ b/docs/content/recipes/import-export/import-csv-excel/angular/example1.css
@@ -1,25 +1,118 @@
+.import-csv-excel-wrap {
+  display: flex;
+  flex-direction: column;
+  margin: 0 -1rem;
+}
+
 .import-dropzone {
-  border: 2px dashed var(--ht-border-color, #ccc);
-  border-radius: 8px;
-  padding: 16px;
+  padding: 1.5rem 1rem;
   text-align: center;
-  margin-bottom: 12px;
+  border: 0;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-xs);
+  transition: background 0.15s ease;
   cursor: pointer;
 }
 
-.import-dropzone--active {
-  border-color: var(--ht-accent-color, #1a42e8);
-  background: rgba(26, 66, 232, 0.05);
+.import-dropzone p {
+  margin: 0 0 0.75rem;
+}
+
+.import-dropzone.import-dropzone--active {
+  background: var(--sl-color-gray-6);
 }
 
-.import-preview {
-  border: 1px solid var(--ht-border-color, #e0e0e0);
-  border-radius: 4px;
-  padding: 12px;
-  margin-bottom: 12px;
+.import-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.import-file-label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.import-file-label span,
+.import-sample-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-2);
+  font-family: var(--sl-font);
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.import-file-label:hover span,
+.import-sample-btn:hover {
+  background: var(--sl-color-gray-5);
+  color: var(--sl-color-white);
+}
+
+.import-file-label input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.import-msg {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0;
+  font-size: var(--sl-text-xs);
 }
 
 .import-msg--error {
-  color: var(--ht-cell-error-color, #c62828);
-  padding: 8px 0;
+  border-bottom: 1px solid var(--sl-color-red, #ef4444);
+  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));
+  color: var(--sl-color-red, #ef4444);
+}
+
+.import-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  min-height: 200px;
+  color: var(--sl-color-gray-2);
+  text-align: center;
+}
+
+.import-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.25rem;
+  border: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-3);
+}
+
+.import-empty-title {
+  margin: 0;
+  color: var(--sl-color-white);
+  font-size: var(--sl-text-sm);
+  font-weight: 600;
+}
+
+.import-empty-text {
+  margin: 0;
+  max-width: 38ch;
+  font-size: var(--sl-text-xs);
+  line-height: 1.5;
 }
diff --git a/docs/content/recipes/import-export/import-csv-excel/angular/example1.ts b/docs/content/recipes/import-export/import-csv-excel/angular/example1.ts
index 34bbd868d8c..14a9604b92c 100644
--- a/docs/content/recipes/import-export/import-csv-excel/angular/example1.ts
+++ b/docs/content/recipes/import-export/import-csv-excel/angular/example1.ts
@@ -147,29 +147,18 @@ async function parseFile(file: File): Promise<ParsedPayload> {
         (dragleave)="onDragLeave()"
         (drop)="onDrop($event)"
       >
-        <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or use the file picker.</p>
-        <label class="import-file-label">
-          <span>Choose file</span>
-          <input
-            type="file"
-            accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
-            (change)="onFileChange($event)"
-            #fileInput
-          />
-        </label>
-      </div>
-
-      <div class="import-sample-block">
-        <label for="import-sample-csv-ng">Sample CSV (click <strong>Parse sample CSV</strong> to preview):</label>
-        <textarea
-          id="import-sample-csv-ng"
-          rows="5"
-          spellcheck="false"
-          [value]="sampleCsv"
-          (input)="sampleCsv = $any($event.target).value"
-        ></textarea>
-        <div class="import-sample-actions">
-          <button type="button" (click)="parseSampleCsv()">Parse sample CSV</button>
+        <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>
+        <div class="import-actions">
+          <label class="import-file-label">
+            <span>Choose file</span>
+            <input
+              type="file"
+              accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
+              (change)="onFileChange($event)"
+              #fileInput
+            />
+          </label>
+          <button type="button" class="import-sample-btn" (click)="loadSampleData()">Load sample data</button>
         </div>
       </div>
 
@@ -177,19 +166,22 @@ async function parseFile(file: File): Promise<ParsedPayload> {
         <div class="import-msg import-msg--error">{{ errorMessage }}</div>
       }
 
-      @if (showPreview) {
-        <div class="import-preview">
-          <p class="import-preview-title">Detected column headers (not loaded yet):</p>
-          <ul class="import-header-list">
-            @for (h of pending?.headers ?? []; track h) {
-              <li>{{ h }}</li>
-            }
-          </ul>
-          <button type="button" class="import-apply-btn" (click)="applyToGrid()">Load into grid</button>
+      @if (gridData.length === 0) {
+        <div class="import-empty">
+          <span class="import-empty-icon" aria-hidden="true">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18"/>
+              <path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>
+            </svg>
+          </span>
+          <p class="import-empty-title">No data loaded yet</p>
+          <p class="import-empty-text">
+            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.
+          </p>
         </div>
+      } @else {
+        <hot-table [data]="gridData" [settings]="gridSettings"></hot-table>
       }
-
-      <hot-table [data]="gridData" [settings]="gridSettings"></hot-table>
     </div>
   `,
 })
@@ -198,11 +190,9 @@ export class AppComponent {
 
   isDragOver = false;
   errorMessage = '';
-  showPreview = false;
-  pending: ParsedPayload | null = null;
   gridData: Record<string, unknown>[] = [];
 
-  sampleCsv = `Product,Category,In stock,Price
+  private readonly SAMPLE_CSV = `Product,Category,In stock,Price
 Widget A,Hardware,true,19.99
 Widget B,Hardware,false,24.5
 Service Pack,Services,true,0`;
@@ -242,34 +232,16 @@ Service Pack,Services,true,0`;
     input.value = '';
   }
 
-  async parseSampleCsv(): Promise<void> {
+  async loadSampleData(): Promise<void> {
     this.errorMessage = '';
     try {
-      const payload = parseCsvText(this.sampleCsv);
-      this.setPending(payload);
+      const payload = parseCsvText(this.SAMPLE_CSV);
+      this.loadIntoGrid(payload);
     } catch (e) {
-      this.clearPendingPreview();
       this.errorMessage = e instanceof Error ? e.message : String(e);
     }
   }
 
-  applyToGrid(): void {
-    this.errorMessage = '';
-    if (!this.pending) {
-      this.errorMessage = 'Nothing to load. Import a file first.';
-      return;
-    }
-    const { headers, rows } = this.pending;
-    this.gridSettings = {
-      ...this.gridSettings,
-      colHeaders: headers,
-      columns: this.columnsFromHeaders(headers),
-    };
-    this.gridData = [...rows];
-    this.showPreview = false;
-    this.pending = null;
-  }
-
   private async handleFile(file: File): Promise<void> {
     this.errorMessage = '';
     if (file.size === 0) {
@@ -278,30 +250,25 @@ Service Pack,Services,true,0`;
     }
     try {
       const payload = await parseFile(file);
-      this.setPending(payload);
+      this.loadIntoGrid(payload);
     } catch (e) {
-      this.clearPendingPreview();
       this.errorMessage = e instanceof Error ? e.message : String(e);
     }
   }
 
-  private setPending(payload: ParsedPayload): void {
-    this.pending = payload;
-    this.errorMessage = '';
-    this.showPreview = true;
-  }
-
-  private clearPendingPreview(): void {
-    this.pending = null;
-    this.showPreview = false;
+  private loadIntoGrid(payload: ParsedPayload): void {
+    const { headers, rows } = payload;
+    this.gridSettings = {
+      ...this.gridSettings,
+      colHeaders: headers,
+      columns: this.columnsFromHeaders(headers, rows),
+    };
+    this.gridData = [...rows];
   }
 
-  private columnsFromHeaders(headers: string[]): GridSettings['columns'] {
-    if (!this.pending) {
-      return headers.map((data) => ({ data, type: 'text' }));
-    }
+  private columnsFromHeaders(headers: string[], rows: Record<string, unknown>[]): GridSettings['columns'] {
     return headers.map((data) => {
-      const values = (this.pending?.rows ?? [])
+      const values = rows
         .map((row) => row[data])
         .filter((v) => v !== null);
       if (values.length > 0 && values.every((v) => typeof v === 'number')) {
diff --git a/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md b/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
index d1bcd7d0236..47be1c736d7 100644
--- a/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
+++ b/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
@@ -95,18 +95,22 @@ Use `accept` on the file input and check `file.name` to route `.csv` and `.xlsx`
 
 ```html
 <div class="import-dropzone" id="import-dropzone" tabindex="0" role="button">
-  <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or use the file picker.</p>
-  <label class="import-file-label">
-    <span>Choose file</span>
-    <input id="import-file" type="file"
-      accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" />
-  </label>
+  <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>
+  <div class="import-actions">
+    <label class="import-file-label">
+      <span>Choose file</span>
+      <input id="import-file" type="file"
+        accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" />
+    </label>
+    <button type="button" id="import-load-sample" class="import-sample-btn">Load sample data</button>
+  </div>
 </div>
 ```
 
 **What's happening:**
 - The `accept` attribute restricts the system file picker to `.csv` and `.xlsx`. This is a hint to the browser only -- you must validate the extension in JavaScript as well.
 - The real `<input>` is visually hidden (positioned off-screen with `opacity: 0`) and activated via the wrapping `<label>`. Clicking **Choose file** triggers the file picker without requiring a separate button.
+- **Load sample data** parses a bundled CSV string so users can try the grid without having to upload a file first.
 - The drop zone has `tabindex="0"` and `role="button"` so keyboard users can focus and activate it.
 
 ### Extension detection
@@ -235,7 +239,7 @@ async function parseCsvFile(file, PapaRef) {
 - `dynamicTyping: true` lets PapaParse return native numbers and booleans where possible.
 - Numeric and boolean values are preserved as-is; string values are trimmed, and empty strings are normalized to `null`.
 
-### Parse a CSV text string (for the sample textarea)
+### Parse a CSV text string (for the bundled sample)
 
 ```javascript
 function parseCsvText(text, PapaRef) {
@@ -255,7 +259,7 @@ function parseCsvText(text, PapaRef) {
 **What's happening:**
 - Works identically to `parseCsvFile` but accepts a raw CSV string instead of a `File` object.
 - PapaParse's synchronous `parse(string, opts)` overload is used here (no `complete` callback needed).
-- Used when the user clicks **Parse sample CSV** to process the pre-filled textarea value without picking a file.
+- Used when the user clicks **Load sample data** to parse a CSV string embedded in the script and feed it into the grid.
 
 ## Step 3: Parse Excel with SheetJS
 
@@ -359,51 +363,14 @@ async function parseFile(file) {
 - The library is loaded on demand: PapaParse for CSV, SheetJS for Excel. If only CSV files are imported, SheetJS is never downloaded.
 - Both parsers return the same shape: `{ headers: string[], rows: object[] }` -- the rest of the code does not need to know which parser ran.
 
-## Step 4: Preview headers, then load the grid
-
-### Keep parsed data in a pending buffer
-
-```javascript
-let pending = null;
-
-function setPending(payload) {
-  pending = payload;
-  clearError(errEl);
-  if (headerListEl && previewEl) {
-    renderHeaderPreview(headerListEl, payload.headers);
-    previewEl.hidden = false;
-  }
-}
-```
-
-**What's happening:**
-- `pending` holds the last successfully parsed `{ headers, rows }` object until the user confirms or a new file is loaded.
-- `setPending` clears any previous error, renders the header list, and shows the preview panel -- but does not touch the grid yet. The user must click **Load into grid** to commit.
-- A two-step confirm flow prevents accidental overwrites and gives the user a chance to check that the detected headers match expectations before loading potentially thousands of rows.
-
-### Render the header preview
-
-```javascript
-function renderHeaderPreview(listEl, headers) {
-  listEl.innerHTML = '';
-  for (const h of headers) {
-    const li = document.createElement('li');
-    li.textContent = h;
-    listEl.appendChild(li);
-  }
-}
-```
-
-**What's happening:**
-- Clears the list before re-populating so stale headers from a previous import are not shown.
-- Uses `textContent` (not `innerHTML`) to prevent XSS when column names contain HTML characters.
+## Step 4: Load parsed data into the grid
 
 ### Build column definitions from header names
 
 ```javascript
-function columnsFromHeaders(headers) {
+function columnsFromHeaders(headers, rows) {
   return headers.map((data) => {
-    const values = pending.rows
+    const values = rows
       .map((row) => row[data])
       .filter((v) => v !== null);
 
@@ -422,31 +389,63 @@ function columnsFromHeaders(headers) {
 - Handsontable's `columns` option expects an array of column descriptors. Each descriptor's `data` property is the key used to read from the row objects.
 - The helper infers `numeric` and `checkbox` columns when all non-empty values in that column are numbers or booleans. Mixed columns stay as `'text'`.
 
-### Load the grid
+### Lazy-init the grid on the first load
 
 ```javascript
-applyBtn?.addEventListener('click', () => {
-  clearError(errEl);
-  if (!pending) {
-    showError(errEl, 'Nothing to load. Import a file first.');
+let hot = null;
+
+function loadIntoGrid({ headers, rows }) {
+  const columns = columnsFromHeaders(headers, rows);
+
+  if (!hot) {
+    emptyEl.hidden = true;
+    gridContainer.hidden = false;
+    hot = new Handsontable(gridContainer, {
+      data: rows,
+      columns,
+      colHeaders: headers,
+      rowHeaders: true,
+      height: 'auto',
+      width: '100%',
+      licenseKey: 'non-commercial-and-evaluation',
+    });
     return;
   }
-  const { headers, rows } = pending;
-  hot.updateSettings({
-    colHeaders: headers,
-    columns: columnsFromHeaders(headers),
-  });
+
+  hot.updateSettings({ colHeaders: headers, columns });
   hot.loadData(rows);
-  previewEl.hidden = true;
-  pending = null;
+}
+```
+
+**What's happening:**
+- `hot` is created on the first successful import only. Before that, the page shows an empty-state panel (`emptyEl`) and `gridContainer` (the `#example1` div) is kept `hidden` so users don't see a single blank cell.
+- On the first call: hide the empty state, reveal the grid container, and instantiate Handsontable with the parsed data, columns, and headers.
+- On subsequent calls: reuse the existing instance -- `updateSettings({ colHeaders, columns })` reconfigures the grid's column shape, then `loadData(rows)` replaces the data and triggers a full re-render. `updateSettings` must run before `loadData` so Handsontable knows which keys to read from the row objects.
+
+### Load the bundled sample
+
+```javascript
+const SAMPLE_CSV = `Product,Category,In stock,Price
+Widget A,Hardware,true,19.99
+Widget B,Hardware,false,24.5
+Service Pack,Services,true,0`;
+
+sampleBtn?.addEventListener('click', async () => {
+  clearError(errEl);
+  try {
+    const PapaRef = await ensurePapa();
+    const payload = parseCsvText(SAMPLE_CSV, PapaRef);
+    loadIntoGrid(payload);
+  } catch (e) {
+    showError(errEl, e instanceof Error ? e.message : String(e));
+  }
 });
 ```
 
 **What's happening:**
-1. Guard against clicking **Load into grid** when no file has been parsed yet.
-2. `hot.updateSettings({ colHeaders, columns })` reconfigures the grid for the new column shape. This must happen before `loadData` so Handsontable knows which keys to read from the row objects.
-3. `hot.loadData(rows)` replaces the grid's data source and triggers a full re-render.
-4. After loading, the preview panel is hidden and `pending` is cleared so a stale payload is not accidentally loaded twice.
+- `SAMPLE_CSV` is a small CSV string embedded in the script -- enough to demonstrate the grid without forcing the user to upload anything.
+- The handler ensures PapaParse is available, parses the sample synchronously, and hands the result straight to `loadIntoGrid` -- no preview step in between.
+- File uploads use the same `loadIntoGrid` function (see `handleFile` in [Step 5](#step-5-handle-errors)), so both code paths converge on a single grid-population helper.
 
 ## Step 5: Handle errors
 
@@ -485,7 +484,6 @@ function clearError(el) {
 | Excel sheet is empty | `"The sheet is empty."` |
 | Excel header row is blank | `"No header row found in the Excel sheet."` |
 | Excel has no data rows | `"No data rows after the header."` |
-| **Load into grid** clicked with no file parsed | `"Nothing to load. Import a file first."` |
 
 The `handleFile` async function is the single place where all parse errors are caught and forwarded to `showError`:
 
@@ -499,10 +497,8 @@ async function handleFile(file) {
   }
   try {
     const payload = await parseFile(file);
-    setPending(payload);
+    loadIntoGrid(payload);
   } catch (e) {
-    pending = null;
-    previewEl.hidden = true;
     showError(errEl, e instanceof Error ? e.message : String(e));
   }
 }
@@ -511,30 +507,29 @@ async function handleFile(file) {
 **What's happening:**
 - `file.size === 0` is checked before any async work to give an instant response for empty files.
 - Any error thrown by the parsers bubbles up here and is shown to the user.
-- On error, `pending` is cleared and the preview panel is hidden so the user cannot accidentally load stale data.
-- Apply the same stale-state reset for the sample textarea parser, so failed sample parsing cannot leave old data queued for **Load into grid**.
+- On success, the parsed `{ headers, rows }` payload goes straight to `loadIntoGrid` -- no intermediate state to reset on failure.
+- The **Load sample data** handler uses the same try/catch shape, so sample-parse errors surface in the same error panel.
 
 ## Try it quickly
 
-Use the **Sample CSV** textarea in the example and click **Parse sample CSV**, or save the snippet as `sample.csv` and drop it on the zone.
+Click **Load sample data** in the example to populate the grid from the bundled CSV string, or save the snippet from [Step 4](#load-the-bundled-sample) as `sample.csv` and drop it on the zone.
 
 ## How it works - complete flow
 
-1. **User picks or drops a file** -- the `change` or `drop` event fires and calls `handleFile`.
-2. **File size check** -- zero-byte files are rejected immediately.
-3. **Extension routing** -- `parseFile` reads the extension and loads the right parser library on demand.
+1. **User picks or drops a file (or clicks Load sample data)** -- the `change`, `drop`, or sample button event fires and reaches `handleFile` / the sample handler.
+2. **File size check** -- zero-byte files are rejected immediately (file path only).
+3. **Extension routing** -- `parseFile` reads the extension and loads the right parser library on demand. The sample path always uses PapaParse via `parseCsvText`.
 4. **Parsing** -- CSV goes through PapaParse with `header: true`; Excel is read via SheetJS with `sheet_to_json` and row-0 as the header line.
 5. **Normalization** -- empty cells become `null`, and native numbers/booleans are preserved for CSV and Excel.
-6. **Header preview** -- `setPending` stores the result and shows the detected column names in a list.
-7. **User confirms** -- clicking **Load into grid** calls `hot.updateSettings` followed by `hot.loadData`.
-8. **Grid renders** -- Handsontable re-renders with the new columns and data.
-9. **Errors at any step** -- caught by `handleFile` or the sample-parse path (plus the apply-button guard), then shown in the error panel while pending preview state is cleared.
+6. **Grid population** -- `loadIntoGrid` creates the Handsontable instance on the first call (hiding the empty-state panel) or updates `colHeaders`, `columns`, and data on subsequent calls.
+7. **Grid renders** -- Handsontable re-renders with the new columns and data.
+8. **Errors at any step** -- caught by `handleFile` or the sample-parse handler and shown in the error panel.
 
 ## What you learned
 
 - How to detect the file type by extension and route CSV files through PapaParse and Excel files through SheetJS with a single handler function.
-- How to present a header preview before loading data, so users can confirm the detected columns match their expectations.
-- How to call `hot.updateSettings({ colHeaders, columns })` followed by `hot.loadData(rows)` to replace both the column configuration and the data in one step.
+- How to ship a bundled CSV sample so users can demo the grid without uploading a file first.
+- How to call `hot.updateSettings({ colHeaders, columns })` followed by `hot.loadData(rows)` to replace both the column configuration and the data in one step, and how to lazy-instantiate Handsontable behind an empty-state panel.
 - How to handle errors at each stage -- file size, parsing, and grid load -- and surface them in a dedicated error panel.
 
 ## Next steps
diff --git a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.css b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.css
index f08295a179b..ce44ef27e97 100644
--- a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.css
+++ b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.css
@@ -1,37 +1,61 @@
 .import-csv-excel-wrap {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-bottom: 12px;
+  margin: 0 -1rem;
 }
 
 .import-dropzone {
-  border: 2px dashed var(--sl-color-gray-4, #ccc);
-  border-radius: 8px;
-  padding: 16px;
+  padding: 1.5rem 1rem;
   text-align: center;
-  background: var(--sl-color-bg-inline-code, rgba(0, 0, 0, 0.04));
-  transition: border-color 0.15s ease, background 0.15s ease;
+  border: 0;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-xs);
+  transition: background 0.15s ease;
+}
+
+.import-dropzone p {
+  margin: 0 0 0.75rem;
 }
 
 .import-dropzone.import-dropzone--active {
-  border-color: var(--sl-color-accent, #3b82f6);
-  background: var(--sl-color-accent-low, rgba(59, 130, 246, 0.08));
+  background: var(--sl-color-gray-6);
+}
+
+.import-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .import-file-label {
   display: inline-block;
-  margin-top: 8px;
   cursor: pointer;
 }
 
-.import-file-label span {
-  display: inline-block;
-  padding: 6px 14px;
-  border-radius: 6px;
-  background: var(--sl-color-accent, #3b82f6);
-  color: var(--sl-color-black, #fff);
-  font-size: 0.875rem;
+.import-file-label span,
+.import-sample-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-2);
+  font-family: var(--sl-font);
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.import-file-label:hover span,
+.import-sample-btn:hover {
+  background: var(--sl-color-gray-5);
+  color: var(--sl-color-white);
 }
 
 .import-file-label input {
@@ -42,74 +66,65 @@
   pointer-events: none;
 }
 
-.import-sample-block label {
-  display: block;
-  font-size: 0.875rem;
-  margin-bottom: 6px;
-}
-
-#import-sample-csv {
-  width: 100%;
-  box-sizing: border-box;
-  font-family: ui-monospace, monospace;
-  font-size: 0.8rem;
-  padding: 8px;
-  border-radius: 6px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  resize: vertical;
-}
-
-.import-sample-actions {
-  margin-top: 8px;
-}
-
-.import-sample-actions button,
-.import-apply-btn {
-  padding: 6px 14px;
-  border-radius: 6px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  background: var(--sl-color-bg, #fff);
-  cursor: pointer;
-  font-size: 0.875rem;
+.import-msg {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0;
+  font-size: var(--sl-text-xs);
 }
 
-.import-apply-btn {
-  margin-top: 8px;
-  border-color: var(--sl-color-accent, #3b82f6);
-  color: var(--sl-color-accent, #3b82f6);
+.import-msg--error {
+  border-bottom: 1px solid var(--sl-color-red, #ef4444);
+  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));
+  color: var(--sl-color-red, #ef4444);
 }
 
-.import-msg {
-  padding: 10px 12px;
-  border-radius: 6px;
-  font-size: 0.875rem;
+.import-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  min-height: 200px;
+  color: var(--sl-color-gray-2);
+  text-align: center;
 }
 
-.import-msg--error {
-  background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));
-  border: 1px solid var(--sl-color-red, #ef4444);
-  color: var(--sl-color-red-high, #b91c1c);
+.import-empty[hidden] {
+  display: none;
 }
 
-.import-preview {
-  padding: 12px;
-  border-radius: 8px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  background: var(--sl-color-bg-inline-code, rgba(0, 0, 0, 0.03));
+.import-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.25rem;
+  border: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-3);
 }
 
-.import-preview-title {
-  margin: 0 0 8px;
-  font-size: 0.875rem;
+.import-empty-title {
+  margin: 0;
+  color: var(--sl-color-white);
+  font-size: var(--sl-text-sm);
   font-weight: 600;
 }
 
-.import-header-list {
+.import-empty-text {
   margin: 0;
-  padding-left: 1.25rem;
-  font-size: 0.875rem;
+  max-width: 38ch;
+  font-size: var(--sl-text-xs);
+  line-height: 1.5;
 }
 
 #example1 {
+  padding: 1rem;
   min-height: 180px;
 }
+
+#example1[hidden] {
+  display: none;
+}
diff --git a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.html b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.html
index 3a4932646d9..45c622a070e 100644
--- a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.html
+++ b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.html
@@ -6,32 +6,28 @@
     role="button"
     aria-label="Drop a CSV or Excel file here"
   >
-    <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or use the file picker.</p>
-    <label class="import-file-label">
-      <span>Choose file</span>
-      <input id="import-file" type="file" accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" />
-    </label>
-  </div>
-
-  <div class="import-sample-block">
-    <label for="import-sample-csv">Sample CSV (copy into a file or click <strong>Parse sample CSV</strong>):</label>
-    <textarea id="import-sample-csv" rows="5" spellcheck="false">Product,Category,In stock,Price
-Widget A,Hardware,true,19.99
-Widget B,Hardware,false,24.5
-Service Pack,Services,true,0
-</textarea>
-    <div class="import-sample-actions">
-      <button type="button" id="import-parse-sample">Parse sample CSV</button>
+    <p>Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.</p>
+    <div class="import-actions">
+      <label class="import-file-label">
+        <span>Choose file</span>
+        <input id="import-file" type="file" accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" />
+      </label>
+      <button type="button" id="import-load-sample" class="import-sample-btn">Load sample data</button>
     </div>
   </div>
 
   <div id="import-error" class="import-msg import-msg--error" hidden></div>
 
-  <div id="import-preview" class="import-preview" hidden>
-    <p class="import-preview-title">Detected column headers (not loaded yet):</p>
-    <ul id="import-header-list" class="import-header-list"></ul>
-    <button type="button" id="import-apply" class="import-apply-btn">Load into grid</button>
+  <div id="import-empty" class="import-empty">
+    <span class="import-empty-icon" aria-hidden="true">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="18" height="18"/>
+        <path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>
+      </svg>
+    </span>
+    <p class="import-empty-title">No data loaded yet</p>
+    <p class="import-empty-text">Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.</p>
   </div>
 
-  <div id="example1"></div>
+  <div id="example1" hidden></div>
 </div>
diff --git a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.js b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.js
index f7a2449e658..66df0b52c5d 100644
--- a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.js
+++ b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.js
@@ -193,21 +193,13 @@ async function parseFile(file) {
     }
     throw new Error('Unsupported file type. Use a .csv or .xlsx file.');
 }
-let pending = null;
-function renderHeaderPreview(listEl, headers) {
-    listEl.innerHTML = '';
-    for (const h of headers) {
-        const li = document.createElement('li');
-        li.textContent = h;
-        listEl.appendChild(li);
-    }
-}
-function columnsFromHeaders(headers) {
-    if (!pending) {
-        return headers.map((data) => ({ data, type: 'text' }));
-    }
+const SAMPLE_CSV = `Product,Category,In stock,Price
+Widget A,Hardware,true,19.99
+Widget B,Hardware,false,24.5
+Service Pack,Services,true,0`;
+function columnsFromHeaders(headers, rows) {
     return headers.map((data) => {
-        const values = pending?.rows
+        const values = rows
             .map((row) => row[data])
             .filter((v) => v !== null);
         if (values.length > 0 && values.every((v) => typeof v === 'number')) {
@@ -220,36 +212,34 @@ function columnsFromHeaders(headers) {
     });
 }
 const gridContainer = document.querySelector('#example1');
+const emptyEl = document.querySelector('#import-empty');
 const errEl = document.querySelector('#import-error');
-const previewEl = document.querySelector('#import-preview');
-const headerListEl = document.querySelector('#import-header-list');
-const applyBtn = document.querySelector('#import-apply');
 const fileInput = document.querySelector('#import-file');
 const dropzone = document.querySelector('#import-dropzone');
-const sampleTa = document.querySelector('#import-sample-csv');
-const sampleBtn = document.querySelector('#import-parse-sample');
-const initialSettings = {
-    data: [],
-    columns: [],
-    colHeaders: [],
-    rowHeaders: true,
-    height: 'auto',
-    width: '100%',
-    licenseKey: 'non-commercial-and-evaluation',
-};
-const hot = new Handsontable(gridContainer, initialSettings);
-function clearPendingPreview() {
-    pending = null;
-    if (previewEl) {
-        previewEl.hidden = true;
+const sampleBtn = document.querySelector('#import-load-sample');
+let hot = null;
+function loadIntoGrid({ headers, rows }) {
+    const columns = columnsFromHeaders(headers, rows);
+    if (!hot) {
+        if (emptyEl) {
+            emptyEl.hidden = true;
+        }
+        if (gridContainer) {
+            gridContainer.hidden = false;
+        }
+        hot = new Handsontable(gridContainer, {
+            data: rows,
+            columns,
+            colHeaders: headers,
+            rowHeaders: true,
+            height: 'auto',
+            width: '100%',
+            licenseKey: 'non-commercial-and-evaluation',
+        });
     }
-}
-function setPending(payload) {
-    pending = payload;
-    clearError(errEl);
-    if (headerListEl && previewEl) {
-        renderHeaderPreview(headerListEl, payload.headers);
-        previewEl.hidden = false;
+    else {
+        hot.updateSettings({ colHeaders: headers, columns });
+        hot.loadData(rows);
     }
 }
 async function handleFile(file) {
@@ -263,30 +253,12 @@ async function handleFile(file) {
     }
     try {
         const payload = await parseFile(file);
-        setPending(payload);
+        loadIntoGrid(payload);
     }
     catch (e) {
-        clearPendingPreview();
         showError(errEl, e instanceof Error ? e.message : String(e));
     }
 }
-applyBtn?.addEventListener('click', () => {
-    clearError(errEl);
-    if (!pending) {
-        showError(errEl, 'Nothing to load. Import a file first.');
-        return;
-    }
-    const { headers, rows } = pending;
-    hot.updateSettings({
-        colHeaders: headers,
-        columns: columnsFromHeaders(headers),
-    });
-    hot.loadData(rows);
-    if (previewEl) {
-        previewEl.hidden = true;
-    }
-    pending = null;
-});
 fileInput?.addEventListener('change', () => {
     const f = fileInput.files?.[0];
     handleFile(f);
@@ -309,12 +281,10 @@ sampleBtn?.addEventListener('click', async () => {
     clearError(errEl);
     try {
         const PapaRef = await ensurePapa();
-        const text = sampleTa?.value ?? '';
-        const payload = parseCsvText(text, PapaRef);
-        setPending(payload);
+        const payload = parseCsvText(SAMPLE_CSV, PapaRef);
+        loadIntoGrid(payload);
     }
     catch (e) {
-        clearPendingPreview();
         showError(errEl, e instanceof Error ? e.message : String(e));
     }
 });
diff --git a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.ts b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.ts
index c1a8bc0e525..6600f63e720 100644
--- a/docs/content/recipes/import-export/import-csv-excel/javascript/example1.ts
+++ b/docs/content/recipes/import-export/import-csv-excel/javascript/example1.ts
@@ -282,25 +282,14 @@ async function parseFile(file: File): Promise<ParsedPayload> {
   throw new Error('Unsupported file type. Use a .csv or .xlsx file.');
 }
 
-let pending: ParsedPayload | null = null;
-
-function renderHeaderPreview(listEl: HTMLElement, headers: string[]): void {
-  listEl.innerHTML = '';
-  for (const h of headers) {
-    const li = document.createElement('li');
-
-    li.textContent = h;
-    listEl.appendChild(li);
-  }
-}
-
-function columnsFromHeaders(headers: string[]): GridSettings['columns'] {
-  if (!pending) {
-    return headers.map((data) => ({ data, type: 'text' as const }));
-  }
+const SAMPLE_CSV = `Product,Category,In stock,Price
+Widget A,Hardware,true,19.99
+Widget B,Hardware,false,24.5
+Service Pack,Services,true,0`;
 
+function columnsFromHeaders(headers: string[], rows: ParsedRow[]): GridSettings['columns'] {
   return headers.map((data) => {
-    const values = pending?.rows
+    const values = rows
       .map((row) => row[data])
       .filter((v): v is string | number | boolean => v !== null);
 
@@ -317,42 +306,34 @@ function columnsFromHeaders(headers: string[]): GridSettings['columns'] {
 }
 
 const gridContainer = document.querySelector<HTMLElement>('#example1')!;
+const emptyEl = document.querySelector<HTMLElement>('#import-empty');
 const errEl = document.querySelector<HTMLElement>('#import-error');
-const previewEl = document.querySelector<HTMLElement>('#import-preview');
-const headerListEl = document.querySelector<HTMLElement>('#import-header-list');
-const applyBtn = document.querySelector<HTMLButtonElement>('#import-apply');
 const fileInput = document.querySelector<HTMLInputElement>('#import-file');
 const dropzone = document.querySelector<HTMLElement>('#import-dropzone');
-const sampleTa = document.querySelector<HTMLTextAreaElement>('#import-sample-csv');
-const sampleBtn = document.querySelector<HTMLButtonElement>('#import-parse-sample');
-
-const initialSettings: GridSettings = {
-  data: [],
-  columns: [],
-  colHeaders: [],
-  rowHeaders: true,
-  height: 'auto',
-  width: '100%',
-  licenseKey: 'non-commercial-and-evaluation',
-};
+const sampleBtn = document.querySelector<HTMLButtonElement>('#import-load-sample');
 
-const hot = new Handsontable(gridContainer, initialSettings);
+let hot: Handsontable | null = null;
 
-function clearPendingPreview(): void {
-  pending = null;
+function loadIntoGrid({ headers, rows }: ParsedPayload): void {
+  const columns = columnsFromHeaders(headers, rows);
 
-  if (previewEl) {
-    previewEl.hidden = true;
-  }
-}
-
-function setPending(payload: ParsedPayload): void {
-  pending = payload;
-  clearError(errEl);
-
-  if (headerListEl && previewEl) {
-    renderHeaderPreview(headerListEl, payload.headers);
-    previewEl.hidden = false;
+  if (!hot) {
+    if (emptyEl) {
+      emptyEl.hidden = true;
+    }
+    gridContainer.hidden = false;
+    hot = new Handsontable(gridContainer, {
+      data: rows,
+      columns,
+      colHeaders: headers,
+      rowHeaders: true,
+      height: 'auto',
+      width: '100%',
+      licenseKey: 'non-commercial-and-evaluation',
+    });
+  } else {
+    hot.updateSettings({ colHeaders: headers, columns });
+    hot.loadData(rows);
   }
 }
 
@@ -372,38 +353,12 @@ async function handleFile(file: File | null | undefined): Promise<void> {
   try {
     const payload = await parseFile(file);
 
-    setPending(payload);
+    loadIntoGrid(payload);
   } catch (e) {
-    clearPendingPreview();
-
     showError(errEl, e instanceof Error ? e.message : String(e));
   }
 }
 
-applyBtn?.addEventListener('click', () => {
-  clearError(errEl);
-
-  if (!pending) {
-    showError(errEl, 'Nothing to load. Import a file first.');
-
-    return;
-  }
-
-  const { headers, rows } = pending;
-
-  hot.updateSettings({
-    colHeaders: headers,
-    columns: columnsFromHeaders(headers),
-  });
-  hot.loadData(rows);
-
-  if (previewEl) {
-    previewEl.hidden = true;
-  }
-
-  pending = null;
-});
-
 fileInput?.addEventListener('change', () => {
   const f = fileInput.files?.[0];
 
@@ -433,12 +388,10 @@ sampleBtn?.addEventListener('click', async () => {
 
   try {
     const PapaRef = await ensurePapa();
-    const text = sampleTa?.value ?? '';
-    const payload = parseCsvText(text, PapaRef);
+    const payload = parseCsvText(SAMPLE_CSV, PapaRef);
 
-    setPending(payload);
+    loadIntoGrid(payload);
   } catch (e) {
-    clearPendingPreview();
     showError(errEl, e instanceof Error ? e.message : String(e));
   }
 });
diff --git a/docs/content/recipes/import-export/import-csv-excel/react/example1.css b/docs/content/recipes/import-export/import-csv-excel/react/example1.css
index 286a715eec8..37cedaaae88 100644
--- a/docs/content/recipes/import-export/import-csv-excel/react/example1.css
+++ b/docs/content/recipes/import-export/import-csv-excel/react/example1.css
@@ -1,37 +1,61 @@
 .import-csv-excel-wrap {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-bottom: 12px;
+  margin: 0 -1rem;
 }
 
 .import-dropzone {
-  border: 2px dashed var(--sl-color-gray-4, #ccc);
-  border-radius: 8px;
-  padding: 16px;
+  padding: 1.5rem 1rem;
   text-align: center;
-  background: var(--sl-color-bg-inline-code, rgba(0, 0, 0, 0.04));
-  transition: border-color 0.15s ease, background 0.15s ease;
+  border: 0;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-xs);
+  transition: background 0.15s ease;
+}
+
+.import-dropzone p {
+  margin: 0 0 0.75rem;
 }
 
 .import-dropzone.import-dropzone--active {
-  border-color: var(--sl-color-accent, #3b82f6);
-  background: var(--sl-color-accent-low, rgba(59, 130, 246, 0.08));
+  background: var(--sl-color-gray-6);
+}
+
+.import-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .import-file-label {
   display: inline-block;
-  margin-top: 8px;
   cursor: pointer;
 }
 
-.import-file-label span {
-  display: inline-block;
-  padding: 6px 14px;
-  border-radius: 6px;
-  background: var(--sl-color-accent, #3b82f6);
-  color: var(--sl-color-black, #fff);
-  font-size: 0.875rem;
+.import-file-label span,
+.import-sample-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0;
+  background: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-2);
+  font-family: var(--sl-font);
+  font-size: var(--sl-text-xs);
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.import-file-label:hover span,
+.import-sample-btn:hover {
+  background: var(--sl-color-gray-5);
+  color: var(--sl-color-white);
 }
 
 .import-file-label input {
@@ -42,70 +66,52 @@
   pointer-events: none;
 }
 
-.import-sample-block label {
-  display: block;
-  font-size: 0.875rem;
-  margin-bottom: 6px;
-}
-
-.import-sample-block textarea {
-  width: 100%;
-  box-sizing: border-box;
-  font-family: ui-monospace, monospace;
-  font-size: 0.8rem;
-  padding: 8px;
-  border-radius: 6px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  resize: vertical;
-}
-
-.import-sample-actions {
-  margin-top: 8px;
-}
-
-.import-sample-actions button,
-.import-apply-btn {
-  padding: 6px 14px;
-  border-radius: 6px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  background: var(--sl-color-bg, #fff);
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
-.import-apply-btn {
-  margin-top: 8px;
-  border-color: var(--sl-color-accent, #3b82f6);
-  color: var(--sl-color-accent, #3b82f6);
-}
-
 .import-msg {
-  padding: 10px 12px;
-  border-radius: 6px;
-  font-size: 0.875rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0;
+  font-size: var(--sl-text-xs);
 }
 
 .import-msg--error {
+  border-bottom: 1px solid var(--sl-color-red, #ef4444);
   background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));
-  border: 1px solid var(--sl-color-red, #ef4444);
-  color: var(--sl-color-red-high, #b91c1c);
+  color: var(--sl-color-red, #ef4444);
 }
 
-.import-preview {
-  padding: 12px;
-  border-radius: 8px;
-  border: 1px solid var(--sl-color-gray-4, #ccc);
-  background: var(--sl-color-bg-inline-code, rgba(0, 0, 0, 0.03));
+.import-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  min-height: 200px;
+  color: var(--sl-color-gray-2);
+  text-align: center;
 }
 
-.import-preview-title {
-  margin: 0 0 8px;
-  font-size: 0.875rem;
+.import-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.25rem;
+  border: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-3);
+}
+
+.import-empty-title {
+  margin: 0;
+  color: var(--sl-color-white);
+  font-size: var(--sl-text-sm);
   font-weight: 600;
 }
 
-.import-header-list {
+.import-empty-text {
   margin: 0;
-  padding-left: 1.25rem;
-  font-size: 0.875rem;
+  max-width: 38ch;
+  font-size: var(--sl-text-xs);
+  line-height: 1.5;
 }
diff --git a/docs/content/recipes/import-export/import-csv-excel/react/example1.jsx b/docs/content/recipes/import-export/import-csv-excel/react/example1.jsx
index 830e6d2dc4d..d4e7a23157d 100644
--- a/docs/content/recipes/import-export/import-csv-excel/react/example1.jsx
+++ b/docs/content/recipes/import-export/import-csv-excel/react/example1.jsx
@@ -243,13 +243,9 @@ async function parseFile(file) {
   throw new Error('Unsupported file type. Use a .csv or .xlsx file.');
 }
 
-function columnsFromHeaders(headers, pendingRows) {
-  if (!pendingRows) {
-    return headers.map((data) => ({ data, type: 'text' }));
-  }
-
+function columnsFromHeaders(headers, rows) {
   return headers.map((data) => {
-    const values = pendingRows
+    const values = rows
       .map((row) => row[data])
       .filter((v) => v !== null);
 
@@ -269,33 +265,24 @@ function columnsFromHeaders(headers, pendingRows) {
 const SAMPLE_CSV = `Product,Category,In stock,Price
 Widget A,Hardware,true,19.99
 Widget B,Hardware,false,24.5
-Service Pack,Services,true,0
-`;
+Service Pack,Services,true,0`;
 /* end:skip-in-preview */
 
 const ExampleComponent = () => {
-  const [pending, setPendingState] = useState(null);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showPreview, setShowPreview] = useState(false);
-  const [sampleCsv, setSampleCsv] = useState(SAMPLE_CSV);
   const [dropzoneActive, setDropzoneActive] = useState(false);
   const [gridData, setGridData] = useState([]);
   const [gridColHeaders, setGridColHeaders] = useState([]);
   const [gridColumns, setGridColumns] = useState([]);
 
-  const clearPendingPreview = () => {
-    setPendingState(null);
-    setShowPreview(false);
-  };
-
-  const handleParsed = (payload) => {
+  const loadIntoGrid = ({ headers, rows }) => {
     setErrorMessage('');
-    setPendingState(payload);
-    setShowPreview(true);
+    setGridColHeaders(headers);
+    setGridColumns(columnsFromHeaders(headers, rows));
+    setGridData(rows);
   };
 
   const handleError = (e) => {
-    clearPendingPreview();
     setErrorMessage(e instanceof Error ? e.message : String(e));
   };
 
@@ -315,7 +302,7 @@ const ExampleComponent = () => {
     try {
       const payload = await parseFile(file);
 
-      handleParsed(payload);
+      loadIntoGrid(payload);
     } catch (e) {
       handleError(e);
     }
@@ -345,37 +332,19 @@ const ExampleComponent = () => {
     handleFile(f);
   };
 
-  const handleParseSample = async () => {
+  const handleLoadSample = async () => {
     setErrorMessage('');
 
     try {
       const PapaRef = await ensurePapa();
-      const payload = parseCsvText(sampleCsv, PapaRef);
+      const payload = parseCsvText(SAMPLE_CSV, PapaRef);
 
-      handleParsed(payload);
+      loadIntoGrid(payload);
     } catch (e) {
       handleError(e);
     }
   };
 
-  const handleApply = () => {
-    setErrorMessage('');
-
-    if (!pending) {
-      setErrorMessage('Nothing to load. Import a file first.');
-
-      return;
-    }
-
-    const { headers, rows } = pending;
-
-    setGridColHeaders(headers);
-    setGridColumns(columnsFromHeaders(headers, rows));
-    setGridData(rows);
-    setPendingState(null);
-    setShowPreview(false);
-  };
-
   return (
     <div className="import-csv-excel-wrap">
       <div
@@ -388,32 +357,19 @@ const ExampleComponent = () => {
         onDrop={handleDrop}
       >
         <p>
-          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or use the file picker.
+          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.
         </p>
-        <label className="import-file-label">
-          <span>Choose file</span>
-          <input
-            type="file"
-            accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
-            onChange={handleFileInputChange}
-          />
-        </label>
-      </div>
-
-      <div className="import-sample-block">
-        <label htmlFor="import-sample-csv">
-          Sample CSV (copy into a file or click <strong>Parse sample CSV</strong>):
-        </label>
-        <textarea
-          id="import-sample-csv"
-          rows={5}
-          spellCheck={false}
-          value={sampleCsv}
-          onChange={(ev) => setSampleCsv(ev.target.value)}
-        />
-        <div className="import-sample-actions">
-          <button type="button" onClick={handleParseSample}>
-            Parse sample CSV
+        <div className="import-actions">
+          <label className="import-file-label">
+            <span>Choose file</span>
+            <input
+              type="file"
+              accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
+              onChange={handleFileInputChange}
+            />
+          </label>
+          <button type="button" className="import-sample-btn" onClick={handleLoadSample}>
+            Load sample data
           </button>
         </div>
       </div>
@@ -422,29 +378,30 @@ const ExampleComponent = () => {
         <div className="import-msg import-msg--error">{errorMessage}</div>
       )}
 
-      {showPreview && pending && (
-        <div className="import-preview">
-          <p className="import-preview-title">Detected column headers (not loaded yet):</p>
-          <ul className="import-header-list">
-            {pending.headers.map((h) => (
-              <li key={h}>{h}</li>
-            ))}
-          </ul>
-          <button type="button" className="import-apply-btn" onClick={handleApply}>
-            Load into grid
-          </button>
+      {gridData.length === 0 ? (
+        <div className="import-empty">
+          <span className="import-empty-icon" aria-hidden="true">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="3" width="18" height="18" />
+              <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
+            </svg>
+          </span>
+          <p className="import-empty-title">No data loaded yet</p>
+          <p className="import-empty-text">
+            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.
+          </p>
         </div>
+      ) : (
+        <HotTable
+          data={gridData}
+          columns={gridColumns}
+          colHeaders={gridColHeaders}
+          rowHeaders={true}
+          height="auto"
+          width="100%"
+          licenseKey="non-commercial-and-evaluation"
+        />
       )}
-
-      <HotTable
-        data={gridData}
-        columns={gridColumns}
-        colHeaders={gridColHeaders}
-        rowHeaders={true}
-        height="auto"
-        width="100%"
-        licenseKey="non-commercial-and-evaluation"
-      />
     </div>
   );
 };
diff --git a/docs/content/recipes/import-export/import-csv-excel/react/example1.tsx b/docs/content/recipes/import-export/import-csv-excel/react/example1.tsx
index 6f3cea9daf9..b6f27e3d75f 100644
--- a/docs/content/recipes/import-export/import-csv-excel/react/example1.tsx
+++ b/docs/content/recipes/import-export/import-csv-excel/react/example1.tsx
@@ -275,13 +275,9 @@ async function parseFile(file: File): Promise<ParsedPayload> {
   throw new Error('Unsupported file type. Use a .csv or .xlsx file.');
 }
 
-function columnsFromHeaders(headers: string[], pendingRows: Record<string, CellValue>[] | null): ColumnDef[] {
-  if (!pendingRows) {
-    return headers.map((data) => ({ data, type: 'text' }));
-  }
-
+function columnsFromHeaders(headers: string[], rows: Record<string, CellValue>[]): ColumnDef[] {
   return headers.map((data) => {
-    const values = pendingRows
+    const values = rows
       .map((row) => row[data])
       .filter((v) => v !== null);
 
@@ -301,33 +297,24 @@ function columnsFromHeaders(headers: string[], pendingRows: Record<string, CellV
 const SAMPLE_CSV = `Product,Category,In stock,Price
 Widget A,Hardware,true,19.99
 Widget B,Hardware,false,24.5
-Service Pack,Services,true,0
-`;
+Service Pack,Services,true,0`;
 /* end:skip-in-preview */
 
 const ExampleComponent = () => {
-  const [pending, setPendingState] = useState<ParsedPayload | null>(null);
   const [errorMessage, setErrorMessage] = useState<string>('');
-  const [showPreview, setShowPreview] = useState<boolean>(false);
-  const [sampleCsv, setSampleCsv] = useState<string>(SAMPLE_CSV);
   const [dropzoneActive, setDropzoneActive] = useState<boolean>(false);
   const [gridData, setGridData] = useState<Record<string, CellValue>[]>([]);
   const [gridColHeaders, setGridColHeaders] = useState<string[]>([]);
   const [gridColumns, setGridColumns] = useState<ColumnDef[]>([]);
 
-  const clearPendingPreview = (): void => {
-    setPendingState(null);
-    setShowPreview(false);
-  };
-
-  const handleParsed = (payload: ParsedPayload): void => {
+  const loadIntoGrid = ({ headers, rows }: ParsedPayload): void => {
     setErrorMessage('');
-    setPendingState(payload);
-    setShowPreview(true);
+    setGridColHeaders(headers);
+    setGridColumns(columnsFromHeaders(headers, rows));
+    setGridData(rows);
   };
 
   const handleError = (e: unknown): void => {
-    clearPendingPreview();
     setErrorMessage(e instanceof Error ? e.message : String(e));
   };
 
@@ -347,7 +334,7 @@ const ExampleComponent = () => {
     try {
       const payload = await parseFile(file);
 
-      handleParsed(payload);
+      loadIntoGrid(payload);
     } catch (e) {
       handleError(e);
     }
@@ -377,37 +364,19 @@ const ExampleComponent = () => {
     handleFile(f);
   };
 
-  const handleParseSample = async (): Promise<void> => {
+  const handleLoadSample = async (): Promise<void> => {
     setErrorMessage('');
 
     try {
       const PapaRef = await ensurePapa();
-      const payload = parseCsvText(sampleCsv, PapaRef);
+      const payload = parseCsvText(SAMPLE_CSV, PapaRef);
 
-      handleParsed(payload);
+      loadIntoGrid(payload);
     } catch (e) {
       handleError(e);
     }
   };
 
-  const handleApply = (): void => {
-    setErrorMessage('');
-
-    if (!pending) {
-      setErrorMessage('Nothing to load. Import a file first.');
-
-      return;
-    }
-
-    const { headers, rows } = pending;
-
-    setGridColHeaders(headers);
-    setGridColumns(columnsFromHeaders(headers, rows));
-    setGridData(rows);
-    setPendingState(null);
-    setShowPreview(false);
-  };
-
   return (
     <div className="import-csv-excel-wrap">
       <div
@@ -420,32 +389,19 @@ const ExampleComponent = () => {
         onDrop={handleDrop}
       >
         <p>
-          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or use the file picker.
+          Drop a <code>.csv</code> or <code>.xlsx</code> file here, or pick a source.
         </p>
-        <label className="import-file-label">
-          <span>Choose file</span>
-          <input
-            type="file"
-            accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
-            onChange={handleFileInputChange}
-          />
-        </label>
-      </div>
-
-      <div className="import-sample-block">
-        <label htmlFor="import-sample-csv">
-          Sample CSV (copy into a file or click <strong>Parse sample CSV</strong>):
-        </label>
-        <textarea
-          id="import-sample-csv"
-          rows={5}
-          spellCheck={false}
-          value={sampleCsv}
-          onChange={(ev) => setSampleCsv(ev.target.value)}
-        />
-        <div className="import-sample-actions">
-          <button type="button" onClick={handleParseSample}>
-            Parse sample CSV
+        <div className="import-actions">
+          <label className="import-file-label">
+            <span>Choose file</span>
+            <input
+              type="file"
+              accept=".csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
+              onChange={handleFileInputChange}
+            />
+          </label>
+          <button type="button" className="import-sample-btn" onClick={handleLoadSample}>
+            Load sample data
           </button>
         </div>
       </div>
@@ -454,29 +410,30 @@ const ExampleComponent = () => {
         <div className="import-msg import-msg--error">{errorMessage}</div>
       )}
 
-      {showPreview && pending && (
-        <div className="import-preview">
-          <p className="import-preview-title">Detected column headers (not loaded yet):</p>
-          <ul className="import-header-list">
-            {pending.headers.map((h) => (
-              <li key={h}>{h}</li>
-            ))}
-          </ul>
-          <button type="button" className="import-apply-btn" onClick={handleApply}>
-            Load into grid
-          </button>
+      {gridData.length === 0 ? (
+        <div className="import-empty">
+          <span className="import-empty-icon" aria-hidden="true">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="3" width="18" height="18" />
+              <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
+            </svg>
+          </span>
+          <p className="import-empty-title">No data loaded yet</p>
+          <p className="import-empty-text">
+            Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.
+          </p>
         </div>
+      ) : (
+        <HotTable
+          data={gridData}
+          columns={gridColumns}
+          colHeaders={gridColHeaders}
+          rowHeaders={true}
+          height="auto"
+          width="100%"
+          licenseKey="non-commercial-and-evaluation"
+        />
       )}
-
-      <HotTable
-        data={gridData}
-        columns={gridColumns}
-        colHeaders={gridColHeaders}
-        rowHeaders={true}
-        height="auto"
-        width="100%"
-        licenseKey="non-commercial-and-evaluation"
-      />
     </div>
   );
 };
diff --git a/docs/netlify/_redirects b/docs/netlify/_redirects
index f221a77bf3d..e502cda449f 100644
--- a/docs/netlify/_redirects
+++ b/docs/netlify/_redirects
@@ -3,24 +3,25 @@
 /docs/:version/redirect pageId=:pageId /docs/:version
 /docs/redirect pageId=:pageId /docs 301
 
-# Angular docs are available from 16.0+ only.
-/docs/15.3/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/15.2/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/15.1/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/15.0/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.6/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.5/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.4/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.3/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.2/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.1/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/14.0/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/13.1/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/13.0/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/12.4/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/12.3/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/12.2/angular-data-grid/* /docs/javascript-data-grid/ 301
-/docs/12.1/angular-data-grid/* /docs/javascript-data-grid/ 301
+# Angular dedicated docs are available from 16.0+ only.
+# Versions 12.1-15.3 had the Angular package but no dedicated docs pages - redirect to latest Angular docs.
+/docs/15.3/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/15.2/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/15.1/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/15.0/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.6/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.5/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.4/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.3/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.2/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.1/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/14.0/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/13.1/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/13.0/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/12.4/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/12.3/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/12.2/angular-data-grid/* /docs/angular-data-grid/ 301
+/docs/12.1/angular-data-grid/* /docs/angular-data-grid/ 301
 /docs/12.0/angular-data-grid/* /docs/javascript-data-grid/ 301
 /docs/11.1/angular-data-grid/* /docs/javascript-data-grid/ 301
 /docs/11.0/angular-data-grid/* /docs/javascript-data-grid/ 301
diff --git a/docs/package.json b/docs/package.json
index 1205cdcf995..c192fb0cabd 100755
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,6 +13,7 @@
     "docs:code-examples:generate-js": "node scripts/transpile-doc-example.mjs",
     "build": "npm run docs:api && astro build",
     "preview": "astro preview",
+    "docs:test:plugins": "node --test src/plugins/__tests__/*.test.mjs",
     "docs:lint": "eslint --ext .js,.mjs,.ts,.astro src content",
     "docs:lint:fix": "eslint --ext .js,.mjs,.ts,.astro src content --fix",
     "docs:visual-test": "npx playwright test",
diff --git a/docs/src/plugins/__tests__/aside-inline-markdown.test.mjs b/docs/src/plugins/__tests__/aside-inline-markdown.test.mjs
new file mode 100644
index 00000000000..1f1166998f2
--- /dev/null
+++ b/docs/src/plugins/__tests__/aside-inline-markdown.test.mjs
@@ -0,0 +1,68 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  convertAsideBodyMarkdown,
+  convertAsideInlineMarkdown,
+} from '../aside-inline-markdown.mjs';
+
+test('bold **text** becomes strong', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('**DOMPurify will be removed.** After that, stop.'),
+    '<strong>DOMPurify will be removed.</strong> After that, stop.'
+  );
+});
+
+test('inline code is preserved and not bolded', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('Use the `sanitizer` option.'),
+    'Use the <code>sanitizer</code> option.'
+  );
+});
+
+test('link label may contain inline code', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('See [`sanitizer`](/api/options.md#sanitizer) for details.'),
+    'See <a href="/api/options.md#sanitizer"><code>sanitizer</code></a> for details.'
+  );
+});
+
+test('cell-renderer style caution line', () => {
+  const line =
+    '**DOMPurify will be removed in the next version.** After that, any string containing HTML will be stripped before rendering. To keep sanitized HTML (e.g. with DOMPurify), set the [`sanitizer`](@/api/options.md#sanitizer) option to your own sanitizer function.';
+
+  const out = convertAsideInlineMarkdown(line);
+
+  assert.match(out, /^<strong>DOMPurify will be removed in the next version\.<\/strong>/);
+  assert.match(
+    out,
+    /set the <a href="@\/api\/options\.md#sanitizer"><code>sanitizer<\/code><\/a> option/
+  );
+});
+
+test('bold wrapping a markdown link', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('**See [docs](/guides/foo)** for more.'),
+    '<strong>See <a href="/guides/foo">docs</a></strong> for more.'
+  );
+});
+
+test('bold-wrapped link: query string is not double-escaped', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('**See [docs](/guides/foo?a=1&b=2)** for more.'),
+    '<strong>See <a href="/guides/foo?a=1&amp;b=2">docs</a></strong> for more.'
+  );
+});
+
+test('markdown link wrapping bold label', () => {
+  assert.equal(
+    convertAsideInlineMarkdown('[**Important**](/warn)'),
+    '<a href="/warn"><strong>Important</strong></a>'
+  );
+});
+
+test('convertAsideBodyMarkdown maps each line', () => {
+  assert.equal(
+    convertAsideBodyMarkdown('Line one **bold**.\nLine two `code`.'),
+    'Line one <strong>bold</strong>.\nLine two <code>code</code>.'
+  );
+});
diff --git a/docs/src/plugins/aside-inline-markdown.mjs b/docs/src/plugins/aside-inline-markdown.mjs
new file mode 100644
index 00000000000..600241fb894
--- /dev/null
+++ b/docs/src/plugins/aside-inline-markdown.mjs
@@ -0,0 +1,108 @@
+/**
+ * Inline Markdown subsets for Starlight aside directive bodies (`:::tip`, etc.).
+ * Starlight/remark-directive does not parse these; callers run this preprocessor.
+ *
+ * Transformation order:
+ * 1. Inline `` `code` `` → placeholders (shared chunk table for nested/recursive passes).
+ * 2. Markdown links `[label](href)` → placeholders (raw href preserved for one `escapeAttr` pass).
+ * 3. Strong `**text**` → `<strong>` (`escapeHtml` on masked text only -- avoids double-encoding `&` in URLs).
+ * 4. Expand link placeholders to `<a>`; labels are processed via recursive {@link convertAsideInlineMarkdown}
+ *    so patterns like `[**bold**](url)` keep working.
+ * 5. Restore code placeholders to `<code>`.
+ *
+ * @module aside-inline-markdown
+ */
+
+const MAX_RECURSION_DEPTH = 10;
+
+/**
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeHtml(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeAttr(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * @param {string} line
+ * @param {{ sharedCodeChunks?: string[], depth?: number }} [options]
+ * @returns {string}
+ */
+export function convertAsideInlineMarkdown(line, options = {}) {
+  const { sharedCodeChunks = null, depth = 0 } = options;
+
+  if (depth > MAX_RECURSION_DEPTH) {
+    return escapeHtml(line);
+  }
+
+  const codeChunks = sharedCodeChunks ?? [];
+
+  let masked = line.replace(/`([^`]+)`/g, (_, code) => {
+    const id = codeChunks.length;
+
+    codeChunks.push(code);
+    return `@@HT_ASIDE_CODE_${id}@@`;
+  });
+
+  const linkEntries = [];
+
+  while (true) {
+    const m = masked.match(/\[([^\]]*)\]\(([^)]*)\)/);
+
+    if (!m) {
+      break;
+    }
+
+    const full = m[0];
+    const at = masked.indexOf(full);
+
+    linkEntries.push({ label: m[1], href: m[2] });
+    masked = `${masked.slice(0, at)}@@HT_ASIDE_LINK_${linkEntries.length - 1}@@${masked.slice(at + full.length)}`;
+  }
+
+  masked = masked.replace(/\*\*(.+?)\*\*/g, (_, inner) =>
+    `<strong>${escapeHtml(inner)}</strong>`
+  );
+
+  for (let i = 0; i < linkEntries.length; i++) {
+    const ph = `@@HT_ASIDE_LINK_${i}@@`;
+    const { label, href } = linkEntries[i];
+    const innerHtml = convertAsideInlineMarkdown(label, {
+      sharedCodeChunks: codeChunks,
+      depth: depth + 1,
+    });
+    const anchor = `<a href="${escapeAttr(href)}">${innerHtml}</a>`;
+
+    masked = masked.split(ph).join(anchor);
+  }
+
+  return masked.replace(/@@HT_ASIDE_CODE_(\d+)@@/g, (_, id) => {
+    const chunk = codeChunks[Number(id)];
+
+    return `<code>${escapeHtml(chunk)}</code>`;
+  });
+}
+
+/**
+ * Applies {@link convertAsideInlineMarkdown} to each line of a block (aside bodies).
+ *
+ * @param {string} body
+ * @returns {string}
+ */
+export function convertAsideBodyMarkdown(body) {
+  return body.split('\n').map(line => convertAsideInlineMarkdown(line)).join('\n');
+}
diff --git a/docs/src/plugins/framework-loader.mjs b/docs/src/plugins/framework-loader.mjs
index 4584369a0b8..1254abc5312 100644
--- a/docs/src/plugins/framework-loader.mjs
+++ b/docs/src/plugins/framework-loader.mjs
@@ -13,6 +13,7 @@ import { createRequire } from 'module';
 import { fileURLToPath } from 'url';
 import matter from 'gray-matter';
 import { CURRENT_DOCS_VERSION } from './docs-version.mjs';
+import { convertAsideBodyMarkdown } from './aside-inline-markdown.mjs';
 
 // Read the current handsontable library version for StackBlitz package.json.
 const _require = createRequire(import.meta.url);
@@ -845,9 +846,7 @@ function convertAsideBlocks(content) {
     } else if (/^:::\s*$/.test(line)) {
       // Convert markdown syntax to HTML since the body is injected as raw
       // HTML and won't be processed by remark.
-      const body = asideBody.join('\n').trim()
-        .replace(/`([^`]+)`/g, '<code>$1</code>')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+      const body = convertAsideBodyMarkdown(asideBody.join('\n').trim());
 
       result.push(`<aside class="starlight-aside starlight-aside--${asideType}" aria-label="${asideTitle}">`);
       result.push(`<p class="starlight-aside__title" aria-hidden="true">${asideTitle}</p>`);
diff --git a/docs/src/plugins/vuepress-preprocessor.mjs b/docs/src/plugins/vuepress-preprocessor.mjs
index 9205776f058..44aa1f3b5eb 100644
--- a/docs/src/plugins/vuepress-preprocessor.mjs
+++ b/docs/src/plugins/vuepress-preprocessor.mjs
@@ -7,6 +7,7 @@
  * - :::: only-for [framework] ... :::: (conditional content blocks)
  * - [[ toc ]] (VuePress TOC macro — Starlight generates ToC automatically)
  * - ::: tip / ::: warning / ::: danger  → :::tip / :::caution / :::danger
+ *     (aside bodies: inline `` `code` ``, **bold**, [text](url) via aside-inline-markdown)
  * - ::: example / ::: example-without-tabs  (strip markers, keep code blocks)
  * - ::: source-code-link URL  (convert to <a> tag)
  * - $withBase('/path') → /path
@@ -16,6 +17,7 @@
  */
 
 import { CURRENT_DOCS_VERSION } from './docs-version.mjs';
+import { convertAsideInlineMarkdown } from './aside-inline-markdown.mjs';
 
 /**
  * @param {{ framework?: string }} options
@@ -57,10 +59,10 @@ function preprocessMarkdown(content, framework) {
   );
   // Closing ::: (3 colons) stays unchanged — Starlight uses the same syntax
 
-  // 3b. Convert backtick inline code to <code> inside aside blocks.
-  //     Starlight/remark-directive does not process inline markdown in aside
-  //     content, so we pre-convert `code` → <code>code</code> ourselves.
-  result = convertInlineCodeInAsides(result);
+  // 3b. Convert inline Markdown inside aside blocks (`:::tip`, `:::caution`, etc.).
+  //     Starlight/remark-directive does not process aside body text; we emit HTML for
+  //     `` `code` ``, **bold**, and [label](href) (see aside-inline-markdown.mjs).
+  result = convertInlineMarkdownInAsides(result);
 
   // 3c. Convert ::: details Title → <details><summary>Title</summary>…</details>
   result = convertDetailsContainers(result);
@@ -316,14 +318,11 @@ function convertDetailsContainers(content) {
 }
 
 /**
- * Converts backtick inline code (`text`) to <code>text</code> inside Starlight
- * aside blocks (:::tip, :::caution, :::danger, :::note).
- *
- * Starlight/remark-directive treats aside body content as plain text and does
- * not process inline markdown. This function pre-converts the backticks so the
- * rendered HTML contains proper <code> elements.
+ * Converts inline Markdown inside Starlight aside blocks (:::tip, :::caution,
+ * :::danger, :::note) to HTML. Starlight/remark-directive treats aside bodies as
+ * plain text; see `./aside-inline-markdown.mjs` for supported syntax.
  */
-function convertInlineCodeInAsides(content) {
+function convertInlineMarkdownInAsides(content) {
   const lines = content.split('\n');
   const result = [];
   let insideAside = false;
@@ -355,7 +354,7 @@ function convertInlineCodeInAsides(content) {
         continue;
       }
 
-      result.push(line.replace(/`([^`]+)`/g, '<code>$1</code>'));
+      result.push(convertAsideInlineMarkdown(line));
       continue;
     }
 
diff --git a/docs/src/styles/components/code.css b/docs/src/styles/components/code.css
index 972077cddb8..09d36cda115 100644
--- a/docs/src/styles/components/code.css
+++ b/docs/src/styles/components/code.css
@@ -68,6 +68,13 @@
   --ec-frm-shdCol: transparent;
   --ec-frm-frameBoxShdCssVal: none;
   --ec-frm-trmTtbBrdBtmCol: var(--sl-color-gray-5);
+  /* Base .expressive-code sets dark-theme fg; block bg is light -- line numbers and code must use dark ink */
+  --ec-codeFg: var(--sl-color-white);
+  --ec-gtrFg: var(--sl-color-gray-2);
+  --ec-gtrHlFg: rgba(36, 41, 47, 0.55);
+  --ec-codeSelBg: rgba(51, 146, 255, 0.28);
+  --ec-uiSelBg: var(--sl-color-gray-5);
+  --ec-uiSelFg: var(--sl-color-white);
 }
 
 :root[data-theme='light'] .expressive-code .copy button {
@@ -143,6 +150,12 @@
   border-inline-start-color: #41a167 !important;
 }
 
+/* Expressive Code del (deleted) line highlight — light theme only; matches ins subtlety */
+:root[data-theme='light'] .expressive-code .ec-line.del {
+  background-color: rgba(134, 45, 39, 0.15) !important;
+  border-inline-start-color: #862d27 !important;
+}
+
 /* -------------------------------------------------------------------------
  * FileTree — unscoped replica of Starlight's FileTree.astro CSS.
  * The built-in component CSS is scoped with :where(.astro-*) and won't
diff --git a/docs/src/styles/interactive-example.css b/docs/src/styles/interactive-example.css
index 9db564ad34d..c973208f374 100644
--- a/docs/src/styles/interactive-example.css
+++ b/docs/src/styles/interactive-example.css
@@ -82,6 +82,53 @@
   /* min-height prevents layout shift; actual height is set by Handsontable */
 }
 
+/* Demo text inputs: in column flex, a second input after a wide Handsontable sibling can
+   shrink (flex min-width: auto). Stretch to match the row above. Per-example CSS may cap with
+   max-width (e.g. 20rem). */
+.hot-example .placeholder-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ── Focus scopes: debug readout (DEV-1610, hooks-aligned) ───────────────
+   Matches events-and-hooks event log rhythm (#example1_events in example-specific.css).
+   No horizontal negative margin here: .hot-example uses overflow:hidden and would clip. */
+
+.hot-example strong:has(+ table.debug-table) {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--sl-color-white);
+  margin: 0.75rem 0 0;
+  padding: 0.5rem 0 0.35rem;
+  border-top: 1px solid var(--sl-color-gray-5);
+}
+
+.hot-example table.debug-table {
+  width: 100%;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--sl-color-gray-2);
+  background: transparent;
+}
+
+.hot-example table.debug-table td {
+  padding: 0.25rem 0.5rem !important;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-2);
+}
+
+.hot-example table.debug-table td:last-child {
+  font-family: var(--sl-font-mono, ui-monospace, monospace);
+}
+
+.hot-example table.debug-table td code {
+  font-size: var(--sl-text-xs);
+}
+
 /* ── Example controls (buttons, inputs, labels, output) ───────────────── */
 
 .example-controls-container {
@@ -90,6 +137,11 @@
   border-bottom: 1px solid var(--sl-color-gray-5);
 }
 
+/* Controls placed under the grid (default strip has margin-top: 0 for toolbar-at-top demos) */
+.example-controls-container.example-controls-below-grid {
+  margin-top: 0.75rem;
+}
+
 .example-controls-container .controls {
   display: flex;
   align-items: center;
@@ -99,7 +151,8 @@
 
 .example-controls-container button,
 .example-controls-container .button,
-.hot-example-preview > button {
+.hot-example-preview > button,
+.ht-dialog__content button.hot-doc-dialog-html-button {
   appearance: none;
   display: inline-flex;
   align-items: center;
@@ -119,17 +172,24 @@
 
 .example-controls-container button:hover,
 .example-controls-container .button:hover,
-.hot-example-preview > button:hover {
+.hot-example-preview > button:hover,
+.ht-dialog__content button.hot-doc-dialog-html-button:hover {
   background: var(--sl-color-gray-5);
   color: var(--sl-color-white);
 }
 
 .example-controls-container button:active,
 .example-controls-container .button:active,
-.hot-example-preview > button:active {
+.hot-example-preview > button:active,
+.ht-dialog__content button.hot-doc-dialog-html-button:active {
   background: var(--sl-color-gray-4);
 }
 
+/* Dialog guide: HTML `content` buttons sit below paragraph copy */
+.ht-dialog__content button.hot-doc-dialog-html-button {
+  margin-top: 0.5rem;
+}
+
 .example-controls-container select {
   appearance: none;
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
diff --git a/docs/src/styles/layout/page.css b/docs/src/styles/layout/page.css
index 19ed11072bc..4649dc8acf5 100644
--- a/docs/src/styles/layout/page.css
+++ b/docs/src/styles/layout/page.css
@@ -37,6 +37,23 @@
   margin-top: 20px;
 }
 
+/* Responsive 16:9 embed (YouTube and similar) */
+.sl-markdown-content .docs-video-embed {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin-top: 20px;
+}
+
+.sl-markdown-content .docs-video-embed iframe {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  margin-top: 0;
+}
+
 /* -------------------------------------------------------------------------
  * Constrain entire page layout to ~1500px on wide viewports
  * ------------------------------------------------------------------------- */
diff --git a/docs/src/styles/utilities.css b/docs/src/styles/utilities.css
index c96612f60bc..d61a02a93ac 100644
--- a/docs/src/styles/utilities.css
+++ b/docs/src/styles/utilities.css
@@ -20,7 +20,9 @@ html {
   }
 }
 
-:focus-visible:not(.handsontable *, .ht-portal *) {
+/* Omit demo `.placeholder-input` fields: their example CSS uses an accent border on `:focus`;
+   this outline would stack and read as a double ring. */
+:focus-visible:not(.handsontable *, .ht-portal *, .hot-example .placeholder-input) {
   outline: 2px solid var(--sl-color-accent);
   outline-offset: 2px;
 }
diff --git a/handsontable/.config/styles-development.js b/handsontable/.config/styles-development.js
index b3cc14f4ec8..f74a9aabf4b 100644
--- a/handsontable/.config/styles-development.js
+++ b/handsontable/.config/styles-development.js
@@ -24,7 +24,7 @@ module.exports.create = function create(envArgs) {
           use: [
             { loader: rspack.CssExtractRspackPlugin.loader },
             { loader: 'css-loader' },
-            { loader: 'sass-loader' },
+            { loader: 'sass-loader', options: { sassOptions: { silenceDeprecations: ['legacy-js-api'] } } },
           ]
         }
       ],
diff --git a/handsontable/.config/walkontable.js b/handsontable/.config/walkontable.js
index b792158de10..1b9c72e9f16 100644
--- a/handsontable/.config/walkontable.js
+++ b/handsontable/.config/walkontable.js
@@ -44,7 +44,7 @@ module.exports.create = function create() {
           use: [
             { loader: rspack.CssExtractRspackPlugin.loader },
             { loader: 'css-loader' },
-            { loader: 'sass-loader'},
+            { loader: 'sass-loader', options: { sassOptions: { silenceDeprecations: ['legacy-js-api'] } } },
             { loader: path.resolve(__dirname, 'loader/sass-rtl-loader.js')}
           ]
         },
diff --git a/handsontable/AGENTS.md b/handsontable/AGENTS.md
index 4c648513a84..b40c10ac7be 100644
--- a/handsontable/AGENTS.md
+++ b/handsontable/AGENTS.md
@@ -52,8 +52,8 @@ For server-backed grids (`dataProvider` with `fetchRows` and CRUD callbacks), en
 - ALL `it()` callbacks in spec files MUST be `async`
 - HOT API calls MUST be `await`-ed
 - E2E helpers are globals (no imports): `handsontable()`, `selectCell()`, `getDataAtCell()`, `createSpreadsheetData()`
-- Targeted unit: `npm run test:unit --testPathPattern=<regex>` (regex matched against file paths, e.g. `filters`, `ghostTable.unit`)
-- Targeted e2e: `npm run test:e2e --testPathPattern=<regex>` (e.g. `collapsibleColumns`, `textEditor`, `nestedHeaders/__tests__/hidingColumns`)
+- Targeted unit: `npm run test:unit --testPathPattern=<regex>` or `npm run test:unit -- --testPathPattern=<regex>` (regex matched against file paths, e.g. `filters`, `ghostTable.unit`)
+- Targeted e2e: `npm run test:e2e --testPathPattern=<regex>` or `npm run test:e2e -- --testPathPattern=<regex>` (e.g. `collapsibleColumns`, `textEditor`, `nestedHeaders/__tests__/hidingColumns`)
 - E2E with theme: `npm run test:e2e --testPathPattern=<regex> --theme=horizon` (themes: `classic`, `main`, `horizon`; default: `main`)
 - **Rebuild before E2E:** E2E runner loads `dist/handsontable.js` - rebuild after changing `src/`
 
@@ -112,6 +112,18 @@ npm run lint
 
 Two build variants: `handsontable.js` (base, external deps) and `handsontable.full.js` (includes HyperFormula). The E2E runner loads `dist/handsontable.js` - rebuild after changing `src/`.
 
+## Build and test scripts
+
+All `npm run` entries are thin shims that delegate to `scripts/run.mjs`. Task commands and pipeline dependency graphs live in `scripts/tasks.json` - edit that file to add, remove, or modify any build/lint/test step. The dispatcher supports three modes:
+
+```
+node scripts/run.mjs <task>                     # run one task
+node scripts/run.mjs --sequential <pipeline>    # run pipeline steps in order
+node scripts/run.mjs --parallel <pipeline>      # run pipeline with DAG scheduler (used by build)
+```
+
+Extra args after `--` flow through to tasks with `"passthrough": true` in `tasks.json`. `--testPathPattern=` and `--theme=` are also propagated as env vars to all pipeline tasks so the dump step and Puppeteer compute the same run-ID filename.
+
 ## For Deeper Guidance
 
 Use these skills for detailed workflow instructions:
diff --git a/handsontable/package.json b/handsontable/package.json
index dbc5132fa7b..8bb2fbcf837 100644
--- a/handsontable/package.json
+++ b/handsontable/package.json
@@ -17,61 +17,60 @@
   "jsdelivr": "dist/handsontable.full.min.js",
   "unpkg": "dist/handsontable.full.min.js",
   "scripts": {
-    "clean": "rimraf commonjs es coverage tmp tmp_styles",
-    "lint": "npm run build:styles && npm run eslint && npm run type-lint && npm run stylelint",
-    "lint:fix": "npm run build:styles && npm run eslint:fix && npm run stylelint:fix && npm run type-lint:fix",
-    "stylelint": "stylelint --cache \"src/**/*.{css,scss}\" \"test/**/*.{css,scss}\"",
-    "stylelint:fix": "stylelint --fix \"src/**/*.{css,scss}\" \"test/**/*.{css,scss}\"",
-    "eslint": "eslint --cache src/ test/ .config/plugin scripts/",
-    "eslint:fix": "eslint --fix src/ test/ .config/plugin scripts/",
-    "type-lint": "cd types && eslint \"./**/*.d.ts\" --config \"./.eslintrc.js\"",
-    "type-lint:fix": "cd types && eslint --fix \"./**/*.d.ts\" --config \"./.eslintrc.js\"",
-    "measure:module-sizes": "node scripts/measure-module-sizes.mjs",
-    "test": "npm run lint && npm run test:unit && npm run test:types && npm run test:walkontable && npm run test:e2e && npm run test:production",
-    "test.random": "npm run lint && npm run test:unit && npm run test:types && npm run test:walkontable.random && npm run test:e2e.random && npm run test:production.random",
-    "test:walkontable": "npm run build:walkontable && npm run test:walkontable.dump && npm run test:walkontable.puppeteer",
-    "test:walkontable.random": "npm run build:walkontable && npm run test:walkontable.dump && npm run test:walkontable.puppeteer -- --random",
-    "test:walkontable.watch": "node ./test/scripts/run-puppeteer-on-watchers-change.mjs --cmdToListen \"npm run build:walkontable -- --watch\" --cmdToListen \"npm run test:walkontable.dump -- --watch\" --runnerFile \"src/3rdparty/walkontable/test/SpecRunner.html\"",
-    "test:walkontable.dump": "cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-walkontable env-cmd -f ../hot.config.js rspack ./src/3rdparty/walkontable/test/helpers/index.js ./src/3rdparty/walkontable/test/spec/index.js",
-    "test:walkontable.puppeteer": "node test/scripts/run-puppeteer.mjs src/3rdparty/walkontable/test/SpecRunner.html",
-    "test:production": "npm run build:umd.min && npm run build:languages.min && npm run build:themes-umd.min && npm run test:production.dump && npm run test:e2e.puppeteer",
-    "test:production.random": "npm run build:umd.min && npm run build:languages.min && npm run build:themes-umd.min && npm run test:production.dump && npm run test:e2e.puppeteer -- --random",
-    "test:production.dump": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-production env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
-    "test:e2e": "npm run build:umd && npm run build:languages && npm run build:themes-umd && npm run test:e2e.dump && npm run test:e2e.puppeteer",
-    "test:e2e.random": "npm run build:umd && npm run build:languages && npm run build:themes-umd && npm run test:e2e.dump && npm run test:e2e.puppeteer -- --random",
-    "test:e2e.verbose": "npm run build:umd && npm run build:languages && npm run build:themes-umd && npm run test:e2e.dump && npm run test:e2e.puppeteer -- --verbose",
-    "test:e2e.watch": "node ./test/scripts/run-puppeteer-on-watchers-change.mjs --cmdToListen \"npm run watch\" --cmdToListen \"npm run test:e2e.dump -- --watch\"",
-    "test:e2e.dump": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-e2e env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
-    "test:e2e.dump.esm-cjs": "cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-e2e-esm-cjs env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
-    "test:e2e.puppeteer": "node test/scripts/run-puppeteer.mjs",
-    "test:unit": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs env-cmd -f ../hot.config.js jest --testPathPattern=${npm_config_testpathpattern:-.}",
-    "test:unit.watch": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs env-cmd -f ../hot.config.js jest --testPathPattern=${npm_config_testpathpattern:-.} --watch",
-    "test:mobile.dump": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-mobile env-cmd --no-override -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/mobile/index.js",
-    "test:types": "tsc -p ./test/types -t es2015",
-    "watch": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs NODE_ENV=watch env-cmd -f ../hot.config.js rspack --watch ./src/index.js",
-    "build": "npm run clean && node scripts/parallel-build.mjs",
-    "build:sequential": "npm run clean && npm run build:umd && npm run build:umd.min && npm run build:commonjs && npm run build:es && npm run build:languages && npm run build:languages.es && npm run build:languages.min && npm run build:themes-umd && npm run build:themes-umd.min",
-    "build:commonjs": "env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format commonjs --out-dir tmp",
-    "build:es": "npm run build:styles && env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm --out-dir tmp --out-ext .mjs",
-    "build:umd": "npm run build:all.styles && cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./src/index.js",
-    "build:umd-from-esm": "npm run build:all.styles && cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./tmp/index.mjs",
-    "build:umd-from-cjs": "npm run build:all.styles && cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./tmp/index.js",
-    "build:umd.min": "npm run build:all.styles.min && cross-env-shell BABEL_ENV=commonjs NODE_ENV=production env-cmd -f ../hot.config.js rspack ./src/index.js",
-    "build:all.styles": "npm run build:styles && npm run build:themes-css",
-    "build:all.styles.min": "npm run build:styles.min && npm run build:themes-css.min",
-    "build:styles": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-development env-cmd -f ../hot.config.js rspack",
-    "build:styles.min": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-production env-cmd -f ../hot.config.js rspack",
-    "build:themes-css": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-development env-cmd -f ../hot.config.js rspack",
-    "build:themes-css.min": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-production env-cmd -f ../hot.config.js rspack",
-    "build:themes-umd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-development env-cmd -f ../hot.config.js rspack",
-    "build:themes-umd.min": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-production env-cmd -f ../hot.config.js rspack",
-    "build:walkontable": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=walkontable env-cmd -f ../hot.config.js rspack ./src/3rdparty/walkontable/css/walkontable.scss ./src/3rdparty/walkontable/src/index.js",
-    "build:languages": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-development env-cmd -f ../hot.config.js rspack",
-    "build:languages.es": "env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm --src-dir src/i18n/languages --out-dir languages --out-ext .mjs --lang-registration",
-    "build:languages.min": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-production env-cmd -f ../hot.config.js rspack",
+    "clean": "node scripts/run.mjs clean",
+    "lint": "node scripts/run.mjs --parallel lint",
+    "lint:fix": "node scripts/run.mjs --sequential lint:fix",
+    "eslint": "node scripts/run.mjs lint:eslint",
+    "eslint:fix": "node scripts/run.mjs lint:eslint.fix",
+    "stylelint": "node scripts/run.mjs lint:stylelint",
+    "stylelint:fix": "node scripts/run.mjs lint:stylelint.fix",
+    "type-lint": "node scripts/run.mjs lint:types",
+    "type-lint:fix": "node scripts/run.mjs lint:types.fix",
+    "measure:module-sizes": "node scripts/run.mjs measure:module-sizes",
+    "test": "node scripts/run.mjs --sequential test",
+    "test.random": "node scripts/run.mjs --sequential test -- --random",
+    "test:walkontable": "node scripts/run.mjs --sequential test:walkontable",
+    "test:walkontable.random": "node scripts/run.mjs --sequential test:walkontable -- --random",
+    "test:walkontable.watch": "node scripts/run.mjs test:walkontable.watch",
+    "test:walkontable.dump": "node scripts/run.mjs test:walkontable.dump",
+    "test:walkontable.puppeteer": "node scripts/run.mjs test:walkontable.puppeteer",
+    "test:production": "node scripts/run.mjs --sequential test:production",
+    "test:production.random": "node scripts/run.mjs --sequential test:production -- --random",
+    "test:production.dump": "node scripts/run.mjs test:production.dump",
+    "test:e2e": "node scripts/run.mjs --sequential test:e2e",
+    "test:e2e.random": "node scripts/run.mjs --sequential test:e2e -- --random",
+    "test:e2e.verbose": "node scripts/run.mjs --sequential test:e2e -- --verbose",
+    "test:e2e.watch": "node scripts/run.mjs test:e2e.watch",
+    "test:e2e.dump": "node scripts/run.mjs test:e2e.dump",
+    "test:e2e.dump.esm-cjs": "node scripts/run.mjs test:e2e.dump.esm-cjs",
+    "test:e2e.puppeteer": "node scripts/run.mjs test:e2e.puppeteer",
+    "test:unit": "node scripts/run.mjs --sequential test:unit",
+    "test:unit.jest": "node scripts/run.mjs test:unit.jest",
+    "test:unit.watch": "node scripts/run.mjs --sequential test:unit -- --watch",
+    "test:mobile.dump": "node scripts/run.mjs test:mobile.dump",
+    "test:types": "node scripts/run.mjs test:types",
+    "watch": "node scripts/run.mjs --sequential watch",
+    "build": "node scripts/run.mjs --parallel build",
+    "postbuild": "node scripts/run.mjs prepare-package-for-publish",
+    "build:sequential": "node scripts/run.mjs --sequential build",
+    "build:commonjs": "node scripts/run.mjs build:commonjs",
+    "build:es": "node scripts/run.mjs build:es",
+    "build:umd": "node scripts/run.mjs build:umd",
+    "build:umd-from-esm": "node scripts/run.mjs build:umd-from-esm",
+    "build:umd-from-cjs": "node scripts/run.mjs build:umd-from-cjs",
+    "build:umd.min": "node scripts/run.mjs build:umd.min",
+    "build:styles": "node scripts/run.mjs build:styles",
+    "build:styles.min": "node scripts/run.mjs build:styles.min",
+    "build:themes-css": "node scripts/run.mjs build:themes-css",
+    "build:themes-css.min": "node scripts/run.mjs build:themes-css.min",
+    "build:themes-umd": "node scripts/run.mjs build:themes-umd",
+    "build:themes-umd.min": "node scripts/run.mjs build:themes-umd.min",
+    "build:walkontable": "node scripts/run.mjs build:walkontable",
+    "build:languages": "node scripts/run.mjs build:languages",
+    "build:languages.es": "node scripts/run.mjs build:languages.es",
+    "build:languages.min": "node scripts/run.mjs build:languages.min",
     "publish-package": "cd tmp && npm publish",
-    "create-package": "cd tmp && npm pack",
-    "postbuild": "node ./scripts/prepare-package-for-publish.mjs"
+    "create-package": "cd tmp && npm pack"
   },
   "keywords": [
     "data",
diff --git a/handsontable/scripts/parallel-build.mjs b/handsontable/scripts/parallel-build.mjs
deleted file mode 100644
index 6b8505b9bc4..00000000000
--- a/handsontable/scripts/parallel-build.mjs
+++ /dev/null
@@ -1,266 +0,0 @@
-/**
- * Parallel build orchestrator for Handsontable.
- * Runs build steps concurrently where the dependency graph allows.
- *
- * Usage: node scripts/parallel-build.mjs
- */
-import { spawn } from 'node:child_process';
-import { performance } from 'node:perf_hooks';
-import { resolve, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const ROOT = resolve(currentDir, '..');
-const BIN = resolve(ROOT, 'node_modules', '.bin');
-const PATH_SEP = process.platform === 'win32' ? ';' : ':';
-const envPATH = [BIN, resolve(ROOT, '..', 'node_modules', '.bin'), process.env.PATH].join(PATH_SEP);
-
-// Build task definitions: { cmd, deps }
-// eslint-disable-next-line quote-props
-const tasks = {
-  // Styles (no deps)
-  'styles': { // eslint-disable-line quote-props
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-development env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-  'styles.min': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-production env-cmd -f ../hot.config.js rspack',
-    deps: ['styles'], // must run after styles to avoid race on src/styles/handsontableStyles.js
-  },
-  'themes-css': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-development env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-  'themes-css.min': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-production env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-
-  // Transpilation builds (need styles.min to finalize handsontableStyles.js before reading src/)
-  'commonjs': { // eslint-disable-line quote-props
-    cmd: 'env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format commonjs --out-dir tmp',
-    deps: ['styles.min'],
-  },
-  'languages': { // eslint-disable-line quote-props
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-development env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-  'languages.es': {
-    cmd: 'env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm'
-      + ' --src-dir src/i18n/languages --out-dir languages --out-ext .mjs --lang-registration',
-    deps: [],
-  },
-  'languages.min': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-production env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-  'themes-umd': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-development env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-  'themes-umd.min': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-production env-cmd -f ../hot.config.js rspack',
-    deps: [],
-  },
-
-  // UMD builds (need styles + themes-css)
-  'umd': { // eslint-disable-line quote-props
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./src/index.js',
-    deps: ['styles', 'themes-css'],
-  },
-  'umd.min': {
-    cmd: 'cross-env-shell BABEL_ENV=commonjs NODE_ENV=production env-cmd -f ../hot.config.js rspack ./src/index.js',
-    deps: ['styles.min', 'themes-css.min'],
-  },
-
-  // ES module build (needs styles.min to finalize handsontableStyles.js)
-  'es': { // eslint-disable-line quote-props
-    cmd: 'env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm --out-dir tmp --out-ext .mjs',
-    deps: ['styles.min'],
-  },
-};
-
-/**
- * Spawn a build task and return a promise that resolves with timing info.
- *
- * @param {string} name Task name from the tasks map.
- * @returns {Promise<{name: string, elapsed: number}>} Resolves on success.
- */
-function runTask(name) {
-  return new Promise((taskResolve, taskReject) => {
-    const start = performance.now();
-    const child = spawn(tasks[name].cmd, [], {
-      cwd: ROOT,
-      env: { ...process.env, PATH: envPATH },
-      // We only read stderr for compact failure diagnostics.
-      // Keep stdout ignored to avoid deadlock if a child writes enough data
-      // to fill the pipe buffer while parent never consumes it.
-      stdio: ['ignore', 'ignore', 'pipe'],
-      shell: true,
-    });
-
-    let stderr = '';
-
-    child.stderr.on('data', (data) => {
-      stderr += data.toString();
-    });
-
-    child.on('close', (code) => {
-      const elapsed = Math.round(performance.now() - start);
-
-      if (code !== 0) {
-        // eslint-disable-next-line no-console
-        console.log(`  \x1b[31m✗\x1b[0m ${name} FAILED (${elapsed}ms)`);
-
-        if (stderr) {
-          // eslint-disable-next-line no-console
-          console.error(`    ${stderr.trim().split('\n').slice(-3).join('\n    ')}`);
-        }
-        taskReject(new Error(`${name} failed with code ${code}`));
-      } else {
-        // eslint-disable-next-line no-console
-        console.log(`  \x1b[32m✓\x1b[0m ${name} (${elapsed}ms)`);
-        taskResolve({ name, elapsed });
-      }
-    });
-  });
-}
-
-/**
- * Run all build tasks respecting the dependency graph with maximum parallelism.
- */
-async function build() {
-  const totalStart = performance.now();
-  const taskNames = Object.keys(tasks);
-  const completed = new Set();
-  const running = new Map(); // name -> Promise
-  const taskTimes = {};
-
-  // Validate the dependency graph up front: every `deps` entry must reference
-  // an existing task. A missing dep (typo, stale rename) would otherwise leave
-  // the dependent task permanently unready, the loop would break out with
-  // running.size === 0, and the build would falsely report success.
-  const unknownDeps = [];
-
-  taskNames.forEach((name) => {
-    tasks[name].deps.forEach((dep) => {
-      if (!Object.prototype.hasOwnProperty.call(tasks, dep)) {
-        unknownDeps.push(`${name} -> "${dep}"`);
-      }
-    });
-  });
-
-  if (unknownDeps.length > 0) {
-    throw new Error(
-      `Unknown task dependency(ies): ${unknownDeps.join(', ')}. `
-      + `Known tasks: ${taskNames.join(', ')}.`
-    );
-  }
-
-  // eslint-disable-next-line no-console
-  console.log('Building Handsontable (parallel)...\n');
-
-  while (completed.size < taskNames.length) {
-    // Find tasks that can start now
-    const ready = taskNames.filter(name =>
-      !completed.has(name) &&
-      !running.has(name) &&
-      tasks[name].deps.every(dep => completed.has(dep))
-    );
-
-    // Launch all ready tasks
-    ready.forEach((name) => {
-      const promise = runTask(name).then(
-        (result) => {
-          taskTimes[name] = result.elapsed;
-          completed.add(name);
-          running.delete(name);
-        },
-        (err) => {
-          running.delete(name);
-          throw err;
-        }
-      );
-
-      running.set(name, promise);
-    });
-
-    if (running.size === 0) {
-      // No ready task and nothing running, yet the completed set is short of
-      // every declared task. Upfront validation should prevent this, but guard
-      // against future cycles or logic bugs sneaking in -- a silent success
-      // here would ship an incomplete build.
-      const pending = taskNames.filter(n => !completed.has(n));
-
-      throw new Error(
-        `Build stalled: ${pending.length} task(s) never ran (${pending.join(', ')}). `
-        + 'Check the dependency graph for cycles or unresolved deps.'
-      );
-    }
-
-    // Wait for at least one running task to complete
-    try {
-      await Promise.race(running.values());
-    } catch (err) {
-      // Kill remaining tasks and exit
-      const totalElapsed = Math.round(performance.now() - totalStart);
-
-      // eslint-disable-next-line no-console
-      console.error(`\n\x1b[31mBuild failed after ${totalElapsed}ms\x1b[0m`);
-      process.exit(1);
-    }
-  }
-
-  const totalElapsed = Math.round(performance.now() - totalStart);
-
-  // eslint-disable-next-line no-console
-  console.log(`\n\x1b[32mBuild complete in ${totalElapsed}ms (${(totalElapsed / 1000).toFixed(1)}s)\x1b[0m`);
-
-  // Show critical path
-  /**
-   * Calculate the total time for a task including its dependency chain.
-   *
-   * @param {string} name Task name.
-   * @returns {number} Total path time in milliseconds.
-   */
-  function pathTime(name) {
-    const depMax = tasks[name].deps.length > 0
-      ? Math.max(...tasks[name].deps.map(pathTime))
-      : 0;
-
-    return (taskTimes[name] || 0) + depMax;
-  }
-
-  let maxTask = '';
-  let maxTime = 0;
-
-  taskNames.forEach((name) => {
-    const t = pathTime(name);
-
-    if (t > maxTime) {
-      maxTime = t;
-      maxTask = name;
-    }
-  });
-
-  const critPath = [];
-  let current = maxTask;
-
-  critPath.push(current);
-
-  while (tasks[current].deps.length > 0) {
-    const deps = tasks[current].deps;
-
-    current = deps.reduce((a, b) => (pathTime(a) > pathTime(b) ? a : b));
-    critPath.unshift(current);
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(`Critical path: ${critPath.join(' -> ')} (${maxTime}ms theoretical minimum)`);
-}
-
-build().catch((err) => {
-  // eslint-disable-next-line no-console
-  console.error(`\n\x1b[31m${err.message}\x1b[0m`);
-  process.exit(1);
-});
diff --git a/handsontable/scripts/run.mjs b/handsontable/scripts/run.mjs
new file mode 100644
index 00000000000..b5041b41b5f
--- /dev/null
+++ b/handsontable/scripts/run.mjs
@@ -0,0 +1,409 @@
+/**
+ * Unified build/test/lint dispatcher for Handsontable.
+ *
+ * All npm run scripts delegate to this file; task definitions live in tasks.json.
+ *
+ * Usage:
+ *   node scripts/run.mjs <task> [-- <extra-args>]
+ *   node scripts/run.mjs --parallel <pipeline> [-- <extra-args>]
+ *   node scripts/run.mjs --sequential <pipeline> [-- <extra-args>]
+ *
+ * Extra args after `--`:
+ *   --testPathPattern=<x>  propagated as env to all pipeline tasks (dump + puppeteer
+ *                          compute matching run IDs from the same env var)
+ *   --theme=<x>            same — propagated as env
+ *   anything else          appended to commands of tasks with "passthrough": true
+ */
+
+import { spawn } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import { performance } from 'node:perf_hooks';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { runStep, ParallelSpinner, isTTY } from './utils/run-step.mjs';
+import { runScheduled } from './utils/scheduler.mjs';
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(currentDir, '..');
+const BIN = resolve(ROOT, 'node_modules', '.bin');
+const PATH_SEP = process.platform === 'win32' ? ';' : ':';
+// On Windows PATH may be stored as 'Path' — fall back to avoid injecting the literal "undefined".
+const sysPath = process.env.PATH ?? process.env.Path ?? '';
+const envPATH = [BIN, resolve(ROOT, '..', 'node_modules', '.bin'), sysPath].join(PATH_SEP);
+
+// Load task registry.
+const registry = JSON.parse(readFileSync(resolve(currentDir, 'tasks.json'), 'utf-8'));
+const TASKS = registry.tasks;
+const PIPELINES = registry.pipelines;
+
+// --- Argument parsing ---
+
+const rawArgs = process.argv.slice(2);
+const separatorIdx = rawArgs.indexOf('--');
+const mainArgs = separatorIdx === -1 ? rawArgs : rawArgs.slice(0, separatorIdx);
+
+// Normalize space-separated flag values to --flag=value form so all downstream
+// code sees a consistent format. Only flags that take a value are listed here;
+// boolean flags (--watch, --random, --verbose) are left as-is.
+const FLAGS_WITH_VALUES = ['--testPathPattern', '--theme'];
+
+/**
+ * Normalizes space-separated flag values to `--flag=value` form.
+ * e.g. `--testPathPattern filters` → `--testPathPattern=filters`
+ *
+ * @param {string[]} args Raw argument array to normalize.
+ * @returns {string[]} Normalized argument array.
+ */
+function normalizeArgs(args) {
+  const result = [];
+
+  for (let i = 0; i < args.length; i += 1) {
+    if (FLAGS_WITH_VALUES.includes(args[i]) && i + 1 < args.length) {
+      result.push(`${args[i]}=${args[i + 1]}`);
+      i += 1;
+    } else {
+      result.push(args[i]);
+    }
+  }
+
+  return result;
+}
+
+const extraArgs = normalizeArgs(separatorIdx === -1 ? [] : rawArgs.slice(separatorIdx + 1));
+
+const isParallel = mainArgs[0] === '--parallel';
+const isSequential = mainArgs[0] === '--sequential';
+const pipelineName = (isParallel || isSequential) ? mainArgs[1] : null;
+// Normalize before filtering so space-separated `--flag value` pairs are joined
+// into `--flag=value` before the bare value token is discarded.
+const normalizedMain = normalizeArgs(mainArgs);
+// Filter flags out of taskNames: npm sometimes strips '--', landing flags in mainArgs.
+const taskNames = (isParallel || isSequential) ? [] : normalizedMain.filter(a => !a.startsWith('--'));
+
+// npm sometimes strips the '--' separator when forwarding `npm run cmd -- --flag`
+// extra args, so flags land in mainArgs past the task/pipeline position.
+// Recover them so `npm run task -- --flag` behaves the same as explicit argv.
+const mainFlagStart = pipelineName !== null ? 2 : taskNames.length;
+const recoveredFromMain = normalizedMain.slice(mainFlagStart).filter(a => a.startsWith('--'));
+
+// `npm run task --flag=val` (no '--') sets npm_config_* in env but never adds
+// to argv. Read those so unit tests behave like e2e (which reads env directly).
+const recoveredFromEnv = [];
+const envPattern = process.env.npm_config_testPathPattern || process.env.npm_config_testpathpattern;
+const envTheme = process.env.npm_config_theme;
+// Dedup against both extraArgs and recoveredFromMain to avoid double-passing a flag.
+const alreadyRecovered = [...extraArgs, ...recoveredFromMain];
+
+if (envPattern && !alreadyRecovered.some(a => a.startsWith('--testPathPattern='))) {
+  recoveredFromEnv.push(`--testPathPattern=${envPattern}`);
+}
+if (envTheme && !alreadyRecovered.some(a => a.startsWith('--theme='))) {
+  recoveredFromEnv.push(`--theme=${envTheme}`);
+}
+
+const allExtraArgs = [...extraArgs, ...recoveredFromMain, ...recoveredFromEnv];
+
+// Extract special env-propagated flags from all extra args.
+const patternArg = allExtraArgs.find(a => a.startsWith('--testPathPattern='));
+const themeArg = allExtraArgs.find(a => a.startsWith('--theme='));
+// testPathPattern and theme are propagated as env to all pipeline tasks so that
+// the dump step (rspack) and run-puppeteer.mjs compute the same run-ID filename.
+// For test:unit.jest, --testPathPattern= is also passed as argv (passthrough task),
+// which Jest accepts directly; puppeteer ignores the duplicate argv entry.
+// --verbose may appear anywhere in rawArgs: npm strips the '--' separator when
+// forwarding extra args so it lands in mainArgs, not extraArgs.
+const isVerbose = rawArgs.includes('--verbose');
+// Do NOT strip --verbose from passthroughFlags — puppeteer tasks list it in
+// their passthroughFilter and need it forwarded. buildCmd()'s passthroughFilter
+// already prevents it from reaching tasks that don't expect it (e.g. build tasks).
+const passthroughFlags = allExtraArgs;
+
+const propagatedEnv = {};
+
+if (patternArg) { propagatedEnv.npm_config_testpathpattern = patternArg.replace('--testPathPattern=', ''); }
+if (themeArg) { propagatedEnv.npm_config_theme = themeArg.replace('--theme=', ''); }
+
+// --- Task resolution ---
+
+/**
+ * @param {string} name Task name from tasks.json.
+ * @returns {object} Task definition.
+ */
+function resolveTask(name) {
+  const task = TASKS[name];
+
+  if (!task) {
+    // eslint-disable-next-line no-console
+    console.error(`\x1b[31mUnknown task: "${name}"\x1b[0m`);
+    // eslint-disable-next-line no-console
+    console.error(`Available tasks: ${Object.keys(TASKS).join(', ')}`);
+    process.exit(1);
+  }
+
+  return task;
+}
+
+/**
+ * @param {object} task Task definition from tasks.json.
+ * @param {string[]} flags Extra flags passed after `--`.
+ * @returns {string} Mode string: 'quiet' | 'inherit' | 'interactive'.
+ */
+function resolveMode(task, flags) {
+  if (task.mode === 'interactive' || (task.mode === 'inherit' && flags.includes('--watch'))) {
+    return 'interactive';
+  }
+
+  if (task.mode === 'inherit') { return 'inherit'; }
+
+  // Tasks with no explicit mode that forward --watch must use inherit so their stdout
+  // reaches concurrently's output stream — the watcher reads it to detect build-completion
+  // markers and trigger Puppeteer re-runs. Without this, output is piped and swallowed.
+  const forwardsWatch = Array.isArray(task.passthroughFilter) && task.passthroughFilter.includes('--watch');
+
+  if (flags.includes('--watch') && forwardsWatch) {
+    return 'inherit';
+  }
+
+  return 'quiet';
+}
+
+/**
+ * @param {object} task Task definition from tasks.json.
+ * @param {string[]} flags Extra flags to append when task has `passthrough: true`.
+ * @returns {string} Final shell command string.
+ */
+function buildCmd(task, flags) {
+  const base = task.cmd;
+  let effective = flags;
+
+  // passthroughFilter restricts which flags reach this task — e.g. test:unit.jest
+  // should receive --testPathPattern/--watch but not --random (which Jest rejects).
+  if (task.passthroughFilter && flags.length) {
+    effective = flags.filter(f =>
+      task.passthroughFilter.some(p => f === p || f.startsWith(`${p}=`))
+    );
+  }
+
+  const extra = (task.passthrough && effective.length) ? ` ${effective.join(' ')}` : '';
+
+  return `${base}${extra}`;
+}
+
+// --- Single task runner (sequential) ---
+
+/**
+ * @param {string} name Task name.
+ * @param {string[]} [extraFlags] Passthrough flags appended to the command.
+ * @param {object} [envOverride] Additional env vars for this invocation.
+ * @param {Set<string>} [visited] Tasks already executed in this run; shared
+ *   across recursive dep calls so shared deps are not re-executed.
+ * @returns {Promise<void>} Resolves on success, rejects on non-zero exit.
+ */
+async function runOne(name, extraFlags = [], envOverride = {}, visited = new Set()) {
+  // Deduplication: skip tasks already executed in this run.
+  // Without this, shared deps (e.g. build:styles) re-execute once per downstream
+  // task that has them in its dep chain, roughly doubling sequential build time.
+  if (visited.has(name)) {
+    return;
+  }
+
+  visited.add(name);
+
+  const task = resolveTask(name);
+  const mode = resolveMode(task, extraFlags);
+  const cmd = buildCmd(task, extraFlags);
+  const cwd = task.cwd ? resolve(ROOT, task.cwd) : ROOT;
+  // Inject node_modules/.bin so task cmds like `eslint`, `rimraf`, `rspack`
+  // resolve without requiring callers to prefix with npx or npm run.
+  const env = { PATH: envPATH, ...propagatedEnv, ...envOverride };
+
+  // For direct single-task invocations, resolve deps sequentially so that
+  // e.g. `npm run build:umd` automatically builds styles first.
+  // The parallel pipeline uses runParallelTask + the DAG scheduler instead
+  // and never goes through runOne, so this path does not affect it.
+  for (const dep of (task.deps ?? [])) {
+    // eslint-disable-next-line no-await-in-loop
+    await runOne(dep, [], envOverride, visited);
+  }
+
+  await runStep(cmd, {
+    cwd,
+    env,
+    forceInherit: mode === 'inherit',
+    interactive: mode === 'interactive',
+  });
+}
+
+// --- Parallel task runner (used by the scheduler for the build pipeline) ---
+
+/**
+ * @param {string} name Task name.
+ * @param {ParallelSpinner} spinner Spinner managing the parallel progress display.
+ * @returns {Promise<number>} Resolves with elapsed ms on success, rejects on failure.
+ */
+function runParallelTask(name, spinner) {
+  return new Promise((res, rej) => {
+    const task = resolveTask(name);
+    const cmd = buildCmd(task, passthroughFlags);
+    const cwd = task.cwd ? resolve(ROOT, task.cwd) : ROOT;
+    const start = performance.now();
+
+    // On Windows process.env may have 'Path' instead of 'PATH'. Delete it so
+    // our injected PATH is the only path-like key — Windows GetEnvironmentVariable
+    // picks the first case-insensitive match, which would otherwise be 'Path'.
+    const baseEnv = { ...process.env };
+
+    if (process.platform === 'win32') { delete baseEnv.Path; }
+
+    // In verbose mode use inherit so tools write directly to the terminal —
+    // many CLI tools (including rspack) suppress output when stdout is piped.
+    const stdio = isVerbose ? 'inherit' : ['ignore', 'pipe', 'pipe'];
+
+    const child = spawn(cmd, [], {
+      cwd,
+      env: { ...baseEnv, PATH: envPATH, NODE_NO_WARNINGS: '1', ...propagatedEnv },
+      stdio,
+      shell: true,
+    });
+
+    let combined = '';
+
+    if (!isVerbose) {
+      child.stdout.on('data', (d) => { combined += d.toString(); });
+      child.stderr.on('data', (d) => { combined += d.toString(); });
+    }
+
+    child.on('close', (code) => {
+      const elapsed = Math.round(performance.now() - start);
+
+      if (code !== 0) {
+        spinner.finish(name, false, elapsed);
+
+        if (combined) {
+          const tail = combined.trim().split('\n').slice(-10).join('\n    ');
+
+          process.stderr.write(`\n    ${tail}\n`);
+        }
+        rej(new Error(`${name} failed with exit code ${code}`));
+      } else {
+        spinner.finish(name, true, elapsed);
+
+        // In CI (non-TTY) flush all captured output for log collectors.
+        // On TTY the spinner ✓ line is sufficient; use --verbose to see output.
+        if (!isVerbose && !isTTY && combined.trim()) {
+          process.stdout.write(`${combined.trimEnd()}\n`);
+        }
+
+        res(elapsed);
+      }
+    });
+
+    child.on('error', (err) => {
+      spinner.finish(name, false, 0);
+      rej(err);
+    });
+  });
+}
+
+// --- Pipeline runner ---
+
+/**
+ * @param {string} name Pipeline name from tasks.json.
+ * @param {boolean} parallel When true, uses the DAG scheduler; otherwise sequential.
+ * @returns {Promise<void>} Resolves when all pipeline steps complete.
+ */
+async function runPipeline(name, parallel) {
+  const pipeline = PIPELINES[name];
+
+  if (!pipeline) {
+    // eslint-disable-next-line no-console
+    console.error(`\x1b[31mUnknown pipeline: "${name}"\x1b[0m`);
+    // eslint-disable-next-line no-console
+    console.error(`Available pipelines: ${Object.keys(PIPELINES).join(', ')}`);
+    process.exit(1);
+  }
+
+  // before: sequential prerequisites (e.g. clean before build, build:styles before lint)
+  for (const step of (pipeline.before ?? [])) {
+    // before steps may be pipeline names (e.g. "lint" in "test") or task names
+    if (PIPELINES[step]) {
+      await runPipeline(step, false);
+    } else {
+      await runOne(step);
+    }
+  }
+
+  const tasks = pipeline.tasks ?? [];
+
+  if (parallel) {
+    // Build a subset of TASKS containing only the pipeline's tasks.
+    const subTasks = {};
+
+    tasks.forEach((t) => { subTasks[t] = TASKS[t] ?? { cmd: t, deps: [] }; });
+
+    const spinner = isVerbose ? { start: () => {}, finish: () => {} } : new ParallelSpinner();
+    const totalStart = performance.now();
+
+    try {
+      await runScheduled(subTasks, (taskName) => {
+        spinner.start(taskName);
+
+        return runParallelTask(taskName, spinner);
+      }, isTTY);
+    } catch (err) {
+      const totalElapsed = Math.round(performance.now() - totalStart);
+
+      // eslint-disable-next-line no-console
+      console.error(`\n\x1b[31mPipeline "${name}" failed after ${totalElapsed}ms\x1b[0m`);
+      process.exit(1);
+    }
+
+  } else {
+    // Sequential: run each item in order.
+    // Items may be pipeline names (e.g. "test:unit" inside "test") or task names.
+    // A single visited Set is shared across all items so shared deps run only once.
+    const visited = new Set();
+
+    for (const item of tasks) {
+      if (PIPELINES[item]) {
+        // eslint-disable-next-line no-await-in-loop
+        await runPipeline(item, false);
+      } else {
+        // eslint-disable-next-line no-await-in-loop
+        await runOne(item, passthroughFlags, {}, visited);
+      }
+    }
+  }
+
+  // after: sequential post-steps (e.g. prepare-package-for-publish after build)
+  for (const step of (pipeline.after ?? [])) {
+    if (PIPELINES[step]) {
+      // eslint-disable-next-line no-await-in-loop
+      await runPipeline(step, false);
+    } else {
+      // eslint-disable-next-line no-await-in-loop
+      await runOne(step);
+    }
+  }
+}
+
+// --- Entry point ---
+
+try {
+  if (pipelineName) {
+    await runPipeline(pipelineName, isParallel);
+  } else if (taskNames.length > 0) {
+    for (const name of taskNames) {
+      await runOne(name, passthroughFlags);
+    }
+  } else {
+    // eslint-disable-next-line no-console
+    console.error('Usage: node scripts/run.mjs <task|--parallel pipeline|--sequential pipeline> [-- flags]');
+    process.exit(1);
+  }
+} catch (err) {
+  // eslint-disable-next-line no-console
+  console.error(`\n\x1b[31m${err.message}\x1b[0m`);
+  process.exit(1);
+}
diff --git a/handsontable/scripts/tasks.json b/handsontable/scripts/tasks.json
new file mode 100644
index 00000000000..bc1dc007d15
--- /dev/null
+++ b/handsontable/scripts/tasks.json
@@ -0,0 +1,245 @@
+{
+  "tasks": {
+    "clean": {
+      "cmd": "rimraf commonjs es coverage tmp tmp_styles",
+      "deps": []
+    },
+    "prepare-package-for-publish": {
+      "cmd": "node scripts/prepare-package-for-publish.mjs",
+      "deps": []
+    },
+
+    "build:styles": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-development env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:styles.min": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=styles-production env-cmd -f ../hot.config.js rspack",
+      "deps": ["build:styles"],
+      "note": "must run after build:styles to avoid race on src/styles/handsontableStyles.js"
+    },
+    "build:themes-css": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-development env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:themes-css.min": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-css-production env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:commonjs": {
+      "cmd": "env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format commonjs --out-dir tmp",
+      "deps": ["build:styles.min"],
+      "note": "needs build:styles.min to finalize handsontableStyles.js before reading src/"
+    },
+    "build:languages": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-development env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:languages.es": {
+      "cmd": "env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm --src-dir src/i18n/languages --out-dir languages --out-ext .mjs --lang-registration",
+      "deps": []
+    },
+    "build:languages.min": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=languages-production env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:themes-umd": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-development env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:themes-umd.min": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=themes-umd-production env-cmd -f ../hot.config.js rspack",
+      "deps": []
+    },
+    "build:umd": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./src/index.js",
+      "deps": ["build:styles", "build:themes-css"]
+    },
+    "build:umd.min": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=production env-cmd -f ../hot.config.js rspack ./src/index.js",
+      "deps": ["build:styles.min", "build:themes-css.min"]
+    },
+    "build:es": {
+      "cmd": "env-cmd -f ../hot.config.js node scripts/swc-transpile.mjs --format esm --out-dir tmp --out-ext .mjs",
+      "deps": ["build:styles.min"],
+      "note": "needs build:styles.min to finalize handsontableStyles.js"
+    },
+    "build:walkontable": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=walkontable env-cmd -f ../hot.config.js rspack ./src/3rdparty/walkontable/css/walkontable.scss ./src/3rdparty/walkontable/src/index.js",
+      "deps": [],
+      "passthrough": true,
+      "passthroughFilter": ["--watch"]
+    },
+    "build:umd-from-esm": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./tmp/index.mjs",
+      "deps": ["build:styles", "build:themes-css"]
+    },
+    "build:umd-from-cjs": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=development env-cmd -f ../hot.config.js rspack ./tmp/index.js",
+      "deps": ["build:styles", "build:themes-css"]
+    },
+
+    "lint:eslint": {
+      "cmd": "eslint --cache src/ test/ .config/plugin scripts/",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "lint:eslint.fix": {
+      "cmd": "eslint --fix src/ test/ .config/plugin scripts/",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "lint:types": {
+      "cmd": "eslint \"./**/*.d.ts\" --config \"./.eslintrc.js\"",
+      "deps": [],
+      "cwd": "types",
+      "mode": "inherit"
+    },
+    "lint:types.fix": {
+      "cmd": "eslint --fix \"./**/*.d.ts\" --config \"./.eslintrc.js\"",
+      "deps": [],
+      "cwd": "types",
+      "mode": "inherit"
+    },
+    "lint:stylelint": {
+      "cmd": "stylelint --cache \"src/**/*.{css,scss}\" \"test/**/*.{css,scss}\"",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "lint:stylelint.fix": {
+      "cmd": "stylelint --fix \"src/**/*.{css,scss}\" \"test/**/*.{css,scss}\"",
+      "deps": [],
+      "mode": "inherit"
+    },
+
+    "test:unit.jest": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs env-cmd -f ../hot.config.js jest",
+      "deps": [],
+      "mode": "interactive",
+      "passthrough": true,
+      "passthroughFilter": ["--testPathPattern", "--watch", "--coverage"],
+      "note": "interactive gives Jest a real TTY so colors/progress work; passthroughFilter limits forwarded flags to Jest-understood args — blocks --random, --verbose, etc."
+    },
+    "test:types": {
+      "cmd": "tsc -p ./test/types -t es2015",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "test:e2e.dump": {
+      "cmd": "npm --silent run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-e2e env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
+      "deps": [],
+      "passthrough": true,
+      "passthroughFilter": ["--watch"]
+    },
+    "test:e2e.dump.esm-cjs": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-e2e-esm-cjs env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
+      "deps": []
+    },
+    "test:e2e.puppeteer": {
+      "cmd": "node test/scripts/run-puppeteer.mjs",
+      "deps": [],
+      "mode": "inherit",
+      "passthrough": true,
+      "passthroughFilter": ["--random", "--seed", "--verbose", "--hotVersion"]
+    },
+    "test:walkontable.dump": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-walkontable env-cmd -f ../hot.config.js rspack ./src/3rdparty/walkontable/test/helpers/index.js ./src/3rdparty/walkontable/test/spec/index.js",
+      "deps": [],
+      "passthrough": true,
+      "passthroughFilter": ["--watch"]
+    },
+    "test:walkontable.puppeteer": {
+      "cmd": "node test/scripts/run-puppeteer.mjs src/3rdparty/walkontable/test/SpecRunner.html",
+      "deps": [],
+      "mode": "inherit",
+      "passthrough": true,
+      "passthroughFilter": ["--random", "--seed", "--verbose", "--hotVersion"]
+    },
+    "test:production.dump": {
+      "cmd": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-production env-cmd -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/index.js",
+      "deps": []
+    },
+    "test:production.puppeteer": {
+      "cmd": "node test/scripts/run-puppeteer.mjs",
+      "deps": [],
+      "mode": "inherit",
+      "passthrough": true,
+      "passthroughFilter": ["--random", "--seed", "--verbose", "--hotVersion"]
+    },
+    "test:mobile.dump": {
+      "cmd": "npm run build:styles && cross-env-shell BABEL_ENV=commonjs_e2e NODE_ENV=test-mobile env-cmd --no-override -f ../hot.config.js rspack ./test/helpers/index.js ./test/e2e/mobile/index.js",
+      "deps": []
+    },
+    "test:e2e.watch": {
+      "cmd": "node ./test/scripts/run-puppeteer-on-watchers-change.mjs --cmdToListen \"npm run watch\" --cmdToListen \"npm run test:e2e.dump -- --watch\"",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "test:walkontable.watch": {
+      "cmd": "node ./test/scripts/run-puppeteer-on-watchers-change.mjs --cmdToListen \"npm run build:walkontable -- --watch\" --cmdToListen \"npm run test:walkontable.dump -- --watch\" --runnerFile \"src/3rdparty/walkontable/test/SpecRunner.html\"",
+      "deps": [],
+      "mode": "inherit"
+    },
+
+    "watch:rspack": {
+      "cmd": "cross-env-shell BABEL_ENV=commonjs NODE_ENV=watch env-cmd -f ../hot.config.js rspack --watch ./src/index.js",
+      "deps": [],
+      "mode": "inherit"
+    },
+    "measure:module-sizes": {
+      "cmd": "node scripts/measure-module-sizes.mjs",
+      "deps": [],
+      "mode": "inherit"
+    }
+  },
+
+  "pipelines": {
+    "build": {
+      "before": ["clean"],
+      "tasks": [
+        "build:styles",
+        "build:styles.min",
+        "build:themes-css",
+        "build:themes-css.min",
+        "build:commonjs",
+        "build:languages",
+        "build:languages.es",
+        "build:languages.min",
+        "build:themes-umd",
+        "build:themes-umd.min",
+        "build:umd",
+        "build:umd.min",
+        "build:es"
+      ]
+    },
+    "lint": {
+      "before": ["build:styles"],
+      "tasks": ["lint:eslint", "lint:types", "lint:stylelint"]
+    },
+    "lint:fix": {
+      "before": ["build:styles"],
+      "tasks": ["lint:eslint.fix", "lint:types.fix", "lint:stylelint.fix"]
+    },
+    "test:unit": {
+      "before": ["build:styles"],
+      "tasks": ["test:unit.jest"]
+    },
+    "test:e2e": {
+      "tasks": ["build:umd", "build:languages", "build:themes-umd", "test:e2e.dump", "test:e2e.puppeteer"]
+    },
+    "test:walkontable": {
+      "tasks": ["build:walkontable", "test:walkontable.dump", "test:walkontable.puppeteer"]
+    },
+    "test:production": {
+      "tasks": ["build:umd.min", "build:languages.min", "build:themes-umd.min", "test:production.dump", "test:production.puppeteer"]
+    },
+    "test": {
+      "before": ["lint"],
+      "tasks": ["test:unit", "test:types", "test:walkontable", "test:e2e", "test:production"]
+    },
+    "watch": {
+      "before": ["build:styles"],
+      "tasks": ["watch:rspack"]
+    }
+  }
+}
diff --git a/handsontable/scripts/utils/run-step.mjs b/handsontable/scripts/utils/run-step.mjs
new file mode 100644
index 00000000000..43d01294e55
--- /dev/null
+++ b/handsontable/scripts/utils/run-step.mjs
@@ -0,0 +1,250 @@
+// TTY-aware spawn helper for build/test wrapper scripts.
+//
+// On TTY (quiet steps):   suppress output, show spinner after 50ms, print ✓/✗.
+// On TTY (inherit steps): pipe output through Node so spinner clears before first
+//                         output line; show ✓ if the command exits silently.
+// On CI/non-TTY:          inherit all stdio — full output flows through unchanged.
+//
+// For parallel tasks, use ParallelSpinner to render one spinner line per running
+// task using ANSI cursor movement.  Falls back gracefully on non-TTY.
+
+import { spawn } from 'node:child_process';
+import { performance } from 'node:perf_hooks';
+
+// HOT_QUIET=1 lets parent processes (e.g. the watch watcher) signal that child
+// scripts should suppress output even when concurrently breaks the TTY pipe.
+export const isTTY = process.stdout.isTTY || process.env.HOT_QUIET === '1';
+
+const SUPPRESS_ENV = {
+  NODE_NO_WARNINGS: '1',
+};
+
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const INDICATOR_DELAY_MS = 80;
+const INDICATOR_INTERVAL_MS = 80;
+
+/**
+ * @param {string} cmd Shell command string.
+ * @returns {string} Human-readable label with npm prefix stripped.
+ */
+function labelOf(cmd) {
+  return cmd
+    .replace(/^npm --silent run /, '')
+    .replace(/^npm run /, '')
+    .trim();
+}
+
+/**
+ * Spawn a shell command with TTY-aware output suppression and progress indicator.
+ *
+ * @param {string} cmd Full shell command string to execute.
+ * @param {{ forceInherit?: boolean, interactive?: boolean, cwd?: string, env?: object, label?: string }} [opts]
+ *   forceInherit: show command output (linters, Puppeteer) with spinner while waiting.
+ *   interactive: full stdio pass-through for tools that need a real TTY (Jest --watch).
+ *                No spinner — output flows directly and keyboard input is forwarded.
+ *   cwd: working directory (defaults to process.cwd()).
+ *   env: extra env vars merged on top of process.env and SUPPRESS_ENV.
+ *   label: display name for the spinner/result line (defaults to cmd with npm prefix stripped).
+ * @returns {Promise<void>} Rejects with an Error on non-zero exit.
+ */
+export function runStep(cmd, opts = {}) {
+  const quiet = isTTY && !opts.forceInherit && !opts.interactive;
+  const label = opts.label ?? labelOf(cmd);
+
+  return new Promise((resolve, reject) => {
+    const start = performance.now();
+    let frame = 0;
+    let indicatorActive = false;
+    let delayTimer = null;
+    let spinTimer = null;
+    let hasOutput = false;
+
+    // --- spinner ---
+
+    const startSpinner = () => {
+      if (!isTTY || opts.interactive) { return; }
+      delayTimer = setTimeout(() => {
+        indicatorActive = true;
+        spinTimer = setInterval(() => {
+          process.stdout.write(`\r  \x1b[36m${SPINNER[frame % SPINNER.length]}\x1b[0m ${label}`);
+          frame += 1;
+        }, INDICATOR_INTERVAL_MS);
+      }, INDICATOR_DELAY_MS);
+    };
+
+    const stopIndicator = () => {
+      clearTimeout(delayTimer);
+
+      if (spinTimer) {
+        clearInterval(spinTimer);
+        spinTimer = null;
+      }
+      if (indicatorActive) {
+        process.stdout.write('\r\x1b[K');
+        indicatorActive = false;
+      }
+    };
+
+    // --- stdio ---
+
+    // interactive: full pass-through so tools like Jest --watch get a real TTY.
+    // TTY (non-interactive): pipe so we can intercept output for the spinner.
+    // CI/non-TTY: inherit directly — Node buffering would break streaming output.
+    const stdio = opts.interactive || !isTTY
+      ? 'inherit'
+      : ['ignore', 'pipe', 'pipe'];
+
+    startSpinner();
+
+    // On Windows process.env may have 'Path' instead of 'PATH'. Remove it so
+    // the caller-supplied PATH (in opts.env) is the only path-like key in the
+    // env block — Windows GetEnvironmentVariable picks the first case-insensitive
+    // match, which would otherwise be the original 'Path', ignoring our injection.
+    const baseEnv = { ...process.env };
+
+    if (process.platform === 'win32') { delete baseEnv.Path; }
+
+    const child = spawn(cmd, [], {
+      cwd: opts.cwd ?? process.cwd(),
+      env: { ...baseEnv, ...SUPPRESS_ENV, ...opts.env },
+      stdio,
+      shell: true,
+    });
+
+    // --- output handling (TTY only) ---
+
+    let stderr = '';
+
+    if (isTTY && !opts.interactive) {
+      const onData = (destination, data) => {
+        if (!hasOutput) {
+          hasOutput = true;
+          stopIndicator(); // clear spinner before first line of real output
+        }
+        if (!quiet) {
+          destination.write(data); // forceInherit: forward to terminal
+        } else if (destination === process.stderr) {
+          stderr += data.toString(); // quiet: capture stderr
+        }
+      };
+
+      child.stdout.on('data', data => onData(process.stdout, data));
+      child.stderr.on('data', data => onData(process.stderr, data));
+    }
+
+    // --- completion ---
+
+    child.on('close', (code) => {
+      stopIndicator();
+      const elapsed = Math.round(performance.now() - start);
+
+      if (code !== 0) {
+        if (quiet) {
+          process.stdout.write(`  \x1b[31m✗\x1b[0m ${label} (${elapsed}ms)\n`);
+
+          if (stderr) {
+            const tail = stderr.trim().split('\n').slice(-3).join('\n    ');
+
+            process.stderr.write(`\n    ${tail}\n`);
+          }
+        }
+        reject(new Error(`Step failed (exit ${code}): ${cmd}`));
+      } else {
+        // Show ✓ for quiet steps, and for inherit steps that produced no output
+        // (e.g. eslint passing cleanly — no output means no news is good news).
+        if (quiet || !hasOutput) {
+          process.stdout.write(`  \x1b[32m✓\x1b[0m ${label} (${elapsed}ms)\n`);
+        }
+        resolve();
+      }
+    });
+
+    child.on('error', (err) => {
+      stopIndicator();
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Multi-line spinner for parallel builds.
+ *
+ * Usage:
+ *   const spinner = new ParallelSpinner();
+ *   spinner.start('task-a');
+ *   spinner.start('task-b');
+ *   spinner.finish('task-a', true, 1200);
+ *   spinner.stop();   // clears any remaining lines
+ *
+ * On non-TTY each event is printed as a plain line (no ANSI cursor movement).
+ */
+export class ParallelSpinner {
+  #active = new Map(); // name → {frame, startMs}
+  #timer = null;
+  #lineCount = 0;
+
+  start(name) {
+    this.#active.set(name, { frame: 0, startMs: performance.now() });
+
+    if (!isTTY) {
+      // eslint-disable-next-line no-console
+      console.log(`  \x1b[36m…\x1b[0m ${name}`);
+
+      return;
+    }
+
+    if (!this.#timer) {
+      this.#timer = setInterval(() => this.#render(), INDICATOR_INTERVAL_MS);
+    }
+
+    this.#render();
+  }
+
+  finish(name, ok, elapsed) {
+    const mark = ok ? '\x1b[32m✓\x1b[0m' : '\x1b[31m✗\x1b[0m';
+
+    if (!isTTY) {
+      // eslint-disable-next-line no-console
+      console.log(`  ${mark} ${name} (${elapsed}ms)`);
+      this.#active.delete(name);
+
+      return;
+    }
+
+    this.#active.delete(name);
+    this.#clear();
+    process.stdout.write(`  ${mark} ${name} (${elapsed}ms)\n`);
+    this.#render();
+
+    if (this.#active.size === 0) { this.stop(); }
+  }
+
+  stop() {
+    if (this.#timer) {
+      clearInterval(this.#timer);
+      this.#timer = null;
+    }
+
+    this.#clear();
+  }
+
+  #clear() {
+    if (!isTTY || this.#lineCount === 0) { return; }
+    // Move up and erase each spinner line.
+    process.stdout.write(('\x1b[1A\x1b[K').repeat(this.#lineCount));
+    this.#lineCount = 0;
+  }
+
+  #render() {
+    if (!isTTY || this.#active.size === 0) { return; }
+    this.#clear();
+
+    for (const [name, state] of this.#active) {
+      const spin = SPINNER[state.frame % SPINNER.length];
+
+      state.frame += 1;
+      process.stdout.write(`  \x1b[36m${spin}\x1b[0m ${name}\n`);
+      this.#lineCount += 1;
+    }
+  }
+}
diff --git a/handsontable/scripts/utils/scheduler.mjs b/handsontable/scripts/utils/scheduler.mjs
new file mode 100644
index 00000000000..058d913741c
--- /dev/null
+++ b/handsontable/scripts/utils/scheduler.mjs
@@ -0,0 +1,113 @@
+/**
+ * DAG-based parallel task scheduler.
+ *
+ * Runs tasks concurrently where the dependency graph allows, serializes
+ * where it does not.  Caller supplies a `runTask(name)` callback that
+ * returns a Promise; the scheduler handles ordering, progress tracking,
+ * and critical-path reporting.
+ *
+ * @param {object} tasks       Task definitions from tasks.json (name → {cmd, deps, …}).
+ * @param {Function} runTask   `(name: string) => Promise<void>` — spawn and resolve.
+ * @param {boolean} [isTTY]    When false (CI), prints critical-path summary after build.
+ * @returns {Promise<void>}    Resolves when all tasks complete; rejects on first failure.
+ */
+export async function runScheduled(tasks, runTask, isTTY = process.stdout.isTTY) {
+  const taskNames = Object.keys(tasks);
+
+  // Validate: every dep must reference a known task.
+  const unknownDeps = [];
+
+  taskNames.forEach((name) => {
+    (tasks[name].deps ?? []).forEach((dep) => {
+      if (!Object.prototype.hasOwnProperty.call(tasks, dep)) {
+        unknownDeps.push(`${name} -> "${dep}"`);
+      }
+    });
+  });
+
+  if (unknownDeps.length > 0) {
+    throw new Error(
+      `Unknown task dependency(ies): ${unknownDeps.join(', ')}. `
+      + `Known tasks: ${taskNames.join(', ')}.`
+    );
+  }
+
+  const completed = new Set();
+  const running = new Map(); // name → Promise
+  const taskTimes = {};
+
+  while (completed.size < taskNames.length) {
+    const ready = taskNames.filter(name =>
+      !completed.has(name) &&
+      !running.has(name) &&
+      (tasks[name].deps ?? []).every(dep => completed.has(dep))
+    );
+
+    ready.forEach((name) => {
+      const promise = runTask(name).then(
+        (elapsed) => {
+          taskTimes[name] = typeof elapsed === 'number' ? elapsed : 0;
+          completed.add(name);
+          running.delete(name);
+        },
+        (err) => {
+          running.delete(name);
+          throw err;
+        }
+      );
+
+      running.set(name, promise);
+    });
+
+    if (running.size === 0) {
+      const pending = taskNames.filter(n => !completed.has(n));
+
+      throw new Error(
+        `Build stalled: ${pending.length} task(s) never ran (${pending.join(', ')}). `
+        + 'Check the dependency graph for cycles or unresolved deps.'
+      );
+    }
+
+    await Promise.race(running.values());
+  }
+
+  // Critical-path analysis — CI-only diagnostic.
+  if (!isTTY) {
+    /**
+     * Total wall-clock time for a task including its longest dependency chain.
+     *
+     * @param {string} name Task name.
+     * @returns {number} Accumulated path time in milliseconds.
+     */
+    const pathTime = (name) => {
+      const deps = tasks[name].deps ?? [];
+      const depMax = deps.length > 0 ? Math.max(...deps.map(pathTime)) : 0;
+
+      return (taskTimes[name] || 0) + depMax;
+    };
+
+    let maxTask = '';
+    let maxTime = 0;
+
+    taskNames.forEach((name) => {
+      const t = pathTime(name);
+
+      if (t > maxTime) { maxTime = t; maxTask = name; }
+    });
+
+    const critPath = [];
+    let current = maxTask;
+
+    critPath.push(current);
+
+    while ((tasks[current].deps ?? []).length > 0) {
+      const deps = tasks[current].deps;
+
+      current = deps.reduce((a, b) => (pathTime(a) > pathTime(b) ? a : b));
+      critPath.unshift(current);
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Critical path: ${critPath.join(' -> ')} (${maxTime}ms theoretical minimum)`);
+  }
+}
diff --git a/handsontable/src/3rdparty/walkontable/src/core/_base.js b/handsontable/src/3rdparty/walkontable/src/core/_base.js
index a3cc5181383..56da2eb0989 100644
--- a/handsontable/src/3rdparty/walkontable/src/core/_base.js
+++ b/handsontable/src/3rdparty/walkontable/src/core/_base.js
@@ -333,7 +333,7 @@ export default class CoreAbstract {
         return wot.wtTable; // TODO refactoring: it provides itself
       },
       get startColumnRendered() {
-        return wot.wtViewport.columnsRenderCalculator.startColumn;
+        return wot.wtViewport.columnsRenderCalculator?.startColumn ?? null;
       },
       get startColumnVisible() {
         return wot.wtViewport.columnsVisibleCalculator.startColumn;
@@ -342,7 +342,7 @@ export default class CoreAbstract {
         return wot.wtViewport.columnsPartiallyVisibleCalculator.startColumn;
       },
       get endColumnRendered() {
-        return wot.wtViewport.columnsRenderCalculator.endColumn;
+        return wot.wtViewport.columnsRenderCalculator?.endColumn ?? null;
       },
       get endColumnVisible() {
         return wot.wtViewport.columnsVisibleCalculator.endColumn;
@@ -351,13 +351,13 @@ export default class CoreAbstract {
         return wot.wtViewport.columnsPartiallyVisibleCalculator.endColumn;
       },
       get countColumnsRendered() {
-        return wot.wtViewport.columnsRenderCalculator.count;
+        return wot.wtViewport.columnsRenderCalculator?.count ?? 0;
       },
       get countColumnsVisible() {
         return wot.wtViewport.columnsVisibleCalculator.count;
       },
       get startRowRendered() {
-        return wot.wtViewport.rowsRenderCalculator.startRow;
+        return wot.wtViewport.rowsRenderCalculator?.startRow ?? null;
       },
       get startRowVisible() {
         return wot.wtViewport.rowsVisibleCalculator.startRow;
@@ -366,7 +366,7 @@ export default class CoreAbstract {
         return wot.wtViewport.rowsPartiallyVisibleCalculator.startRow;
       },
       get endRowRendered() {
-        return wot.wtViewport.rowsRenderCalculator.endRow;
+        return wot.wtViewport.rowsRenderCalculator?.endRow ?? null;
       },
       get endRowVisible() {
         return wot.wtViewport.rowsVisibleCalculator.endRow;
@@ -375,7 +375,7 @@ export default class CoreAbstract {
         return wot.wtViewport.rowsPartiallyVisibleCalculator.endRow;
       },
       get countRowsRendered() {
-        return wot.wtViewport.rowsRenderCalculator.count;
+        return wot.wtViewport.rowsRenderCalculator?.count ?? 0;
       },
       get countRowsVisible() {
         return wot.wtViewport.rowsVisibleCalculator.count;
diff --git a/handsontable/src/3rdparty/walkontable/src/overlay/_base.js b/handsontable/src/3rdparty/walkontable/src/overlay/_base.js
index 40da4a540a5..3600bb267e2 100644
--- a/handsontable/src/3rdparty/walkontable/src/overlay/_base.js
+++ b/handsontable/src/3rdparty/walkontable/src/overlay/_base.js
@@ -202,11 +202,19 @@ export class Overlay {
    */
   getRelativeCellPositionWithinWindow(onFixedRowTop, onFixedColumn, elementOffset, spreaderOffset) {
     const absoluteRootElementPosition = this.wot.wtTable.wtRootElement.getBoundingClientRect(); // todo refactoring: DEMETER
+    // `preventOverflow` can force this overlay onto the window (see `makeClone()`) while the
+    // master still scrolls its holder. `wtRootElement` does not move with that scroll, so
+    // subtract the master scroll from spreader-based offsets to align with the visible cell (#10403).
+    const masterScrollsHolder = this.wot.wtOverlays.scrollableElement !== this.domBindings.rootWindow;
+    const tableScrollPosition = {
+      horizontal: masterScrollsHolder ? this.wot.wtOverlays.inlineStartOverlay.getScrollPosition() : 0,
+      vertical: masterScrollsHolder ? this.wot.wtOverlays.topOverlay.getScrollPosition() : 0,
+    };
     let horizontalOffset = 0;
     let verticalOffset = 0;
 
     if (!onFixedColumn) {
-      horizontalOffset = spreaderOffset.start;
+      horizontalOffset = spreaderOffset.start - tableScrollPosition.horizontal;
 
     } else {
       let absoluteRootElementStartPosition = absoluteRootElementPosition.left;
@@ -225,7 +233,7 @@ export class Overlay {
       verticalOffset = absoluteOverlayPosition.top - absoluteRootElementPosition.top;
 
     } else {
-      verticalOffset = spreaderOffset.top;
+      verticalOffset = spreaderOffset.top - tableScrollPosition.vertical;
     }
 
     return {
diff --git a/handsontable/src/3rdparty/walkontable/src/viewport.js b/handsontable/src/3rdparty/walkontable/src/viewport.js
index bc7b12560e9..e71df380b9f 100644
--- a/handsontable/src/3rdparty/walkontable/src/viewport.js
+++ b/handsontable/src/3rdparty/walkontable/src/viewport.js
@@ -487,7 +487,7 @@ class Viewport {
    *                    Returns `false` if at least one proposed visible row is not already rendered (meaning: redraw is needed).
    */
   areAllProposedVisibleRowsAlreadyRendered(proposedFullyVisibleRowsCalculator, proposedPartiallyVisibleRowsCalculator) {
-    if (!this.rowsVisibleCalculator) {
+    if (!this.rowsVisibleCalculator || !this.rowsRenderCalculator) {
       return false;
     }
 
@@ -553,7 +553,7 @@ class Viewport {
     proposedFullyVisibleColumnsCalculator,
     proposedPartiallyVisibleColumnsCalculator
   ) {
-    if (!this.columnsVisibleCalculator) {
+    if (!this.columnsVisibleCalculator || !this.columnsRenderCalculator) {
       return false;
     }
 
diff --git a/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedColumn.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedColumn.spec.js
index a4902b35ef7..09541d53565 100644
--- a/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedColumn.spec.js
+++ b/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedColumn.spec.js
@@ -156,5 +156,43 @@ describe('WalkontableTable', () => {
 
       expect(wt.wtTable.getFirstRenderedColumn()).toBe(4);
     });
+
+    it('should return -1 without throwing when the table is initialized inside a hidden container', async() => {
+      createDataArray(18, 18);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // draw() is interrupted because the container is hidden — columnsRenderCalculator stays undefined
+      wt.draw();
+
+      // should return -1 instead of throwing "can't access property 'startColumn', columnsRenderCalculator is undefined"
+      expect(wt.wtTable.getFirstRenderedColumn()).toBe(-1);
+    });
+
+    it('should not throw when draw(fastDraw=true) is called after the container becomes visible for the first time', async() => {
+      createDataArray(18, 18);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // Initial draw is interrupted — columnsRenderCalculator is never set
+      wt.draw();
+
+      // Container becomes visible (e.g. accordion opens)
+      spec().$wrapper.css('display', '');
+
+      // draw(true) must not throw even though columnsRenderCalculator was undefined
+      expect(() => wt.draw(true)).not.toThrow();
+      expect(wt.wtTable.getFirstRenderedColumn()).toBe(0);
+    });
   });
 });
diff --git a/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedRow.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedRow.spec.js
index 70ccbbad649..bf80f6054ae 100644
--- a/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedRow.spec.js
+++ b/handsontable/src/3rdparty/walkontable/test/spec/table/getFirstRenderedRow.spec.js
@@ -178,5 +178,45 @@ describe('WalkontableTable', () => {
       expectWtTable(wt, wtTable => wtTable.getFirstRenderedRow(), 'master').toBe(0);
       expectWtTable(wt, wtTable => wtTable.getFirstRenderedRow(), 'bottom').toBe(0);
     });
+
+    it('should return -1 without throwing when the table is initialized inside a hidden container', async() => {
+      createDataArray(18, 4);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // draw() is interrupted because the container is hidden — rowsRenderCalculator stays undefined
+      wt.draw();
+
+      // should return -1 instead of throwing "can't access property 'startRow', rowsRenderCalculator is undefined"
+      expect(wt.wtTable.getFirstRenderedRow()).toBe(-1);
+    });
+
+    it('should not throw when draw(fastDraw=true) is called after the container becomes visible for the first time', async() => {
+      createDataArray(18, 4);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // Initial draw is interrupted — rowsRenderCalculator is never set
+      wt.draw();
+
+      // Container becomes visible (e.g. accordion opens)
+      spec().$wrapper.css('display', '');
+
+      // draw(true) must not throw even though rowsRenderCalculator was undefined;
+      // the guard in areAllProposedVisibleRowsAlreadyRendered forces a full redraw,
+      // which sets rowsRenderCalculator and recovers correctly
+      expect(() => wt.draw(true)).not.toThrow();
+      expect(wt.wtTable.getFirstRenderedRow()).toBe(0);
+    });
   });
 });
diff --git a/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedColumnsCount.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedColumnsCount.spec.js
index a2af4e7afb5..c73b91e2ae5 100644
--- a/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedColumnsCount.spec.js
+++ b/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedColumnsCount.spec.js
@@ -92,6 +92,44 @@ describe('WalkontableTable', () => {
       expectWtTable(wt, wtTable => wtTable.getRenderedColumnsCount(), 'top').toBe(3);
     });
 
+    it('should return 0 without throwing when the table is initialized inside a hidden container', async() => {
+      createDataArray(18, 18);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // draw() is interrupted because the container is hidden — columnsRenderCalculator stays undefined
+      wt.draw();
+
+      // should return 0 instead of throwing "can't access property 'count', columnsRenderCalculator is undefined"
+      expect(wt.wtTable.getRenderedColumnsCount()).toBe(0);
+    });
+
+    it('should return correct count after draw(fastDraw=true) is called once the container becomes visible', async() => {
+      createDataArray(18, 18);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // Initial draw is interrupted — columnsRenderCalculator is never set
+      wt.draw();
+
+      // Container becomes visible (e.g. accordion opens)
+      spec().$wrapper.css('display', '');
+
+      // draw(true) must not throw and must set columnsRenderCalculator
+      expect(() => wt.draw(true)).not.toThrow();
+      expect(wt.wtTable.getRenderedColumnsCount()).toBeGreaterThan(0);
+    });
+
     it('should return columns count only for fully visible columns', async() => {
       createDataArray(18, 18);
       spec().$wrapper.width(209).height(185);
diff --git a/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedRowsCount.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedRowsCount.spec.js
index bd465584a7b..70a23dd8c03 100644
--- a/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedRowsCount.spec.js
+++ b/handsontable/src/3rdparty/walkontable/test/spec/table/getRenderedRowsCount.spec.js
@@ -92,6 +92,44 @@ describe('WalkontableTable', () => {
       expectWtTable(wt, wtTable => wtTable.getRenderedRowsCount(), 'top').toBe(2);
     });
 
+    it('should return 0 without throwing when the table is initialized inside a hidden container', async() => {
+      createDataArray(18, 4);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // draw() is interrupted because the container is hidden — rowsRenderCalculator stays undefined
+      wt.draw();
+
+      // should return 0 instead of throwing "can't access property 'count', rowsRenderCalculator is undefined"
+      expect(wt.wtTable.getRenderedRowsCount()).toBe(0);
+    });
+
+    it('should return correct count after draw(fastDraw=true) is called once the container becomes visible', async() => {
+      createDataArray(18, 4);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // Initial draw is interrupted — rowsRenderCalculator is never set
+      wt.draw();
+
+      // Container becomes visible (e.g. accordion opens)
+      spec().$wrapper.css('display', '');
+
+      // draw(true) must not throw and must set rowsRenderCalculator
+      expect(() => wt.draw(true)).not.toThrow();
+      expect(wt.wtTable.getRenderedRowsCount()).toBeGreaterThan(0);
+    });
+
     it('should return rows count only for fully visible rows', async() => {
       createDataArray(18, 18);
       spec().$wrapper.width(209).height(185);
diff --git a/handsontable/src/3rdparty/walkontable/test/spec/viewport.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/viewport.spec.js
index b69eb2aa91d..c09569f5e05 100644
--- a/handsontable/src/3rdparty/walkontable/test/spec/viewport.spec.js
+++ b/handsontable/src/3rdparty/walkontable/test/spec/viewport.spec.js
@@ -417,4 +417,35 @@ describe('WalkontableViewport', () => {
       expect(wt.wtViewport.hasHorizontalScroll()).toBe(true);
     });
   });
+
+  describe('hidden container initialization', () => {
+    it('should not throw when draw(fastDraw=true) is called after container transitions from hidden to visible', async() => {
+      createDataArray(18, 18);
+      spec().$wrapper.width(250).height(170).css('display', 'none');
+
+      const wt = walkontable({
+        data: getData,
+        totalRows: getTotalRows,
+        totalColumns: getTotalColumns,
+      });
+
+      // draw() is interrupted — rowsRenderCalculator and columnsRenderCalculator stay undefined
+      wt.draw();
+
+      expect(wt.wtViewport.rowsRenderCalculator).toBeUndefined();
+      expect(wt.wtViewport.columnsRenderCalculator).toBeUndefined();
+
+      // Simulate accordion/tab opening: container becomes visible
+      spec().$wrapper.css('display', '');
+
+      // draw(true) triggers areAllProposedVisibleRowsAlreadyRendered() and
+      // areAllProposedVisibleColumnsAlreadyRendered() — both must not throw despite
+      // rowsRenderCalculator / columnsRenderCalculator being undefined;
+      // the guards force a full redraw which sets both calculators
+      expect(() => wt.draw(true)).not.toThrow();
+
+      expect(wt.wtViewport.rowsRenderCalculator).toBeDefined();
+      expect(wt.wtViewport.columnsRenderCalculator).toBeDefined();
+    });
+  });
 });
diff --git a/handsontable/src/plugins/dialog/dialog.js b/handsontable/src/plugins/dialog/dialog.js
index 571a0f16b49..cce520b6fcb 100644
--- a/handsontable/src/plugins/dialog/dialog.js
+++ b/handsontable/src/plugins/dialog/dialog.js
@@ -372,7 +372,8 @@ export class Dialog extends BasePlugin {
       this.hot.view.render();
       this.#selectionState = null;
     } else {
-      this.hot.selectCell(0, 0);
+      this.hot.view.render();
+      this.#selectionState = null;
     }
 
     this.hot.runHooks('afterDialogHide');
diff --git a/handsontable/src/plugins/loading/__tests__/options/hide.spec.js b/handsontable/src/plugins/loading/__tests__/options/hide.spec.js
index a4c6cef106e..5666d749254 100644
--- a/handsontable/src/plugins/loading/__tests__/options/hide.spec.js
+++ b/handsontable/src/plugins/loading/__tests__/options/hide.spec.js
@@ -39,4 +39,80 @@ describe('Loading - hide method', () => {
 
     expect(loadingPlugin.isVisible()).toBe(false);
   });
+
+  it('should preserve scroll position when hiding the loading overlay with no prior cell selection', async() => {
+    handsontable({
+      data: createSpreadsheetData(100, 5),
+      height: 300,
+      width: 400,
+      loading: true,
+    });
+
+    await scrollViewportTo({ row: 50, verticalSnap: 'top' });
+
+    const firstVisibleRow = getFirstFullyVisibleRow();
+
+    expect(getSelected()).toBeUndefined();
+
+    const loadingPlugin = getPlugin('loading');
+
+    loadingPlugin.show();
+    loadingPlugin.hide();
+
+    expect(getFirstFullyVisibleRow()).toBe(firstVisibleRow);
+  });
+
+  it('should preserve scroll position when hiding the loading overlay after updateData() with no prior cell selection', async() => {
+    const initialData = createSpreadsheetData(50, 5);
+    const moreData = createSpreadsheetData(100, 5);
+
+    handsontable({
+      data: initialData,
+      height: 300,
+      width: 400,
+      loading: true,
+    });
+
+    await scrollViewportTo({ row: 30, verticalSnap: 'top' });
+
+    const firstVisibleRow = getFirstFullyVisibleRow();
+
+    expect(getSelected()).toBeUndefined();
+
+    const loadingPlugin = getPlugin('loading');
+
+    loadingPlugin.show();
+    await updateData(moreData);
+    loadingPlugin.hide();
+
+    expect(getFirstFullyVisibleRow()).toBe(firstVisibleRow);
+  });
+
+  it('should preserve scroll position across repeated show/hide cycles with no prior cell selection', async() => {
+    handsontable({
+      data: createSpreadsheetData(100, 5),
+      height: 300,
+      width: 400,
+      loading: true,
+    });
+
+    await scrollViewportTo({ row: 50, verticalSnap: 'top' });
+
+    const firstVisibleRow = getFirstFullyVisibleRow();
+
+    expect(getSelected()).toBeUndefined();
+
+    const loadingPlugin = getPlugin('loading');
+
+    // First cycle (simulates first data load)
+    loadingPlugin.show();
+    loadingPlugin.hide();
+
+    // Second cycle (simulates second data load - was scrolling to row 0)
+    loadingPlugin.show();
+    loadingPlugin.hide();
+
+    expect(getFirstFullyVisibleRow()).toBe(firstVisibleRow);
+    expect(getSelected()).toBeUndefined();
+  });
 });
diff --git a/handsontable/src/plugins/manualColumnResize/__tests__/manualColumnResize.spec.js b/handsontable/src/plugins/manualColumnResize/__tests__/manualColumnResize.spec.js
index 609526497b5..3ba8838a952 100644
--- a/handsontable/src/plugins/manualColumnResize/__tests__/manualColumnResize.spec.js
+++ b/handsontable/src/plugins/manualColumnResize/__tests__/manualColumnResize.spec.js
@@ -1400,4 +1400,57 @@ describe('manualColumnResize', () => {
       expect(getTopClone().find('table').width()).toBe(getMaster().find('table').width());
     });
   });
+
+  describe('with `preventOverflow: \'horizontal\'`', () => {
+    it('should position the resize handle at the visible column header right edge after horizontal scroll (#10403)', async() => {
+      handsontable({
+        data: createSpreadsheetData(5, 20),
+        colHeaders: true,
+        manualColumnResize: true,
+        preventOverflow: 'horizontal',
+        width: 400,
+        height: 200,
+      });
+
+      await scrollViewportHorizontally(300);
+      await waitForNextAnimationFrames(2);
+
+      const $headerTH = getTopClone().find('thead tr:eq(0) th:eq(8)');
+
+      $headerTH.simulate('mouseover');
+
+      const $handle = $('.manualColumnResizer');
+
+      expect($handle.offset().left)
+        .toEqual($headerTH.offset().left + $headerTH.outerWidth() - ($handle.outerWidth() / 2) - 1);
+    });
+
+    it('should resize a column by dragging the handle after horizontal scroll (#10403)', async() => {
+      handsontable({
+        data: createSpreadsheetData(5, 20),
+        colHeaders: true,
+        manualColumnResize: true,
+        preventOverflow: 'horizontal',
+        width: 400,
+        height: 200,
+      });
+
+      await scrollViewportHorizontally(300);
+      await waitForNextAnimationFrames(2);
+
+      const $headerTH = getTopClone().find('thead tr:eq(0) th:eq(8)');
+      const initialWidth = $headerTH.outerWidth();
+
+      $headerTH.simulate('mouseover');
+
+      const $handle = $('.manualColumnResizer');
+      const handleOffset = $handle.offset();
+
+      $handle.simulate('mousedown', { clientX: handleOffset.left });
+      $handle.simulate('mousemove', { clientX: handleOffset.left + 30 });
+      $handle.simulate('mouseup');
+
+      expect(colWidth(spec().$container, 8)).toBe(initialWidth + 30);
+    });
+  });
 });
diff --git a/handsontable/src/plugins/manualColumnResize/__tests__/rtl/manualColumnResize.spec.js b/handsontable/src/plugins/manualColumnResize/__tests__/rtl/manualColumnResize.spec.js
index 2d91f50cd28..d5b0cc1cdcd 100644
--- a/handsontable/src/plugins/manualColumnResize/__tests__/rtl/manualColumnResize.spec.js
+++ b/handsontable/src/plugins/manualColumnResize/__tests__/rtl/manualColumnResize.spec.js
@@ -150,6 +150,30 @@ describe('manualColumnResize (RTL)', () => {
 
         expect($handle.css('z-index')).toBeGreaterThan(getTopClone().css('z-index'));
       });
+
+      it('should position the resize handle at the visible column header start edge after horizontal scroll with `preventOverflow: \'horizontal\'` (#10403)', async() => {
+        handsontable({
+          layoutDirection,
+          data: createSpreadsheetData(5, 20),
+          colHeaders: true,
+          manualColumnResize: true,
+          preventOverflow: 'horizontal',
+          width: 400,
+          height: 200,
+        });
+
+        await scrollViewportHorizontally(300);
+        await waitForNextAnimationFrames(2);
+
+        const $headerTH = getTopClone().find('thead tr:eq(0) th:eq(8)');
+
+        $headerTH.simulate('mouseover');
+
+        const $handle = $('.manualColumnResizer');
+
+        expect($handle.offset().left)
+          .toEqual($headerTH.offset().left - ($handle.outerWidth() / 2) + 1);
+      });
     });
   });
 });
diff --git a/handsontable/src/plugins/manualRowResize/__tests__/manualRowResize.spec.js b/handsontable/src/plugins/manualRowResize/__tests__/manualRowResize.spec.js
index 34122c2126a..1c1b8aeadae 100644
--- a/handsontable/src/plugins/manualRowResize/__tests__/manualRowResize.spec.js
+++ b/handsontable/src/plugins/manualRowResize/__tests__/manualRowResize.spec.js
@@ -1273,4 +1273,59 @@ describe('manualRowResize', () => {
       expect(getInlineStartClone().find('table').height()).toBe(getMaster().find('table').height());
     });
   });
+
+  describe('with `preventOverflow: \'vertical\'`', () => {
+    it('should position the resize handle at the visible row header bottom edge after vertical scroll (#10403)', async() => {
+      handsontable({
+        data: createSpreadsheetData(50, 5),
+        rowHeaders: true,
+        manualRowResize: true,
+        preventOverflow: 'vertical',
+        width: 200,
+        height: 300,
+      });
+
+      await scrollViewportVertically(150);
+      await waitForNextAnimationFrames(2);
+
+      const $headerTH = getInlineStartClone().find('tbody tr:eq(8) th:eq(0)');
+
+      $headerTH.simulate('mouseover');
+
+      const $handle = spec().$container.find('.manualRowResizer');
+
+      expect($headerTH.offset().top + $headerTH.height() - 5).toBeCloseTo($handle.offset().top, 0);
+      expect($headerTH.offset().left).toBeCloseTo($handle.offset().left, 0);
+    });
+
+    it('should resize a row by dragging the handle after vertical scroll (#10403)', async() => {
+      handsontable({
+        data: createSpreadsheetData(50, 5),
+        rowHeaders: true,
+        manualRowResize: true,
+        preventOverflow: 'vertical',
+        width: 200,
+        height: 300,
+      });
+
+      await scrollViewportVertically(150);
+      await waitForNextAnimationFrames(2);
+
+      const $headerTH = getInlineStartClone().find('tbody tr:eq(8) th:eq(0)');
+      const initialHeight = $headerTH.outerHeight();
+
+      $headerTH.simulate('mouseover');
+
+      const $handle = spec().$container.find('.manualRowResizer');
+      const handleOffset = $handle.offset();
+
+      $handle.simulate('mousedown', { clientY: handleOffset.top });
+      $handle.simulate('mousemove', { clientY: handleOffset.top + 20 });
+      $handle.simulate('mouseup');
+
+      const cellCoords = hot().view._wt.wtTable.getCoords($headerTH[0]);
+
+      expect(hot().getRowHeight(cellCoords.row)).toBe(initialHeight + 20);
+    });
+  });
 });
diff --git a/handsontable/src/plugins/mergeCells/__tests__/cellsCollection.unit.js b/handsontable/src/plugins/mergeCells/__tests__/cellsCollection.unit.js
index a1f460c7c28..88f382786d2 100644
--- a/handsontable/src/plugins/mergeCells/__tests__/cellsCollection.unit.js
+++ b/handsontable/src/plugins/mergeCells/__tests__/cellsCollection.unit.js
@@ -558,6 +558,162 @@ describe('MergeCells', () => {
       });
     });
 
+    describe('static `detectContiguousRuns` method', () => {
+      it('should return an empty array for an empty input', () => {
+        expect(MergedCellsCollection.detectContiguousRuns([])).toEqual([]);
+      });
+
+      it('should return a single run for a single index', () => {
+        expect(MergedCellsCollection.detectContiguousRuns([5])).toEqual([
+          { start: 5, length: 1 },
+        ]);
+      });
+
+      it('should detect a single contiguous run', () => {
+        expect(MergedCellsCollection.detectContiguousRuns([2, 3, 4])).toEqual([
+          { start: 2, length: 3 },
+        ]);
+      });
+
+      it('should split into runs at gaps', () => {
+        expect(MergedCellsCollection.detectContiguousRuns([0, 3, 4])).toEqual([
+          { start: 0, length: 1 },
+          { start: 3, length: 2 },
+        ]);
+      });
+
+      it('should handle three separated runs', () => {
+        expect(MergedCellsCollection.detectContiguousRuns([0, 2, 4, 5])).toEqual([
+          { start: 0, length: 1 },
+          { start: 2, length: 1 },
+          { start: 4, length: 2 },
+        ]);
+      });
+    });
+
+    describe('`capturePhysicalSpans` method', () => {
+      it('should map every merge to its visual->physical column indexes', () => {
+        const hot = {
+          ...hotMock,
+          toPhysicalColumn: visualIndex => visualIndex + 100,
+          toPhysicalRow: visualIndex => visualIndex,
+        };
+        const collection = new MergedCellsCollection({ hot });
+
+        collection.add({ row: 0, col: 2, rowspan: 1, colspan: 3 });
+        collection.add({ row: 4, col: 7, rowspan: 2, colspan: 1 });
+
+        const snapshot = collection.capturePhysicalSpans('column');
+
+        expect(snapshot.size).toBe(2);
+        expect(snapshot.get(collection.mergedCells[0])).toEqual([102, 103, 104]);
+        expect(snapshot.get(collection.mergedCells[1])).toEqual([107]);
+      });
+
+      it('should map every merge to its visual->physical row indexes', () => {
+        const hot = {
+          ...hotMock,
+          toPhysicalColumn: visualIndex => visualIndex,
+          toPhysicalRow: visualIndex => visualIndex + 200,
+        };
+        const collection = new MergedCellsCollection({ hot });
+
+        collection.add({ row: 3, col: 0, rowspan: 2, colspan: 1 });
+
+        const snapshot = collection.capturePhysicalSpans('row');
+
+        expect(snapshot.size).toBe(1);
+        expect(snapshot.get(collection.mergedCells[0])).toEqual([203, 204]);
+      });
+    });
+
+    describe('`translateAfterAxisMove` method', () => {
+      function createHot(physicalToVisual) {
+        return {
+          ...hotMock,
+          toVisualColumn: physical => (physicalToVisual.has(physical) ? physicalToVisual.get(physical) : -1),
+          toPhysicalColumn: visual => visual,
+          toVisualRow: physical => (physicalToVisual.has(physical) ? physicalToVisual.get(physical) : -1),
+          toPhysicalRow: visual => visual,
+        };
+      }
+
+      it('should keep a merge intact when its physical span stays contiguous', () => {
+        const collection = new MergedCellsCollection({
+          hot: createHot(new Map([[2, 3], [3, 4], [4, 5]])),
+        });
+
+        collection.add({ row: 0, col: 2, rowspan: 1, colspan: 3 });
+
+        const snapshot = new Map();
+
+        snapshot.set(collection.mergedCells[0], [2, 3, 4]);
+
+        collection.translateAfterAxisMove('column', snapshot);
+
+        expect(collection.mergedCells.length).toBe(1);
+        expect(collection.mergedCells[0].col).toBe(3);
+        expect(collection.mergedCells[0].colspan).toBe(3);
+        expect(collection.mergedCells[0].rowspan).toBe(1);
+      });
+
+      it('should split a merge whose physical span becomes non-contiguous', () => {
+        const collection = new MergedCellsCollection({
+          hot: createHot(new Map([[2, 3], [3, 0], [4, 4]])),
+        });
+
+        collection.add({ row: 0, col: 2, rowspan: 2, colspan: 3 });
+
+        const snapshot = new Map();
+
+        snapshot.set(collection.mergedCells[0], [2, 3, 4]);
+
+        collection.translateAfterAxisMove('column', snapshot);
+
+        const sorted = collection.mergedCells.slice().sort((a, b) => a.col - b.col);
+
+        expect(sorted.length).toBe(2);
+        expect(sorted[0].col).toBe(0);
+        expect(sorted[0].colspan).toBe(1);
+        expect(sorted[0].rowspan).toBe(2);
+        expect(sorted[1].col).toBe(3);
+        expect(sorted[1].colspan).toBe(2);
+        expect(sorted[1].rowspan).toBe(2);
+      });
+
+      it('should drop fragments that collapse to a single cell', () => {
+        const collection = new MergedCellsCollection({
+          hot: createHot(new Map([[2, 5], [3, 1]])),
+        });
+
+        collection.add({ row: 0, col: 2, rowspan: 1, colspan: 2 });
+
+        const snapshot = new Map();
+
+        snapshot.set(collection.mergedCells[0], [2, 3]);
+
+        collection.translateAfterAxisMove('column', snapshot);
+
+        expect(collection.mergedCells.length).toBe(0);
+      });
+
+      it('should drop a merge whose physical indexes are all unmapped', () => {
+        const collection = new MergedCellsCollection({
+          hot: createHot(new Map()),
+        });
+
+        collection.add({ row: 0, col: 2, rowspan: 1, colspan: 2 });
+
+        const snapshot = new Map();
+
+        snapshot.set(collection.mergedCells[0], [2, 3]);
+
+        collection.translateAfterAxisMove('column', snapshot);
+
+        expect(collection.mergedCells.length).toBe(0);
+      });
+    });
+
     describe('`getBottomMostRowIndex` method', () => {
       it('should return bottom-most row index of where the merge cells are not intersected', () => {
         const mergedCellsCollection = new MergedCellsCollection({ hot: hotMock });
diff --git a/handsontable/src/plugins/mergeCells/__tests__/mergeCells.spec.js b/handsontable/src/plugins/mergeCells/__tests__/mergeCells.spec.js
index 900651d2e95..d8a1e6fbc54 100644
--- a/handsontable/src/plugins/mergeCells/__tests__/mergeCells.spec.js
+++ b/handsontable/src/plugins/mergeCells/__tests__/mergeCells.spec.js
@@ -120,6 +120,268 @@ describe('MergeCells', () => {
     });
   });
 
+  describe('manualColumnMove integration', () => {
+    it('should follow merged cells when columns are moved (issue #10437 repro)', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 6),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 4, rowspan: 3, colspan: 1 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(5, 4);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].row).toBe(0);
+      expect(merges[0].col).toBe(5);
+      expect(merges[0].rowspan).toBe(3);
+      expect(merges[0].colspan).toBe(1);
+    });
+
+    it('should shift a horizontal merge that is moved as a whole', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 8),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 2, rowspan: 1, colspan: 3 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumns([2, 3, 4], 0);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].row).toBe(0);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].colspan).toBe(3);
+    });
+
+    it('should auto-split a horizontal merge bisected by a column move (rowspan kept)', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 8),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 2, rowspan: 2, colspan: 3 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(3, 0);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells
+        .slice()
+        .sort((a, b) => a.col - b.col);
+
+      expect(merges.length).toBe(2);
+      expect(merges[0].row).toBe(0);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].rowspan).toBe(2);
+      expect(merges[0].colspan).toBe(1);
+      expect(merges[1].row).toBe(0);
+      expect(merges[1].col).toBe(3);
+      expect(merges[1].rowspan).toBe(2);
+      expect(merges[1].colspan).toBe(2);
+    });
+
+    it('should drop singleton fragments left after bisecting a colspan-only merge', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 8),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 2, rowspan: 1, colspan: 2 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(2, 6);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(0);
+    });
+
+    it('should follow merged cells when rows are moved', async() => {
+      handsontable({
+        data: createSpreadsheetData(6, 4),
+        manualRowMove: true,
+        mergeCells: [
+          { row: 4, col: 0, rowspan: 1, colspan: 3 },
+        ],
+      });
+
+      getPlugin('manualRowMove').moveRow(5, 4);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].row).toBe(5);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].rowspan).toBe(1);
+      expect(merges[0].colspan).toBe(3);
+    });
+
+    it('should auto-split a vertical merge bisected by a row move (colspan kept)', async() => {
+      handsontable({
+        data: createSpreadsheetData(8, 4),
+        manualRowMove: true,
+        mergeCells: [
+          { row: 2, col: 0, rowspan: 3, colspan: 2 },
+        ],
+      });
+
+      getPlugin('manualRowMove').moveRow(3, 0);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells
+        .slice()
+        .sort((a, b) => a.row - b.row);
+
+      expect(merges.length).toBe(2);
+      expect(merges[0].row).toBe(0);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].rowspan).toBe(1);
+      expect(merges[0].colspan).toBe(2);
+      expect(merges[1].row).toBe(3);
+      expect(merges[1].col).toBe(0);
+      expect(merges[1].rowspan).toBe(2);
+      expect(merges[1].colspan).toBe(2);
+    });
+
+    it('should restore merged cells after undoing a column move', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 6),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 4, rowspan: 3, colspan: 1 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(5, 4);
+      await render();
+
+      getPlugin('undoRedo').undo();
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].col).toBe(4);
+      expect(merges[0].colspan).toBe(1);
+      expect(merges[0].rowspan).toBe(3);
+    });
+
+    it('should reapply a column move via redo', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 6),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 4, rowspan: 3, colspan: 1 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(5, 4);
+      await render();
+      getPlugin('undoRedo').undo();
+      await render();
+      getPlugin('undoRedo').redo();
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].col).toBe(5);
+      expect(merges[0].colspan).toBe(1);
+      expect(merges[0].rowspan).toBe(3);
+    });
+
+    it('should not translate merges when the move is rejected (movePossible=false)', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 6),
+        manualColumnMove: true,
+        mergeCells: [
+          { row: 0, col: 4, rowspan: 1, colspan: 2 },
+        ],
+      });
+
+      // Out-of-bounds final index makes `movePossible` false.
+      getPlugin('manualColumnMove').moveColumn(4, 100);
+
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].col).toBe(4);
+      expect(merges[0].colspan).toBe(2);
+    });
+
+    it('should preserve user-declared merge coords through manualColumnMove initial config', async() => {
+      handsontable({
+        data: createSpreadsheetData(2, 4),
+        manualColumnMove: [1, 0, 2, 3],
+        mergeCells: [
+          { row: 0, col: 2, rowspan: 1, colspan: 2 },
+          { row: 1, col: 2, rowspan: 1, colspan: 2 },
+        ],
+      });
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(2);
+      expect(merges[0].col).toBe(2);
+      expect(merges[1].col).toBe(2);
+    });
+
+    it('should follow merges through column freeze', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 6),
+        manualColumnFreeze: true,
+        mergeCells: [
+          { row: 0, col: 4, rowspan: 2, colspan: 1 },
+        ],
+      });
+
+      getPlugin('manualColumnFreeze').freezeColumn(4);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].colspan).toBe(1);
+      expect(merges[0].rowspan).toBe(2);
+    });
+
+    it('should keep a merge intact when an internal column move re-permutes its physical columns', async() => {
+      handsontable({
+        data: createSpreadsheetData(4, 8),
+        manualColumnMove: true,
+        hiddenColumns: { columns: [1] },
+        mergeCells: [
+          { row: 0, col: 0, rowspan: 1, colspan: 3 },
+        ],
+      });
+
+      getPlugin('manualColumnMove').moveColumn(2, 0);
+      await render();
+
+      const merges = getPlugin('mergeCells').mergedCellsCollection.mergedCells;
+
+      expect(merges.length).toBe(1);
+      expect(merges[0].row).toBe(0);
+      expect(merges[0].col).toBe(0);
+      expect(merges[0].rowspan).toBe(1);
+      expect(merges[0].colspan).toBe(3);
+    });
+  });
+
   describe('mergeCells updateSettings', () => {
     it('should allow to overwrite the initial settings using the updateSettings method', async() => {
       const hot = handsontable({
diff --git a/handsontable/src/plugins/mergeCells/cellsCollection.js b/handsontable/src/plugins/mergeCells/cellsCollection.js
index a0909c547e6..b32aa7b6d6a 100644
--- a/handsontable/src/plugins/mergeCells/cellsCollection.js
+++ b/handsontable/src/plugins/mergeCells/cellsCollection.js
@@ -516,6 +516,139 @@ class MergedCellsCollection {
     });
   }
 
+  /**
+   * Capture the physical indexes covered by every merged cell along an axis.
+   *
+   * Used by the manual row/column move and column freeze integrations to translate
+   * merges through a reorder: the captured spans pin each merge to the underlying
+   * data so the merge can be repositioned (and split, if a non-contiguous run
+   * results) after the visual sequence changes.
+   *
+   * @param {'column' | 'row'} axis Which axis the upcoming reorder targets.
+   * @returns {Map<MergedCellCoords, number[]>} Map of merge -> physical indexes along the axis.
+   */
+  capturePhysicalSpans(axis) {
+    const isColumn = axis === 'column';
+    const indexProp = isColumn ? 'col' : 'row';
+    const spanProp = isColumn ? 'colspan' : 'rowspan';
+    const toPhysical = isColumn
+      ? visualIndex => this.hot.toPhysicalColumn(visualIndex)
+      : visualIndex => this.hot.toPhysicalRow(visualIndex);
+    const snapshot = new Map();
+
+    this.mergedCells.forEach((merge) => {
+      const physicals = [];
+
+      for (let i = 0; i < merge[spanProp]; i++) {
+        physicals.push(toPhysical(merge[indexProp] + i));
+      }
+
+      snapshot.set(merge, physicals);
+    });
+
+    return snapshot;
+  }
+
+  /**
+   * Group an ascending list of integers into contiguous runs.
+   *
+   * @param {number[]} sortedAscending Already-sorted ascending visual indexes.
+   * @returns {Array<{ start: number, length: number }>}
+   */
+  static detectContiguousRuns(sortedAscending) {
+    if (sortedAscending.length === 0) {
+      return [];
+    }
+
+    const runs = [];
+    let runStart = sortedAscending[0];
+    let runLength = 1;
+
+    for (let i = 1; i < sortedAscending.length; i++) {
+      if (sortedAscending[i] === sortedAscending[i - 1] + 1) {
+        runLength += 1;
+      } else {
+        runs.push({ start: runStart, length: runLength });
+        runStart = sortedAscending[i];
+        runLength = 1;
+      }
+    }
+
+    runs.push({ start: runStart, length: runLength });
+
+    return runs;
+  }
+
+  /**
+   * Translate the merged cells collection after a manual row/column reorder, splitting
+   * merges whose physical indexes are no longer contiguous in the new visual order.
+   *
+   * Note: single-cell fragments (`colspan === 1 && rowspan === 1`) are dropped because
+   * they no longer represent a merge. The user-facing behavior (auto-split + silent drop
+   * of singletons) is documented in `docs/content/guides/cell-features/merge-cells/merge-cells.md`
+   * under "Behavior during row/column reorder and column freeze".
+   *
+   * @param {'column' | 'row'} axis Axis that was reordered.
+   * @param {Map<MergedCellCoords, number[]>} snapshot Snapshot taken before the reorder.
+   */
+  translateAfterAxisMove(axis, snapshot) {
+    const isColumn = axis === 'column';
+    const indexProp = isColumn ? 'col' : 'row';
+    const spanProp = isColumn ? 'colspan' : 'rowspan';
+    const otherIndexProp = isColumn ? 'row' : 'col';
+    const otherSpanProp = isColumn ? 'rowspan' : 'colspan';
+    const toVisual = isColumn
+      ? physicalIndex => this.hot.toVisualColumn(physicalIndex)
+      : physicalIndex => this.hot.toVisualRow(physicalIndex);
+    const replacements = [];
+
+    this.mergedCells.forEach((merge) => {
+      const physicals = snapshot.get(merge);
+
+      if (!physicals) {
+        replacements.push({
+          row: merge.row,
+          col: merge.col,
+          rowspan: merge.rowspan,
+          colspan: merge.colspan,
+        });
+
+        return;
+      }
+
+      const newVisuals = physicals
+        .map(toVisual)
+        .filter(visualIndex => visualIndex !== null && visualIndex >= 0)
+        .sort((a, b) => a - b);
+
+      if (newVisuals.length === 0) {
+        return;
+      }
+
+      MergedCellsCollection.detectContiguousRuns(newVisuals).forEach((run) => {
+        const replacement = {
+          [indexProp]: run.start,
+          [spanProp]: run.length,
+          [otherIndexProp]: merge[otherIndexProp],
+          [otherSpanProp]: merge[otherSpanProp],
+        };
+
+        if (replacement.colspan === 1 && replacement.rowspan === 1) {
+          return;
+        }
+
+        replacements.push(replacement);
+      });
+    });
+
+    this.mergedCells.length = 0;
+    this.mergedCellsMatrix.clear();
+
+    replacements.forEach((info) => {
+      this.add(info, true);
+    });
+  }
+
   /**
    * Adds a merged cell to the matrix.
    *
diff --git a/handsontable/src/plugins/mergeCells/mergeCells.js b/handsontable/src/plugins/mergeCells/mergeCells.js
index 0b8136898cd..33641826d49 100644
--- a/handsontable/src/plugins/mergeCells/mergeCells.js
+++ b/handsontable/src/plugins/mergeCells/mergeCells.js
@@ -147,6 +147,27 @@ export class MergeCells extends BasePlugin {
    * @type {{before: Function, after: Function}}
    */
   #cellRenderer = createMergeCellRenderer(this);
+  /**
+   * Snapshot of physical column indexes per merge, captured before a column move/freeze.
+   *
+   * @type {Map<MergedCellCoords, number[]> | null}
+   */
+  #columnMoveSnapshot = null;
+  /**
+   * Snapshot of physical row indexes per merge, captured before a row move.
+   *
+   * @type {Map<MergedCellCoords, number[]> | null}
+   */
+  #rowMoveSnapshot = null;
+  /**
+   * `true` once the plugin has finished its initial settings ingestion. Used to skip
+   * snapshot/translate during the bootstrap-time column reorders fired by
+   * `manualColumnMove: [...]` initial config, where the merge collection is empty
+   * anyway but we want to be defensive against future hook-order changes.
+   *
+   * @type {boolean}
+   */
+  #initialized = false;
 
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
@@ -195,6 +216,14 @@ export class MergeCells extends BasePlugin {
     this.addHook('afterRemoveCol', (...args) => this.#onAfterRemoveCol(...args));
     this.addHook('afterCreateRow', (...args) => this.#onAfterCreateRow(...args));
     this.addHook('afterRemoveRow', (...args) => this.#onAfterRemoveRow(...args));
+    this.addHook('beforeColumnMove', (...args) => this.#onBeforeColumnMove(...args));
+    this.addHook('afterColumnMove', (...args) => this.#onAfterColumnMove(...args));
+    this.addHook('beforeRowMove', (...args) => this.#onBeforeRowMove(...args));
+    this.addHook('afterRowMove', (...args) => this.#onAfterRowMove(...args));
+    this.addHook('beforeColumnFreeze', (...args) => this.#onBeforeColumnFreeze(...args));
+    this.addHook('afterColumnFreeze', (...args) => this.#onAfterColumnFreeze(...args));
+    this.addHook('beforeColumnUnfreeze', (...args) => this.#onBeforeColumnFreeze(...args));
+    this.addHook('afterColumnUnfreeze', (...args) => this.#onAfterColumnFreeze(...args));
     this.addHook('afterChange', (...args) => this.#onAfterChange(...args));
     this.addHook('beforeDrawBorders', (...args) => this.#onBeforeDrawAreaBorders(...args));
     this.addHook('afterDrawSelection', (...args) => this.#onAfterDrawSelection(...args));
@@ -219,6 +248,7 @@ export class MergeCells extends BasePlugin {
     this.clearCollections();
     this.unregisterShortcuts();
     this.hot.render();
+    this.#initialized = false;
     super.disablePlugin();
   }
 
@@ -234,6 +264,7 @@ export class MergeCells extends BasePlugin {
     this.enablePlugin();
 
     this.generateFromSettings();
+    this.#initialized = true;
 
     super.updatePlugin();
   }
@@ -599,6 +630,7 @@ export class MergeCells extends BasePlugin {
   #onAfterInit() {
     this.generateFromSettings();
     this.hot.render();
+    this.#initialized = true;
   }
 
   /**
@@ -1353,6 +1385,129 @@ export class MergeCells extends BasePlugin {
     this.mergedCellsCollection.shiftCollections('up', row, count);
   }
 
+  /**
+   * `beforeColumnMove` hook callback. Captures physical column positions of every merge
+   * so they can be translated onto the new visual order in `afterColumnMove`.
+   *
+   * @param {number[]} columns Visual column indexes being moved.
+   * @param {number} finalIndex Drop target visual index.
+   * @param {number} dropIndex Drop index from drag.
+   * @param {boolean} movePossible Whether the move is allowed.
+   */
+  #onBeforeColumnMove(columns, finalIndex, dropIndex, movePossible) {
+    if (!movePossible || !this.#initialized) {
+      this.#columnMoveSnapshot = null;
+
+      return;
+    }
+
+    this.#columnMoveSnapshot = this.mergedCellsCollection.capturePhysicalSpans('column');
+  }
+
+  /**
+   * `afterColumnMove` hook callback. Translates merges using the pre-move snapshot
+   * and the now-updated column index mapping. Auto-splits merges whose physical
+   * columns are no longer contiguous.
+   *
+   * @param {number[]} columns Visual column indexes that were moved.
+   * @param {number} finalIndex Drop target visual index.
+   * @param {number} dropIndex Drop index from drag.
+   * @param {boolean} movePossible Whether the move was allowed.
+   * @param {boolean} orderChanged Whether the move actually changed the order.
+   */
+  #onAfterColumnMove(columns, finalIndex, dropIndex, movePossible, orderChanged) {
+    const snapshot = this.#columnMoveSnapshot;
+
+    this.#columnMoveSnapshot = null;
+
+    if (!orderChanged || !snapshot) {
+      return;
+    }
+
+    this.mergedCellsCollection.translateAfterAxisMove('column', snapshot);
+    this.hot.render();
+  }
+
+  /**
+   * `beforeRowMove` hook callback. Captures physical row positions of every merge
+   * so they can be translated onto the new visual order in `afterRowMove`.
+   *
+   * @param {number[]} rows Visual row indexes being moved.
+   * @param {number} finalIndex Drop target visual index.
+   * @param {number} dropIndex Drop index from drag.
+   * @param {boolean} movePossible Whether the move is allowed.
+   */
+  #onBeforeRowMove(rows, finalIndex, dropIndex, movePossible) {
+    if (!movePossible || !this.#initialized) {
+      this.#rowMoveSnapshot = null;
+
+      return;
+    }
+
+    this.#rowMoveSnapshot = this.mergedCellsCollection.capturePhysicalSpans('row');
+  }
+
+  /**
+   * `afterRowMove` hook callback. Translates merges using the pre-move snapshot
+   * and the now-updated row index mapping. Auto-splits merges whose physical
+   * rows are no longer contiguous.
+   *
+   * @param {number[]} rows Visual row indexes that were moved.
+   * @param {number} finalIndex Drop target visual index.
+   * @param {number} dropIndex Drop index from drag.
+   * @param {boolean} movePossible Whether the move was allowed.
+   * @param {boolean} orderChanged Whether the move actually changed the order.
+   */
+  #onAfterRowMove(rows, finalIndex, dropIndex, movePossible, orderChanged) {
+    const snapshot = this.#rowMoveSnapshot;
+
+    this.#rowMoveSnapshot = null;
+
+    if (!orderChanged || !snapshot) {
+      return;
+    }
+
+    this.mergedCellsCollection.translateAfterAxisMove('row', snapshot);
+    this.hot.render();
+  }
+
+  /**
+   * `beforeColumnFreeze` / `beforeColumnUnfreeze` hook callback. `manualColumnFreeze`
+   * reorders the visual sequence directly through the column index mapper, so we
+   * need to translate merges through it the same way as for `manualColumnMove`.
+   *
+   * @param {number} column Visual column index being frozen/unfrozen.
+   * @param {boolean} performed Whether the (un)freeze will actually run.
+   */
+  #onBeforeColumnFreeze(column, performed) {
+    if (!performed || !this.#initialized) {
+      this.#columnMoveSnapshot = null;
+
+      return;
+    }
+
+    this.#columnMoveSnapshot = this.mergedCellsCollection.capturePhysicalSpans('column');
+  }
+
+  /**
+   * `afterColumnFreeze` / `afterColumnUnfreeze` hook callback.
+   *
+   * @param {number} column Visual column index that was frozen/unfrozen.
+   * @param {boolean} performed Whether the (un)freeze actually ran.
+   */
+  #onAfterColumnFreeze(column, performed) {
+    const snapshot = this.#columnMoveSnapshot;
+
+    this.#columnMoveSnapshot = null;
+
+    if (!performed || !snapshot) {
+      return;
+    }
+
+    this.mergedCellsCollection.translateAfterAxisMove('column', snapshot);
+    this.hot.render();
+  }
+
   /**
    * `afterChange` hook callback. Used to propagate merged cells after using Autofill.
    *
diff --git a/handsontable/test/__mocks__/cssPolyfill.js b/handsontable/test/__mocks__/cssPolyfill.js
index 41fa89a8852..d9b900d023e 100644
--- a/handsontable/test/__mocks__/cssPolyfill.js
+++ b/handsontable/test/__mocks__/cssPolyfill.js
@@ -6,6 +6,11 @@
  * - Other modern CSS features that jsdom doesn't support.
  */
 
+// Memoize preprocessModernCSS — the same rule/string always produces the same output.
+// Avoids re-running 4 regexes on the same 133 KB handsontableStyles string 644×
+// (once per insertRule call when jsdom parses the style element).
+const preprocessCache = new Map();
+
 /**
  * Patches CSSStyleSheet.prototype.insertRule to handle modern CSS features.
  */
@@ -75,6 +80,12 @@ function preprocessModernCSS(cssText) {
     return cssText;
   }
 
+  const cached = preprocessCache.get(cssText);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
   let processed = cssText;
 
   // Replace light-dark() with a fallback value that jsdom can parse.
@@ -100,6 +111,8 @@ function preprocessModernCSS(cssText) {
   // :not(*) is a valid selector that matches nothing, so the rule stays valid but has no effect.
   processed = processed.replace(/:has\s*\([^)]+\)/g, ':not(*)');
 
+  preprocessCache.set(cssText, processed);
+
   return processed;
 }
 
@@ -193,6 +206,19 @@ function getMinimalComputedStyle(element) {
   };
 }
 
+// Module-level so clearComputedStyleCache() can replace it between tests.
+// WeakMap has no .clear() method — reassigning the reference is the only option.
+let computedStyleCache = new WeakMap();
+
+/**
+ * Replaces the per-element computed style cache with a fresh WeakMap.
+ * Call this in a beforeEach hook to prevent stale cached snapshots from leaking
+ * between tests when an element's class list or inline styles change mid-test.
+ */
+function clearComputedStyleCache() {
+  computedStyleCache = new WeakMap();
+}
+
 /**
  * Patches CSSStyleDeclaration to improve CSS custom property support.
  */
@@ -204,14 +230,20 @@ function patchCSSStyleDeclaration() {
   const originalGetPropertyValue = CSSStyleDeclaration.prototype.getPropertyValue;
   const originalGetComputedStyle = window.getComputedStyle;
 
-  // Enhance getPropertyValue to better handle CSS custom properties.
+  // Cache for CSS custom property values resolved from :root.
+  // CSS custom properties are defined on :root and don't change during a test run,
+  // so we can safely cache them for the lifetime of the jsdom instance.
+  const cssVarCache = new Map();
+
+  // Enhance getPropertyValue to handle CSS custom properties.
+  // Does NOT fall back to getComputedStyle — that path is both expensive and
+  // recursive (the returned CSSStyleDeclaration has the same patched prototype).
+  // The getComputedStyle proxy below handles the CSS variable lookup with caching.
   CSSStyleDeclaration.prototype.getPropertyValue = function(property) {
     const value = originalGetPropertyValue.call(this, property);
 
-    // If it's a CSS custom property and we got an empty string,
-    // try to get it from the element's inline style or computed style.
     if (!value && property.startsWith('--')) {
-      // Try inline style first.
+      // Try inline style first (cheap, no cascade evaluation).
       if (this._ownerElement && this._ownerElement.style) {
         const inlineValue = this._ownerElement.style.getPropertyValue(property);
 
@@ -219,52 +251,69 @@ function patchCSSStyleDeclaration() {
           return inlineValue;
         }
       }
+    }
 
-      // Try computed style from parent/root.
-      if (this._ownerElement && originalGetComputedStyle) {
-        try {
-          const computed = originalGetComputedStyle(this._ownerElement);
-          const computedValue = computed.getPropertyValue(property);
+    return value;
+  };
 
-          if (computedValue) {
-            return computedValue;
-          }
-        } catch (e) {
-          // Ignore errors.
+  /**
+   * Returns a cached CSSStyleDeclaration for the element, calling jsdom's
+   * getComputedStyle at most once per unique element.
+   *
+   * @param {Element} element The element to compute styles for.
+   * @param {string|null} pseudoElement Optional pseudo-element string.
+   * @returns {CSSStyleDeclaration} The computed style object.
+   */
+  function getCachedComputed(element, pseudoElement) {
+    // Only cache non-pseudo-element lookups (pseudo-elements are rare and uncacheable).
+    if (pseudoElement) {
+      try {
+        return originalGetComputedStyle.call(window, element, pseudoElement);
+      } catch (e) {
+        if (e instanceof SyntaxError || (e.message && /not a valid selector/i.test(e.message))) {
+          return getMinimalComputedStyle(element);
         }
+        throw e;
       }
     }
 
-    return value;
-  };
+    if (computedStyleCache.has(element)) {
+      return computedStyleCache.get(element);
+    }
 
-  // Enhance getComputedStyle to better support CSS custom properties.
-  window.getComputedStyle = function(element, pseudoElement) {
     let computed;
 
     try {
-      computed = originalGetComputedStyle.call(this, element, pseudoElement);
+      computed = originalGetComputedStyle.call(window, element, pseudoElement);
     } catch (e) {
       // JSDOM's nwsapi throws SyntaxError on unsupported selectors (e.g. :has()).
-      // If CSS wasn't preprocessed (e.g. dynamic styles), return a minimal style object.
       if (e instanceof SyntaxError || (e.message && /not a valid selector/i.test(e.message))) {
-        return getMinimalComputedStyle(element);
+        computed = getMinimalComputedStyle(element);
+      } else {
+        throw e;
       }
-
-      throw e;
     }
 
-    // Create a proxy that enhances CSS custom property retrieval.
+    computedStyleCache.set(element, computed);
+
+    return computed;
+  }
+
+  // Enhance getComputedStyle to support CSS custom properties.
+  // PERF: getCachedComputed() ensures jsdom's CSS cascade evaluation (~34ms) runs at
+  // most once per unique element per test, instead of once per call (195× per HOT init).
+  window.getComputedStyle = function(element, pseudoElement) {
+    const computed = getCachedComputed(element, pseudoElement);
+
+    // Create a proxy that resolves unresolved CSS custom properties.
     return new Proxy(computed, {
       get(target, prop) {
         if (prop === 'getPropertyValue') {
           return function(property) {
             const value = target.getPropertyValue(property);
 
-            // If it's a CSS custom property and we got an empty string,
-            // try to find it in the element's style or parent styles.
             if (!value && property.startsWith('--')) {
-              // Check inline style.
+              // Check inline style (cheapest, no cascade).
               if (element.style) {
                 const inlineValue = element.style.getPropertyValue(property);
 
@@ -273,55 +322,31 @@ function patchCSSStyleDeclaration() {
                 }
               }
 
-              // Check for default theme CSS vars if element has a theme class.
+              // Check theme defaults (no DOM traversal).
               const defaultValue = getDefaultThemeCSSVar(element, property);
 
               if (defaultValue) {
                 return defaultValue;
               }
 
-              // Check parent elements for CSS custom properties.
-              let current = element.parentElement;
-
-              while (current) {
-                try {
-                  const parentComputed = originalGetComputedStyle.call(window, current);
-                  const parentValue = parentComputed.getPropertyValue(property);
-
-                  if (parentValue) {
-                    return parentValue;
-                  }
-
-                  // Check for default theme CSS vars in parent.
-                  const parentDefault = getDefaultThemeCSSVar(current, property);
-
-                  if (parentDefault) {
-                    return parentDefault;
-                  }
-                } catch (e) {
-                  // Ignore errors.
-                }
-
-                current = current.parentElement;
+              // CSS custom properties are defined on :root so the value is the
+              // same regardless of which element triggered the lookup.
+              if (cssVarCache.has(property)) {
+                return cssVarCache.get(property);
               }
 
-              // Check document root.
+              // Resolve from :root — single call, no parent-chain walk.
               try {
                 const rootComputed = originalGetComputedStyle.call(window, document.documentElement);
-                const rootValue = rootComputed.getPropertyValue(property);
+                const rootValue = originalGetPropertyValue.call(rootComputed, property);
+
+                cssVarCache.set(property, rootValue || '');
 
                 if (rootValue) {
                   return rootValue;
                 }
-
-                // Check for default theme CSS vars in root.
-                const rootDefault = getDefaultThemeCSSVar(document.documentElement, property);
-
-                if (rootDefault) {
-                  return rootDefault;
-                }
               } catch (e) {
-                // Ignore errors.
+                cssVarCache.set(property, '');
               }
             }
 
@@ -471,5 +496,6 @@ function initCSSPolyfill() {
 module.exports = {
   patchCSSStyleSheet,
   patchConsoleErrors,
-  initCSSPolyfill
+  initCSSPolyfill,
+  clearComputedStyleCache
 };
diff --git a/handsontable/test/scripts/run-puppeteer-on-watchers-change.mjs b/handsontable/test/scripts/run-puppeteer-on-watchers-change.mjs
index 3bc48e0cf49..656ba671fcd 100644
--- a/handsontable/test/scripts/run-puppeteer-on-watchers-change.mjs
+++ b/handsontable/test/scripts/run-puppeteer-on-watchers-change.mjs
@@ -8,8 +8,35 @@ import debounce from 'lodash.debounce';
 const argv = yargs(hideBin(process.argv))
   .array('cmdToListen')
   .string('runnerFile')
+  .string('testPathPattern')
+  .string('theme')
   .argv;
 
+const IS_TTY = process.stdout.isTTY;
+
+// Suppress DEP0190 Node.js warning in all child processes.
+// Must be set before concurrently spawns children so they inherit the env.
+process.env.NODE_NO_WARNINGS = '1';
+
+// concurrently pipes child stdout, breaking process.stdout.isTTY in sub-scripts.
+// HOT_QUIET=1 tells run-step.mjs to use quiet mode even without a visible TTY.
+if (IS_TTY) {
+  process.env.HOT_QUIET = '1';
+}
+
+// Propagate testPathPattern and theme so both the dump step and Puppeteer
+// compute the same run ID and open the matching HTML file.
+if (argv.testPathPattern) {
+  process.env.npm_config_testpathpattern = argv.testPathPattern;
+}
+if (argv.theme) {
+  process.env.npm_config_theme = argv.theme;
+}
+
+// On TTY suppress npm lifecycle headers; on CI keep full output.
+const silentize = cmd => (IS_TTY ? cmd.replace(/^npm run /, 'npm --silent run ') : cmd);
+const commands = argv.cmdToListen.map(silentize);
+
 const PUPPETEER_CMD = 'node test/scripts/run-puppeteer.mjs';
 const PUPPETEER_KILL_TIMEOUT = 2000;
 const writableStream = new Writable();
@@ -34,6 +61,7 @@ const spawnPuppeteer = debounce(() => {
 
 writableStream._write = (chunk, encoding, next) => {
   // strip colorized logs that may occurs while executing commands
+  // eslint-disable-next-line no-control-regex
   const chunkRawText = chunk.toString().replace(/\x1B[[(?);]{0,2}(;?\d)*./g, '');
   const isProcessFinished = /\x9d\t\x9d/.test(chunkRawText);
 
@@ -47,11 +75,17 @@ writableStream._write = (chunk, encoding, next) => {
     spawnPuppeteer();
   }
 
-  // forward logs to the stdout stream (bash screen)
-  process.stdout.write(chunk, encoding, next);
-}
+  if (IS_TTY) {
+    // On TTY suppress all build/watcher output — Puppeteer pipes its own
+    // stdout/stderr directly to process.stdout so its lines still appear.
+    next();
+  } else {
+    // On CI forward everything for full log visibility.
+    process.stdout.write(chunk, encoding, next);
+  }
+};
 
-await concurrently(argv.cmdToListen, {
+await concurrently(commands, {
   prefix: 'none',
   killOthers: ['failure', 'success'],
   outputStream: writableStream,
diff --git a/handsontable/test/scripts/run-puppeteer.mjs b/handsontable/test/scripts/run-puppeteer.mjs
index 9c7283b3add..4802529abd5 100644
--- a/handsontable/test/scripts/run-puppeteer.mjs
+++ b/handsontable/test/scripts/run-puppeteer.mjs
@@ -59,6 +59,7 @@ function listenOnFreePort(server, startPort) {
 }
 
 const IS_CI = process.env.CI;
+const IS_TTY = process.stdout.isTTY;
 const CI_DOTS_PER_LINE = 120;
 
 // Separate positional args (runner HTML path) from flag args (--random,
@@ -86,18 +87,18 @@ if (!fs.existsSync(originalPath)) {
   /* eslint-disable no-console */
   console.log(
     `Runner HTML not found at ${originalPath}. Did \`test:e2e.dump\` run with the same `
-    + `\`--testPathPattern\` / \`--theme\` values?`
+    + '`--testPathPattern` / `--theme` values?'
   );
   process.exit(1);
 }
 
 if (flags) {
   const seed = flags.match(/(--seed=)\d{1,}/g);
-  const random = flags.includes('random');
+  const random = flagArgs.includes('--random');
   const hotVersionMatch = flags.match(/--hotVersion=([^\s,]+)/);
   const params = [];
 
-  verboseReporting = flags.includes('verbose');
+  verboseReporting = flagArgs.includes('--verbose');
 
   if (seed) {
     params.push(`seed=${seed[0].replace('--seed=', '')}`);
@@ -159,7 +160,7 @@ const cleanup = cleanupFactory(browser, server);
 const reporter = new JasmineReporter({
   colors: 1,
   cleanStack: 1,
-  verbosity: 4,
+  verbosity: (IS_TTY && !verboseReporting) ? 1 : 4,
   listStyle: 'flat',
   activity: true,
   isVerbose: verboseReporting,
@@ -224,5 +225,5 @@ try {
 } catch (error) {
   /* eslint-disable no-console */
   console.log(error);
-  cleanup(1);
+  await cleanup(1);
 }
diff --git a/wrappers/angular-wrapper/projects/hot-table/jest.config.js b/wrappers/angular-wrapper/projects/hot-table/jest.config.js
index 33cb33792bf..4d8d762d171 100644
--- a/wrappers/angular-wrapper/projects/hot-table/jest.config.js
+++ b/wrappers/angular-wrapper/projects/hot-table/jest.config.js
@@ -2,18 +2,17 @@ module.exports = {
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
   transform: {
-    '^.+\\.(ts|js|html)$': ['jest-preset-angular', {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.html$'
-    }]
+    '^.+\\.(ts|js|mjs|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.html$',
+      },
+    ],
   },
   testEnvironment: 'jsdom',
-  moduleNameMapper: {
-    // Map any path aliases from tsconfig if needed
-    '\\.(css|less|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js'
-  },
   transformIgnorePatterns: [
-    'node_modules/(?!.*\\.mjs$|zone\\.js|@angular|rxjs)'
+    'node_modules/(?!.*\\.mjs$|zone\\.js|@angular|rxjs)',
   ],
   moduleDirectories: ['node_modules', '<rootDir>/../../node_modules'],
   testEnvironmentOptions: {
diff --git a/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.spec.ts b/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.spec.ts
index 8083308a977..1c1f33d5438 100644
--- a/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.spec.ts
+++ b/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.spec.ts
@@ -25,38 +25,53 @@ describe('HotTableComponent', () => {
 
   });
 
-  it(`should render 'hot-table'`, async () => {
+  it(`should render 'hot-table'`, () => {
     fixture = TestBed.createComponent(HotTableComponent);
     fixture.componentInstance.settings = { ...settings };
     fixture.detectChanges();
-    await fixture.whenStable();
 
     const elem = fixture.nativeElement;
     expect(elem.querySelectorAll('.handsontable').length).toBeGreaterThan(0);
     expect(fixture.componentInstance.hotInstance).toBeDefined();
   });
 
-  it(`should render 'hot-table' even when settings are not provided`, async () => {
+  it(`should render 'hot-table' even when settings are not provided`, () => {
     fixture = TestBed.createComponent(HotTableComponent);
     fixture.detectChanges();
-    await fixture.whenStable();
 
     const elem = fixture.nativeElement;
     expect(elem.querySelectorAll('.handsontable').length).toBeGreaterThan(0);
     expect(fixture.componentInstance.hotInstance).toBeDefined();
   });
 
-  it(`should set data`, async () => {
+  it(`should set data`, () => {
     fixture = TestBed.createComponent(HotTableComponent);
     fixture.componentInstance.settings = {};
     fixture.componentInstance.data = createSpreadsheetData(5, 5);
     fixture.detectChanges();
-    await fixture.whenStable();
 
     expect(fixture.componentInstance.hotInstance.getDataAtCell(0, 0)).toBe('A1');
   });
 
-  it(`should be possible to set some option and pass it to Handsontable`, async () => {
+  it(`should use data from settings when [data] input is not bound`, () => {
+    const settingsData = createSpreadsheetData(3, 3);
+
+    fixture = TestBed.createComponent(HotTableComponent);
+    // GridSettings intentionally omits 'data' (users should use [data] binding),
+    // but we cast here to verify the runtime merge does not override it with null
+    // when [data] is unbound (e.g. JavaScript users or future API changes).
+    fixture.componentInstance.settings = {
+      ...settings,
+      data: settingsData,
+    } as unknown as GridSettings;
+    // [data] input is intentionally not set — remains null (the default)
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.hotInstance.getDataAtCell(0, 0)).toBe('A1');
+    expect(fixture.componentInstance.hotInstance.countRows()).toBe(3);
+  });
+
+  it(`should be possible to set some option and pass it to Handsontable`, () => {
     fixture = TestBed.createComponent(HotTableComponent);
     fixture.componentInstance.settings = {
       ...settings,
@@ -67,7 +82,6 @@ describe('HotTableComponent', () => {
     };
 
     fixture.detectChanges();
-    await fixture.whenStable();
 
     const handsontableSettings = fixture.componentInstance.hotInstance.getSettings();
     expect(handsontableSettings.rowHeaders).toBe(true);
@@ -77,12 +91,11 @@ describe('HotTableComponent', () => {
   });
 
   describe('ngOnChanges', () => {
-    it('should update Handsontable settings if settings change and it is not the first change', async () => {
+    it('should update Handsontable settings if settings change and it is not the first change', () => {
       const newSettings = { readOnly: true };
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {};
       fixture.detectChanges();
-      await fixture.whenStable();
       const hotSettingsResolver = fixture.componentRef.injector.get(HotSettingsResolver);
       const component = fixture.componentInstance;
       const applyCustomSettingsSpy = jest.spyOn(hotSettingsResolver, 'applyCustomSettings');
@@ -98,12 +111,11 @@ describe('HotTableComponent', () => {
       expect(updateHotTableSpy).toHaveBeenCalledWith(newSettings, false);
     });
 
-    it('should not update Handsontable settings if it is the first change', async () => {
+    it('should not update Handsontable settings if it is the first change', () => {
       const newSettings = { data: [[1, 2, 3]] };
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {};
       fixture.detectChanges();
-      await fixture.whenStable();
       const hotSettingsResolver = fixture.componentRef.injector.get(HotSettingsResolver);
       const applyCustomSettingsSpy = jest.spyOn(hotSettingsResolver, 'applyCustomSettings');
       const component = fixture.componentInstance;
@@ -119,12 +131,11 @@ describe('HotTableComponent', () => {
       expect(updateHotTableSpy).not.toHaveBeenCalled();
     });
 
-    it('should update Handsontable data if data change and it is not the first change', async () => {
+    it('should update Handsontable data if data change and it is not the first change', () => {
       const newData = [[1, 2, 3]];
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {};
       fixture.detectChanges();
-      await fixture.whenStable();
       const component = fixture.componentInstance;
 
       const updateDataSpy = jest.spyOn(component.hotInstance, 'updateData');
@@ -137,12 +148,11 @@ describe('HotTableComponent', () => {
       expect(updateDataSpy).toHaveBeenCalledWith(newData);
     });
 
-    it('should not update Handsontable data if data change and it is the first change', async () => {
+    it('should not update Handsontable data if data change and it is the first change', () => {
       const newData = [[1, 2, 3]];
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {};
       fixture.detectChanges();
-      await fixture.whenStable();
       const component = fixture.componentInstance;
 
       const updateDataSpy = jest.spyOn(component.hotInstance, 'updateData');
@@ -155,14 +165,13 @@ describe('HotTableComponent', () => {
       expect(updateDataSpy).not.toHaveBeenCalledWith(newData);
     });
 
-    it('should not pass init-only settings to updateSettings after initialization', async () => {
+    it('should not pass init-only settings to updateSettings after initialization', () => {
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {
         renderAllRows: false,
         width: 300,
       };
       fixture.detectChanges();
-      await fixture.whenStable();
       const component = fixture.componentInstance;
       const updateSettingsSpy = jest.spyOn(component.hotInstance, 'updateSettings');
 
@@ -184,7 +193,7 @@ describe('HotTableComponent', () => {
   });
 
   describe('ngOnDestroy', () => {
-    it('should destroy Handsontable instance and editor component references, when columns property is an array', async () => {
+    it('should destroy Handsontable instance and editor component references, when columns property is an array', () => {
       fixture = TestBed.createComponent(HotTableComponent);
       const editorRefMock = {
         destroy: jest.fn(),
@@ -198,7 +207,6 @@ describe('HotTableComponent', () => {
         ],
       };
       fixture.detectChanges();
-      await fixture.whenStable();
       const hotInstance = fixture.componentInstance.hotInstance;
       const destroySpy = jest.spyOn(hotInstance, 'destroy');
 
@@ -208,7 +216,7 @@ describe('HotTableComponent', () => {
       expect(destroySpy).toHaveBeenCalled();
     });
 
-    it('should destroy Handsontable instance, when columns property is a function', async () => {
+    it('should destroy Handsontable instance, when columns property is a function', () => {
       fixture = TestBed.createComponent(HotTableComponent);
 
       fixture.componentInstance.settings = {
@@ -217,7 +225,6 @@ describe('HotTableComponent', () => {
       };
 
       fixture.detectChanges();
-      await fixture.whenStable();
       const hotInstance = fixture.componentInstance.hotInstance;
       const destroySpy = jest.spyOn(hotInstance, 'destroy');
 
@@ -225,7 +232,7 @@ describe('HotTableComponent', () => {
       expect(destroySpy).toHaveBeenCalled();
     });
 
-    it('should destroy Handsontable instance, when columns property is undefined', async () => {
+    it('should destroy Handsontable instance, when columns property is undefined', () => {
       fixture = TestBed.createComponent(HotTableComponent);
 
       fixture.componentInstance.settings = {
@@ -233,29 +240,16 @@ describe('HotTableComponent', () => {
       };
 
       fixture.detectChanges();
-      await fixture.whenStable();
       const hotInstance = fixture.componentInstance.hotInstance;
       const destroySpy = jest.spyOn(hotInstance, 'destroy');
 
       fixture.componentInstance.ngOnDestroy();
       expect(destroySpy).toHaveBeenCalled();
     });
-
-    it('should not create Handsontable instance if component is destroyed before microtask resolves', async () => {
-      fixture = TestBed.createComponent(HotTableComponent);
-      fixture.componentInstance.settings = { ...settings };
-      fixture.detectChanges();
-
-      // Destroy before the pending Promise resolves
-      fixture.componentInstance.ngOnDestroy();
-      await fixture.whenStable();
-
-      expect(fixture.componentInstance.hotInstance).toBeNull();
-    });
   });
 
   describe('hooks', () => {
-    it(`should use Handsontable as a hook's context, if is defined as a component's method`, async () => {
+    it(`should use Handsontable as a hook's context, if is defined as a component's method`, () => {
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {
         ...settings,
@@ -264,7 +258,6 @@ describe('HotTableComponent', () => {
         },
       };
       fixture.detectChanges();
-      await fixture.whenStable();
 
       const instance: Handsontable = fixture.componentInstance.hotInstance;
       instance.runHooks('afterInit');
@@ -273,7 +266,7 @@ describe('HotTableComponent', () => {
       expect(instance.getPlugin('copyPaste')).toBeTruthy();
     });
 
-    it(`should use Handsontable as a hook's context, if is defined as a function in settings object`, async () => {
+    it(`should use Handsontable as a hook's context, if is defined as a function in settings object`, () => {
       fixture = TestBed.createComponent(HotTableComponent);
       fixture.componentInstance.settings = {
         ...settings,
@@ -282,7 +275,6 @@ describe('HotTableComponent', () => {
         },
       };
       fixture.detectChanges();
-      await fixture.whenStable();
 
       const instance: Handsontable = fixture.componentInstance.hotInstance.runHooks('afterInit');
 
@@ -290,7 +282,7 @@ describe('HotTableComponent', () => {
       expect(instance.getPlugin('copyPaste')).toBeTruthy();
     });
 
-    it(`should allow to block 'before*' hooks`, async () => {
+    it(`should allow to block 'before*' hooks`, () => {
       fixture = TestBed.createComponent(HotTableComponent);
       const component = fixture.componentInstance;
       component.settings = {
@@ -307,7 +299,6 @@ describe('HotTableComponent', () => {
       };
       let afterChangeResult = false;
       fixture.detectChanges();
-      await fixture.whenStable();
 
       component.hotInstance.setDataAtCell(0, 0, 'test');
 
diff --git a/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.ts b/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.ts
index 5fc3d691010..c6e1303eac2 100644
--- a/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.ts
+++ b/wrappers/angular-wrapper/projects/hot-table/src/lib/hot-table.component.ts
@@ -48,7 +48,6 @@ export class HotTableComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   /** The Handsontable instance. */
   private __hotInstance: Handsontable | null = null;
-  private _pendingDestroy = false;
 
   constructor(
     private readonly _hotSettingsResolver: HotSettingsResolver,
@@ -85,32 +84,23 @@ export class HotTableComponent implements AfterViewInit, OnChanges, OnDestroy {
    */
   ngAfterViewInit(): void {
     let options: Handsontable.GridSettings = this._hotSettingsResolver.applyCustomSettings(this.settings);
+
     const negotiatedSettings = this.getNegotiatedSettings(options);
     options = { ...options, ...negotiatedSettings, ...(this.data != null ? { data: this.data } : {}) };
 
-    // Defer initialization to the next microtask to prevent NG0100
-    // (ExpressionChangedAfterItHasBeenCheckedError). HOT mutates the input
-    // data array during init (e.g. minSpareRows), which Angular's dev-mode
-    // double-check detects as an illegal mid-cycle change.
-    Promise.resolve().then(() => {
-      if (this._pendingDestroy) {
-        return;
-      }
-
-      this.ngZone.runOutsideAngular(() => {
-        this.hotInstance = new Handsontable.Core(this.container.nativeElement, options);
+    this.ngZone.runOutsideAngular(() => {
+      this.hotInstance = new Handsontable.Core(this.container.nativeElement, options);
 
-        (this.hotInstance as any)._angularEnvironmentInjector = this.environmentInjector;
+      (this.hotInstance as any)._angularEnvironmentInjector = this.environmentInjector;
 
-        this.hotInstance.init();
-      });
+      this.hotInstance.init();
+    });
 
-      this._hotConfig.config$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-        if (this.hotInstance) {
-          const negotiatedSettings = this.getNegotiatedSettings(this.settings);
-          this.updateHotTable(negotiatedSettings);
-        }
-      });
+    this._hotConfig.config$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      if (this.hotInstance) {
+        const negotiatedSettings = this.getNegotiatedSettings(this.settings);
+        this.updateHotTable(negotiatedSettings);
+      }
     });
   }
 
@@ -141,8 +131,6 @@ export class HotTableComponent implements AfterViewInit, OnChanges, OnDestroy {
    * Destroys the Handsontable instance and clears the columns from custom editors.
    */
   ngOnDestroy(): void {
-    this._pendingDestroy = true;
-
     if (!this.hotInstance) {
       return;
     }
diff --git a/wrappers/react-wrapper/package.json b/wrappers/react-wrapper/package.json
index c68b1b43c92..c2df2a76afe 100644
--- a/wrappers/react-wrapper/package.json
+++ b/wrappers/react-wrapper/package.json
@@ -107,6 +107,7 @@
   "jest": {
     "testEnvironment": "jsdom",
     "testURL": "http://localhost/",
+    "testTimeout": 60000,
     "transform": {
       "^.+\\.tsx?$": "babel-jest",
       "^.+\\.js$": "babel-jest"
diff --git a/wrappers/react-wrapper/test/bootstrap.js b/wrappers/react-wrapper/test/bootstrap.js
index 3e73fbc7678..7488f1f39bb 100644
--- a/wrappers/react-wrapper/test/bootstrap.js
+++ b/wrappers/react-wrapper/test/bootstrap.js
@@ -2,7 +2,7 @@
 import { IntersectionObserverMock } from './__mocks__/intersectionObserverMock';
 import { ResizeObserverMock } from './__mocks__/resizeObserverMock';
 import { mockDocumentClientDimensions } from './__mocks__/documentClientDimensions';
-import { initCSSPolyfill } from '../../../handsontable/test/__mocks__/cssPolyfill';
+import { initCSSPolyfill, clearComputedStyleCache } from '../../../handsontable/test/__mocks__/cssPolyfill';
 
 beforeAll(() => {
   mockDocumentClientDimensions();
@@ -15,6 +15,10 @@ beforeAll(() => {
   initCSSPolyfill();
 });
 
+beforeEach(() => {
+  clearComputedStyleCache();
+});
+
 afterAll(() => {
   delete window.IntersectionObserver;
   delete window.ResizeObserver;