@vx-oss/docs-react 1.0.3

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

@@ -0,0 +1,239 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { LinkItem } from "../../shared/client.js";
+import "../../shared/index.js";
+import { useIsScrollTop } from "../../../utils/use-is-scroll-top.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "../../../components/ui/navigation-menu.js";
+import { useHomeLayout } from "../index.js";
+import Link from "@vx-oss/docs-core/link";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Languages } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/home/slots/header.tsx
+const navItemVariants = cva("[&_svg]:size-4", {
+	variants: { variant: {
+		main: "inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary",
+		button: buttonVariants({
+			color: "secondary",
+			className: "gap-1.5"
+		}),
+		icon: buttonVariants({
+			color: "ghost",
+			size: "icon"
+		})
+	} },
+	defaultVariants: { variant: "main" }
+});
+function Header(props) {
+	const { navItems, menuItems, slots, props: { nav } } = useHomeLayout();
+	const t = useTranslations({ note: "mobile menu" });
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsxs(HeaderNavigationMenu, {
+		transparentMode: nav?.transparentMode,
+		...props,
+		children: [
+			slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-semibold" }),
+			nav?.children,
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-row items-center gap-2 px-6 max-sm:hidden",
+				children: navItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(NavigationMenuLinkItem, {
+					item,
+					className: "text-sm"
+				}, i))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden",
+				children: [
+					slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.full, {
+						hideIfDisabled: true,
+						className: "w-full rounded-full ps-2.5 max-w-[240px]"
+					}),
+					slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {}),
+					slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-5" }) }),
+					/* @__PURE__ */ jsx("ul", {
+						className: "flex flex-row gap-2 items-center empty:hidden",
+						children: navItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(NavigationMenuLinkItem, {
+							className: cn(item.type === "icon" && "-mx-1 first:ms-0 last:me-0"),
+							item
+						}, i))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden",
+				children: [slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+					hideIfDisabled: true,
+					className: "p-2"
+				}), /* @__PURE__ */ jsx(NavigationMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
+						"aria-label": t("Toggle Menu", { note: "aria-label" }),
+						className: cn(buttonVariants({
+							size: "icon",
+							color: "ghost",
+							className: "group [&_svg]:size-5.5"
+						})),
+						onPointerMove: nav?.enableHoverToOpen ? void 0 : (e) => e.preventDefault(),
+						children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" })
+					}), /* @__PURE__ */ jsxs(NavigationMenuContent, {
+						className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end",
+						children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+							item,
+							className: "sm:hidden"
+						}, i)), /* @__PURE__ */ jsxs("div", {
+							className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
+							children: [
+								menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+									item,
+									className: cn(item.type === "icon" && "-mx-1 first:ms-0")
+								}, i)),
+								/* @__PURE__ */ jsx("div", {
+									role: "separator",
+									className: "flex-1"
+								}),
+								slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [
+									/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
+									slots.languageSelect.text && /* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+									/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
+								] }),
+								slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {})
+							]
+						})]
+					})] })
+				})]
+			})
+		]
+	});
+}
+function isSecondary(item) {
+	if ("secondary" in item && item.secondary != null) return item.secondary;
+	return item.type === "icon";
+}
+function HeaderNavigationMenu({ transparentMode = "none", ...props }) {
+	const [value, setValue] = useState("");
+	const isTop = useIsScrollTop({ enabled: transparentMode === "top" }) ?? true;
+	const isTransparent = transparentMode === "top" ? isTop : transparentMode === "always";
+	return /* @__PURE__ */ jsx(NavigationMenu, {
+		value,
+		onValueChange: setValue,
+		asChild: true,
+		children: /* @__PURE__ */ jsx("header", {
+			id: "nd-nav",
+			...props,
+			className: cn("sticky h-14 top-0 z-40", props.className),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width)", value.length > 0 && "max-lg:shadow-lg max-lg:rounded-b-2xl", (!isTransparent || value.length > 0) && "bg-fd-background/80"),
+				children: [/* @__PURE__ */ jsx(NavigationMenuList, {
+					className: "flex h-14 w-full items-center px-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx("nav", { children: props.children })
+				}), /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
+			})
+		})
+	});
+}
+function NavigationMenuLinkItem({ item, ...props }) {
+	if (item.type === "custom") return item.children;
+	if (item.type === "menu") {
+		const children = item.items.map((child, j) => {
+			if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment$1, { children: child.children }, j);
+			const { banner = child.icon ? /* @__PURE__ */ jsx("div", {
+				className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4",
+				children: child.icon
+			}) : null, ...rest } = child.menu ?? {};
+			return /* @__PURE__ */ jsx(NavigationMenuLink, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link, {
+					href: child.url,
+					external: child.external,
+					...rest,
+					className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", rest.className),
+					children: rest.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+						banner,
+						/* @__PURE__ */ jsx("p", {
+							className: "text-base font-medium",
+							children: child.text
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-fd-muted-foreground empty:hidden",
+							children: child.description
+						})
+					] })
+				})
+			}, `${j}-${child.url}`);
+		});
+		return /* @__PURE__ */ jsxs(NavigationMenuItem, {
+			...props,
+			children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
+				className: cn(navItemVariants(), "rounded-md"),
+				children: item.url ? /* @__PURE__ */ jsx(Link, {
+					href: item.url,
+					external: item.external,
+					children: item.text
+				}) : item.text
+			}), /* @__PURE__ */ jsx(NavigationMenuContent, {
+				className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3",
+				children
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(NavigationMenuItem, {
+		...props,
+		children: /* @__PURE__ */ jsx(NavigationMenuLink, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(LinkItem, {
+				item,
+				"aria-label": item.type === "icon" ? item.label : void 0,
+				className: cn(navItemVariants({ variant: item.type })),
+				children: item.type === "icon" ? item.icon : item.text
+			})
+		})
+	});
+}
+function MobileNavigationMenuLinkItem({ item, ...props }) {
+	if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
+		className: cn("grid", props.className),
+		children: item.children
+	});
+	if (item.type === "menu") {
+		const header = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon, item.text] });
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("mb-4 flex flex-col", props.className),
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "mb-1 text-sm text-fd-muted-foreground",
+				children: item.url ? /* @__PURE__ */ jsx(NavigationMenuLink, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						href: item.url,
+						external: item.external,
+						children: header
+					})
+				}) : header
+			}), item.items.map((child, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, { item: child }, i))]
+		});
+	}
+	return /* @__PURE__ */ jsx(NavigationMenuLink, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(LinkItem, {
+			item,
+			className: cn({
+				main: "inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4",
+				icon: buttonVariants({
+					size: "icon",
+					color: "ghost"
+				}),
+				button: buttonVariants({
+					color: "secondary",
+					className: "gap-1.5 [&_svg]:size-4"
+				})
+			}[item.type ?? "main"], props.className),
+			"aria-label": item.type === "icon" ? item.label : void 0,
+			children: [item.icon, item.type === "icon" ? void 0 : item.text]
+		})
+	});
+}
+//#endregion
+export { Header, navItemVariants };

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

