fumadocs-ui 16.7.12 → 16.7.13

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");
@@ -269,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");
@@ -692,7 +689,7 @@
 @source inline("onChange");
 @source inline("onChangeRef");
 @source inline("onClick");
-@source inline("onContainerResize");
+@source inline("onCompute");
 @source inline("onCopy");
 @source inline("onKey");
 @source inline("onKeyDown");
@@ -702,7 +699,6 @@
 @source inline("onPointerLeave");
 @source inline("onPointerMove");
 @source inline("onPrint");
-@source inline("onResize");
 @source inline("onSearchChange");
 @source inline("onSearchChangeCallback");
 @source inline("onSelect");
@@ -908,6 +904,7 @@
 @source inline("setActive");
 @source inline("setChecked");
 @source inline("setCollapsed");
+@source inline("setComputed");
 @source inline("setHover");
 @source inline("setIsOpen");
 @source inline("setIsTop");
@@ -1029,7 +1026,6 @@
 @source inline("this");
 @source inline("throw");
 @source inline("thumbBox");
-@source inline("thumbRef");
 @source inline("tier");
 @source inline("timeoutRef");
 @source inline("timerRef");
@@ -1082,7 +1078,6 @@
 @source inline("updateAnchor");
 @source inline("updated");
 @source inline("updates");
-@source inline("upper");
 @source inline("upperOffset");
 @source inline("upperX");
 @source inline("url");

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.js

@@ -3,7 +3,7 @@ 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 { 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";
@@ -31,7 +31,7 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 		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;
@@ -91,31 +91,27 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			width: w,
 			height: h,
 			d,
-			itemLineLengths
+			itemLineLengths,
+			positions
 		});
 	}, [items, thumbBox]);
 	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
 		onPrint();
+		return () => {
+			observer.unobserve(container);
+		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
-		containerRef,
-		onContainerResize: 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
-		}), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
+		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),
@@ -129,6 +125,25 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
+function ThumbTrack({ 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("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);

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,14 +16,5 @@ declare function TOCScrollArea({
   className,
   ...props
 }: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
-interface TocThumbProps extends ComponentProps<'div'> {
-  containerRef: RefObject<HTMLElement | null>;
-  onContainerResize?: () => void;
-}
-declare function TocThumb({
-  containerRef,
-  onContainerResize,
-  ...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,60 +41,5 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, onContainerResize, ...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 onResize = useEffectEvent(() => {
-		const result = calc(active);
-		if (result) update(result);
-		onContainerResize?.();
-	});
-	useEffect(() => {
-		if (!containerRef.current) return;
-		const container = containerRef.current;
-		const observer = new ResizeObserver(onResize);
-		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/flux/page/slots/toc.js

@@ -9,8 +9,8 @@ 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;

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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.12",
+  "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.12",
+    "@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.12"
+    "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",