@fumadocs/base-ui 16.7.0 → 16.7.2

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

@@ -1,12 +1,15 @@
+"use client";
 import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
-import { I18nLabel } from "../../../contexts/i18n.js";
+import { I18nLabel, useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
+import { TOC, TOCPopover, TOCProvider } from "./slots/toc.js";
 import { Footer } from "./slots/footer.js";
 import { Breadcrumb } from "./slots/breadcrumb.js";
-import { DocsPage, PageLastUpdate, useDocsPage } from "./client.js";
+import { Container } from "./slots/container.js";
 import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Edit } from "lucide-react";
 //#region src/layouts/docs/page/index.tsx
 var page_exports = /* @__PURE__ */ __exportAll({
@@ -22,6 +25,48 @@ var page_exports = /* @__PURE__ */ __exportAll({
 	ViewOptionsPopover: () => ViewOptionsPopover,
 	useDocsPage: () => useDocsPage
 });
+const PageContext = createContext(null);
+function useDocsPage() {
+	const context = use(PageContext);
+	if (!context) throw new Error("Please use page components under <DocsPage /> (`fumadocs-ui/layouts/docs/page`).");
+	return context;
+}
+function DocsPage({ tableOfContent: { enabled: tocEnabled, single, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, breadcrumb: { enabled: breadcrumbEnabled = true, ...breadcrumb } = {}, footer: { enabled: footerEnabled = true, ...footer } = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+	tocEnabled ??= Boolean(!full && (toc.length > 0 || tocProps.footer || tocProps.header));
+	tocPopoverEnabled ??= Boolean(toc.length > 0 || tocPopoverProps.header || tocPopoverProps.footer);
+	const slots = {
+		breadcrumb: defaultSlots.breadcrumb ?? Breadcrumb,
+		footer: defaultSlots.footer ?? Footer,
+		toc: defaultSlots.toc ?? {
+			provider: TOCProvider,
+			main: TOC,
+			popover: TOCPopover
+		},
+		container: defaultSlots.container ?? Container
+	};
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: {
+			props: { full },
+			slots
+		},
+		children: /* @__PURE__ */ jsxs(slots.toc.provider, {
+			single,
+			toc: tocEnabled || tocPopoverEnabled ? toc : [],
+			children: [
+				tocPopoverEnabled && (tocPopoverProps.component ?? /* @__PURE__ */ jsx(slots.toc.popover, { ...tocPopoverProps })),
+				/* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [
+						breadcrumbEnabled && (breadcrumb.component ?? /* @__PURE__ */ jsx(slots.breadcrumb, { ...breadcrumb })),
+						children,
+						footerEnabled && (footer.component ?? /* @__PURE__ */ jsx(slots.footer, { ...footer }))
+					]
+				}),
+				tocEnabled && (tocProps.component ?? /* @__PURE__ */ jsx(slots.toc.main, { ...tocProps }))
+			]
+		})
+	});
+}
 function EditOnGitHub(props) {
 	return /* @__PURE__ */ jsx("a", {
 		target: "_blank",
@@ -29,10 +74,9 @@ function EditOnGitHub(props) {
 		...props,
 		className: cn(buttonVariants({
 			color: "secondary",
-			size: "sm",
-			className: "gap-1.5 not-prose"
-		}), props.className),
-		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(I18nLabel, { label: "editOnGithub" })] })
+			size: "sm"
+		}), "gap-1.5 not-prose", props.className),
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(I18nLabel, { label: "editOnGithub" })] })
 	});
 }
 /**
@@ -60,5 +104,21 @@ function DocsTitle({ children, className, ...props }) {
 		children
 	});
 }
+function PageLastUpdate({ date: value, ...props }) {
+	const { text } = useI18n();
+	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: [
+			text.lastUpdate,
+			" ",
+			date
+		]
+	});
+}
 //#endregion
 export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, page_exports, useDocsPage };

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

@@ -1,8 +1,10 @@
+"use client";
 import { cn } from "../../../../utils/cn.js";
 import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
 import { Fragment, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Link } from "lucide-react";
+import Link from "fumadocs-core/link";
+import { ChevronRight } from "lucide-react";
 import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
 //#region src/layouts/docs/page/slots/breadcrumb.tsx
 function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {

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

@@ -1,5 +1,6 @@
+"use client";
 import { cn } from "../../../../utils/cn.js";
-import { useDocsPage } from "../client.js";
+import { useDocsPage } from "../index.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/docs/page/slots/container.tsx
 function Container(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
 import { isActive } from "../../../../utils/urls.js";

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

@@ -1,7 +1,10 @@
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/docs/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): react_jsx_runtime0.JSX.Element;
 interface TOCProps {
   container?: ComponentProps<'div'>;
   /**
@@ -23,5 +26,30 @@ declare function TOC({
   footer,
   style
 }: TOCProps): react_jsx_runtime0.JSX.Element;
+interface TOCPopoverProps {
+  container?: ComponentProps<'div'>;
+  trigger?: ComponentProps<'button'>;
+  content?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+  /**
+   * @defaultValue 'normal'
+   */
+  style?: 'normal' | 'clerk';
+}
+declare function TOCPopover({
+  container,
+  trigger,
+  content,
+  header,
+  footer,
+  style
+}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOC, TOCProps };
+export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -1,12 +1,20 @@
 "use client";
