@humanspeak/svelte-virtual-list 0.2.6 → 0.3.1-beta.0

package/dist/utils/virtualList.d.ts

@@ -1,4 +1,4 @@
-import type { SvelteVirtualListMode } from '../types.js';
+import type { SvelteVirtualListMode, SvelteVirtualListPreviousVisibleRange } from '../types.js';
 import type { VirtualListSetters, VirtualListState } from './types.js';
 /**
  * Calculates the maximum scroll position for a virtual list.
@@ -26,12 +26,9 @@ export declare const calculateScrollPosition: (totalItems: number, itemHeight: n
  * @param {number} totalItems - Total number of items in the list
  * @param {number} bufferSize - Number of items to render outside the visible area
  * @param {SvelteVirtualListMode} mode - Scroll direction mode
- * @returns {{ start: number, end: number }} Range of indices to render
+ * @returns {SvelteVirtualListPreviousVisibleRange} Range of indices to render
  */
-export declare const calculateVisibleRange: (scrollTop: number, viewportHeight: number, itemHeight: number, totalItems: number, bufferSize: number, mode: SvelteVirtualListMode) => {
-    start: number;
-    end: number;
-};
+export declare const calculateVisibleRange: (scrollTop: number, viewportHeight: number, itemHeight: number, totalItems: number, bufferSize: number, mode: SvelteVirtualListMode, atBottom: boolean, wasAtBottomBeforeHeightChange: boolean, lastVisibleRange: SvelteVirtualListPreviousVisibleRange | null, totalContentHeight?: number) => SvelteVirtualListPreviousVisibleRange;
 /**
  * Calculates the CSS transform value for positioning the virtual list items.
  *
@@ -44,9 +41,10 @@ export declare const calculateVisibleRange: (scrollTop: number, viewportHeight:
  * @param {number} visibleEnd - Index of the last visible item
  * @param {number} visibleStart - Index of the first visible item
  * @param {number} itemHeight - Height of each list item in pixels
+ * @param {number} viewportHeight - Height of the viewport in pixels
  * @returns {number} The calculated transform Y value in pixels
  */
