/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/TableOfContents/TableOfContents.tsx
/**
* Sticky table-of-contents sidebar with scroll-spy.
*
* Highlights the heading currently visible in the viewport
* using an IntersectionObserver.
*/
function TableOfContents({ headings, className = "" }) {
	const [activeId, setActiveId] = useState("");
	const observerRef = useRef(null);
	useEffect(() => {
		if (headings.length === 0) return;
		const elements = headings.map((h) => document.getElementById(h.id)).filter(Boolean);
		if (elements.length === 0) return;
		observerRef.current = new IntersectionObserver((entries) => {
			const visible = entries.find((e) => e.isIntersecting);
			if (visible) setActiveId(visible.target.id);
		}, {
			rootMargin: "0px 0px -80% 0px",
			threshold: 0
		});
		for (const el of elements) observerRef.current.observe(el);
		return () => observerRef.current?.disconnect();
	}, [headings]);
	if (headings.length === 0) return null;
	return /* @__PURE__ */ jsxs("nav", {
		"aria-label": "On this page",
		className: `text-sm ${className}`,
		children: [/* @__PURE__ */ jsx("p", {
			className: "mb-3 font-medium text-(--text)",
			children: "On this page"
		}), /* @__PURE__ */ jsx("ul", {
			className: "space-y-2",
			children: headings.map((heading) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
				href: `#${heading.id}`,
				"aria-current": activeId === heading.id ? true : void 0,
				className: `block transition-colors ${heading.level === 3 ? "pl-3" : ""}
                ${activeId === heading.id ? "font-medium text-(--primary)" : "text-(--text-subtle) hover:text-(--text)"}`,
				children: heading.text
			}) }, heading.id))
		})]
	});
}
//#endregion
export { TableOfContents };

//# sourceMappingURL=TableOfContents.js.map