From 7ae670f94834e92aa518885900dd03592c3e4987 Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Mon, 11 May 2026 14:46:05 +0200
Subject: [PATCH 01/26] DEV-1644: Fix JS/TS picker dropdown width to match
 trigger button (#12523)

---
 docs/src/styles/interactive-example.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/styles/interactive-example.css b/docs/src/styles/interactive-example.css
index d2722b699c2..9db564ad34d 100644
--- a/docs/src/styles/interactive-example.css
+++ b/docs/src/styles/interactive-example.css
@@ -405,7 +405,7 @@
   box-shadow: none;
   list-style: none;
   margin: -1px 0 0;
-  min-width: 8rem;
+  min-width: 100%;
   overflow-y: auto;
   padding: 0;
   position: absolute;

From 269dba270beaaa97ea8846f5c1371e1d56e89874 Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Mon, 11 May 2026 14:46:33 +0200
Subject: [PATCH 02/26] DEV-1632: Fix search styling in external-search-box
 recipe examples (#12522)

Replace inline styles with example-controls-container/controls CSS
classes to match the styling used in searching-values examples.
Applies to JS, TS, React (JSX/TSX), and Angular examples.

https://claude.ai/code/session_01Wh3BHHNrtt6qMwEVcAuFjd

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../external-search-box/angular/example1.ts   | 19 ++++++++-------
 .../javascript/example1.js                    | 17 +++++++------
 .../javascript/example1.ts                    | 17 +++++++------
 .../external-search-box/react/example1.jsx    | 24 ++++++++-----------
 .../external-search-box/react/example1.tsx    | 24 ++++++++-----------
 5 files changed, 46 insertions(+), 55 deletions(-)

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 c851e9e53ed..23e21d8b283 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
@@ -17,15 +17,16 @@ const data = [
   imports: [HotTableModule],
   selector: 'example1-external-search-box',
   template: `
-    <div style="margin-bottom: 12px;">
-      <label for="external-search-input" style="display: block; margin-bottom: 4px;">Search rows</label>
-      <input
-        id="external-search-input"
-        type="text"
-        placeholder="Type to highlight matching cells..."
-        style="width: 100%; box-sizing: border-box; padding: 8px;"
-        (input)="onSearch($event)"
-      />
+    <div class="example-controls-container">
+      <div class="controls">
+        <label for="external-search-input">Search rows</label>
+        <input
+          id="external-search-input"
+          type="search"
+          placeholder="Type to highlight matching cells..."
+          (input)="onSearch($event)"
+        />
+      </div>
     </div>
     <hot-table [data]="data" [settings]="gridSettings"></hot-table>
   `,
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.js b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.js
index 3d1f3f505e2..0c2cf6896b4 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.js
+++ b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.js
@@ -18,26 +18,25 @@ const data = [
 const exampleContainer = document.querySelector('#example1');
 
 const searchWrapper = document.createElement('div');
-searchWrapper.style.marginBottom = '12px';
+searchWrapper.className = 'example-controls-container';
+
+const controlsDiv = document.createElement('div');
+controlsDiv.className = 'controls';
 
 const searchLabel = document.createElement('label');
 searchLabel.setAttribute('for', 'external-search-input');
 searchLabel.textContent = 'Search rows';
-searchLabel.style.display = 'block';
-searchLabel.style.marginBottom = '4px';
 
 const searchInput = document.createElement('input');
 searchInput.id = 'external-search-input';
-searchInput.type = 'text';
+searchInput.type = 'search';
 searchInput.placeholder = 'Type to highlight matching cells...';
-searchInput.style.width = '100%';
-searchInput.style.boxSizing = 'border-box';
-searchInput.style.padding = '8px';
 
 const hotContainer = document.createElement('div');
 
-searchWrapper.appendChild(searchLabel);
-searchWrapper.appendChild(searchInput);
+controlsDiv.appendChild(searchLabel);
+controlsDiv.appendChild(searchInput);
+searchWrapper.appendChild(controlsDiv);
 exampleContainer.appendChild(searchWrapper);
 exampleContainer.appendChild(hotContainer);
 
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.ts b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.ts
index aa00aa394b0..54a5dd8f1f7 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.ts
+++ b/docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.ts
@@ -22,26 +22,25 @@ if (!exampleContainer) {
 }
 
 const searchWrapper = document.createElement('div');
-searchWrapper.style.marginBottom = '12px';
+searchWrapper.className = 'example-controls-container';
+
+const controlsDiv = document.createElement('div');
+controlsDiv.className = 'controls';
 
 const searchLabel = document.createElement('label');
 searchLabel.setAttribute('for', 'external-search-input');
 searchLabel.textContent = 'Search rows';
-searchLabel.style.display = 'block';
-searchLabel.style.marginBottom = '4px';
 
 const searchInput = document.createElement('input');
 searchInput.id = 'external-search-input';
-searchInput.type = 'text';
+searchInput.type = 'search';
 searchInput.placeholder = 'Type to highlight matching cells...';
-searchInput.style.width = '100%';
-searchInput.style.boxSizing = 'border-box';
-searchInput.style.padding = '8px';
 
 const hotContainer = document.createElement('div');
 
-searchWrapper.appendChild(searchLabel);
-searchWrapper.appendChild(searchInput);
+controlsDiv.appendChild(searchLabel);
+controlsDiv.appendChild(searchInput);
+searchWrapper.appendChild(controlsDiv);
 exampleContainer.appendChild(searchWrapper);
 exampleContainer.appendChild(hotContainer);
 
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/react/example1.jsx b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.jsx
index e1477a5d55a..0eba78c60f5 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/react/example1.jsx
+++ b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.jsx
@@ -47,20 +47,16 @@ const ExampleComponent = () => {
 
   return (
     <div>
-      <div style={{ marginBottom: '12px' }}>
-        <label
-          htmlFor="external-search-input"
-          style={{ display: 'block', marginBottom: '4px' }}
-        >
-          Search rows
-        </label>
-        <input
-          id="external-search-input"
-          type="text"
-          placeholder="Type to highlight matching cells..."
-          style={{ width: '100%', boxSizing: 'border-box', padding: '8px' }}
-          onInput={handleSearchInput}
-        />
+      <div className="example-controls-container">
+        <div className="controls">
+          <label htmlFor="external-search-input">Search rows</label>
+          <input
+            id="external-search-input"
+            type="search"
+            placeholder="Type to highlight matching cells..."
+            onInput={handleSearchInput}
+          />
+        </div>
       </div>
       <HotTable
         ref={hotRef}
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/react/example1.tsx b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.tsx
index ee3254dadb0..c5451e89a0a 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/react/example1.tsx
+++ b/docs/content/recipes/filtering-and-search/external-search-box/react/example1.tsx
@@ -47,20 +47,16 @@ const ExampleComponent = () => {
 
   return (
     <div>
-      <div style={{ marginBottom: '12px' }}>
-        <label
-          htmlFor="external-search-input"
-          style={{ display: 'block', marginBottom: '4px' }}
-        >
-          Search rows
-        </label>
-        <input
-          id="external-search-input"
-          type="text"
-          placeholder="Type to highlight matching cells..."
-          style={{ width: '100%', boxSizing: 'border-box', padding: '8px' }}
-          onInput={handleSearchInput}
-        />
+      <div className="example-controls-container">
+        <div className="controls">
+          <label htmlFor="external-search-input">Search rows</label>
+          <input
+            id="external-search-input"
+            type="search"
+            placeholder="Type to highlight matching cells..."
+            onInput={handleSearchInput}
+          />
+        </div>
       </div>
       <HotTable
         ref={hotRef}

From 7af40706d5da0800304bcec1535fa0a376179503 Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Mon, 11 May 2026 14:47:17 +0200
Subject: [PATCH 03/26] DEV-1643: Add missing React TypeScript examples for
 multiselect cell type docs (#12521)

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../multiselect-cell-type/react/example1.tsx  |  58 ++++++++
 .../multiselect-cell-type/react/example2.tsx  | 131 ++++++++++++++++++
 .../multiselect-cell-type/react/example3.tsx  |  70 ++++++++++
 3 files changed, 259 insertions(+)
 create mode 100644 docs/content/guides/cell-types/multiselect-cell-type/react/example1.tsx
 create mode 100644 docs/content/guides/cell-types/multiselect-cell-type/react/example2.tsx
 create mode 100644 docs/content/guides/cell-types/multiselect-cell-type/react/example3.tsx

diff --git a/docs/content/guides/cell-types/multiselect-cell-type/react/example1.tsx b/docs/content/guides/cell-types/multiselect-cell-type/react/example1.tsx
new file mode 100644
index 00000000000..ca889a3c5b8
--- /dev/null
+++ b/docs/content/guides/cell-types/multiselect-cell-type/react/example1.tsx
@@ -0,0 +1,58 @@
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+
+// register Handsontable's modules
+registerAllModules();
+
+const shipmentCategories: string[] = [
+  'Electronics and Gadgets',
+  'Medical Supplies',
+  'Auto Parts',
+  'Fresh Produce',
+  'Textiles',
+  'Industrial Equipment',
+  'Pharmaceuticals',
+  'Consumer Goods',
+  'Machine Parts',
+  'Food Products',
+];
+
+const data: (string | string[])[][] = [
+  ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],
+  ["Chicago O'Hare International Airport", ['Auto Parts', 'Fresh Produce']],
+  ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],
+  ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],
+  ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],
+  ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],
+  ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],
+  ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],
+  ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],
+  ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],
+  ['Heathrow Airport', ['Textiles', 'Consumer Goods']],
+];
+
+const ExampleComponent = () => {
+  return (
+    <HotTable
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+      data={data}
+      columns={[
+        {
+          title: 'Airport',
+        },
+        {
+          type: 'multiselect',
+          source: shipmentCategories,
+          title: 'Shipment',
+        },
+      ]}
+      height="auto"
+      stretchH="last"
+      width="100%"
+    />
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/cell-types/multiselect-cell-type/react/example2.tsx b/docs/content/guides/cell-types/multiselect-cell-type/react/example2.tsx
new file mode 100644
index 00000000000..42838265c37
--- /dev/null
+++ b/docs/content/guides/cell-types/multiselect-cell-type/react/example2.tsx
@@ -0,0 +1,131 @@
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+
+// register Handsontable's modules
+registerAllModules();
+
+interface ShipmentCategory {
+  key: string;
+  value: string;
+}
+
+const shipmentCategories: ShipmentCategory[] = [
+  { key: 'electronics', value: 'Electronics and Gadgets' },
+  { key: 'medical', value: 'Medical Supplies' },
+  { key: 'auto-parts', value: 'Auto Parts' },
+  { key: 'fresh-produce', value: 'Fresh Produce' },
+  { key: 'textiles', value: 'Textiles' },
+  { key: 'industrial', value: 'Industrial Equipment' },
+  { key: 'pharmaceuticals', value: 'Pharmaceuticals' },
+  { key: 'consumer', value: 'Consumer Goods' },
+  { key: 'machine-parts', value: 'Machine Parts' },
+  { key: 'food', value: 'Food Products' },
+];
+
+const data: (string | ShipmentCategory[])[][] = [
+  [
+    'Los Angeles International Airport',
+    [
+      { key: 'electronics', value: 'Electronics and Gadgets' },
+      { key: 'medical', value: 'Medical Supplies' },
+    ],
+  ],
+  [
+    "Chicago O'Hare International Airport",
+    [
+      { key: 'auto-parts', value: 'Auto Parts' },
+      { key: 'fresh-produce', value: 'Fresh Produce' },
+    ],
+  ],
+  [
+    'Charles de Gaulle Airport',
+    [
+      { key: 'textiles', value: 'Textiles' },
+      { key: 'industrial', value: 'Industrial Equipment' },
+    ],
+  ],
+  [
+    'Tokyo Haneda Airport',
+    [
+      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },
+      { key: 'consumer', value: 'Consumer Goods' },
+    ],
+  ],
+  [
+    'Singapore Changi Airport',
+    [
+      { key: 'machine-parts', value: 'Machine Parts' },
+      { key: 'food', value: 'Food Products' },
+    ],
+  ],
+  [
+    'Luton Airport',
+    [
+      { key: 'electronics', value: 'Electronics and Gadgets' },
+      { key: 'pharmaceuticals', value: 'Pharmaceuticals' },
+    ],
+  ],
+  [
+    'Frankfurt Airport',
+    [
+      { key: 'industrial', value: 'Industrial Equipment' },
+      { key: 'auto-parts', value: 'Auto Parts' },
+      { key: 'consumer', value: 'Consumer Goods' },
+    ],
+  ],
+  [
+    'Sydney Kingsford Smith Airport',
+    [
+      { key: 'fresh-produce', value: 'Fresh Produce' },
+      { key: 'food', value: 'Food Products' },
+    ],
+  ],
+  [
+    'Toronto Pearson International Airport',
+    [
+      { key: 'medical', value: 'Medical Supplies' },
+      { key: 'textiles', value: 'Textiles' },
+    ],
+  ],
+  [
+    'Hong Kong International Airport',
+    [
+      { key: 'machine-parts', value: 'Machine Parts' },
+      { key: 'electronics', value: 'Electronics and Gadgets' },
+      { key: 'industrial', value: 'Industrial Equipment' },
+    ],
+  ],
+  [
+    'Heathrow Airport',
+    [
+      { key: 'textiles', value: 'Textiles' },
+      { key: 'consumer', value: 'Consumer Goods' },
+    ],
+  ],
+];
+
+const ExampleComponent = () => {
+  return (
+    <HotTable
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+      data={data}
+      columns={[
+        {
+          title: 'Airport',
+        },
+        {
+          type: 'multiselect',
+          source: shipmentCategories,
+          title: 'Shipment',
+        },
+      ]}
+      height="auto"
+      stretchH="last"
+      width="100%"
+    />
+  );
+};
+
+export default ExampleComponent;
diff --git a/docs/content/guides/cell-types/multiselect-cell-type/react/example3.tsx b/docs/content/guides/cell-types/multiselect-cell-type/react/example3.tsx
new file mode 100644
index 00000000000..96447dbd0b2
--- /dev/null
+++ b/docs/content/guides/cell-types/multiselect-cell-type/react/example3.tsx
@@ -0,0 +1,70 @@
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerAllModules } from 'handsontable/registry';
+
+// register Handsontable's modules
+registerAllModules();
+
+const requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];
+const optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];
+const interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];
+
+const sortAlphabetically = (entries: (string | object)[]) =>
+  [...entries].sort((a, b) => String(a).localeCompare(String(b)));
+
+const data: string[][][] = [
+  [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],
+  [['Tickets', 'Wallet'], ['Camera'], []],
+  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],
+  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],
+  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],
+  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],
+  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],
+  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],
+  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],
+  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],
+  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],
+  [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],
+  [['Wallet', 'Phone'], [], ['Food', 'Shopping']],
+  [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],
+];
+
+const ExampleComponent = () => {
+  return (
+    <HotTable
+      autoWrapRow={true}
+      autoWrapCol={true}
+      licenseKey="non-commercial-and-evaluation"
+      data={data}
+      columns={[
+        {
+          type: 'multiselect',
+          source: requiredItems,
+          title: 'Required items',
+          allowEmpty: false,
+        },
+        {
+          type: 'multiselect',
+          source: optionalExtras,
+          title: 'Optional extras',
+          placeholder: 'Select up to 3',
+          maxSelections: 3,
+          visibleRows: 4,
+          searchInput: false,
+        },
+        {
+          type: 'multiselect',
+          source: interests,
+          title: 'Interests',
+          placeholder: 'Select interests',
+          sourceSortFunction: sortAlphabetically,
+          filteringCaseSensitive: true,
+        },
+      ]}
+      height="auto"
+      stretchH="last"
+      width="100%"
+    />
+  );
+};
+
+export default ExampleComponent;

