Cross-package indexes, store-based navigation sources, instant scroll

Author: milanofthe

src/lib/components/api/ApiToc.svelte

@@ -1,8 +1,31 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { APIModule } from '$lib/api/generated';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import { searchTarget } from '$lib/stores/searchNavigation';
 
+	// Track navigation timeout for cleanup
+	let navigationTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	function clearNavigationTimeout() {
+		if (navigationTimeout) {
+			clearTimeout(navigationTimeout);
+			navigationTimeout = null;
+		}
+	}
+
+	function setNavigationTimeout() {
+		clearNavigationTimeout();
+		navigationTimeout = setTimeout(() => {
+			isNavigating = false;
+			navigationTimeout = null;
+		}, 50); // Short delay for instant scroll
+	}
+
+	onDestroy(() => {
+		clearNavigationTimeout();
+	});
+
 	interface Props {
 		modules: APIModule[];
 		onNavigate?: (id: string) => void;
@@ -74,7 +97,7 @@
 	function scrollToElement(id: string) {
 		const element = document.getElementById(id);
 		if (element) {
-			element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			element.scrollIntoView({ block: 'start' });
 			activeId = id;
 			onNavigate?.(id);
 		}
@@ -86,11 +109,8 @@
 	function navigateToClass(className: string) {
 		isNavigating = true;
 		activeId = className; // Set immediately for visual feedback
-		searchTarget.set({ name: className, type: 'class' });
-		// Re-enable observer after scroll animation completes
-		setTimeout(() => {
-			isNavigating = false;
-		}, 500);
+		searchTarget.set({ name: className, type: 'class', source: 'toc' });
+		setNavigationTimeout();
 	}
 
 	/**
@@ -99,11 +119,8 @@
 	function navigateToFunction(funcName: string) {
 		isNavigating = true;
 		activeId = funcName; // Set immediately for visual feedback
-		searchTarget.set({ name: funcName, type: 'function' });
-		// Re-enable observer after scroll animation completes
-		setTimeout(() => {
-			isNavigating = false;
-		}, 500);
+		searchTarget.set({ name: funcName, type: 'function', source: 'toc' });
+		setNavigationTimeout();
 	}
 
 	function getModuleId(moduleName: string): string {
@@ -162,11 +179,14 @@
 		expandedGroups = newExpanded;
 	}
 
-	// Watch for search/crossref navigation and expand to reveal target
+	// Watch for external navigation (search, crossref, url) and expand TOC to reveal target
 	$effect(() => {
 		const target = $searchTarget;
 		if (!target) return;
 
+		// Skip TOC-initiated navigation (we already handled it)
+		if (target.source === 'toc') return;
+
 		// Find which module contains the target
 		let modulePath: string | null = null;
 
@@ -194,10 +214,7 @@
 				activeId = getModuleId(modulePath);
 			}
 
-			// Re-enable observer after scroll completes
-			setTimeout(() => {
-				isNavigating = false;
-			}, 500);
+			setNavigationTimeout();
 		}
 	});
 

src/lib/components/api/ClassDoc.svelte

@@ -88,7 +88,7 @@
 			isExpanded = true;
 			clearSearchTarget();
 			tick().then(() => {
-				tileElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+				tileElement?.scrollIntoView({ block: 'start' });
 			});
 		}
 		// Method inside this class - expand so method can be found

src/lib/components/api/DocstringRenderer.svelte

@@ -105,7 +105,8 @@
 						e.preventDefault();
 						searchTarget.set({
 							name: target.name,
-							type: target.type as 'class' | 'function' | 'method' | 'module'
+							type: target.type as 'class' | 'function' | 'method' | 'module',
+							source: 'crossref'
 						});
 						goto(fullPath);
 					});
@@ -387,7 +388,8 @@
 				// Set search target to trigger expansion/scroll
 				searchTarget.set({
 					name: targetName,
-					type: linkType as 'class' | 'function' | 'method' | 'module'
+					type: linkType as 'class' | 'function' | 'method' | 'module',
+					source: 'crossref'
 				});
 			}
 

src/lib/components/api/FunctionDoc.svelte

@@ -95,7 +95,7 @@
 			isExpanded = true;
 			clearSearchTarget();
 			tick().then(() => {
-				tileElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+				tileElement?.scrollIntoView({ block: 'start' });
 			});
 		}
 	});

src/lib/components/api/ModuleDoc.svelte

@@ -22,7 +22,7 @@
 		if (target.type === 'module' && target.name === module.name) {
 			clearSearchTarget();
 			tick().then(() => {
-				sectionElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+				sectionElement?.scrollIntoView({ block: 'start' });
 			});
 		}
 	});

src/lib/components/api/TypeRef.svelte

@@ -79,7 +79,8 @@
 
 		searchTarget.set({
 			name: target.name,
-			type: target.type as 'class' | 'function' | 'method' | 'module'
+			type: target.type as 'class' | 'function' | 'method' | 'module',
+			source: 'crossref'
 		});
 
 		// target.path is relative like pathsim/api#ClassName, prepend base/ for absolute URL

src/lib/components/common/MarkdownRenderer.svelte

@@ -287,7 +287,8 @@
 				// Set search target to trigger expansion/scroll
 				searchTarget.set({
 					name: targetName,
-					type: linkType as 'class' | 'function' | 'method' | 'module'
+					type: linkType as 'class' | 'function' | 'method' | 'module',
+					source: 'crossref'
 				});
 			}
 

src/lib/components/common/RstRenderer.svelte

@@ -288,7 +288,8 @@
 				// Set search target to trigger expansion/scroll
 				searchTarget.set({
 					name: targetName,
-					type: linkType as 'class' | 'function' | 'method' | 'module'
+					type: linkType as 'class' | 'function' | 'method' | 'module',
+					source: 'crossref'
 				});
 			}
 

src/lib/components/examples/ExamplesToc.svelte

@@ -40,7 +40,7 @@
 	function scrollTo(id: string) {
 		const element = document.getElementById(id);
 		if (element) {
-			element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			element.scrollIntoView({ block: 'start' });
 			activeId = id;
 		}
 	}

src/lib/components/layout/Sidebar.svelte

@@ -92,7 +92,8 @@
 		searchTarget.set({
 			name: result.name,
 			type: result.type,
-			parentClass: result.parentClass
+			parentClass: result.parentClass,
+			source: 'search'
 		});
 		goto(`${base}/${result.path}`);
 	}