"use client"; import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"; import type { HTMLAttributes, MouseEvent } from "react"; export type TocHeading = { id: string; title: string; level?: 2 | 3; }; export type TableOfContentsRailProps = Omit, "children"> & { headings: TocHeading[]; activeId?: string; defaultActiveId?: string; onActiveChange?: (id: string) => void; title?: string; rootMargin?: string; reducedMotion?: boolean; }; const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; const motionQuery = "(prefers-reduced-motion: reduce)"; function subscribeMotion(callback: () => void) { const media = window.matchMedia(motionQuery); media.addEventListener?.("change", callback); return () => media.removeEventListener?.("change", callback); } function usePrefersReducedMotion(force?: boolean) { const preferred = useSyncExternalStore(subscribeMotion, () => window.matchMedia(motionQuery).matches, () => false); return force ?? preferred; } const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; export function TableOfContentsRail({ headings, activeId, defaultActiveId, onActiveChange, title = "On this page", rootMargin = "0px 0px -65% 0px", reducedMotion, className = "", ...props }: TableOfContentsRailProps) { const [observed, setObserved] = useState(defaultActiveId ?? headings[0]?.id); const current = activeId ?? observed; const reduce = usePrefersReducedMotion(reducedMotion); const listRef = useRef(null); const [indicator, setIndicator] = useState<{ top: number; height: number } | null>(null); const onActiveChangeRef = useRef(onActiveChange); useEffect(() => { onActiveChangeRef.current = onActiveChange; }); useEffect(() => { if (typeof IntersectionObserver === "undefined") return; const elements = headings .map((heading) => document.getElementById(heading.id)) .filter((element): element is HTMLElement => Boolean(element)); if (!elements.length) return; const visible = new Set(); const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting) visible.add(entry.target.id); else visible.delete(entry.target.id); } const first = headings.find((heading) => visible.has(heading.id)); if (!first) return; setObserved((previous) => { if (previous !== first.id) onActiveChangeRef.current?.(first.id); return first.id; }); }, { rootMargin, threshold: [0, 1] }, ); elements.forEach((element) => observer.observe(element)); return () => observer.disconnect(); }, [headings, rootMargin]); useIsoLayoutEffect(() => { const list = listRef.current; if (!list || !current) return; const measure = () => { const link = list.querySelector('[data-toc-id="' + current + '"]'); if (!link) return; const next = { top: link.offsetTop, height: link.offsetHeight }; setIndicator((previous) => (previous && previous.top === next.top && previous.height === next.height ? previous : next)); }; measure(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(measure); observer.observe(list); return () => observer.disconnect(); }, [current, headings]); const onClick = (event: MouseEvent, id: string) => { const target = document.getElementById(id); if (!target) return; event.preventDefault(); target.scrollIntoView?.({ behavior: reduce ? "auto" : "smooth", block: "start" }); if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1"); target.focus({ preventScroll: true }); window.history.replaceState(null, "", "#" + id); if (activeId === undefined) setObserved(id); if (id !== current) onActiveChange?.(id); }; return ( ); }

Make a request

Choose a travel profile

Avoid tolls and ferries

Handle errors

Make a request

Choose a travel profile

Avoid tolls and ferries

Handle errors