fumadocs-ui 16.7.6 → 16.7.7

package/css/generated/docs.css

@@ -42,6 +42,7 @@
 @source inline("after");
 @source inline("all");
 @source inline("always");
+@source inline("an");
 @source inline("and");
 @source inline("aria-label");
 @source inline("aria-valuemax");
@@ -50,6 +51,7 @@
 @source inline("article");
 @source inline("as");
 @source inline("aside");
+@source inline("attribute");
 @source inline("auto");
 @source inline("available");
 @source inline("backdrop-blur-sm");
@@ -107,6 +109,7 @@
 @source inline("cva");
 @source inline("cx");
 @source inline("cy");
+@source inline("data");
 @source inline("data-[active=true]:before:absolute");
 @source inline("data-[active=true]:before:bg-fd-primary");
 @source inline("data-[active=true]:before:content-['']");
@@ -116,6 +119,7 @@
 @source inline("data-[active=true]:bg-fd-primary/10");
 @source inline("data-[active=true]:hover:transition-colors");
 @source inline("data-[active=true]:text-fd-primary");
+@source inline("data-[column-changed=true]:transition-[grid-template-columns]");
 @source inline("data-[state=closed]:animate-fd-fade-out");
 @source inline("data-[state=closed]:animate-fd-sidebar-out");
 @source inline("data-[state=open]:animate-fd-fade-in");
@@ -124,6 +128,7 @@
 @source inline("data-[state=open]:text-fd-accent-foreground");
 @source inline("data-[transparent=false]:bg-fd-background/80");
 @source inline("data-collapsed");
+@source inline("data-column-changed");
 @source inline("data-full");
 @source inline("data-hovered");
 @source inline("data-sidebar-collapsed");
@@ -223,9 +228,11 @@
 @source inline("inset-y-0");
 @source inline("inset-y-2");
 @source inline("instanceof");
+@source inline("instant");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
+@source inline("isCollapseChanged");
 @source inline("isNavTransparent");
 @source inline("isTop");
 @source inline("item");
@@ -303,6 +310,7 @@
 @source inline("onClickItem");
 @source inline("onClickOutside");
 @source inline("onOpenChange");
+@source inline("only");
 @source inline("opacity-0");
 @source inline("open");
 @source inline("option");
@@ -328,6 +336,7 @@
 @source inline("popover");
 @source inline("prefetch");
 @source inline("previous");
+@source inline("previousCollapsed");
 @source inline("previousPage");
 @source inline("progress");
 @source inline("progressbar");
@@ -367,8 +376,10 @@
 @source inline("secondary");
 @source inline("selected");
 @source inline("selectedIdx");
+@source inline("set");
 @source inline("setDate");
 @source inline("setOpen");
+@source inline("setPreviousCollapsed");
 @source inline("shadow-lg");
 @source inline("showItem");
 @source inline("shrink-0");
@@ -434,7 +445,6 @@
 @source inline("top-(--fd-docs-row-2)");
 @source inline("top-[calc(--spacing(4)+var(--fd-docs-row-3))]");
 @source inline("transform");
-@source inline("transition-[grid-template-columns]");
 @source inline("transition-[opacity,translate,color]");
 @source inline("transition-[opacity,translate]");
 @source inline("transition-[width,inset-block,translate,background-color]");
@@ -480,6 +490,7 @@
 @source inline("w-4");
 @source inline("w-[85%]");
 @source inline("w-full");
+@source inline("will");
 @source inline("wrap-anywhere");
 @source inline("xl:hidden");
 @source inline("xl:layout:[--fd-toc-width:268px]");

package/css/generated/notebook.css

@@ -46,6 +46,7 @@
 @source inline("after");
 @source inline("all");
 @source inline("always");
+@source inline("an");
 @source inline("and");
 @source inline("aria-label");
 @source inline("aria-valuemax");
@@ -54,6 +55,7 @@
 @source inline("article");
 @source inline("as");
 @source inline("aside");
+@source inline("attribute");
 @source inline("auto");
 @source inline("auto-cols-auto");
 @source inline("auto-rows-auto");
@@ -115,6 +117,7 @@
 @source inline("cva");
 @source inline("cx");
 @source inline("cy");
+@source inline("data");
 @source inline("data-[active=true]:before:absolute");
 @source inline("data-[active=true]:before:bg-fd-primary");
 @source inline("data-[active=true]:before:content-['']");
