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

.gitignore

@@ -33,8 +33,7 @@ dist-demo
 website
 
 # Tests Report & Coverage
-.jest-cache
-jest-coverage
+.vitest
 **/coverage
 **/vitest-coverage
 **/cypress-report

AGENTS.md

@@ -167,6 +167,113 @@ When VEXP is available, use `run_pipeline` before built-in file search, grep, or
 
 VEXP can auto-detect intent, combine hybrid ranking, use session memory, and expand its context budget as needed.
 
+<!-- rtk-instructions v2 -->
+# RTK - Token-Optimized CLI
+
+`rtk` is a CLI proxy that filters and compresses command output, saving 60-90% tokens.
+
+## Rule
+
+When `rtk` is available, prefer `rtk <command>` for terminal commands.
+
+Use this as the default-first policy for tests, lint/typecheck/build, git, and diagnostics commands. Apply the same pattern to analogous commands.
+
+Examples:
+
+```text
+vitest                     -> rtk vitest
+jest                       -> rtk jest
+git status                 -> rtk git status
+tsc                        -> rtk tsc
+ls                         -> rtk ls .
+```
+
+Git mappings:
+
+```text
+git status                 -> rtk git status
+git log -n 10              -> rtk git log -n 10
+git diff                   -> rtk git diff
+```
+
+If `rtk` is unavailable, run the raw command instead of failing.
+
+For Vitest, default to `rtk vitest run`. Use direct repo-root paths for focused specs and `test/vitest.config.mts`, for example:
+
+```text
+rtk vitest run --config test/vitest.config.mts packages/common/src/services/foo.spec.ts
+```
+
+Prefer `vitest run` over `pnpm exec vitest` when the Vitest binary is available.
+
+For Cypress, default to `rtk cypress run --config-file test/cypress.config.ts --spec <spec-path>`. If Cypress is not on `PATH`, use `pnpm exec cypress run --config-file test/cypress.config.ts --spec <spec-path>`.
+
+## Low-token availability check
+
+For PowerShell terminals, check once per terminal session and cache the result:
+
+```powershell
+if (-not $env:RTK_AVAILABLE) {
+	if (Get-Command rtk -ErrorAction SilentlyContinue) {
+		$env:RTK_AVAILABLE = '1'
+	}
+	else {
+		$env:RTK_AVAILABLE = '0'
+	}
+}
+```
+
+For bash/zsh terminals:
+
+```bash
+if [ -z "${RTK_AVAILABLE+x}" ]; then
+  if command -v rtk >/dev/null 2>&1; then
+    export RTK_AVAILABLE=1
+  else
+    export RTK_AVAILABLE=0
+  fi
+fi
+```
+
+Use `rtk` only when the cached availability flag is enabled. Do not re-run the availability check before every command. If an `rtk` command unexpectedly fails because it is unavailable, set the flag to `0` and retry once without `rtk`.
+
+## Meta commands
+
+Use these directly:
+
+```text
+rtk gain              # Token savings dashboard
+rtk gain --history    # Per-command savings history
+rtk discover          # Find missed rtk opportunities
+rtk proxy <cmd>       # Run raw (no filtering) but track usage
+```
+<!-- /rtk-instructions -->
+
+## VEXP context tools <!-- vexp v2.0.31 -->
+
+When VEXP context tools are available, `run_pipeline` is the primary tool and must be called first for repository tasks. VEXP returns pre-indexed, graph-ranked context in a single call.
+
+### Workflow
+
+1. Call `run_pipeline` with the task description before other repository searches.
+2. Make targeted changes from the returned context.
+3. Call `run_pipeline` again only when more context is needed.
+
+### Available MCP tools
+
+- `run_pipeline` - primary tool; runs capsule, impact, and memory in one call.
+- `get_skeleton` - compact file structure.
+- `index_status` - indexing status.
+- `expand_vexp_ref` - expand V-REF placeholders in VEXP output.
+
+### Agentic search
+
+When VEXP is available, use `run_pipeline` before built-in file search, grep, or codebase indexing. If spawning sub-agents or background tasks, pass them the context from `run_pipeline` rather than letting them search independently.
+
+### Multi-repo
+
+`run_pipeline` can query all indexed repositories. Use `repos: ["alias"]` to scope it, and use `index_status` to see aliases. If VEXP is unavailable, use the normal repository tools.
+
 ## Documentation
 
  Update corresponding framework documentation under `frameworks/*/docs/` when applicable.

demos/aurelia/test/cypress/support/commands.ts

