fumadocs-ui 16.7.4 → 16.7.5

package/css/generated/docs.css

@@ -39,7 +39,6 @@
 @source inline("[grid-area:toc]");
 @source inline("a");
 @source inline("absolute");
-@source inline("active");
 @source inline("after");
 @source inline("all");
 @source inline("always");
@@ -223,6 +222,7 @@
 @source inline("inset-0");
 @source inline("inset-y-0");
 @source inline("inset-y-2");
+@source inline("instanceof");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
@@ -300,6 +300,8 @@
 @source inline("of");
 @source inline("on");
 @source inline("onClick");
+@source inline("onClickItem");
+@source inline("onClickOutside");
 @source inline("onOpenChange");
 @source inline("opacity-0");
 @source inline("open");
@@ -364,6 +366,7 @@
 @source inline("searchTrigger");
 @source inline("secondary");
 @source inline("selected");
+@source inline("selectedIdx");
 @source inline("setDate");
 @source inline("setOpen");
 @source inline("shadow-lg");

package/css/generated/flux.css

@@ -17,7 +17,6 @@
 @source inline("[grid-area:main]");
 @source inline("a");
 @source inline("absolute");
-@source inline("active");
 @source inline("after");
 @source inline("align");
 @source inline("all");

package/css/generated/notebook.css

@@ -43,7 +43,6 @@
 @source inline("[grid-area:toc]");
 @source inline("a");
 @source inline("absolute");
-@source inline("active");
 @source inline("after");
 @source inline("all");
 @source inline("always");
@@ -240,6 +239,7 @@
 @source inline("inset-0");
 @source inline("inset-y-0");
 @source inline("inset-y-2");
+@source inline("instanceof");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
@@ -331,6 +331,8 @@
 @source inline("of");
 @source inline("on");
 @source inline("onClick");
+@source inline("onClickItem");
+@source inline("onClickOutside");
 @source inline("onOpenChange");
 @source inline("onPointerEnter");
 @source inline("onPointerLeave");

package/css/generated/shared.css

@@ -104,8 +104,7 @@
 @source inline("at");
 @source inline("attribute");
 @source inline("await");
-@source inline("b1");
-@source inline("b2");
+@source inline("b0");
 @source inline("backdrop-blur-lg");
 @source inline("backdrop-blur-xs");
 @source inline("background");
@@ -330,6 +329,7 @@
 @source inline("enabled");
 @source inline("end");
 @source inline("end-2");
+@source inline("endIdx");
 @source inline("endpoint");
 @source inline("environment");
 @source inline("equal");
@@ -428,7 +428,6 @@
 @source inline("guides");
 @source inline("h");
 @source inline("h-(--fd-animated-height)");
-@source inline("h-(--fd-height)");
 @source inline("h-(--radix-navigation-menu-viewport-height)");
 @source inline("h-1.5");
 @source inline("h-9.5");
@@ -474,7 +473,6 @@
 @source inline("iconClass");
 @source inline("id");
 @source inline("idea");
-@source inline("ids");
 @source inline("idx");
 @source inline("if");
 @source inline("if-needed");
@@ -506,6 +504,7 @@
 @source inline("isActive");
 @source inline("isLoading");
 @source inline("isOpen");
+@source inline("isStart");
 @source inline("isTabActive");
 @source inline("isWindows");
 @source inline("it");
@@ -528,6 +527,7 @@
 @source inline("languages");
 @source inline("last:pb-0");
 @source inline("last:rounded-b-xl");
+@source inline("lastInactiveIdx");
 @source inline("lastUpdate");
 @source inline("layer");
 @source inline("layout");
@@ -683,6 +683,7 @@
 @source inline("onPointerLeave");
 @source inline("onPointerMove");
 @source inline("onPrint");
+@source inline("onResize");
 @source inline("onSearchChange");
 @source inline("onSearchChangeCallback");
 @source inline("onSelect");
@@ -848,7 +849,6 @@
 @source inline("round");
 @source inline("rounded-2xl");
 @source inline("rounded-[inherit]");
-@source inline("rounded-e-full");
 @source inline("rounded-full");
 @source inline("rounded-lg");
 @source inline("rounded-md");
@@ -941,6 +941,7 @@
 @source inline("stars");
 @source inline("start-3");
 @source inline("start-6");
