@fumadocs/base-ui 16.11.5 → 16.12.1

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

@@ -0,0 +1,108 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useTOCItems } from "../../../../components/toc/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "lucide-react";
+import { createContext, use, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { TOCItem } from "fumadocs-core/toc";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+//#region src/layouts/glass/page/slots/toc.tsx
+const Context = createContext(null);
+function TOCProvider(props) {
+	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
+}
+function useContext$1() {
+	return use(Context);
+}
+function TOC({ container, header, footer }) {
+	const t = useTranslations({ note: "table of contents" });
+	const items = useTOCItems();
+	const [hover, setHover] = useState(false);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const [inAnimation, setInAnimation] = useState(false);
+	const exitTimerRef = useRef(null);
+	const transitionTimerRef = useRef(null);
+	const open = hover || mobileOpen;
+	useOnChange(open, () => {
+		setInAnimation(true);
+		if (transitionTimerRef.current) window.clearTimeout(transitionTimerRef.current);
+		transitionTimerRef.current = window.setTimeout(() => {
+			setInAnimation(false);
+		}, 300);
+	});
+	const ctx = useMemo(() => ({
+		open,
+		setMobileOpen,
+		inAnimation
+	}), [open, inAnimation]);
+	if (items.length === 0 && !footer && !header) return;
+	return /* @__PURE__ */ jsxs(Context, {
+		value: ctx,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-0 z-10 backdrop-blur-sm transition-opacity duration-300 [mask-image:radial-gradient(circle_at_center_right,white,white_200px,transparent_500px)] xl:hidden", !open && "opacity-0 pointer-events-none"),
+			onClick: () => setMobileOpen(false)
+		}), /* @__PURE__ */ jsx(TOCScrollArea, {
+			id: "nd-toc",
+			...container,
+			className: cn("z-10 grid transition-[width,padding] duration-300 [grid-area:right]", "xl:sticky xl:top-10 xl:h-[calc(100dvh---spacing(10))] md:layout:[--fd-right-width:12px] xl:layout:[--fd-right-width:240px] xl:items-center xl:pe-4", "max-xl:fixed max-xl:top-1/2 max-xl:-translate-y-1/2 max-xl:end-1 max-xl:bg-fd-popover max-xl:text-fd-popover-foreground max-xl:border max-xl:rounded-xl max-xl:shadow-md max-xl:mask-none max-xl:max-h-[calc(100dvh---spacing(32))] max-xl:grid-cols-[calc(240px---spacing(6))]", inAnimation && "overflow-y-hidden", open ? "max-xl:w-[240px] max-xl:p-3" : "max-md:w-4 max-md:ps-[calc(--spacing(1.5)-1px)] max-xl:w-6 max-xl:ps-[calc(--spacing(2.5)-1px)] max-xl:overflow-clip", container?.className),
+			onPointerDown: (e) => {
+				if (!mobileOpen && (e.pointerType === "touch" || e.pointerType === "pen")) setMobileOpen(true);
+			},
+			onPointerEnter: (e) => {
+				if (e.pointerType === "mouse") {
+					if (exitTimerRef.current) window.clearTimeout(exitTimerRef.current);
+					if (!hover) setHover(true);
+				}
+			},
+			onPointerLeave: (e) => {
+				if (hover && e.pointerType === "mouse") {
+					if (exitTimerRef.current) window.clearTimeout(exitTimerRef.current);
+					exitTimerRef.current = window.setTimeout(() => {
+						setHover(false);
+					}, window.innerWidth - e.clientX < 30 ? 700 : 50);
+				}
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col xl:items-end xl:text-end",
+				children: [
+					header,
+					/* @__PURE__ */ jsxs("h3", {
+						id: "nd-toc-title",
+						className: cn("inline-flex items-center gap-1.5 overflow-hidden text-xs text-fd-muted-foreground transition-[opacity,height] opacity-0 h-0", open ? "opacity-100 h-6" : "xl:[@media(hover:none)]:opacity-100 xl:[@media(hover:none)]:h-6"),
+						children: [/* @__PURE__ */ jsx(Text, { className: "size-3.5 shrink-0" }), t("On this page")]
+					}),
+					/* @__PURE__ */ jsx(TOCPanel, {}),
+					footer
+				]
+			})
+		})]
+	});
+}
+function TOCPanel({ className, style, ...props }) {
+	const items = useTOCItems();
+	const { open, inAnimation, setMobileOpen } = useContext$1();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-1 transition-[grid-template-rows]", open ? "[--row:calc(6*var(--spacing))]" : "[--row:calc(3*var(--spacing))] xl:[@media(hover:none)]:[--row:calc(6*var(--spacing))]", (!open || inAnimation) && "pointer-events-none xl:[@media(hover:none)]:pointer-events-auto", className),
+		style: {
+			...style,
+			gridTemplateRows: `repeat(${items.length}, var(--row))`
+		},
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs(TOCItem, {
+			href: item.url,
+			className: "group prose prose-sm flex items-center gap-2 text-xs text-fd-muted-foreground transition-colors data-[active=true]:text-fd-primary data-[active=false]:hover:text-fd-accent-foreground xl:flex-row-reverse",
+			onClick: () => setMobileOpen(false),
+			autoScroll: open && !inAnimation,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("shrink-0 bg-fd-muted-foreground/50 rounded-full size-1 transition-[background-color,width,height] group-data-[active=true]:bg-fd-primary", open ? "w-(--width) h-px" : "transition-[width,height] duration-300 xl:[@media(hover:none)]:w-(--width) xl:[@media(hover:none)]:h-px"),
+				style: { "--width": `calc(pow(${item.depth}, 1.5) * var(--spacing))` }
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("truncate transition-opacity opacity-0", open ? "opacity-100" : "xl:[@media(hover:none)]:opacity-100"),
+				children: item.title
+			})]
+		}, item.url))
+	});
+}
+//#endregion
+export { TOC, TOCProvider };

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+//#region src/layouts/glass/slots/header.d.ts
+type HeaderProps = ComponentProps<'div'>;
+declare function Header({ className, ...props }: HeaderProps): import("react").JSX.Element;
+//#endregion
+export { Header, HeaderProps };

