virtualization rules

package.json

@@ -52,7 +52,7 @@
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
 		"jsdom": "^26.0.0",
-		"melt": "^0.40.0",
+		"melt": "^0.40.2",
 		"openai": "^4.90.0",
 		"playwright": "^1.52.0",
 		"postcss": "^8.4.38",

pnpm-lock.yaml

@@ -136,8 +136,8 @@ importers:
         specifier: ^26.0.0
         version: 26.1.0
       melt:
-        specifier: ^0.40.0
-        version: 0.40.0(@floating-ui/[email protected])([email protected])
+        specifier: ^0.40.2
+        version: 0.40.2(@floating-ui/[email protected])([email protected])
       openai:
         specifier: ^4.90.0
         version: 4.90.0([email protected])([email protected])
@@ -2281,8 +2281,8 @@ packages:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
 
-  [email protected].0:
-    resolution: {integrity: sha512-G+urf5f2Cy62cXiPQ+nf3muscjIE9e38kjDWZckU4x08bDaP+hryJ9rrsu81V1x0ZAgEwnMAMKVAFrEdomOYWw==}
+  [email protected].2:
+    resolution: {integrity: sha512-lmf17KdERiDZ4Fefx4B/nrvMptG8QqUexMuRlaxT9AlbX7zbjaqPfJz31ekRvkcw6pgYOuYmQPmhY6jlUDVqSw==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.30.1
@@ -5399,7 +5399,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected].0(@floating-ui/[email protected])([email protected]):
+  [email protected].2(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       dequal: 2.0.3

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -92,14 +92,33 @@
 			onClose?.();
 		},
 		onNavigate(current, direction) {
-			const currIdx = allFilteredModels.findIndex(item => item.type === "model" && item.content === current);
-			// TODO: get next/prev item, scroll to it, and return its content. Make sure
-			// to wrap around.
+			if (current === "__custom__") return null;
+			const modelItems = allFilteredModels.filter(item => item.type === "model");
+			const currIdx = modelItems.findIndex(item => typeof item.content === "object" && item.content.id === current);
+
+			let nextIdx: number;
 			if (direction === "next") {
+				nextIdx = currIdx === -1 ? 0 : (currIdx + 1) % modelItems.length;
+			} else {
+				nextIdx = currIdx === -1 ? modelItems.length - 1 : (currIdx - 1 + modelItems.length) % modelItems.length;
 			}
-			if (direction === "prev") {
+
+			const nextItem = modelItems[nextIdx];
+			if (!nextItem) return null;
+
+			// Scroll to the item
+			const allItems = allFilteredModels;
+			const actualIdx = allItems.findIndex(item => item === nextItem);
+			if (actualIdx !== -1) {
+				virtualScroll.scrollToIndex(actualIdx);
 			}
-			return null;
+
+			// Return the content for highlighting
+			return nextItem.content === "__custom__"
+				? "__custom__"
+				: typeof nextItem.content === "object"
+					? nextItem.content.id
+					: null;
 		},
 	});
 	$effect(() => {

src/lib/spells/virtual-scroll.svelte.ts

@@ -62,6 +62,34 @@ export class VirtualScroll {
 		}));
 	}
 
+	scrollToIndex(index: number) {
+		const { start, end } = this.visibleRange;
+
+		// Only scroll if the index is not currently visible
+		if (index >= start && index <= end) {
+			return; // Already visible, no need to scroll
+		}
+
+		let targetScrollTop: number;
+
+		if (index < start) {
+			// Scrolling up - position item at top with some buffer
+			targetScrollTop = (index - this.overscan) * this.itemHeight;
+		} else {
+			// Scrolling down - position item at bottom with some buffer
+			const visibleItems = Math.floor(this.#containerSize.height / this.itemHeight);
+			targetScrollTop = (index - visibleItems + 1 + this.overscan) * this.itemHeight;
+		}
+
+		const maxScrollTop = this.totalHeight - this.#containerSize.height;
+		this.#scrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+
+		// Update the actual scroll container
+		if (this.#containerEl) {
+			this.#containerEl.scrollTop = this.#scrollTop;
+		}
+	}
+
 	#attachmentKey = createAttachmentKey();
 	get container() {
 		return {