feat(grid)!: replace frozen panes with pinning and sticky docking

.agents/skills/README.md

@@ -0,0 +1,21 @@
+# Repository AI Skills
+
+Portable project skills live under `.agents/skills/<skill-name>/SKILL.md` and can be discovered
+by Cursor and other Agent Skills-compatible tools.
+
+Available portable skills
+
+- [`pinning-sticky/SKILL.md`](pinning-sticky/SKILL.md) — configuration and maintenance guidance
+  for permanent pinning and sticky docking.
+- [`create-slickgrid-package/SKILL.md`](create-slickgrid-package/SKILL.md) — guidance for creating
+  optional SlickGrid packages and external resources.
+- [`read-docs-and-interfaces/SKILL.md`](read-docs-and-interfaces/SKILL.md) — repository documentation
+  and TypeScript interface discovery.
+- [`webmcp/SKILL.md`](webmcp/SKILL.md) — WebMCP API, demo, and test guidance.
+
+New cross-agent skills should use the portable structure above.
+
+Project implementation plans live under `.agents/plans/`:
+
+- [`formatted-data-cache-implementation.md`](../plans/formatted-data-cache-implementation.md)
+- [`pinning-sticky-progress.md`](../plans/pinning-sticky-progress.md)

.github/skills/create-slickgrid-package.SKILL.md → .agents/skills/create-slickgrid-package/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: create-slickgrid-package
+description: Create a new optional SlickGrid Universal package or external resource in the monorepo.
+---
+
 ## Create a new SlickGrid‑Universal package
 
 New packages in the slickgrid‑universal monorepo are typically created when adding a new optional **External Resource** (i.e. a plugin or component that integrates with the grid but is not part of the core). This skill documents the recommended steps and minimal references for doing so. Use `SlickEmptyWarningComponent` ([packages/empty-warning-component](packages/empty-warning-component)) as a simple reference implementation.

.agents/skills/pinning-sticky/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: pinning-sticky
+description: Configure, document, review, or change SlickGrid permanent pinning and scroll-activated sticky docking.
+---
+
+# Pinning and Sticky Docking
+
+Use this skill when configuring, documenting, reviewing, or changing SlickGrid permanent pinning
+or scroll-activated sticky docking.
+
+## Canonical configuration
+
+- Use the nested `GridOption.pinning` shape for permanent pins:
+  `columns.left/right` and `rows.top/bottom`.
+- Column references may be numeric boundaries or explicit IDs/indexes. Explicit arrays may be
+  non-contiguous, for example `columns.left: ['account', 'status']`.
+- Row references may be indexes or `datasetIdPropertyName` values. An in-range numeric row
+  reference is interpreted as an index first. Non-contiguous rows are valid, for example
+  `rows.top: [0, 2, 4]`.
+- `Column.pinned` is the per-column permanent-pin form. `Column.pinnable` only controls whether
+  built-in pinning commands are exposed.
+- Do not infer pinning from drag operations across center/pinned bands. Reordering stays within a
+  band; pinning and unpinning are explicit through configuration, APIs, or menus.
+
+## Sticky behavior
+
+- Use `Column.sticky` and `GridOption.stickyRows` for scroll-activated docking. Sticky state is
+  scroll-dependent and is not serialized in Grid State/Presets; permanent pinning is serialized.
+- Multiple active top sticky rows stack in natural dataset order. They do not push each other out.
+- Sticky row capacity uses the current viewport, not a fixed row count. The default row budget is
+  60% of viewport height after permanent pinned rows are accounted for, and measured row heights
+  determine how many candidates fit. `docking.maxRowViewportHeightPercent` and
+  `docking.overflowStrategy` control this behavior.
+- Permanent pinned rows remain part of the normal dataset height. When non-contiguous rows are
+  pinned, unpinned rows are laid out contiguously so skipped indexes do not create blank gaps.
+
+## Maintenance verification
+
+When changing this feature:
+
+1. Check the shared interfaces and the root documentation first:
+   `packages/common/src/interfaces/`, `docs/grid-functionalities/pinning.md`, and
+   `docs/grid-functionalities/sticky.md`.
+2. Keep the equivalent pinning/sticky documentation aligned in Angular, Aurelia, React, and Vue.
+3. Add or update focused common tests for resolver/layout behavior, then preserve the existing
+   Vanilla and framework Cypress coverage for pinning, sticky docking, resizing, editing,
+   selection, grouping, spans, RTL, and variable row heights.
+4. Treat `DockingController` as an internal implementation module; do not make it part of the
+   public API without an explicit API decision.
+5. Keep fast vertical-scroll blanking as a separate virtual-rendering task; do not conflate it
+   with sticky-row activation or docking-layout refresh.
+
+## Source documentation
+
+- [Implementation progress](../../plans/pinning-sticky-progress.md)
+- [Pinning](../../../docs/grid-functionalities/pinning.md)
+- [Sticky docking](../../../docs/grid-functionalities/sticky.md)
+- [Grid State and Presets](../../../docs/grid-functionalities/grid-state-preset.md)
+- [v11 migration guide](../../../docs/migrations/migration-to-11.x.md)

