@fumadocs/base-ui 16.6.16 → 16.7.0

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

@@ -1,48 +1,98 @@
-import { ComponentProps } from "react";
+import { TOCProviderProps } from "../../../components/toc/index.js";
+import { TOCProps } from "./slots/toc.js";
+import { TOCPopoverProps } from "./slots/toc-popover.js";
+import { FooterProps } from "./slots/footer.js";
+import { BreadcrumbProps } from "./slots/breadcrumb.js";
+import { ComponentProps, FC, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
-import * as PageTree from "fumadocs-core/page-tree";
+import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/docs/page/client.d.ts
-declare function PageTOCPopover({
-  className,
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean;
+  slots?: DocsPageSlots;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+  tableOfContentPopover?: TableOfContentPopoverOptions;
+}
+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 TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.toc` instead.
+   */
+  component?: ReactNode;
+}
+interface TableOfContentPopoverOptions extends TOCPopoverProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.tocPopover` instead.
+   */
+  component?: ReactNode;
+}
+interface DocsPageSlots {
+  toc?: FC<TOCProps>;
+  container?: FC<ComponentProps<'article'>>;
+  tocPopover?: FC<TOCPopoverProps>;
+  tocProvider?: FC<TOCProviderProps>;
+  footer?: FC<FooterProps>;
+  breadcrumb?: FC<BreadcrumbProps>;
+}
+interface PageSlotsProps extends Pick<DocsPageProps, 'full' | 'breadcrumb' | 'footer'> {
+  tableOfContent: TOCProps & {
+    component?: ReactNode;
+  };
+  tableOfContentPopover: TOCPopoverProps & {
+    component?: ReactNode;
+  };
+}
+declare function useDocsPage(): {
+  props: PageSlotsProps;
+  slots: DocsPageSlots;
+};
+declare function DocsPage({
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
+  },
+  tableOfContentPopover: {
+    enabled: tocPopoverEnabled,
+    ...tocPopoverProps
+  },
+  footer,
+  breadcrumb,
+  full,
+  toc,
+  slots: defaultSlots,
   children,
-  ...rest
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-declare function PageTOCPopoverTrigger({
-  className,
-  ...props
-}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
-declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+  ...containerProps
+}: DocsPageProps): react_jsx_runtime0.JSX.Element;
 declare function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
 }): react_jsx_runtime0.JSX.Element;
-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 PageFooter({
-  items,
-  children,
-  className,
-  ...props
-}: FooterProps): react_jsx_runtime0.JSX.Element;
-type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
-declare function PageBreadcrumb({
-  includeRoot,
-  includeSeparator,
-  includePage,
-  ...props
-}: BreadcrumbProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { BreadcrumbProps, FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
-//# sourceMappingURL=client.d.ts.map
+export { DocsPage, DocsPageProps, DocsPageSlots, PageLastUpdate, useDocsPage };

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

@@ -1,130 +1,93 @@
 "use client";
 import { useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
-import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
-import { isActive } from "../../../utils/urls.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
-import { useTOCItems } from "../../../components/toc/index.js";
-import { useDocsLayout } from "../client.js";
-import { useFooterItems } from "../../../utils/use-footer-items.js";
-import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { usePathname } from "fumadocs-core/framework";
+import { TOCProvider } from "../../../components/toc/index.js";
+import { TOC } from "./slots/toc.js";
+import { TOCPopover } from "./slots/toc-popover.js";
+import { Footer } from "./slots/footer.js";
+import { Breadcrumb } from "./slots/breadcrumb.js";
+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 Link from "fumadocs-core/link";
-import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
-import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
-import { useActiveAnchor } from "fumadocs-core/toc";
 //#region src/layouts/docs/page/client.tsx
-const TocPopoverContext = createContext(null);
-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);
+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 = false, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, footer = {}, breadcrumb = {}, 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: breadcrumb.enabled !== false ? defaultSlots.breadcrumb ?? InlineBreadcrumb : void 0,
+		footer: footer.enabled !== false ? defaultSlots.footer ?? InlineFooter : void 0,
+		toc: tocEnabled ? defaultSlots.toc ?? InlineTOC : void 0,
+		tocPopover: tocPopoverEnabled ? defaultSlots.tocPopover ?? InlineTOCPopover : void 0,
+		tocProvider: defaultSlots.tocProvider ?? TOCProvider,
+		container: defaultSlots.container ?? Container
+	};
+	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		slots.tocPopover && /* @__PURE__ */ jsx(slots.tocPopover, {}),
+		slots.container && /* @__PURE__ */ jsxs(slots.container, {
+			...containerProps,
+			children: [
+				slots.breadcrumb && /* @__PURE__ */ jsx(slots.breadcrumb, {}),
+				children,
+				slots.footer && /* @__PURE__ */ jsx(slots.footer, {})
+			]
+		}),
+		slots.toc && /* @__PURE__ */ jsx(slots.toc, {})
+	] });
+	if (slots.tocProvider) content = /* @__PURE__ */ jsx(slots.tocProvider, {
+		single,
+		toc: tocEnabled || tocPopoverEnabled ? toc : [],
+		children: content
 	});