-export declare const calculateTransformY: (mode: SvelteVirtualListMode, totalItems: number, visibleEnd: number, visibleStart: number, itemHeight: number) => number;
+export declare const calculateTransformY: (mode: SvelteVirtualListMode, totalItems: number, visibleEnd: number, visibleStart: number, itemHeight: number, viewportHeight: number, totalContentHeight?: number) => number;
 /**
  * Updates the virtual list's height and scroll position when necessary.
  *
@@ -64,19 +62,19 @@ export declare const updateHeightAndScroll: (state: VirtualListState, setters: V
  * Calculates the average height of visible items in a virtual list.
  *
  * This function optimizes performance by:
- * 1. Using a height cache to store measured item heights
+ * 1. Using a height cache to store measured item heights with dirty tracking
  * 2. Only measuring new items not in the cache
  * 3. Calculating a running average of all measured heights
  *
  * @param {HTMLElement[]} itemElements - Array of currently rendered item elements
  * @param {{ start: number }} visibleRange - Object containing the start index of visible items
- * @param {Record<number, number>} heightCache - Cache of previously measured item heights
+ * @param {HeightCache} heightCache - Cache of previously measured item heights with dirty tracking
  * @param {number} currentItemHeight - Current average item height being used
  *
  * @returns {{
  *   newHeight: number,
  *   newLastMeasuredIndex: number,
- *   updatedHeightCache: Record<number, number>
+ *   updatedHeightCache: HeightCache
  * }} Object containing new calculated height, last measured index, and updated cache
  *
  * @example
@@ -89,10 +87,20 @@ export declare const updateHeightAndScroll: (state: VirtualListState, setters: V
  */
 export declare const calculateAverageHeight: (itemElements: HTMLElement[], visibleRange: {
     start: number;
-}, heightCache: Record<number, number>, currentItemHeight: number) => {
+    end: number;
+}, heightCache: Record<number, number>, currentItemHeight: number, dirtyItems: Set<number>, currentTotalHeight?: number, currentValidCount?: number, mode?: SvelteVirtualListMode) => {
     newHeight: number;
     newLastMeasuredIndex: number;
     updatedHeightCache: Record<number, number>;
+    clearedDirtyItems: Set<number>;
+    newTotalHeight: number;
+    newValidCount: number;
+    heightChanges: Array<{
+        index: number;
+        oldHeight: number;
+        newHeight: number;
+        delta: number;
+    }>;
 };
 /**
  * Processes large arrays in chunks to prevent UI blocking.
@@ -121,17 +129,6 @@ export declare const calculateAverageHeight: (itemElements: HTMLElement[], visib
 export declare const processChunked: (items: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
 chunkSize: number, onProgress: (processed: number) => void, // eslint-disable-line no-unused-vars
 onComplete: () => void) => Promise<void>;
-/**
- * Builds a block sum array for fast offset calculation in large virtual lists.
- * Each entry in the array is the total height up to the end of that block (exclusive).
- *
- * @param {Record<number, number>} heightCache - Map of measured item heights
- * @param {number} calculatedItemHeight - Estimated height for unmeasured items
- * @param {number} totalItems - Total number of items in the list
- * @param {number} blockSize - Number of items per block
- * @returns {number[]} Array of prefix sums at each block boundary
- */
-export declare const buildBlockSums: (heightCache: Record<number, number>, calculatedItemHeight: number, totalItems: number, blockSize?: number) => number[];
 /**
  * Calculates the scroll offset (in pixels) needed to bring a specific item into view in a virtual list.
  *
@@ -141,7 +138,7 @@ export declare const buildBlockSums: (heightCache: Record<number, number>, calcu
  * - For indices >= blockSize, sums the block prefix, then only iterates the tail within the block.
  * - For small indices, falls back to the original logic.
  *
- * @param {Record<number, number>} heightCache - Map of measured item heights
+ * @param {HeightCache} heightCache - Map of measured item heights with dirty tracking
  * @param {number} calculatedItemHeight - Estimated height for unmeasured items
  * @param {number} idx - The index to scroll to (exclusive)
  * @param {number[]} [blockSums] - Optional precomputed block sums (for repeated queries)

package/dist/utils/virtualList.js

@@ -29,24 +29,56 @@ export const calculateScrollPosition = (totalItems, itemHeight, containerHeight)
  * @param {number} totalItems - Total number of items in the list
  * @param {number} bufferSize - Number of items to render outside the visible area
  * @param {SvelteVirtualListMode} mode - Scroll direction mode
- * @returns {{ start: number, end: number }} Range of indices to render
+ * @returns {SvelteVirtualListPreviousVisibleRange} Range of indices to render
  */
