fumadocs-ui 16.7.15 → 16.7.16

package/css/generated/shared.css

@@ -14,7 +14,6 @@
 @source inline("*:has-[+:last-child[data-empty=true]]:border-b-0");
 @source inline("*:last:border-b-0");
 @source inline("*:rounded-full");
-@source inline("--b");
 @source inline("--callout-color");
 @source inline("--color-fd-");
 @source inline("--color-fd-muted");
@@ -30,7 +29,6 @@
 @source inline("--shiki-dark-bg");
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
-@source inline("--t");
 @source inline("--track-bottom");
 @source inline("--track-top");
 @source inline("-circle");
@@ -165,8 +163,6 @@
 @source inline("bottom-0");
 @source inline("bottom-1.5");
 @source inline("boundary");
-@source inline("box");
-@source inline("boxRef");
 @source inline("breaking");
 @source inline("button");
 @source inline("buttonVariants");
@@ -322,6 +318,7 @@
 @source inline("display");
 @source inline("displayName");
 @source inline("displayed");
+@source inline("distance");
 @source inline("div");
 @source inline("divide-fd-border");
 @source inline("divide-x");
@@ -440,8 +437,6 @@
 @source inline("group-data-[state=active]:bg-fd-primary");
 @source inline("group-data-[state=open]:rotate-180");
 @source inline("group-data-[state=open]:rotate-90");
-@source inline("group-first:[--t:--spacing(0.75)]");
-@source inline("group-last:[--b:--spacing(0.75)]");
 @source inline("groupListeners");
 @source inline("guides");
 @source inline("h");
@@ -520,6 +515,8 @@
 @source inline("invisible");
 @source inline("is");
 @source inline("isActive");
+@source inline("isFirst");
+@source inline("isLast");
 @source inline("isLoading");
 @source inline("isOpen");
 @source inline("isTabActive");
@@ -645,6 +642,7 @@
 @source inline("my-4");
 @source inline("my-6");
 @source inline("my-auto");
+@source inline("n");
 @source inline("name");
 @source inline("namespace");
 @source inline("nav");
@@ -711,7 +709,6 @@
 @source inline("onSelectCallback");
 @source inline("onTagChange");
 @source inline("onTagChangeCallback");
-@source inline("onUpdate");
 @source inline("onValueChange");
 @source inline("only");
 @source inline("opacity-(--opacity,0)");
@@ -729,6 +726,7 @@
 @source inline("origin-[top_center]");
 @source inline("original");
 @source inline("other");
+@source inline("out");
 @source inline("outer");
 @source inline("outline");
 @source inline("outline-none");
@@ -761,6 +759,7 @@
 @source inline("path");
 @source inline("pathname");
 @source inline("paths");
+@source inline("pb-0");
 @source inline("pb-2");
 @source inline("pe-2");
 @source inline("peer");
@@ -986,7 +985,6 @@
 @source inline("supposed");
 @source inline("sure");
 @source inline("svg");
-@source inline("svgRef");
 @source inline("switch");
 @source inline("system");
 @source inline("t");
@@ -1052,8 +1050,6 @@
 @source inline("top-2.5");
 @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]");

package/css/lib/shiki.css

@@ -95,3 +95,14 @@
     font-style: var(--shiki-dark-font-style);
   }
 }
+
+/* inline code */
+code.shiki span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+}
+
+.dark code.shiki span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+}

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