-	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
-			})
-		})
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: {
+			props: {
+				full,
+				tableOfContent: tocProps,
+				tableOfContentPopover: tocPopoverProps,
+				footer,
+				breadcrumb
+			},
+			slots
+		},
+		children: content
 	});
 }
-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": "",
+function InlineBreadcrumb(props) {
+	const { component, enabled: _, ...rest } = useDocsPage().props.breadcrumb ?? {};
+	if (component) return component;
+	return /* @__PURE__ */ jsx(Breadcrumb, {
 		...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-all", 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-all", !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") })
-		]
+		...rest
 	});
 }
-function clamp(input, min, max) {
-	if (input < min) return min;
-	if (input > max) return max;
-	return input;
+function InlineFooter(props) {
+	const { component, enabled: _, ...rest } = useDocsPage().props.footer ?? {};
+	if (component) return component;
+	return /* @__PURE__ */ jsx(Footer, {
+		...props,
+		...rest
+	});
 }
-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 InlineTOCPopover(props) {
+	const { tableOfContentPopover } = useDocsPage().props;
+	if (tableOfContentPopover.component) return tableOfContentPopover.component;
+	return /* @__PURE__ */ jsx(TOCPopover, {
+		...props,
+		...tableOfContentPopover
 	});
 }
-function PageTOCPopoverContent(props) {
-	return /* @__PURE__ */ jsx(CollapsibleContent, {
-		"data-toc-popover-content": "",
+function InlineTOC(props) {
+	const { tableOfContent } = useDocsPage().props;
+	if (tableOfContent.component) return tableOfContent.component;
+	return /* @__PURE__ */ jsx(TOC, {
 		...props,
-		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
-		children: /* @__PURE__ */ jsx("div", { children: props.children })
+		...tableOfContent
 	});
 }
 function PageLastUpdate({ date: value, ...props }) {
@@ -143,83 +106,5 @@ function PageLastUpdate({ date: value, ...props }) {
 		]
 	});
 }
-function PageFooter({ 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$1, { 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 { text } = useI18n();
-	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 ? text.previousPage : text.nextPage)
-		})]
-	});
-}
-function PageBreadcrumb({ 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, { 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 { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
-
-//# sourceMappingURL=client.js.map
+export { DocsPage, PageLastUpdate, useDocsPage };

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

@@ -1,87 +1,11 @@
-import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.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 { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
-import { ComponentProps, ReactNode } from "react";
+import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { AnchorProviderProps, TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/docs/page/index.d.ts
-interface BreadcrumbOptions extends BreadcrumbProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface FooterOptions extends FooterProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface DocsPageProps {
-  toc?: TOCItemType[];
-  tableOfContent?: Partial<TableOfContentOptions>;
-  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
-  /**
-   * Extend the page to fill all available space
-   *
-   * @defaultValue false
-   */
-  full?: boolean;
-  /**
-   * Replace or disable breadcrumb
-   */
-  breadcrumb?: Partial<BreadcrumbOptions>;
-  /**
-   * Footer navigation, located under the page body.
-   *
-   * You can specify `footer.children` to add extra components under the footer.
-   */
-  footer?: Partial<FooterOptions>;
-  children?: ReactNode;
-  /**
-   * Apply class names to the `#nd-page` container.
-   */
-  className?: string;
-}
-type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
-  /**
-   * Custom content in TOC container, before the main TOC
-   */
-  header?: ReactNode;
-  /**
-   * Custom content in TOC container, after the main TOC
-   */
-  footer?: ReactNode;
-  enabled: boolean;
-  component: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-};
-type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
-declare function DocsPage({
-  breadcrumb: {
-    enabled: breadcrumbEnabled,
-    component: breadcrumb,
-    ...breadcrumbProps
-  },
-  footer: {
-    enabled: footerEnabled,
-    component: footerReplace,
-    ...footerProps
-  },
-  full,
-  tableOfContentPopover: {
-    enabled: tocPopoverEnabled,
-    component: tocPopover,
-    ...tocPopoverOptions
-  },
-  tableOfContent: {
-    enabled: tocEnabled,
-    component: tocReplace,
-    ...tocOptions
-  },
-  toc,
-  children,
-  className
-}: DocsPageProps): ReactNode;
 declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
@@ -102,5 +26,4 @@ declare function DocsTitle({
   ...props
 }: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageBreadcrumb, PageLastUpdate, ViewOptionsPopover };
-//# sourceMappingURL=index.d.ts.map
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, type DocsPageProps, type DocsPageSlots, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

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

@@ -2,13 +2,12 @@ import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
 import { I18nLabel } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
-import { TOCProvider, TOCScrollArea } from "../../../components/toc/index.js";
-import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from "./client.js";
-import { TOCItems } from "../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../components/toc/clerk.js";
+import { Footer } from "./slots/footer.js";
+import { Breadcrumb } from "./slots/breadcrumb.js";
+import { DocsPage, PageLastUpdate, useDocsPage } from "./client.js";
 import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Edit, Text } from "lucide-react";
+import { Edit } from "lucide-react";
 //#region src/layouts/docs/page/index.tsx
 var page_exports = /* @__PURE__ */ __exportAll({
 	DocsBody: () => DocsBody,
@@ -17,51 +16,12 @@ var page_exports = /* @__PURE__ */ __exportAll({
 	DocsTitle: () => DocsTitle,
 	EditOnGitHub: () => EditOnGitHub,
 	MarkdownCopyButton: () => MarkdownCopyButton,
-	PageBreadcrumb: () => PageBreadcrumb,
+	PageBreadcrumb: () => Breadcrumb,
+	PageFooter: () => Footer,
 	PageLastUpdate: () => PageLastUpdate,
-	ViewOptionsPopover: () => ViewOptionsPopover
+	ViewOptionsPopover: () => ViewOptionsPopover,
+	useDocsPage: () => useDocsPage
 });
-function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children, className }) {
-	tocEnabled ??= !full && (toc.length > 0 || tocOptions.footer !== void 0 || tocOptions.header !== void 0);
-	tocPopoverEnabled ??= toc.length > 0 || tocPopoverOptions.header !== void 0 || tocPopoverOptions.footer !== void 0;
-	let wrapper = (children) => children;
-	if (tocEnabled || tocPopoverEnabled) wrapper = (children) => /* @__PURE__ */ jsx(TOCProvider, {
-		single: tocOptions.single,
-		toc,
-		children
-	});
-	return wrapper(/* @__PURE__ */ jsxs(Fragment, { children: [
-		tocPopoverEnabled && (tocPopover ?? /* @__PURE__ */ jsxs(PageTOCPopover, { children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, {}), /* @__PURE__ */ jsxs(PageTOCPopoverContent, { children: [
-			tocPopoverOptions.header,
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-			tocPopoverOptions.footer
-		] })] })),
-		/* @__PURE__ */ jsxs("article", {
-			id: "nd-page",
-			"data-full": full,
-			className: cn("flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14", full ? "max-w-[1168px]" : "xl:layout:[--fd-toc-width:268px]", className),
-			children: [
-				breadcrumbEnabled && (breadcrumb ?? /* @__PURE__ */ jsx(PageBreadcrumb, { ...breadcrumbProps })),
-				children,
-				footerEnabled !== false && (footerReplace ?? /* @__PURE__ */ jsx(PageFooter, { ...footerProps }))
-			]
-		}),
-		tocEnabled && (tocReplace ?? /* @__PURE__ */ jsxs("div", {
-			id: "nd-toc",
-			className: "sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden",
-			children: [
-				tocOptions.header,
-				/* @__PURE__ */ jsxs("h3", {
-					id: "toc-title",
-					className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
-					children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
-				}),
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				tocOptions.footer
-			]
-		}))
-	] }));
-}
 function EditOnGitHub(props) {
 	return /* @__PURE__ */ jsx("a", {
 		target: "_blank",
@@ -101,6 +61,4 @@ function DocsTitle({ children, className, ...props }) {
 	});
 }
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageBreadcrumb, PageLastUpdate, ViewOptionsPopover, page_exports };
-
-//# sourceMappingURL=index.js.map
+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.d.ts

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

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

@@ -0,0 +1,42 @@
+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 { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
+//#region src/layouts/docs/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, { 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/docs/page/slots/container.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/docs/page/slots/container.d.ts
+declare function Container(props: ComponentProps<'article'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Container };