@hanzo/docs-base-ui 16.5.3 → 16.7.5

package/dist/layouts/notebook/index.js

@@ -1,218 +1,22 @@
-import { cn } from "../../utils/cn.js";
-import { buttonVariants } from "../../components/ui/button.js";
-import { TreeContextProvider } from "../../contexts/tree.js";
-import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
-import { LinkItem } from "../../utils/link-item.js";
-import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem } from "./client.js";
-import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
-import { renderTitleNav, useLinkItems } from "../shared/index.js";
-import { LanguageToggle } from "../shared/language-toggle.js";
-import { ThemeToggle } from "../shared/theme-toggle.js";
-import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
-import { Sidebar as Sidebar$1, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport } from "./sidebar.js";
+import { getLayoutTabs } from "../shared/index.js";
+import { LayoutBody, useNotebookLayout } from "./client.js";
 import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Languages, Sidebar, X } from "lucide-react";
-
+import { jsx } from "react/jsx-runtime";
 //#region src/layouts/notebook/index.tsx
-function DocsLayout(props) {
-	const { tabMode = "sidebar", nav = {}, sidebar: { tabs: tabOptions, defaultOpenLevel, prefetch, ...sidebarProps } = {}, i18n = false, themeSwitch = {}, tree } = props;
-	const navMode = nav.mode ?? "auto";
-	const { menuItems, navItems } = useLinkItems(props);
-	const tabs = useMemo(() => {
-		if (Array.isArray(tabOptions)) return tabOptions;
-		if (typeof tabOptions === "object") return getSidebarTabs(tree, tabOptions);
-		if (tabOptions !== false) return getSidebarTabs(tree);
-		return [];
-	}, [tabOptions, tree]);
-	function sidebar() {
-		const { banner, footer, components, collapsible = true, ...rest } = sidebarProps;
-		const iconLinks = menuItems.filter((item) => item.type === "icon");
-		const Header = typeof banner === "function" ? banner : ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
-			className: cn("flex flex-col gap-3 p-4 pb-2 empty:hidden", className),
-			...props,
-			children: [props.children, banner]
-		});
-		const Footer = typeof footer === "function" ? footer : ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
-			className: cn("hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2", iconLinks.length > 0 && "max-lg:flex", className),
-			...props,
-			children: [props.children, footer]
-		});
-		const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.filter((item) => item.type !== "icon").map((item, i, arr) => /* @__PURE__ */ jsx(SidebarLinkItem, {
-			item,
-			className: cn("lg:hidden", i === arr.length - 1 && "mb-4")
-		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
-			...rest,
-			children: [
-				/* @__PURE__ */ jsxs(Header, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
-					className: "flex justify-between",
-					children: [renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-medium" }), collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-						className: cn(buttonVariants({
-							color: "ghost",
-							size: "icon-sm",
-							className: "mt-px mb-auto text-fd-muted-foreground"
-						})),
-						children: /* @__PURE__ */ jsx(Sidebar, {})
-					})]
-				}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
-					options: tabs,
-					className: cn(tabMode === "navbar" && "lg:hidden")
-				})] }),
-				viewport,
-				/* @__PURE__ */ jsx(Footer, { children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-					item,
-					className: cn(buttonVariants({
-						size: "icon-sm",
-						color: "ghost",
-						className: "lg:hidden"
-					})),
-					"aria-label": item.label,
-					children: item.icon
-				}, i)) })
-			]
-		}), /* @__PURE__ */ jsxs(SidebarDrawer, {
-			...rest,
-			children: [
-				/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx(SidebarTrigger, {
-					className: cn(buttonVariants({
-						size: "icon-sm",
-						color: "ghost",
-						className: "ms-auto text-fd-muted-foreground"
-					})),
-					children: /* @__PURE__ */ jsx(X, {})
-				}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs })] }),
-				viewport,
-				/* @__PURE__ */ jsxs(Footer, {
-					className: cn("hidden flex-row items-center justify-end", (i18n || themeSwitch.enabled !== false) && "flex", iconLinks.length > 0 && "max-lg:flex"),
-					children: [
-						iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-							item,
-							className: cn(buttonVariants({
-								size: "icon-sm",
-								color: "ghost"
-							}), "text-fd-muted-foreground lg:hidden", i === iconLinks.length - 1 && "me-auto"),
-							"aria-label": item.label,
-							children: item.icon
-						}, i)),
-						i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) }),
-						themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch.mode ?? "light-dark-system" }))
-					]
-				})
-			]
-		})] });
-	}
-	return /* @__PURE__ */ jsx(TreeContextProvider, {
+function DocsLayout({ tree, tabMode = "sidebar", sidebar: { tabs: defaultTabs, ...sidebarProps } = {}, children, tabs = defaultTabs, ...props }) {
+	return /* @__PURE__ */ jsx(LayoutBody, {
 		tree,
-		children: /* @__PURE__ */ jsx(LayoutContextProvider, {
-			navMode: nav.mode ?? "auto",
-			tabMode,
-			navTransparentMode: nav.transparentMode,
-			children: /* @__PURE__ */ jsx(Sidebar$1, {
-				defaultOpenLevel,
-				prefetch,
-				children: /* @__PURE__ */ jsxs(LayoutBody, {
-					...props.containerProps,
-					children: [
-						sidebar(),
-						/* @__PURE__ */ jsx(DocsNavbar, {
-							...props,
-							links: navItems,
-							tabs
-						}),
-						props.children
-					]
-				})
-			})
-		})
+		tabs: useMemo(() => {
+			if (Array.isArray(tabs)) return tabs;
+			if (typeof tabs === "object") return getLayoutTabs(tree, tabs);
+			if (tabs !== false) return getLayoutTabs(tree);
+			return [];
+		}, [tabs, tree]),
+		tabMode,
+		sidebar: sidebarProps,
+		...props,
+		children
 	});
 }
-function DocsNavbar({ links, tabs, tabMode = "sidebar", sidebar: { collapsible: sidebarCollapsible = true } = {}, searchToggle = {}, themeSwitch = {}, nav = {}, i18n }) {
-	const navMode = nav.mode ?? "auto";
-	const showLayoutTabs = tabMode === "navbar" && tabs.length > 0;
-	return /* @__PURE__ */ jsxs(LayoutHeader, {
-		id: "nd-subnav",
-		className: cn("sticky [grid-area:header] flex flex-col top-(--fd-docs-row-1) z-10 backdrop-blur-sm transition-colors data-[transparent=false]:bg-fd-background/80 layout:[--fd-header-height:--spacing(14)]", showLayoutTabs && "lg:layout:[--fd-header-height:--spacing(24)]"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			"data-header-body": "",
-			className: "flex border-b px-4 gap-2 h-14 md:px-6",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: cn("items-center", navMode === "top" && "flex flex-1", navMode === "auto" && "hidden has-data-[collapsed=true]:md:flex max-md:flex"),
-					children: [
-						sidebarCollapsible && navMode === "auto" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-							className: cn(buttonVariants({
-								color: "ghost",
-								size: "icon-sm"
-							}), "text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
-							children: /* @__PURE__ */ jsx(Sidebar, {})
-						}),
-						renderTitleNav(nav, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") }),
-						nav.children
-					]
-				}),
-				searchToggle.enabled !== false && (searchToggle.components?.lg ? /* @__PURE__ */ jsx("div", {
-					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "rounded-xl max-w-sm" : "max-w-[240px]"),
-					children: searchToggle.components.lg
-				}) : /* @__PURE__ */ jsx(LargeSearchToggle, {
-					hideIfDisabled: true,
-					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "rounded-xl max-w-sm ps-2.5" : "max-w-[240px]")
-				})),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 items-center justify-end md:gap-2",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "flex items-center gap-6 empty:hidden max-lg:hidden",
-							children: links.filter((item) => item.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(NavbarLinkItem, { item }, i))
-						}),
-						links.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-							item,
-							className: cn(buttonVariants({
-								size: "icon-sm",
-								color: "ghost"
-							}), "text-fd-muted-foreground max-lg:hidden"),
-							"aria-label": item.label,
-							children: item.icon
-						}, i)),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center md:hidden",
-							children: [searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
-								hideIfDisabled: true,
-								className: "p-2"
-							})), /* @__PURE__ */ jsx(SidebarTrigger, {
-								className: cn(buttonVariants({
-									color: "ghost",
-									size: "icon-sm",
-									className: "p-2 -me-1.5"
-								})),
-								children: /* @__PURE__ */ jsx(Sidebar, {})
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 max-md:hidden",
-							children: [
-								i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) }),
-								themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch.mode ?? "light-dark-system" })),
-								sidebarCollapsible && navMode === "top" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-									className: cn(buttonVariants({
-										color: "secondary",
-										size: "icon-sm"
-									}), "text-fd-muted-foreground rounded-full -me-1.5"),
-									children: /* @__PURE__ */ jsx(Sidebar, {})
-								})
-							]
-						})
-					]
-				})
-			]
-		}), showLayoutTabs && /* @__PURE__ */ jsx(LayoutHeaderTabs, {
-			"data-header-tabs": "",
-			className: "overflow-x-auto border-b px-6 h-10 max-lg:hidden",
-			options: tabs
-		})]
-	});
-}
-
 //#endregion
