fumadocs-ui 16.7.11 → 16.7.13

package/css/generated/docs.css

@@ -255,6 +255,7 @@
 @source inline("length");
 @source inline("link");
 @source inline("linkItems");
+@source inline("list");
 @source inline("lucide-react");
 @source inline("main");
 @source inline("max");

package/css/generated/notebook.css

@@ -273,6 +273,7 @@
 @source inline("lg:layout:[--fd-header-height:--spacing(24)]");
 @source inline("link");
 @source inline("linkItems");
+@source inline("list");
 @source inline("lucide-react");
 @source inline("main");
 @source inline("max");

package/css/generated/shared.css

@@ -20,8 +20,6 @@
 @source inline("--color-fd-muted");
 @source inline("--fd-animated-height");
 @source inline("--fd-banner-height");
-@source inline("--fd-height");
-@source inline("--fd-top");
 @source inline("--padding-right");
 @source inline("--radix-navigation-menu-viewport-height");
 @source inline("--radix-popover-content-available-height");
@@ -210,6 +208,7 @@
 @source inline("component");
 @source inline("components");
 @source inline("composedRef");
+@source inline("computed");
 @source inline("config");
 @source inline("const");
 @source inline("container");
@@ -268,7 +267,6 @@
 @source inline("data-checked:text-fd-accent-foreground");
 @source inline("data-collapsed");
 @source inline("data-empty");
-@source inline("data-hidden");
 @source inline("data-icon");
 @source inline("data-line-numbers");
 @source inline("data-line-numbers-start");
@@ -522,6 +520,7 @@
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");
+@source inline("itemLineLengths");
 @source inline("itemVariants");
 @source inline("items");
 @source inline("items-center");
@@ -533,6 +532,7 @@
 @source inline("key");
 @source inline("keydown");
 @source inline("keyof");
+@source inline("l");
 @source inline("label");
 @source inline("lang");
 @source inline("language");
@@ -682,11 +682,14 @@
 @source inline("of");
 @source inline("official");
 @source inline("offset");
+@source inline("offsetDistance");
+@source inline("offsetPath");
 @source inline("offsetTop");
 @source inline("on");
 @source inline("onChange");
 @source inline("onChangeRef");
 @source inline("onClick");
+@source inline("onCompute");
 @source inline("onCopy");
 @source inline("onKey");
 @source inline("onKeyDown");
@@ -696,7 +699,6 @@
 @source inline("onPointerLeave");
 @source inline("onPointerMove");
 @source inline("onPrint");
-@source inline("onResize");
 @source inline("onSearchChange");
 @source inline("onSearchChangeCallback");
 @source inline("onSelect");
@@ -762,6 +764,7 @@
 @source inline("placeholder:text-fd-muted-foreground");
 @source inline("please");
 @source inline("pointerType");
+@source inline("positions");
 @source inline("possible");
 @source inline("powered");
 @source inline("pre");
@@ -901,6 +904,7 @@
 @source inline("setActive");
 @source inline("setChecked");
 @source inline("setCollapsed");
+@source inline("setComputed");
 @source inline("setHover");
 @source inline("setIsOpen");
 @source inline("setIsTop");
@@ -1021,7 +1025,7 @@
 @source inline("themes");
 @source inline("this");
 @source inline("throw");
-@source inline("thumbRef");
+@source inline("thumbBox");
 @source inline("tier");
 @source inline("timeoutRef");
 @source inline("timerRef");
@@ -1039,16 +1043,17 @@
 @source inline("top-3");
 @source inline("top-4");
 @source inline("top-[calc(50%-var(--t,0px)+var(--b,0px))]");
+@source inline("topL");
 @source inline("touch");
 @source inline("transform");
 @source inline("transition-[clip-path]");
 @source inline("transition-[height]");
+@source inline("transition-[offset-distance]");
 @source inline("transition-[width,height]");
 @source inline("transition-all");
 @source inline("transition-colors");
 @source inline("transition-opacity");
 @source inline("transition-transform");
-@source inline("translate");
 @source inline("translations");
 @source inline("transparent");
 @source inline("tree");
@@ -1073,8 +1078,6 @@
 @source inline("updateAnchor");
 @source inline("updated");
 @source inline("updates");
-@source inline("upper");
-@source inline("upperBottom");
 @source inline("upperOffset");
 @source inline("upperX");
 @source inline("url");
@@ -1139,6 +1142,7 @@
 @source inline("when");
 @source inline("where");
 @source inline("whether");
+@source inline("while");
 @source inline("white");
 @source inline("whitespace-nowrap");
 @source inline("whitespaces");
