fumadocs-ui 15.2.8 → 16.0.3

package/dist/layouts/docs/index.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, } from 'react';
+import { Languages, Sidebar as SidebarIcon } from '../../icons.js';
+import { cn } from '../../utils/cn.js';
+import { buttonVariants } from '../../components/ui/button.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarContentMobile, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarFooter, SidebarHeader, SidebarItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from '../../components/layout/sidebar.js';
+import { RootToggle } from '../../components/layout/root-toggle.js';
+import { BaseLinkItem, getLinks, } from '../../layouts/shared/index.js';
+import { LanguageToggle, LanguageToggleText, } from '../../components/layout/language-toggle.js';
+import { CollapsibleControl, LayoutBody, LayoutTabs, Navbar, } from '../../layouts/docs/client.js';
+import { TreeContextProvider } from '../../contexts/tree.js';
+import { ThemeToggle } from '../../components/layout/theme-toggle.js';
+import { NavProvider } from '../../contexts/layout.js';
+import Link from 'fumadocs-core/link';
+import { LargeSearchToggle, SearchToggle, } from '../../components/layout/search-toggle.js';
+import { getSidebarTabs, } from '../../utils/get-sidebar-tabs.js';
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = 'auto', i18n = false, children, tree, ...props }) {
+    const tabs = useMemo(() => {
+        if (Array.isArray(sidebarTabs)) {
+            return sidebarTabs;
+        }
+        if (typeof sidebarTabs === 'object') {
+            return getSidebarTabs(tree, sidebarTabs);
+        }
+        if (sidebarTabs !== false) {
+            return getSidebarTabs(tree);
+        }
+        return [];
+    }, [tree, sidebarTabs]);
+    const links = getLinks(props.links ?? [], props.githubUrl);
+    const sidebarVariables = cn('md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px]');
+    function sidebar() {
+        const { footer, banner, collapsible = true, component, components, defaultOpenLevel, prefetch, ...rest } = sidebarProps;
+        if (component)
+            return component;
+        const iconLinks = links.filter((item) => item.type === 'icon');
+        const viewport = (_jsxs(SidebarViewport, { children: [links
+                    .filter((v) => v.type !== 'icon')
+                    .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }));
+        const mobile = (_jsxs(SidebarContentMobile, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-1.5", children: [_jsx("div", { className: "flex flex-1", children: iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                                            size: 'icon-sm',
+                                            color: 'ghost',
+                                            className: 'p-2',
+                                        })), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, {})] })) : null, themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                        color: 'ghost',
+                                        size: 'icon-sm',
+                                        className: 'p-2',
+                                    })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), banner] }), viewport, _jsx(SidebarFooter, { className: "empty:hidden", children: footer })] }));
+        const content = (_jsxs(SidebarContent, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                        color: 'ghost',
+                                        size: 'icon-sm',
+                                        className: 'mb-auto text-fd-muted-foreground',
+                                    })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
+                            (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true }))), tabs.length > 0 && tabMode === 'auto' && (_jsx(RootToggle, { options: tabs })), banner] }), viewport, (i18n ||
+                    iconLinks.length > 0 ||
+                    themeSwitch?.enabled !== false ||
+                    footer) && (_jsxs(SidebarFooter, { children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center empty:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5" }) })), iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' })), "aria-label": item.label, children: item.icon }, i))), themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-auto p-0", mode: themeSwitch.mode })))] }), footer] }))] }));
+        return (_jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, Mobile: mobile, Content: _jsxs(_Fragment, { children: [collapsible && _jsx(CollapsibleControl, {}), content] }) }));
+    }
+    return (_jsx(TreeContextProvider, { tree: tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
+                    (nav.component ?? (_jsxs(Navbar, { className: "h-(--fd-nav-height) on-root:[--fd-nav-height:56px] md:on-root:[--fd-nav-height:0px] md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle.enabled !== false &&
+                                (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                    color: 'ghost',
+                                    size: 'icon-sm',
+                                    className: 'p-2',
+                                })), children: _jsx(SidebarIcon, {}) }))] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn('md:[&_#nd-page_article]:pt-12 xl:[&_#nd-page_article]:px-8', sidebarEnabled && sidebarVariables, props.containerProps?.className), children: [sidebarEnabled && sidebar(), tabMode === 'top' && tabs.length > 0 && (_jsx(LayoutTabs, { options: tabs, className: "sticky top-[calc(var(--fd-nav-height)+var(--fd-tocnav-height))] z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden" })), children] })] }) }));
+}
+function SidebarLinkItem({ item, ...props }) {
+    if (item.type === 'menu')
+        return (_jsxs(SidebarFolder, { ...props, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, external: item.external, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));
+    if (item.type === 'custom')
+        return _jsx("div", { ...props, children: item.children });
+    return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, ...props, children: item.text }));
+}
+export { CollapsibleControl, Navbar, SidebarTrigger };

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