From 8682ca9845c07634d67b4f67006900ac93c12db5 Mon Sep 17 00:00:00 2001
From: KrzysztofZie <krzysztof.zielinski.speednet@handsontable.com>
Date: Tue, 12 May 2026 08:50:42 +0200
Subject: [PATCH 04/26] =?UTF-8?q?DEV-1061=20-=20Angular=20example=20throws?=
 =?UTF-8?q?=20an=20Uncaught=20TypeError=20when=20`@if/@fo=E2=80=A6=20(#125?=
 =?UTF-8?q?33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* DEV-1061 - Angular example throws an Uncaught TypeError when `@if/@for` are used and validation is executed via `ngAfterViewInit` hook"

* DEV-1061 - Angular example throws an Uncaught TypeError when `@if/@for` are used and validation is executed via `ngAfterViewInit` hook

* DEV-1061 - Angular example throws an Uncaught TypeError when `@if/@for` are used and validation is executed via `ngAfterViewInit` hook
---
 .changelogs/12533.json                        |  8 ++++
 .../3rdparty/walkontable/src/core/_base.js    | 12 +++---
 .../src/3rdparty/walkontable/src/viewport.js  |  4 +-
 .../spec/table/getFirstRenderedColumn.spec.js | 38 ++++++++++++++++++
 .../spec/table/getFirstRenderedRow.spec.js    | 40 +++++++++++++++++++
 .../table/getRenderedColumnsCount.spec.js     | 38 ++++++++++++++++++
 .../spec/table/getRenderedRowsCount.spec.js   | 38 ++++++++++++++++++
 .../walkontable/test/spec/viewport.spec.js    | 31 ++++++++++++++
 8 files changed, 201 insertions(+), 8 deletions(-)
 create mode 100644 .changelogs/12533.json

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/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/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();
+    });
+  });
 });

From f1ffe8ea6d08e0d75c22cfc312bdd4e2335388dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 09:32:51 +0200
Subject: [PATCH 05/26] DEV-1556: Use CSS variable for cell function demo
 background (#12528)

Replaces hardcoded background color with `--ht-background-secondary-color` for consistent theming in cell function documentation examples.
---
 .../guides/cell-functions/cell-function/angular/example1.ts     | 2 +-
 .../guides/cell-functions/cell-function/javascript/example1.css | 2 +-
 .../guides/cell-functions/cell-function/react/example1.css      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

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;
 }

From c01ac075752871a143d325dfa958c63e48b12976 Mon Sep 17 00:00:00 2001
From: Adrian Dusinkiewicz <155736789+adrianspdev@users.noreply.github.com>
Date: Tue, 12 May 2026 09:59:22 +0200
Subject: [PATCH 06/26] DEV-1646: Docs - Vue 3 component as a custom cell
 renderer (#10257) (#12525)

---
 .../vue/example2.html                         |  3 +
 .../vue/example2.js                           | 62 +++++++++++++++++++
 .../vue3-custom-renderer-example.md           | 18 +++++-
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.html
 create mode 100644 docs/content/guides/integrate-with-vue3/vue3-custom-renderer-example/vue/example2.js

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
 

From 9a440fd3e014f078f9ecc88ac66c1a4f9294d46f Mon Sep 17 00:00:00 2001
From: Adrian Dusinkiewicz <155736789+adrianspdev@users.noreply.github.com>
Date: Tue, 12 May 2026 10:18:29 +0200
Subject: [PATCH 07/26] DEV-1629: Fix column/row resize handle drift after
 scroll with preventOverflow (#12515)

* DEV-1629: Fix column/row resize handle drift after scroll with preventOverflow

`getRelativeCellPositionWithinWindow` ignored the master holder's internal
scroll. When `preventOverflow` forced an overlay onto the window while the
master kept scrolling its holder, the resize handle landed offset by the
scroll amount, making the column/row impossible to resize.

Compensate the spreader-based offsets with the master scroll position only
when the master scrolls a holder. When the master itself scrolls the window,
the existing math is correct and is preserved unchanged.

Closes #10403

* DEV-1629: Add changelog entry for PR #12515
---
 .changelogs/12515.json                        |  8 +++
 .../3rdparty/walkontable/src/overlay/_base.js | 12 +++-
 .../__tests__/manualColumnResize.spec.js      | 53 ++++++++++++++++++
 .../__tests__/rtl/manualColumnResize.spec.js  | 24 ++++++++
 .../__tests__/manualRowResize.spec.js         | 55 +++++++++++++++++++
 5 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 .changelogs/12515.json

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/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/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);
+    });
+  });
 });

From 6476f2db8c154491897b4ccb1fa570060aa2d569 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=E2=80=98Budzio=E2=80=99=20Budnik?=
 <571316+budnix@users.noreply.github.com>
Date: Tue, 12 May 2026 10:45:52 +0200
Subject: [PATCH 08/26] DEV-1630: Unify handsontable/scripts into a single
 dispatcher with tasks.json (#12511)

---
 .ai/STACK.md                                  |   3 +-
 .ai/TESTING.md                                |  12 +-
 .../skills/handsontable-e2e-testing/SKILL.md  |  12 +-
 .../skills/handsontable-unit-testing/SKILL.md |   6 +-
 .claude/skills/node-scripts-dev/SKILL.md      |  53 ++-
 .claude/skills/pr-creation/SKILL.md           |   4 +-
 handsontable/.config/styles-development.js    |   2 +-
 handsontable/.config/walkontable.js           |   2 +-
 handsontable/AGENTS.md                        |  18 +-
 handsontable/package.json                     | 107 +++--
 handsontable/scripts/parallel-build.mjs       | 266 -------------
 handsontable/scripts/run.mjs                  | 373 ++++++++++++++++++
 handsontable/scripts/tasks.json               | 245 ++++++++++++
 handsontable/scripts/utils/run-step.mjs       | 250 ++++++++++++
 handsontable/scripts/utils/scheduler.mjs      | 113 ++++++
 handsontable/test/__mocks__/cssPolyfill.js    | 150 ++++---
 .../run-puppeteer-on-watchers-change.mjs      |  42 +-
 handsontable/test/scripts/run-puppeteer.mjs   |  11 +-
 wrappers/react-wrapper/package.json           |   1 +
 wrappers/react-wrapper/test/bootstrap.js      |   6 +-
 20 files changed, 1259 insertions(+), 417 deletions(-)
 delete mode 100644 handsontable/scripts/parallel-build.mjs
 create mode 100644 handsontable/scripts/run.mjs
 create mode 100644 handsontable/scripts/tasks.json
 create mode 100644 handsontable/scripts/utils/run-step.mjs
 create mode 100644 handsontable/scripts/utils/scheduler.mjs

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..9ab82a50746 100644
--- a/.ai/TESTING.md
+++ b/.ai/TESTING.md
@@ -28,18 +28,18 @@ pnpm --filter handsontable run test:unit
 pnpm --filter handsontable run test:e2e
 
 # Run specific unit test pattern (must be run from handsontable/ directory):
-npm run test:unit --testPathPattern=cellMeta
+npm run test:unit -- --testPathPattern=cellMeta
 
 # Run specific E2E test pattern (must be run from handsontable/ directory):
+# Pass --testPathPattern and --theme after `--` so they go to the wrapper script,
+# not to npm's config system (avoids npm deprecation warning).
 # 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
+npm run test:e2e.dump -- --testPathPattern=filters
 # Step 2: run puppeteer against the filtered bundle:
 npm run test:e2e.puppeteer
 # Or, to do both in one command (also rebuilds UMD bundles):
-npm run test:e2e --testPathPattern=filters
+npm run test:e2e -- --testPathPattern=filters
 # NOTE: changing the pattern requires re-running test:e2e.dump — the pattern is compiled in.
 # NOTE: when invoking the two steps separately, pass --testPathPattern AND --theme to BOTH
 # commands. Each `npm run` is a separate npm process with its own env; puppeteer computes
@@ -56,7 +56,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/.claude/skills/handsontable-e2e-testing/SKILL.md b/.claude/skills/handsontable-e2e-testing/SKILL.md
index cb585125020..3bd9f6d6c0e 100644
--- a/.claude/skills/handsontable-e2e-testing/SKILL.md
+++ b/.claude/skills/handsontable-e2e-testing/SKILL.md
@@ -131,23 +131,23 @@ 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.
+**Always use `--` before `--testPathPattern` and `--theme`.** The `test:e2e` script is now a Node.js wrapper (`scripts/test-e2e.mjs`) that reads these flags from `process.argv` and propagates them as env vars to both the dump step and Puppeteer. Passing them without `--` triggers an npm deprecation warning and will stop working in a future npm major.
 
-**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..32e7495172e 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..1f0aacb2fe5 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/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..7a8d4f3fc6d 100644
--- a/handsontable/AGENTS.md
+++ b/handsontable/AGENTS.md
@@ -52,9 +52,9 @@ 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`)
-- E2E with theme: `npm run test:e2e --testPathPattern=<regex> --theme=horizon` (themes: `classic`, `main`, `horizon`; default: `main`)
+- 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`)
+- 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/`
 
 ## Common Pitfalls