-export { DocsLayout };
-//# sourceMappingURL=index.js.map
+export { DocsLayout, useNotebookLayout };

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

@@ -1,86 +1,93 @@
-import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.js";
-import { ComponentProps, ReactNode } from "react";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
+import { Footer, FooterProps } from "./slots/footer.js";
+import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
+import { ComponentProps, FC, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { AnchorProviderProps, TOCItemType } from "@hanzo/docs-core/toc";
+import { TOCItemType } from "@hanzo/docs-core/toc";
 
 //#region src/layouts/notebook/page/index.d.ts
-interface BreadcrumbOptions extends BreadcrumbProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface FooterOptions extends FooterProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface DocsPageProps {
+interface DocsPageProps extends ComponentProps<'article'> {
   toc?: TOCItemType[];
-  tableOfContent?: Partial<TableOfContentOptions>;
-  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
   /**
    * Extend the page to fill all available space
    *
    * @defaultValue false
    */
   full?: boolean;
+  slots?: Partial<DocsPageSlots>;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+  tableOfContentPopover?: TableOfContentPopoverOptions;
+}
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled?: 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.
+   * @deprecated use `slots.breadcrumb` instead.
    */
-  className?: string;
+  component?: ReactNode;
 }
-type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
+interface FooterOptions extends FooterProps {
+  enabled?: boolean;
   /**
-   * Custom content in TOC container, before the main TOC
+   * @deprecated use `slots.footer` instead.
    */
-  header?: ReactNode;
+  component?: ReactNode;
+}
+interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+  enabled?: boolean;
   /**
-   * Custom content in TOC container, after the main TOC
+   * @deprecated use `slots.toc` instead.
    */
-  footer?: ReactNode;
-  enabled: boolean;
-  component: ReactNode;
+  component?: ReactNode;
+}
+interface TableOfContentPopoverOptions extends TOCPopoverProps {
+  enabled?: boolean;
   /**
-   * @defaultValue 'normal'
+   * @deprecated use `slots.tocPopover` instead.
    */
-  style?: 'normal' | 'clerk';
+  component?: ReactNode;
+}
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+    popover: FC<TOCPopoverProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+type PageSlotsProps = Pick<DocsPageProps, 'full'>;
+declare function useDocsPage(): {
+  props: PageSlotsProps;
+  slots: DocsPageSlots;
 };
