@pdanpdan/virtual-scroll 0.2.0 → 0.3.0

package/src/composables/useVirtualScroll.test.ts

@@ -1,3 +1,4 @@
+/* global ScrollToOptions */
 import type { VirtualScrollProps } from './useVirtualScroll';
 import type { Ref } from 'vue';
 
@@ -75,11 +76,22 @@ describe('useVirtualScroll', () => {
   beforeEach(() => {
     window.scrollX = 0;
     window.scrollY = 0;
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 500 });
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 500 });
+    window.scrollTo = vi.fn().mockImplementation((options: ScrollToOptions) => {
+      if (options.left !== undefined) {
+        window.scrollX = options.left;
+      }
+      if (options.top !== undefined) {
+        window.scrollY = options.top;
+      }
+      window.dispatchEvent(new Event('scroll'));
+    });
     vi.clearAllMocks();
     vi.useRealTimers();
   });
 
-  describe('initialization and total size', () => {
+  describe('initialization and dimensions', () => {
     it('should initialize with correct total height', async () => {
       const { result } = setup({ ...defaultProps });
       expect(result.totalHeight.value).toBe(5000);
@@ -105,11 +117,11 @@ describe('useVirtualScroll', () => {
 
     it('should recalculate when gaps change', async () => {
       const { result, props } = setup({ ...defaultProps, gap: 10 });
-      expect(result.totalHeight.value).toBe(6000); // 100 * (50 + 10)
+      expect(result.totalHeight.value).toBe(5990); // 100 * (50 + 10) - 10
 
       props.value.gap = 20;
       await nextTick();
-      expect(result.totalHeight.value).toBe(7000); // 100 * (50 + 20)
+      expect(result.totalHeight.value).toBe(6980); // 100 * (50 + 20) - 20
     });
 
     it('should handle itemSize as a function', async () => {
@@ -118,6 +130,7 @@ describe('useVirtualScroll', () => {
         itemSize: (_item: { id: number; }, index: number) => 50 + index,
       });
       // 50*100 + (0+99)*100/2 = 5000 + 4950 = 9950
+      // 9950 - gap(0) = 9950
       expect(result.totalHeight.value).toBe(9950);
     });
 
@@ -128,13 +141,13 @@ describe('useVirtualScroll', () => {
         columnCount: 10,
         columnWidth: 100,
       });
-      expect(result.totalWidth.value).toBe(1000);
-      expect(result.totalHeight.value).toBe(5000);
+      expect(result.totalWidth.value).toBe(1000); // 10 * 100 - 0
+      expect(result.totalHeight.value).toBe(5000); // 100 * 50 - 0
     });
 
     it('should handle horizontal direction', async () => {
       const { result } = setup({ ...defaultProps, direction: 'horizontal' });
-      expect(result.totalWidth.value).toBe(5000);
+      expect(result.totalWidth.value).toBe(5000); // 100 * 50 - 0
       expect(result.totalHeight.value).toBe(0);
     });
 
@@ -147,7 +160,7 @@ describe('useVirtualScroll', () => {
     });
   });
 
-  describe('range and rendered items', () => {
+  describe('range calculation', () => {
     it('should calculate rendered items based on scroll position', async () => {
       const { result } = setup({ ...defaultProps });
       expect(result.renderedItems.value.length).toBeGreaterThan(0);
@@ -175,45 +188,97 @@ describe('useVirtualScroll', () => {
       await nextTick();
       expect(result.scrollDetails.value.currentIndex).toBeGreaterThan(0);
     });
+  });
+
+  describe('dynamic sizing', () => {
+    it('should handle columnCount fallback in updateItemSizes', async () => {
+      const { result, props } = setup({
+        ...defaultProps,
+        direction: 'both',
+        columnCount: 10,
+        columnWidth: undefined,
+      });
+      await nextTick();
+
+      const cell = document.createElement('div');
+      cell.dataset.colIndex = '0';
+
+      // Getter that returns 10 first time (for guard) and null second time (for fallback)
+      let count = 0;
+      Object.defineProperty(props.value, 'columnCount', {
+        get() {
+          count++;
+          return count === 1 ? 10 : null;
+        },
+        configurable: true,
+      });
+
+      result.updateItemSizes([ { index: 0, inlineSize: 200, blockSize: 50, element: cell } ]);
+      await nextTick();
+    });
+
+    it('should handle updateItemSizes with direct cell element', async () => {
+      const { result } = setup({
+        ...defaultProps,
+        direction: 'both',
+        columnCount: 2,
+        columnWidth: undefined,
+      });
+      await nextTick();
 
-    it('should handle undefined items in renderedItems (out of bounds)', async () => {
-      const { result } = setup({ ...defaultProps, stickyIndices: [ 200 ] });
-      expect(result.renderedItems.value.find((i) => i.index === 200)).toBeUndefined();
+      const cell = document.createElement('div');
+      Object.defineProperty(cell, 'offsetWidth', { value: 200 });
+      cell.dataset.colIndex = '0';
+
+      result.updateItemSizes([ { index: 0, inlineSize: 200, blockSize: 50, element: cell } ]);
+      await nextTick();
+      expect(result.getColumnWidth(0)).toBe(200);
     });
 
-    it('should include sticky items in renderedItems only when relevant', async () => {
-      const { result } = setup({ ...defaultProps, stickyIndices: [ 50 ] });
-      // Initially at top, item 50 is far away and should NOT be in renderedItems
-      expect(result.renderedItems.value.find((i) => i.index === 50)).toBeUndefined();
+    it('should handle updateItemSizes initial measurement even if smaller than estimate', async () => {
+      // Horizontal
+      const { result: rH } = setup({ ...defaultProps, direction: 'horizontal', itemSize: undefined });
+      await nextTick();
+      // Estimate is 40 (new DEFAULT_ITEM_SIZE). Update with 30.
+      rH.updateItemSizes([ { index: 0, inlineSize: 30, blockSize: 30 } ]);
+      await nextTick();
+      expect(rH.renderedItems.value[ 0 ]?.size.width).toBe(30);
+
+      // Subsequent update with smaller size should also be applied now
+      rH.updateItemSizes([ { index: 0, inlineSize: 25, blockSize: 25 } ]);
+      await nextTick();
+      expect(rH.renderedItems.value[ 0 ]?.size.width).toBe(25);
 
-      // Scroll near item 50
-      result.scrollToIndex(50, 0, { align: 'start', behavior: 'auto' });
+      // Vertical
+      const { result: rV } = setup({ ...defaultProps, direction: 'vertical', itemSize: undefined });
+      await nextTick();
+      rV.updateItemSizes([ { index: 0, inlineSize: 30, blockSize: 30 } ]);
       await nextTick();
+      expect(rV.renderedItems.value[ 0 ]?.size.height).toBe(30);
 
-      const item50 = result.renderedItems.value.find((i) => i.index === 50);
-      expect(item50).toBeDefined();
-      expect(item50!.isSticky).toBe(true);
+      // Subsequent update with smaller size should be applied
+      rV.updateItemSizes([ { index: 0, inlineSize: 20, blockSize: 20 } ]);
+      await nextTick();
+      expect(rV.renderedItems.value[ 0 ]?.size.height).toBe(20);
     });
-  });
 
-  describe('dynamic sizing and updateItemSize', () => {
-    it('should update item size and trigger reactivity', async () => {
+    it('should handle updateItemSize and trigger reactivity', async () => {
       const { result } = setup({ ...defaultProps, itemSize: undefined });
-      expect(result.totalHeight.value).toBe(5000); // Default estimate
+      expect(result.totalHeight.value).toBe(4000); // 100 * 40
 
       result.updateItemSize(0, 100, 100);
       await nextTick();
-      expect(result.totalHeight.value).toBe(5050);
+      expect(result.totalHeight.value).toBe(4060); // 4000 - 40 + 100
       expect(result.renderedItems.value[ 0 ]!.size.height).toBe(100);
     });
 
     it('should treat 0, null, undefined as dynamic itemSize', async () => {
       for (const val of [ 0, null, undefined ]) {
         const { result } = setup({ ...defaultProps, itemSize: val as unknown as undefined });
-        expect(result.totalHeight.value).toBe(5000);
+        expect(result.totalHeight.value).toBe(4000);
         result.updateItemSize(0, 100, 100);
         await nextTick();
-        expect(result.totalHeight.value).toBe(5050);
+        expect(result.totalHeight.value).toBe(4060);
       }
     });
 
@@ -225,7 +290,7 @@ describe('useVirtualScroll', () => {
           columnCount: 2,
           columnWidth: val as unknown as undefined,
         });
-        expect(result.getColumnWidth(0)).toBe(150);
+        expect(result.getColumnWidth(0)).toBe(100); // DEFAULT_COLUMN_WIDTH
         const parent = document.createElement('div');
         const col0 = document.createElement('div');
         Object.defineProperty(col0, 'offsetWidth', { value: 200, configurable: true });
@@ -233,7 +298,7 @@ describe('useVirtualScroll', () => {
         parent.appendChild(col0);
         result.updateItemSize(0, 200, 50, parent);
         await nextTick();
-        expect(result.totalWidth.value).toBe(350);
+        expect(result.totalWidth.value).toBe(300); // 200 + 100
       }
     });
 
@@ -281,14 +346,21 @@ describe('useVirtualScroll', () => {
       expect(result.totalWidth.value).toBe(10 * 200); // 10 columns * 200 defaultColumnWidth
     });
 
-    it('should ignore small delta updates in updateItemSize', async () => {
+    it('should ignore small delta updates in updateItemSize only after first measurement', async () => {
       const { result } = setup({ ...defaultProps, itemSize: undefined });
-      result.updateItemSize(0, 50.1, 50.1);
+      // Default is 40. 40.1 is < 0.5 delta.
+      // First measurement should be accepted even if small delta from estimate.
+      result.updateItemSize(0, 40.1, 40.1);
       await nextTick();
-      expect(result.totalHeight.value).toBe(5000);
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(40.1);
+
+      // Second measurement with small delta from first should be ignored.
+      result.updateItemSize(0, 40.2, 40.2);
+      await nextTick();
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(40.1);
     });
 
-    it('should not shrink item height in both mode encountered so far', async () => {
+    it('should update item height in both mode now (allow decreases)', async () => {
       const { result } = setup({ ...defaultProps, direction: 'both', itemSize: undefined, columnCount: 2 });
       result.updateItemSize(0, 100, 100);
       await nextTick();
@@ -296,7 +368,7 @@ describe('useVirtualScroll', () => {
 
       result.updateItemSize(0, 100, 80);
       await nextTick();
-      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(100);
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(80);
     });
 
     it('should update item height in vertical mode', async () => {
@@ -304,116 +376,54 @@ describe('useVirtualScroll', () => {
       result.updateItemSize(0, 100, 100);
       await nextTick();
       expect(result.renderedItems.value[ 0 ]!.size.height).toBe(100);
+
+      result.updateItemSize(0, 100, 70);
+      await nextTick();
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(70);
     });
 
     it('should handle updateItemSize for horizontal direction', async () => {
       const { result } = setup({ ...defaultProps, direction: 'horizontal', itemSize: undefined });
       result.updateItemSize(0, 100, 50);
       await nextTick();
-      expect(result.totalWidth.value).toBe(5050);
+      expect(result.totalWidth.value).toBe(4060); // 4000 - 40 + 100
     });
 
     it('should preserve measurements in initializeSizes when dynamic', async () => {
       const { result, props } = setup({ ...defaultProps, itemSize: undefined });
       result.updateItemSize(0, 100, 100);
       await nextTick();
-      expect(result.totalHeight.value).toBe(5050);
+      expect(result.totalHeight.value).toBe(4060);
 
       // Trigger initializeSizes by changing length
       props.value.items = Array.from({ length: 101 }, (_, i) => ({ id: i }));
       await nextTick();
-      // Should still be 100 for index 0, not reset to default 50
-      expect(result.totalHeight.value).toBe(5050 + 50);
-    });
-
-    it('should track max dimensions in updateItemSize', async () => {
-      const { result } = setup({ ...defaultProps, direction: 'both', itemSize: undefined, columnCount: 2 });
-      // Initial maxWidth is 0 (since vertical direction didn't set it for X)
-      // Wait, in 'both' mode, initializeSizes sets it.
-
-      result.updateItemSize(0, 5000, 6000);
-      await nextTick();
-      // Should have hit maxWidth.value = width
+      // Should still be 100 for index 0, not reset to default 40
+      expect(result.totalHeight.value).toBe(4060 + 40);
     });
+  });
 
-    it('should cover spacer skip heuristic in updateItemSize', async () => {
+  describe('scrolling and API', () => {
+    it('should handle scrollToIndex with horizontal direction and dynamic item size', async () => {
       const container = document.createElement('div');
-      Object.defineProperty(container, 'clientWidth', { value: 500 });
-      const { result } = setup({ ...defaultProps, direction: 'both', columnCount: 2, itemSize: 0, columnWidth: 0, container });
-      await nextTick();
-      const parent = document.createElement('div');
-      const spacer = document.createElement('div');
-      Object.defineProperty(spacer, 'offsetWidth', { value: 1000 });
-      parent.appendChild(spacer);
-      result.updateItemSize(0, 100, 50, parent);
+      Object.defineProperty(container, 'clientWidth', { configurable: true, value: 500 });
+      const { result } = setup({ ...defaultProps, container, direction: 'horizontal', itemSize: undefined });
       await nextTick();
-    });
-
-    it('should allow columns to shrink on first measurement', async () => {
-      const { result } = setup({ ...defaultProps, direction: 'both', columnCount: 2, columnWidth: undefined });
-      // Default estimate is 150
-      expect(result.getColumnWidth(0)).toBe(150);
-
-      const parent = document.createElement('div');
-      const child = document.createElement('div');
-      Object.defineProperty(child, 'offsetWidth', { value: 100 });
-      child.dataset.colIndex = '0';
-      parent.appendChild(child);
 
-      // First measurement is 100
-      result.updateItemSize(0, 100, 50, parent);
+      // index 10. itemSize is 40 by default. totalWidth = 4000.
+      result.scrollToIndex(null, 10, { align: 'start', behavior: 'auto' });
       await nextTick();
-      expect(result.getColumnWidth(0)).toBe(100);
+      expect(result.scrollDetails.value.scrollOffset.x).toBe(400);
     });
 
-    it('should allow shrinking on first measurement', async () => {
-      const { result } = setup({ ...defaultProps, itemSize: undefined });
-      // Default estimate is 50
-      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(50);
-
-      // First measurement is 20 (smaller than 50)
-      result.updateItemSize(0, 50, 20);
-      await nextTick();
-      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(20);
-
-      // Second measurement is 10 (smaller than 20) - should NOT shrink
-      result.updateItemSize(0, 50, 10);
-      await nextTick();
-      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(20);
-
-      // Third measurement is 30 (larger than 20) - SHOULD grow
-      result.updateItemSize(0, 50, 30);
+    it('should handle scrollToIndex with window fallback when container is missing', async () => {
+      const { result } = setup({ ...defaultProps, container: undefined });
       await nextTick();
-      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(30);
-    });
-
-    it('should handle cells querySelector in updateItemSizes', async () => {
-      const { result } = setup({
-        ...defaultProps,
-        direction: 'both',
-        columnCount: 2,
-        columnWidth: undefined,
-      });
-
-      const parent = document.createElement('div');
-      const child1 = document.createElement('div');
-      Object.defineProperty(child1, 'offsetWidth', { value: 200 });
-      child1.dataset.colIndex = '0';
-      const child2 = document.createElement('div');
-      Object.defineProperty(child2, 'offsetWidth', { value: 300 });
-      child2.dataset.colIndex = '1';
-
-      parent.appendChild(child1);
-      parent.appendChild(child2);
-
-      result.updateItemSizes([ { index: 0, inlineSize: 500, blockSize: 50, element: parent } ]);
+      result.scrollToIndex(10, 0);
       await nextTick();
-      expect(result.getColumnWidth(0)).toBe(200);
-      expect(result.getColumnWidth(1)).toBe(300);
+      expect(window.scrollTo).toHaveBeenCalled();
     });
-  });
 
-  describe('scroll and offsets', () => {
     it('should handle scrollToIndex out of bounds', async () => {
       const { result } = setup({ ...defaultProps });
       // Row past end
@@ -443,7 +453,7 @@ describe('useVirtualScroll', () => {
 
       // Current visible range: [scrollTop + paddingStart, scrollTop + viewport - paddingEnd] = [300, 700]
       // Scroll to item at y=250. 250 < 300, so not visible.
-      // targetY < relativeScrollY + paddingStart (250 < 200 + 100) -> hit line 729
+      // targetY < relativeScrollY + paddingStart (250 < 200 + 100)
       result.scrollToIndex(5, null, 'auto');
       await nextTick();
     });
@@ -466,6 +476,59 @@ describe('useVirtualScroll', () => {
       expect(container.scrollTo).toHaveBeenCalled();
     });
 
+    it('should handle scrollToOffset with currentX/currentY fallbacks', async () => {
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'scrollLeft', { value: 50, writable: true });
+      Object.defineProperty(container, 'scrollTop', { value: 60, writable: true });
+
+      const { result } = setup({ ...defaultProps, container });
+      await nextTick();
+
+      // Pass null to x and y to trigger fallbacks to currentX and currentY
+      result.scrollToOffset(null, null);
+      await nextTick();
+
+      // scrollOffset.x = targetX - hostOffset.x + (isHorizontal ? paddingStartX : 0)
+      // targetX = currentX = 50. hostOffset.x = 0. isHorizontal = false.
+      // So scrollOffset.x = 50.
+      expect(result.scrollDetails.value.scrollOffset.x).toBe(50);
+      expect(result.scrollDetails.value.scrollOffset.y).toBe(60);
+    });
+
+    it('should handle scrollToOffset with restricted direction for padding fallback', async () => {
+      const container = document.createElement('div');
+      container.scrollTo = vi.fn();
+
+      // Horizontal direction: isVertical will be false, so targetY padding fallback will be 0
+      const { result } = setup({ ...defaultProps, container, direction: 'horizontal', scrollPaddingStart: 10 });
+      await nextTick();
+
+      result.scrollToOffset(100, 100);
+      await nextTick();
+      // targetY = 100 + hostOffset.y - (isVertical ? paddingStartY : 0)
+      // Since isVertical is false, it uses 0. hostOffset.y is 0 here.
+      expect(container.scrollTo).toHaveBeenCalledWith(expect.objectContaining({
+        top: 100,
+      }));
+
+      // Vertical direction: isHorizontal will be false, so targetX padding fallback will be 0
+      const { result: r2 } = setup({ ...defaultProps, container, direction: 'vertical', scrollPaddingStart: 10 });
+      await nextTick();
+      r2.scrollToOffset(100, 100);
+      await nextTick();
+      expect(container.scrollTo).toHaveBeenCalledWith(expect.objectContaining({
+        left: 100,
+      }));
+    });
+
+    it('should handle scrollToOffset with window fallback when container is missing', async () => {
+      const { result } = setup({ ...defaultProps, container: undefined });
+      await nextTick();
+      result.scrollToOffset(100, 200);
+      await nextTick();
+      expect(window.scrollTo).toHaveBeenCalled();
+    });
+
     it('should handle scrollToIndex with null indices', async () => {
       const { result } = setup({ ...defaultProps });
       result.scrollToIndex(null, null);
@@ -580,57 +643,54 @@ describe('useVirtualScroll', () => {
       expect(container.scrollTop).toBe(400);
     });
 
-    it('should clear pendingScroll when reached', async () => {
-      const { result } = setup({ ...defaultProps, itemSize: undefined });
-      result.scrollToIndex(10, 0, { isCorrection: true });
-      await nextTick();
-    });
+    it('should stop programmatic scroll', async () => {
+      const { result } = setup(defaultProps);
+      result.scrollToIndex(10, null, { behavior: 'smooth' });
+      expect(result.scrollDetails.value.isProgrammaticScroll).toBe(true);
 
-    it('should cover scrollToIndex row >= length branch', async () => {
-      const { result } = setup({ ...defaultProps });
-      result.scrollToIndex(200, null);
-      await nextTick();
+      result.stopProgrammaticScroll();
+      expect(result.scrollDetails.value.isProgrammaticScroll).toBe(false);
     });
 
-    it('should handle scrollToIndex horizontal alignment branches', async () => {
+    it('should handle scrollToIndex with element container having scrollTo', async () => {
       const container = document.createElement('div');
-      Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true });
-      Object.defineProperty(container, 'scrollLeft', { value: 1000, writable: true, configurable: true });
-      container.scrollTo = vi.fn().mockImplementation((options) => {
-        container.scrollLeft = options.left;
-      });
-
-      const { result } = setup({ ...defaultProps, direction: 'horizontal', container, itemSize: 50, scrollPaddingStart: 100 });
+      container.scrollTo = vi.fn();
+      const { result } = setup({ ...defaultProps, container });
       await nextTick();
 
-      // targetX = 5 * 50 = 250. relativeScrollX = 1000. paddingStart = 100.
-      // targetX < relativeScrollX + paddingStart (250 < 1100)
-      result.scrollToIndex(null, 5, 'auto');
+      result.scrollToIndex(10, 0, { behavior: 'auto' });
       await nextTick();
-      expect(container.scrollLeft).toBeLessThan(1000);
+      expect(container.scrollTo).toHaveBeenCalled();
+    });
 
-      // End alignment
-      result.scrollToIndex(null, 5, 'end');
+    it('should handle scrollToIndex fallback when scrollTo is missing', async () => {
+      const container = document.createElement('div');
+      (container as unknown as { scrollTo: unknown; }).scrollTo = undefined;
+      const { result } = setup({ ...defaultProps, container });
       await nextTick();
 
-      // Center alignment
-      result.scrollToIndex(null, 5, 'center');
+      // row only
+      result.scrollToIndex(10, null, { behavior: 'auto' });
       await nextTick();
-    });
+      expect(container.scrollTop).toBeGreaterThan(0);
 
-    it('should only apply scrollPaddingStart to Y axis in "both" mode if it is a number', async () => {
-      setup({ ...defaultProps, direction: 'both', scrollPaddingStart: 10 });
+      // col only
+      const { result: resH } = setup({ ...defaultProps, container, direction: 'horizontal' });
+      await nextTick();
+      resH.scrollToIndex(null, 10, { behavior: 'auto' });
       await nextTick();
-      // Y padding should be 10, X padding should be 0
+      expect(container.scrollLeft).toBeGreaterThan(0);
     });
 
-    it('should stop programmatic scroll', async () => {
-      const { result } = setup(defaultProps);
-      result.scrollToIndex(10, null, { behavior: 'smooth' });
-      expect(result.scrollDetails.value.isProgrammaticScroll).toBe(true);
-
-      result.stopProgrammaticScroll();
-      expect(result.scrollDetails.value.isProgrammaticScroll).toBe(false);
+    it('should skip undefined items in renderedItems', async () => {
+      const items = Array.from({ length: 10 }) as unknown[];
+      items[ 0 ] = { id: 0 };
+      // other indices are undefined
+      const { result } = setup({ ...defaultProps, items, itemSize: 50 });
+      await nextTick();
+      // only index 0 should be rendered
+      expect(result.renderedItems.value.length).toBe(1);
+      expect(result.renderedItems.value[ 0 ]?.index).toBe(0);
     });
   });
 
@@ -643,6 +703,72 @@ describe('useVirtualScroll', () => {
       await nextTick();
     });
 
+    it('should cover fallback branches for unknown targets and directions', async () => {
+      // 1. Unknown container type (hits 408, 445, 513, 718 else branches)
+      const unknownContainer = {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      } as unknown as HTMLElement;
+
+      const { result } = setup({
+        ...defaultProps,
+        container: unknownContainer,
+        hostElement: document.createElement('div'),
+      });
+      await nextTick();
+
+      result.scrollToIndex(10, 0);
+      result.scrollToOffset(100, 100);
+      result.updateHostOffset();
+
+      // 2. Invalid direction (hits 958 else branch)
+      const { result: r2 } = setup({
+        ...defaultProps,
+        direction: undefined as unknown as 'vertical',
+        stickyIndices: [ 0 ],
+      });
+      await nextTick();
+      window.dispatchEvent(new Event('scroll'));
+      await nextTick();
+      expect(r2.renderedItems.value.find((i) => i.index === 0)).toBeDefined();
+
+      // 3. Unknown target in handleScroll (hits 1100 else branch)
+      const container = document.createElement('div');
+      setup({ ...defaultProps, container });
+      const event = new Event('scroll');
+      Object.defineProperty(event, 'target', { value: { } });
+      container.dispatchEvent(event);
+    });
+
+    it('should cleanup events and observers when container changes', async () => {
+      const container = document.createElement('div');
+      const removeSpy = vi.spyOn(container, 'removeEventListener');
+      const { props } = setup({ ...defaultProps, container });
+      await nextTick();
+
+      // Change container to trigger cleanup of old one
+      props.value.container = document.createElement('div');
+      await nextTick();
+
+      expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    });
+
+    it('should cleanup when unmounted and container is window', async () => {
+      const { wrapper } = setup({ ...defaultProps, container: window });
+      await nextTick();
+      wrapper.unmount();
+    });
+
+    it('should cleanup when unmounted', async () => {
+      const container = document.createElement('div');
+      const removeSpy = vi.spyOn(container, 'removeEventListener');
+      const { wrapper } = setup({ ...defaultProps, container });
+      await nextTick();
+
+      wrapper.unmount();
+      expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    });
+
     it('should handle document scroll events', async () => {
       setup({ ...defaultProps });
       document.dispatchEvent(new Event('scroll'));
@@ -698,7 +824,7 @@ describe('useVirtualScroll', () => {
 
     it('should handle window resize events', async () => {
       setup({ ...defaultProps, container: window });
-      window.innerWidth = 1200;
+      Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 });
       window.dispatchEvent(new Event('resize'));
       await nextTick();
     });
@@ -744,7 +870,7 @@ describe('useVirtualScroll', () => {
         columnCount: 2,
         columnWidth: [ 0 ] as unknown as number[],
       });
-      expect(result.getColumnWidth(0)).toBe(150); // DEFAULT_COLUMN_WIDTH
+      expect(result.getColumnWidth(0)).toBe(100); // DEFAULT_COLUMN_WIDTH
     });
 
     it('should handle columnWidth as a function', async () => {
@@ -755,7 +881,7 @@ describe('useVirtualScroll', () => {
         columnWidth: (index: number) => (index % 2 === 0 ? 100 : 200),
       });
       expect(result.getColumnWidth(0)).toBe(100);
-      expect(result.totalWidth.value).toBe(1500);
+      expect(result.totalWidth.value).toBe(1500); // 5*100 + 5*200 - 0
     });
 
     it('should handle getColumnWidth fallback when dynamic', async () => {
@@ -765,7 +891,7 @@ describe('useVirtualScroll', () => {
         columnCount: 2,
         columnWidth: undefined,
       });
-      expect(result.getColumnWidth(0)).toBe(150);
+      expect(result.getColumnWidth(0)).toBe(100);
     });
 
     it('should handle columnRange while loop coverage', async () => {
@@ -803,71 +929,43 @@ describe('useVirtualScroll', () => {
     });
   });
 
-  describe('lifecycle and logic branches', () => {
-    it('should trigger scroll correction when isScrolling becomes false', async () => {
-      vi.useFakeTimers();
-      const { result } = setup({ ...defaultProps, container: window, itemSize: undefined });
-      await nextTick();
-      result.scrollToIndex(10, 0, 'start');
-      document.dispatchEvent(new Event('scroll'));
-      expect(result.scrollDetails.value.isScrolling).toBe(true);
-      vi.advanceTimersByTime(250);
+  describe('sticky and pushed items', () => {
+    it('should identify sticky items', async () => {
+      const { result } = setup({ ...defaultProps, stickyIndices: [ 0, 10 ] });
       await nextTick();
-      expect(result.scrollDetails.value.isScrolling).toBe(false);
-      vi.useRealTimers();
-    });
 
-    it('should trigger scroll correction when treeUpdateFlag changes', async () => {
-      const { result } = setup({ ...defaultProps, itemSize: undefined });
-      await nextTick();
-      result.scrollToIndex(10, 0, 'start');
-      // Trigger tree update
-      result.updateItemSize(5, 100, 100);
-      await nextTick();
+      const items = result.renderedItems.value;
+      const item0 = items.find((i) => i.index === 0);
+      const item10 = items.find((i) => i.index === 10);
+      expect(item0?.isSticky).toBe(true);
+      expect(item10?.isSticky).toBe(true);
     });
 
-    it('should cover updateHostOffset when container is window', async () => {
-      const { result, props } = setup({ ...defaultProps, container: window });
-      const host = document.createElement('div');
-      props.value.hostElement = host;
+    it('should make sticky items active when scrolled past', async () => {
+      const { result } = setup({ ...defaultProps, stickyIndices: [ 0 ] });
       await nextTick();
-      result.updateHostOffset();
-    });
 
-    it('should cover updateHostOffset when container is hostElement', async () => {
-      const host = document.createElement('div');
-      const { result } = setup({ ...defaultProps, container: host, hostElement: host });
+      result.scrollToOffset(0, 100);
       await nextTick();
-      result.updateHostOffset();
-    });
-
-    it('should correctly calculate hostOffset when container is an HTMLElement', async () => {
-      const container = document.createElement('div');
-      const hostElement = document.createElement('div');
 
-      container.getBoundingClientRect = vi.fn(() => ({ top: 100, left: 100, bottom: 200, right: 200, width: 100, height: 100, x: 100, y: 100, toJSON: () => '' }));
-      hostElement.getBoundingClientRect = vi.fn(() => ({ top: 150, left: 150, bottom: 200, right: 200, width: 50, height: 50, x: 150, y: 150, toJSON: () => '' }));
-      Object.defineProperty(container, 'scrollTop', { value: 50, writable: true, configurable: true });
-
-      const { result } = setup({ ...defaultProps, container, hostElement });
-      await nextTick();
-      result.updateHostOffset();
-      expect(result.scrollDetails.value.scrollOffset.y).toBeDefined();
+      const item0 = result.renderedItems.value.find((i) => i.index === 0);
+      expect(item0?.isStickyActive).toBe(true);
     });
 
-    it('should cover refresh method', async () => {
-      const { result } = setup({ ...defaultProps, itemSize: 0 });
-      result.updateItemSize(0, 100, 100);
+    it('should include current sticky item in rendered items even if range is ahead', async () => {
+      const { result } = setup({ ...defaultProps, stickyIndices: [ 0 ], bufferBefore: 0 });
       await nextTick();
-      expect(result.totalHeight.value).toBe(5050);
 
-      result.refresh();
+      // Scroll to index 20. Range starts at 20.
+      result.scrollToIndex(20, 0, { align: 'start', behavior: 'auto' });
       await nextTick();
-      expect(result.totalHeight.value).toBe(5000);
+
+      expect(result.scrollDetails.value.range.start).toBe(20);
+      const item0 = result.renderedItems.value.find((i) => i.index === 0);
+      expect(item0).toBeDefined();
+      expect(item0?.isStickyActive).toBe(true);
     });
-  });
 
-  describe('sticky header pushing', () => {
     it('should push sticky item when next sticky item approaches (vertical)', async () => {
       const container = document.createElement('div');
       Object.defineProperty(container, 'clientHeight', { value: 500 });
@@ -875,7 +973,6 @@ describe('useVirtualScroll', () => {
       const { result } = setup({ ...defaultProps, container, stickyIndices: [ 0, 10 ], itemSize: 50 });
       // We need to trigger scroll to update scrollY
       container.dispatchEvent(new Event('scroll'));
-      await nextTick();
 
       const item0 = result.renderedItems.value.find((i) => i.index === 0);
       expect(item0!.offset.y).toBeLessThanOrEqual(450);
@@ -895,38 +992,79 @@ describe('useVirtualScroll', () => {
         columnGap: 0,
       });
       container.dispatchEvent(new Event('scroll'));
-      await nextTick();
 
       const item0 = result.renderedItems.value.find((i) => i.index === 0);
       expect(item0!.offset.x).toBeLessThanOrEqual(450);
     });
-  });
 
-  describe('scroll restoration', () => {
-    it('should restore scroll position when items are prepended', async () => {
-      vi.useFakeTimers();
+    it('should handle dynamic sticky item pushing in vertical mode', async () => {
       const container = document.createElement('div');
       Object.defineProperty(container, 'clientHeight', { value: 500 });
-      Object.defineProperty(container, 'scrollTop', { value: 100, writable: true });
-      container.scrollTo = vi.fn().mockImplementation((options) => {
-        container.scrollTop = options.top;
-      });
+      Object.defineProperty(container, 'scrollTop', { value: 380, writable: true });
 
-      const items = Array.from({ length: 50 }, (_, i) => ({ id: i }));
-      const { result, props } = setup({
+      const { result } = setup({
         ...defaultProps,
-        items,
         container,
-        itemSize: 50,
-        restoreScrollOnPrepend: true,
+        itemSize: undefined, // dynamic
+        stickyIndices: [ 0, 10 ],
       });
-      container.dispatchEvent(new Event('scroll'));
-      await nextTick();
 
-      expect(result.scrollDetails.value.scrollOffset.y).toBe(100);
+      // Item 0 is sticky. Item 10 is next sticky.
+      // Default size = 40.
+      // nextStickyY = itemSizesY.query(10) = 400.
+      // distance = 400 - 380 = 20.
+      // 20 < 40 (item 0 height), so it should be pushed.
+      // stickyOffset.y = -(40 - 20) = -20.
+      const stickyItem = result.renderedItems.value.find((i) => i.index === 0);
+      expect(stickyItem?.stickyOffset.y).toBe(-20);
+    });
 
-      // Prepend 2 items
-      const newItems = [ { id: -1 }, { id: -2 }, ...items ];
+    it('should handle dynamic sticky item pushing in horizontal mode', async () => {
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'clientWidth', { value: 500 });
+      Object.defineProperty(container, 'scrollLeft', { value: 380, writable: true });
+
+      const { result } = setup({
+        ...defaultProps,
+        container,
+        direction: 'horizontal',
+        itemSize: undefined, // dynamic
+        stickyIndices: [ 0, 10 ],
+      });
+
+      // nextStickyX = itemSizesX.query(10) = 400.
+      // distance = 400 - 380 = 20.
+      // 20 < 40, so stickyOffset.x = -20.
+      const stickyItem = result.renderedItems.value.find((i) => i.index === 0);
+      expect(stickyItem?.stickyOffset.x).toBe(-20);
+    });
+  });
+
+  describe('scroll restoration', () => {
+    it('should restore scroll position when items are prepended', async () => {
+      vi.useFakeTimers();
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'clientHeight', { value: 500 });
+      Object.defineProperty(container, 'scrollTop', { value: 100, writable: true });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        container.scrollTop = options.top;
+      });
+
+      const items = Array.from({ length: 50 }, (_, i) => ({ id: i }));
+      const { result, props } = setup({
+        ...defaultProps,
+        items,
+        container,
+        itemSize: 50,
+        restoreScrollOnPrepend: true,
+      });
+      container.dispatchEvent(new Event('scroll'));
+      await nextTick();
+
+      expect(result.scrollDetails.value.scrollOffset.y).toBe(100);
+
+      // Prepend 2 items
+      const newItems = [ { id: -1 }, { id: -2 }, ...items ];
       props.value.items = newItems;
       await nextTick();
       // Trigger initializeSizes
@@ -970,6 +1108,35 @@ describe('useVirtualScroll', () => {
       vi.useRealTimers();
     });
 
+    it('should restore scroll position with itemSize as function when prepending', async () => {
+      vi.useFakeTimers();
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'scrollTop', { value: 100, writable: true });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        container.scrollTop = options.top;
+      });
+
+      const items = Array.from({ length: 50 }, (_, i) => ({ id: i }));
+      const { props } = setup({
+        ...defaultProps,
+        items,
+        container,
+        itemSize: (item: { id: number; }) => (item.id < 0 ? 100 : 50),
+        restoreScrollOnPrepend: true,
+      });
+      await nextTick();
+
+      // Prepend 1 item with id -1 (size 100)
+      const newItems = [ { id: -1 }, ...items ];
+      props.value.items = newItems;
+      await nextTick();
+      await nextTick();
+
+      // Should have adjusted scroll by 100px. New scrollTop should be 200.
+      expect(container.scrollTop).toBe(200);
+      vi.useRealTimers();
+    });
+
     it('should NOT restore scroll position when restoreScrollOnPrepend is false', async () => {
       const container = document.createElement('div');
       Object.defineProperty(container, 'scrollTop', { value: 100, writable: true });
@@ -991,7 +1158,7 @@ describe('useVirtualScroll', () => {
       const { props } = setup({ ...defaultProps, items, container, restoreScrollOnPrepend: true });
       await nextTick();
 
-      const newItems = [ { id: -1 }, { id: 9999 } ]; // completely different
+      const newItems = [ { id: -1 }, { id: 9999 } ];
       props.value.items = newItems;
       await nextTick();
       await nextTick();
@@ -1003,18 +1170,96 @@ describe('useVirtualScroll', () => {
       Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true });
       Object.defineProperty(container, 'scrollHeight', { value: 5000, configurable: true });
       const { result, props } = setup({ ...defaultProps, container, restoreScrollOnPrepend: true });
-      result.scrollToIndex(10, null, { behavior: 'smooth' });
-      // pendingScroll should be set because it's not reached yet
+      await nextTick();
 
+      result.scrollToIndex(10, null, { behavior: 'smooth' });
       props.value.items = [ { id: -1 }, ...props.value.items ];
       await nextTick();
     });
+  });
 
-    it('should handle updateItemSizes for horizontal direction', async () => {
-      const { result } = setup({ ...defaultProps, direction: 'horizontal', itemSize: undefined });
-      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 50 } ]);
+  describe('advanced logic and edge cases', () => {
+    it('should trigger scroll correction when isScrolling becomes false', async () => {
+      vi.useFakeTimers();
+      const { result } = setup({ ...defaultProps, container: window, itemSize: undefined });
+      await nextTick();
+      result.scrollToIndex(10, 0, 'start');
+      document.dispatchEvent(new Event('scroll'));
+      expect(result.scrollDetails.value.isScrolling).toBe(true);
+      vi.advanceTimersByTime(250);
+      await nextTick();
+      expect(result.scrollDetails.value.isScrolling).toBe(false);
+      vi.useRealTimers();
+    });
+
+    it('should trigger scroll correction when treeUpdateFlag changes', async () => {
+      const { result } = setup({ ...defaultProps, itemSize: undefined });
+      await nextTick();
+      result.scrollToIndex(10, 0, 'start');
+      // Trigger tree update
+      result.updateItemSize(5, 100, 100);
+      await nextTick();
+    });
+
+    it('should cover updateHostOffset when container is window', async () => {
+      const { result, props } = setup({ ...defaultProps, container: window });
+      const host = document.createElement('div');
+      props.value.hostElement = host;
+      await nextTick();
+      result.updateHostOffset();
+    });
+
+    it('should cover updateHostOffset when container is hostElement', async () => {
+      const host = document.createElement('div');
+      const { result } = setup({ ...defaultProps, container: host, hostElement: host });
+      await nextTick();
+      result.updateHostOffset();
+    });
+
+    it('should handle updateHostOffset with window fallback when container is missing', async () => {
+      const { result, props } = setup({ ...defaultProps, container: undefined });
+      const host = document.createElement('div');
+      props.value.hostElement = host;
+      await nextTick();
+      result.updateHostOffset();
+    });
+
+    it('should correctly calculate hostOffset when container is an HTMLElement', async () => {
+      const container = document.createElement('div');
+      const hostElement = document.createElement('div');
+
+      container.getBoundingClientRect = vi.fn(() => ({ top: 100, left: 100, bottom: 200, right: 200, width: 100, height: 100, x: 100, y: 100, toJSON: () => '' }));
+      hostElement.getBoundingClientRect = vi.fn(() => ({ top: 150, left: 150, bottom: 200, right: 200, width: 50, height: 50, x: 150, y: 150, toJSON: () => '' }));
+      Object.defineProperty(container, 'scrollTop', { value: 50, writable: true, configurable: true });
+
+      const { result } = setup({ ...defaultProps, container, hostElement });
+      await nextTick();
+      result.updateHostOffset();
+      expect(result.scrollDetails.value.scrollOffset.y).toBeDefined();
+    });
+
+    it('should cover refresh method', async () => {
+      const { result } = setup({ ...defaultProps, itemSize: 0 });
+      result.updateItemSize(0, 100, 100);
+      await nextTick();
+      expect(result.totalHeight.value).toBe(4060);
+
+      result.refresh();
+      await nextTick();
+      expect(result.totalHeight.value).toBe(4000);
+    });
+
+    it('should trigger scroll correction on tree update with string alignment', async () => {
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true });
+      Object.defineProperty(container, 'scrollHeight', { value: 5000, configurable: true });
+      const { result } = setup({ ...defaultProps, container, itemSize: undefined });
+      // Set a pending scroll with string alignment
+      result.scrollToIndex(10, null, 'start');
+
+      // Trigger tree update
+      result.updateItemSize(0, 100, 100);
       await nextTick();
-      expect(result.totalWidth.value).toBe(5050);
     });
 
     it('should trigger scroll correction on tree update with pending scroll', async () => {
@@ -1049,10 +1294,168 @@ describe('useVirtualScroll', () => {
       expect(result.scrollDetails.value.isScrolling).toBe(false);
       vi.useRealTimers();
     });
+
+    it('should update totals when function-based itemSize dependencies change and refresh is called', async () => {
+      const defaultHeight = ref(50);
+      const getRowHeight = () => defaultHeight.value;
+
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'vertical' as const,
+        itemSize: getRowHeight,
+      }) as Ref<VirtualScrollProps<unknown>>;
+
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(5000); // 100 * 50
+
+      defaultHeight.value = 60;
+      // Total height should still be 5000 because getRowHeight reference didn't change
+      // and initializeSizes hasn't been called automatically.
+      expect(result.totalHeight.value).toBe(5000);
+
+      result.refresh();
+      await nextTick();
+      expect(result.totalHeight.value).toBe(6000);
+    });
+
+    it('should update totals via measurements even if itemSize is a function', async () => {
+      const getRowHeight = () => 50;
+
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'vertical' as const,
+        itemSize: getRowHeight,
+      }) as Ref<VirtualScrollProps<unknown>>;
+
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(5000);
+
+      // Simulate ResizeObserver measurement
+      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 70 } ]);
+      await nextTick();
+
+      // Item 0 is now 70 instead of 50. Total: 50 * 99 + 70 = 4950 + 70 = 5020.
+      expect(result.totalHeight.value).toBe(5020);
+    });
+
+    it('should update totals via measurements even if columnWidth is a function', async () => {
+      const getColWidth = () => 100;
+
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'both' as const,
+        columnCount: 5,
+        columnWidth: getColWidth,
+        itemSize: 50,
+      }) as Ref<VirtualScrollProps<unknown>>;
+
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalWidth.value).toBe(500);
+
+      // Simulate ResizeObserver measurement on a cell
+      // We need to provide an element with data-col-index
+      const element = document.createElement('div');
+      const cell = document.createElement('div');
+      cell.dataset.colIndex = '0';
+      Object.defineProperty(cell, 'offsetWidth', { value: 120 });
+      element.appendChild(cell);
+
+      result.updateItemSizes([ { index: 0, inlineSize: 120, blockSize: 50, element } ]);
+      await nextTick();
+
+      // Column 0 is now 120 instead of 100. Total: 100 * 4 + 120 = 520.
+      expect(result.totalWidth.value).toBe(520);
+    });
   });
 
   // eslint-disable-next-line test/prefer-lowercase-title
   describe('SSR support', () => {
+    it('should handle colBuffer when ssrRange is present and not scrolling', async () => {
+      vi.useFakeTimers();
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'clientWidth', { value: 500, configurable: true });
+      Object.defineProperty(container, 'scrollLeft', { value: 0, writable: true, configurable: true });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.left !== undefined) {
+          Object.defineProperty(container, 'scrollLeft', { value: options.left, writable: true, configurable: true });
+        }
+      });
+
+      const { result } = setup({
+        ...defaultProps,
+        container,
+        direction: 'both',
+        columnCount: 20,
+        columnWidth: 100,
+        ssrRange: { start: 0, end: 10, colStart: 1, colEnd: 2 },
+        initialScrollIndex: 0,
+      });
+
+      await nextTick(); // onMounted schedules hydration
+      await nextTick(); // hydration tick 1
+      await nextTick(); // hydration tick 2 (isHydrating = false)
+
+      expect(result.isHydrated.value).toBe(true);
+
+      // Scroll to col 5 (offset 500)
+      result.scrollToIndex(null, 5, { align: 'start', behavior: 'auto' });
+      await nextTick();
+
+      vi.runAllTimers(); // Clear isScrolling timeout
+      await nextTick();
+
+      // start = findLowerBound(500) = 5.
+      // colBuffer should be 0 because ssrRange is present and isScrolling is false.
+      expect(result.columnRange.value.start).toBe(5);
+
+      // Now trigger a scroll to make isScrolling true
+      container.dispatchEvent(new Event('scroll'));
+      await nextTick();
+      // isScrolling is now true. colBuffer should be 2.
+      expect(result.columnRange.value.start).toBe(3);
+      vi.useRealTimers();
+    });
+
+    it('should handle bufferBefore when ssrRange is present and not scrolling', async () => {
+      vi.useFakeTimers();
+      const container = document.createElement('div');
+      Object.defineProperty(container, 'clientHeight', { value: 500 });
+      Object.defineProperty(container, 'scrollTop', { value: 0, writable: true, configurable: true });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.top !== undefined) {
+          Object.defineProperty(container, 'scrollTop', { value: options.top, writable: true, configurable: true });
+        }
+      });
+
+      const { result } = setup({
+        ...defaultProps,
+        container,
+        itemSize: 50,
+        bufferBefore: 5,
+        ssrRange: { start: 0, end: 10 },
+        initialScrollIndex: 10,
+      });
+
+      await nextTick(); // schedules hydration
+      await nextTick(); // hydration tick scrolls to 10
+      await nextTick();
+
+      vi.runAllTimers(); // Clear isScrolling timeout
+      await nextTick();
+
+      expect(result.isHydrated.value).toBe(true);
+      // start = floor(500 / 50) = 10.
+      // Since ssrRange is present and isScrolling is false, bufferBefore should be 0.
+      expect(result.renderedItems.value[ 0 ]?.index).toBe(10);
+
+      // Now trigger a scroll to make isScrolling true
+      container.dispatchEvent(new Event('scroll'));
+      await nextTick();
+      // isScrolling is now true. bufferBefore should be 5.
+      expect(result.renderedItems.value[ 0 ]?.index).toBe(5);
+      vi.useRealTimers();
+    });
+
     it('should handle SSR range in range calculation', () => {
       const props = ref({
         items: mockItems,
@@ -1072,6 +1475,17 @@ describe('useVirtualScroll', () => {
       expect(result.columnRange.value.end).toBe(5);
     });
 
+    it('should handle SSR range with colEnd fallback in columnRange calculation', () => {
+      const props = ref({
+        items: mockItems,
+        columnCount: 10,
+        ssrRange: { start: 0, end: 10, colStart: 0, colEnd: 0 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      // colEnd is 0, so it should use columnCount (10)
+      expect(result.columnRange.value.end).toBe(10);
+    });
+
     it('should handle SSR range with both directions for total sizes', () => {
       const props = ref({
         items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
@@ -1082,8 +1496,8 @@ describe('useVirtualScroll', () => {
         ssrRange: { start: 10, end: 20, colStart: 2, colEnd: 5 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.totalWidth.value).toBe(300); // (5-2) * 100
-      expect(result.totalHeight.value).toBe(500); // (20-10) * 50
+      expect(result.totalWidth.value).toBe(300); // (5-2) * 100 - gap(0)
+      expect(result.totalHeight.value).toBe(500); // (20-10) * 50 - gap(0)
     });
 
     it('should handle SSR range with horizontal direction for total sizes', () => {
@@ -1094,29 +1508,30 @@ describe('useVirtualScroll', () => {
         ssrRange: { start: 10, end: 20 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.totalWidth.value).toBe(500); // (20-10) * 50
+      expect(result.totalWidth.value).toBe(500); // (20-10) * 50 - gap(0)
     });
 
-    it('should handle SSR range with fixed size horizontal for total sizes', () => {
+    it('should handle SSR range with vertical offset in renderedItems', () => {
       const props = ref({
         items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
-        direction: 'horizontal',
+        direction: 'vertical',
         itemSize: 50,
         ssrRange: { start: 10, end: 20 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.totalWidth.value).toBe(500); // (20-10) * 50
+      expect(result.renderedItems.value[ 0 ]?.offset.y).toBe(0);
     });
 
-    it('should handle SSR range with vertical offset in renderedItems', () => {
+    it('should handle SSR range with dynamic horizontal offsets in renderedItems', () => {
       const props = ref({
         items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
-        direction: 'vertical',
-        itemSize: 50,
+        direction: 'horizontal',
+        itemSize: undefined, // dynamic
         ssrRange: { start: 10, end: 20 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.renderedItems.value[ 0 ]?.offset.y).toBe(0);
+      // ssrOffsetX = itemSizesX.query(10) = 10 * 40 = 400
+      expect(result.renderedItems.value[ 0 ]?.offset.x).toBe(400);
     });
 
     it('should handle SSR range with dynamic sizes for total sizes', () => {
@@ -1127,7 +1542,7 @@ describe('useVirtualScroll', () => {
         ssrRange: { start: 10, end: 20 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.totalHeight.value).toBe(500);
+      expect(result.totalHeight.value).toBe(400); // (20-10) * 40 - gap(0)
     });
 
     it('should handle SSR range with dynamic horizontal sizes for total sizes', () => {
@@ -1138,7 +1553,7 @@ describe('useVirtualScroll', () => {
         ssrRange: { start: 10, end: 20 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.totalWidth.value).toBe(500);
+      expect(result.totalWidth.value).toBe(400); // (20-10) * 40 - 0 gap
     });
 
     it('should handle SSR range with both directions and dynamic offsets', () => {
@@ -1150,8 +1565,8 @@ describe('useVirtualScroll', () => {
         ssrRange: { start: 10, end: 20, colStart: 2, colEnd: 5 },
       }) as Ref<VirtualScrollProps<unknown>>;
       const result = useVirtualScroll(props);
-      expect(result.renderedItems.value[ 0 ]?.offset.y).toBe(0);
-      expect(result.renderedItems.value[ 0 ]?.offset.x).toBe(-300);
+      expect(result.totalWidth.value).toBe(300); // (5-2) * 100
+      expect(result.totalHeight.value).toBe(400); // (20-10) * 40
     });
 
     it('should scroll to ssrRange on mount', async () => {
@@ -1184,6 +1599,20 @@ describe('useVirtualScroll', () => {
       expect(result.renderedItems.value[ 0 ]?.offset.x).toBe(-500);
     });
 
+    it('should handle SSR range with direction "both" and colEnd falsy', () => {
+      const propsValue = ref({
+        columnCount: 10,
+        columnWidth: 100,
+        direction: 'both' as const,
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        ssrRange: { colEnd: 0, colStart: 5, end: 10, start: 0 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      // colEnd is 0, so it should use colCount (10)
+      // totalWidth = columnSizes.query(10) - columnSizes.query(5) = 1000 - 500 = 500
+      expect(result.totalWidth.value).toBe(500);
+    });
+
     it('should handle SSR range with colCount > 0 in totalWidth', () => {
       const props = ref({
         items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
@@ -1195,20 +1624,365 @@ describe('useVirtualScroll', () => {
       const result = useVirtualScroll(props);
       expect(result.totalWidth.value).toBe(500);
     });
+  });
 
-    it('should skip undefined items in renderedItems', async () => {
-      // items array is mockItems (length 100)
-      const { result } = setup({ ...defaultProps, stickyIndices: [ 1000 ] });
-      // Scroll way past the end
-      result.scrollToOffset(0, 100000);
+  describe('helpers', () => {
+    it('should handle zero column count in totalWidth', async () => {
+      const { result } = setup({ ...defaultProps, direction: 'both', columnCount: 0 });
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should handle vertical direction in totalWidth', () => {
+      const { result } = setup({ ...defaultProps, direction: 'vertical' });
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should handle horizontal direction in totalHeight', () => {
+      const { result } = setup({ ...defaultProps, direction: 'horizontal' });
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    it('should handle zero items in totalWidth/totalHeight', async () => {
+      const { result } = setup({ ...defaultProps, items: [] });
+      expect(result.totalHeight.value).toBe(0);
+
+      const { result: rH } = setup({ ...defaultProps, direction: 'horizontal', items: [] });
+      expect(rH.totalWidth.value).toBe(0);
+    });
+
+    it('should cover SSR with zero items/columns', () => {
+      const props = ref({
+        items: [],
+        direction: 'both',
+        columnCount: 0,
+        ssrRange: { start: 0, end: 0, colStart: 0, colEnd: 0 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalWidth.value).toBe(0);
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    it('should handle SSR range with both directions and no columns', () => {
+      const props = ref({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        direction: 'both',
+        columnCount: 0,
+        ssrRange: { start: 10, end: 20, colStart: 0, colEnd: 0 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should handle SSR range with direction both and colCount > 0 but colEnd <= colStart', () => {
+      const props = ref({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        direction: 'both',
+        columnCount: 10,
+        ssrRange: { start: 0, end: 10, colStart: 5, colEnd: 5 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should handle SSR range with vertical/both and end <= start', () => {
+      const props = ref({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        direction: 'vertical',
+        ssrRange: { start: 10, end: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    it('should handle SSR range with dynamic horizontal sizes for total sizes', () => {
+      const props = ref({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        direction: 'horizontal',
+        itemSize: 0,
+        ssrRange: { start: 10, end: 20 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalWidth.value).toBe(400); // (20-10) * 40
+    });
+
+    it('should handle SSR range with both directions and dynamic offsets for total width', () => {
+      const props = ref({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        direction: 'both',
+        columnCount: 10,
+        itemSize: 0,
+        ssrRange: { start: 10, end: 20, colStart: 2, colEnd: 5 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(props);
+      expect(result.totalWidth.value).toBe(300);
+    });
+
+    it('should handle updateItemSizes with index < 0', async () => {
+      const { result } = setup({ ...defaultProps, itemSize: undefined });
+      result.updateItemSizes([ { index: -1, inlineSize: 100, blockSize: 100 } ]);
       await nextTick();
-      // prevStickyIdx will be 1000, which is out of bounds
-      expect(result.renderedItems.value.length).toBe(0);
+      // Should not change total height
+      expect(result.totalHeight.value).toBe(4000);
     });
 
-    it('should cover object padding branches in helpers', () => {
+    it('should handle updateItemSizes with direction vertical and dynamic itemSize for X', async () => {
+      const { result } = setup({ ...defaultProps, direction: 'vertical', itemSize: undefined });
+      // Measured Items X should not be updated if direction is vertical
+      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 100 } ]);
+      await nextTick();
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should handle SSR with horizontal direction and fixedItemSize', () => {
+      const propsValue = ref({
+        direction: 'horizontal' as const,
+        itemSize: 50,
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        ssrRange: { end: 20, start: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalWidth.value).toBe(500); // (20-10) * 50 - 0 gap
+    });
+
+    it('should handle SSR with vertical direction and fixedItemSize', () => {
+      const propsValue = ref({
+        direction: 'vertical' as const,
+        itemSize: 50,
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        ssrRange: { end: 20, start: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(500); // (20-10) * 50 - 0 gap
+    });
+
+    it('should handle SSR with direction both and fixedItemSize for totalHeight', () => {
+      const propsValue = ref({
+        direction: 'both' as const,
+        columnCount: 10,
+        itemSize: 50,
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        ssrRange: { end: 20, start: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(500);
+    });
+
+    it('should handle SSR range with direction both and colEnd falsy', () => {
+      const propsValue = ref({
+        columnCount: 10,
+        columnWidth: 100,
+        direction: 'both' as const,
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+        ssrRange: { colEnd: 0, colStart: 5, end: 10, start: 0 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      // colEnd is 0, so it should use colCount (10)
+      // totalWidth = (10 - 5) * 100 = 500
+      expect(result.totalWidth.value).toBe(500);
+    });
+
+    it('should handle updateItemSizes with direction both and dynamic itemSize for Y', async () => {
+      const { result } = setup({ ...defaultProps, direction: 'both', columnCount: 2, itemSize: undefined });
+      // First measurement
+      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 100 } ]);
+      await nextTick();
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(100);
+
+      // Increase
+      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 120 } ]);
+      await nextTick();
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(120);
+
+      // Significant decrease
+      result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 100 } ]);
+      await nextTick();
+      expect(result.renderedItems.value[ 0 ]!.size.height).toBe(100);
+    });
+
+    it('should handle object padding branches in helpers', () => {
       expect(getPaddingX({ x: 10 }, 'horizontal')).toBe(10);
       expect(getPaddingY({ y: 20 }, 'vertical')).toBe(20);
     });
+
+    it('should cover totalWidth SSR len <= 0', () => {
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'horizontal' as const,
+        itemSize: 50,
+        ssrRange: { start: 10, end: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should cover totalWidth SSR end <= start for dynamic sizes', () => {
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'horizontal' as const,
+        itemSize: undefined,
+        ssrRange: { start: 10, end: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should cover totalWidth non-SSR items.length <= 0 for dynamic sizes', () => {
+      const propsValue = ref({
+        items: [],
+        direction: 'horizontal' as const,
+        itemSize: undefined,
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalWidth.value).toBe(0);
+    });
+
+    it('should cover totalHeight SSR len <= 0', () => {
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'vertical' as const,
+        itemSize: 50,
+        ssrRange: { start: 10, end: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    it('should cover totalHeight SSR end <= start for dynamic sizes', () => {
+      const propsValue = ref({
+        items: mockItems,
+        direction: 'vertical' as const,
+        itemSize: undefined,
+        ssrRange: { start: 10, end: 10 },
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    it('should cover totalHeight non-SSR items.length <= 0 for dynamic sizes', () => {
+      const propsValue = ref({
+        items: [],
+        direction: 'vertical' as const,
+        itemSize: undefined,
+      }) as Ref<VirtualScrollProps<unknown>>;
+      const result = useVirtualScroll(propsValue);
+      expect(result.totalHeight.value).toBe(0);
+    });
+
+    describe('internal sizing stabilization and edge cases', () => {
+      const mockItems = Array.from({ length: 10 }, (_, i) => ({ id: i }));
+
+      it('should skip re-initializing sizes for already measured dynamic items', async () => {
+        const props = ref({
+          items: mockItems,
+          direction: 'both' as const,
+          columnCount: 2,
+        }) as Ref<VirtualScrollProps<{ id: number; }>>;
+
+        const result = useVirtualScroll(props);
+        await nextTick();
+
+        // Measure item 0 and col 0
+        const parent = document.createElement('div');
+        const col0 = document.createElement('div');
+        col0.dataset.colIndex = '0';
+        Object.defineProperty(col0, 'offsetWidth', { value: 200 });
+        parent.appendChild(col0);
+
+        result.updateItemSizes([ { index: 0, inlineSize: 200, blockSize: 150, element: parent } ]);
+        await nextTick();
+
+        expect(result.getColumnWidth(0)).toBe(200);
+        expect(result.renderedItems.value[ 0 ]?.size.height).toBe(150);
+
+        // Trigger initializeSizes by changing items length
+        props.value.items = Array.from({ length: 11 }, (_, i) => ({ id: i }));
+        await nextTick();
+
+        // Should NOT reset already measured item 0
+        expect(result.getColumnWidth(0)).toBe(200);
+        expect(result.renderedItems.value[ 0 ]?.size.height).toBe(150);
+      });
+
+      it('should mark items as measured when fixed size matches current size within tolerance', async () => {
+        const props = ref({
+          items: mockItems,
+          direction: 'horizontal' as const,
+          itemSize: 50,
+        }) as Ref<VirtualScrollProps<{ id: number; }>>;
+
+        useVirtualScroll(props);
+        await nextTick();
+
+        // Trigger initializeSizes again with same prop
+        props.value.columnGap = 0;
+        await nextTick();
+        // Hits the branch where Math.abs(current - target) <= 0.5
+      });
+
+      it('should mark columns as measured when fixed width matches current width within tolerance', async () => {
+        const props = ref({
+          items: mockItems,
+          direction: 'both' as const,
+          columnCount: 2,
+          columnWidth: 100,
+        }) as Ref<VirtualScrollProps<{ id: number; }>>;
+
+        useVirtualScroll(props);
+        await nextTick();
+
+        props.value.columnGap = 0;
+        await nextTick();
+      });
+
+      it('should reset item sizes when switching between horizontal and vertical directions', async () => {
+        const props = ref({
+          items: mockItems,
+          direction: 'horizontal' as const,
+          itemSize: 50,
+        }) as Ref<VirtualScrollProps<{ id: number; }>>;
+
+        const result = useVirtualScroll(props);
+        await nextTick();
+        expect(result.totalWidth.value).toBe(500);
+
+        // Switch to vertical (resets X)
+        props.value.direction = 'vertical';
+        await nextTick();
+        expect(result.totalWidth.value).toBe(0);
+
+        // Switch to both
+        props.value.direction = 'both';
+        props.value.columnCount = 10;
+        props.value.columnWidth = 100;
+        await nextTick();
+        expect(result.totalHeight.value).toBe(500);
+        expect(result.totalWidth.value).toBe(1000);
+
+        // Switch to horizontal (resets Y)
+        props.value.direction = 'horizontal';
+        await nextTick();
+        await nextTick();
+        expect(result.totalHeight.value).toBe(0);
+      });
+
+      it('should skip re-initialization if dynamic size is already measured and non-zero', async () => {
+        const props = ref({
+          items: mockItems,
+          direction: 'horizontal' as const,
+          itemSize: undefined, // dynamic
+        }) as Ref<VirtualScrollProps<{ id: number; }>>;
+
+        const result = useVirtualScroll(props);
+        await nextTick();
+
+        result.updateItemSizes([ { index: 0, inlineSize: 100, blockSize: 50, element: document.createElement('div') } ]);
+        await nextTick();
+
+        props.value.gap = 1;
+        await nextTick();
+
+        expect(result.totalWidth.value).toBeGreaterThan(0);
+      });
+    });
   });
 });