@@ -125,6 +128,7 @@
 @source inline("data-[active=true]:hover:transition-colors");
 @source inline("data-[active=true]:text-fd-primary");
 @source inline("data-[collapsed=false]:hidden");
+@source inline("data-[column-changed=true]:transition-[grid-template-columns]");
 @source inline("data-[state=closed]:animate-fd-fade-out");
 @source inline("data-[state=closed]:animate-fd-sidebar-out");
 @source inline("data-[state=open]:animate-fd-fade-in");
@@ -133,6 +137,7 @@
 @source inline("data-[state=open]:text-fd-accent-foreground");
 @source inline("data-[transparent=false]:bg-fd-background/80");
 @source inline("data-collapsed");
+@source inline("data-column-changed");
 @source inline("data-full");
 @source inline("data-header-body");
 @source inline("data-header-tabs");
@@ -240,9 +245,11 @@
 @source inline("inset-y-0");
 @source inline("inset-y-2");
 @source inline("instanceof");
+@source inline("instant");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
+@source inline("isCollapseChanged");
 @source inline("isLayoutTabActive");
 @source inline("isNavTransparent");
 @source inline("isSelected");
@@ -336,6 +343,7 @@
 @source inline("onOpenChange");
 @source inline("onPointerEnter");
 @source inline("onPointerLeave");
+@source inline("only");
 @source inline("ontouchstart");
 @source inline("opacity-0");
 @source inline("open");
@@ -362,6 +370,7 @@
 @source inline("popover");
 @source inline("prefetch");
 @source inline("previous");
+@source inline("previousCollapsed");
 @source inline("previousPage");
 @source inline("progress");
 @source inline("progressbar");
@@ -403,8 +412,10 @@
 @source inline("secondary");
 @source inline("selected");
 @source inline("selectedIdx");
+@source inline("set");
 @source inline("setDate");
 @source inline("setOpen");
+@source inline("setPreviousCollapsed");
 @source inline("shadow-lg");
 @source inline("showItem");
 @source inline("showLayoutTabs");
@@ -472,7 +483,6 @@
 @source inline("top-(--fd-docs-row-3)");
 @source inline("touch");
 @source inline("transform");
-@source inline("transition-[grid-template-columns]");
 @source inline("transition-[opacity,translate,color]");
 @source inline("transition-[opacity,translate]");
 @source inline("transition-[width,inset-block,translate,background-color]");
@@ -516,6 +526,7 @@
 @source inline("w-4");
 @source inline("w-[85%]");
 @source inline("w-full");
+@source inline("will");
 @source inline("window");
 @source inline("wrap-anywhere");
 @source inline("xl:hidden");

package/css/generated/shared.css

@@ -14,6 +14,7 @@
 @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");
@@ -29,14 +30,19 @@
 @source inline("--shiki-dark-bg");
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
+@source inline("--t");
+@source inline("-circle");
 @source inline("-mb-px");
 @source inline("-me-0.5");
 @source inline("-me-2");
 @source inline("-mx-px");
 @source inline("-rotate-90");
+@source inline("-text");
 @source inline("-top-1.5");
+@source inline("-translate-1/2");
 @source inline("-translate-x-1/2");
 @source inline("-translate-y-1/2");
+@source inline("-z-1");
 @source inline("@container");
 @source inline("@defaultValue");
 @source inline("@deprecated");
@@ -77,6 +83,7 @@
 @source inline("algolia");
 @source inline("align");
 @source inline("alignItems");
+@source inline("alignmentBaseline");
 @source inline("all");
 @source inline("allowClear");
 @source inline("allowCopy");
@@ -104,7 +111,6 @@
 @source inline("at");
 @source inline("attribute");
 @source inline("await");
-@source inline("b0");
 @source inline("backdrop-blur-lg");
 @source inline("backdrop-blur-xs");
 @source inline("background");
@@ -166,6 +172,7 @@
 @source inline("can");
 @source inline("case");
 @source inline("center");
+@source inline("central");
 @source inline("change");
 @source inline("changeLayout");
 @source inline("changes");
@@ -223,6 +230,8 @@
 @source inline("custom");
 @source inline("customise");
 @source inline("cva");
+@source inline("cx");
+@source inline("cy");
 @source inline("d");
 @source inline("dangerouslySetInnerHTML");
 @source inline("dark");