-import { I18nLabel } from "../../../../contexts/i18n.js";
+import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea } from "../../../../components/toc/index.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
 import { TOCItems } from "../../../../components/toc/default.js";
 import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { useTreePath } from "../../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
+import { useDocsLayout } from "../../client.js";
+import "../../index.js";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "lucide-react";
+import { ChevronDown, Text } from "lucide-react";
 //#region src/layouts/docs/page/slots/toc.tsx
+function TOCProvider(props) {
+	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
+}
 function TOC({ container, header, footer, style }) {
 	return /* @__PURE__ */ jsxs("div", {
 		id: "nd-toc",
@@ -24,5 +32,130 @@ function TOC({ container, header, footer, style }) {
 		]
 	});
 }
+const TocPopoverContext = createContext(null);
+function TOCPopover({ container, trigger, content, header, footer, style }) {
+	return /* @__PURE__ */ jsxs(PageTOCPopover, {
+		...container,
+		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+			...content,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+				footer
+			]
+		})]
+	});
+}
+function PageTOCPopover({ className, children, ...rest }) {
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const { isNavTransparent } = useDocsLayout();
+	const onClick = useEffectEvent((e) => {
+		if (!open) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
+			...rest,
+			children: /* @__PURE__ */ jsx("header", {
+				ref,
+				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
+				children
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const { text } = useI18n();
+	const { open } = use(TocPopoverContext);
+	const items = useTOCItems();
+	const active = useActiveAnchor();
+	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const path = useTreePath().at(-1);
+	const showItem = selected !== -1 && !open;
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
+		"data-toc-popover-trigger": "",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ProgressCircle, {
+				value: (selected + 1) / Math.max(1, items.length),
+				max: 1,
+				className: cn("shrink-0", open && "text-fd-primary")
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
+					children: path?.name ?? text.toc
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
+					children: items[selected]?.title
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
+		]
+	});
+}
+function clamp(input, min, max) {
+	if (input < min) return min;
+	if (input > max) return max;
+	return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+	const normalizedValue = clamp(value, min, max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progress = normalizedValue / max * circumference;
+	const circleProps = {
+		cx: size / 2,
+		cy: size / 2,
+		r: radius,
+		fill: "none",
+		strokeWidth
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "progressbar",
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-valuenow": normalizedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		...restSvgProps,
+		children: [/* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			className: "stroke-current/25"
+		}), /* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			stroke: "currentColor",
+			strokeDasharray: circumference,
+			strokeDashoffset: circumference - progress,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`,
+			className: "transition-all"
+		})]
+	});
+}
+function PageTOCPopoverContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-toc-popover-content": "",
+		...props,
+		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
+		children: props.children
+	});
+}
 //#endregion
-export { TOC };
+export { TOC, TOCPopover, TOCProvider };

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

@@ -1,6 +1,7 @@
+"use client";
 import { cn } from "../../../utils/cn.js";
-import "../index.js";
 import { useDocsLayout } from "../client.js";
+import "../index.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/docs/slots/container.tsx
 function Container(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { useDocsLayout } from "../client.js";

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

@@ -2,20 +2,20 @@
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
-import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
-import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, 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, SidebarTrigger as SidebarTrigger$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
-import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { SearchTrigger } from "../../shared/slots/search-trigger.js";
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
+import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
+import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, 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, SidebarTrigger as SidebarTrigger$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 { useDocsLayout } from "../client.js";
 import { useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
-import { Check, ChevronsUpDown, Languages, Sidebar as Sidebar$1 } from "lucide-react";
+import { Check, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/layouts/docs/slots/sidebar.tsx
 const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0", { variants: {
@@ -53,7 +53,7 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 									size: "icon-sm",
 									className: "mb-auto text-fd-muted-foreground"
 								})),
-								children: /* @__PURE__ */ jsx(Sidebar$1, {})
+								children: /* @__PURE__ */ jsx(SidebarIcon, {})
 							})
 						]
 					}),
@@ -111,7 +111,7 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 								size: "icon-sm",
 								className: "p-2"
 							})),