-export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, totalItems, bufferSize, mode) => {
+export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, totalItems, bufferSize, mode, atBottom, wasAtBottomBeforeHeightChange, lastVisibleRange, totalContentHeight) => {
     if (mode === 'bottomToTop') {
         const visibleCount = Math.ceil(viewportHeight / itemHeight) + 1;
-        const bottomIndex = totalItems - Math.floor(scrollTop / itemHeight);
+        // In bottomToTop mode, scrollTop represents distance from the total content end
+        // scrollTop = 0 means we're at the beginning (showing first items)
+        // scrollTop = maxScrollTop means we're at the end (showing last items)
+        const totalHeight = totalContentHeight ?? totalItems * itemHeight;
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        // Convert scrollTop to "distance from start" for bottomToTop
+        const distanceFromStart = maxScrollTop - scrollTop;
+        const startIndex = Math.floor(distanceFromStart / itemHeight);
+        // Safeguard: handle edge cases
+        if (startIndex < 0) {
+            // We're scrolled beyond the maximum (showing first items)
+            const start = 0;
+            const end = Math.min(totalItems, visibleCount + bufferSize * 2);
+            return { start, end };
+        }
         // Add buffer to both ends
-        const start = Math.max(0, bottomIndex - visibleCount - bufferSize);
-        const end = Math.min(totalItems, bottomIndex + bufferSize);
+        const start = Math.max(0, startIndex - bufferSize);
+        const end = Math.min(totalItems, startIndex + visibleCount + bufferSize);
         return { start, end };
     }
     else {
         const start = Math.floor(scrollTop / itemHeight);
         const end = Math.min(totalItems, start + Math.ceil(viewportHeight / itemHeight) + 1);
+        // Safeguard for topToBottom: ensure last item is fully visible when at max scroll
+        const totalHeight = totalContentHeight ?? totalItems * itemHeight;
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        // Add dynamic tolerance based on item height for browser rendering precision
+        const tolerance = Math.max(itemHeight, 10); // At least one full item height or 10px minimum
+        const isAtBottom = Math.abs(scrollTop - maxScrollTop) <= tolerance;
+        if (isAtBottom) {
+            // When at the bottom, ensure we include all items up to the end
+            const adjustedEnd = totalItems;
+            const visibleItemCount = Math.ceil(viewportHeight / itemHeight) + bufferSize + 1;
+            const adjustedStart = Math.max(0, adjustedEnd - visibleItemCount);
+            return {
+                start: adjustedStart,
+                end: adjustedEnd
+            };
+        }
         // Add buffer to both ends
+        const finalStart = Math.max(0, start - bufferSize);
+        const finalEnd = Math.min(totalItems, end + bufferSize);
         return {
-            start: Math.max(0, start - bufferSize),
-            end: Math.min(totalItems, end + bufferSize)
+            start: finalStart,
+            end: finalEnd
         };
     }
 };
@@ -62,12 +94,22 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
  * @param {number} visibleEnd - Index of the last visible item
  * @param {number} visibleStart - Index of the first visible item
  * @param {number} itemHeight - Height of each list item in pixels
+ * @param {number} viewportHeight - Height of the viewport in pixels
  * @returns {number} The calculated transform Y value in pixels
  */