-type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
 declare function DocsPage({
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
+  },
+  tableOfContentPopover: {
+    enabled: tocPopoverEnabled,
+    ...tocPopoverProps
+  },
   breadcrumb: {
     enabled: breadcrumbEnabled,
-    component: breadcrumb,
-    ...breadcrumbProps
+    ...breadcrumb
   },
   footer: {
     enabled: footerEnabled,
-    component: footerReplace,
-    ...footerProps
+    ...footer
   },
   full,
-  tableOfContentPopover: {
-    enabled: tocPopoverEnabled,
-    component: tocPopover,
-    ...tocPopoverOptions
-  },
-  tableOfContent: {
-    enabled: tocEnabled,
-    component: tocReplace,
-    ...tocOptions
-  },
   toc,
+  slots: defaultSlots,
   children,
-  className
-}: DocsPageProps): ReactNode;
+  ...containerProps
+}: DocsPageProps): react_jsx_runtime0.JSX.Element;
 declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
@@ -100,6 +107,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 { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate };
-//# sourceMappingURL=index.d.ts.map
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

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

@@ -1,14 +1,16 @@
+"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 { TOCProvider, TOCScrollArea } from "../../../components/toc/index.js";
-import { TOCItems } from "../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../components/toc/clerk.js";
-import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from "./client.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Edit, Text } from "lucide-react";
-
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOC, TOCPopover, TOCProvider } from "./slots/toc.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 { Edit } from "lucide-react";
 //#region src/layouts/notebook/page/index.tsx
 var page_exports = /* @__PURE__ */ __exportAll({
 	DocsBody: () => DocsBody,
@@ -16,49 +18,54 @@ var page_exports = /* @__PURE__ */ __exportAll({
 	DocsPage: () => DocsPage,
 	DocsTitle: () => DocsTitle,
 	EditOnGitHub: () => EditOnGitHub,
-	PageBreadcrumb: () => PageBreadcrumb,
-	PageLastUpdate: () => PageLastUpdate
+	MarkdownCopyButton: () => MarkdownCopyButton,
+	PageBreadcrumb: () => Breadcrumb,
+	PageFooter: () => Footer,
+	PageLastUpdate: () => PageLastUpdate,
+	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 [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14 *:max-w-[900px]", full && "*:max-w-[1285px]", 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-3) [grid-area:toc] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-3))] flex flex-col w-(--fd-toc-width) pt-12 pe-4 pb-2 xl:layout:[--fd-toc-width:268px] max-xl:hidden",
+const PageContext = createContext(null);
+function useDocsPage() {
+	const context = use(PageContext);
+	if (!context) throw new Error("Please use page components under <DocsPage /> (`@hanzo/docs-ui/layouts/notebook/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: [
-				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" })]
+				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 }))
+					]
 				}),
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				tocOptions.footer
+				tocEnabled && (tocProps.component ?? /* @__PURE__ */ jsx(slots.toc.main, { ...tocProps }))
 			]