@@ -313,6 +322,7 @@
 @source inline("divide-x");
 @source inline("divide-y");
 @source inline("documented");
+@source inline("dominantBaseline");
 @source inline("don");
 @source inline("drawer");
 @source inline("duration-100");
@@ -327,7 +337,6 @@
 @source inline("en");
 @source inline("enableSystem");
 @source inline("enabled");
-@source inline("end");
 @source inline("end-2");
 @source inline("endIdx");
 @source inline("endpoint");
@@ -355,6 +364,8 @@
 @source inline("file");
 @source inline("fill");
 @source inline("fill-(--callout-color)");
+@source inline("fill-fd-primary");
+@source inline("fill-fd-primary-foreground");
 @source inline("filter");
 @source inline("filters");
 @source inline("finally");
@@ -424,6 +435,8 @@
 @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");
@@ -504,8 +517,8 @@
 @source inline("isActive");
 @source inline("isLoading");
 @source inline("isOpen");
-@source inline("isStart");
 @source inline("isTabActive");
+@source inline("isUp");
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");
@@ -527,7 +540,6 @@
 @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");
@@ -604,6 +616,7 @@
 @source inline("mergeRefs");
 @source inline("message");
 @source inline("metaKey");
+@source inline("middle");
 @source inline("min-h-0");
 @source inline("min-w-0");
 @source inline("min-w-[240px]");
@@ -727,7 +740,6 @@
 @source inline("p-2");
 @source inline("p-3");
 @source inline("p-4");
-@source inline("pOffset");
 @source inline("padding");
 @source inline("paddingInlineStart");
 @source inline("page");
@@ -763,6 +775,7 @@
 @source inline("prev");
 @source inline("previous");
 @source inline("previousPage");
+@source inline("previousRef");
 @source inline("primary");
 @source inline("primaryColor");
 @source inline("primaryTextColor");
@@ -860,6 +873,7 @@
 @source inline("rtl:rotate-180");
 @source inline("rtl:rotate-90");
 @source inline("s");
+@source inline("scale");
 @source inline("scope");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
@@ -998,6 +1012,7 @@
 @source inline("text-start");
 @source inline("text-xs");
 @source inline("text/plain");
+@source inline("textAnchor");
 @source inline("textContent");
 @source inline("that");
 @source inline("the");
@@ -1025,6 +1040,7 @@
 @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("touch");
 @source inline("transform");
 @source inline("transition-[clip-path]");
@@ -1060,7 +1076,9 @@
 @source inline("updated");
 @source inline("updates");
 @source inline("upper");
+@source inline("upperBottom");
 @source inline("upperOffset");
+@source inline("upperX");
 @source inline("url");
 @source inline("urlOrPath");
 @source inline("urls");
@@ -1136,8 +1154,8 @@
 @source inline("wrapElement");
 @source inline("wrapInSuspense");
 @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/toc/clerk.js