.github/skills/skill-read-docs-and-interfaces.SKILL.md → .agents/skills/read-docs-and-interfaces/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: read-docs-and-interfaces
+description: Find the right SlickGrid documentation, interfaces, demos, and tests for a requested feature or API.
+---
+
 # Skill: Read Docs & Interfaces
 
 Purpose

.github/skills/skill-webmcp.SKILL.md → .agents/skills/webmcp/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: webmcp
+description: Discover, configure, or review SlickGrid WebMCP tools, documentation, interfaces, demos, and tests.
+---
+
 # Skill: WebMCP / AI Toolkit
 
 Purpose

.rtk/filters.toml

@@ -0,0 +1,13 @@
+# Project-local RTK filters — commit this file with your repo.
+# Filters here override user-global and built-in filters.
+# Docs: https://github.com/rtk-ai/rtk#custom-filters
+schema_version = 1
+
+# Example: suppress build noise from a custom tool
+# [filters.my-tool]
+# description = "Compact my-tool output"
+# match_command = "^my-tool\\s+build"
+# strip_ansi = true
+# strip_lines_matching = ["^\\s*$", "^Downloading", "^Installing"]
+# max_lines = 30
+# on_empty = "my-tool: ok"

demos/aurelia/src/assets/i18n/en/aurelia-slickgrid.json

@@ -7,7 +7,7 @@
   "CLEAR_ALL_FILTERS": "Clear all Filters",
   "CLEAR_ALL_GROUPING": "Clear all Grouping",
   "CLEAR_ALL_SORTING": "Clear all Sorting",
-  "CLEAR_PINNING": "Unfreeze Columns/Rows",
+  "CLEAR_PINNING": "Unpin Columns/Rows",
   "CLONE": "Clone",
   "COLLAPSE_ALL_GROUPS": "Collapse all Groups",
   "COLUMNS": "Columns",
@@ -28,7 +28,11 @@
   "FILTER_SHORTCUTS": "Filter Shortcuts",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
   "FORCE_FIT_COLUMNS": "Force fit columns",
-  "FREEZE_COLUMNS": "Freeze Columns",
+  "PIN_COLUMN": "Column Pinning",
+  "PIN_COLUMNS_LEFT": "Pin Columns Left",
+  "PIN_COLUMNS_RIGHT": "Pin Columns Right",
+  "PIN_LEFT": "Pin Left",
+  "PIN_RIGHT": "Pin Right",
   "INVALID_FLOAT": "The number must be valid and have a maximum of {{maxDecimal}} decimals.",
   "GREATER_THAN": "Greater than",
   "GREATER_THAN_OR_EQUAL_TO": "Greater than or equal to",
@@ -63,7 +67,8 @@
   "SYNCHRONOUS_RESIZE": "Synchronous resize",
   "TOGGLE_FILTER_ROW": "Toggle Filter Row",
   "TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
-  "UNFREEZE_COLUMNS": "Unfreeze Columns",
+  "UNPIN_COLUMN": "Unpin Column",
+  "UNPIN_COLUMNS": "Unpin All Columns",
   "X_OF_Y_SELECTED": "# of % selected",
   "X_OF_Y_MASS_SELECTED": "{{x}} of {{y}} selected",
   "BILLING": {

demos/aurelia/src/assets/i18n/fr/aurelia-slickgrid.json

@@ -7,7 +7,7 @@
   "CLEAR_ALL_FILTERS": "Supprimer tous les filtres",
   "CLEAR_ALL_GROUPING": "Supprimer tous les groupes",
   "CLEAR_ALL_SORTING": "Supprimer tous les tris",
-  "CLEAR_PINNING": "Dégeler les colonnes/rangées",
+  "CLEAR_PINNING": "Désépingler les colonnes/rangées",
   "CLONE": "Cloner",
   "COLLAPSE_ALL_GROUPS": "Réduire tous les groupes",
   "COLUMNS": "Colonnes",
@@ -28,7 +28,11 @@
   "FILTER_SHORTCUTS": "Raccourcis de filtre",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} éléments",
   "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