-		}))
-	] }));
+		})
+	});
 }
 function EditOnGitHub(props) {
 	return /* @__PURE__ */ jsx("a", {
@@ -67,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" })] })
 	});
 }
 /**
@@ -98,7 +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, PageBreadcrumb, PageLastUpdate, 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/notebook/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 "@hanzo/docs-core/breadcrumb";
+
+//#region src/layouts/notebook/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/notebook/page/slots/breadcrumb.js

@@ -0,0 +1,44 @@
+"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 Link from "@hanzo/docs-core/link";
+import { ChevronRight } from "lucide-react";
+import { getBreadcrumbItemsFromPath } from "@hanzo/docs-core/breadcrumb";
+//#region src/layouts/notebook/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/notebook/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/notebook/page/slots/container.d.ts
+declare function Container(props: ComponentProps<'article'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Container };

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

@@ -0,0 +1,17 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useDocsPage } from "../index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/notebook/page/slots/container.tsx
+function Container(props) {
+	const { props: { full } } = useDocsPage();
+	return /* @__PURE__ */ jsx("article", {
+		id: "nd-page",
+		"data-full": full,
+		...props,
+		className: cn("flex flex-col [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14 *:max-w-[900px]", full && "*:max-w-[1285px]", props.className),
+		children: props.children
+	});
+}
+//#endregion
+export { Container };