fix: ToC highlights only topmost visible heading

src/components/markdown/TableOfContents.tsx

@@ -8,13 +8,27 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
   const observerRef = useRef<IntersectionObserver | null>(null);
 
   useEffect(() => {
+    const visibleHeadings = new Map<string, number>();
+    
     const callback: IntersectionObserverCallback = (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          setActiveId(entry.target.id);
+          visibleHeadings.set(entry.target.id, entry.boundingClientRect.top);
+        } else {
+          visibleHeadings.delete(entry.target.id);
         }
       });
+      
+      // Find the topmost visible heading
+      if (visibleHeadings.size > 0) {
+        const sortedHeadings = Array.from(visibleHeadings.entries())
+          .sort((a, b) => a[1] - b[1]);
+        setActiveId(sortedHeadings[0][0]);
+      } else {
+        setActiveId(null);
+      }
     };
+    
     const observer = new IntersectionObserver(callback, {
       rootMargin: "-40% 0px -55% 0px",
       threshold: 0.1,