@@ -10,6 +10,7 @@ declare function TOCItems({
   ref,
   className,
   thumbBox,
+  children,
   ...props
 }: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;

package/dist/components/toc/clerk.js

@@ -5,7 +5,7 @@ import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 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 { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/clerk.tsx
 var clerk_exports = /* @__PURE__ */ __exportAll({
@@ -13,7 +13,7 @@ var clerk_exports = /* @__PURE__ */ __exportAll({
 	TOCItem: () => TOCItem,
 	TOCItems: () => TOCItems
 });
-function TOCItems({ ref, className, thumbBox = true, ...props }) {
+function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
 	const [svg, setSvg] = useState(null);
@@ -78,12 +78,12 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 		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]);
+			const n = path.getTotalLength();
+			for (let i = 0; i < positions.length; i++) {
+				const [top, bottom] = positions[i];
+				let l = i > 0 ? itemLineLengths[i - 1][1] + (top - positions[i - 1][1]) : top;
+				while (l < n && path.getPointAtLength(l).y < top) l++;
+				itemLineLengths.push([l, l + bottom - top]);
 			}
 		}
 		setSvg({
@@ -105,14 +105,15 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			observer.unobserve(container);
 		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
-		computed: svg,
-		thumbBox
-	}), /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref: mergeRefs(containerRef, ref),
-		className: cn("flex flex-col", className),
-		...props
-	})] });
+		className: cn("relative flex flex-col", className),
+		...props,
+		children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+			computed: svg,
+			thumbBox
+		}), children]
+	});
 }
 function TOCEmpty() {
 	const { text } = useI18n();
@@ -122,20 +123,17 @@ function TOCEmpty() {
 	});
 }
 function ThumbTrack({ computed, thumbBox }) {
-	const svgRef = useRef(null);
-	const boxRef = useRef(null);
+	const ref = useRef(null);
 	const previousRef = useRef(null);
 	const tocInfo = Primitive.useTOC();
-	const onUpdate = useCallback((items) => {
-		const svg = svgRef.current;
-		if (!svg) return;
+	function calculate(items) {
+		const out = {};
 		const startIdx = items.findIndex((item) => item.active);
-		if (startIdx === -1) return;
+		if (startIdx === -1) return out;
 		const endIdx = items.findLastIndex((item) => item.active);
-		svg.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
-		svg.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
-		const box = boxRef.current;
-		if (box) {
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		if (thumbBox) {
 			let isUp = false;
 			if (previousRef.current) {
 				const prev = previousRef.current;
@@ -146,22 +144,25 @@ function ThumbTrack({ computed, thumbBox }) {
 				endIdx,
 				isUp
 			};
-			box.style.setProperty("--offset-distance", isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`);
-			box.style.setProperty("--opacity", items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1");
+			out["--offset-distance"] = isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`;
+			out["--opacity"] = items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1";
 		}
-	}, [computed]);
-	Primitive.useTOCListener(onUpdate);
-	useEffect(() => {
-		onUpdate(tocInfo.get());
-	}, [onUpdate, tocInfo]);
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		className: "absolute top-0 inset-s-0",
 		style: {
 			width: computed.width,
-			height: computed.height
+			height: computed.height,
+			...calculate(tocInfo.get())
 		},
 		children: [/* @__PURE__ */ jsx("svg", {
-			ref: svgRef,
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: `0 0 ${computed.width} ${computed.height}`,
 			className: "absolute transition-[clip-path]",
@@ -172,7 +173,6 @@ function ThumbTrack({ computed, thumbBox }) {
 			},
 			children: computed.content
 		}), thumbBox && /* @__PURE__ */ jsx("div", {
-			ref: boxRef,
 			className: "absolute size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
 			style: { offsetPath: `path("${computed.d}")` }
 		})]
@@ -191,11 +191,13 @@ function getLineOffset(depth) {
 }
 function TOCItem({ item, ...props }) {
 	const items = useTOCItems();
-	const { lowerOffset, offset, upperOffset } = useMemo(() => {
+	const { lowerOffset, offset, upperOffset, isFirst, isLast } = useMemo(() => {
 		const index = items.indexOf(item);
 		const offset = getLineOffset(item.depth);
 		return {
 			offset,
+			isFirst: index === 0,
+			isLast: index === items.length - 1,
 			upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
 			lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
 		};
@@ -203,7 +205,7 @@ function TOCItem({ item, ...props }) {
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
 		...props,
-		className: cn("group 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),
+		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 data-[active=true]:text-fd-primary", isFirst && "pt-0", isLast && "pb-0", props.className),
 		style: {
 			paddingInlineStart: getItemOffset(item.depth),
 			...props.style
@@ -231,8 +233,11 @@ function TOCItem({ item, ...props }) {
 				style: { insetInlineStart: offset }
 			}),
 			item._step !== void 0 && /* @__PURE__ */ jsx("div", {
-				className: "absolute flex items-center justify-center -translate-1/2 -z-1 top-[calc(50%-var(--t,0px)+var(--b,0px))] size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none group-first:[--t:--spacing(0.75)] group-last:[--b:--spacing(0.75)]",
-				style: { insetInlineStart: offset },
+				className: "absolute flex items-center justify-center -translate-1/2 -z-1 size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none",
+				style: {
+					top: `calc(50% + ${(isFirst ? -.75 : 0) + (isLast ? .75 : 0)} * var(--spacing))`,
+					insetInlineStart: offset
+				},
 				children: item._step
 			}),
 			item.title

package/dist/components/toc/default.js

@@ -55,23 +55,27 @@ function TOCItems({ ref, className, ...props }) {
 function TocThumb({ computed }) {
 	const ref = useRef(null);
 	const tocInfo = Primitive.useTOC();
-	const onUpdate = useCallback((items) => {
-		const element = ref.current;
-		if (!element) return;
+	function calculate(items) {
+		const out = {};
 		const startIdx = items.findIndex((item) => item.active);
-		if (startIdx === -1) return;
+		if (startIdx === -1) return out;
 		const endIdx = items.findLastIndex((item) => item.active);
-		element.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
-		element.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
-	}, [computed]);
-	Primitive.useTOCListener(onUpdate);
-	useEffect(() => {
-		onUpdate(tocInfo.get());
-	}, [onUpdate, tocInfo]);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
-		style: { clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))` }
+		style: {
+			clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`,
+			...calculate(tocInfo.get())
+		}
 	});
 }
 function TOCEmpty() {

package/dist/style.css

@@ -374,9 +374,6 @@
   .top-\[calc\(--spacing\(4\)\+var\(--fd-docs-row-3\)\)\] {
     top: calc(calc(var(--spacing) * 4) + var(--fd-docs-row-3));
   }
-  .top-\[calc\(50\%-var\(--t\,0px\)\+var\(--b\,0px\)\)\] {
-    top: calc(50% - var(--t,0px) + var(--b,0px));
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -1688,6 +1685,9 @@
   .pr-\(--removed-body-scroll-bar-size\,0\) {
     padding-right: var(--removed-body-scroll-bar-size,0);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -2110,16 +2110,6 @@
       margin-bottom: calc(var(--spacing) * 2);
     }
   }
-  .group-first\:\[--t\:--spacing\(0\.75\)\] {
-    &:is(:where(.group):first-child *) {
-      --t: calc(var(--spacing) * 0.75);
-    }
-  }
-  .group-last\:\[--b\:--spacing\(0\.75\)\] {
-    &:is(:where(.group):last-child *) {
-      --b: calc(var(--spacing) * 0.75);
-    }
-  }
   .group-data-\[state\=active\]\:bg-fd-primary {
     &:is(:where(.group)[data-state="active"] *) {
       background-color: var(--color-fd-primary);
@@ -3106,6 +3096,14 @@
     font-style: var(--shiki-dark-font-style);
   }
 }
+code.shiki span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+}
+.dark code.shiki span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+}
 @property --radix-collapsible-content-height {
   syntax: '<length>';
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.15",
+  "version": "16.7.16",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -148,7 +148,7 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.2",
-    "@tsdown/css": "^0.21.6",
+    "@tsdown/css": "^0.21.8",
     "@types/hast": "^3.0.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "^25.6.0",
@@ -157,10 +157,10 @@
     "fuma-cli": "^0.0.5",
     "react-medium-image-zoom": "^5.4.3",
     "tailwindcss": "^4.2.2",
-    "tsdown": "0.21.7",
+    "tsdown": "0.21.8",
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.3.7",
-    "fumadocs-core": "16.7.15",
+    "fumadocs-core": "16.7.16",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -170,7 +170,7 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "fumadocs-core": "16.7.15"
+    "fumadocs-core": "16.7.16"
   },
   "peerDependenciesMeta": {
     "next": {