@hanzo/docs-base-ui 16.5.0 → 16.7.5

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

@@ -1,14 +1,16 @@
-import { __exportAll } from "../../../_virtual/rolldown_runtime.js";
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { I18nLabel, useI18n } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
-import { i18n_exports } from "../../../contexts/i18n.js";
-import { toc_exports } from "../../../components/toc/index.js";
-import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from "./client.js";
-import { default_exports } from "../../../components/toc/default.js";
-import { clerk_exports } from "../../../components/toc/clerk.js";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Edit, Text } from "lucide-react";
-
+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 { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.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/docs/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 = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children }) {
-	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$1) => children$1;
-	if (tocEnabled || tocPopoverEnabled) wrapper = (children$1) => /* @__PURE__ */ jsx(toc_exports.TOCProvider, {
-		single: tocOptions.single,
-		toc,
-		children: children$1
-	});
-	return wrapper(/* @__PURE__ */ jsxs(Fragment, { children: [
-		tocPopoverEnabled && (tocPopover ?? /* @__PURE__ */ jsxs(PageTOCPopover, { children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, {}), /* @__PURE__ */ jsxs(PageTOCPopoverContent, { children: [
-			tocPopoverOptions.header,
-			/* @__PURE__ */ jsx(toc_exports.TOCScrollArea, { children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(clerk_exports.TOCItems, {}) : /* @__PURE__ */ jsx(default_exports.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-[1200px]" : "xl:layout:[--fd-toc-width:268px]"),
-			children: [
-				breadcrumbEnabled && (breadcrumb ?? /* @__PURE__ */ jsx(PageBreadcrumb, { ...breadcrumbProps })),
-				children,
-				footer.enabled !== false && (footer.component ?? /* @__PURE__ */ jsx(PageFooter, { items: footer.items }))
-			]
-		}),
-		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",
+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/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: [
-				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(i18n_exports.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(toc_exports.TOCScrollArea, { children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(clerk_exports.TOCItems, {}) : /* @__PURE__ */ jsx(default_exports.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(i18n_exports.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/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 "@hanzo/docs-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,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/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 };

package/dist/layouts/docs/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/docs/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 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]", props.className),
+		children: props.children
+	});
+}
+//#endregion
+export { Container };

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

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

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

@@ -0,0 +1,56 @@
+"use client";
+import { useI18n } from "../../../../contexts/i18n.js";
+import { cn } from "../../../../utils/cn.js";
+import { isActive } from "../../../../utils/urls.js";
+import { useFooterItems } from "../../../../utils/use-footer-items.js";
+import { useMemo } from "react";
+import { usePathname } from "@hanzo/docs-core/framework";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/layouts/docs/page/slots/footer.tsx
+function Footer({ items, children, className, ...props }) {
+	const footerList = useFooterItems();
+	const pathname = usePathname();
+	const { previous, next } = useMemo(() => {
+		if (items) return items;
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
+		if (idx === -1) return {};
+		return {
+			previous: footerList[idx - 1],
+			next: footerList[idx + 1]
+		};
+	}, [
+		footerList,
+		items,
+		pathname
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$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)
+		})]
+	});
+}
+//#endregion
+export { Footer };

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

@@ -0,0 +1,55 @@
+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'>;
+  /**
+   * 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 TOC({
+  container,
+  header,
+  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, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -0,0 +1,166 @@
+"use client";
+import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
+import { cn } from "../../../../utils/cn.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
+import { default_exports } from "../../../../components/toc/default.js";
+import { clerk_exports } 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 { 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 = "normal" }) {
+	const items = useTOCItems();
+	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
+	return /* @__PURE__ */ jsxs("div", {
+		id: "nd-toc",
+		...container,
+		className: cn("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", container?.className),
+		children: [
+			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: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+			footer
+		]
+	});
+}
+const TocPopoverContext = createContext(null);
+function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
+	const items = useTOCItems();
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const { isNavTransparent } = useDocsLayout();
+	const { TOCItems, TOCItem, TOCEmpty } = style === "clerk" ? clerk_exports : default_exports;
+	const onClickOutside = useEffectEvent((e) => {
+		if (!open || !(e.target instanceof HTMLElement)) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	const onClickItem = () => {
+		setOpen(false);
+	};
+	useEffect(() => {
+		window.addEventListener("click", onClickOutside);
+		return () => {
+			window.removeEventListener("click", onClickOutside);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			...container,
+			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)]", container?.className),
+			children: /* @__PURE__ */ jsxs("header", {
+				ref,
+				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
+				children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+					...content,
+					children: [
+						header,
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+							item,
+							onClick: onClickItem
+						}, item.url))] }) }),
+						footer
+					]
+				})]
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const { text } = useI18n();
+	const { open } = use(TocPopoverContext);
+	const items = useItems();
+	const selectedIdx = items.findIndex((item) => item.active);
+	const path = useTreePath().at(-1);
+	const showItem = selectedIdx !== -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: (selectedIdx + 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[selectedIdx]?.original.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,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col px-4 max-h-[50vh] md:px-6",
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { TOC, TOCPopover, TOCProvider };

package/dist/layouts/docs/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/slots/container.d.ts
+declare function Container(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Container };

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

@@ -0,0 +1,29 @@
+"use client";
+import { cn } from "../../../utils/cn.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) {
+	const { slots } = useDocsLayout();
+	const { collapsed } = slots.sidebar?.useSidebar?.() ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		id: "nd-docs-layout",
+		"data-sidebar-collapsed": collapsed,
+		...props,
+		style: {
+			gridTemplate: `"sidebar sidebar header toc toc"
+"sidebar sidebar toc-popover toc toc"
+"sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr)`,
+			"--fd-docs-row-1": "var(--fd-banner-height, 0px)",
+			"--fd-docs-row-2": "calc(var(--fd-docs-row-1) + var(--fd-header-height))",
+			"--fd-docs-row-3": "calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))",
+			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
+			...props.style
+		},
+		className: cn("grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", props.className),
+		children: props.children
+	});
+}
+//#endregion
+export { Container };

package/dist/layouts/docs/slots/header.d.ts

@@ -0,0 +1,8 @@
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/docs/slots/header.d.ts
+declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined>;
+//#endregion
+export { Header };

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

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useDocsLayout } from "../client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SidebarIcon } from "lucide-react";
+//#region src/layouts/docs/slots/header.tsx
+function Header(props) {
+	const { isNavTransparent, slots, props: { nav } } = useDocsLayout();
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsxs("header", {
+		id: "nd-subnav",
+		"data-transparent": isNavTransparent,
+		...props,
+		className: cn("[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80", props.className),
+		children: [
+			slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-semibold" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: nav?.children
+			}),
+			slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+				hideIfDisabled: true,
+				className: "p-2"
+			}),
+			slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, {
+				className: cn(buttonVariants({
+					color: "ghost",
+					size: "icon-sm",
+					className: "p-2"
+				})),
+				children: /* @__PURE__ */ jsx(SidebarIcon, {})
+			})
+		]
+	});
+}
+//#endregion
+export { Header };