-  "FREEZE_COLUMNS": "Geler les colonnes",
+  "PIN_COLUMN": "Épinglage de colonne",
+  "PIN_COLUMNS_LEFT": "Épingler les colonnes à gauche",
+  "PIN_COLUMNS_RIGHT": "Épingler les colonnes à droite",
+  "PIN_LEFT": "Épingler à gauche",
+  "PIN_RIGHT": "Épingler à droite",
   "GREATER_THAN": "Plus grand que",
   "GREATER_THAN_OR_EQUAL_TO": "Plus grand ou égal à",
   "GROUP_BY": "Grouper par",
@@ -63,7 +67,8 @@
   "SYNCHRONOUS_RESIZE": "Redimension synchrone",
   "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
   "TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
-  "UNFREEZE_COLUMNS": "Dégeler les colonnes",
+  "UNPIN_COLUMN": "Désépingler la colonne",
+  "UNPIN_COLUMNS": "Désépingler toutes les colonnes",
   "X_OF_Y_SELECTED": "# de % sélectionnés",
   "X_OF_Y_MASS_SELECTED": "{{x}} de {{y}} sélectionnés",
   "BILLING": {

demos/aurelia/src/examples/locales/fr.ts

@@ -19,6 +19,11 @@ export const localeFrench = {
   TEXT_EXPORT_TO_TEXT_FORMAT: 'Exporter en format texte',
   TEXT_FILTER_SHORTCUTS: 'Raccourcis de filtre',
   TEXT_FORCE_FIT_COLUMNS: 'Ajustement forcé des colonnes',
+  TEXT_PIN_COLUMN: 'Épinglage de colonne',
+  TEXT_PIN_COLUMNS_LEFT: 'Épingler les colonnes à gauche',
+  TEXT_PIN_COLUMNS_RIGHT: 'Épingler les colonnes à droite',
+  TEXT_PIN_LEFT: 'Épingler à gauche',
+  TEXT_PIN_RIGHT: 'Épingler à droite',
   TEXT_GROUP_BY: 'Grouper par',
   TEXT_HIDE_COLUMN: 'Cacher la colonne',
   TEXT_LAST_UPDATE: 'Dernière mise à jour',
@@ -32,10 +37,11 @@ export const localeFrench = {
   TEXT_SORT_ASCENDING: 'Trier par ordre croissant',
   TEXT_SORT_DESCENDING: 'Trier par ordre décroissant',
   TEXT_STARTS_WITH: 'Commence par',
-  TEXT_UNFREEZE_COLUMNS: 'Dégeler les colonnes',
+  TEXT_UNPIN_COLUMN: 'Désépingler la colonne',
+  TEXT_UNPIN_COLUMNS: 'Désépingler toutes les colonnes',
   TEXT_X_OF_Y_SELECTED: '# de % sélectionné',
   TEXT_X_OF_Y_MASS_SELECTED: '{{x}} de {{y}} sélectionnés',
-  TEXT_CLEAR_PINNING: 'Dégeler les colonnes/rangées',
+  TEXT_CLEAR_PINNING: 'Désépingler les colonnes/rangées',
   TEXT_EQUAL_TO: 'Égal à',
   TEXT_GREATER_THAN: 'Plus grand que',
   TEXT_GREATER_THAN_OR_EQUAL_TO: 'Plus grand ou égal à',

demos/aurelia/src/examples/slickgrid/example07.ts

@@ -68,8 +68,6 @@ export class Example07 {
       ...this.gridOptions1,
       enableHeaderMenu: true,
       enableFiltering: true,
-      // frozenColumn: 2,
-      // frozenRow: 2,
       headerButton: {
         onCommand: (_e: any, args) => this.handleOnCommand(_e, args, 2),
       },

demos/aurelia/src/examples/slickgrid/example14.html

@@ -47,14 +47,14 @@ <h3>
 
 <hr />
 
-<h3>Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h3>
+<h3>Grid 2 <small>(with Header Grouping &amp; Pinned Columns)</small></h3>
 
 <div class="col-sm 12">
-  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="setFrozenColumns2(-1)" data-test="remove-frozen-column-button">
-    <i class="mdi mdi-close"></i> Remove Frozen Columns
+  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="setPinnedColumns2(-1)" data-test="remove-pinned-column-button">
+    <i class="mdi mdi-close"></i> Remove Pinned Columns
   </button>
-  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="setFrozenColumns2(2)" data-test="set-3frozen-columns">
-    <i class="mdi mdi-pin-outline"></i> Set 3 Frozen Columns
+  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="setPinnedColumns2(2)" data-test="set-3pinned-columns">
+    <i class="mdi mdi-pin-outline"></i> Set 3 Pinned Columns
   </button>
 </div>
 

demos/aurelia/src/examples/slickgrid/example14.ts

@@ -1,7 +1,6 @@
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { PdfExportService } from '@slickgrid-universal/pdf-export';
 import { type AureliaGridInstance, type Column, type GridOption, type ItemMetadata } from 'aurelia-slickgrid';
-import './example14.scss'; // provide custom CSS/SASS styling
 
 export class Example14 {
   aureliaGrid1!: AureliaGridInstance;
@@ -56,6 +55,7 @@ export class Example14 {
       preHeaderPanelHeight: 28,
       gridHeight: 275,
       gridWidth: 800,
+      rowHeight: 33,
       enablePdfExport: true,
       enableExcelExport: true,
       excelExportOptions: {
@@ -68,6 +68,9 @@ export class Example14 {
           getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
         },
       },
+      headerMenu: {
+        showPinningCommands: true,
+      },
       gridMenu: {
         iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default)
       },
@@ -104,15 +107,16 @@ export class Example14 {
       explicitInitialization: true,
       gridHeight: 275,
       gridWidth: 800,
-      frozenColumn: 2,
+      rowHeight: 33,
+      pinning: { columns: { left: 2 } },
       enablePdfExport: true,
       enableExcelExport: true,
       excelExportOptions: {
         exportWithFormatter: false,
       },
       externalResources: [new ExcelExportService(), new PdfExportService()],
-      gridMenu: { hideClearFrozenColumnsCommand: false },
-      headerMenu: { hideFreezeColumnsCommand: false },
+      gridMenu: { hideClearPinningCommand: false },
+      headerMenu: { showPinningCommands: true },
     };
   }
 
@@ -124,7 +128,7 @@ export class Example14 {
         id: i,
         num: i,
         title: 'Task ' + i,
-        duration: '5 days',
+        duration: '5 days with some long text to test column span',
         percentComplete: Math.round(Math.random() * 100),
         start: '01/01/2009',
         finish: '01/05/2009',
@@ -134,8 +138,8 @@ export class Example14 {
     return mockDataset;
   }
 
-  setFrozenColumns2(frozenCols: number) {
-    this.gridObj2.setOptions({ frozenColumn: frozenCols });
+  setPinnedColumns2(pinnedCols: number) {
+    this.gridObj2.setOptions({ pinning: { columns: { left: pinnedCols } } });
     this.gridOptions2 = this.gridObj2.getOptions();
   }
 

demos/aurelia/src/examples/slickgrid/example15.ts

@@ -193,10 +193,10 @@ export class Example15 {
       },
       gridMenu: {
         hideForceFitButton: true,
-        hideClearFrozenColumnsCommand: false,
+        hideClearPinningCommand: false,
       },
       headerMenu: {
-        hideFreezeColumnsCommand: false,
+        showPinningCommands: true,
       },
       enablePagination: true,
       pagination: {

demos/aurelia/src/examples/slickgrid/example18.html

@@ -42,8 +42,8 @@ <h2>
   <div class="row">
     <div class="col-sm-12">
       <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-5k-rows-btn" click.trigger="loadData(5000)">5K rows</button>
-      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" click.trigger="loadData(50000)">
-        50K rows
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500k-rows-btn" click.trigger="loadData(500000)">
+        500K rows
       </button>
       <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-grouping-btn" click.trigger="clearGroupsAndSelects()">
         <i class="mdi mdi-close"></i> Clear grouping