@hanzo/radix 16.3.1

package/dist/layouts/home/client.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import Link from '@hanzo/docs/link';
+import { cn } from '@hanzo/ui/cn';
+import { renderTitleNav, resolveLinkItems, } from '../../layouts/shared/index.js';
+import { LinkItem } from '@hanzo/ui/link-item';
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu.js';
+import { buttonVariants } from '../../components/ui/button.js';
+import { LargeSearchToggle, SearchToggle, } from '../../layouts/shared/search-toggle.js';
+import { ThemeToggle } from '../../layouts/shared/theme-toggle.js';
+import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
+import { ChevronDown, Languages } from '@hanzo/ui/icons';
+import { useIsScrollTop } from '@hanzo/ui/hooks/use-is-scroll-top';
+export 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',
+    },
+});
+export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
+    const { navItems, menuItems } = useMemo(() => {
+        const navItems = [];
+        const menuItems = [];
+        for (const item of resolveLinkItems({ links, githubUrl })) {
+            switch (item.on ?? 'all') {
+                case 'menu':
+                    menuItems.push(item);
+                    break;
+                case 'nav':
+                    navItems.push(item);
+                    break;
+                default:
+                    navItems.push(item);
+                    menuItems.push(item);
+            }
+        }
+        return { navItems, menuItems };
+    }, [links, githubUrl]);
+    return (_jsxs(HeaderNavigationMenu, { transparentMode: nav.transparentMode, children: [renderTitleNav(nav, {
+                className: 'inline-flex items-center gap-2.5 font-semibold',
+            }), 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(NavigationMenuLinkItem, { 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" }) })), _jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (_jsx(NavigationMenuLinkItem, { className: cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0'), 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(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
+                                    size: 'icon',
+                                    color: 'ghost',
+                                    className: 'group [&_svg]:size-5.5',
+                                })), onPointerMove: nav.enableHoverToOpen ? undefined : (e) => e.preventDefault(), children: _jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(NavigationMenuContent, { className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                                        .filter((item) => !isSecondary(item))
+                                        .map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: cn(item.type === 'icon' && '-mx-1 first:ms-0') }, 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" })] })), themeSwitch.enabled !== false &&
+                                                (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] })] })] })] }));
+}
+function isSecondary(item) {
+    if ('secondary' in item && item.secondary != null)
+        return item.secondary;
+    return item.type === 'icon';
+}
+function HeaderNavigationMenu({ transparentMode = 'none', ...props }) {
+    const [value, setValue] = useState('');
+    const isTop = useIsScrollTop({ enabled: transparentMode === 'top' }) ?? true;
+    const isTransparent = transparentMode === 'top' ? isTop : transparentMode === 'always';
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsx("header", { id: "nd-nav", ...props, className: cn('sticky h-14 top-0 z-40', props.className), children: _jsxs("div", { className: cn('backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width)', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80'), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }) }));
+}
+function NavigationMenuLinkItem({ 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(NavigationMenuLink, { asChild: true, children: _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 ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-base font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }) }, `${j}-${child.url}`));
+        });
+        return (_jsxs(NavigationMenuItem, { ...props, children: [_jsx(NavigationMenuTrigger, { className: cn(navItemVariants(), 'rounded-md'), children: item.url ? (_jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) }), _jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
+    }
+    return (_jsx(NavigationMenuItem, { ...props, children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(LinkItem, { item: item, "aria-label": item.type === 'icon' ? item.label : undefined, className: cn(navItemVariants({ variant: item.type })), children: item.type === 'icon' ? item.icon : item.text }) }) }));
+}
+function MobileNavigationMenuLinkItem({ item, ...props }) {
+    if (item.type === 'custom')
+        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, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (_jsx(MobileNavigationMenuLinkItem, { item: child }, i)))] }));
+    }
+    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(LinkItem, { item: 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 : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import { type BaseLayoutProps, type NavOptions } from '../../layouts/shared/index.js';
+export interface HomeLayoutProps extends BaseLayoutProps {
+    nav?: Partial<NavOptions & {
+        /**
+         * Open mobile menu when hovering the trigger
+         */
+        enableHoverToOpen?: boolean;
+    }>;
+}
+export declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
+//# 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,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGzE,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,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,2CAkCzE"}

package/dist/layouts/home/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@hanzo/ui/cn';
+import { Header } from '../../layouts/home/client.js';
+export function HomeLayout(props) {
+    const { nav = {}, links, githubUrl, i18n, themeSwitch = {}, searchToggle, ...rest } = props;
+    return (_jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col [--fd-layout-width:1400px]', rest.className), children: [nav.enabled !== false &&
+                (nav.component ?? (_jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl }))), props.children] }));
+}

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