@@ -22,25 +22,46 @@ function TOCItems({ ref, className, ...props }) {
 		if (!container || container.clientHeight === 0) return;
 		let w = 0;
 		let h = 0;
-		let b0 = 0;
+		let upperBottom = 0;
+		let upperX = 0;
 		let d = "";
+		const output = [];
 		for (let i = 0; i < items.length; i++) {
-			const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
+			const item = items[i];
+			const element = container.querySelector(`a[href="#${item.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);
+			const x = getLineOffset(item.depth) + .5, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(x + 8, 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;
+			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+			else 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,
+				r: "8",
+				className: "fill-fd-primary"
+			}, `${i}-circle`), /* @__PURE__ */ jsx("text", {
+				x,
+				y: (top + bottom) / 2,
+				textAnchor: "middle",
+				alignmentBaseline: "central",
+				dominantBaseline: "middle",
+				className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono",
+				children: item._step
+			}, `${i}-text`));
+			upperX = x;
+			upperBottom = bottom;
 		}
-		setSvg({
+		output.unshift(/* @__PURE__ */ jsx("path", {
 			d,
-			width: w + 1,
+			className: "stroke-fd-primary",
+			strokeWidth: "1",
+			fill: "none"
+		}, "path"));
+		setSvg({
+			content: output,
+			width: w,
 			height: h
 		});
 	});
@@ -69,12 +90,7 @@ function TOCItems({ ref, className, ...props }) {
 				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: /* @__PURE__ */ jsx("path", {
-				d: svg.d,
-				className: "stroke-fd-primary",
-				strokeWidth: "1",
-				fill: "none"
-			})
+			children: svg.content
 		}), /* @__PURE__ */ jsx(ThumbBox, {})]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
@@ -91,32 +107,39 @@ function TOCEmpty() {
 }
 function ThumbBox() {
 	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;
-	}
+	const previousRef = useRef(null);
+	const startIdx = items.findIndex((item) => item.active);
+	const endIdx = items.findLastIndex((item) => item.active);
 	if (startIdx === -1) return;
-	const isStart = endIdx < lastInactiveIdx;
+	let isUp = false;
+	if (previousRef.current) {
+		const prev = previousRef.current;
+		isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+	}
+	previousRef.current = {
+		startIdx,
+		endIdx,
+		isUp
+	};
+	const original = items[isUp ? startIdx : endIdx].original;
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
-		style: { translate: `calc(${getLineOffset(items[isStart ? startIdx : endIdx].original.depth)}px - 1.25px) ${isStart ? "var(--fd-top)" : "calc(var(--fd-top) + var(--fd-height))"}` }
+		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"
+		}
 	});
 }
+const a = 8;
 function getItemOffset(depth) {
-	if (depth <= 2) return 14;
-	if (depth === 3) return 26;
-	return 36;
+	if (depth <= 2) return 12 + a;
+	if (depth === 3) return 24 + a;
+	return 36 + a;
 }
 function getLineOffset(depth) {
-	if (depth <= 2) return 2;
-	if (depth === 3) return 10;
-	return 20;
+	if (depth <= 2) return a;
+	if (depth === 3) return 8 + a;
+	return 16 + a;
 }
 function TOCItem({ item, ...props }) {
 	const items = useTOCItems();
@@ -132,7 +155,7 @@ function TOCItem({ item, ...props }) {
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
 		...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),
+		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),
 		style: {
 			paddingInlineStart: getItemOffset(item.depth),
 			...props.style
@@ -141,7 +164,7 @@ function TOCItem({ item, ...props }) {
 			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				viewBox: `${Math.min(offset, upperOffset)} 0 ${Math.abs(upperOffset - offset)} 12`,
-				className: "absolute -top-1.5",
+				className: "absolute -top-1.5 -z-1",
 				style: {
 					width: Math.abs(upperOffset - offset) + 1,
 					height: 12,
@@ -156,9 +179,14 @@ function TOCItem({ item, ...props }) {
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("absolute inset-y-0 w-px bg-fd-foreground/10", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
+				className: cn("absolute inset-y-0 w-px bg-fd-foreground/10 -z-1", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
 				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 },
+				children: item._step
+			}),
 			item.title
 		]
 	});

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

@@ -18,11 +18,9 @@ declare function TOCScrollArea({
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 interface TocThumbProps extends ComponentProps<'div'> {
   containerRef: RefObject<HTMLElement | null>;
-  align?: 'center' | 'end';
 }
 declare function TocThumb({
   containerRef,
-  align,
   ...props
 }: TocThumbProps): react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/toc/index.js

@@ -43,7 +43,7 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, align = "end", ...props }) {
+function TocThumb({ containerRef, ...props }) {
 	const thumbRef = useRef(null);
 	const active = useActiveAnchors();
 	function update(info) {
@@ -65,15 +65,9 @@ function TocThumb({ containerRef, align = "end", ...props }) {
 		for (const item of active) {
 			const element = container.querySelector(`a[href="#${item}"]`);
 			if (!element) continue;
-			if (align === "center") {
-				const y = element.offsetTop + element.clientHeight / 2;
-				upper = Math.min(upper, y);
-				lower = Math.max(lower, y);
-			} else {
-				const styles = getComputedStyle(element);
-				upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-				lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
-			}
+			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,

package/dist/layouts/docs/client.d.ts

@@ -3,7 +3,6 @@ import { LayoutTab, LinkItemType } from "../shared/index.js";
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
-
 //#region src/layouts/docs/client.d.ts
 interface DocsSlots extends BaseSlots {
   container: FC<ComponentProps<'div'>>;

package/dist/layouts/docs/slots/container.js

@@ -2,14 +2,21 @@
 import { cn } from "../../../utils/cn.js";
 import { useDocsLayout } from "../client.js";
 import "../index.js";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/docs/slots/container.tsx
 function Container(props) {
 	const { slots } = useDocsLayout();
-	const { collapsed } = slots.sidebar?.useSidebar?.() ?? {};
+	const { collapsed } = slots.sidebar.useSidebar();
+	const [previousCollapsed, setPreviousCollapsed] = useState(collapsed);
+	const isCollapseChanged = previousCollapsed !== collapsed;
+	useEffect(() => {
+		if (isCollapseChanged) setPreviousCollapsed(collapsed);
+	}, [collapsed, isCollapseChanged]);
 	return /* @__PURE__ */ jsx("div", {
 		id: "nd-docs-layout",
 		"data-sidebar-collapsed": collapsed,
+		"data-column-changed": isCollapseChanged,
 		...props,
 		style: {
 			gridTemplate: `"sidebar sidebar header toc toc"
@@ -21,7 +28,7 @@ function Container(props) {
 			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
 			...props.style
 		},
-		className: cn("grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", props.className),
+		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]", props.className),
 		children: props.children
 	});
 }