package/dist/layouts/glass/slots/header.js

@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { LayoutTabsDropdown } from "../layout-tabs.js";
+import { useGlassLayout } from "../index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown, LanguagesIcon, MessageCircleIcon, SidebarIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/layouts/glass/slots/header.tsx
+const baseVariants = "rounded-full bg-fd-popover/80 text-fd-popover-foreground border backdrop-blur-sm shadow-sm";
+function Header({ className, ...props }) {
+	const { props: { tabs, aiChat }, slots } = useGlassLayout();
+	const t = useTranslations();
+	const sidebar = slots.sidebar.use();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("sticky flex flex-row justify-end gap-2 [grid-area:left-margin/left-margin/right/right] z-20 px-4 md:top-0 md:pt-2 md:px-2 md:h-12 md:bg-linear-to-b md:from-fd-background max-md:bottom-0 max-md:mt-auto max-md:h-16 max-md:pb-4 max-md:bg-linear-to-t max-md:from-fd-background", className),
+		...props,
+		children: [
+			sidebar.collapsible && sidebar.collapsed && /* @__PURE__ */ jsx("button", {
+				"aria-label": t("Show Sidebar", { note: "sidebar" }),
+				className: cn(buttonVariants({
+					size: "icon-sm",
+					variant: "secondary"
+				}), baseVariants, "size-10 me-auto shrink-0 max-md:hidden"),
+				onClick: () => sidebar.setCollapsed(false),
+				children: /* @__PURE__ */ jsx(SidebarIcon, {})
+			}),
+			slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+				color: "secondary",
+				size: "icon",
+				className: cn(baseVariants, "size-12 shrink-0 md:hidden")
+			}),
+			tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabsDropdown, {
+				tabs,
+				size: "lg",
+				className: cn(baseVariants, "min-w-0 ps-4 pe-3 flex-1 [&_svg]:size-5 md:hidden")
+			}),
+			slots.searchTrigger && /* @__PURE__ */ jsx("div", {
+				className: "@container flex justify-end flex-1 max-md:hidden",
+				children: /* @__PURE__ */ jsx(slots.searchTrigger.full, { className: cn(baseVariants, "text-fd-muted-foreground ps-3 w-full @sm:max-w-[200px]") })
+			}),
+			aiChat && !aiChat.open && /* @__PURE__ */ jsxs("button", {
+				className: cn(buttonVariants({ variant: "secondary" }), baseVariants, "px-3 gap-2 text-fd-muted-foreground shrink-0 max-md:hidden"),
+				onClick: () => aiChat.onOpenChange(true),
+				children: [/* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-4" }), t("Ask AI", { note: "AI chat button" })]
+			}),
+			slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+				className: cn(baseVariants, "px-3 rounded-full max-md:hidden"),
+				children: [
+					/* @__PURE__ */ jsx(LanguagesIcon, { className: "size-4 text-fd-muted-foreground shrink-0" }),
+					/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+					/* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-fd-muted-foreground shrink-0" })
+				]
+			}),
+			slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: cn(baseVariants, "shrink-0 px-1.5 max-md:hidden") }),
+			/* @__PURE__ */ jsx(Drawer.Trigger, {
+				handle: slots.sidebar.drawerHandle,
+				render: (props, { open }) => /* @__PURE__ */ jsx("button", {
+					...props,
+					className: cn(buttonVariants({
+						variant: "secondary",
+						size: "icon"
+					}), baseVariants, "shrink-0 size-12 md:hidden"),
+					"aria-label": open ? t("Close Sidebar", { note: "aria-label" }) : t("Open Sidebar", { note: "aria-label" }),
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Header };

package/dist/layouts/glass/slots/sidebar.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/layouts/glass/slots/sidebar.d.ts
+declare const drawerHandle: Drawer.Handle<unknown>;
+interface SidebarProviderProps {
+  /** @default true */
+  collapsible?: boolean;
+  children: ReactNode;
+}
+declare function SidebarProvider({ children, collapsible }: SidebarProviderProps): import("react").JSX.Element;
+declare function useSidebar(): {
+  collapsible: boolean;
+  collapsed: boolean;
+  setCollapsed: (v: boolean) => void;
+};
+interface SidebarDrawerProps {
+  contentProps?: ComponentProps<'div'>;
+}
+declare function SidebarDrawer({ contentProps }: SidebarDrawerProps): import("react").JSX.Element;
+type SidebarProps = ComponentProps<'aside'>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarDrawer, SidebarDrawerProps, SidebarProps, SidebarProvider, SidebarProviderProps, drawerHandle, useSidebar };

package/dist/layouts/glass/slots/sidebar.js

@@ -0,0 +1,294 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { isLinkItemActive } from "../../shared/index.js";
+import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
+import { LayoutTabsDropdown } from "../layout-tabs.js";
+import { useGlassLayout } from "../index.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronsUpDown, LanguagesIcon, MessageCircleIcon, SidebarIcon, XIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cloneElement, createContext, use, useMemo, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/layouts/glass/slots/sidebar.tsx
+const drawerHandle = Drawer.createHandle();
+const itemTriggerVariants = cva("inline-flex items-center gap-2 rounded-lg px-2.5 py-2 md:py-1.5 [&_svg]:size-4 outline-none focus-visible:ring-2 focus-visible:ring-fd-ring", { variants: { active: {
+	true: "bg-fd-primary/10 text-fd-primary",
+	false: "text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
+} } });
+const Context = createContext(null);
+function SidebarProvider({ children, collapsible = true }) {
+	const [collapsed, setCollapsed] = useState(false);
+	return /* @__PURE__ */ jsx(Context, {
+		value: useMemo(() => ({
+			collapsible,
+			collapsed,
+			setCollapsed
+		}), [collapsible, collapsed]),
+		children
+	});
+}
+function useSidebar() {
+	const v = use(Context);
+	if (!v) throw new Error("Missing <SidebarProvider />");
+	return v;
+}
+function SidebarDrawer({ contentProps }) {
+	const { menuItems, props: { aiChat }, slots } = useGlassLayout();
+	const { root } = useTreeContext();
+	const t = useTranslations();
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		handle: drawerHandle,
+		swipeDirection: "right",
+		children: /* @__PURE__ */ jsxs(Drawer.Portal, {
+			className: "z-40",
+			children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: "[--bleed:3rem] fixed inset-0 min-h-dvh bg-fd-overlay backdrop-blur-sm opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+				className: "[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)",
+				children: /* @__PURE__ */ jsx(Drawer.Popup, {
+					id: "nd-mobile-sidebar",
+					className: cn("relative [--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] w-[360px] h-full max-w-[calc(100vw-3rem+var(--bleed))] pr-(--bleed) -mr-(--bleed) border-l bg-fd-background text-fd-foreground text-[0.9375rem] outline-none shadow-md touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:rounded-xl", "[scrollbar-width:none] overflow-y-auto"),
+					children: /* @__PURE__ */ jsxs(Drawer.Content, {
+						...contentProps,
+						className: cn("flex flex-col min-h-full px-3", contentProps?.className),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "sticky flex flex-col gap-2 top-0 pt-4 pb-2 bg-fd-background shadow-lg shadow-fd-background",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1.5 ps-2.5",
+									children: [
+										/* @__PURE__ */ jsx(Drawer.Title, { render: /* @__PURE__ */ jsx(slots.navTitle, { className: "flex items-center font-semibold gap-2 flex-1" }) }),
+										aiChat && /* @__PURE__ */ jsxs("button", {
+											className: cn(buttonVariants({
+												variant: "secondary",
+												size: "sm"
+											}), "rounded-full h-8 gap-1.5"),
+											onClick: () => {
+												aiChat.onOpenChange(!aiChat.open);
+												drawerHandle.close();
+											},
+											children: [/* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-4 text-fd-muted-foreground" }), t("Ask AI", { note: "AI chat button" })]
+										}),
+										/* @__PURE__ */ jsx(Drawer.Close, {
+											"aria-label": t("Close Sidebar", { note: "aria-label" }),
+											className: cn(buttonVariants({
+												variant: "secondary",
+												size: "icon-sm"
+											}), "rounded-full"),
+											children: /* @__PURE__ */ jsx(XIcon, {})
+										})
+									]
+								}), slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+									variant: "secondary",
+									className: "px-2.5 gap-2 rounded-lg",
+									children: [
+										/* @__PURE__ */ jsx(LanguagesIcon, { className: "size-4 text-fd-muted-foreground shrink-0" }),
+										/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+										/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-auto size-3.5 text-fd-muted-foreground shrink-0" })
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col py-2 flex-1",
+								children: [menuItems.map((item, i) => item.type !== "icon" && /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i)), root.children.map((item, i) => cloneElement(renderNode(item), { key: i }))]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center sticky bottom-0 bg-fd-background px-1 pt-2 pb-4 border-t mt-2 empty:hidden",
+								children: [menuItems.map((item, i) => item.type === "icon" && /* @__PURE__ */ jsx(SidebarIconLinkItem, { item }, i)), slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-0 ms-auto" })]
+							})
+						]
+					})
+				})
+			})]
+		})
+	});
+}
+function Sidebar({ className, children, ...props }) {
+	const { menuItems, props: { tabs }, slots } = useGlassLayout();
+	const { root } = useTreeContext();
+	const { collapsible, collapsed, setCollapsed } = useSidebar();
+	const t = useTranslations({ note: "sidebar" });
+	return /* @__PURE__ */ jsxs("aside", {
+		id: "nd-sidebar",
+		className: cn("sticky flex flex-col transition-transform [grid-area:left] my-2 ms-2 z-30 top-2 border rounded-2xl bg-fd-popover/80 text-fd-popover-foreground text-sm backdrop-blur-sm shadow-sm h-[calc(100dvh---spacing(4))] max-md:hidden md:layout:[--fd-left-width:280px]", collapsed && "w-[calc(280px---spacing(2))] -translate-x-[280px] md:layout:[--fd-left-width:0px]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-1 pt-4 px-3.5 empty:hidden",
+				children: [/* @__PURE__ */ jsx(slots.navTitle, { className: "flex text-sm items-center font-semibold gap-2 me-auto" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex -mt-1.5 -me-1.5 empty:hidden",
+					children: [menuItems.map((item, i) => item.type === "icon" && /* @__PURE__ */ jsx(SidebarIconLinkItem, { item }, i)), collapsible && /* @__PURE__ */ jsx("button", {
+						"aria-label": collapsed ? t("Show Sidebar") : t("Hide Sidebar"),
+						className: cn(buttonVariants({
+							variant: "ghost",
+							size: "icon-sm"
+						}), "text-fd-muted-foreground"),
+						onClick: () => setCollapsed(!collapsed),
+						children: /* @__PURE__ */ jsx(SidebarIcon, {})
+					})]
+				})]
+			}),
+			tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabsDropdown, {
+				tabs,
+				className: "min-w-0 bg-fd-secondary text-fd-secondary-foreground rounded-xl px-2.5 py-2 [&_svg]:size-4 border rounded-xl shadow-sm mx-2 mt-2.5 empty:hidden"
+			}),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsxs(ScrollViewport, {
+					className: "flex flex-col p-2 [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent))]",
+					children: [menuItems.map((item, i) => item.type !== "icon" && /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i)), root.children.map((item, i) => cloneElement(renderNode(item), { key: i }))]
+				})
+			}),
+			children
+		]
+	});
+}
+function SidebarIconLinkItem({ item, className }) {
+	return /* @__PURE__ */ jsx(Link, {
+		href: item.url,
+		external: item.external,
+		"aria-label": item.label,
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "icon-sm"
+		}), "text-fd-muted-foreground", className),
+		onClick: () => {
+			drawerHandle.close();
+		},
+		children: item.icon
+	});
+}
+function SidebarLinkItem({ item, className }) {
+	const pathname = usePathname();
+	const [open, setOpen] = useState(true);
+	switch (item.type) {
+		case "custom": return /* @__PURE__ */ jsx("div", {
+			className,
+			children: item.children
+		});
+		case "menu": {
+			const rightIcon = /* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto text-fd-muted-foreground size-3.5! transition-transform", !open && "-rotate-90") });
+			return /* @__PURE__ */ jsxs(Collapsible, {
+				open,
+				onOpenChange: setOpen,
+				className: cn("mt-4 first:mt-0", className),
+				children: [item.url ? /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full px-2.5 py-1.5 font-medium",
+					children: [/* @__PURE__ */ jsxs(Link, {
+						href: item.url,
+						external: item.external,
+						className: cn("inline-flex items-center gap-2 [&_svg]:size-4", isLinkItemActive(item, pathname) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+						onClick: () => {
+							drawerHandle.close();
+						},
+						children: [item.icon, item.text]
+					}), /* @__PURE__ */ jsx(CollapsibleTrigger, {
+						className: "flex-1",
+						children: rightIcon
+					})]
+				}) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+					className: "w-full px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+					children: [
+						item.icon,
+						item.text,
+						rightIcon
+					]
+				}), /* @__PURE__ */ jsx(CollapsibleContent, {
+					className: "flex flex-col",
+					children: item.items.map((item, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i))
+				})]
+			});
+		}
+		default: return /* @__PURE__ */ jsxs(Link, {
+			href: item.url,
+			external: item.external,
+			className: cn(itemTriggerVariants({
+				active: isLinkItemActive(item, pathname),
+				className
+			})),
+			onClick: () => {
+				drawerHandle.close();
+			},
+			children: [item.icon, item.text]
+		});
+	}
+}
+function renderNode(node) {
+	if (node.type === "page") return /* @__PURE__ */ jsx(SidebarItem, { item: node });
+	if (node.type === "folder") return /* @__PURE__ */ jsx(SidebarFolder, { folder: node });
+	return /* @__PURE__ */ jsxs("p", {
+		className: "mt-4 w-full px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4 empty:hidden first:mt-0",
+		children: [node.icon, node.name]
+	});
+}
+function SidebarItem({ item }) {
+	const path = useTreePath();
+	return /* @__PURE__ */ jsxs(Link, {
+		href: item.url,
+		external: item.external,
+		className: itemTriggerVariants({ active: isNodeInPath(item, path) }),
+		onClick: () => {
+			drawerHandle.close();
+		},
+		children: [item.icon, item.name]
+	});
+}
+function SidebarFolder({ folder }) {
+	const path = useTreePath();
+	const shouldOpen = (folder.defaultOpen ?? true) || isNodeInPath(folder, path);
+	const [open, setOpen] = useState(shouldOpen);
+	useOnChange(shouldOpen, () => shouldOpen && setOpen(true));
+	if (folder.collapsible === false) return /* @__PURE__ */ jsxs(Fragment, { children: [folder.index ? /* @__PURE__ */ jsxs(Link, {
+		href: folder.index.url,
+		external: folder.index.external,
+		className: cn("inline-flex px-2.5 py-1.5 font-medium items-center gap-2 [&_svg]:size-4 mt-4 first:mt-0", isNodeInPath(folder.index, path) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+		onClick: () => {
+			drawerHandle.close();
+		},
+		children: [folder.icon, folder.name]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "w-full px-3 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4 mt-4 first:mt-0",
+		children: [folder.icon, folder.name]
+	}), folder.children.map((item, i) => cloneElement(renderNode(item), { key: i }))] });
+	const rightIcon = /* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto text-fd-muted-foreground size-3.5! transition-transform", !open && "-rotate-90") });
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		className: "mt-4 first:mt-0",
+		children: [folder.index ? /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full px-2.5 py-1.5 font-medium",
+			children: [/* @__PURE__ */ jsxs(Link, {
+				href: folder.index.url,
+				external: folder.index.external,
+				className: cn("inline-flex items-center gap-2 [&_svg]:size-4", isNodeInPath(folder.index, path) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+				onClick: () => {
+					drawerHandle.close();
+				},
+				children: [folder.icon, folder.name]
+			}), /* @__PURE__ */ jsx(CollapsibleTrigger, {
+				className: "flex-1",
+				children: rightIcon
+			})]
+		}) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "w-full px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+			children: [
+				folder.icon,
+				folder.name,
+				rightIcon
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "flex flex-col",
+			children: folder.children.map((item, i) => cloneElement(renderNode(item), { key: i }))
+		})]
+	});
+}
+function isNodeInPath(node, path) {
+	return path.some((other) => other.$id === node.$id || other === node);
+}
+//#endregion
+export { Sidebar, SidebarDrawer, SidebarProvider, drawerHandle, useSidebar };