-							children: /* @__PURE__ */ jsx(Sidebar$1, {})
+							children: /* @__PURE__ */ jsx(SidebarIcon, {})
 						})
 					]
 				}),
@@ -174,7 +174,7 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 				size: "icon-sm",
 				className: "rounded-lg"
 			})),
-			children: /* @__PURE__ */ jsx(Sidebar$1, {})
+			children: /* @__PURE__ */ jsx(SidebarIcon, {})
 		}), /* @__PURE__ */ jsx(SearchTrigger, {
 			className: "rounded-lg",
 			hideIfDisabled: true

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

@@ -9,9 +9,9 @@ import { motion } from "motion/react";
 
 //#region src/layouts/flux/index.d.ts
 interface DocsSlots extends BaseSlots {
-  container?: FC<ComponentProps<'div'>>;
-  tabDropdown?: FC<TabDropdownProps>;
-  sidebar?: {
+  container: FC<ComponentProps<'div'>>;
+  tabDropdown: FC<TabDropdownProps>;
+  sidebar: {
     provider: FC<SidebarProviderProps>;
     trigger: FC<ComponentProps<'button'>>;
     root: FC<SidebarProps>;
@@ -26,7 +26,7 @@ interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
   sidebar?: SidebarOptions;
   tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
-  slots?: DocsSlots;
+  slots?: Partial<DocsSlots>;
   renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;
   containerProps?: ComponentProps<'div'>;
 }

package/dist/layouts/flux/index.js

@@ -44,16 +44,6 @@ function DocsLayout(props) {
 			useSidebar
 		}
 	};
-	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [sidebarEnabled && slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }), children] });
-	if (slots.container) content = /* @__PURE__ */ jsx(slots.container, {
-		...containerProps,
-		children: content
-	});
-	if (slots.sidebar) content = /* @__PURE__ */ jsx(slots.sidebar.provider, {
-		defaultOpenLevel,
-		prefetch,
-		children: content
-	});
 	return /* @__PURE__ */ jsx(LayoutContext, {
 		value: {
 			props: baseProps,
@@ -62,7 +52,14 @@ function DocsLayout(props) {
 		},
 		children: /* @__PURE__ */ jsxs(TreeContextProvider, {
 			tree,
-			children: [content, renderNavigationPanel({
+			children: [/* @__PURE__ */ jsx(slots.sidebar.provider, {
+				defaultOpenLevel,
+				prefetch,
+				children: /* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [sidebarEnabled && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }), children]
+				})
+			}), renderNavigationPanel({
 				head: /* @__PURE__ */ jsxs(Fragment$1, { 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",

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

@@ -1,11 +1,81 @@
 import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { Footer, FooterProps } from "./slots/footer.js";
 import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
-import { DocsPage, DocsPageProps, DocsPageSlots, PageLastUpdate, useDocsPage } from "./client.js";
-import { ComponentProps } from "react";
+import { ComponentProps, FC, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/flux/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean;
+  children?: ReactNode;
+  slots?: Partial<DocsPageSlots>;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+}
+interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.toc` instead.
+   */
+  component?: ReactNode;
+}
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.breadcrumb` instead.
+   */
+  component?: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.footer` instead.
+   */
+  component?: ReactNode;
+}
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+type PageSlotsProps = Pick<DocsPageProps, 'full'>;
+declare function useDocsPage(): {
+  props: PageSlotsProps;
+  slots: DocsPageSlots;
+};
+declare function DocsPage({
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
+  },
+  breadcrumb: {
+    enabled: breadcrumbEnabled,
+    ...breadcrumb
+  },
+  footer: {
+    enabled: footerEnabled,
+    ...footer
+  },
+  full,
+  toc,
+  slots: defaultSlots,
+  children,
+  ...containerProps
+}: DocsPageProps): react_jsx_runtime0.JSX.Element;
 declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
@@ -25,5 +95,11 @@ declare function DocsTitle({
   className,
   ...props
 }: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+declare function PageLastUpdate({
+  date: value,
+  ...props
+}: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, type DocsPageProps, type DocsPageSlots, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

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

@@ -1,13 +1,52 @@
-import { I18nLabel } from "../../../contexts/i18n.js";
+"use client";
+import { I18nLabel, useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOC, TOCProvider } from "./slots/toc.js";
 import { Footer } from "./slots/footer.js";
 import { Breadcrumb } from "./slots/breadcrumb.js";
-import { DocsPage, PageLastUpdate, useDocsPage } from "./client.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Container } from "./slots/container.js";
+import { createContext, use, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Edit } from "lucide-react";
 //#region src/layouts/flux/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/flux/page`).");
+	return context;
+}
+function DocsPage({ tableOfContent: { enabled: tocEnabled, single, ...tocProps } = {}, breadcrumb: { enabled: breadcrumbEnabled = true, ...breadcrumb } = {}, footer: { enabled: footerEnabled = true, ...footer } = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+	tocEnabled ??= Boolean(toc.length > 0 || tocProps.header || tocProps.footer);
+	const slots = {
+		breadcrumb: defaultSlots.breadcrumb ?? Breadcrumb,
+		footer: defaultSlots.footer ?? Footer,
+		container: defaultSlots.container ?? Container,
+		toc: defaultSlots.toc ?? {
+			provider: TOCProvider,
+			main: TOC
+		}
+	};
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: {
+			props: { full },
+			slots
+		},
+		children: /* @__PURE__ */ jsxs(slots.toc.provider, {
+			single,
+			toc: tocEnabled ? toc : [],
+			children: [tocEnabled && (tocProps.component ?? /* @__PURE__ */ jsx(slots.toc.main, { ...tocProps })), /* @__PURE__ */ jsxs(slots.container, {
+				...containerProps,
+				children: [
+					breadcrumbEnabled && (breadcrumb.component ?? /* @__PURE__ */ jsx(slots.breadcrumb, { ...breadcrumb })),
+					children,
+					footerEnabled && (footer.component ?? /* @__PURE__ */ jsx(slots.footer, { ...footer }))
+				]
+			})]
+		})
+	});
+}
 function EditOnGitHub(props) {
 	return /* @__PURE__ */ jsx("a", {
 		target: "_blank",
@@ -15,10 +54,9 @@ function EditOnGitHub(props) {
 		...props,
 		className: cn(buttonVariants({
 			color: "secondary",
-			size: "sm",
-			className: "gap-1.5 not-prose"
-		}), props.className),
-		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(I18nLabel, { label: "editOnGithub" })] })
+			size: "sm"
+		}), "gap-1.5 not-prose", props.className),
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(I18nLabel, { label: "editOnGithub" })] })
 	});
 }
 /**
@@ -46,5 +84,21 @@ function DocsTitle({ children, className, ...props }) {
 		children
 	});
 }
+function PageLastUpdate({ date: value, ...props }) {
+	const { text } = useI18n();
+	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: [
+			text.lastUpdate,
+			" ",
+			date
+		]
+	});
+}
 //#endregion
 export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

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

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../../../../utils/cn.js";
 import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
 import { Fragment, useMemo } from "react";

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

@@ -1,5 +1,6 @@
+"use client";
 import { cn } from "../../../../utils/cn.js";
-import { useDocsPage } from "../client.js";
+import { useDocsPage } from "../index.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/flux/page/slots/container.tsx
 function Container(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
 import { isActive } from "../../../../utils/urls.js";