package/dist/layouts/notebook/client.d.ts

@@ -3,7 +3,6 @@ import { LayoutTab, LinkItemType } from "../shared/index.js";
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
-
 //#region src/layouts/notebook/client.d.ts
 interface DocsSlots extends BaseSlots {
   container: FC<ComponentProps<'div'>>;

package/dist/layouts/notebook/slots/container.js

@@ -1,15 +1,22 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { useNotebookLayout } from "../client.js";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/notebook/slots/container.tsx
 function Container(props) {
 	const { props: { nav }, slots } = useNotebookLayout();
 	const pageCol = "calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))";
 	const { collapsed } = slots.sidebar?.useSidebar?.() ?? {};
+	const [previousCollapsed, setPreviousCollapsed] = useState(collapsed);
+	const isCollapseChanged = previousCollapsed !== collapsed;
+	useEffect(() => {
+		if (isCollapseChanged) setPreviousCollapsed(collapsed);
+	}, [collapsed, isCollapseChanged]);
 	return /* @__PURE__ */ jsx("div", {
 		id: "nd-notebook-layout",
 		"data-sidebar-collapsed": collapsed,
+		"data-column-changed": isCollapseChanged,
 		...props,
 		style: {
 			gridTemplate: nav?.mode === "top" ? `". header header header ."
@@ -23,7 +30,7 @@ function Container(props) {
 			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
 			...props.style
 		},
-		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", props.className),
+		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]", props.className),
 		children: props.children
 	});
 }

package/dist/style.css

@@ -332,9 +332,6 @@
   .start-6 {
     inset-inline-start: calc(var(--spacing) * 6);
   }
-  .end {
-    inset-inline-end: var(--spacing);
-  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -374,6 +371,9 @@
   .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);
   }
@@ -389,6 +389,9 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
+  .-z-1 {
+    z-index: calc(1 * -1);
+  }
   .z-2 {
     z-index: 2;
   }
@@ -1161,6 +1164,11 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
+  .-translate-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-\(--fd-sidebar-width\) {
     --tw-translate-x: calc(var(--fd-sidebar-width) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1507,6 +1515,12 @@
   .fill-\(--callout-color\) {
     fill: var(--callout-color);
   }
+  .fill-fd-primary {
+    fill: var(--color-fd-primary);
+  }
+  .fill-fd-primary-foreground {
+    fill: var(--color-fd-primary-foreground);
+  }
   .stroke-current\/25 {
     stroke: currentcolor;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1855,11 +1869,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[grid-template-columns\] {
-    transition-property: grid-template-columns;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[height\] {
     transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2065,6 +2074,16 @@
       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);
@@ -2403,6 +2422,13 @@
       display: none;
     }
   }
+  .data-\[column-changed\=true\]\:transition-\[grid-template-columns\] {
+    &[data-column-changed="true"] {
+      transition-property: grid-template-columns;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
   .\*\:data-\[empty\=true\]\:border-b-0 {
     :is(& > *) {
       &[data-empty="true"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.6",
+  "version": "16.7.7",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -159,7 +159,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.3.2",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.7.6",
+    "fumadocs-core": "16.7.7",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -170,7 +170,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shiki": "*",
-    "fumadocs-core": "16.7.6"
+    "fumadocs-core": "16.7.7"
   },
   "peerDependenciesMeta": {
     "next": {