+@source inline("startIdx");
 @source inline("state");
 @source inline("static");
 @source inline("sticky");
@@ -961,11 +962,9 @@
 @source inline("supposed");
 @source inline("sure");
 @source inline("svg");
-@source inline("svgRef");
 @source inline("switch");
 @source inline("system");
 @source inline("t");
-@source inline("t2");
 @source inline("tab");
 @source inline("tabIndex");
 @source inline("table");
@@ -1020,7 +1019,6 @@
 @source inline("tocNoHeadings");
 @source inline("toolbar");
 @source inline("top");
-@source inline("top-(--fd-top)");
 @source inline("top-0");
 @source inline("top-1.5");
 @source inline("top-1/2");
@@ -1031,7 +1029,6 @@
 @source inline("transform");
 @source inline("transition-[clip-path]");
 @source inline("transition-[height]");
-@source inline("transition-[top,height]");
 @source inline("transition-[width,height]");
 @source inline("transition-all");
 @source inline("transition-colors");
@@ -1069,12 +1066,12 @@
 @source inline("urls");
 @source inline("usage");
 @source inline("use");
-@source inline("useActiveAnchors");
 @source inline("useCopyButton");
 @source inline("useDocsSearch");
 @source inline("useI18n");
 @source inline("useId");
 @source inline("useIsDocsLayout");
+@source inline("useItems");
 @source inline("useMediaQuery");
 @source inline("useMemo");
 @source inline("useOnChange");

package/dist/components/toc/clerk.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/clerk.d.ts
 declare function TOCItems({
@@ -7,5 +8,12 @@ declare function TOCItems({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+declare function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCItems };
+export { TOCEmpty, TOCItem, TOCItems };

package/dist/components/toc/clerk.js

@@ -1,59 +1,58 @@
 "use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { TocThumb, useTOCItems } from "./index.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/clerk.tsx
+var clerk_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
-	const { text } = useI18n();
-	const svgRef = useRef(null);
 	const [svg, setSvg] = useState();
-	useEffect(() => {
-		if (!containerRef.current) return;
+	const onResize = useEffectEvent(() => {
 		const container = containerRef.current;
-		function onResize() {
-			if (container.clientHeight === 0) return;
-			let w = 0, h = 0, b1 = 0, d = "";
-			for (let i = 0; i < items.length; i++) {
-				const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
-				if (!element) continue;
-				const styles = getComputedStyle(element);
-				const offset = getLineOffset(items[i].depth) + 1, t2 = element.offsetTop + parseFloat(styles.paddingTop), b2 = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
-				w = Math.max(offset, w);
-				h = Math.max(h, b2);
-				if (i === 0) d += ` M${offset} ${t2} L${offset} ${b2}`;
-				else {
-					const pOffset = getLineOffset(items[i - 1].depth) + 1;
-					d += ` C ${pOffset} ${t2 - 4} ${offset} ${b1 + 4} ${offset} ${t2} L${offset} ${b2}`;
-				}
-				b1 = b2;
-			}
-			w += 1;
-			if (!svgRef.current || svgRef.current.d !== d) {
-				svgRef.current = {
-					d,
-					width: w,
-					height: h
-				};
-				setSvg(svgRef.current);
+		if (!container || container.clientHeight === 0) return;
+		let w = 0;
+		let h = 0;
+		let b0 = 0;
+		let d = "";
+		for (let i = 0; i < items.length; i++) {
+			const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(offset, w);
+			h = Math.max(h, bottom);
+			if (i === 0) d += ` M${offset} ${top} L${offset} ${bottom}`;
+			else {
+				const pOffset = getLineOffset(items[i - 1].depth) + 1;
+				d += ` C ${pOffset} ${top - 4} ${offset} ${b0 + 4} ${offset} ${top} L${offset} ${bottom}`;
 			}
+			b0 = bottom;
 		}
+		setSvg({
+			d,
+			width: w + 1,
+			height: h
+		});
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
 		const observer = new ResizeObserver(onResize);
 		onResize();
-		observer.observe(container);
+		observer.observe(containerRef.current);
 		return () => {
 			observer.disconnect();
 		};
-	}, [items]);
-	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
-		children: text.tocNoHeadings
-	});
+	}, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
 		containerRef,
 		className: "absolute top-0 inset-s-0",
@@ -80,22 +79,33 @@ function TOCItems({ ref, className, ...props }) {
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
-		...props,
-		children: items.map((item, i) => /* @__PURE__ */ jsx(TOCItem, {
-			item,
-			upper: items[i - 1]?.depth,
-			lower: items[i + 1]?.depth
-		}, item.url))
+		...props
 	})] });
 }
