@fumadocs/base-ui 16.11.5 → 16.12.1

package/dist/layouts/flux/index.js

@@ -20,13 +20,13 @@ function useFluxLayout() {
 	if (!context) throw new Error("Please use Flux layout components under <DocsLayout /> (`fumadocs-ui/layouts/flux`).");
 	return context;
 }
-const { useProvider } = baseSlots({ useProps() {
+const { useBaseSlots } = baseSlots({ useProps() {
 	return useFluxLayout().props;
 } });
 function DocsLayout(props) {
 	const { tree, nav = {}, sidebar: { enabled: sidebarEnabled = true, tabs: _tabs, defaultOpenLevel, prefetch, ...sidebarProps } = {}, tabs: defaultTabs = _tabs, children, containerProps, renderNavigationPanel = (props) => /* @__PURE__ */ jsx(NavigationPanel, { ...props }), slots: defaultSlots = {} } = props;
 	const linkItems = useLinkItems(props);
-	const { baseSlots, baseProps } = useProvider(props);
+	const { baseSlots, baseProps } = useBaseSlots(props);
 	const tabs = useMemo(() => {
 		if (Array.isArray(defaultTabs)) return defaultTabs;
 		if (typeof defaultTabs === "object") return getLayoutTabs(tree, defaultTabs);
@@ -50,44 +50,44 @@ function DocsLayout(props) {
 			slots,
 			...linkItems
 		},
-		children: /* @__PURE__ */ jsxs(TreeContextProvider, {
+		children: /* @__PURE__ */ jsx(TreeContextProvider, {
 			tree,
-			children: [/* @__PURE__ */ jsx(slots.sidebar.provider, {
+			children: /* @__PURE__ */ jsxs(slots.sidebar.provider, {
 				defaultOpenLevel,
 				prefetch,
-				children: /* @__PURE__ */ jsxs(slots.container, {
+				children: [/* @__PURE__ */ jsxs(slots.container, {
 					...containerProps,
 					children: [sidebarEnabled && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }), children]
-				})
-			}), renderNavigationPanel({
-				head: /* @__PURE__ */ jsxs(Fragment, { children: [slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }), nav.children] }),
-				tabDropdown: slots.tabDropdown && tabs.length > 0 && /* @__PURE__ */ jsx(slots.tabDropdown, {
-					className: "flex-1",
-					tabs
-				}),
-				tool: /* @__PURE__ */ jsxs(Fragment, { children: [
-					slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
-					slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
-						hideIfDisabled: true,
-						className: "rounded-lg"
+				}), renderNavigationPanel({
+					head: /* @__PURE__ */ jsxs(Fragment, { children: [slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }), nav.children] }),
+					tabDropdown: slots.tabDropdown && tabs.length > 0 && /* @__PURE__ */ jsx(slots.tabDropdown, {
+						className: "flex-1",
+						tabs
 					}),
-					slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, { className: cn(buttonVariants({
-						variant: "ghost",
-						size: "icon-sm",
-						className: "overflow-hidden"
-					})) }),
-					slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-1 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg" })
-				] }),
-				link: linkItems.menuItems.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-					item,
-					className: cn(buttonVariants({
-						size: "icon-sm",
-						color: "ghost"
-					})),
-					"aria-label": item.label,
-					children: item.icon
-				}, i))
-			})]
+					tool: /* @__PURE__ */ jsxs(Fragment, { children: [
+						slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
+						slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+							hideIfDisabled: true,
+							className: "rounded-lg"
+						}),
+						slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, { className: cn(buttonVariants({
+							variant: "ghost",
+							size: "icon-sm",
+							className: "overflow-hidden"
+						})) }),
+						slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-1 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg" })
+					] }),
+					link: linkItems.menuItems.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+						item,
+						className: cn(buttonVariants({
+							size: "icon-sm",
+							color: "ghost"
+						})),
+						"aria-label": item.label,
+						children: item.icon
+					}, i))
+				})]
+			})
 		})
 	});
 }

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

@@ -24,10 +24,13 @@ function TOC({ container, trigger, content, header, footer, style = "normal", li
 			...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 }, 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
 			]
 		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]

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

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
-import { SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarViewport, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
+import { SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
 import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
 import { useFluxLayout } from "../index.js";
@@ -40,13 +40,13 @@ function Sidebar({ footer, banner, components, ...rest }) {
 				className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
 				children: banner
 			}),
-			/* @__PURE__ */ jsx(SidebarViewport, { children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col p-4",
 				children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
 					item,
 					className: cn(i === list.length - 1 && "mb-4")
 				}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
-			}) }),
+			}),
 			footer
 		]
 	});