@@ -0,0 +1,25 @@
+import { type ComponentProps } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
+export declare function PageTOCPopoverTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverContent(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopover(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+    date: Date | string;
+}): import("react/jsx-runtime").JSX.Element;
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+export interface FooterProps extends ComponentProps<'div'> {
+    /**
+     * Items including information for the next and previous page
+     */
+    items?: {
+        previous?: Item;
+        next?: Item;
+    };
+}
+export declare function PageFooter({ items, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+export declare function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PageTOC(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAkBlC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAoDpE;AA4DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAwD1D;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,2CAiBjE;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAiC1D;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,kDA6CjB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAuBnD"}

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

@@ -0,0 +1,157 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef, useState, } from 'react';
+import { ChevronDown, ChevronLeft, ChevronRight } from '../../icons.js';
+import Link from 'fumadocs-core/link';
+import { cn } from '../../utils/cn.js';
+import { useI18n } from '../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../contexts/tree.js';
+import { createContext, usePathname } from 'fumadocs-core/framework';
+import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
+import { useNav } from '../../contexts/layout.js';
+import { isActive } from '../../utils/is-active.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { useTOCItems } from '../../components/layout/toc.js';
+import { useActiveAnchor } from 'fumadocs-core/toc';
+const TocPopoverContext = createContext('TocPopoverContext');
+export function PageTOCPopoverTrigger(props) {
+    const { text } = useI18n();
+    const { open } = TocPopoverContext.use();
+    const items = useTOCItems();
+    const active = useActiveAnchor();
+    const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+    const path = useTreePath().at(-1);
+    const showItem = selected !== -1 && !open;
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex w-full h-(--fd-tocnav-height) 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', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn('shrink-0', open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _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 (_jsxs("svg", { role: "progressbar", viewBox: `0 0 ${size} ${size}`, "aria-valuenow": normalizedValue, "aria-valuemin": min, "aria-valuemax": max, ...restSvgProps, children: [_jsx("circle", { ...circleProps, className: "stroke-current/25" }), _jsx("circle", { ...circleProps, stroke: "currentColor", strokeDasharray: circumference, strokeDashoffset: circumference - progress, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})`, className: "transition-all" })] }));
+}
+export function PageTOCPopoverContent(props) {
+    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
+}
+export function PageTOCPopover(props) {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const { collapsed } = useSidebar();
+    const { isTransparent } = useNav();
+    const onClick = useEffectEvent((e) => {
+        if (!open)
+            return;
+        if (ref.current && !ref.current.contains(e.target))
+            setOpen(false);
+    });
+    useEffect(() => {
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, []);
+    return (_jsx(TocPopoverContext.Provider, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('fixed pr-(--removed-body-scroll-bar-size,0) z-10 border-b backdrop-blur-sm transition-colors xl:hidden max-xl:on-root:[--fd-tocnav-height:40px]', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', props.className), style: {
+                    ...props.style,
+                    top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+                    insetInlineStart: collapsed
+                        ? '0px'
+                        : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
+                    insetInlineEnd: 0,
+                }, children: props.children }) }) }));
+}
+export function PageLastUpdate({ date: value, ...props }) {
+    const { text } = useI18n();
+    const [date, setDate] = useState('');
+    useEffect(() => {
+        // to the timezone of client
+        setDate(new Date(value).toLocaleDateString());
+    }, [value]);
+    return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
+}
+function scanNavigationList(tree) {
+    const list = [];
+    tree.forEach((node) => {
+        if (node.type === 'folder') {
+            if (node.index) {
+                list.push(node.index);
+            }
+            list.push(...scanNavigationList(node.children));
+            return;
+        }
+        if (node.type === 'page' && !node.external) {
+            list.push(node);
+        }
+    });
+    return list;
+}
+const listCache = new Map();
+export function PageFooter({ items, ...props }) {
+    const { root } = useTreeContext();
+    const pathname = usePathname();
+    const { previous, next } = useMemo(() => {
+        if (items)
+            return items;
+        const cached = listCache.get(root.$id);
+        const list = cached ?? scanNavigationList(root.children);
+        listCache.set(root.$id, list);
+        const idx = list.findIndex((item) => isActive(item.url, pathname, false));
+        if (idx === -1)
+            return {};
+        return {
+            previous: list[idx - 1],
+            next: list[idx + 1],
+        };
+    }, [items, pathname, root]);
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
+}
+function FooterItem({ item, index }) {
+    const { text } = useI18n();
+    const Icon = index === 0 ? ChevronLeft : ChevronRight;
+    return (_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: [_jsxs("div", { className: cn('inline-flex items-center gap-1.5 font-medium', index === 1 && 'flex-row-reverse'), children: [_jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: item.name })] }), _jsx("p", { className: "text-fd-muted-foreground truncate", children: item.description ?? (index === 0 ? text.previousPage : text.nextPage) })] }));
+}
+export function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
+    const path = useTreePath();
+    const { root } = useTreeContext();
+    const items = useMemo(() => {
+        return getBreadcrumbItemsFromPath(root, path, {
+            includePage,
+            includeSeparator,
+            includeRoot,
+        });
+    }, [includePage, includeRoot, includeSeparator, path, root]);
+    if (items.length === 0)
+        return null;
+    return (_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 (_jsxs(Fragment, { children: [i !== 0 && _jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
+        }) }));
+}
+export function PageTOC(props) {
+    const { collapsed } = useSidebar();
+    const offset = collapsed ? '0px' : 'var(--fd-layout-offset)';
+    return (_jsx("div", { id: "nd-toc", ...props, className: cn('fixed bottom-0 pt-12 pb-2 pr-(--removed-body-scroll-bar-size,0) xl:on-root:[--fd-toc-width:286px] max-xl:hidden', props.className), style: {
+            ...props.style,
+            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+            insetInlineEnd: `max(${offset}, calc(50vw - var(--fd-sidebar-width)/2 - var(--fd-page-width)/2))`,
+        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
+}

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

@@ -0,0 +1,17 @@
+import { type ComponentProps } from 'react';
+import { type BreadcrumbProps, type FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from './page-client.js';
+import type { AnchorProviderProps } from 'fumadocs-core/toc';
+export declare function PageTOCTitle(props: ComponentProps<'h2'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageArticle(props: ComponentProps<'article'>): import("react/jsx-runtime").JSX.Element;
+export interface RootProps extends ComponentProps<'div'> {
+    toc?: Omit<AnchorProviderProps, 'children'> | false;
+}
+export declare function PageRoot({ toc, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, type FooterProps, type BreadcrumbProps, };
+//# sourceMappingURL=page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,cAAc,EACd,UAAU,EACV,cAAc,EACd,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,eAAe,CAAC;AAKvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,2CAcvD;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,2CAY3D;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,GAAG,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC;CACrD;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAgBtE;AAED,OAAO,EACL,cAAc,EACd,UAAU,EACV,cAAc,EACd,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,CAAC"}

package/dist/layouts/docs/page.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, } from './page-client.js';
+import { TOCItems, TOCProvider, TOCScrollArea } from '../../components/layout/toc.js';
+import { Text } from '../../icons.js';
+import { I18nLabel } from '../../contexts/i18n.js';
+import ClerkTOCItems from '../../components/layout/toc-clerk.js';
+export function PageTOCTitle(props) {
+    return (_jsxs("h3", { id: "toc-title", ...props, className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }));
+}
+export function PageTOCItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageArticle(props) {
+    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-4 pt-8 px-4 md:px-6 md:mx-auto', props.className), children: props.children }));
+}
+export function PageRoot({ toc = false, children, ...props }) {
+    const content = (_jsx("div", { id: "nd-page", ...props, className: cn('flex flex-1 w-full mx-auto max-w-(--fd-page-width) pt-(--fd-tocnav-height) pe-(--fd-toc-width)', props.className), children: children }));
+    if (toc)
+        return _jsx(TOCProvider, { ...toc, children: content });
+    return content;
+}
+export { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };

package/dist/layouts/{home.d.ts → home/index.d.ts}

@@ -1,6 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import { type NavOptions } from '../layouts/shared.js';
-import { type BaseLayoutProps } from './shared.js';
+import { type BaseLayoutProps, type NavOptions } from '../../layouts/shared/index.js';
 export interface HomeLayoutProps extends BaseLayoutProps {
     nav?: Partial<NavOptions & {
         /**
@@ -11,4 +10,4 @@ export interface HomeLayoutProps extends BaseLayoutProps {
 }
 export declare function HomeLayout(props: HomeLayoutProps & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare function Header({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=home.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/home/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AA6B1B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAkCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAgB,EAChB,YAAiB,GAClB,EAAE,eAAe,2CAiGjB"}

package/dist/layouts/home/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import { cn } from '../../utils/cn.js';
+import { getLinks, } from '../../layouts/shared/index.js';
+import { NavProvider } from '../../contexts/layout.js';
+import { Navbar, NavbarLink, NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger, } from '../../layouts/home/navbar.js';
+import { LargeSearchToggle, SearchToggle, } from '../../components/layout/search-toggle.js';
+import { ThemeToggle } from '../../components/layout/theme-toggle.js';
+import { LanguageToggle, LanguageToggleText, } from '../../components/layout/language-toggle.js';
+import { ChevronDown, Languages } from '../../icons.js';
+import Link from 'fumadocs-core/link';
+import { Menu, MenuContent, MenuLinkItem, MenuTrigger, } from '../../layouts/home/menu.js';
+import { buttonVariants } from '../../components/ui/button.js';
+export function HomeLayout(props) {
+    const { nav = {}, links, githubUrl, i18n, themeSwitch = {}, searchToggle, ...rest } = props;
+    return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [nav.enabled !== false &&
+                    (nav.component ?? (_jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl }))), props.children] }) }));
+}
+export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
+    const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
+    const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
+    const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
+    return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+                    .filter((item) => !isSecondary(item))
+                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle.enabled !== false &&
+                        (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
+                        (themeSwitch.component ?? _jsx(ThemeToggle, { mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })) : null, _jsx("div", { className: "flex flex-row items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item }, i))) })] }), _jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [searchToggle.enabled !== false &&
+                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsxs(Menu, { children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
+                                    size: 'icon',
+                                    color: 'ghost',
+                                    className: 'group',
+                                })), enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "!size-5.5 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                                        .filter((item) => !isSecondary(item))
+                                        .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, themeSwitch.enabled !== false &&
+                                                (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] })] })] })] }));
+}
+function NavbarLinkItem({ item, ...props }) {
+    if (item.type === 'custom')
+        return _jsx("div", { ...props, children: item.children });
+    if (item.type === 'menu') {
+        const children = item.items.map((child, j) => {
+            if (child.type === 'custom') {
+                return _jsx(Fragment, { children: child.children }, j);
+            }
+            const { banner = child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null, ...rest } = child.menu ?? {};
+            return (_jsx(NavbarMenuLink, { href: child.url, external: child.external, ...rest, children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-[15px] font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }, `${j}-${child.url}`));
+        });
+        return (_jsxs(NavbarMenu, { children: [_jsx(NavbarMenuTrigger, { ...props, children: item.url ? (_jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) }), _jsx(NavbarMenuContent, { children: children })] }));
+    }
+    return (_jsx(NavbarLink, { ...props, item: item, variant: item.type, "aria-label": item.type === 'icon' ? item.label : undefined, children: item.type === 'icon' ? item.icon : item.text }));
+}
+function isSecondary(item) {
+    if ('secondary' in item && item.secondary != null)
+        return item.secondary;
+    return item.type === 'icon';
+}

package/dist/layouts/home/menu.d.ts

@@ -1,4 +1,4 @@
-import { type LinkItemType } from '../../layouts/links.js';
+import { type LinkItemType } from '../../layouts/shared/index.js';
 import { NavigationMenuContent, NavigationMenuTrigger } from '../../components/ui/navigation-menu.js';
 import type { ComponentPropsWithoutRef } from 'react';
 export declare function MenuLinkItem({ item, ...props }: {

package/dist/layouts/home/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EACL,qBAAqB,EAGrB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAIzC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAqBtD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA6CA;AAED,eAAO,MAAM,IAAI,yNAAqB,CAAC;AAEvC,wBAAgB,WAAW,CAAC,EAC1B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC1D;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,2CAU9D"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,EACL,qBAAqB,EAGrB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AAIzC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAqBtD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA+CA;AAED,eAAO,MAAM,IAAI,yNAAqB,CAAC;AAEvC,wBAAgB,WAAW,CAAC,EAC1B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC1D;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CASA;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,2CAU9D"}

package/dist/layouts/home/menu.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BaseLinkItem } from '../../layouts/links.js';
+import { BaseLinkItem } from '../../layouts/shared/index.js';
 import { cn } from '../../utils/cn.js';
 import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, } from '../../components/ui/navigation-menu.js';
 import Link from 'fumadocs-core/link';
@@ -29,16 +29,13 @@ export function MenuLinkItem({ item, ...props }) {
         return _jsx("div", { className: cn('grid', props.className), children: item.children });
     if (item.type === 'menu') {
         const header = (_jsxs(_Fragment, { children: [item.icon, item.text] }));
-        return (_jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [_jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { href: item.url, children: header }) })) : (header) }), item.items.map((child, i) => (_jsx(MenuLinkItem, { item: child }, i)))] }));
+        return (_jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [_jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (_jsx(MenuLinkItem, { item: child }, i)))] }));
     }
     return (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(BaseLinkItem, { item: item, className: cn(menuItemVariants({ variant: item.type }), props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
 }
 export const Menu = NavigationMenuItem;
 export function MenuTrigger({ enableHover = false, ...props }) {
-    return (_jsx(NavigationMenuTrigger, { ...props, onPointerMove: enableHover ? undefined : (e) => e.preventDefault(), className: cn(buttonVariants({
-            size: 'icon',
-            color: 'ghost',
-        }), props.className), children: props.children }));
+    return (_jsx(NavigationMenuTrigger, { ...props, onPointerMove: enableHover ? undefined : (e) => e.preventDefault(), children: props.children }));
 }
 export function MenuContent(props) {
     return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col p-4', props.className), children: props.children }));

package/dist/layouts/home/navbar.d.ts

@@ -1,15 +1,15 @@
-import { type ComponentProps, type HTMLAttributes } from 'react';
+import { type ComponentProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type LinkProps } from 'fumadocs-core/link';
-import { BaseLinkItem } from '../../layouts/links.js';
+import { BaseLinkItem } from '../../layouts/shared/index.js';
 import type { NavigationMenuContentProps, NavigationMenuTriggerProps } from '@radix-ui/react-navigation-menu';
-export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Navbar(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare const NavbarMenu: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 export declare function NavbarMenuContent(props: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarMenuLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
 declare const linkVariants: (props?: ({
-    variant?: "icon" | "button" | "main" | null | undefined;
+    variant?: "button" | "main" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function NavbarLink({ item, variant, ...props }: ComponentProps<typeof BaseLinkItem> & VariantProps<typeof linkVariants>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layouts/home/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CA2BxD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWhD,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA2BlD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}

package/dist/layouts/home/navbar.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { cva } from 'class-variance-authority';
 import Link from 'fumadocs-core/link';
 import { cn } from '../../utils/cn.js';
-import { BaseLinkItem } from '../../layouts/links.js';
+import { BaseLinkItem } from '../../layouts/shared/index.js';
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu.js';
 import { useNav } from '../../contexts/layout.js';
 import { buttonVariants } from '../../components/ui/button.js';
@@ -12,12 +12,11 @@ const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-fo
 export function Navbar(props) {
     const [value, setValue] = useState('');
     const { isTransparent } = useNav();
-    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-1/2 top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b border-fd-foreground/10 transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
-                'bg-fd-background/80 backdrop-blur-lg', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full flex-row items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40 left-0 right-(--removed-body-scroll-bar-size,0) backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-3 px-4 pb-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
 }
 export function NavbarMenuTrigger(props) {
     return (_jsx(NavigationMenuTrigger, { ...props, className: cn(navItemVariants(), 'rounded-md', props.className), children: props.children }));

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

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react';
+import type { Option } from '../../components/layout/root-toggle.js';
+export declare function Navbar({ mode, ...props }: ComponentProps<'header'> & {
+    mode: 'top' | 'auto';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
+    options: Option[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAQrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAsBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CAuBA"}

package/dist/layouts/notebook/client.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { useMemo } from 'react';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { useNav } from '../../contexts/layout.js';
+import { buttonVariants } from '../../components/ui/button.js';
+import { Sidebar as SidebarIcon } from '../../icons.js';
+import Link from 'fumadocs-core/link';
+import { usePathname } from 'fumadocs-core/framework';
+import { isTabActive } from '../../utils/is-active.js';
+export function Navbar({ mode, ...props }) {
+    const { open, collapsed } = useSidebar();
+    const { isTransparent } = useNav();
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed flex flex-col top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
+            !collapsed &&
+            'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
+}
+export function LayoutBody(props) {
+    const { collapsed } = useSidebar();
+    return (_jsx("main", { id: "nd-docs-layout", ...props, className: cn('flex flex-1 flex-col transition-[padding] pt-(--fd-nav-height) fd-notebook-layout', !collapsed && 'mx-(--fd-layout-offset)', props.className), style: {
+            ...props.style,
+            paddingInlineStart: collapsed
+                ? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
+                : 'var(--fd-sidebar-width)',
+        }, children: props.children }));
+}
+export function NavbarSidebarTrigger({ className, ...props }) {
+    const { setOpen } = useSidebar();
+    return (_jsx("button", { ...props, className: cn(buttonVariants({
+            color: 'ghost',
+            size: 'icon-sm',
+            className,
+        })), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
+}
+export function LayoutTabs({ options, ...props }) {
+    const pathname = usePathname();
+    const selected = useMemo(() => {
+        return options.findLast((option) => isTabActive(option, pathname));
+    }, [options, pathname]);
+    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
+}
+function LayoutTab({ option: { title, url, unlisted, props }, selected = false, }) {
+    return (_jsx(Link, { href: url, ...props, 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 && !selected && 'hidden', selected && 'border-fd-primary text-fd-primary', props?.className), children: title }));
+}

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

@@ -0,0 +1,34 @@
+import { type ComponentProps, type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type BaseLayoutProps } from '../../layouts/shared/index.js';
+import { type SidebarComponents, SidebarFooter, SidebarHeader, type SidebarProps } from '../../components/layout/sidebar.js';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { Navbar, NavbarSidebarTrigger } from '../../layouts/notebook/client.js';
+import { type Option } from '../../components/layout/root-toggle.js';
+import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
+export interface DocsLayoutProps extends BaseLayoutProps {
+    tree: PageTree.Root;
+    tabMode?: 'sidebar' | 'navbar';
+    nav?: BaseLayoutProps['nav'] & {
+        mode?: 'top' | 'auto';
+    };
+    sidebar?: SidebarOptions;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+interface SidebarOptions extends ComponentProps<'aside'>, Pick<SidebarProps, 'defaultOpenLevel' | 'prefetch'> {
+    components?: Partial<SidebarComponents>;
+    /**
+     * Root Toggle options
+     */
+    tabs?: Option[] | GetSidebarTabsOptions | false;
+    banner?: ReactNode | FC<ComponentProps<typeof SidebarHeader>>;
+    footer?: ReactNode | FC<ComponentProps<typeof SidebarFooter>>;
+    /**
+     * Support collapsing the sidebar on desktop mode
+     *
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+}
+export declare function DocsLayout(props: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export { Navbar, NavbarSidebarTrigger };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAEP,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,KAAK,iBAAiB,EAOtB,aAAa,EACb,aAAa,EAGb,KAAK,YAAY,EAGlB,MAAM,6BAA6B,CAAC;AAiBrC,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,iCAAiC,CAAC;AAM1E,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;IAE9D;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAyOhD;AA8PD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}