@@ -0,0 +1,35 @@
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { LayoutTab, LinkItemType } from "../shared/index.js";
+import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
+import { DocsLayoutProps } from "./index.js";
+import { ComponentProps, FC } from "react";
+//#region src/layouts/notebook/client.d.ts
+interface DocsSlots extends BaseSlots {
+  container: FC<ComponentProps<'div'>>;
+  header: FC<ComponentProps<'header'>>;
+  sidebar: {
+    provider: FC<SidebarProviderProps>;
+    root: FC<SidebarProps>;
+    trigger: FC<ComponentProps<'button'>>;
+    collapseTrigger: FC<ComponentProps<'button'>>;
+    useSidebar: () => {
+      collapsed: boolean;
+      open: boolean;
+      setOpen: (V: boolean) => void;
+    };
+  };
+}
+interface SlotsProps extends BaseSlotsProps<DocsLayoutProps> {
+  sidebar: SidebarProps;
+  tabMode: NonNullable<DocsLayoutProps['tabMode']>;
+  tabs: LayoutTab[];
+}
+declare function useNotebookLayout(): {
+  props: SlotsProps;
+  isNavTransparent: boolean;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: DocsSlots;
+};
+//#endregion
+export { DocsSlots, useNotebookLayout };

package/dist/layouts/notebook/client.js