package/dist/layouts/flux/slots/tab-dropdown.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
+import { useTreePath } from "../../../contexts/tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { isLayoutTabActive } from "../../shared/index.js";
 import Link from "fumadocs-core/link";
@@ -12,9 +13,14 @@ import { AnimatePresence, motion } from "motion/react";
 function TabDropdown({ tabs, placeholder, className, ...props }) {
 	const [open, setOpen] = useState(false);
 	const pathname = usePathname();
+	const path = useTreePath();
 	const selectedIdx = useMemo(() => {
-		return tabs.findLastIndex((item) => isLayoutTabActive(item, pathname));
-	}, [tabs, pathname]);
+		return tabs.findLastIndex((item) => isLayoutTabActive(item, path, pathname));
+	}, [
+		tabs,
+		path,
+		pathname
+	]);
 	const selected = selectedIdx !== -1 ? tabs[selectedIdx] : void 0;
 	const onClick = () => {
 		setOpen(false);

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

@@ -0,0 +1,41 @@
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, LinkItemType } from "../shared/index.js";
+import { SidebarDrawerProps, SidebarProps, SidebarProviderProps, useSidebar } from "./slots/sidebar.js";
+import { HeaderProps } from "./slots/header.js";
+import { FC } from "react";
+import * as PageTree from "fumadocs-core/page-tree";
+import { Drawer } from "@base-ui/react";
+//#region src/layouts/glass/index.d.ts
+interface GlassSlots extends BaseSlots {
+  header: FC<HeaderProps>;
+  sidebar: {
+    main: FC<SidebarProps>;
+    provider: FC<SidebarProviderProps>;
+    use: typeof useSidebar;
+    drawer: FC<SidebarDrawerProps>;
+    drawerHandle: Drawer.Handle<unknown>;
+  };
+}
+interface GlassLayoutProps extends BaseLayoutProps {
+  tree: PageTree.Root;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+  aiChat?: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+  };
+  slots?: Partial<GlassSlots>;
+  sidebar?: Omit<SidebarProviderProps, 'children'>;
+}
+interface SlotsProps extends BaseSlotsProps<GlassLayoutProps> {
+  tabs: LayoutTab[];
+  aiChat?: GlassLayoutProps['aiChat'];
+}
+declare function useGlassLayout(): {
+  props: SlotsProps;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: GlassSlots;
+};
+declare function GlassLayout(props: GlassLayoutProps): import("react").JSX.Element;
+//#endregion
+export { GlassLayout, GlassLayoutProps, GlassSlots, useGlassLayout };

