@hanzo/docs-base-ui 16.5.3 → 16.7.5

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

@@ -0,0 +1,242 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { mergeRefs } from "../../../utils/merge-refs.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.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 { Fragment, useEffect, useEffectEvent, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
+import { ChevronDown, Languages } from "lucide-react";
+import { cva } from "class-variance-authority";
+//#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 headerRef = useRef(null);
+	const listRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const transparentMode = nav?.transparentMode ?? "none";
+	const isTop = useIsScrollTop({ enabled: transparentMode === "top" }) ?? true;
+	const isNavTransparent = transparentMode === "top" ? isTop : transparentMode === "always";
+	const onClick = useEffectEvent((e) => {
+		const element = headerRef.current;
+		if (!open || !element) return;
+		if (element !== e.target && !element.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	const list = /* @__PURE__ */ jsxs(NavigationMenuList, {
+		ref: listRef,
+		className: "flex h-14 w-full mx-auto max-w-(--fd-layout-width) items-center px-4",
+		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(CollapsibleTrigger, {
+					"aria-label": "Toggle Menu",
+					className: cn(buttonVariants({
+						size: "icon",
+						color: "ghost"
+					})),
+					onPointerEnter: nav?.enableHoverToOpen ? () => {
+						setOpen(true);
+					} : void 0,
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-transform", open && "rotate-180") })
+				})]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		render: /* @__PURE__ */ jsx("header", {
+			id: "nd-nav",
+			...props,
+			ref: mergeRefs(headerRef, props.ref),
+			className: cn("sticky h-14 top-0 z-40", props.className),
+			children: /* @__PURE__ */ jsxs(NavigationMenu, {
+				className: (s) => cn("backdrop-blur-lg border-b transition-[box-shadow,background-color,border-radius]", open && "max-lg:shadow-lg max-lg:rounded-b-2xl", (open || !isNavTransparent || s.open) && "bg-fd-background/80"),
+				children: [
+					list,
+					/* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "mx-auto max-w-(--fd-layout-width) lg:hidden",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col pt-2 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, {})
+								]
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(NavigationMenuViewport, {
+						side: "bottom",
+						anchor: listRef
+					})
+				]
+			})
+		})
+	});
+}
+function isSecondary(item) {
+	if ("secondary" in item && item.secondary != null) return item.secondary;
+	return item.type === "icon";
+}
+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, { 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, { render: /* @__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$1, { 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 md:grid-cols-2 lg:grid-cols-3",
+				children
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(NavigationMenuItem, {
+		...props,
+		children: /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__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$1, { 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(Link, {
+					href: item.url,
+					external: item.external,
+					children: header
+				}) : header
+			}), item.items.map((child, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, { item: child }, i))]
+		});
+	}
+	return /* @__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

@@ -1,47 +1,35 @@
-import { LinkItemType } from "../../utils/link-item.js";
-import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
-import * as react from "react";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
+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
-declare const LayoutContext: react.Context<(LayoutInfo & {
-  isNavTransparent: boolean;
-}) | null>;
-interface LayoutInfo {
-  tabMode: 'sidebar' | 'navbar';
-  navMode: 'top' | 'auto';
+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 LayoutContextProvider({
-  navTransparentMode,
-  navMode,
-  tabMode,
-  children
-}: LayoutInfo & {
-  navTransparentMode?: 'always' | 'top' | 'none';
-  children: ReactNode;
-}): react_jsx_runtime0.JSX.Element;
-declare function LayoutHeader(props: ComponentProps<'header'>): react_jsx_runtime0.JSX.Element;
-declare function LayoutBody({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-declare function LayoutHeaderTabs({
-  options,
-  className,
-  ...props
-}: ComponentProps<'div'> & {
-  options: SidebarTabWithProps[];
-}): react_jsx_runtime0.JSX.Element;
-declare function NavbarLinkItem({
-  item,
-  className,
-  ...props
-}: {
-  item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+declare function useNotebookLayout(): {
+  props: SlotsProps;
+  isNavTransparent: boolean;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: DocsSlots;
+};
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };
-//# sourceMappingURL=client.d.ts.map
+export { DocsSlots, useNotebookLayout };

package/dist/layouts/notebook/client.js

@@ -1,159 +1,69 @@
-'use client';
-
-import { cn } from "../../utils/cn.js";
-import { useSidebar } from "../../components/sidebar/base.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
-import { isTabActive } from "../../components/sidebar/tabs/dropdown.js";
+"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 { LinkItem } from "../../utils/link-item.js";
-import { Fragment, createContext, use, useMemo, useRef, useState } from "react";
-import { usePathname } from "@hanzo/docs-core/framework";
+import { Container } from "./slots/container.js";
+import { Sidebar, SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
+import { Header } from "./slots/header.js";
+import { createContext, use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "@hanzo/docs-core/link";
-import { ChevronDown } from "lucide-react";
-
 //#region src/layouts/notebook/client.tsx
+const { useProvider } = baseSlots({ useProps() {
+	return useNotebookLayout().props;
+} });
 const LayoutContext = createContext(null);
-function LayoutContextProvider({ navTransparentMode = "none", navMode, tabMode, children }) {
+function useNotebookLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`@hanzo/docs-ui/layouts/notebook/page`) under <DocsLayout /> (`@hanzo/docs-ui/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";
-	return /* @__PURE__ */ jsx(LayoutContext, {
-		value: useMemo(() => ({
-			isNavTransparent,
-			navMode,
-			tabMode
-		}), [
-			isNavTransparent,
-			navMode,
-			tabMode
-		]),
-		children
-	});
-}
-function LayoutHeader(props) {
-	const { open } = useSidebar();
-	const { isNavTransparent } = use(LayoutContext);
-	return /* @__PURE__ */ jsx("header", {
-		"data-transparent": isNavTransparent && !open,
-		...props,
-		children: props.children
-	});
-}
-function LayoutBody({ className, style, children, ...props }) {
-	const { navMode } = use(LayoutContext);
-	const { collapsed } = useSidebar();
-	const pageCol = "calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))";
-	return /* @__PURE__ */ jsx("div", {
-		id: "nd-notebook-layout",
-		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", className),
-		style: {
-			gridTemplate: navMode === "top" ? `". header header header ."
-        "sidebar sidebar toc-popover toc-popover ."
-        "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)` : `"sidebar sidebar header header ."
-        "sidebar sidebar toc-popover toc-popover ."
-        "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) 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)",
-			...style
-		},
-		...props,
-		children
-	});
-}
-function LayoutHeaderTabs({ options, className, ...props }) {
-	const pathname = usePathname();
-	const selectedIdx = useMemo(() => {
-		return options.findLastIndex((option) => isTabActive(option, pathname));
-	}, [options, pathname]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-row items-end gap-6", className),
-		...props,
-		children: options.map((option, i) => {
-			const { title, url, unlisted, props: { className, ...rest } = {} } = option;
-			const isSelected = selectedIdx === i;
-			return /* @__PURE__ */ jsx(Link, {
-				href: url,
-				className: cn("inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground", unlisted && !isSelected && "hidden", isSelected && "border-fd-primary text-fd-primary", className),
-				...rest,
-				children: title
-			}, i);
-		})
-	});
-}
-function NavbarLinkItem({ item, className, ...props }) {
-	if (item.type === "custom") return item.children;
-	if (item.type === "menu") return /* @__PURE__ */ jsx(NavbarLinkItemMenu, {
-		item,
-		className,
-		...props
-	});
-	return /* @__PURE__ */ jsx(LinkItem, {
-		item,
-		className: cn("text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary", className),
-		...props,
-		children: item.text
-	});
-}
-function NavbarLinkItemMenu({ item, hoverDelay = 50, className, ...props }) {
-	const [open, setOpen] = useState(false);
-	const timeoutRef = useRef(null);
-	const freezeUntil = useRef(null);
-	const delaySetOpen = (value) => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current);
-			timeoutRef.current = null;
+	const { baseSlots, baseProps } = useProvider(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
 		}
-		timeoutRef.current = window.setTimeout(() => {
-			setOpen(value);
-			freezeUntil.current = Date.now() + 300;
-		}, hoverDelay);
-	};
-	const onPointerEnter = (e) => {
-		if (e.pointerType === "touch") return;
-		delaySetOpen(true);
 	};
-	const onPointerLeave = (e) => {
-		if (e.pointerType === "touch") return;
-		delaySetOpen(false);
-	};
-	function isTouchDevice() {
-		return "ontouchstart" in window || navigator.maxTouchPoints > 0;
-	}
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: (value) => {
-			if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);
-		},
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			className: cn("inline-flex items-center gap-1.5 p-1 text-sm text-fd-muted-foreground transition-colors has-data-[active=true]:text-fd-primary data-[state=open]:text-fd-accent-foreground focus-visible:outline-none", className),
-			onPointerEnter,
-			onPointerLeave,
-			...props,
-			children: [item.url ? /* @__PURE__ */ jsx(LinkItem, {
-				item,
-				children: item.text
-			}) : item.text, /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })]
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "flex flex-col p-1 text-fd-muted-foreground text-start",
-			onPointerEnter,
-			onPointerLeave,
-			children: item.items.map((child, i) => {
-				if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment, { children: child.children }, i);
-				return /* @__PURE__ */ jsxs(LinkItem, {
-					item: child,
-					className: "inline-flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4",
-					onClick: () => {
-						if (isTouchDevice()) setOpen(false);
-					},
-					children: [child.icon, child.text]
-				}, i);
+	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, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem };
-//# sourceMappingURL=client.js.map
+export { LayoutBody, useNotebookLayout };

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

@@ -1,38 +1,39 @@
-import { SidebarPageTreeComponents } from "../../components/sidebar/page-tree.js";
-import { GetSidebarTabsOptions } from "../../components/sidebar/tabs/index.js";
-import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
-import { BaseLayoutProps } from "../shared/index.js";
-import { Sidebar } from "./sidebar.js";
-import { ComponentProps, FC, HTMLAttributes, ReactNode } from "react";
+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 react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/layouts/notebook/index.d.ts
 interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
   tabMode?: 'sidebar' | 'navbar';
-  nav?: BaseLayoutProps['nav'] & {
-    mode?: 'top' | 'auto';
-  };
   sidebar?: SidebarOptions;
+  nav?: Nav;
   containerProps?: HTMLAttributes<HTMLDivElement>;
+  slots?: Partial<DocsSlots>;
 }
-interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {
-  components?: Partial<SidebarPageTreeComponents>;
-  /**
-   * Root Toggle options
-   */
-  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;
-  banner?: ReactNode | FC<ComponentProps<'div'>>;
-  footer?: ReactNode | FC<ComponentProps<'div'>>;
+interface Nav extends NavOptions {
+  mode?: 'top' | 'auto';
+}
+interface SidebarOptions extends SidebarProps, SidebarProviderProps {
   /**
-   * Support collapsing the sidebar on desktop mode
-   *
-   * @defaultValue true
+   * @deprecated use layout-level `tabs` option instead.
    */
-  collapsible?: boolean;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
 }
-declare function DocsLayout(props: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function DocsLayout({
+  tree,
+  tabMode,
+  sidebar: {
+    tabs: defaultTabs,
+    ...sidebarProps
+  },
+  children,
+  tabs,
+  ...props
+}: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsLayout, DocsLayoutProps };
-//# sourceMappingURL=index.d.ts.map
+export { DocsLayout, DocsLayoutProps, type DocsSlots, useNotebookLayout };