-export const calculateTransformY = (mode, totalItems, visibleEnd, visibleStart, itemHeight) => {
-    return mode === 'bottomToTop'
-        ? (totalItems - visibleEnd) * itemHeight
-        : visibleStart * itemHeight;
+export const calculateTransformY = (mode, totalItems, visibleEnd, visibleStart, itemHeight, viewportHeight, totalContentHeight) => {
+    if (mode === 'bottomToTop') {
+        // In bottomToTop mode, position items so they stack from bottom up
+        const actualTotalHeight = totalContentHeight ?? totalItems * itemHeight;
+        // Calculate transform to position visible items correctly
+        const basicTransform = (totalItems - visibleEnd) * itemHeight;
+        // When content is smaller than viewport, push to bottom
+        const bottomOffset = Math.max(0, viewportHeight - actualTotalHeight);
+        return basicTransform + bottomOffset;
+    }
+    else {
+        return visibleStart * itemHeight;
+    }
 };
 /**
  * Updates the virtual list's height and scroll position when necessary.
@@ -101,19 +143,19 @@ export const updateHeightAndScroll = (state, setters, immediate = false) => {
  * Calculates the average height of visible items in a virtual list.
  *
  * This function optimizes performance by:
- * 1. Using a height cache to store measured item heights
+ * 1. Using a height cache to store measured item heights with dirty tracking
  * 2. Only measuring new items not in the cache
  * 3. Calculating a running average of all measured heights
  *
  * @param {HTMLElement[]} itemElements - Array of currently rendered item elements
  * @param {{ start: number }} visibleRange - Object containing the start index of visible items
- * @param {Record<number, number>} heightCache - Cache of previously measured item heights
+ * @param {HeightCache} heightCache - Cache of previously measured item heights with dirty tracking
  * @param {number} currentItemHeight - Current average item height being used
  *
  * @returns {{
  *   newHeight: number,
  *   newLastMeasuredIndex: number,
- *   updatedHeightCache: Record<number, number>
+ *   updatedHeightCache: HeightCache
  * }} Object containing new calculated height, last measured index, and updated cache
  *
  * @example
@@ -124,39 +166,113 @@ export const updateHeightAndScroll = (state, setters, immediate = false) => {
  *   40
  * )
  */
-export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight) => {
+export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight, dirtyItems, currentTotalHeight = 0, currentValidCount = 0, mode = 'topToBottom') => {
     const validElements = itemElements.filter((el) => el);
     if (validElements.length === 0) {
         return {
             newHeight: currentItemHeight,
             newLastMeasuredIndex: visibleRange.start,
-            updatedHeightCache: heightCache
+            updatedHeightCache: heightCache,
+            clearedDirtyItems: new Set(),
+            newTotalHeight: currentTotalHeight,
+            newValidCount: currentValidCount,
+            heightChanges: []
         };
     }
     const newHeightCache = { ...heightCache };
-    // Cache heights for new items
-    validElements.forEach((el, i) => {
-        const itemIndex = visibleRange.start + i;
-        if (!newHeightCache[itemIndex]) {
-            try {
-                const height = el.getBoundingClientRect().height;
-                if (Number.isFinite(height) && height > 0) {
-                    newHeightCache[itemIndex] = height;
+    const clearedDirtyItems = new Set();
+    const heightChanges = [];
+    // Start with current running totals (O(1) instead of O(n))
+    let totalValidHeight = currentTotalHeight;
+    let validHeightCount = currentValidCount;
+    // Process only dirty items if they exist, otherwise process all visible items
+    if (dirtyItems.size > 0) {
+        // Process only dirty items
+        dirtyItems.forEach((itemIndex) => {
+            // Map original item index to position in itemElements array
+            let elementIndex;
+            if (mode === 'bottomToTop') {
+                // In bottomToTop, itemElements is reversed relative to the visible range
+                // elementIndex should be based on position within the actual array, not theoretical end
+                elementIndex = validElements.length - 1 - (itemIndex - visibleRange.start);
+            }
+            else {
+                // In topToBottom, itemElements is normal: [item0, item1, ..., item44, item45]
+                elementIndex = itemIndex - visibleRange.start;
+            }
+            const element = validElements[elementIndex];
+            if (element && elementIndex >= 0 && elementIndex < validElements.length) {
+                try {
+                    // await tick()
+                    void element.offsetHeight;
+                    const height = element.getBoundingClientRect().height;
+                    const oldHeight = newHeightCache[itemIndex];
+                    if (Number.isFinite(height) && height > 0) {
+                        // Only update if height actually changed (use smaller tolerance for precision)
+                        if (!oldHeight || Math.abs(oldHeight - height) >= 0.1) {
+                            // Track the height change for scroll correction
+                            const actualOldHeight = oldHeight || currentItemHeight;
+                            const delta = height - actualOldHeight;
+                            heightChanges.push({
+                                index: itemIndex,
+                                oldHeight: actualOldHeight,
+                                newHeight: height,
+                                delta
+                            });
+                            // Update running totals
+                            if (oldHeight && Number.isFinite(oldHeight) && oldHeight > 0) {
+                                // Replace old height with new height in running total
+                                totalValidHeight = totalValidHeight - oldHeight + height;
+                            }
+                            else {
+                                // Add new height to running total
+                                totalValidHeight += height;
+                                validHeightCount++;
+                            }
+                            newHeightCache[itemIndex] = height;
+                        }
+                    }
+                    clearedDirtyItems.add(itemIndex);
+                }
+                catch {
+                    // Skip invalid measurements but still clear from dirty
+                    clearedDirtyItems.add(itemIndex);
                 }
             }
-            catch {
-                // Skip invalid measurements
+            else {
+                clearedDirtyItems.add(itemIndex); // Still clear it from dirty items
             }
-        }
-    });
-    // Calculate average from valid cached heights
-    const validHeights = Object.values(newHeightCache).filter((h) => Number.isFinite(h) && h > 0);
+        });
+    }
+    else {
+        // Original behavior: process all visible items
+        validElements.forEach((el, i) => {
+            const itemIndex = visibleRange.start + i;
+            if (!newHeightCache[itemIndex]) {
+                try {
+                    const height = el.getBoundingClientRect().height;
+                    if (Number.isFinite(height) && height > 0) {
+                        // Add new height to running totals
+                        totalValidHeight += height;
+                        validHeightCount++;
+                        newHeightCache[itemIndex] = height;
+                    }
+                }
+                catch {
+                    // Skip invalid measurements
+                }
+            }
+        });
+    }
+    // O(1) average calculation using running totals!
     return {
-        newHeight: validHeights.length > 0
-            ? validHeights.reduce((sum, h) => sum + h, 0) / validHeights.length
-            : currentItemHeight,
+        newHeight: validHeightCount > 0 ? totalValidHeight / validHeightCount : currentItemHeight,
         newLastMeasuredIndex: visibleRange.start,
-        updatedHeightCache: newHeightCache
+        updatedHeightCache: newHeightCache,
+        clearedDirtyItems,
+        newTotalHeight: totalValidHeight,
+        newValidCount: validHeightCount,
+        heightChanges
     };
 };
 /**
@@ -202,31 +318,6 @@ onComplete) => {
     };
     await processChunk(0);
 };
-/**
- * Builds a block sum array for fast offset calculation in large virtual lists.
- * Each entry in the array is the total height up to the end of that block (exclusive).
- *
- * @param {Record<number, number>} heightCache - Map of measured item heights
- * @param {number} calculatedItemHeight - Estimated height for unmeasured items
- * @param {number} totalItems - Total number of items in the list
- * @param {number} blockSize - Number of items per block
- * @returns {number[]} Array of prefix sums at each block boundary
- */
-export const buildBlockSums = (heightCache, calculatedItemHeight, totalItems, blockSize = 1000) => {
-    const blockSums = [];
-    let sum = 0;
-    for (let i = 0; i < totalItems; i++) {
-        sum += heightCache[i] ?? calculatedItemHeight;
-        if ((i + 1) % blockSize === 0) {
-            blockSums.push(sum);
-        }
-    }
-    // Push the last partial block if needed
-    if (totalItems % blockSize !== 0) {
-        blockSums.push(sum);
-    }
-    return blockSums;
-};
 /**
  * Calculates the scroll offset (in pixels) needed to bring a specific item into view in a virtual list.
  *
@@ -236,7 +327,7 @@ export const buildBlockSums = (heightCache, calculatedItemHeight, totalItems, bl
  * - For indices >= blockSize, sums the block prefix, then only iterates the tail within the block.
  * - For small indices, falls back to the original logic.
  *
- * @param {Record<number, number>} heightCache - Map of measured item heights
+ * @param {HeightCache} heightCache - Map of measured item heights with dirty tracking
  * @param {number} calculatedItemHeight - Estimated height for unmeasured items
  * @param {number} idx - The index to scroll to (exclusive)
  * @param {number[]} [blockSums] - Optional precomputed block sums (for repeated queries)
@@ -255,7 +346,8 @@ export const getScrollOffsetForIndex = (heightCache, calculatedItemHeight, idx,
         // Fallback: O(n) for a single query
         let offset = 0;
         for (let i = 0; i < idx; i++) {
-            offset += heightCache[i] ?? calculatedItemHeight;
+            const height = heightCache[i] ?? calculatedItemHeight;
+            offset += height;
         }
         return offset;
     }

package/dist/utils/virtualListDebug.d.ts

@@ -40,9 +40,10 @@ export declare function shouldShowDebugInfo(prevRange: {
  *
  * This utility function generates a structured debug object that captures the complete
  * state of a virtual list at any given moment. It includes critical metrics such as
- * visible item count, viewport boundaries, total items, processing progress, and
- * height calculations. This information is essential for performance monitoring,
- * debugging scroll behavior, and optimizing virtual list configurations.
+ * visible item count, viewport boundaries, total items, processed items with measured
+ * heights, height calculations, scroll position, and total content dimensions.
+ * This information is essential for performance monitoring, debugging scroll behavior,
+ * and optimizing virtual list configurations.
  *
  * Performance considerations:
  * - All calculations are O(1)
@@ -51,16 +52,20 @@ export declare function shouldShowDebugInfo(prevRange: {
  *
  * @param visibleRange - Current visible range object containing start and end indices
  * @param totalItems - Total number of items in the virtual list
- * @param processedItems - Number of items that have been processed/measured
+ * @param processedItems - Number of items with measured heights (heightCache.length)
  * @param averageItemHeight - Current calculated average height per item in pixels
+ * @param scrollTop - Current scroll position in pixels
+ * @param viewportHeight - Height of the viewport in pixels
  * @returns {SvelteVirtualListDebugInfo} A structured debug information object
  *
  * @example
  * const debugInfo = createDebugInfo(
  *   { start: 0, end: 10 },
  *   1000,
- *   100,
- *   50
+ *   50,
+ *   45,
+ *   200,
+ *   400
  * );
  * console.log('Virtual List State:', debugInfo);
  *
@@ -69,4 +74,4 @@ export declare function shouldShowDebugInfo(prevRange: {
 export declare function createDebugInfo(visibleRange: {
     start: number;
     end: number;
-}, totalItems: number, processedItems: number, averageItemHeight: number): SvelteVirtualListDebugInfo;
+}, totalItems: number, processedItems: number, averageItemHeight: number, scrollTop: number, viewportHeight: number, totalHeight: number): SvelteVirtualListDebugInfo;

package/dist/utils/virtualListDebug.js

@@ -39,9 +39,10 @@ export function shouldShowDebugInfo(prevRange, currentRange, prevHeight, current
  *
  * This utility function generates a structured debug object that captures the complete
  * state of a virtual list at any given moment. It includes critical metrics such as
- * visible item count, viewport boundaries, total items, processing progress, and
- * height calculations. This information is essential for performance monitoring,
- * debugging scroll behavior, and optimizing virtual list configurations.
+ * visible item count, viewport boundaries, total items, processed items with measured
+ * heights, height calculations, scroll position, and total content dimensions.
+ * This information is essential for performance monitoring, debugging scroll behavior,
+ * and optimizing virtual list configurations.
  *
  * Performance considerations:
  * - All calculations are O(1)
@@ -50,28 +51,37 @@ export function shouldShowDebugInfo(prevRange, currentRange, prevHeight, current
  *
  * @param visibleRange - Current visible range object containing start and end indices
  * @param totalItems - Total number of items in the virtual list
- * @param processedItems - Number of items that have been processed/measured
+ * @param processedItems - Number of items with measured heights (heightCache.length)
  * @param averageItemHeight - Current calculated average height per item in pixels
+ * @param scrollTop - Current scroll position in pixels
+ * @param viewportHeight - Height of the viewport in pixels
  * @returns {SvelteVirtualListDebugInfo} A structured debug information object
  *
  * @example
  * const debugInfo = createDebugInfo(
  *   { start: 0, end: 10 },
  *   1000,
- *   100,
- *   50
+ *   50,
+ *   45,
+ *   200,
+ *   400
  * );
  * console.log('Virtual List State:', debugInfo);
  *
  * @throws {Error} Will throw if end index is less than start index in visibleRange
  */
-export function createDebugInfo(visibleRange, totalItems, processedItems, averageItemHeight) {
+export function createDebugInfo(visibleRange, totalItems, processedItems, averageItemHeight, scrollTop, viewportHeight, totalHeight) {
+    const atTop = scrollTop <= 1; // Small tolerance for floating point precision
+    const atBottom = scrollTop >= totalHeight - viewportHeight - 1; // Small tolerance
     return {
         visibleItemsCount: visibleRange.end - visibleRange.start,
         startIndex: visibleRange.start,
         endIndex: visibleRange.end,
         totalItems,
-        processedItems,
-        averageItemHeight
+        processedItems, // Number of items with measured heights in heightCache
+        averageItemHeight,
+        atTop,
+        atBottom,
+        totalHeight
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-virtual-list",
-    "version": "0.2.6",
+    "version": "0.3.1-beta.0",
     "description": "A lightweight, high-performance virtual list component for Svelte 5 that renders large datasets with minimal memory usage. Features include dynamic height support, smooth scrolling, TypeScript support, and efficient DOM recycling. Ideal for infinite scrolling lists, data tables, chat interfaces, and any application requiring the rendering of thousands of items without compromising performance. Zero dependencies and fully customizable.",
     "keywords": [
         "svelte",
@@ -55,16 +55,17 @@
         "lint": "prettier --check . && eslint .",
         "lint:fix": "npm run format && eslint . --fix",
         "package": "svelte-kit sync && svelte-package && publint",
+        "prepare": "husky",
         "prepublishOnly": "npm run package",
         "preview": "vite preview",
-        "test": "vitest run --coverage",
+        "test": "vitest run --coverage --",
         "test:all": "npm run test && npm run test:e2e",
-        "test:e2e": "playwright test",
-        "test:e2e:debug": "playwright test --debug",
+        "test:e2e": "playwright test --",
+        "test:e2e:debug": "playwright test --debug --",
         "test:e2e:report": "playwright show-report",
-        "test:e2e:ui": "playwright test --ui",
-        "test:only": "vitest run",
-        "test:watch": "vitest"
+        "test:e2e:ui": "playwright test --ui --",
+        "test:only": "vitest run --",
+        "test:watch": "vitest --"
     },
     "overrides": {
         "@sveltejs/kit": {
@@ -76,45 +77,46 @@
     },
     "devDependencies": {
         "@eslint/compat": "^1.3.1",
-        "@eslint/js": "^9.29.0",
-        "@faker-js/faker": "^9.8.0",
-        "@playwright/test": "^1.53.1",
-        "@sveltejs/adapter-auto": "^6.0.1",
-        "@sveltejs/kit": "^2.22.2",
-        "@sveltejs/package": "^2.3.12",
-        "@sveltejs/vite-plugin-svelte": "^5.1.0",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@eslint/js": "^9.32.0",
+        "@faker-js/faker": "^9.9.0",
+        "@playwright/test": "^1.54.2",
+        "@sveltejs/adapter-auto": "^6.0.2",
+        "@sveltejs/kit": "^2.27.3",
+        "@sveltejs/package": "^2.4.1",
+        "@sveltejs/vite-plugin-svelte": "^6.1.0",
+        "@testing-library/jest-dom": "^6.6.4",
         "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^24.0.4",
-        "@typescript-eslint/eslint-plugin": "^8.35.0",
-        "@typescript-eslint/parser": "^8.35.0",
+        "@types/node": "^24.2.0",
+        "@typescript-eslint/eslint-plugin": "^8.39.0",
+        "@typescript-eslint/parser": "^8.39.0",
         "@vitest/coverage-v8": "^3.2.4",
-        "eslint": "^9.29.0",
-        "eslint-config-prettier": "^10.1.5",
+        "eslint": "^9.32.0",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-svelte": "^3.10.0",
+        "eslint-plugin-svelte": "^3.11.0",
         "eslint-plugin-unused-imports": "^4.1.4",
-        "globals": "^16.2.0",
+        "globals": "^16.3.0",
+        "husky": "^9.1.7",
         "jsdom": "^26.1.0",
-        "prettier": "^3.6.1",
-        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier": "^3.6.2",
+        "prettier-plugin-organize-imports": "^4.2.0",
         "prettier-plugin-sort-json": "^4.1.1",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.6.13",
+        "prettier-plugin-tailwindcss": "^0.6.14",
         "publint": "^0.3.12",
-        "svelte": "^5.34.8",
-        "svelte-check": "^4.2.2",
-        "typescript": "^5.8.3",
-        "typescript-eslint": "^8.35.0",
-        "vite": "^6.3.5",
+        "svelte": "^5.38.0",
+        "svelte-check": "^4.3.1",
+        "typescript": "^5.9.2",
+        "typescript-eslint": "^8.39.0",
+        "vite": "^7.1.1",
         "vitest": "^3.2.4"
     },
     "peerDependencies": {
         "svelte": "^5.0.0"
     },
     "volta": {
-        "node": "22.16.0"
+        "node": "22.18.0"
     },
     "publishConfig": {
         "access": "public"