package/dist/layouts/glass/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { TreeContextProvider } from "../../contexts/tree.js";
+import { baseSlots } from "../shared/client.js";
+import { getLayoutTabs, useLinkItems } from "../shared/index.js";
+import { Sidebar, SidebarDrawer, SidebarProvider, drawerHandle, useSidebar } from "./slots/sidebar.js";
+import { Header } from "./slots/header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+//#region src/layouts/glass/index.tsx
+const LayoutContext = createContext(null);
+function useGlassLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use Glass layout components under <GlassLayout /> (`fumadocs-ui/layouts/glass`).");
+	return context;
+}
+const { useBaseSlots } = baseSlots({ useProps() {
+	return useGlassLayout().props;
+} });
+function GlassLayout(props) {
+	const { tree, tabs: defaultTabs, aiChat, children, slots: defaultSlots = {} } = props;
+	const linkItems = useLinkItems(props);
+	const { baseSlots, baseProps } = useBaseSlots(props);
+	const tabs = useMemo(() => {
+		if (Array.isArray(defaultTabs)) return defaultTabs;
+		if (typeof defaultTabs === "object") return getLayoutTabs(tree, defaultTabs);
+		if (defaultTabs !== false) return getLayoutTabs(tree);
+		return [];
+	}, [tree, defaultTabs]);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots.header ?? Header,
+		sidebar: defaultSlots.sidebar ?? {
+			drawer: SidebarDrawer,
+			drawerHandle,
+			main: Sidebar,
+			provider: SidebarProvider,
+			use: useSidebar
+		}
+	};
+	return /* @__PURE__ */ jsx(LayoutContext, {
+		value: {
+			props: {
+				tabs,
+				aiChat,
+				...baseProps
+			},
+			slots,
+			...linkItems
+		},
+		children: /* @__PURE__ */ jsx(slots.sidebar.provider, {
+			...props.sidebar,
+			children: /* @__PURE__ */ jsx(TreeContextProvider, {
+				tree,
+				children: /* @__PURE__ */ jsxs("div", {
+					id: "fd-glass-layout",
+					className: "grid overflow-x-clip min-h-dvh [--fd-main-width:900px] [--fd-left-width:0px] [--fd-right-width:0px]",
+					style: { gridTemplate: `"left left-margin main right-margin right" 1fr / var(--fd-left-width) calc(50% - var(--fd-main-width)/2 - var(--fd-left-width)) 1fr calc(50% - var(--fd-main-width)/2 - var(--fd-right-width)) var(--fd-right-width)` },
+					children: [
+						/* @__PURE__ */ jsx(slots.sidebar.drawer, {}),
+						/* @__PURE__ */ jsx(slots.sidebar.main, {}),
+						/* @__PURE__ */ jsx(slots.header, {}),
+						children
+					]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { GlassLayout, useGlassLayout };

package/dist/layouts/glass/layout-tabs.js

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn.js";
+import { useTreePath } from "../../contexts/tree.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { isLayoutTabActive } from "../shared/index.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/layout-tabs.tsx
+function LayoutTabsDropdown({ tabs, className, size = "default", ...props }) {
+	const path = useTreePath();
+	const pathname = usePathname();
+	const t = useTranslations();
+	const selected = tabs.findLast((t) => isLayoutTabActive(t, path, pathname));
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			className: cn("inline-flex items-center gap-2 text-sm font-medium rounded-full transition-colors hover:bg-fd-accent data-popup-open:bg-fd-accent", size === "lg" && "text-[0.9375rem]", className),
+			...props,
+			children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [selected.icon, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: selected.title
+			})] }) : /* @__PURE__ */ jsx("span", {
+				className: "text-fd-muted-foreground truncate",
+				children: t("Layout Tab", { note: "layout tab trigger" })
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("ms-auto shrink-0 text-fd-muted-foreground", size === "default" && "size-3.5!", size === "lg" && "size-4!") })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "flex flex-col p-1 rounded-xl",
+			align: "start",
+			children: tabs.map((t, i) => {
+				if (t.unlisted && t !== selected) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: t.url,
+					className: cn("text-sm px-2 py-1.5 rounded-lg", selected === t ? "bg-fd-primary/10 text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"),
+					onClick: () => setOpen(false),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+						children: [t.icon, t.title]
+					}), /* @__PURE__ */ jsx("p", {
+						className: cn("mt-1 text-xs text-fd-muted-foreground empty:hidden", selected === t && "text-fd-primary/80"),
+						children: t.description
+					})]
+				}, i);
+			})
+		})]
+	});
+}
+//#endregion
+export { LayoutTabsDropdown };

package/dist/layouts/glass/page/index.d.ts

