@fumadocs/base-ui 16.11.4 → 16.12.0

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

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

@@ -28,7 +28,7 @@ interface BaseSlotsProps<P extends BaseLayoutProps = BaseLayoutProps> extends Pi
 declare function baseSlots({ useProps }: {
   useProps: () => BaseSlotsProps;
 }): {
-  useProvider(options: BaseLayoutProps): {
+  useBaseSlots(options: BaseLayoutProps): {
     baseSlots: BaseSlots;
     baseProps: BaseSlotsProps;
   };

package/dist/layouts/shared/client.js

@@ -56,7 +56,7 @@ function baseSlots({ useProps }) {
 			children: title
 		});
 	}
-	return { useProvider(options) {
+	return { useBaseSlots(options) {
 		const { locales = [] } = useI18n();
 		const { nav, slots = {}, i18n = locales.length > 1, searchToggle: { enabled: searchToggleEnabled = true, ...searchToggle } = {}, themeSwitch: { enabled: themeSwitchEnabled = true, ...themeSwitch } = {} } = options;
 		return {

package/dist/layouts/shared/index.d.ts

@@ -2,8 +2,8 @@ import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigg
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseSlots, BaseSlotsProps, LinkItem, baseSlots } from "./client.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as PageTree from "fumadocs-core/page-tree";
 import { I18nConfig } from "fumadocs-core/i18n";
+import * as PageTree from "fumadocs-core/page-tree";
 //#region src/layouts/shared/index.d.ts
 interface NavOptions {
   enabled?: boolean;
@@ -82,7 +82,7 @@ interface GetLayoutTabsOptions {
   transform?: (option: LayoutTab, node: PageTree.Folder) => LayoutTab | null;
 }
 declare function getLayoutTabs(tree: PageTree.Root, { transform }?: GetLayoutTabsOptions): LayoutTab[];
-declare function isLayoutTabActive(tab: LayoutTab, pathname: string): boolean;
+declare function isLayoutTabActive(tab: LayoutTab, path: PageTree.Node[], pathname: string): boolean;
 interface Filterable {
   /**
    * Restrict where the item is displayed
@@ -159,11 +159,12 @@ type LinkItemType = MainItemType | IconItemType | ButtonItemType | MenuItemType
  * Get link items with shortcuts
  */
 declare function resolveLinkItems({ links, githubUrl }: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): LinkItemType[];
-declare function useLinkItems({ githubUrl, links }: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): {
+interface GroupedLinkItems {
+  all: LinkItemType[];
   navItems: LinkItemType[];
   menuItems: LinkItemType[];
-  all: LinkItemType[];
-};
+}
+declare function useLinkItems({ githubUrl, links }: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): GroupedLinkItems;
 declare function isLinkItemActive(link: LinkItemType, pathname: string): boolean;
 //#endregion
-export { BaseLayoutProps, type BaseSlots, type BaseSlotsProps, ButtonItemType, CustomItemType, GetLayoutTabsOptions, IconItemType, LayoutTab, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, baseSlots, getLayoutTabs, isLayoutTabActive, isLinkItemActive, resolveLinkItems, useLinkItems };
+export { BaseLayoutProps, type BaseSlots, type BaseSlotsProps, ButtonItemType, CustomItemType, GetLayoutTabsOptions, GroupedLinkItems, IconItemType, LayoutTab, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, baseSlots, getLayoutTabs, isLayoutTabActive, isLinkItemActive, resolveLinkItems, useLinkItems };

package/dist/layouts/shared/index.js

@@ -2,7 +2,6 @@ import { isActive, normalize } from "../../utils/urls.js";
 import { LinkItem, baseSlots } from "./client.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import * as PageTree from "fumadocs-core/page-tree";
 //#region src/layouts/shared/index.tsx
 const defaultTransform = (option, node) => {
 	if (!node.icon) return option;
@@ -38,8 +37,11 @@ function getLayoutTabs(tree, { transform = defaultTransform } = {}) {
 	if (tree.fallback) next(tree.fallback, true);
 	return results;
 }
-function isLayoutTabActive(tab, pathname) {
-	if (tab.$folder) return PageTree.findPath(tab.$folder.children, (node) => node.type === "page" && isActive(node.url, pathname)) !== null;
+function isLayoutTabActive(tab, path, pathname) {
+	if (tab.$folder) {
+		const folder = tab.$folder;
+		return path.some((node) => node.type === "folder" && (node.$id === folder.$id || node === folder));
+	}
 	if (tab.urls) return tab.urls.has(normalize(pathname));
 	return isActive(tab.url, pathname, true);
 }

package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7 → react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8}/node_modules/react-medium-image-zoom/dist/controlled.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-medium-image-zoom/dist/controlled.d.ts
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.d.ts
 type ModalState = 'LOADED' | 'LOADING' | 'UNLOADED' | 'UNLOADING';
 interface ControlledProps {
   a11yNameButtonUnzoom?: string;

package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7 → react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8}/node_modules/react-medium-image-zoom/dist/controlled.js

@@ -6,7 +6,7 @@ import { getStyleGhost } from "./utils/get-style-ghost.js";
 import { getStyleModalImg } from "./utils/get-style-modal-img.js";
 import React from "react";
 import ReactDOM from "react-dom";
-//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-medium-image-zoom/dist/controlled.js
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.js
 const IMAGE_QUERY = [
 	"img",
 	"svg",

package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7 → react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8}/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts

@@ -1,6 +1,6 @@
 import { ControlledProps } from "./controlled.js";
 import React from "react";
-//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts
 type UncontrolledProps = Omit<ControlledProps, 'isZoomed'>;
 //#endregion
 export { UncontrolledProps };

package/dist/node_modules/.pnpm/{react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7 → react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8}/node_modules/react-medium-image-zoom/dist/uncontrolled.js

@@ -1,6 +1,6 @@
 import { Controlled } from "./controlled.js";
 import React from "react";
-//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-medium-image-zoom/dist/uncontrolled.js
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.8_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.js
 function Uncontrolled({ onZoomChange, ...props }) {
 	const [isZoomed, setIsZoomed] = React.useState(false);
 	const handleZoomChange = React.useCallback((value, { event }) => {