@@ -1154,6 +1158,7 @@
 @source inline("wrapped");
 @source inline("x");
 @source inline("xmlns");
+@source inline("y");
 @source inline("you");
 @source inline("your");
 @source inline("z-2");

package/dist/components/image-zoom.d.ts

@@ -1,7 +1,7 @@
+import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js";
 import { ComponentProps } from "react";
 import { ImageProps } from "fumadocs-core/framework";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { UncontrolledProps } from "react-medium-image-zoom";
 
 //#region src/components/image-zoom.d.ts
 type ImageZoomProps = ImageProps & {

package/dist/components/image-zoom.js

@@ -1,8 +1,8 @@
 "use client";
+import { Uncontrolled } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js";
 import "./image-zoom2.css";
 import { Image } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
-import Zoom from "react-medium-image-zoom";
 //#region src/components/image-zoom.tsx
 function getImageSrc(src) {
 	if (typeof src === "string") return src;
@@ -13,7 +13,7 @@ function getImageSrc(src) {
 	return "";
 }
 function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
-	return /* @__PURE__ */ jsx(Zoom, {
+	return /* @__PURE__ */ jsx(Uncontrolled, {
 		zoomMargin: 20,
 		wrapElement: "span",
 		...rmiz,

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

@@ -3,11 +3,15 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/clerk.d.ts
+interface TOCItemsProps extends ComponentProps<'div'> {
+  thumbBox?: boolean;
+}
 declare function TOCItems({
   ref,
   className,
+  thumbBox,
   ...props
-}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+}: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
@@ -16,4 +20,4 @@ declare function TOCItem({
   item: Primitive.TOCItemType;
 }): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCEmpty, TOCItem, TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/clerk.js

@@ -3,8 +3,8 @@ 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, useEffectEvent, useMemo, useRef, useState } from "react";
+import { useTOCItems } from "./index.js";
+import { useCallback, useEffect, 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
@@ -13,29 +13,41 @@ var clerk_exports = /* @__PURE__ */ __exportAll({
 	TOCItem: () => TOCItem,
 	TOCItems: () => TOCItems
 });
-function TOCItems({ ref, className, ...props }) {
+function TOCItems({ ref, className, thumbBox = true, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
-	const [svg, setSvg] = useState();
-	const onResize = useEffectEvent(() => {
+	const [svg, setSvg] = useState(null);
+	const onPrint = useCallback(() => {
 		const container = containerRef.current;
 		if (!container || container.clientHeight === 0) return;
+		if (items.length === 0) {
+			setSvg(null);
+			return;
+		}
 		let w = 0;
 		let h = 0;
-		let upperBottom = 0;
-		let upperX = 0;
 		let d = "";
+		const positions = [];
 		const output = [];
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i];
-			const element = container.querySelector(`a[href="#${item.url.slice(1)}"]`);
+			const element = container.querySelector(`a[href="${item.url}"]`);
 			if (!element) continue;
 			const styles = getComputedStyle(element);
-			const x = getLineOffset(item.depth) + .5, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			const x = getLineOffset(item.depth) + .5;
+			const top = element.offsetTop + parseFloat(styles.paddingTop);
+			const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
 			w = Math.max(x + 8, w);
 			h = Math.max(h, bottom);
 			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
-			else d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			else {
+				const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [
+					0,
+					0,
+					0
+				];
+				d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			}
 			if (item._step !== void 0) output.push(/* @__PURE__ */ jsx("circle", {
 				cx: x,
 				cy: (top + bottom) / 2,
@@ -50,8 +62,11 @@ function TOCItems({ ref, className, ...props }) {
 				className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono",
 				children: item._step
 			}, `${i}-text`));
-			upperX = x;
-			upperBottom = bottom;
+			positions.push([
+				top,
+				bottom,
+				x
+			]);
 		}
 		output.unshift(/* @__PURE__ */ jsx("path", {
 			d,
@@ -59,39 +74,44 @@ function TOCItems({ ref, className, ...props }) {
 			strokeWidth: "1",
 			fill: "none"
 		}, "path"));
+		const itemLineLengths = [];
+		if (thumbBox) {
+			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			path.setAttribute("d", d);
+			let l = 0;
+			for (const [top, bottom] of positions) {
+				while (path.getPointAtLength(l).y < top) l++;
+				const topL = l;
+				while (path.getPointAtLength(l).y < bottom) l++;
+				itemLineLengths.push([topL, l]);
+			}
+		}
 		setSvg({
 			content: output,
 			width: w,
-			height: h
+			height: h,
+			d,
+			itemLineLengths,
+			positions
 		});
-	});
+	}, [items, thumbBox]);
 	useEffect(() => {
-		if (!containerRef.current) return;
-		const observer = new ResizeObserver(onResize);
-		onResize();
-		observer.observe(containerRef.current);
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
+		onPrint();
 		return () => {
-			observer.disconnect();
+			observer.unobserve(container);
 		};
-	}, []);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
-		containerRef,
+	}, [onPrint]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs("div", {
 		className: "absolute top-0 inset-s-0",
 		style: {
 			width: svg.width,
 			height: svg.height
 		},
-		children: [/* @__PURE__ */ jsx("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: `0 0 ${svg.width} ${svg.height}`,
-			className: "absolute transition-[clip-path]",
-			style: {
-				width: svg.width,
-				height: svg.height,
-				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)))`
-			},
-			children: svg.content
-		}), /* @__PURE__ */ jsx(ThumbBox, {})]
+		children: [/* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -105,12 +125,31 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
-function ThumbBox() {
+function ThumbTrack({ computed }) {
 	const items = Primitive.useItems();
-	const previousRef = useRef(null);
 	const startIdx = items.findIndex((item) => item.active);
+	if (startIdx === -1) return;
 	const endIdx = items.findLastIndex((item) => item.active);
+	const top = `${computed.positions[startIdx][0]}px`;
+	const bottom = `${computed.positions[endIdx][1]}px`;
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: `0 0 ${computed.width} ${computed.height}`,
+		className: "absolute transition-[clip-path]",
+		style: {
+			width: computed.width,
+			height: computed.height,
+			clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})`
+		},
+		children: computed.content
+	});
+}
+function ThumbBox({ computed }) {
+	const items = Primitive.useItems();
+	const previousRef = useRef(null);
+	const startIdx = items.findIndex((item) => item.active);
 	if (startIdx === -1) return;
+	const endIdx = items.findLastIndex((item) => item.active);
 	let isUp = false;
 	if (previousRef.current) {
 		const prev = previousRef.current;
@@ -121,12 +160,12 @@ function ThumbBox() {
 		endIdx,
 		isUp
 	};
-	const original = items[isUp ? startIdx : endIdx].original;
 	return /* @__PURE__ */ jsx("div", {
-		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
+		className: "absolute size-1 bg-fd-primary rounded-full transition-[offset-distance]",
 		style: {
-			translate: `${getLineOffset(original.depth) - 1.5}px calc(${isUp ? "var(--fd-top)" : "var(--fd-top) + var(--fd-height)"} - 1.5px)`,
-			scale: original._step !== void 0 ? "0" : "1"
+			offsetPath: `path("${computed.d}")`,
+			offsetDistance: isUp ? computed.itemLineLengths[startIdx][0] : computed.itemLineLengths[endIdx][1],
+			scale: items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1"
 		}
 	});
 }

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

@@ -3,11 +3,12 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/default.d.ts
+type TOCItemsProps = ComponentProps<'div'>;
 declare function TOCItems({
   ref,
   className,
   ...props
-}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+}: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
@@ -16,4 +17,4 @@ declare function TOCItem({
   item: Primitive.TOCItemType;
 }): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCEmpty, TOCItem, TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/default.js

@@ -3,8 +3,8 @@ 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 } from "./index.js";
-import { useRef } from "react";
+import { useTOCItems } from "./index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/default.tsx
@@ -15,19 +15,55 @@ var default_exports = /* @__PURE__ */ __exportAll({
 });
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [computed, setComputed] = useState(null);
+	const onCompute = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		if (items.length === 0) {
+			setComputed(null);
+			return;
+		}
+		const positions = [];
+		for (const item of items) {
+			const element = container.querySelector(`a[href="${item.url}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			positions.push([element.offsetTop + parseFloat(styles.paddingTop), element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom)]);
+		}
+		setComputed({ positions });
+	}, [items]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onCompute);
+		observer.observe(container);
+		onCompute();
+		return () => {
+			observer.disconnect();
+		};
+	}, [onCompute]);
 	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", {
+		children: [computed && /* @__PURE__ */ jsx(TocThumb, { computed }), /* @__PURE__ */ jsx("div", {
 			ref: mergeRefs(ref, containerRef),
 			className: cn("flex flex-col border-s border-fd-foreground/10", className),
 			...props
 		})]
 	});
 }
+function TocThumb({ computed }) {
+	const items = Primitive.useItems();
+	const startIdx = items.findIndex((item) => item.active);
+	if (startIdx === -1) return;
+	const endIdx = items.findLastIndex((item) => item.active);
+	const top = `${computed.positions[startIdx][0]}px`;
+	const bottom = `${computed.positions[endIdx][1]}px`;
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
+		style: { clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})` }
+	});
+}
 function TOCEmpty() {
 	const { text } = useI18n();
 	return /* @__PURE__ */ jsx("div", {

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

@@ -1,4 +1,4 @@
-import { ComponentProps, RefObject } from "react";
+import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
@@ -16,12 +16,5 @@ declare function TOCScrollArea({
   className,
   ...props
 }: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
-interface TocThumbProps extends ComponentProps<'div'> {
-  containerRef: RefObject<HTMLElement | null>;
-}
-declare function TocThumb({
-  containerRef,
-  ...props
-}: TocThumbProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
+export { TOCProvider, TOCProviderProps, TOCScrollArea, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -2,15 +2,13 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
+import { createContext, use, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
-import { useOnChange } from "fumadocs-core/utils/use-on-change";
 //#region src/components/toc/index.tsx
 var toc_exports = /* @__PURE__ */ __exportAll({
 	TOCProvider: () => TOCProvider,
 	TOCScrollArea: () => TOCScrollArea,
-	TocThumb: () => TocThumb,
 	useActiveAnchor: () => useActiveAnchor,
 	useActiveAnchors: () => useActiveAnchors,
 	useItems: () => useItems,
@@ -43,59 +41,5 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, ...props }) {
-	const thumbRef = useRef(null);
-	const active = useActiveAnchors();
-	function update(info) {
-		const element = thumbRef.current;
-		const container = containerRef.current;
-		if (!element || !container) return;
-		element.style.setProperty("--fd-top", `${info.top}px`);
-		element.style.setProperty("--fd-height", `${info.height}px`);
-	}
-	function calc(active) {
-		const container = containerRef.current;
-		if (!container || container.clientHeight === 0) return null;
-		if (active.length === 0) return {
-			height: 0,
-			top: 0
-		};
-		let upper = Number.MAX_VALUE;
-		let lower = 0;
-		for (const item of active) {
-			const element = container.querySelector(`a[href="#${item}"]`);
-			if (!element) continue;
-			const styles = getComputedStyle(element);
-			upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-			lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
-		}
-		return {
-			top: upper,
-			height: lower - upper
-		};
-	}
-	const onPrint = useEffectEvent(() => {
-		const result = calc(active);
-		if (result) update(result);
-	});
-	useEffect(() => {
-		if (!containerRef.current) return;
-		const container = containerRef.current;
-		const observer = new ResizeObserver(onPrint);
-		observer.observe(container);
-		return () => {
-			observer.disconnect();
-		};
-	}, [containerRef]);
-	useOnChange(active, () => {
-		const result = calc(active);
-		if (result) update(result);
-	});
-	return /* @__PURE__ */ jsx("div", {
-		ref: thumbRef,
-		"data-hidden": active.length === 0,
-		...props
-	});
-}
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
+export { TOCProvider, TOCScrollArea, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/layouts/docs/page/index.d.ts

@@ -35,20 +35,20 @@ interface FooterOptions extends FooterProps {
    */
   component?: ReactNode;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
-interface TableOfContentPopoverOptions extends TOCPopoverProps {
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.tocPopover` instead.
    */
   component?: ReactNode;
-}
+};
 interface DocsPageSlots {
   toc: {
     provider: FC<TOCProviderProps>;

package/dist/layouts/docs/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/docs/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare function TOCProvider(props: TOCProviderProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   /**
    * Custom content in TOC container, before the main TOC
@@ -15,18 +17,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCPopoverProps {
+type TOCPopoverProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -38,18 +43,21 @@ interface TOCPopoverProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOCPopover({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCPopoverProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -15,7 +15,7 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style = "normal" }) {
+function TOC({ container, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
@@ -29,13 +29,16 @@ function TOC({ container, header, footer, style = "normal" }) {
 				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: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+				...list,
+				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 = "normal" }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
@@ -72,10 +75,13 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 					...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))] }) }),
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+							...list,
+							children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+								item,
+								onClick: onClickItem
+							}, item.url))]
+						}) }),
 						footer
 					]
 				})]

package/dist/layouts/flux/page/index.d.ts

@@ -15,19 +15,18 @@ interface DocsPageProps extends ComponentProps<'article'> {
    * @defaultValue false
    */
   full?: boolean;
-  children?: ReactNode;
   slots?: Partial<DocsPageSlots>;
   footer?: FooterOptions;
   breadcrumb?: BreadcrumbOptions;
   tableOfContent?: TableOfContentOptions;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
+};
 interface BreadcrumbOptions extends BreadcrumbProps {
   enabled?: boolean;
   /**

package/dist/layouts/flux/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProvider as TOCProvider$1, TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/flux/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare const TOCProvider: typeof TOCProvider$1;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -17,18 +19,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -9,12 +9,12 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../..
 import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "motion/react";
 //#region src/layouts/flux/page/slots/toc.tsx
 const TocPopoverContext = createContext(null);
 const { TOCProvider } = toc_exports;
-function TOC({ container, trigger, content, header, footer, style = "normal" }) {
+function TOC({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs(PageTOCPopover, {
@@ -23,7 +23,10 @@ function TOC({ container, trigger, content, header, footer, style = "normal" })
 			...content,
 			children: [
 				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+					...list,
+					children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+				}) }),
 				footer
 			]
 		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]

package/dist/layouts/notebook/page/index.d.ts

@@ -35,20 +35,20 @@ interface FooterOptions extends FooterProps {
    */
   component?: ReactNode;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
-interface TableOfContentPopoverOptions extends TOCPopoverProps {
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.tocPopover` instead.
    */
   component?: ReactNode;
-}
+};
 interface DocsPageSlots {
   toc: {
     provider: FC<TOCProviderProps>;

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/notebook/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare function TOCProvider(props: TOCProviderProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   /**
    * Custom content in TOC container, before the main TOC
@@ -15,18 +17,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCPopoverProps {
+type TOCPopoverProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -38,18 +43,21 @@ interface TOCPopoverProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOCPopover({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCPopoverProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -14,7 +14,7 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style = "normal" }) {
+function TOC({ container, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
@@ -28,13 +28,16 @@ function TOC({ container, header, footer, style = "normal" }) {
 				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: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+				...list,
+				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 = "normal" }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
@@ -71,10 +74,13 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 					...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))] }) }),
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+							...list,
+							children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+								item,
+								onClick: onClickItem
+							}, item.url))]
+						}) }),
 						footer
 					]
 				})]

package/dist/style.css

@@ -763,20 +763,6 @@
     :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       color: inherit;
     }
-    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.7142857;
-      width: 100%;
-      table-layout: auto;
-      margin-top: 2em;
-      margin-bottom: 2em;
-      border-collapse: separate;
-      border-spacing: 0;
-      background: var(--color-fd-card);
-      border-radius: var(--radius-lg);
-      border: 1px solid var(--color-fd-border);
-      overflow: hidden;
-    }
     :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       color: var(--tw-prose-headings);
       font-weight: 600;
@@ -835,6 +821,20 @@
     :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-bottom: 0;
     }
+    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.875em;
+      line-height: 1.7142857;
+      width: 100%;
+      table-layout: auto;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      border-collapse: separate;
+      border-spacing: 0;
+      background: var(--color-fd-card);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--color-fd-border);
+      overflow: hidden;
+    }
     :where(th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       text-align: start;
       padding: calc(var(--spacing) * 2.5);
@@ -1894,6 +1894,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[offset-distance\] {
+    transition-property: offset-distance;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,translate\,color\] {
     transition-property: opacity,translate,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.11",
+  "version": "16.7.13",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -135,32 +135,32 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
-    "fuma-cli": "^0.0.3",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "motion": "^12.38.0",
     "next-themes": "^0.4.6",
-    "react-medium-image-zoom": "^5.4.3",
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.5.0",
     "unist-util-visit": "^5.1.0",
-    "@fumadocs/tailwind": "0.0.3"
+    "@fumadocs/tailwind": "0.0.4"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.2",
     "@tsdown/css": "^0.21.6",
     "@types/hast": "^3.0.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "fuma-cli": "^0.0.5",
+    "react-medium-image-zoom": "^5.4.3",
     "shiki": "^4.0.2",
     "tailwindcss": "^4.2.2",
     "tsdown": "0.21.7",
     "unified": "^11.0.5",
-    "@fumadocs/cli": "1.3.5",
-    "fumadocs-core": "16.7.11",
+    "@fumadocs/cli": "1.3.6",
+    "fumadocs-core": "16.7.13",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -171,7 +171,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shiki": "*",
-    "fumadocs-core": "16.7.11"
+    "fumadocs-core": "16.7.13"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -190,6 +190,9 @@
       "optional": true
     }
   },
+  "inlinedDependencies": {
+    "react-medium-image-zoom": "5.4.3"
+  },
   "scripts": {
     "build": "pnpm build:layout && pnpm build:tailwind",
     "build:layout": "tsdown --config-loader unrun",