+function TOCEmpty() {
+	const { text } = useI18n();
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+}
 function ThumbBox() {
-	const items = useTOCItems();
-	const ids = Primitive.useActiveAnchors();
-	const item = items.findLast((item) => ids.includes(item.url.slice(1)));
-	if (!item) return;
+	const items = Primitive.useItems();
+	let startIdx = -1;
+	let endIdx = -1;
+	let lastInactiveIdx = -1;
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+		if (item.active) {
+			if (startIdx === -1) startIdx = i;
+			endIdx = i;
+		} else if (lastInactiveIdx === -1 || items[lastInactiveIdx].t < item.t) lastInactiveIdx = i;
+	}
+	if (startIdx === -1) return;
+	const isStart = endIdx < lastInactiveIdx;
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
-		style: { translate: `calc(${getLineOffset(item.depth)}px - 1.25px) calc(var(--fd-top) + var(--fd-height))` }
+		style: { translate: `calc(${getLineOffset(items[isStart ? startIdx : endIdx].original.depth)}px - 1.25px) ${isStart ? "var(--fd-top)" : "calc(var(--fd-top) + var(--fd-height))"}` }
 	});
 }
 function getItemOffset(depth) {
@@ -108,12 +118,25 @@ function getLineOffset(depth) {
 	if (depth === 3) return 10;
 	return 20;
 }
-function TOCItem({ item, upper = item.depth, lower = item.depth }) {
-	const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { lowerOffset, offset, upperOffset } = useMemo(() => {
+		const index = items.indexOf(item);
+		const offset = getLineOffset(item.depth);
+		return {
+			offset,
+			upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
+			lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
+		};
+	}, [items, item]);
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
-		style: { paddingInlineStart: getItemOffset(item.depth) },
-		className: "prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+		...props,
+		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", props.className),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
 		children: [
 			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
@@ -141,4 +164,4 @@ function TOCItem({ item, upper = item.depth, lower = item.depth }) {
 	});
 }
 //#endregion
-export { TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, clerk_exports };

package/dist/components/toc/default.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/default.d.ts
 declare function TOCItems({
@@ -7,5 +8,12 @@ declare function TOCItems({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+declare function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCItems };
+export { TOCEmpty, TOCItem, TOCItems };

package/dist/components/toc/default.js

@@ -1,36 +1,47 @@
 "use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { TocThumb, useTOCItems } from "./index.js";
+import { TocThumb } from "./index.js";
 import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/default.tsx
+var default_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
-	const items = useTOCItems();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(TocThumb, {
+			containerRef,
+			className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
+			style: { clipPath: "polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))" }
+		}), /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(ref, containerRef),
+			className: cn("flex flex-col border-s border-fd-foreground/10", className),
+			...props
+		})]
+	});
+}
+function TOCEmpty() {
 	const { text } = useI18n();
-	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
 		children: text.tocNoHeadings
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TocThumb, {
-		containerRef,
-		className: "absolute top-(--fd-top) inset-s-0 w-0.5 h-(--fd-height) rounded-e-full bg-fd-primary transition-[top,height]"
-	}), /* @__PURE__ */ jsx("div", {
-		ref: mergeRefs(ref, containerRef),
-		className: cn("flex flex-col border-s border-fd-foreground/10", className),
-		...props,
-		children: items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))
-	})] });
 }