package/dist/layouts/home/index.js

@@ -12,12 +12,12 @@ function useHomeLayout() {
 	if (!context) throw new Error("Please use this component under <HomeLayout /> (`fumadocs-ui/layouts/home`).");
 	return context;
 }
-const { useProvider } = baseSlots({ useProps() {
+const { useBaseSlots } = baseSlots({ useProps() {
 	return useHomeLayout().props;
 } });
 function HomeLayout(props) {
 	const { nav: { enabled: navEnabled = true } = {}, slots: defaultSlots, children, i18n: _i18n, githubUrl: _githubUrl, links: _links, themeSwitch: _themeSwitch, searchToggle: _searchToggle, ...rest } = props;
-	const { baseSlots, baseProps } = useProvider(props);
+	const { baseSlots, baseProps } = useBaseSlots(props);
 	const linkItems = useLinkItems(props);
 	const slots = {
 		...baseSlots,

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

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "main" | "icon" | "button" | null | undefined;
+  variant?: "button" | "main" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Header(props: ComponentProps<'header'>): import("react").JSX.Element;
 //#endregion

package/dist/layouts/home/slots/header.js

@@ -52,6 +52,7 @@ function Header(props) {
 	}, []);
 	const list = /* @__PURE__ */ jsxs(NavigationMenu.List, {
 		ref: listRef,
+		render: /* @__PURE__ */ jsx("div", {}),
 		className: "flex h-14 w-full mx-auto max-w-(--fd-layout-width) items-center px-4",
 		children: [
 			slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-semibold" }),

package/dist/layouts/notebook/client.js

@@ -9,7 +9,7 @@ import { Header } from "./slots/header.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use } from "react";
 //#region src/layouts/notebook/client.tsx
-const { useProvider } = baseSlots({ useProps() {
+const { useBaseSlots } = baseSlots({ useProps() {
 	return useNotebookLayout().props;
 } });
 const LayoutContext = createContext(null);
@@ -22,7 +22,7 @@ function LayoutBody(props) {
 	const { nav: { enabled: navEnabled = true, transparentMode: navTransparentMode = "none" } = {}, sidebar: { defaultOpenLevel, prefetch, ...sidebarProps } = {}, slots: defaultSlots, tabMode = "sidebar", tabs, tree, containerProps, children } = props;
 	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
 	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
-	const { baseSlots, baseProps } = useProvider(props);
+	const { baseSlots, baseProps } = useBaseSlots(props);
 	const linkItems = useLinkItems(props);
 	const slots = {
 		...baseSlots,

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

@@ -33,10 +33,13 @@ function TOC({ container, header, footer, style = "normal", list }) {
 				className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), t("On this page")]
 			}),
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
-				...list,
-				children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
-			}) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, {
+				className: "ms-px",
+				children: /* @__PURE__ */ jsxs(TOCItems, {
+					...list,
+					children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+				})
+			}),
 			footer
 		]
 	});
@@ -79,13 +82,16 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 					...content,
 					children: [
 						header,
-						/* @__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))]
-						}) }),
+						/* @__PURE__ */ jsx(TOCScrollArea, {
+							className: "ms-px",
+							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/notebook/slots/header.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
+import { useTreePath } from "../../../contexts/tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
@@ -101,9 +102,14 @@ function Header(props) {
 }
 function LayoutHeaderTabs({ tabs, className, ...props }) {
 	const pathname = usePathname();
+	const path = useTreePath();
 	const selectedIdx = useMemo(() => {
-		return tabs.findLastIndex((option) => isLayoutTabActive(option, pathname));
-	}, [tabs, pathname]);
+		return tabs.findLastIndex((option) => isLayoutTabActive(option, path, pathname));
+	}, [
+		tabs,
+		path,
+		pathname
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-row items-end gap-6", className),
 		...props,

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

@@ -2,6 +2,7 @@
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
+import { useTreePath } from "../../../contexts/tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
@@ -242,9 +243,14 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 	const [open, setOpen] = useState(false);
 	const { closeOnRedirect } = useSidebar();
 	const pathname = usePathname();
+	const path = useTreePath();
 	const selected = useMemo(() => {
-		return options.findLast((item) => isLayoutTabActive(item, pathname));
-	}, [options, pathname]);
+		return options.findLast((item) => isLayoutTabActive(item, path, pathname));
+	}, [
+		options,
+		path,
+		pathname
+	]);
 	const onClick = () => {
 		closeOnRedirect.current = false;
 		setOpen(false);