@@ -32,19 +32,19 @@ declare global {
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;

demos/react-fluent/src/examples/slickgrid/base-fluent-grid-options.ts

@@ -16,7 +16,7 @@ export const baseFluentGridOption: GridOption = {
     iconCssClass: 'fi fi-navigation',
     iconClearAllFiltersCommand: 'fi fi-filter-dismiss',
     iconClearAllSortingCommand: 'fi fi-arrow-sort',
-    iconClearFrozenColumnsCommand: 'fi fi-pin-off',
+    iconClearPinningCommand: 'fi fi-pin-off',
     iconExportCsvCommand: 'fi fi-arrow-download',
     iconExportExcelCommand: 'fi fi-arrow-download',
     iconExportPdfCommand: 'fi fi-arrow-download',
@@ -31,8 +31,8 @@ export const baseFluentGridOption: GridOption = {
     iconClearFilterCommand: 'fi fi-filter-dismiss',
     iconClearSortCommand: 'fi fi-arrow-sort',
     iconFilterShortcutSubMenu: 'fi fi-filter',
-    iconFreezeColumns: 'fi fi-pin',
-    iconUnfreezeColumns: 'fi fi-pin-off',
+    iconPinningColumns: 'fi fi-pin',
+    iconUnpinningColumns: 'fi fi-pin-off',
     iconSortAscCommand: 'fi fi-sort-arrow-up',
     iconSortDescCommand: 'fi fi-sort-arrow-down',
     iconColumnHideCommand: 'fi fi-dismiss',

demos/react/test/cypress/support/commands.ts

@@ -32,19 +32,19 @@ declare global {
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;

demos/vanilla/src/app-routing.ts

@@ -44,6 +44,7 @@ import Example43 from './examples/example43.js';
 import Example44 from './examples/example44.js';
 import Example45 from './examples/example45.js';
 import Example46 from './examples/example46.js';
+import Example47 from './examples/example47.js';
 import Icons from './examples/icons.js';
 import type { RouterConfig } from './interfaces.js';
 
@@ -98,6 +99,7 @@ export class AppRouting {
       { route: 'example44', name: 'example44', view: './examples/example44.html', viewModel: Example44, title: 'Example44' },
       { route: 'example45', name: 'example45', view: './examples/example45.html', viewModel: Example45, title: 'Example45' },
       { route: 'example46', name: 'example46', view: './examples/example46.html', viewModel: Example46, title: 'Example46' },
+      { route: 'example47', name: 'example47', view: './examples/example47.html', viewModel: Example47, title: 'Example47' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' },
     ];

demos/vanilla/src/app.html

@@ -34,7 +34,7 @@ <h4 class="is-size-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.trigger="loadRoute('example01')">Example01 - Basic Grids</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example02')">Example02 - Grouping &amp; Aggregators</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example03')">Example03 - Draggable Grouping</a>
-          <a class="navbar-item" onclick.trigger="loadRoute('example04')">Example04 - Pinned (frozen) Columns/Rows</a>
+          <a class="navbar-item" onclick.trigger="loadRoute('example04')">Example04 - Pinned Columns/Rows</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example05')">Example05 - Tree Data with Parent/Child refs</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example06')">Example06 - Tree Data from Hierarchical View Dataset</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example07')">Example07 - Row Move &amp; Row Selections</a>
@@ -87,6 +87,7 @@ <h4 class="is-size-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.trigger="loadRoute('example44')">Example44 - Variable Row Height (provider)</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example45')">Example45 - Variable Row Height (metadata)</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example46')">Example46 - RTL (Right-to-Left)</a>
+          <a class="navbar-item" onclick.trigger="loadRoute('example47')">Example47 - Sticky Financial Report</a>
         </div>
       </div>
     </div>

demos/vanilla/src/examples/example03.html

@@ -1,7 +1,10 @@
 <h3 class="title is-3">
-  Example 03 - Draggable Grouping
+  Example 03 - Draggable Grouping & Aggregators
   <span class="subtitle">(with Salesforce Theme)</span>
   <span class="d-inline-flex">
+    <button class="button is-small" type="button" data-test="toggle-subtitle" onclick.trigger="toggleSubTitle()">
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
     <button class="button is-small" onclick.trigger="toggleDarkMode()" data-test="toggle-dark-mode">
       <span class="mdi mdi-theme-light-dark"></span>
       <span> Toggle Light/Dark</span>
@@ -19,7 +22,7 @@ <h3 class="title is-3">
   </div>
 </h3>
 
-<h5 class="mb-3 italic example-details">
+<h5 class="mb-3 italic example-details" style.bind="subTitleStyle">
   Please note that the grid below initially has its first column "Title" hidden by default for E2E testing.
 </h5>
 

demos/vanilla/src/examples/example03.ts

@@ -50,6 +50,7 @@ export default class Example03 {
   draggableGroupingPlugin: SlickDraggableGrouping;
   loadingClass = '';
   selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
+  subTitleStyle = 'display: block';
 
   constructor() {
     this._bindingEventService = new BindingEventService();
@@ -348,10 +349,10 @@ export default class Example03 {
       },
       enableFormattedDataCache: false, // enable it when you have a large dataset (e.g. we'll enable it when loading over 10K)
       headerMenu: {
-        hideFreezeColumnsCommand: false,
+        hidePinningColumnsCommand: false,
       },
       gridMenu: {
-        hideClearFrozenColumnsCommand: false,
+        hideClearPinningCommand: false,
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
@@ -390,7 +391,7 @@ export default class Example03 {
       rowHeight: 33,
       headerRowHeight: 35,
       enableDraggableGrouping: true,
-      // frozenColumn: 2,
+      // pinning: { columns: { left: 2  } },
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // hideGroupSortIcons: true,
@@ -636,4 +637,9 @@ export default class Example03 {
       this.sgb?.slickGrid?.gotoCell(command.row, command.cell, false);
     }
   }
+
+  toggleSubTitle() {
+    this.subTitleStyle = this.subTitleStyle === 'display: block' ? 'display: none' : 'display: block';
+    this.sgb.resizerService.resizeGrid();
+  }
 }

demos/vanilla/src/examples/example04.html

@@ -1,5 +1,8 @@
 <h3 class="title is-3">
-  Example 04 - Pinned (frozen) Columns/Rows
+  Example 04 - Pinned Columns/Rows
+  <button class="button is-small" type="button" data-test="toggle-subtitle" onclick.trigger="toggleSubTitle()">
+    <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+  </button>
   <div class="subtitle code-link">
     <span class="is-size-6">see</span>
     <a
@@ -10,7 +13,7 @@ <h3 class="title is-3">
       <span class="mdi mdi-link-variant"></span> code
     </a>
   </div>
-  <h6 class="italic content example-details">
+  <h6 class="italic content example-details" style.bind="subTitleStyle">
     The Autocomplete Editor (City of Origin) might throw some console errors because it uses "http://gd.geobytes.com/" request (which is not
     using https). You can allow "Insecure content" in your browser for this website only to test the Autocomplete
   </h6>
@@ -19,33 +22,42 @@ <h6 class="italic content example-details">
 <div class="row mb-3">
   <span>
     <label for="">Pinned Rows: </label>
-    <input type="number" class="frozen-row-count is-narrow input is-small" value.bind="frozenRowCount" />
-    <button class="button is-small" onclick.trigger="changeFrozenRowCount()">Set</button>
+    <input type="number" class="frozen-row-count is-narrow input is-small" value.bind="pinnedRowCount" />
+    <button class="button is-small" onclick.trigger="changePinnedRowCount()">Set</button>
   </span>
   <span class="ml-1">
     <label for="">Pinned Columns: </label>
-    <input type="number" class="frozen-column-count is-narrow input is-small" value.bind="frozenColumnCount" />
-    <button class="button is-small" onclick.trigger="changeFrozenColumnCount()">Set</button>
+    <input type="number" class="frozen-column-count is-narrow input is-small" value.bind="pinnedColumnCount" />
+    <button class="button is-small" onclick.trigger="changePinnedColumnCount()">Set</button>
+  </span>
+  <span class="ml-1">
+    <label for="">Pinned Right: </label>
+    <input type="number" min="0" class="pinned-right-column-count is-narrow input is-small" value.bind="pinnedRightColumnCount" />
+    <button class="button is-small" onclick.trigger="changePinnedRightColumnCount()">Set</button>
   </span>
   <span class="ml-3">
-    <button class="button is-small" onclick.trigger="setFrozenColumns(-1)" data-test="remove-frozen-column-button">
+    <button class="button is-small" onclick.trigger="setPinnedColumns(-1, 0)" data-test="remove-frozen-column-button">
       <span class="mdi mdi-close"></span>
-      <span>Remove Frozen Columns</span>
+      <span>Remove Pinned Columns</span>
+    </button>
+    <button class="button is-small" data-test="set-3frozen-columns" onclick.trigger="setPinnedColumns(2)">
+      <span class="mdi mdi-pin-outline"></span>
+      <span>Pin 3 Columns</span>
     </button>
-    <button class="button is-small" data-test="set-3frozen-columns" onclick.trigger="setFrozenColumns(2)">
+    <button class="button is-small" data-test="toggle-pinned-right" onclick.trigger="toggleRightPinning()">
       <span class="mdi mdi-pin-outline"></span>
-      <span>Set 3 Frozen Columns</span>
+      <span>Toggle Right Pinning</span>
     </button>
-    <button class="button is-small" data-test="toggle-frozen-bottom" onclick.trigger="toggleFrozenBottomRows()">
+    <button class="button is-small" data-test="toggle-frozen-bottom" onclick.trigger="togglePinnedBottomRows()">
       <span class="mdi mdi-flip-vertical"></span>
       <span>Toggle Pinned Rows (top/bottom)</span>
     </button>
     <button class="button is-small ml-3" data-test="toggle-select-all-row" onclick.trigger="toggleWhichRowToShowSelectAll()">
       <span class="mdi mdi-swap-horizontal mdi-rotate-90"></span>
       <span>Toggle which row to show "Select All" checkbox</span>
     </button>
-    <button class="button is-small ml-3" data-test="set-large-freezed-columns" onclick.trigger="setLargeFreezedColumns()">
-      <span>Set Large Freezed Columns</span>
+    <button class="button is-small ml-3" data-test="set-large-pinned-columns" onclick.trigger="setLargePinnedColumns()">
+      <span>Set Large Pinned Columns</span>
     </button>
   </span>
 </div>