@@ -0,0 +1,31 @@
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOCProps } from "./slots/toc.js";
+import { ComponentProps } from "react";
+import { TOCItemType } from "fumadocs-core/toc";
+//#region src/layouts/glass/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean | undefined;
+  tableOfContent?: TOCProps;
+}
+declare function useDocsPage(): {
+  full: boolean;
+};
+declare function DocsPage({ full, toc, tableOfContent, children }: DocsPageProps): import("react").JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): import("react").JSX.Element;
+/**
+ * Add typography styles
+ */
+declare function DocsBody({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DocsDescription({ children, className, ...props }: ComponentProps<'p'>): import("react").JSX.Element | null;
+declare function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>): import("react").JSX.Element;
+declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): import("react").JSX.Element;
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/glass/page/index.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { Footer } from "./slots/footer.js";
+import { Breadcrumb } from "./slots/breadcrumb.js";
+import { TOC, TOCProvider } from "./slots/toc.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Edit } from "lucide-react";
+import { createContext, use, useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/page/index.tsx
+const PageContext = createContext(null);
+function useDocsPage() {
+	const context = use(PageContext);
+	if (!context) throw new Error("Please use page components under <DocsPage /> (`fumadocs-ui/layouts/glass/page`).");
+	return context;
+}
+const Empty = [];
+function DocsPage({ full = false, toc = Empty, tableOfContent, children }) {
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: { full },
+		children: /* @__PURE__ */ jsxs(TOCProvider, {
+			toc,
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-fd-full": full,
+				className: cn("flex flex-col gap-2 p-6 pb-16 min-w-0 [grid-area:main] md:pt-16 md:pb-8", full && "layout:[--fd-main-width:1200px]"),
+				children: [
+					/* @__PURE__ */ jsx(Breadcrumb, {}),
+					children,
+					/* @__PURE__ */ jsx(Footer, {})
+				]
+			}), /* @__PURE__ */ jsx(TOC, { ...tableOfContent })]
+		})
+	});
+}
+function EditOnGitHub(props) {
+	const t = useTranslations({ note: "edit page" });
+	return /* @__PURE__ */ jsx("a", {
+		target: "_blank",
+		rel: "noreferrer noopener",
+		...props,
+		className: cn(buttonVariants({
+			color: "secondary",
+			size: "sm"
+		}), "gap-1.5 not-prose", props.className),
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), t("Edit on GitHub")] })
+	});
+}
+/**
+* Add typography styles
+*/
+function DocsBody({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("prose flex-1", className),
+		children
+	});
+}
+function DocsDescription({ children, className, ...props }) {
+	if (children === void 0) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn("mb-8 text-lg text-fd-muted-foreground", className),
+		children
+	});
+}
+function DocsTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		...props,
+		className: cn("text-[1.75em] font-semibold", className),
+		children
+	});
+}
+function PageLastUpdate({ date: value, ...props }) {
+	const t = useTranslations({ note: "page footer" });
+	const [date, setDate] = useState("");
+	useEffect(() => {
+		setDate(value.toLocaleDateString());
+	}, [value]);
+	return /* @__PURE__ */ jsxs("p", {
+		...props,
+		className: cn("text-sm text-fd-muted-foreground", props.className),
+		children: [
+			t("Last updated on"),
+			" ",
+			date
+		]
+	});
+}
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/glass/page/slots/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
+//#region src/layouts/glass/page/slots/breadcrumb.d.ts
+type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+declare function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react").JSX.Element | null;
+//#endregion
+export { Breadcrumb, BreadcrumbProps };

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

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, useMemo } from "react";
+import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
+//#region src/layouts/glass/page/slots/breadcrumb.tsx
+function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
+	const path = useTreePath();
+	const { root } = useTreeContext();
+	const items = useMemo(() => {
+		return getBreadcrumbItemsFromPath(root, path, {
+			includePage,
+			includeSeparator,
+			includeRoot
+		});
+	}, [
+		includePage,
+		includeRoot,
+		includeSeparator,
+		path,
+		root
+	]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center gap-1.5 text-sm text-fd-muted-foreground", props.className),
+		children: items.map((item, i) => {
+			const className = cn("truncate", i === items.length - 1 && "text-fd-primary font-medium");
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
+				href: item.url,
+				className: cn(className, "transition-opacity hover:opacity-80"),
+				children: item.name
+			}) : /* @__PURE__ */ jsx("span", {
+				className,
+				children: item.name
+			})] }, i);
+		})
+	});
+}
+//#endregion
+export { Breadcrumb };

package/dist/layouts/glass/page/slots/footer.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import * as PageTree from "fumadocs-core/page-tree";
+//#region src/layouts/glass/page/slots/footer.d.ts
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+interface FooterProps extends ComponentProps<'div'> {
+  /**
+   * Items including information for the next and previous page
+   */
+  items?: {
+    previous?: Item;
+    next?: Item;
+  };
+}
+declare function Footer({ items, children, className, ...props }: FooterProps): import("react").JSX.Element;
+//#endregion
+export { Footer, FooterProps };

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

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { isActive } from "../../../../utils/urls.js";
+import { useFooterItems } from "../../../../utils/use-footer-items.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/page/slots/footer.tsx
+function Footer({ items, children, className, ...props }) {
+	const footerList = useFooterItems();
+	const pathname = usePathname();
+	const { previous, next } = useMemo(() => {
+		if (items) return items;
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
+		if (idx === -1) return {};
+		return {
+			previous: footerList[idx - 1],
+			next: footerList[idx + 1]
+		};
+	}, [
+		footerList,
+		items,
+		pathname
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
+		...props,
+		children: [previous && /* @__PURE__ */ jsx(FooterItem, {
+			item: previous,
+			index: 0
+		}), next && /* @__PURE__ */ jsx(FooterItem, {
+			item: next,
+			index: 1
+		})]
+	}), children] });
+}
+function FooterItem({ item, index }) {
+	const t = useTranslations({ note: "pagination" });
+	const Icon = index === 0 ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsxs(Link, {
+		href: item.url,
+		className: cn("flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full", index === 1 && "text-end"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("inline-flex items-center gap-1.5 font-medium", index === 1 && "flex-row-reverse"),
+			children: [/* @__PURE__ */ jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), /* @__PURE__ */ jsx("p", { children: item.name })]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-fd-muted-foreground truncate",
+			children: item.description ?? (index === 0 ? t("Previous Page") : t("Next Page"))
+		})]
+	});
+}
+//#endregion
+export { Footer };

package/dist/layouts/glass/page/slots/toc.d.ts

@@ -0,0 +1,19 @@
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/layouts/glass/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): import("react").JSX.Element;
+interface TOCProps {
+  container?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+}
+declare function TOC({ container, header, footer }: TOCProps): import("react").JSX.Element | undefined;
+//#endregion
+export { TOC, TOCProps, TOCProvider, TOCProviderProps };