@@ -0,0 +1,69 @@
+"use client";
+import { TreeContextProvider } from "../../contexts/tree.js";
+import { baseSlots } from "../shared/client.js";
+import { useLinkItems } from "../shared/index.js";
+import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
+import { Container } from "./slots/container.js";
+import { Sidebar, SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
+import { Header } from "./slots/header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+//#region src/layouts/notebook/client.tsx
+const { useBaseSlots } = baseSlots({ useProps() {
+	return useNotebookLayout().props;
+} });
+const LayoutContext = createContext(null);
+function useNotebookLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`@vx-oss/docs-react/layouts/notebook/page`) under <DocsLayout /> (`@vx-oss/docs-react/layouts/notebook`).");
+	return context;
+}
+function LayoutBody(props) {
+	const { nav: { enabled: navEnabled = true, transparentMode: navTransparentMode = "none" } = {}, sidebar: { defaultOpenLevel, prefetch, ...sidebarProps } = {}, slots: defaultSlots, tabMode = "sidebar", tabs, tree, containerProps, children } = props;
+	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
+	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
+	const { baseSlots, baseProps } = useBaseSlots(props);
+	const linkItems = useLinkItems(props);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots?.header ?? Header,
+		container: defaultSlots?.container ?? Container,
+		sidebar: defaultSlots?.sidebar ?? {
+			provider: SidebarProvider,
+			root: Sidebar,
+			trigger: SidebarTrigger,
+			collapseTrigger: SidebarCollapseTrigger,
+			useSidebar
+		}
+	};
+	return /* @__PURE__ */ jsx(TreeContextProvider, {
+		tree,
+		children: /* @__PURE__ */ jsx(LayoutContext, {
+			value: {
+				props: {
+					tabs,
+					tabMode,
+					sidebar: sidebarProps,
+					...baseProps
+				},
+				isNavTransparent,
+				slots,
+				...linkItems
+			},
+			children: /* @__PURE__ */ jsx(slots.sidebar.provider, {
+				defaultOpenLevel,
+				prefetch,
+				children: /* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [
+						navEnabled && /* @__PURE__ */ jsx(slots.header, {}),
+						/* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }),
+						children
+					]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { LayoutBody, useNotebookLayout };

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

@@ -0,0 +1,26 @@
+import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, NavOptions } from "../shared/index.js";
+import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
+import { DocsSlots, useNotebookLayout } from "./client.js";
+import { HTMLAttributes } from "react";
+import * as PageTree from "@vx-oss/docs-core/page-tree";
+//#region src/layouts/notebook/index.d.ts
+interface DocsLayoutProps extends Omit<BaseLayoutProps, 'nav'> {
+  tree: PageTree.Root;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+  tabMode?: 'sidebar' | 'navbar';
+  sidebar?: SidebarOptions;
+  nav?: NavOptions & {
+    mode?: 'top' | 'auto';
+  };
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+  slots?: Partial<DocsSlots>;
+}
+interface SidebarOptions extends SidebarProps, SidebarProviderProps {
+  /**
+   * @deprecated use layout-level `tabs` option instead.
+   */
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+}
+declare function DocsLayout({ tree, tabMode, sidebar: { tabs: defaultTabs, ...sidebarProps }, children, tabs, ...props }: DocsLayoutProps): import("react").JSX.Element;
+//#endregion
+export { DocsLayout, DocsLayoutProps, type DocsSlots, SidebarOptions, useNotebookLayout };

package/dist/layouts/notebook/index.js

@@ -0,0 +1,23 @@
+import { getLayoutTabs } from "../shared/index.js";
+import { LayoutBody, useNotebookLayout } from "./client.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/layouts/notebook/index.tsx
+function DocsLayout({ tree, tabMode = "sidebar", sidebar: { tabs: defaultTabs, ...sidebarProps } = {}, children, tabs = defaultTabs, ...props }) {
+	const resolvedTabs = useMemo(() => {
+		if (Array.isArray(tabs)) return tabs;
+		if (typeof tabs === "object") return getLayoutTabs(tree, tabs);
+		if (tabs !== false) return getLayoutTabs(tree);
+		return [];
+	}, [tabs, tree]);
+	return /* @__PURE__ */ jsx(LayoutBody, {
+		tree,
+		tabs: resolvedTabs,
+		tabMode,
+		sidebar: sidebarProps,
+		...props,
+		children
+	});
+}
+//#endregion
+export { DocsLayout, useNotebookLayout };

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

@@ -0,0 +1,76 @@
+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 { TOCItemType } from "@vx-oss/docs-core/toc";
+//#region src/layouts/notebook/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean | undefined;
+  slots?: Partial<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;
+}
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.toc` instead.
+   */
+  component?: ReactNode;
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.tocPopover` instead.
+   */
+  component?: ReactNode;
+};
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+    popover: FC<TOCPopoverProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+declare function useDocsPage(): {
+  full: NonNullable<DocsPageProps["full"]>;
+  slots: DocsPageSlots;
+};
+declare function DocsPage({ full, tableOfContent: { enabled: tocEnabled, single, ...tocProps }, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps }, breadcrumb: { enabled: breadcrumbEnabled, ...breadcrumb }, footer: { enabled: footerEnabled, ...footer }, toc, slots: defaultSlots, children, ...containerProps }: 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 { 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

@@ -0,0 +1,124 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+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 { 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/notebook/page/index.tsx
+var page_exports = /* @__PURE__ */ __exportAll({
+	DocsBody: () => DocsBody,
+	DocsDescription: () => DocsDescription,
+	DocsPage: () => DocsPage,
+	DocsTitle: () => DocsTitle,
+	EditOnGitHub: () => EditOnGitHub,
+	MarkdownCopyButton: () => MarkdownCopyButton,
+	PageBreadcrumb: () => Breadcrumb,
+	PageFooter: () => Footer,
+	PageLastUpdate: () => PageLastUpdate,
+	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 /> (`@vx-oss/docs-react/layouts/notebook/page`).");
+	return context;
+}
+function DocsPage({ full = false, tableOfContent: { enabled: tocEnabled = !full, single, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, breadcrumb: { enabled: breadcrumbEnabled = true, ...breadcrumb } = {}, footer: { enabled: footerEnabled = true, ...footer } = {}, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+	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: {
+			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) {
+	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, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, page_exports, useDocsPage };

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import { BreadcrumbOptions } from "@vx-oss/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): import("react").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 Link from "@vx-oss/docs-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 "@vx-oss/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$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/notebook/page/slots/container.d.ts

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