@pdanpdan/virtual-scroll 0.4.0 → 0.6.0

package/src/utils/virtual-scroll-logic.test.ts

@@ -13,7 +13,7 @@ import {
 } from './virtual-scroll-logic';
 
 describe('virtual-scroll-logic', () => {
-  describe('calculateTotalSize', () => {
+  describe('calculate total size', () => {
     it('calculates vertical total size with fixed size', () => {
       const result = calculateTotalSize({
         columnCount: 0,
@@ -29,10 +29,31 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
+      // 50 * 100 + 10 * 99
       expect(result.height).toBe(5990);
       expect(result.width).toBe(500);
     });
 
+    it('calculates vertical total size with dynamic sizes', () => {
+      const result = calculateTotalSize({
+        columnCount: 0,
+        columnGap: 0,
+        direction: 'vertical',
+        fixedSize: null,
+        fixedWidth: null,
+        gap: 5,
+        itemsLength: 10,
+        queryColumn: () => 0,
+        queryX: () => 0,
+        queryY: (idx) => idx * 45,
+        usableHeight: 500,
+        usableWidth: 500,
+      });
+      // 45 * 10 - 5 (gap after last item)
+      expect(result.height).toBe(445);
+      expect(result.width).toBe(500);
+    });
+
     it('calculates horizontal total size with fixed size', () => {
       const result = calculateTotalSize({
         columnCount: 0,
@@ -52,23 +73,23 @@ describe('virtual-scroll-logic', () => {
       expect(result.height).toBe(500);
     });
 
-    it('calculates grid (both) total size with fixed row size and dynamic column width', () => {
+    it('calculates horizontal total size with dynamic sizes', () => {
       const result = calculateTotalSize({
-        columnCount: 5,
-        columnGap: 5,
-        direction: 'both',
-        fixedSize: 50,
+        columnCount: 0,
+        columnGap: 10,
+        direction: 'horizontal',
+        fixedSize: null,
         fixedWidth: null,
-        gap: 10,
+        gap: 0,
         itemsLength: 100,
-        queryColumn: (idx) => idx * 105,
-        queryX: () => 0,
+        queryColumn: () => 0,
+        queryX: (idx) => idx * 60,
         queryY: () => 0,
         usableHeight: 500,
         usableWidth: 500,
       });
-      expect(result.height).toBe(5990);
-      expect(result.width).toBe(520);
+      expect(result.width).toBe(5990);
+      expect(result.height).toBe(500);
     });
 
     it('calculates grid (both) total size with fixed sizes', () => {
@@ -90,18 +111,18 @@ describe('virtual-scroll-logic', () => {
       expect(result.width).toBe(520);
     });
 
-    it('calculates grid (both) total size with dynamic sizes', () => {
+    it('calculates grid (both) total size with fixed row size and dynamic column width', () => {
       const result = calculateTotalSize({
         columnCount: 5,
         columnGap: 5,
         direction: 'both',
-        fixedSize: null,
+        fixedSize: 50,
         fixedWidth: null,
         gap: 10,
         itemsLength: 100,
         queryColumn: (idx) => idx * 105,
         queryX: () => 0,
-        queryY: (idx) => idx * 60,
+        queryY: () => 0,
         usableHeight: 500,
         usableWidth: 500,
       });
@@ -109,40 +130,23 @@ describe('virtual-scroll-logic', () => {
       expect(result.width).toBe(520);
     });
 
-    it('calculates horizontal total size with dynamic sizes', () => {
+    it('calculates grid (both) total size with dynamic sizes', () => {
       const result = calculateTotalSize({
-        columnCount: 0,
-        columnGap: 10,
-        direction: 'horizontal',
+        columnCount: 5,
+        columnGap: 5,
+        direction: 'both',
         fixedSize: null,
         fixedWidth: null,
-        gap: 0,
+        gap: 10,
         itemsLength: 100,
-        queryColumn: () => 0,
-        queryX: (idx) => idx * 60,
-        queryY: () => 0,
-        usableHeight: 500,
-        usableWidth: 500,
-      });
-      expect(result.width).toBe(5990);
-    });
-
-    it('calculates vertical total size with dynamic sizes', () => {
-      const result = calculateTotalSize({
-        columnCount: 0,
-        columnGap: 0,
-        direction: 'vertical',
-        fixedSize: null,
-        fixedWidth: null,
-        gap: 5,
-        itemsLength: 10,
-        queryColumn: () => 0,
+        queryColumn: (idx) => idx * 105,
         queryX: () => 0,
-        queryY: (idx) => idx * 45,
+        queryY: (idx) => idx * 60,
         usableHeight: 500,
         usableWidth: 500,
       });
-      expect(result.height).toBe(445);
+      expect(result.height).toBe(5990);
+      expect(result.width).toBe(520);
     });
 
     it('calculates total sizes for single item (both, fixed rows, fixed cols)', () => {
@@ -160,8 +164,6 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      // columnCount=1 * (100 + 10) - 10 = 100.
-      // itemsLength=1 * (50 + 10) - 10 = 50.
       expect(result.height).toBe(500);
       expect(result.width).toBe(500);
     });
@@ -199,7 +201,6 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      // queryX(1) = 60. gap = 10. total = 60 - 10 = 50.
       expect(result.width).toBe(50);
     });
 
@@ -218,11 +219,10 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      // queryY(1) = 60. gap = 10. total = 60 - 10 = 50.
       expect(result.height).toBe(50);
     });
 
-    it('calculates total height for single small item (vertical, dynamic size, itemsLength 1)', () => {
+    it('calculates total height for single small item (vertical, dynamic size, itemslength 1)', () => {
       const result = calculateTotalSize({
         columnCount: 0,
         columnGap: 0,
@@ -240,7 +240,7 @@ describe('virtual-scroll-logic', () => {
       expect(result.height).toBe(0);
     });
 
-    it('calculates total width for single small item (horizontal, dynamic size, itemsLength 1)', () => {
+    it('calculates total width for single small item (horizontal, dynamic size, itemslength 1)', () => {
       const result = calculateTotalSize({
         columnCount: 0,
         columnGap: 10,
@@ -258,7 +258,7 @@ describe('virtual-scroll-logic', () => {
       expect(result.width).toBe(0);
     });
 
-    it('calculates total height for single item (both, dynamic size, queryY)', () => {
+    it('calculates total height for single item (both, dynamic size, queryy)', () => {
       const result = calculateTotalSize({
         columnCount: 1,
         columnGap: 10,
@@ -315,14 +315,14 @@ describe('virtual-scroll-logic', () => {
       expect(result.width).toBe(500);
     });
 
-    it('returns 0 for empty items with fixed sizes (horizontal)', () => {
+    it('returns viewport size for empty items with dynamic sizes (both)', () => {
       const result = calculateTotalSize({
         columnCount: 0,
         columnGap: 10,
-        direction: 'horizontal',
-        fixedSize: 50,
+        direction: 'both',
+        fixedSize: null,
         fixedWidth: null,
-        gap: 0,
+        gap: 10,
         itemsLength: 0,
         queryColumn: () => 0,
         queryX: () => 0,
@@ -330,17 +330,18 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      expect(result.width).toBe(0);
+      expect(result.height).toBe(500);
+      expect(result.width).toBe(500);
     });
 
-    it('returns 0 for empty items with fixed sizes (vertical)', () => {
+    it('returns 0 for empty items with fixed sizes (horizontal)', () => {
       const result = calculateTotalSize({
         columnCount: 0,
-        columnGap: 0,
-        direction: 'vertical',
+        columnGap: 10,
+        direction: 'horizontal',
         fixedSize: 50,
         fixedWidth: null,
-        gap: 10,
+        gap: 0,
         itemsLength: 0,
         queryColumn: () => 0,
         queryX: () => 0,
@@ -348,15 +349,15 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      expect(result.height).toBe(0);
+      expect(result.width).toBe(0);
     });
 
-    it('returns viewport size for empty items with dynamic sizes (both)', () => {
+    it('returns 0 for empty items with fixed sizes (vertical)', () => {
       const result = calculateTotalSize({
         columnCount: 0,
-        columnGap: 10,
-        direction: 'both',
-        fixedSize: null,
+        columnGap: 0,
+        direction: 'vertical',
+        fixedSize: 50,
         fixedWidth: null,
         gap: 10,
         itemsLength: 0,
@@ -366,8 +367,7 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 500,
       });
-      expect(result.height).toBe(500);
-      expect(result.width).toBe(500);
+      expect(result.height).toBe(0);
     });
 
     it('returns 0 for empty items with dynamic sizes (horizontal)', () => {
@@ -407,7 +407,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateRange', () => {
+  describe('calculate range', () => {
     it('calculates vertical range with dynamic size', () => {
       const result = calculateRange({
         bufferAfter: 0,
@@ -448,11 +448,6 @@ describe('virtual-scroll-logic', () => {
         usableHeight: 500,
         usableWidth: 100,
       });
-      // item 0: 0-50, gap 50-60
-      // item 1: 60-110, gap 110-120
-      // item 2: 120-170, gap 170-180
-      // scroll 120 -> item 2.
-      // viewport 100 -> ends at 220. item 3: 180-230.
       expect(result.start).toBe(2);
       expect(result.end).toBe(4);
     });
@@ -502,14 +497,6 @@ describe('virtual-scroll-logic', () => {
     });
 
     it('calculates horizontal range with dynamic size where end item is partially visible (edge case)', () => {
-      // Setup:
-      // Item 0: 0-100
-      // Item 1: 100-200
-      // Viewport: 0-150.
-      // Target end = 150.
-      // findLowerBoundX(150) -> returns 1 because queryX(1)=100 <= 150, queryX(2)=200 > 150.
-      // queryX(1) = 100 < 150.
-      // So end should increment to 2.
       const result = calculateRange({
         bufferAfter: 0,
         bufferBefore: 0,
@@ -532,11 +519,16 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateScrollTarget', () => {
+  describe('calculate scroll target', () => {
     it('calculates target for horizontal end alignment', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 100,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: 50,
@@ -548,24 +540,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 100,
         options: 'end',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 5000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
-      // item 10 at 500. ends at 550. viewport 500 -> targetX = 550 - 500 = 50.
       expect(result.targetX).toBe(50);
     });
 
     it('calculates target for grid column start alignment', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 50,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 10,
         direction: 'both',
         fixedSize: null,
@@ -577,23 +570,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 0,
         getItemSizeY: () => 0,
-        itemsLength: 100,
         options: { align: { x: 'start' } },
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 5500,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetX).toBe(1100);
     });
 
     it('calculates target for vertical start alignment with partial align in options object', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -605,24 +600,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 100,
-        options: { align: { y: 'start' } }, // x is missing
+        options: { align: { y: 'start' } },
         relativeScrollX: 50,
         relativeScrollY: 0,
         rowIndex: 10,
         totalHeight: 5000,
         totalWidth: 5000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetY).toBe(500);
-      expect(result.targetX).toBe(50); // auto, already visible
+      expect(result.targetX).toBe(50);
     });
 
     it('calculates target for horizontal start alignment with partial options object', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 100,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: 50,
@@ -634,24 +631,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 100,
-        options: { align: { x: 'start' } }, // y is missing, should default to 'auto'
+        options: { align: { x: 'start' } },
         relativeScrollX: 0,
         relativeScrollY: 50,
         rowIndex: 10,
         totalHeight: 5000,
         totalWidth: 5000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetX).toBe(500);
-      expect(result.targetY).toBe(50); // auto, already visible
+      expect(result.targetY).toBe(50);
     });
 
     it('calculates target for horizontal start alignment with options object', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 100,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: 50,
@@ -663,23 +662,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 100,
         options: { align: { x: 'start' } },
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 5000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetX).toBe(500);
     });
 
     it('calculates target for vertical start alignment with dynamic size', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: null,
@@ -691,15 +692,12 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 60,
         getItemSizeX: () => 0,
         getItemSizeY: () => 60,
-        itemsLength: 100,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: 10,
         totalHeight: 6000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetY).toBe(600);
       expect(result.itemHeight).toBe(50);
@@ -707,8 +705,13 @@ describe('virtual-scroll-logic', () => {
 
     it('calculates target for horizontal start alignment with dynamic size', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 100,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 10,
         direction: 'horizontal',
         fixedSize: null,
@@ -720,15 +723,12 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 60,
         getItemSizeY: () => 0,
-        itemsLength: 100,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 6000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetX).toBe(600);
       expect(result.itemWidth).toBe(50);
@@ -736,8 +736,13 @@ describe('virtual-scroll-logic', () => {
 
     it('calculates target for vertical center alignment', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -749,23 +754,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 100,
         options: 'center',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: 20,
         totalHeight: 5000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetY).toBe(775);
     });
 
-    it('calculates target when rowIndex is past itemsLength', () => {
+    it('calculates target when rowindex is past itemslength', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -777,54 +784,56 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 100,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: 200,
         totalHeight: 5000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetY).toBe(4500);
     });
 
     it('calculates target for grid bidirectional alignment', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 10,
-        columnCount: 50,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'both',
         fixedSize: 50,
         fixedWidth: null,
         gap: 0,
         getColumnQuery: (idx) => idx * 100,
-        getColumnSize: (_idx) => 100,
+        getColumnSize: () => 100,
         getItemQueryX: () => 0,
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 100,
         options: { x: 'center', y: 'end' },
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: 20,
         totalHeight: 5000,
         totalWidth: 5000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
-      // rowIndex 20 -> y=1000. end align -> 1000 - (500 - 50) = 550.
-      // colIndex 10 -> x=1000. center align -> 1000 - (500 - 100) / 2 = 1000 - 200 = 800.
       expect(result.targetY).toBe(550);
       expect(result.targetX).toBe(800);
     });
 
     it('calculates target accounting for active sticky item (vertical start alignment)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -836,27 +845,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: 150,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Item 100 is sticky
+        stickyIndices: [ 100 ],
       });
-      // Item 150 is at 150 * 50 = 7500.
-      // Sticky item 100 is active. Height = 50.
-      // Target should be 7500 - 50 = 7450.
       expect(result.targetY).toBe(7450);
     });
 
     it('calculates target accounting for active sticky item (horizontal start alignment)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 150,
-        columnCount: 200,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: 50,
@@ -868,27 +876,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 10000,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Item 100 is sticky
+        stickyIndices: [ 100 ],
       });
-      // Item 150 is at 150 * 50 = 7500.
-      // Sticky item 100 is active. Width = 50.
-      // Target should be 7500 - 50 = 7450.
       expect(result.targetX).toBe(7450);
     });
 
     it('calculates target for vertical start alignment (sticky indices present but none active)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -900,25 +907,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
-        rowIndex: 50, // Target 50 (2500)
+        rowIndex: 50,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Sticky 100 is AFTER target 50
+        stickyIndices: [ 100 ],
       });
-      // Should align to 2500 without adjustment
       expect(result.targetY).toBe(2500);
     });
 
     it('calculates target accounting for active sticky item (vertical start alignment, dynamic size)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: null,
@@ -930,25 +938,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
-        rowIndex: 150, // Target 150 (7500)
+        rowIndex: 150,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Sticky 100 is active. Height 50.
+        stickyIndices: [ 100 ],
       });
-      // Target 7500 - 50 = 7450.
       expect(result.targetY).toBe(7450);
     });
 
     it('calculates target accounting for active sticky item (vertical auto alignment, scrolling up)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -960,28 +969,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'auto',
         relativeScrollX: 0,
-        relativeScrollY: 8000, // Currently at item 160 (8000)
-        rowIndex: 120, // Target item 120 (6000)
+        relativeScrollY: 8000,
+        rowIndex: 120,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Item 100 is sticky
+        stickyIndices: [ 100 ],
       });
-      // Target 120 is at 6000.
-      // It is above viewport (8000). So it aligns to start.
-      // Sticky item 100 is active (index < 120). Height = 50.
-      // Target should be 6000 - 50 = 5950.
       expect(result.targetY).toBe(5950);
     });
 
     it('calculates target accounting for active sticky item (grid start alignment, fixed width)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 150,
-        columnCount: 200,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'both',
         fixedSize: 50,
@@ -993,27 +1000,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: { x: 'start' },
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 10000,
         totalWidth: 20000,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Item 100 is sticky
+        stickyIndices: [ 100 ],
       });
-      // Target col 150 is at 150 * 100 = 15000.
-      // Sticky item 100 is active. Width = 100.
-      // Target should be 15000 - 100 = 14900.
       expect(result.targetX).toBe(14900);
     });
 
     it('calculates target accounting for active sticky item (horizontal start alignment, dynamic size)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 150,
-        columnCount: 200,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: null,
@@ -1025,26 +1031,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 10000,
-        usableHeight: 500,
-        usableWidth: 500,
         stickyIndices: [ 100 ],
       });
-      // Target 150 at 7500. Sticky 100 at 5000, width 50.
-      // Target = 7500 - 50 = 7450.
       expect(result.targetX).toBe(7450);
     });
 
     it('calculates target accounting for active sticky item (grid start alignment, dynamic width)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 150,
-        columnCount: 200,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'both',
         fixedSize: null,
@@ -1056,15 +1062,12 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: { x: 'start' },
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 10000,
         totalWidth: 20000,
-        usableHeight: 500,
-        usableWidth: 500,
         stickyIndices: [ 100 ],
       });
       expect(result.targetX).toBe(14900);
@@ -1072,8 +1075,13 @@ describe('virtual-scroll-logic', () => {
 
     it('calculates target accounting for active sticky item (vertical auto alignment, dynamic size)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: null,
@@ -1085,15 +1093,12 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'auto',
         relativeScrollX: 0,
         relativeScrollY: 8000,
         rowIndex: 120,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
         stickyIndices: [ 100 ],
       });
       expect(result.targetY).toBe(5950);
@@ -1101,8 +1106,13 @@ describe('virtual-scroll-logic', () => {
 
     it('calculates target for vertical auto alignment (item taller than viewport)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 1000,
@@ -1114,30 +1124,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 1000,
         getItemSizeX: () => 0,
         getItemSizeY: () => 1000,
-        itemsLength: 10,
         options: 'auto',
         relativeScrollX: 0,
         relativeScrollY: 0,
-        rowIndex: 5, // Starts at 5000
+        rowIndex: 5,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
       });
-      // Item 5 starts at 5000, ends 6000.
-      // Viewport 0-500.
-      // Item > Viewport.
-      // 5000 > 0 + 0.5 && 6000 >= 500 - 0.5. (Visible check for large items)
-      // Actually, if it's not visible, auto align.
-      // targetStart = 5000. targetEnd = 5000 - (500 - 1000) = 5500.
-      // Nearest to 0 is 5000.
       expect(result.targetY).toBe(5000);
     });
 
     it('calculates target for vertical auto alignment (sticky indices present but none active)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 50,
@@ -1149,25 +1154,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 50,
         getItemSizeX: () => 0,
         getItemSizeY: () => 50,
-        itemsLength: 200,
         options: 'auto',
         relativeScrollX: 0,
         relativeScrollY: 8000,
-        rowIndex: 50, // Target 50 (2500).
+        rowIndex: 50,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Sticky 100 is AFTER target 50.
+        stickyIndices: [ 100 ],
       });
-      // Should align to 2500 normally without sticky adjustment.
       expect(result.targetY).toBe(2500);
     });
 
     it('calculates target for horizontal start alignment (sticky indices present but none active)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 50,
-        columnCount: 200,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'horizontal',
         fixedSize: 50,
@@ -1179,25 +1185,26 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 200,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 10000,
-        usableHeight: 500,
-        usableWidth: 500,
-        stickyIndices: [ 100 ], // Sticky 100 is AFTER target 50.
+        stickyIndices: [ 100 ],
       });
-      // Target 50 at 2500. No sticky adjustment.
       expect(result.targetX).toBe(2500);
     });
 
     it('calculates target for vertical auto alignment (large item already visible)', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
-        columnCount: 0,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 0,
         direction: 'vertical',
         fixedSize: 1000,
@@ -1209,26 +1216,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: (idx) => idx * 1000,
         getItemSizeX: () => 0,
         getItemSizeY: () => 1000,
-        itemsLength: 10,
         options: 'auto',
         relativeScrollX: 0,
-        relativeScrollY: 200, // Item 0 (0-1000) covers viewport (200-700).
+        relativeScrollY: 200,
         rowIndex: 0,
         totalHeight: 10000,
         totalWidth: 0,
-        usableHeight: 500,
-        usableWidth: 500,
       });
-      // Should stay at 200.
       expect(result.targetY).toBe(200);
     });
 
     it('detects visibility correctly when under a sticky item (auto alignment)', () => {
-      const getItemQueryY = (index: number) => index * 100;
-      const getItemSizeY = () => 100;
-
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnCount: 100,
         columnGap: 0,
         direction: 'vertical' as const,
@@ -1238,15 +1244,15 @@ describe('virtual-scroll-logic', () => {
         getColumnQuery: (idx: number) => idx * 100,
         getColumnSize: () => 100,
         getItemQueryX: (idx: number) => idx * 100,
-        getItemQueryY,
+        getItemQueryY: (index: number) => index * 100,
         getItemSizeX: () => 100,
-        getItemSizeY,
+        getItemSizeY: () => 100,
         itemsLength: 1000,
         options: 'auto' as const,
         relativeScrollX: 0,
-        relativeScrollY: 14950, // Row 150 is at 15000. It's at 50px from top.
+        relativeScrollY: 14950,
         rowIndex: 150,
-        stickyIndices: [ 100 ], // Sticky item at row 100 (10000), height 100.
+        stickyIndices: [ 100 ],
         totalHeight: 120000,
         totalWidth: 10000,
         usableHeight: 800,
@@ -1254,11 +1260,6 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-
-      // Row 150 starts at 15000. Viewport position = 15000 - 14950 = 50.
-      // Sticky row 100 is at 0..100 in viewport.
-      // Row 150 is hidden under sticky row 100.
-      // Expected: detects it's covered and scrolls to 15000 - 100 = 14900.
       expect(result.targetY).toBe(14900);
     });
 
@@ -1277,7 +1278,13 @@ describe('virtual-scroll-logic', () => {
       const getItemSizeY = (index: number) => (index % 2 === 0 ? 80 : 160);
 
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 50,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnCount: 100,
         columnGap: 0,
         direction: 'both' as const,
@@ -1303,16 +1310,18 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-
-      // itemY(150) = 18000.
-      // activeStickyIdx = 100. stickyHeight = 80.
-      // targetY = 18000 - 80 = 17920.
       expect(result.targetY).toBe(17920);
     });
 
     it('aligns to end when scrolling forward (vertical)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 150,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1338,17 +1347,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemY(150) = 15000. viewportHeight = 800. itemHeight = 100.
-      // targetEnd = 15000 - (800 - 100) = 14300.
-      // current relativeScrollY = 0.
-      // minimal movement would pick 14300 anyway.
-      expect(result.targetY).toBe(14300);
+      expect(result.targetY).toBe(14600);
       expect(result.effectiveAlignY).toBe('end');
     });
 
     it('aligns to start when scrolling backward (vertical)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 10,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1363,7 +1374,7 @@ describe('virtual-scroll-logic', () => {
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 15000, // We are at row 150
+        relativeScrollY: 15000,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1374,16 +1385,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemY(10) = 1000.
-      // relativeScrollY = 15000.
-      // minimal movement picks 1000.
       expect(result.targetY).toBe(1000);
       expect(result.effectiveAlignY).toBe('start');
     });
 
     it('stays put if already visible (vertical)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 150,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1398,7 +1412,7 @@ describe('virtual-scroll-logic', () => {
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 14500, // item 150 is at 15000. Viewport is 14500 to 15300.
+        relativeScrollY: 14500,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1409,13 +1423,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      expect(result.targetY).toBe(14500);
-      expect(result.effectiveAlignY).toBe('auto');
+      expect(result.targetY).toBe(14600);
+      expect(result.effectiveAlignY).toBe('end');
     });
 
     it('aligns to start if partially visible at top (backward scroll effect)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 150,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1430,7 +1450,7 @@ describe('virtual-scroll-logic', () => {
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 15050, // item 150 starts at 15000. Viewport is 15050 to 15850. Item is partially visible at top.
+        relativeScrollY: 15050,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1441,14 +1461,57 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // targetY should be 15000 (start alignment)
       expect(result.targetY).toBe(15000);
       expect(result.effectiveAlignY).toBe('start');
     });
 
+    it('does not account for non-sticky header (flowpaddingstarty) in scroll target calculation', () => {
+      const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
+        rowIndex: 10,
+        viewportWidth: 500,
+        viewportHeight: 500,
+        colIndex: null,
+        options: 'end' as const,
+        itemsLength: 100,
+        columnCount: 0,
+        direction: 'vertical' as const,
+        usableWidth: 1000,
+        usableHeight: 1000,
+        totalWidth: 1000,
+        totalHeight: 10000,
+        gap: 0,
+        columnGap: 0,
+        fixedSize: 100,
+        fixedWidth: null,
+        relativeScrollX: 0,
+        relativeScrollY: 0,
+        getItemSizeY: () => 100,
+        getItemSizeX: () => 1000,
+        getItemQueryY: (idx: number) => idx * 100,
+        getItemQueryX: () => 0,
+        getColumnSize: () => 0,
+        getColumnQuery: () => 0,
+        stickyIndices: [],
+        flowPaddingStartY: 150,
+      };
+
+      const result = calculateScrollTarget(params);
+      expect(result.targetY).toBe(750);
+    });
+
     it('aligns to end if partially visible at bottom (forward scroll effect)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 150,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1463,7 +1526,7 @@ describe('virtual-scroll-logic', () => {
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 14250, // item 150 is at 15000. Viewport ends at 15050. Item is partially visible at bottom.
+        relativeScrollY: 14250,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1474,14 +1537,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // targetY should be 15000 - (800 - 100) = 14300 (end alignment)
-      expect(result.targetY).toBe(14300);
+      expect(result.targetY).toBe(14600);
       expect(result.effectiveAlignY).toBe('end');
     });
 
     it('aligns large item correctly when scrolling forward (minimal movement)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 150,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1490,10 +1558,10 @@ describe('virtual-scroll-logic', () => {
         usableWidth: 1000,
         usableHeight: 500,
         totalWidth: 1000,
-        totalHeight: 1000000, // Large enough
+        totalHeight: 1000000,
         gap: 0,
         columnGap: 0,
-        fixedSize: 1000, // Large item
+        fixedSize: 1000,
         fixedWidth: null,
         relativeScrollX: 0,
         relativeScrollY: 0,
@@ -1507,17 +1575,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemY(150) = 150000. relativeScrollY = 0.
-      // targetStart = 150000.
-      // targetEnd = 150000 - (500 - 1000) = 150500.
-      // Minimal movement picks 150000.
       expect(result.targetY).toBe(150000);
       expect(result.effectiveAlignY).toBe('start');
     });
 
     it('aligns large item correctly when scrolling backward (minimal movement)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: 10,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: null,
         options: 'auto' as const,
         itemsLength: 1000,
@@ -1529,7 +1599,7 @@ describe('virtual-scroll-logic', () => {
         totalHeight: 1000000,
         gap: 0,
         columnGap: 0,
-        fixedSize: 1000, // Large item
+        fixedSize: 1000,
         fixedWidth: null,
         relativeScrollX: 0,
         relativeScrollY: 100000,
@@ -1543,17 +1613,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemY(10) = 10000. relativeScrollY = 100000.
-      // targetStart = 10000.
-      // targetEnd = 10000 - (500 - 1000) = 10500.
-      // Minimal movement picks 10500.
       expect(result.targetY).toBe(10500);
       expect(result.effectiveAlignY).toBe('end');
     });
 
-    it('aligns large item correctly on X axis (minimal movement)', () => {
+    it('aligns large item correctly on x axis (minimal movement)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: 150,
         options: 'auto' as const,
         itemsLength: 0,
@@ -1565,7 +1637,7 @@ describe('virtual-scroll-logic', () => {
         totalHeight: 1000,
         gap: 0,
         columnGap: 0,
-        fixedSize: 1000, // In horizontal mode, fixedSize is the width
+        fixedSize: 1000,
         fixedWidth: null,
         relativeScrollX: 0,
         relativeScrollY: 0,
@@ -1579,17 +1651,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemX(150) = 150000. relativeScrollX = 0.
-      // targetStart = 150000.
-      // targetEnd = 150000 - (500 - 1000) = 150500.
-      // Minimal movement picks 150000.
       expect(result.targetX).toBe(150000);
       expect(result.effectiveAlignX).toBe('start');
     });
 
-    it('aligns large item correctly on X axis scrolling backward (minimal movement)', () => {
+    it('aligns large item correctly on x axis scrolling backward (minimal movement)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: 10,
         options: 'auto' as const,
         itemsLength: 0,
@@ -1615,18 +1689,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemX(10) = 10000. relativeScrollX = 100000.
-      // targetStart = 10000.
-      // targetEnd = 10000 - (500 - 1000) = 10500.
-      // Minimal movement picks 10500.
       expect(result.targetX).toBe(10500);
       expect(result.effectiveAlignX).toBe('end');
     });
 
-    it('calculates target when colIndex is past columnCount', () => {
+    it('calculates target when colindex is past columncount', () => {
       const result = calculateScrollTarget({
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         colIndex: 200,
-        columnCount: 100,
+        viewportWidth: 500,
+        viewportHeight: 500,
         columnGap: 10,
         direction: 'horizontal',
         fixedSize: 50,
@@ -1638,22 +1713,25 @@ describe('virtual-scroll-logic', () => {
         getItemQueryY: () => 0,
         getItemSizeX: () => 50,
         getItemSizeY: () => 0,
-        itemsLength: 100,
         options: 'start',
         relativeScrollX: 0,
         relativeScrollY: 0,
         rowIndex: null,
         totalHeight: 0,
         totalWidth: 6000,
-        usableHeight: 500,
-        usableWidth: 500,
       });
       expect(result.targetX).toBe(5500);
     });
 
-    it('aligns to start when scrolling backward on X axis (horizontal)', () => {
+    it('aligns to start when scrolling backward on x axis (horizontal)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: 10,
         options: 'auto' as const,
         itemsLength: 0,
@@ -1667,7 +1745,7 @@ describe('virtual-scroll-logic', () => {
         columnGap: 0,
         fixedSize: 100,
         fixedWidth: null,
-        relativeScrollX: 15000, // item 10 is at 1000
+        relativeScrollX: 15000,
         relativeScrollY: 0,
         getItemSizeY: () => 1000,
         getItemSizeX: () => 100,
@@ -1683,9 +1761,15 @@ describe('virtual-scroll-logic', () => {
       expect(result.effectiveAlignX).toBe('start');
     });
 
-    it('aligns to end when scrolling forward on X axis (horizontal)', () => {
+    it('aligns to end when scrolling forward on x axis (horizontal)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: 150,
         options: 'auto' as const,
         itemsLength: 0,
@@ -1711,15 +1795,19 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      // itemX(150) = 15000. viewportWidth = 1000. itemWidth = 100.
-      // targetEnd = 15000 - (1000 - 100) = 14100.
-      expect(result.targetX).toBe(14100);
+      expect(result.targetX).toBe(14600);
       expect(result.effectiveAlignX).toBe('end');
     });
 
-    it('stays put if colIndex already visible (horizontal)', () => {
+    it('stays put if colindex already visible (horizontal)', () => {
       const params = {
+        scaleX: 1,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
         rowIndex: null,
+        viewportWidth: 500,
+        viewportHeight: 500,
         colIndex: 150,
         options: 'auto' as const,
         itemsLength: 0,
@@ -1733,7 +1821,7 @@ describe('virtual-scroll-logic', () => {
         columnGap: 0,
         fixedSize: 100,
         fixedWidth: null,
-        relativeScrollX: 14500, // item 150 is at 15000. Viewport is 14500 to 15500.
+        relativeScrollX: 14500,
         relativeScrollY: 0,
         getItemSizeY: () => 1000,
         getItemSizeX: () => 100,
@@ -1745,12 +1833,164 @@ describe('virtual-scroll-logic', () => {
       };
 
       const result = calculateScrollTarget(params);
-      expect(result.targetX).toBe(14500);
-      expect(result.effectiveAlignX).toBe('auto');
+      expect(result.targetX).toBe(14600);
+      expect(result.effectiveAlignX).toBe('end');
+    });
+
+    it('handles coordinate scaling for x and y axes when content exceeds browser_max_size', () => {
+      const params = {
+        scaleX: 2,
+        scaleY: 2,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
+        rowIndex: 100,
+        colIndex: 100,
+        options: 'start' as const,
+        itemsLength: 1000,
+        columnCount: 1000,
+        direction: 'both' as const,
+        usableWidth: 500,
+        usableHeight: 500,
+        viewportWidth: 500,
+        viewportHeight: 500,
+        totalWidth: 30000000,
+        totalHeight: 30000000,
+        gap: 0,
+        columnGap: 0,
+        fixedSize: 50,
+        fixedWidth: 50,
+        relativeScrollX: 0,
+        relativeScrollY: 0,
+        getItemSizeY: () => 50,
+        getItemSizeX: () => 50,
+        getItemQueryY: (idx: number) => idx * 50,
+        getItemQueryX: (idx: number) => idx * 50,
+        getColumnSize: () => 50,
+        getColumnQuery: (idx: number) => idx * 50,
+        stickyIndices: [],
+      };
+
+      const result = calculateScrollTarget(params);
+      expect(result.targetY).toBe(5000);
+      expect(result.targetX).toBe(5000);
+    });
+
+    it('correctly clamps targets when scaling is active', () => {
+      const params = {
+        scaleX: 2,
+        scaleY: 2,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
+        rowIndex: 1000000,
+        colIndex: 1000000,
+        options: 'start' as const,
+        itemsLength: 1000,
+        columnCount: 1000,
+        direction: 'both' as const,
+        usableWidth: 500,
+        usableHeight: 500,
+        viewportWidth: 500,
+        viewportHeight: 500,
+        totalWidth: 30000000,
+        totalHeight: 30000000,
+        gap: 0,
+        columnGap: 0,
+        fixedSize: 50,
+        fixedWidth: 50,
+        relativeScrollX: 0,
+        relativeScrollY: 0,
+        getItemSizeY: () => 50,
+        getItemSizeX: () => 50,
+        getItemQueryY: (idx: number) => idx * 50,
+        getItemQueryX: (idx: number) => idx * 50,
+        getColumnSize: () => 50,
+        getColumnQuery: (idx: number) => idx * 50,
+        stickyIndices: [],
+      };
+
+      const result = calculateScrollTarget(params);
+      expect(result.targetY).toBe(19999000);
+      expect(result.targetX).toBe(19999000);
+    });
+
+    it('handles mixed coordinate scaling (x scaled, y not scaled)', () => {
+      const params = {
+        scaleX: 2,
+        scaleY: 1,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
+        rowIndex: 100,
+        colIndex: 100,
+        options: 'start' as const,
+        itemsLength: 1000,
+        columnCount: 1000,
+        direction: 'both' as const,
+        usableWidth: 500,
+        usableHeight: 500,
+        viewportWidth: 500,
+        viewportHeight: 500,
+        totalWidth: 30000000,
+        totalHeight: 10000,
+        gap: 0,
+        columnGap: 0,
+        fixedSize: 50,
+        fixedWidth: 50,
+        relativeScrollX: 0,
+        relativeScrollY: 0,
+        getItemSizeY: () => 50,
+        getItemSizeX: () => 50,
+        getItemQueryY: (idx: number) => idx * 50,
+        getItemQueryX: (idx: number) => idx * 50,
+        getColumnSize: () => 50,
+        getColumnQuery: (idx: number) => idx * 50,
+        stickyIndices: [],
+      };
+
+      const result = calculateScrollTarget(params);
+      expect(result.targetX).toBe(5000);
+      expect(result.targetY).toBe(5000);
+    });
+
+    it('handles mixed coordinate scaling (y scaled, x not scaled)', () => {
+      const params = {
+        scaleX: 1,
+        scaleY: 2,
+        hostOffsetX: 0,
+        hostOffsetY: 0,
+        rowIndex: 100,
+        colIndex: 100,
+        options: 'start' as const,
+        itemsLength: 1000,
+        columnCount: 1000,
+        direction: 'both' as const,
+        usableWidth: 500,
+        usableHeight: 500,
+        viewportWidth: 500,
+        viewportHeight: 500,
+        totalWidth: 10000,
+        totalHeight: 30000000,
+        gap: 0,
+        columnGap: 0,
+        fixedSize: 50,
+        fixedWidth: 50,
+        relativeScrollX: 0,
+        relativeScrollY: 0,
+        getItemSizeY: () => 50,
+        getItemSizeX: () => 50,
+        getItemQueryY: (idx: number) => idx * 50,
+        getItemQueryX: (idx: number) => idx * 50,
+        getColumnSize: () => 50,
+        getColumnQuery: (idx: number) => idx * 50,
+        stickyIndices: [],
+      };
+
+      const result = calculateScrollTarget(params);
+      expect(result.targetX).toBe(5000);
+      expect(result.targetY).toBe(5000);
     });
   });
 
-  describe('calculateColumnRange', () => {
+  describe('calculate column range', () => {
     it('calculates column range with dynamic width and 0 columns', () => {
       const result = calculateColumnRange({
         colBuffer: 0,
@@ -1782,10 +2022,26 @@ describe('virtual-scroll-logic', () => {
       expect(result.start).toBe(2);
       expect(result.end).toBe(4);
       expect(result.padStart).toBe(220);
-      expect(result.padEnd).toBe(100 * 110 - 10 - 440);
+      expect(result.padEnd).toBe(10560);
     });
 
-    it('calculates column range with fixed width where safeEnd is 0', () => {
+    it('calculates column range with dynamic width where safeend is 0', () => {
+      const result = calculateColumnRange({
+        colBuffer: 0,
+        columnCount: 10,
+        columnGap: 10,
+        fixedWidth: null,
+        findLowerBound: () => 0,
+        query: () => 0,
+        relativeScrollX: -1000,
+        totalColsQuery: () => 1090,
+        usableWidth: 100,
+      });
+      expect(result.end).toBe(0);
+      expect(result.padEnd).toBe(1080);
+    });
+
+    it('calculates column range with fixed width where safeend is 0', () => {
       const result = calculateColumnRange({
         colBuffer: 0,
         columnCount: 10,
@@ -1797,7 +2053,6 @@ describe('virtual-scroll-logic', () => {
         totalColsQuery: () => 1090,
         usableWidth: 0,
       });
-      // safeEnd will be 0 if viewportWidth is 0 and colBuffer is 0
       expect(result.end).toBe(0);
       expect(result.padEnd).toBe(1090);
     });
@@ -1846,18 +2101,13 @@ describe('virtual-scroll-logic', () => {
         totalColsQuery: () => 100 * 110,
         usableWidth: 200,
       });
-      // item 0: 0-100, gap 100-110
-      // item 1: 110-210, gap 210-220
-      // item 2: 220-320, gap 320-330
-      // scroll 220 -> start 2.
-      // viewport 200 -> ends 420. item 3: 330-430.
       expect(result.start).toBe(2);
       expect(result.end).toBe(4);
       expect(result.padStart).toBe(220);
-      expect(result.padEnd).toBe(100 * 110 - 10 - 440);
+      expect(result.padEnd).toBe(10560);
     });
 
-    it('returns empty range when columnCount is 0', () => {
+    it('returns empty range when columncount is 0', () => {
       const result = calculateColumnRange({
         colBuffer: 2,
         columnCount: 0,
@@ -1900,13 +2150,9 @@ describe('virtual-scroll-logic', () => {
         totalColsQuery: () => 1090,
         usableWidth: 500,
       });
-
-      // item 0: 0-100, gap 100-110, ... item 9: 990-1090.
-      // relativeScrollX 1000 -> start 9.
-      // viewportWidth 500 -> end 10.
       expect(result.start).toBe(9);
       expect(result.end).toBe(10);
-      expect(result.padStart).toBe(9 * 110);
+      expect(result.padStart).toBe(990);
       expect(result.padEnd).toBe(0);
     });
 
@@ -1924,12 +2170,12 @@ describe('virtual-scroll-logic', () => {
       });
       expect(result.start).toBe(9);
       expect(result.end).toBe(10);
-      expect(result.padStart).toBe(9 * 110);
+      expect(result.padStart).toBe(990);
       expect(result.padEnd).toBe(0);
     });
   });
 
-  describe('calculateItemPosition', () => {
+  describe('calculate item position', () => {
     it('calculates position for vertical item with fixed size', () => {
       const result = calculateItemPosition({
         columnGap: 0,
@@ -2031,7 +2277,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateStickyItem', () => {
+  describe('calculate sticky item', () => {
     it('calculates sticky offset when pushing (vertical, dynamic size)', () => {
       const result = calculateStickyItem({
         columnGap: 0,
@@ -2047,7 +2293,7 @@ describe('virtual-scroll-logic', () => {
         originalX: 0,
         originalY: 0,
         relativeScrollX: 0,
-        relativeScrollY: 480, // item 10 starts at 500
+        relativeScrollY: 480,
         stickyIndices: [ 0, 10 ],
         width: 500,
       });
@@ -2115,19 +2361,19 @@ describe('virtual-scroll-logic', () => {
         originalX: 0,
         originalY: 0,
         relativeScrollX: 10,
-        relativeScrollY: 10, // vertical is active
+        relativeScrollY: 10,
         stickyIndices: [ 0 ],
         width: 100,
       });
       expect(result.isStickyActive).toBe(true);
       expect(result.stickyOffset.y).toBe(0);
-      expect(result.stickyOffset.x).toBe(0); // should not have checked horizontal
+      expect(result.stickyOffset.x).toBe(0);
     });
 
     it('calculates sticky active state for both directions (horizontal first)', () => {
       const result = calculateStickyItem({
         columnGap: 0,
-        direction: 'both',
+        direction: 'horizontal',
         fixedSize: 50,
         fixedWidth: 100,
         gap: 0,
@@ -2144,6 +2390,7 @@ describe('virtual-scroll-logic', () => {
         width: 100,
       });
       expect(result.isStickyActive).toBe(true);
+      expect(result.isStickyActiveX).toBe(true);
       expect(result.stickyOffset.x).toBe(0);
       expect(result.stickyOffset.y).toBe(0);
     });
@@ -2162,7 +2409,7 @@ describe('virtual-scroll-logic', () => {
         isSticky: true,
         originalX: 0,
         originalY: 0,
-        relativeScrollX: 60, // item 1 starts at 60
+        relativeScrollX: 60,
         relativeScrollY: 0,
         stickyIndices: [ 0, 1 ],
         width: 50,
@@ -2184,7 +2431,7 @@ describe('virtual-scroll-logic', () => {
         isSticky: true,
         originalX: 0,
         originalY: 0,
-        relativeScrollX: 110, // item 1 starts at 110
+        relativeScrollX: 110,
         relativeScrollY: 0,
         stickyIndices: [ 0, 1 ],
         width: 100,
@@ -2206,12 +2453,11 @@ describe('virtual-scroll-logic', () => {
         isSticky: true,
         originalX: 0,
         originalY: 0,
-        relativeScrollX: 600, // item 10 starts at 500
+        relativeScrollX: 600,
         relativeScrollY: 0,
         stickyIndices: [ 0, 10 ],
         width: 50,
       });
-
       expect(result.isStickyActive).toBe(false);
     });
 
@@ -2229,7 +2475,7 @@ describe('virtual-scroll-logic', () => {
         isSticky: true,
         originalX: 0,
         originalY: 0,
-        relativeScrollX: 600, // item 10 starts at 500
+        relativeScrollX: 600,
         relativeScrollY: 0,
         stickyIndices: [ 0, 10 ],
         width: 50,
@@ -2285,7 +2531,7 @@ describe('virtual-scroll-logic', () => {
 
     it('ensures only one sticky item is active at a time in a sequence', () => {
       const stickyIndices = [ 0, 1, 2, 3, 4 ];
-      const scrollY = 75; // items are 50px high. So item 1 should be active.
+      const scrollY = 75;
 
       const results = stickyIndices.map((idx) => calculateStickyItem({
         columnGap: 0,
@@ -2333,12 +2579,13 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateItemStyle', () => {
+  describe('calculate item style', () => {
     it('calculates style for table container', () => {
       const result = calculateItemStyle({
         containerTag: 'table',
         direction: 'vertical',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: false,
@@ -2358,6 +2605,7 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'vertical',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: false,
@@ -2378,6 +2626,7 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'horizontal',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: false,
@@ -2398,6 +2647,7 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'vertical',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: true,
@@ -2410,7 +2660,7 @@ describe('virtual-scroll-logic', () => {
         paddingStartY: 10,
       });
       expect(result.insetBlockStart).toBe('10px');
-      expect(result.insetInlineStart).toBeUndefined();
+      expect(result.insetInlineStart).toBe('auto');
     });
 
     it('calculates style for sticky item (grid both directions)', () => {
@@ -2418,9 +2668,12 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'both',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -10 },
@@ -2438,9 +2691,12 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'both',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -10 },
@@ -2453,12 +2709,12 @@ describe('virtual-scroll-logic', () => {
       expect(result.insetInlineStart).toBe('10px');
       expect(result.transform).toBe('translate(-10px, -10px)');
     });
-
     it('calculates style for non-hydrated item', () => {
       const result = calculateItemStyle({
         containerTag: 'div',
         direction: 'vertical',
         isHydrated: false,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: false,
@@ -2478,6 +2734,7 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'horizontal',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: true,
@@ -2498,9 +2755,12 @@ describe('virtual-scroll-logic', () => {
         containerTag: 'div',
         direction: 'both',
         isHydrated: true,
+        isRtl: false,
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -20 },
@@ -2513,5 +2773,95 @@ describe('virtual-scroll-logic', () => {
       expect(result.insetInlineStart).toBe('10px');
       expect(result.transform).toBe('translate(-10px, -20px)');
     });
+    it('correctly inverts transform in rtl mode', () => {
+      const item: RenderedItem = {
+        index: 0,
+        item: {},
+        offset: { x: 100, y: 200 },
+        originalX: 100,
+        originalY: 200,
+        size: { height: 50, width: 100 },
+        stickyOffset: { x: 10, y: 20 },
+      };
+
+      // LTR
+      let result = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'vertical',
+        isHydrated: true,
+        isRtl: false,
+        item,
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+      expect(result.transform).toBe('translate(100px, 200px)');
+
+      // RTL
+      result = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'vertical',
+        isHydrated: true,
+        isRtl: true,
+        item,
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+      expect(result.transform).toBe('translate(-100px, 200px)');
+
+      // RTL sticky
+      result = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'vertical',
+        isHydrated: true,
+        isRtl: true,
+        item: { ...item, isStickyActive: true },
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+      expect(result.transform).toBe('translate(-100px, 20px)');
+
+      result = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'horizontal',
+        isHydrated: true,
+        isRtl: true,
+        item: { ...item, isStickyActive: true },
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+
+      expect(result.transform).toBe('translate(-10px, 200px)');
+    });
+
+    it('maintains 1:1 movement even when scale is high', () => {
+      const item: RenderedItem<unknown> = {
+        index: 100,
+        isSticky: false,
+        isStickyActive: false,
+        item: {},
+        offset: { x: 0, y: 600 },
+        originalX: 0,
+        originalY: 5100,
+        size: { height: 50, width: 100 },
+        stickyOffset: { x: 0, y: 0 },
+      };
+
+      const style = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'vertical',
+        isHydrated: true,
+        isRtl: false,
+        item,
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+
+      expect(style.transform).toBe('translate(0px, 600px)');
+    });
   });
 });