-function TOCItem({ item }) {
+function TOCItem({ item, ...props }) {
 	return /* @__PURE__ */ jsx(Primitive.TOCItem, {
 		href: item.url,
-		className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
+		...props,
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8", props.className),
 		children: item.title
 	});
 }
 //#endregion
-export { TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, default_exports };

package/dist/components/toc/index.d.ts

@@ -5,7 +5,7 @@ import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/index.d.ts
 declare function useTOCItems(): Primitive.TOCItemType[];
 type TOCProviderProps = Primitive.AnchorProviderProps;
-declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors;
+declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors, useItems: typeof Primitive.useItems;
 declare function TOCProvider({
   toc,
   children,
@@ -26,4 +26,4 @@ declare function TocThumb({
   ...props
 }: TocThumbProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };
+export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -13,13 +13,14 @@ var toc_exports = /* @__PURE__ */ __exportAll({
 	TocThumb: () => TocThumb,
 	useActiveAnchor: () => useActiveAnchor,
 	useActiveAnchors: () => useActiveAnchors,
+	useItems: () => useItems,
 	useTOCItems: () => useTOCItems
 });
 const TOCContext = createContext([]);
 function useTOCItems() {
 	return use(TOCContext);
 }
-const { useActiveAnchor, useActiveAnchors } = Primitive;
+const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
 function TOCProvider({ toc, children, ...props }) {
 	return /* @__PURE__ */ jsx(TOCContext, {
 		value: toc,
@@ -103,4 +104,4 @@ function TocThumb({ containerRef, align = "end", ...props }) {
 	});
 }
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useTOCItems };
+export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/layouts/docs/page/slots/toc.js

@@ -1,9 +1,9 @@
 "use client";
 import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCProvider as TOCProvider$1, TOCScrollArea, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
-import { TOCItems } from "../../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
+import { default_exports } from "../../../../components/toc/default.js";
+import { clerk_exports } from "../../../../components/toc/clerk.js";
 import { useTreePath } from "../../../../contexts/tree.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
 import { useDocsLayout } from "../../client.js";
@@ -15,7 +15,9 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style }) {
+function TOC({ container, header, footer, style = "normal" }) {
+	const items = useTOCItems();
+	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
 		id: "nd-toc",
 		...container,
@@ -27,37 +29,29 @@ function TOC({ container, header, footer, style }) {
 				className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
 			}),
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
 			footer
 		]
 	});
 }
 const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style }) {
-	return /* @__PURE__ */ jsxs(PageTOCPopover, {
-		...container,
-		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
-			...content,
-			children: [
-				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				footer
-			]
-		})]
-	});
-}
-function PageTOCPopover({ className, children, ...rest }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
+	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
 	const { isNavTransparent } = useDocsLayout();
-	const onClick = useEffectEvent((e) => {
-		if (!open) return;
+	const { TOCItems, TOCItem, TOCEmpty } = style === "clerk" ? clerk_exports : default_exports;
+	const onClickOutside = useEffectEvent((e) => {
+		if (!open || !(e.target instanceof HTMLElement)) return;
 		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
 	});
+	const onClickItem = () => {
+		setOpen(false);
+	};
 	useEffect(() => {
-		window.addEventListener("click", onClick);
+		window.addEventListener("click", onClickOutside);
 		return () => {
-			window.removeEventListener("click", onClick);
+			window.removeEventListener("click", onClickOutside);
 		};
 	}, []);
 	return /* @__PURE__ */ jsx(TocPopoverContext, {
@@ -69,12 +63,22 @@ function PageTOCPopover({ className, children, ...rest }) {
 			open,
 			onOpenChange: setOpen,
 			"data-toc-popover": "",
-			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
-			...rest,
-			children: /* @__PURE__ */ jsx("header", {
+			...container,
+			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", container?.className),
+			children: /* @__PURE__ */ jsxs("header", {
 				ref,
 				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
-				children
+				children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+					...content,
+					children: [
+						header,
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+							item,
+							onClick: onClickItem
+						}, item.url))] }) }),
+						footer
+					]
+				})]
 			})
 		})
 	});
@@ -82,18 +86,17 @@ function PageTOCPopover({ className, children, ...rest }) {
 function PageTOCPopoverTrigger({ className, ...props }) {
 	const { text } = useI18n();
 	const { open } = use(TocPopoverContext);
-	const items = useTOCItems();
-	const active = useActiveAnchor();
-	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const items = useItems();
+	const selectedIdx = items.findIndex((item) => item.active);
 	const path = useTreePath().at(-1);
-	const showItem = selected !== -1 && !open;
+	const showItem = selectedIdx !== -1 && !open;
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
 		"data-toc-popover-trigger": "",
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ProgressCircle, {
-				value: (selected + 1) / Math.max(1, items.length),
+				value: (selectedIdx + 1) / Math.max(1, items.length),
 				max: 1,
 				className: cn("shrink-0", open && "text-fd-primary")
 			}),
@@ -104,7 +107,7 @@ function PageTOCPopoverTrigger({ className, ...props }) {
 					children: path?.name ?? text.toc
 				}), /* @__PURE__ */ jsx("span", {
 					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
-					children: items[selected]?.title
+					children: items[selectedIdx]?.original.title
 				})]
 			}),
 			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })

package/dist/layouts/flux/page/slots/toc.js

@@ -1,9 +1,9 @@
 "use client";
 import { useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea, toc_exports, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
-import { TOCItems } from "../../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { TOCScrollArea, toc_exports, useItems, useTOCItems } from "../../../../components/toc/index.js";
+import { default_exports } from "../../../../components/toc/default.js";
+import { clerk_exports } from "../../../../components/toc/clerk.js";
 import { useTreePath } from "../../../../contexts/tree.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
 import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
@@ -14,14 +14,16 @@ import { createPortal } from "react-dom";
 //#region src/layouts/flux/page/slots/toc.tsx
 const TocPopoverContext = createContext(null);
 const { TOCProvider } = toc_exports;
-function TOC({ container, trigger, content, header, footer, style }) {
+function TOC({ container, trigger, content, header, footer, style = "normal" }) {
+	const items = useTOCItems();
+	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs(PageTOCPopover, {
 		...container,
 		children: [/* @__PURE__ */ jsxs(PageTOCPopoverContent, {
 			...content,
 			children: [
 				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
 				footer
 			]
 		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]
@@ -72,9 +74,8 @@ function PageTOCPopoverPhysical({ className, children, ...rest }) {
 function PageTOCPopoverTrigger({ className, ...props }) {
 	const { text } = useI18n();
 	const { open } = use(TocPopoverContext);
-	const items = useTOCItems();
-	const active = useActiveAnchor();
-	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const items = useItems();
+	const selectedIdx = items.findIndex((item) => item.active);
 	const path = useTreePath().at(-1);
 	const spanProps = {
 		transition: { duration: .1 },
@@ -98,16 +99,16 @@ function PageTOCPopoverTrigger({ className, ...props }) {
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ProgressCircle, {
-				value: (selected + 1) / Math.max(1, items.length),
+				value: (selectedIdx + 1) / Math.max(1, items.length),
 				max: 1,
 				className: cn("shrink-0", open && "text-fd-primary")
 			}),
 			/* @__PURE__ */ jsx(AnimatePresence, {
 				mode: "wait",
-				children: items[selected] && selected !== -1 && !open ? /* @__PURE__ */ jsx(motion.span, {
+				children: items[selectedIdx] && !open ? /* @__PURE__ */ jsx(motion.span, {
 					...spanProps,
-					children: items[selected].title
-				}, selected) : path ? /* @__PURE__ */ jsx(motion.span, {
+					children: items[selectedIdx].original.title
+				}, selectedIdx) : path ? /* @__PURE__ */ jsx(motion.span, {
 					...spanProps,
 					children: path.name
 				}, path.$id ?? ":pathId") : /* @__PURE__ */ jsx(motion.span, {

package/dist/layouts/home/slots/header.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "button" | "main" | "icon" | null | undefined;
+  variant?: "icon" | "main" | "button" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined>;
 //#endregion

package/dist/layouts/notebook/page/slots/toc.js

@@ -1,9 +1,9 @@
 "use client";
 import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCProvider as TOCProvider$1, TOCScrollArea, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
-import { TOCItems } from "../../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
+import { default_exports } from "../../../../components/toc/default.js";
+import { clerk_exports } from "../../../../components/toc/clerk.js";
 import { useTreePath } from "../../../../contexts/tree.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
 import { useNotebookLayout } from "../../client.js";
@@ -14,7 +14,9 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style }) {
+function TOC({ container, header, footer, style = "normal" }) {
+	const items = useTOCItems();
+	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
 		id: "nd-toc",
 		...container,
@@ -26,37 +28,29 @@ function TOC({ container, header, footer, style }) {
 				className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
 			}),
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
 			footer
 		]
 	});
 }
 const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style }) {
-	return /* @__PURE__ */ jsxs(PageTOCPopover, {
-		...container,
-		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
-			...content,
-			children: [
-				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				footer
-			]
-		})]
-	});
-}
-function PageTOCPopover({ className, children, ...rest }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
+	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
 	const { isNavTransparent } = useNotebookLayout();
-	const onClick = useEffectEvent((e) => {
-		if (!open) return;
+	const { TOCItems, TOCItem, TOCEmpty } = style === "clerk" ? clerk_exports : default_exports;
+	const onClickOutside = useEffectEvent((e) => {
+		if (!open || !(e.target instanceof HTMLElement)) return;
 		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
 	});
+	const onClickItem = () => {
+		setOpen(false);
+	};
 	useEffect(() => {
-		window.addEventListener("click", onClick);
+		window.addEventListener("click", onClickOutside);
 		return () => {
-			window.removeEventListener("click", onClick);
+			window.removeEventListener("click", onClickOutside);
 		};
 	}, []);
 	return /* @__PURE__ */ jsx(TocPopoverContext, {
@@ -68,12 +62,22 @@ function PageTOCPopover({ className, children, ...rest }) {
 			open,
 			onOpenChange: setOpen,
 			"data-toc-popover": "",
-			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
-			...rest,
-			children: /* @__PURE__ */ jsx("header", {
+			...container,
+			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", container?.className),
+			children: /* @__PURE__ */ jsxs("header", {
 				ref,
 				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
-				children
+				children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+					...content,
+					children: [
+						header,
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+							item,
+							onClick: onClickItem
+						}, item.url))] }) }),
+						footer
+					]
+				})]
 			})
 		})
 	});