@@ -0,0 +1,7 @@
+import { type LinkProps } from '@hanzo/docs/link';
+import { type NavigationMenuContentProps, type NavigationMenuTriggerProps } from '../../components/ui/navigation-menu.js';
+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;
+//# sourceMappingURL=navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAEL,KAAK,0BAA0B,EAI/B,KAAK,0BAA0B,EAChC,MAAM,iCAAiC,CAAC;AAGzC,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"}

package/dist/layouts/home/navbar.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from '@hanzo/docs/link';
+import { cn } from '@hanzo/ui/cn';
+import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, } from '../../components/ui/navigation-menu.js';
+import { navItemVariants } from './client.js';
+export const NavbarMenu = NavigationMenuItem;
+export function NavbarMenuContent(props) {
+    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 }));
+}
+export function NavbarMenuLink(props) {
+    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { ...props, 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', props.className), children: props.children }) }));
+}

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

@@ -0,0 +1,23 @@
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { type LinkItemType } from '@hanzo/ui/link-item';
+import { type SidebarTabWithProps } from '../../components/sidebar/tabs/dropdown.js';
+export declare const LayoutContext: import("react").Context<(LayoutInfo & {
+    isNavTransparent: boolean;
+}) | null>;
+export interface LayoutInfo {
+    tabMode: 'sidebar' | 'navbar';
+    navMode: 'top' | 'auto';
+}
+export declare function LayoutContextProvider({ navTransparentMode, navMode, tabMode, children, }: LayoutInfo & {
+    navTransparentMode?: 'always' | 'top' | 'none';
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutHeader(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutHeaderTabs({ options, className, ...props }: ComponentProps<'div'> & {
+    options: SidebarTabWithProps[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarLinkItem({ item, className, ...props }: {
+    item: LinkItemType;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# 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,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAMf,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,qBAAqB,CAAC;AAM7B,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,aAAa;sBAEF,OAAO;UAGxB,CAAC;AAER,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,UAAU,GAAG;IACd,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAoBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAS3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqCvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,2CAmCA;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2UAmBtD"}

package/dist/layouts/notebook/client.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@hanzo/ui/cn';
+import { createContext, Fragment, use, useMemo, useRef, useState, } from 'react';
+import { useSidebar } from '../../components/sidebar/base.js';
+import { ChevronDown } from '@hanzo/ui/icons';
+import Link from '@hanzo/docs/link';
+import { usePathname } from '@hanzo/docs/framework';
+import { useIsScrollTop } from '@hanzo/ui/hooks/use-is-scroll-top';
+import { LinkItem, } from '@hanzo/ui/link-item';
+import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
+import { isTabActive, } from '../../components/sidebar/tabs/dropdown.js';
+export const LayoutContext = createContext(null);
+export function LayoutContextProvider({ navTransparentMode = 'none', navMode, tabMode, children, }) {
+    const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;
+    const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';
+    return (_jsx(LayoutContext, { value: useMemo(() => ({
+            isNavTransparent,
+            navMode,
+            tabMode,
+        }), [isNavTransparent, navMode, tabMode]), children: children }));
+}
+export function LayoutHeader(props) {
+    const { open } = useSidebar();
+    const { isNavTransparent } = use(LayoutContext);
+    return (_jsx("header", { "data-transparent": isNavTransparent && !open, ...props, children: props.children }));
+}
+export 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 (_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: children }));
+}
+export function LayoutHeaderTabs({ options, className, ...props }) {
+    const pathname = usePathname();
+    const selectedIdx = useMemo(() => {
+        return options.findLastIndex((option) => isTabActive(option, pathname));
+    }, [options, pathname]);
+    return (_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 (_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));
+        }) }));
+}
+export function NavbarLinkItem({ item, className, ...props }) {
+    if (item.type === 'custom')
+        return item.children;
+    if (item.type === 'menu') {
+        return _jsx(NavbarLinkItemMenu, { item: item, className: className, ...props });
+    }
+    return (_jsx(LinkItem, { item: 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;
+        }
+        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 (_jsxs(Popover, { open: open, onOpenChange: (value) => {
+            if (freezeUntil.current === null || Date.now() >= freezeUntil.current)
+                setOpen(value);
+        }, children: [_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: onPointerEnter, onPointerLeave: onPointerLeave, ...props, children: [item.url ? (_jsx(LinkItem, { item: item, children: item.text })) : (item.text), _jsx(ChevronDown, { className: "size-3" })] }), _jsx(PopoverContent, { className: "flex flex-col p-1 text-fd-muted-foreground text-start", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: item.items.map((child, i) => {
+                    if (child.type === 'custom')
+                        return _jsx(Fragment, { children: child.children }, i);
+                    return (_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));
+                }) })] }));
+}

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 { Sidebar } from './sidebar.js';
+import type * as PageTree from '@hanzo/docs/page-tree';
+import type { SidebarPageTreeComponents } from '../../components/sidebar/page-tree.js';
+import { type GetSidebarTabsOptions } from '../../components/sidebar/tabs/index.js';
+import { type SidebarTabWithProps } from '../../components/sidebar/tabs/dropdown.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<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'>>;
+    /**
+     * Support collapsing the sidebar on desktop mode
+     *
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+}
+export declare function DocsLayout(props: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# 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,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,EAQR,MAAM,WAAW,CAAC;AAOnB,OAAO,KAAK,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAavD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAE5C,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,SACE,cAAc,CAAC,OAAO,CAAC,EACvB,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAEhD;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAE7D,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsNhD"}

package/dist/layouts/notebook/index.js

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

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

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import type * as PageTree from '@hanzo/docs/page-tree';
+import { type BreadcrumbOptions } from '@hanzo/docs/breadcrumb';
+export declare function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverTrigger({ className, ...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 PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+    date: Date;
+}): 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 {};
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../src/layouts/notebook/page/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,wBAAwB,CAAC;AAiBhC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqDvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAqD1B;AA8DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;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,CAAA;CAAE,2CAiBxD;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;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA8B1D;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"}

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

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, Fragment, use, useEffect, useEffectEvent, useMemo, useRef, useState, } from 'react';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@hanzo/ui/icons';
+import Link from '@hanzo/docs/link';
+import { cn } from '@hanzo/ui/cn';
+import { useI18n } from '../../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../../contexts/tree.js';
+import { usePathname } from '@hanzo/docs/framework';
+import { getBreadcrumbItemsFromPath, } from '@hanzo/docs/breadcrumb';
+import { isActive } from '@hanzo/ui/urls';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../../components/ui/collapsible.js';
+import { useTOCItems } from '../../../components/toc/index.js';
+import { useActiveAnchor } from '@hanzo/docs/toc';
+import { LayoutContext } from '../client.js';
+import { useFooterItems } from '@hanzo/ui/hooks/use-footer-items';
+const TocPopoverContext = createContext(null);
+export function PageTOCPopover({ className, children, ...rest }) {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const { isNavTransparent } = use(LayoutContext);
+    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, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, "data-toc-popover": "", 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)]', className), ...rest, children: _jsx("header", { ref: ref, className: cn('border-b backdrop-blur-sm transition-colors', (!isNavTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: children }) }) }));
+}
+export function PageTOCPopoverTrigger({ className, ...props }) {
+    const { text } = useI18n();
+    const { open } = use(TocPopoverContext);
+    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, { 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: [_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-[opacity,translate,color]', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-[opacity,translate]', !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-content": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
+}
+export function PageLastUpdate({ date: value, ...props }) {
+    const { text } = useI18n();
+    const [date, setDate] = useState('');
+    useEffect(() => {
+        // to the timezone of client
+        setDate(value.toLocaleDateString());
+    }, [value]);
+    return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
+}
+export function PageFooter({ items, ...props }) {
+    const footerList = useFooterItems();
+    const pathname = usePathname();
+    const { previous, next } = useMemo(() => {
+        if (items)
+            return items;
+        const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+        if (idx === -1)
+            return {};
+        return {
+            previous: footerList[idx - 1],
+            next: footerList[idx + 1],
+        };
+    }, [footerList, items, pathname]);
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4', 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));
+        }) }));
+}