@@ -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..3b5da429b45
--- /dev/null
+++ b/handsontable/scripts/run.mjs
@@ -0,0 +1,373 @@
+/**
+ * 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;
+const taskNames = (isParallel || isSequential) ? [] : mainArgs;
+
+// Extract special env-propagated flags from extra args.
+const patternArg = extraArgs.find(a => a.startsWith('--testPathPattern='));
+const themeArg = extraArgs.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.
+const passthroughFlags = extraArgs;
+
+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; }
+
+    const child = spawn(cmd, [], {
+      cwd,
+      env: { ...baseEnv, PATH: envPATH, NODE_NO_WARNINGS: '1', ...propagatedEnv },
+      // Pipe both stdout and stderr so lint errors (written to stdout by ESLint/Stylelint)
+      // are captured and shown on failure alongside any stderr diagnostics.
+      stdio: ['ignore', 'pipe', 'pipe'],
+      shell: true,
+    });
+
+    let combined = '';
+
+    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);
+
+        // Flush any captured output (e.g. ESLint/Stylelint warnings) that was
+        // collected while the task ran quietly. Build tools that exit 0 with no
+        // warnings produce empty output, so this is a no-op for them.
+        if (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 = 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/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/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;

From 88302784631efd1aefd6660bb5c3c624ad863380 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 11:17:06 +0200
Subject: [PATCH 09/26] DEV-1554: Fix light theme highlight for deleted
 Expressive Code lines (#12527)

Ensures deleted lines (`.ec-line.del`) have a consistent and subtle highlight in the light theme, matching the existing style for inserted lines.
---
 docs/src/styles/components/code.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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

From cd94d952f5210f3a847c6225d543c39d01de228d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=E2=80=98Budzio=E2=80=99=20Budnik?=
 <571316+budnix@users.noreply.github.com>
Date: Tue, 12 May 2026 12:09:59 +0200
Subject: [PATCH 10/26] DEV-1649: Split demo-page skill into dev-pr.html and
 dev-latest.html (#12545)

---
 .../skills/handsontable-demo-page/SKILL.md    | 269 +++++++++---------
 1 file changed, 129 insertions(+), 140 deletions(-)

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.

From 3e969f638c845639bc622f3f7256db7e43aa49b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=E2=80=98Budzio=E2=80=99=20Budnik?=
 <571316+budnix@users.noreply.github.com>
Date: Tue, 12 May 2026 12:14:06 +0200
Subject: [PATCH 11/26] DEV-1650: Fix build pipeline noise - suppress child
 output on TTY success (#12547)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* DEV-1650: Fix build pipeline noise - suppress output on TTY success

* DEV-1650: Narrow fix — strip only rspack success line, keep lint warnings

* DEV-1650: Add --verbose flag to parallel build pipeline

* DEV-1650: Fix --verbose stripped from puppeteer passthrough flags

--verbose was unconditionally removed from passthroughFlags, breaking
test:e2e.verbose — puppeteer tasks list --verbose in their passthroughFilter
to control Jasmine output verbosity. buildCmd()'s passthroughFilter already
gates which tasks receive which flags, so build tasks remain unaffected.
---
 handsontable/scripts/run.mjs | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/handsontable/scripts/run.mjs b/handsontable/scripts/run.mjs
index 3b5da429b45..aaec0b722d8 100644
--- a/handsontable/scripts/run.mjs
+++ b/handsontable/scripts/run.mjs
@@ -84,6 +84,12 @@ const themeArg = extraArgs.find(a => a.startsWith('--theme='));
 // 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 = extraArgs;
 
 const propagatedEnv = {};
@@ -223,19 +229,23 @@ function runParallelTask(name, spinner) {
 
     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 },
-      // Pipe both stdout and stderr so lint errors (written to stdout by ESLint/Stylelint)
-      // are captured and shown on failure alongside any stderr diagnostics.
-      stdio: ['ignore', 'pipe', 'pipe'],
+      stdio,
       shell: true,
     });
 
     let combined = '';
 
-    child.stdout.on('data', (d) => { combined += d.toString(); });
-    child.stderr.on('data', (d) => { combined += d.toString(); });
+    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);
@@ -252,10 +262,9 @@ function runParallelTask(name, spinner) {
       } else {
         spinner.finish(name, true, elapsed);
 
-        // Flush any captured output (e.g. ESLint/Stylelint warnings) that was
-        // collected while the task ran quietly. Build tools that exit 0 with no
-        // warnings produce empty output, so this is a no-op for them.
-        if (combined.trim()) {
+        // 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`);
         }
 
@@ -306,7 +315,7 @@ async function runPipeline(name, parallel) {
 
     tasks.forEach((t) => { subTasks[t] = TASKS[t] ?? { cmd: t, deps: [] }; });
 
-    const spinner = new ParallelSpinner();
+    const spinner = isVerbose ? { start: () => {}, finish: () => {} } : new ParallelSpinner();
     const totalStart = performance.now();
 
     try {

From 78f6753082dde1d77249cc4087094659473dcf66 Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Tue, 12 May 2026 12:18:07 +0200
Subject: [PATCH 12/26] DEV-1647: Fix built-in cell types example for React and
 Angular (#12540)

Replace Handsontable.renderers.TextRenderer (undefined when using
handsontable/base) with textRenderer imported directly from
handsontable/renderers/textRenderer.
---
 .../content/guides/cell-types/cell-type/angular/example1.ts | 6 +++---
 docs/content/guides/cell-types/cell-type/react/example1.jsx | 6 +++---
 docs/content/guides/cell-types/cell-type/react/example1.tsx | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

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/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';
   };

From aed715e90c6c735877bbd440a08cfb48f36e4b48 Mon Sep 17 00:00:00 2001
From: KrzysztofZie <krzysztof.zielinski.speednet@handsontable.com>
Date: Tue, 12 May 2026 12:53:34 +0200
Subject: [PATCH 13/26] =?UTF-8?q?Revert=20"DEV-413=20-=20*Computas*=20-=20?=
 =?UTF-8?q?`minSpareRows`=20creates=20a=20conflict=20when=20we=20ask=20?=
 =?UTF-8?q?=E2=80=A6"=20(#12544)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "DEV-413 - *Computas* - `minSpareRows` creates a conflict when we ask …"

This reverts commit 84e4c6d8d2ba2d24a7e90b4df3d07dabae10193a.

* DEV-413 - *Computas* - minSpareRows creates a conflict when we ask for the dataset.length

* DEV-413 - *Computas* - minSpareRows creates a conflict when we ask for the dataset.length
---
 .changelogs/12519.json                        |  8 --
 .../projects/hot-table/jest.config.js         | 17 ++---
 .../src/lib/hot-table.component.spec.ts       | 75 ++++++++-----------
 .../hot-table/src/lib/hot-table.component.ts  | 34 +++------
 4 files changed, 52 insertions(+), 82 deletions(-)
 delete mode 100644 .changelogs/12519.json

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/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;
     }

From 12a934f395fbd7b58726ea432cb0541adf3a4e6c Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Tue, 12 May 2026 13:03:23 +0200
Subject: [PATCH 14/26] DEV-1631: Fix dialog hide() resetting scroll position
 when no prior selection (#12514)

* DEV-1631: Fix dialog hide scrolling viewport to top when no prior selection

When the loading overlay was hidden with no prior cell selection (user
was just scrolling), dialog.js called selectCell(0, 0) which scrolled
the viewport back to the top. Pass scrollToCell=false so the viewport
stays at the user's current scroll position.

* DEV-1631: Add changelog entry for PR #12514

* DEV-1631: Clear selection state in else branch of dialog.hide()

Null out #selectionState consistently in both branches of the
hide() method, matching the if-branch behavior.

* DEV-1631: Fix repeated show/hide cycles scrolling to row 0

The previous fix (selectCell(0,0,,,false)) caused a cascade: the
second hide() found #selectionState with ranges.length=1 (from
the first hide selecting (0,0)), taking the if-branch which calls
importSelection -> setRangeFocus -> afterSetFocus ->
viewportScroller.scrollTo(0,0) unsuspended, scrolling to row 0.

Fix: when no prior selection existed, call view.render() only.
This preserves the exact pre-dialog state (no selection, same
scroll position) across any number of show/hide cycles.

Added regression test for the repeated cycle scenario.
---
 .changelogs/12514.json                        |  8 ++
 handsontable/src/plugins/dialog/dialog.js     |  3 +-
 .../loading/__tests__/options/hide.spec.js    | 76 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 .changelogs/12514.json

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/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();
+  });
 });

From 7f189c67f97c21331d8afc4f0428494ac644181f Mon Sep 17 00:00:00 2001
From: Marek Martuszewski <marek@fachowo.co>
Date: Tue, 12 May 2026 13:04:08 +0200
Subject: [PATCH 15/26] Simplify import-csv-excel recipe: one section + empty
 state, no preview (#12524)

- Drop the textarea/preview pattern; Choose file and Load sample data
  share a single dropzone and feed loadIntoGrid() directly.
- Lazy-init Handsontable behind an empty-state panel so the grid no
  longer shows a single blank cell before any import.
- Restyle dropzone, buttons, and surrounding UI to match the spreadsheet
  look (edge-to-edge dividers, border-radius 0, gray-6/gray-5 tokens).
- Align Step 1/2/4/5, "Try it quickly", "How it works", and
  "What you learned" with the simplified demo.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../import-csv-excel/angular/example1.css     | 121 ++++++++++++--
 .../import-csv-excel/angular/example1.ts      | 115 +++++--------
 .../import-csv-excel/import-csv-excel.md      | 155 +++++++++---------
 .../import-csv-excel/javascript/example1.css  | 153 +++++++++--------
 .../import-csv-excel/javascript/example1.html |  38 ++---
 .../import-csv-excel/javascript/example1.js   |  96 ++++-------
 .../import-csv-excel/javascript/example1.ts   | 109 ++++--------
 .../import-csv-excel/react/example1.css       | 146 +++++++++--------
 .../import-csv-excel/react/example1.jsx       | 133 +++++----------
 .../import-csv-excel/react/example1.tsx       | 133 +++++----------
 10 files changed, 554 insertions(+), 645 deletions(-)

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>
   );
 };

From 0e78f95c42e38939deda96a91661ac418d84c177 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:04:47 +0200
Subject: [PATCH 16/26] DEV-1557: docs: Support inline markdown in Starlight
 aside blocks (#12529)

Adds support for rendering inline markdown (bold, inline code, links) within
Starlight aside directive bodies (`:::tip`, etc.). Previously, these elements
were not processed by remark-directive. This change introduces a dedicated
plugin and integrates it into the existing documentation preprocessors.
---
 docs/README-EDITING.md                        |   2 +
 docs/package.json                             |   1 +
 .../__tests__/aside-inline-markdown.test.mjs  |  68 +++++++++++
 docs/src/plugins/aside-inline-markdown.mjs    | 108 ++++++++++++++++++
 docs/src/plugins/framework-loader.mjs         |   5 +-
 docs/src/plugins/vuepress-preprocessor.mjs    |  23 ++--
 6 files changed, 192 insertions(+), 15 deletions(-)
 create mode 100644 docs/src/plugins/__tests__/aside-inline-markdown.test.mjs
 create mode 100644 docs/src/plugins/aside-inline-markdown.mjs

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/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;
     }
 

From 039d78872d748f7155c025ec8ba286a4b5b99806 Mon Sep 17 00:00:00 2001
From: Adrian Dusinkiewicz <155736789+adrianspdev@users.noreply.github.com>
Date: Tue, 12 May 2026 13:05:33 +0200
Subject: [PATCH 17/26] DEV-1623: Translate merged cells through manual moves
 and column freeze (#10437) (#12508)

* DEV-1623: Translate merged cells through manual moves and column freeze

Adds before/after column-move, row-move, and column-freeze hook handlers to
the mergeCells plugin. They snapshot each merge's physical span before the
reorder and re-derive its visual coordinates after, so merges follow their
data instead of staying behind on visual indexes. When the resulting visual
indexes are no longer contiguous, the merge auto-splits; single-cell
fragments are dropped.

Fixes #10437.

* DEV-1623: Rename changelog to PR number

* DEV-1623: Set changelog issueOrPR to PR number

* DEV-1623: Address PR review (xit, asserts, auto add, docs)

- Enable freeze E2E test (xit -> it); freeze hooks were already wired.
- Tighten weak overlap-fragment test asserts and rename it to match
  the deterministic scenario it actually exercises.
- Pass auto=true to MergedCellsCollection.add() during internal
  translation rebuild to skip overlap warnings.
- Document split / silent-singleton-drop behavior in the merge-cells
  guide and point the JSDoc note at it.

* DEV-1623: Fix jsdoc type expression for detectContiguousRuns return
---
 .changelogs/12508.json                        |   8 +
 .../cell-features/merge-cells/merge-cells.md  |   9 +
 .../__tests__/cellsCollection.unit.js         | 156 +++++++++++
 .../mergeCells/__tests__/mergeCells.spec.js   | 262 ++++++++++++++++++
 .../src/plugins/mergeCells/cellsCollection.js | 133 +++++++++
 .../src/plugins/mergeCells/mergeCells.js      | 155 +++++++++++
 6 files changed, 723 insertions(+)
 create mode 100644 .changelogs/12508.json

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/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/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.
    *

From 6eb653c5d31b36e77e471394430010f5b5713d4a Mon Sep 17 00:00:00 2001
From: Szymon Dolnik <42141039+Haxikowy@users.noreply.github.com>
Date: Tue, 12 May 2026 13:06:05 +0200
Subject: [PATCH 18/26] DEV-1478: Row pre-populating docs - simplify examples
 for better DX (#12531)

* DEV-1478: Restructure Row pre-populating page into 3 progressive examples

Split the single complex example into three progressive examples:
1. Basic spare rows (minSpareRows: 1 only)
2. Spare rows with placeholder styling (+ custom renderer)
3. Auto-populating with template values (existing full example, now example3)

All three examples use the same data for consistency.

* DEV-1478: Fix prose wording and add Result section to row-prepopulating guide

* DEV-1478: Fix Angular examples to pass data via [data] binding separately from settings

* DEV-1478: Fix Angular example3 - init data via binding, access hotInstance inline in beforeChange

---------

Co-authored-by: Szymon Dolnik <szymon.dolnik@handsontable.com>
---
 .../row-prepopulating/angular/example1.ts     | 128 ++--------------
 .../row-prepopulating/angular/example2.html   |   3 +
 .../row-prepopulating/angular/example2.ts     |  84 +++++++++++
 .../row-prepopulating/angular/example3.html   |   3 +
 .../row-prepopulating/angular/example3.ts     | 138 ++++++++++++++++++
 .../row-prepopulating/javascript/example1.js  |  86 ++---------
 .../row-prepopulating/javascript/example1.ts  |  68 +--------
 .../row-prepopulating/javascript/example2.js  |  42 ++++++
 .../row-prepopulating/javascript/example2.ts  |  51 +++++++
 .../row-prepopulating/javascript/example3.js  |  84 +++++++++++
 .../row-prepopulating/javascript/example3.ts  |  86 +++++++++++
 .../rows/row-prepopulating/react/example1.jsx | 103 ++-----------
 .../rows/row-prepopulating/react/example1.tsx | 114 ++-------------
 .../rows/row-prepopulating/react/example2.jsx |  54 +++++++
 .../rows/row-prepopulating/react/example2.tsx |  61 ++++++++
 .../rows/row-prepopulating/react/example3.jsx |  99 +++++++++++++
 .../rows/row-prepopulating/react/example3.tsx | 108 ++++++++++++++
 .../row-prepopulating/row-prepopulating.md    |  84 ++++++++++-
 18 files changed, 949 insertions(+), 447 deletions(-)
 create mode 100644 docs/content/guides/rows/row-prepopulating/angular/example2.html
 create mode 100644 docs/content/guides/rows/row-prepopulating/angular/example2.ts
 create mode 100644 docs/content/guides/rows/row-prepopulating/angular/example3.html
 create mode 100644 docs/content/guides/rows/row-prepopulating/angular/example3.ts
 create mode 100644 docs/content/guides/rows/row-prepopulating/javascript/example2.js
 create mode 100644 docs/content/guides/rows/row-prepopulating/javascript/example2.ts
 create mode 100644 docs/content/guides/rows/row-prepopulating/javascript/example3.js
 create mode 100644 docs/content/guides/rows/row-prepopulating/javascript/example3.ts
 create mode 100644 docs/content/guides/rows/row-prepopulating/react/example2.jsx
 create mode 100644 docs/content/guides/rows/row-prepopulating/react/example2.tsx
 create mode 100644 docs/content/guides/rows/row-prepopulating/react/example3.jsx
 create mode 100644 docs/content/guides/rows/row-prepopulating/react/example3.tsx

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
 

From 1f732a9422b1833ef496caba89e66409d9397734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:06:27 +0200
Subject: [PATCH 19/26] DEV-1559: Apply boxes style to related links in cell
 type guide (#12532)

---
 docs/content/guides/cell-types/cell-type/cell-type.md | 4 ++++
 1 file changed, 4 insertions(+)

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**

From 86da2b8e286eb55cfd12be98bc4973c2a313b2ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:06:59 +0200
Subject: [PATCH 20/26] DEV-1564: Implement responsive video embeds with 16:9
 aspect ratio (#12534)

Wraps embedded iframes in a new `docs-video-embed` container and applies CSS to ensure they scale correctly while maintaining a 16:9 aspect ratio across different screen sizes.
---
 .../formula-calculation/formula-calculation.md  |  6 ++++--
 docs/src/styles/layout/page.css                 | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

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/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
  * ------------------------------------------------------------------------- */