@@ -81,18 +85,17 @@ function PageTOCPopover({ className, children, ...rest }) {
 function PageTOCPopoverTrigger({ className, ...props }) {
 	const { text } = useI18n();
 	const { open } = use(TocPopoverContext);
-	const items = useTOCItems();
-	const active = useActiveAnchor();
-	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const items = useItems();
+	const selectedIdx = items.findIndex((item) => item.active);
 	const path = useTreePath().at(-1);
-	const showItem = selected !== -1 && !open;
+	const showItem = selectedIdx !== -1 && !open;
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
 		"data-toc-popover-trigger": "",
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ProgressCircle, {
-				value: (selected + 1) / Math.max(1, items.length),
+				value: (selectedIdx + 1) / Math.max(1, items.length),
 				max: 1,
 				className: cn("shrink-0", open && "text-fd-primary")
 			}),
@@ -103,7 +106,7 @@ function PageTOCPopoverTrigger({ className, ...props }) {
 					children: path?.name ?? text.toc
 				}), /* @__PURE__ */ jsx("span", {
 					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
-					children: items[selected]?.title
+					children: items[selectedIdx]?.original.title
 				})]
 			}),
 			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })

package/dist/style.css

@@ -353,9 +353,6 @@
   .top-\(--fd-docs-row-3\) {
     top: var(--fd-docs-row-3);
   }
-  .top-\(--fd-top\) {
-    top: var(--fd-top);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -987,9 +984,6 @@
   .h-\(--fd-header-height\) {
     height: var(--fd-header-height);
   }
-  .h-\(--fd-height\) {
-    height: var(--fd-height);
-  }
   .h-\(--fd-toc-popover-height\) {
     height: var(--fd-toc-popover-height);
   }
@@ -1369,10 +1363,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-e-full {
-    border-start-end-radius: calc(infinity * 1px);
-    border-end-end-radius: calc(infinity * 1px);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1885,11 +1875,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[top\,height\] {
-    transition-property: top,height;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[width\,height\] {
     transition-property: width,height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.4",
+  "version": "16.7.5",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -157,9 +157,9 @@
     "tailwindcss": "^4.2.2",
     "tsdown": "0.21.4",
     "unified": "^11.0.5",
+    "@fumadocs/cli": "1.3.2",
     "eslint-config-custom": "0.0.0",
-    "@fumadocs/cli": "1.3.1",
-    "fumadocs-core": "16.7.4",
+    "fumadocs-core": "16.7.5",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -170,7 +170,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shiki": "*",
-    "fumadocs-core": "16.7.4"
+    "fumadocs-core": "16.7.5"
   },
   "peerDependenciesMeta": {
     "next": {