From b1c994bb702f070641f739f6ffd0f0c66619d122 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:08:04 +0200
Subject: [PATCH 21/26] DEV-1567: Refactor and apply consistent styling to
 dialog & loading guide examples (#12536)

* DEV-1567: Refactor and apply consistent styling to dialog guide examples

Refactor inline styles for control buttons into reusable CSS classes
(`example-controls-container`, `controls`) across all framework examples.
Add `type="button"` for semantic correctness. Angular examples now use
`ViewEncapsulation.None` to ensure global styles are applied. Also,
introduce a new class (`hot-doc-dialog-html-button`) and corresponding CSS
to style buttons embedded within dialog HTML content.

* DEV-1568: Standardize button controls in dialog loading examples

Refactor button controls in loading dialog examples to use `example-controls-container` and `controls` CSS classes, replacing inline styles for consistent presentation. Adds `type="button"` for semantic correctness. For Angular examples, set `ViewEncapsulation.None` to ensure global styles are applied.
---
 .../guides/dialog/dialog/angular/example3.ts  |  2 +-
 .../guides/dialog/dialog/angular/example4.ts  | 13 ++++++++-----
 .../guides/dialog/dialog/angular/example5.ts  |  3 ++-
 .../guides/dialog/dialog/angular/example8.ts  | 11 +++++++----
 .../dialog/dialog/javascript/example3.js      |  4 +++-
 .../dialog/dialog/javascript/example3.ts      |  2 +-
 .../dialog/dialog/javascript/example4.html    | 10 ++++++----
 .../dialog/dialog/javascript/example8.html    |  8 +++++---
 .../guides/dialog/dialog/react/example3.jsx   |  2 +-
 .../guides/dialog/dialog/react/example3.tsx   |  2 +-
 .../guides/dialog/dialog/react/example4.jsx   | 10 ++++++----
 .../guides/dialog/dialog/react/example4.tsx   | 10 ++++++----
 .../guides/dialog/dialog/react/example8.jsx   |  8 +++++---
 .../guides/dialog/dialog/react/example8.tsx   |  8 +++++---
 .../guides/dialog/loading/angular/example3.ts | 18 +++++++++++-------
 .../guides/dialog/loading/angular/example4.ts | 15 +++++++++------
 .../dialog/loading/javascript/example3.html   |  8 +++++---
 .../dialog/loading/javascript/example4.html   | 10 ++++++----
 .../guides/dialog/loading/react/example3.jsx  | 10 ++++++----
 .../guides/dialog/loading/react/example3.tsx  | 10 ++++++----
 .../guides/dialog/loading/react/example4.jsx  | 10 ++++++----
 .../guides/dialog/loading/react/example4.tsx  | 10 ++++++----
 docs/src/styles/interactive-example.css       | 19 ++++++++++++++++---
 23 files changed, 128 insertions(+), 75 deletions(-)

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/src/styles/interactive-example.css b/docs/src/styles/interactive-example.css
index 9db564ad34d..39749e7be32 100644
--- a/docs/src/styles/interactive-example.css
+++ b/docs/src/styles/interactive-example.css
@@ -90,6 +90,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 +104,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 +125,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;

From 46fb0a96a3d4144702342ea1f9cc8c74ea22fce0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:09:19 +0200
Subject: [PATCH 22/26] DEV-1566: Use same-origin fetch URLs in Angular
 saving-data demo (#12541)

---
 .../guides/getting-started/saving-data/angular/example1.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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: {

From 028aae327abe9644c41dc8d56b5279b2a177d58b Mon Sep 17 00:00:00 2001
From: Szymon Dolnik <42141039+Haxikowy@users.noreply.github.com>
Date: Tue, 12 May 2026 13:09:44 +0200
Subject: [PATCH 23/26] DEV-1609: Remove redundant language-selector example
 from React and Angular docs (#12542)

The example2 demo added framework boilerplate (styled dropdown, state
management, outside-click handling) that obscured the Handsontable API
it was meant to show. The static language table in the guide already
covers language discovery; example1 covers the language option itself.

Co-authored-by: Szymon Dolnik <szymon.dolnik@handsontable.com>
---
 .../language/angular/example2.html            |   3 -
 .../language/angular/example2.ts              | 120 ------------------
 .../internationalization/language/language.md |  22 ----
 .../language/react/example2.jsx               |  98 --------------
 .../language/react/example2.tsx               |  99 ---------------
 5 files changed, 342 deletions(-)
 delete mode 100644 docs/content/guides/internationalization/language/angular/example2.html
 delete mode 100644 docs/content/guides/internationalization/language/angular/example2.ts
 delete mode 100644 docs/content/guides/internationalization/language/react/example2.jsx
 delete mode 100644 docs/content/guides/internationalization/language/react/example2.tsx

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;

From f7de734e93925b7d3861c7397f438cbb8eeb3693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?=
 <artur.medrygal@handsontable.com>
Date: Tue, 12 May 2026 13:10:31 +0200
Subject: [PATCH 24/26] DEV-1565: Use boxes-list on server-side data subguides
 (#12535)

---
 .../server-side-data-configuration.md         |  4 ++
 .../server-side-data/server-side-data-crud.md |  4 ++
 .../server-side-data-fetching.md              | 42 +++++++++++++++++--
 .../server-side-data-migration.md             |  4 ++
 4 files changed, 51 insertions(+), 3 deletions(-)

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.

From 77acc1093c9a7bb5c6c46c10f2aa062c6fc2c4a6 Mon Sep 17 00:00:00 2001
From: GabberPL <38166011+GabberPL@users.noreply.github.com>
Date: Tue, 12 May 2026 13:12:32 +0200
Subject: [PATCH 25/26] DEV-1632: Widen external search input to show full
 placeholder text (#12543)

https://claude.ai/code/session_01Exsxgtbz56XucH7JLgfsGm

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../external-search-box/angular/example1.ts                 | 1 +
 .../external-search-box/external-search-box.md              | 6 ++++--
 .../external-search-box/javascript/example1.css             | 3 +++
 .../external-search-box/react/example1.css                  | 3 +++
 4 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 docs/content/recipes/filtering-and-search/external-search-box/javascript/example1.css
 create mode 100644 docs/content/recipes/filtering-and-search/external-search-box/react/example1.css

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;
+}

From 5cfb35f0e463481812f8acebe8da7218e8654ed0 Mon Sep 17 00:00:00 2001
From: Mateusz Wojczal <mateusz@qunabu.com>
Date: Tue, 12 May 2026 13:12:53 +0200
Subject: [PATCH 26/26] DEV-1608: Fix Angular docs redirects for versions
 12.1-15.3 (#12504)

Redirect /docs/{12.1-15.3}/angular-data-grid/* to /docs/angular-data-grid/
instead of /docs/javascript-data-grid/, since the Angular package existed
for those versions but had no dedicated documentation pages.

Co-authored-by: Claude <noreply@anthropic.com>
---
 docs/netlify/_redirects | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

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