@hanzo/docs-base-ui 16.4.2 → 16.4.8

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

@@ -1,20 +1,20 @@
 import { NavigationMenuContentProps, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
 import { LinkProps } from "@hanzo/docs-core/link";
-import * as react_jsx_runtime90 from "react/jsx-runtime";
-import * as react9 from "react";
-import * as _base_ui_react9 from "@base-ui/react";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react0 from "react";
+import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/layouts/home/navbar.d.ts
-declare const NavbarMenu: react9.ForwardRefExoticComponent<Omit<_base_ui_react9.NavigationMenuItemProps & react9.RefAttributes<HTMLDivElement>, "ref"> & react9.RefAttributes<HTMLDivElement>>;
+declare const NavbarMenu: react0.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuItemProps, "ref"> & react0.RefAttributes<HTMLDivElement>, "ref"> & react0.RefAttributes<HTMLDivElement>>;
 declare function NavbarMenuContent({
   className,
   ...props
-}: NavigationMenuContentProps): react_jsx_runtime90.JSX.Element;
+}: NavigationMenuContentProps): react_jsx_runtime17.JSX.Element;
 declare function NavbarMenuTrigger({
   className,
   ...props
-}: NavigationMenuTriggerProps): react_jsx_runtime90.JSX.Element;
-declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime90.JSX.Element;
+}: NavigationMenuTriggerProps): react_jsx_runtime17.JSX.Element;
+declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime17.JSX.Element;
 //#endregion
 export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };
 //# sourceMappingURL=navbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","names":[],"sources":["../../../src/layouts/home/navbar.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,YAAU,MAAA,CAAA,0BAAA,KAAqB,eAAA,CAArB,uBAAA,GAAA,MAAA,CAAA,cAAA,0BAAA,MAAA,CAAA,cAAA;iBAEP,iBAAA;;;GAA2C,6BAA0B,mBAAA,CAAA,GAAA,CAAA;iBAgBrE,iBAAA;;;GAA2C,6BAA0B,mBAAA,CAAA,GAAA,CAAA;iBAiBrE,cAAA,QAAsB,YAAS,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"navbar.d.ts","names":[],"sources":["../../../src/layouts/home/navbar.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,YAAU,MAAA,CAAA,0BAAA,KAAA,KAAqB,eAAA,CAArB,uBAAA,WAAA,MAAA,CAAA,cAAA,0BAAA,MAAA,CAAA,cAAA;iBAEP,iBAAA;;;GAA2C,6BAA0B,mBAAA,CAAA,GAAA,CAAA;iBAgBrE,iBAAA;;;GAA2C,6BAA0B,mBAAA,CAAA,GAAA,CAAA;iBAiBrE,cAAA,QAAsB,YAAS,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -1,11 +1,11 @@
 import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
-import * as react_jsx_runtime40 from "react/jsx-runtime";
-import * as react0 from "react";
+import * as react_jsx_runtime132 from "react/jsx-runtime";
+import * as react16 from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { LinkItemType } from "@hanzo/docs-ui/link-item";
+import { LinkItemType } from "@hanzo/docs-radix-ui/link-item";
 
 //#region src/layouts/notebook/client.d.ts
-declare const LayoutContext: react0.Context<(LayoutInfo & {
+declare const LayoutContext: react16.Context<(LayoutInfo & {
   isNavTransparent: boolean;
 }) | null>;
 interface LayoutInfo {
@@ -20,28 +20,28 @@ declare function LayoutContextProvider({
 }: LayoutInfo & {
   navTransparentMode?: 'always' | 'top' | 'none';
   children: ReactNode;
-}): react_jsx_runtime40.JSX.Element;
-declare function LayoutHeader(props: ComponentProps<'header'>): react_jsx_runtime40.JSX.Element;
+}): react_jsx_runtime132.JSX.Element;
+declare function LayoutHeader(props: ComponentProps<'header'>): react_jsx_runtime132.JSX.Element;
 declare function LayoutBody({
   className,
   style,
   children,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime40.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime132.JSX.Element;
 declare function LayoutHeaderTabs({
   options,
   className,
   ...props
 }: ComponentProps<'div'> & {
   options: SidebarTabWithProps[];
-}): react_jsx_runtime40.JSX.Element;
+}): react_jsx_runtime132.JSX.Element;
 declare function NavbarLinkItem({
   item,
   className,
   ...props
 }: {
   item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime40.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+} & HTMLAttributes<HTMLElement>): any;
 //#endregion
 export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAuBa,eAAa,MAAA,CAAA,SAAA;;;UAOT,UAAA;EAPJ,OAAA,EAAA,SAKN,GAAA,QALmB;EAOT,OAAA,EAAA,KAAU,GAAA,MAAA;AAK3B;AACE,iBADc,qBAAA,CACd;EAAA,kBAAA;EAAA,OAAA;EAAA,OAAA;EAAA;CAAA,EAIC,UAJD,GAAA;EACA,kBAAA,CAAA,EAAA,QAAA,GAAA,KAAA,GAAA,MAAA;EACA,QAAA,EAIU,SAJV;CACA,CAAA,EAID,mBAAA,CAAA,GAAA,CAAA,OAJC;AACC,iBAuBa,YAAA,CAvBb,KAAA,EAuBiC,cAvBjC,CAAA,QAAA,CAAA,CAAA,EAuByD,mBAAA,CAAA,GAAA,CAAA,OAvBzD;AAES,iBAgCI,UAAA,CAhCJ;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAgCyD,cAhCzD,CAAA,KAAA,CAAA,CAAA,EAgC8E,mBAAA,CAAA,GAAA,CAAA,OAhC9E;AACX,iBAoEe,gBAAA,CApEf;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAoBD,CApBC,EAwEE,cAxEF,CAAA,KAAA,CAAA,GAAA;EAAA,OAAA,EAyEU,mBAzEV,EAAA;AAoBD,CAAA,CAAA,EAsDC,mBAAA,CAAA,GAAA,CAAA,OAtDmC;AAWpB,iBA2EA,cAAA,CA3EU;EAAA,IAAA;EAAA,SAAA;EAAA,GAAA;AAAc,CAAd,EAAA;EAAG,IAAA,EA+ElB,YA/EkB;CAAW,GA+EZ,cA/EY,CA+EG,WA/EH,CAAA,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GA+Ee,mBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QA/Ef,CA+Ee,SA/Ef,CAAA,GA+Ee,OA/Ef,CAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GA+Ee,MAAA,CAAA,WAAA,GAAA,MAAA,CAAA,YA/Ef,CAAA,OAAA,EAAA,MAAA,GA+Ee,MAAA,CAAA,qBA/Ef,CAAA,GAAA,CAAA,CAAA,GA+Ee,QA/Ef,CA+Ee,SA/Ef,CAAA,GAAA,IAAA,GAAA,SAAA,CAAA,GAAA,IAAA,GAAA,SAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAuBa,eAAa,OAAA,CAAA,SAAA;;;UAOT,UAAA;EAPJ,OAAA,EAAA,SAKN,GAAA,QALmB;EAOT,OAAA,EAAA,KAAU,GAAA,MAAA;AAK3B;AACE,iBADc,qBAAA,CACd;EAAA,kBAAA;EAAA,OAAA;EAAA,OAAA;EAAA;CAAA,EAIC,UAJD,GAAA;EACA,kBAAA,CAAA,EAAA,QAAA,GAAA,KAAA,GAAA,MAAA;EACA,QAAA,EAIU,SAJV;CACA,CAAA,EAID,oBAAA,CAAA,GAAA,CAAA,OAJC;AACC,iBAuBa,YAAA,CAvBb,KAAA,EAuBiC,cAvBjC,CAAA,QAAA,CAAA,CAAA,EAuByD,oBAAA,CAAA,GAAA,CAAA,OAvBzD;AAES,iBAgCI,UAAA,CAhCJ;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAgCyD,cAhCzD,CAAA,KAAA,CAAA,CAAA,EAgC8E,oBAAA,CAAA,GAAA,CAAA,OAhC9E;AACX,iBAoEe,gBAAA,CApEf;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAoBD,CApBC,EAwEE,cAxEF,CAAA,KAAA,CAAA,GAAA;EAAA,OAAA,EAyEU,mBAzEV,EAAA;AAoBD,CAAA,CAAA,EAsDC,oBAAA,CAAA,GAAA,CAAA,OAtDmC;AAWpB,iBA2EA,cAAA,CA3EU;EAAA,IAAA;EAAA,SAAA;EAAA,GAAA;AAAc,CAAd,EAAA;EAAG,IAAA,EA+ElB,YA/EkB;CAAW,GA+EZ,cA/EY,CA+EG,WA/EH,CAAA,CAAA,EAAA,GAAA"}

package/dist/layouts/notebook/client.js

@@ -9,8 +9,8 @@ import { cn } from "@hanzo/docs-ui/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
 import { Fragment as Fragment$1, createContext, use, useMemo, useRef, useState } from "react";
-import { useIsScrollTop } from "@hanzo/docs-ui/hooks/use-is-scroll-top";
-import { LinkItem } from "@hanzo/docs-ui/link-item";
+import { useIsScrollTop } from "@hanzo/docs-radix-ui/hooks/use-is-scroll-top";
+import { LinkItem } from "@hanzo/docs-radix-ui/link-item";
 
 //#region src/layouts/notebook/client.tsx
 const LayoutContext = createContext(null);

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":["className","Fragment"],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type HTMLAttributes,\n  type PointerEvent,\n  type ReactNode,\n  use,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { ChevronDown } from 'lucide-react';\nimport Link from '@hanzo/docs-core/link';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@hanzo/docs-ui/hooks/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@hanzo/docs-ui/link-item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nexport const LayoutContext = createContext<\n  | (LayoutInfo & {\n      isNavTransparent: boolean;\n    })\n  | null\n>(null);\n\nexport interface LayoutInfo {\n  tabMode: 'sidebar' | 'navbar';\n  navMode: 'top' | 'auto';\n}\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  navMode,\n  tabMode,\n  children,\n}: LayoutInfo & {\n  navTransparentMode?: 'always' | 'top' | 'none';\n  children: ReactNode;\n}) {\n  const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;\n  const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';\n\n  return (\n    <LayoutContext\n      value={useMemo(\n        () => ({\n          isNavTransparent,\n          navMode,\n          tabMode,\n        }),\n        [isNavTransparent, navMode, tabMode],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { open } = useSidebar();\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent && !open} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { navMode } = use(LayoutContext)!;\n  const { collapsed } = useSidebar();\n  const pageCol =\n    'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';\n\n  return (\n    <div\n      id=\"nd-notebook-layout\"\n      className={cn(\n        '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]',\n        className,\n      )}\n      style={\n        {\n          gridTemplate:\n            navMode === 'top'\n              ? `\". header header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`\n              : `\"sidebar sidebar header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,\n          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',\n          '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',\n          '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',\n          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',\n          ...style,\n        } as object\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function LayoutHeaderTabs({\n  options,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTabWithProps[];\n}) {\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div className={cn('flex flex-row items-end gap-6', className)} {...props}>\n      {options.map((option, i) => {\n        const { title, url, unlisted, props: { className, ...rest } = {} } = option;\n        const isSelected = selectedIdx === i;\n\n        return (\n          <Link\n            key={i}\n            href={url}\n            className={cn(\n              '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',\n              unlisted && !isSelected && 'hidden',\n              isSelected && 'border-fd-primary text-fd-primary',\n              className,\n            )}\n            {...rest}\n          >\n            {title}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function NavbarLinkItem({\n  item,\n  className,\n  ...props\n}: { item: LinkItemType } & HTMLAttributes<HTMLElement>) {\n  if (item.type === 'custom') return item.children;\n\n  if (item.type === 'menu') {\n    return <NavbarLinkItemMenu item={item} className={className} {...props} />;\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        'text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary',\n        className,\n      )}\n      {...props}\n    >\n      {item.text}\n    </LinkItem>\n  );\n}\n\nfunction NavbarLinkItemMenu({\n  item,\n  hoverDelay = 50,\n  className,\n  ...props\n}: { item: MenuItemType; hoverDelay?: number } & HTMLAttributes<HTMLElement>) {\n  const [open, setOpen] = useState(false);\n  const timeoutRef = useRef<number>(null);\n  const freezeUntil = useRef<number>(null);\n\n  const delaySetOpen = (value: boolean) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    timeoutRef.current = window.setTimeout(() => {\n      setOpen(value);\n      freezeUntil.current = Date.now() + 300;\n    }, hoverDelay);\n  };\n  const onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(true);\n  };\n  const onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(false);\n  };\n  function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(value) => {\n        if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);\n      }}\n    >\n      <PopoverTrigger\n        className={cn(\n          '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',\n          className,\n        )}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        {...props}\n      >\n        {item.url ? <LinkItem item={item as { url: string }}>{item.text}</LinkItem> : item.text}\n        <ChevronDown className=\"size-3\" />\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"flex flex-col p-1 text-fd-muted-foreground text-start\"\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n      >\n        {item.items.map((child, i) => {\n          if (child.type === 'custom') return <Fragment key={i}>{child.children}</Fragment>;\n\n          return (\n            <LinkItem\n              key={i}\n              item={child}\n              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\"\n              onClick={() => {\n                if (isTouchDevice()) setOpen(false);\n              }}\n            >\n              {child.icon}\n              {child.text}\n            </LinkItem>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":["className","Fragment"],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type HTMLAttributes,\n  type PointerEvent,\n  type ReactNode,\n  use,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { ChevronDown } from 'lucide-react';\nimport Link from '@hanzo/docs-core/link';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@hanzo/docs-radix-ui/hooks/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@hanzo/docs-radix-ui/link-item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nexport const LayoutContext = createContext<\n  | (LayoutInfo & {\n      isNavTransparent: boolean;\n    })\n  | null\n>(null);\n\nexport interface LayoutInfo {\n  tabMode: 'sidebar' | 'navbar';\n  navMode: 'top' | 'auto';\n}\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  navMode,\n  tabMode,\n  children,\n}: LayoutInfo & {\n  navTransparentMode?: 'always' | 'top' | 'none';\n  children: ReactNode;\n}) {\n  const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;\n  const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';\n\n  return (\n    <LayoutContext\n      value={useMemo(\n        () => ({\n          isNavTransparent,\n          navMode,\n          tabMode,\n        }),\n        [isNavTransparent, navMode, tabMode],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { open } = useSidebar();\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent && !open} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { navMode } = use(LayoutContext)!;\n  const { collapsed } = useSidebar();\n  const pageCol =\n    'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';\n\n  return (\n    <div\n      id=\"nd-notebook-layout\"\n      className={cn(\n        '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]',\n        className,\n      )}\n      style={\n        {\n          gridTemplate:\n            navMode === 'top'\n              ? `\". header header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`\n              : `\"sidebar sidebar header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,\n          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',\n          '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',\n          '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',\n          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',\n          ...style,\n        } as object\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function LayoutHeaderTabs({\n  options,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTabWithProps[];\n}) {\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div className={cn('flex flex-row items-end gap-6', className)} {...props}>\n      {options.map((option, i) => {\n        const { title, url, unlisted, props: { className, ...rest } = {} } = option;\n        const isSelected = selectedIdx === i;\n\n        return (\n          <Link\n            key={i}\n            href={url}\n            className={cn(\n              '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',\n              unlisted && !isSelected && 'hidden',\n              isSelected && 'border-fd-primary text-fd-primary',\n              className,\n            )}\n            {...rest}\n          >\n            {title}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function NavbarLinkItem({\n  item,\n  className,\n  ...props\n}: { item: LinkItemType } & HTMLAttributes<HTMLElement>) {\n  if (item.type === 'custom') return item.children;\n\n  if (item.type === 'menu') {\n    return <NavbarLinkItemMenu item={item} className={className} {...props} />;\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        'text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary',\n        className,\n      )}\n      {...props}\n    >\n      {item.text}\n    </LinkItem>\n  );\n}\n\nfunction NavbarLinkItemMenu({\n  item,\n  hoverDelay = 50,\n  className,\n  ...props\n}: { item: MenuItemType; hoverDelay?: number } & HTMLAttributes<HTMLElement>) {\n  const [open, setOpen] = useState(false);\n  const timeoutRef = useRef<number>(null);\n  const freezeUntil = useRef<number>(null);\n\n  const delaySetOpen = (value: boolean) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    timeoutRef.current = window.setTimeout(() => {\n      setOpen(value);\n      freezeUntil.current = Date.now() + 300;\n    }, hoverDelay);\n  };\n  const onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(true);\n  };\n  const onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(false);\n  };\n  function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(value) => {\n        if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);\n      }}\n    >\n      <PopoverTrigger\n        className={cn(\n          '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',\n          className,\n        )}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        {...props}\n      >\n        {item.url ? <LinkItem item={item as { url: string }}>{item.text}</LinkItem> : item.text}\n        <ChevronDown className=\"size-3\" />\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"flex flex-col p-1 text-fd-muted-foreground text-start\"\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n      >\n        {item.items.map((child, i) => {\n          if (child.type === 'custom') return <Fragment key={i}>{child.children}</Fragment>;\n\n          return (\n            <LinkItem\n              key={i}\n              item={child}\n              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\"\n              onClick={() => {\n                if (isTouchDevice()) setOpen(false);\n              }}\n            >\n              {child.icon}\n              {child.text}\n            </LinkItem>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { GetSidebarTabsOptions } from "../../components/sidebar/tabs/index.js";
 import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
 import { BaseLayoutProps } from "../shared/index.js";
 import { Sidebar } from "./sidebar.js";
-import * as react_jsx_runtime60 from "react/jsx-runtime";
+import * as react_jsx_runtime140 from "react/jsx-runtime";
 import { ComponentProps, FC, HTMLAttributes, ReactNode } from "react";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
@@ -32,7 +32,7 @@ interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<ty
    */
   collapsible?: boolean;
 }
-declare function DocsLayout(props: DocsLayoutProps): react_jsx_runtime60.JSX.Element;
+declare function DocsLayout(props: DocsLayoutProps): react_jsx_runtime140.JSX.Element;
 //#endregion
 export { DocsLayout, DocsLayoutProps };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/notebook/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAgCiB,eAAA,SAAwB;QACjC,QAAA,CAAS;;EADA,GAAA,CAAA,EAIT,eAJyB,CAAA,KAAA,CAAA,GAAA;IACzB,IAAS,CAAA,EAAA,KAAA,GAAA,MAAA;EAGT,CAAA;EAII,OAAA,CAAA,EAAA,cAAA;EAEsB,cAAA,CAAA,EAAf,cAAe,CAAA,cAAA,CAAA;;UAGxB,cAAA,SAEN,cAfqC,CAAA,OAAA,CAAA,EAgBrC,IAhBqC,CAgBhC,cAhBgC,CAAA,OAgBV,OAhBU,CAAA,EAAA,kBAAA,GAAA,UAAA,CAAA,CAAA;EAAe,UAAA,CAAA,EAiBzC,OAjByC,CAiBjC,yBAjBiC,CAAA;EAa9C;;;EAIa,IAAA,CAAA,EAKd,mBALc,EAAA,GAKU,qBALV,GAAA,KAAA;EAAR,MAAA,CAAA,EAOJ,SAPI,GAOQ,EAPR,CAOW,cAPX,CAAA,KAAA,CAAA,CAAA;EAKN,MAAA,CAAA,EAGE,SAHF,GAGc,EAHd,CAGiB,cAHjB,CAAA,KAAA,CAAA,CAAA;EAAwB;;;;;EAGP,WAAA,CAAA,EAAA,OAAA;;AAVtB,iBAoBY,UAAA,CApBZ,KAAA,EAoB8B,eApB9B,CAAA,EAoB6C,mBAAA,CAAA,GAAA,CAAA,OApB7C"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/notebook/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAgCiB,eAAA,SAAwB;QACjC,QAAA,CAAS;;EADA,GAAA,CAAA,EAIT,eAJyB,CAAA,KAAA,CAAA,GAAA;IACzB,IAAS,CAAA,EAAA,KAAA,GAAA,MAAA;EAGT,CAAA;EAII,OAAA,CAAA,EAAA,cAAA;EAEsB,cAAA,CAAA,EAAf,cAAe,CAAA,cAAA,CAAA;;UAGxB,cAAA,SAEN,cAfqC,CAAA,OAAA,CAAA,EAgBrC,IAhBqC,CAgBhC,cAhBgC,CAAA,OAgBV,OAhBU,CAAA,EAAA,kBAAA,GAAA,UAAA,CAAA,CAAA;EAAe,UAAA,CAAA,EAiBzC,OAjByC,CAiBjC,yBAjBiC,CAAA;EAa9C;;;EAIa,IAAA,CAAA,EAKd,mBALc,EAAA,GAKU,qBALV,GAAA,KAAA;EAAR,MAAA,CAAA,EAOJ,SAPI,GAOQ,EAPR,CAOW,cAPX,CAAA,KAAA,CAAA,CAAA;EAKN,MAAA,CAAA,EAGE,SAHF,GAGc,EAHd,CAGiB,cAHjB,CAAA,KAAA,CAAA,CAAA;EAAwB;;;;;EAGP,WAAA,CAAA,EAAA,OAAA;;AAVtB,iBAoBY,UAAA,CApBZ,KAAA,EAoB8B,eApB9B,CAAA,EAoB6C,oBAAA,CAAA,GAAA,CAAA,OApB7C"}

package/dist/layouts/notebook/index.js

@@ -2,17 +2,17 @@ import { buttonVariants } from "../../components/ui/button.js";
 import { tree_exports } from "../../contexts/tree.js";
 import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
 import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem } from "./client.js";
-import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
 import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
-import { ThemeToggle } from "../shared/theme-toggle.js";
+import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
 import { LanguageToggle } from "../shared/language-toggle.js";
+import { ThemeToggle } from "../shared/theme-toggle.js";
 import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
 import { Sidebar as Sidebar$1, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport } from "./sidebar.js";
 import { cn } from "@hanzo/docs-ui/cn";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Languages, Sidebar, X } from "lucide-react";
 import { useMemo } from "react";
-import { LinkItem } from "@hanzo/docs-ui/link-item";
+import { LinkItem } from "@hanzo/docs-radix-ui/link-item";
 
 //#region src/layouts/notebook/index.tsx
 function DocsLayout(props) {
@@ -45,24 +45,20 @@ function DocsLayout(props) {
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
 			...rest,
 			children: [
-				/* @__PURE__ */ jsxs(Header, { children: [
-					navMode === "auto" && /* @__PURE__ */ jsxs("div", {
-						className: "flex justify-between",
-						children: [renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-medium" }), collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-							className: cn(buttonVariants({
-								color: "ghost",
-								size: "icon-sm",
-								className: "mt-px mb-auto text-fd-muted-foreground"
-							})),
-							children: /* @__PURE__ */ jsx(Sidebar, {})
-						})]
-					}),
-					nav.children,
-					tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
-						options: tabs,
-						className: cn(tabMode === "navbar" && "lg:hidden")
-					})
-				] }),
+				/* @__PURE__ */ jsxs(Header, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between",
+					children: [renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-medium" }), collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
+						className: cn(buttonVariants({
+							color: "ghost",
+							size: "icon-sm",
+							className: "mt-px mb-auto text-fd-muted-foreground"
+						})),
+						children: /* @__PURE__ */ jsx(Sidebar, {})
+					})]
+				}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
+					options: tabs,
+					className: cn(tabMode === "navbar" && "lg:hidden")
+				})] }),
 				viewport,
 				/* @__PURE__ */ jsx(Footer, { children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
 					item,
@@ -143,13 +139,17 @@ function DocsNavbar({ links, tabs, tabMode = "sidebar", sidebar: { collapsible:
 			children: [
 				/* @__PURE__ */ 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" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-						className: cn(buttonVariants({
-							color: "ghost",
-							size: "icon-sm"
-						}), "text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
-						children: /* @__PURE__ */ jsx(Sidebar, {})
-					}), renderTitleNav(nav, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") })]
+					children: [
+						sidebarCollapsible && navMode === "auto" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
+							className: cn(buttonVariants({
+								color: "ghost",
+								size: "icon-sm"
+							}), "text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
+							children: /* @__PURE__ */ jsx(Sidebar, {})
+						}),
+						renderTitleNav(nav, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") }),
+						nav.children
+					]
 				}),
 				searchToggle.enabled !== false && (searchToggle.components?.lg ? /* @__PURE__ */ jsx("div", {
 					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "rounded-xl max-w-sm" : "max-w-[240px]"),
@@ -165,7 +165,6 @@ function DocsNavbar({ links, tabs, tabMode = "sidebar", sidebar: { collapsible:
 							className: "flex items-center gap-6 empty:hidden max-lg:hidden",
 							children: links.filter((item) => item.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(NavbarLinkItem, { item }, i))
 						}),
-						nav.children,
 						links.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
 							item,
 							className: cn(buttonVariants({

package/dist/layouts/notebook/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","SidebarIcon","TreeContextProvider","Sidebar"],"sources":["../../../src/layouts/notebook/index.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { type BaseLayoutProps, renderTitleNav, resolveLinkItems } from '@/layouts/shared';\nimport {\n  Sidebar,\n  SidebarCollapseTrigger,\n  SidebarContent,\n  SidebarDrawer,\n  SidebarLinkItem,\n  SidebarPageTree,\n  SidebarTrigger,\n  SidebarViewport,\n} from './sidebar';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, Sidebar as SidebarIcon, X } from 'lucide-react';\nimport { LanguageToggle } from '@/layouts/shared/language-toggle';\nimport { ThemeToggle } from '@/layouts/shared/theme-toggle';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport {\n  LayoutBody,\n  LayoutContextProvider,\n  LayoutHeader,\n  LayoutHeaderTabs,\n  NavbarLinkItem,\n} from '@/layouts/notebook/client';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { LinkItem, type LinkItemType } from '@hanzo/docs-ui/link-item';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n  tabMode?: 'sidebar' | 'navbar';\n\n  nav?: BaseLayoutProps['nav'] & {\n    mode?: 'top' | 'auto';\n  };\n\n  sidebar?: SidebarOptions;\n\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode | FC<ComponentProps<'div'>>;\n  footer?: ReactNode | FC<ComponentProps<'div'>>;\n\n  /**\n   * Support collapsing the sidebar on desktop mode\n   *\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n}\n\nexport function DocsLayout(props: DocsLayoutProps) {\n  const {\n    tabMode = 'sidebar',\n    nav = {},\n    sidebar: { tabs: tabOptions, defaultOpenLevel, prefetch, ...sidebarProps } = {},\n    i18n = false,\n    themeSwitch = {},\n    tree,\n  } = props;\n\n  const navMode = nav.mode ?? 'auto';\n  const links = resolveLinkItems(props);\n  const tabs = useMemo(() => {\n    if (Array.isArray(tabOptions)) {\n      return tabOptions;\n    }\n\n    if (typeof tabOptions === 'object') {\n      return getSidebarTabs(tree, tabOptions);\n    }\n\n    if (tabOptions !== false) {\n      return getSidebarTabs(tree);\n    }\n\n    return [];\n  }, [tabOptions, tree]);\n\n  function sidebar() {\n    const { banner, footer, components, collapsible = true, ...rest } = sidebarProps;\n\n    const iconLinks = links.filter((item) => item.type === 'icon');\n    const Header =\n      typeof banner === 'function'\n        ? banner\n        : ({ className, ...props }: ComponentProps<'div'>) => (\n            <div className={cn('flex flex-col gap-3 p-4 pb-2 empty:hidden', className)} {...props}>\n              {props.children}\n              {banner}\n            </div>\n          );\n    const Footer =\n      typeof footer === 'function'\n        ? footer\n        : ({ className, ...props }: ComponentProps<'div'>) => (\n            <div\n              className={cn(\n                'hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2',\n                iconLinks.length > 0 && 'max-lg:flex',\n                className,\n              )}\n              {...props}\n            >\n              {props.children}\n              {footer}\n            </div>\n          );\n    const viewport = (\n      <SidebarViewport>\n        {links\n          .filter((item) => item.type !== 'icon')\n          .map((item, i, arr) => (\n            <SidebarLinkItem\n              key={i}\n              item={item}\n              className={cn('lg:hidden', i === arr.length - 1 && 'mb-4')}\n            />\n          ))}\n\n        <SidebarPageTree {...components} />\n      </SidebarViewport>\n    );\n\n    return (\n      <>\n        <SidebarContent {...rest}>\n          <Header>\n            {navMode === 'auto' && (\n              <div className=\"flex justify-between\">\n                {renderTitleNav(nav, {\n                  className: 'inline-flex items-center gap-2.5 font-medium',\n                })}\n                {collapsible && (\n                  <SidebarCollapseTrigger\n                    className={cn(\n                      buttonVariants({\n                        color: 'ghost',\n                        size: 'icon-sm',\n                        className: 'mt-px mb-auto text-fd-muted-foreground',\n                      }),\n                    )}\n                  >\n                    <SidebarIcon />\n                  </SidebarCollapseTrigger>\n                )}\n              </div>\n            )}\n            {nav.children}\n            {tabs.length > 0 && (\n              <SidebarTabsDropdown\n                options={tabs}\n                className={cn(tabMode === 'navbar' && 'lg:hidden')}\n              />\n            )}\n          </Header>\n          {viewport}\n          <Footer>\n            {iconLinks.map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({\n                    size: 'icon-sm',\n                    color: 'ghost',\n                    className: 'lg:hidden',\n                  }),\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n          </Footer>\n        </SidebarContent>\n        <SidebarDrawer {...rest}>\n          <Header>\n            <SidebarTrigger\n              className={cn(\n                buttonVariants({\n                  size: 'icon-sm',\n                  color: 'ghost',\n                  className: 'ms-auto text-fd-muted-foreground',\n                }),\n              )}\n            >\n              <X />\n            </SidebarTrigger>\n            {tabs.length > 0 && <SidebarTabsDropdown options={tabs} />}\n          </Header>\n          {viewport}\n          <Footer\n            className={cn(\n              'hidden flex-row items-center justify-end',\n              (i18n || themeSwitch.enabled !== false) && 'flex',\n              iconLinks.length > 0 && 'max-lg:flex',\n            )}\n          >\n            {iconLinks.map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({\n                    size: 'icon-sm',\n                    color: 'ghost',\n                  }),\n                  'text-fd-muted-foreground lg:hidden',\n                  i === iconLinks.length - 1 && 'me-auto',\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n            {i18n && (\n              <LanguageToggle>\n                <Languages className=\"size-4.5 text-fd-muted-foreground\" />\n              </LanguageToggle>\n            )}\n            {themeSwitch.enabled !== false &&\n              (themeSwitch.component ?? (\n                <ThemeToggle mode={themeSwitch.mode ?? 'light-dark-system'} />\n              ))}\n          </Footer>\n        </SidebarDrawer>\n      </>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <LayoutContextProvider\n        navMode={nav.mode ?? 'auto'}\n        tabMode={tabMode}\n        navTransparentMode={nav.transparentMode}\n      >\n        <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n          <LayoutBody {...props.containerProps}>\n            {sidebar()}\n            <DocsNavbar {...props} links={links} tabs={tabs} />\n            {props.children}\n          </LayoutBody>\n        </Sidebar>\n      </LayoutContextProvider>\n    </TreeContextProvider>\n  );\n}\n\nfunction DocsNavbar({\n  links,\n  tabs,\n  tabMode = 'sidebar',\n  sidebar: { collapsible: sidebarCollapsible = true } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  nav = {},\n  i18n,\n}: DocsLayoutProps & {\n  links: LinkItemType[];\n  tabs: SidebarTabWithProps[];\n}) {\n  const navMode = nav.mode ?? 'auto';\n  const showLayoutTabs = tabMode === 'navbar' && tabs.length > 0;\n\n  return (\n    <LayoutHeader\n      id=\"nd-subnav\"\n      className={cn(\n        '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)]',\n        showLayoutTabs && 'lg:layout:[--fd-header-height:--spacing(24)]',\n      )}\n    >\n      <div data-header-body=\"\" className=\"flex border-b px-4 gap-2 h-14 md:px-6\">\n        <div\n          className={cn(\n            'items-center',\n            navMode === 'top' && 'flex flex-1',\n            navMode === 'auto' && 'hidden has-data-[collapsed=true]:md:flex max-md:flex',\n          )}\n        >\n          {sidebarCollapsible && navMode === 'auto' && (\n            <SidebarCollapseTrigger\n              className={cn(\n                buttonVariants({\n                  color: 'ghost',\n                  size: 'icon-sm',\n                }),\n                'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden',\n              )}\n            >\n              <SidebarIcon />\n            </SidebarCollapseTrigger>\n          )}\n          {renderTitleNav(nav, {\n            className: cn(\n              'inline-flex items-center gap-2.5 font-semibold',\n              navMode === 'auto' && 'md:hidden',\n            ),\n          })}\n        </div>\n        {searchToggle.enabled !== false &&\n          (searchToggle.components?.lg ? (\n            <div\n              className={cn(\n                'w-full my-auto max-md:hidden',\n                navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]',\n              )}\n            >\n              {searchToggle.components.lg}\n            </div>\n          ) : (\n            <LargeSearchToggle\n              hideIfDisabled\n              className={cn(\n                'w-full my-auto max-md:hidden',\n                navMode === 'top' ? 'rounded-xl max-w-sm ps-2.5' : 'max-w-[240px]',\n              )}\n            />\n          ))}\n        <div className=\"flex flex-1 items-center justify-end md:gap-2\">\n          <div className=\"flex items-center gap-6 empty:hidden max-lg:hidden\">\n            {links\n              .filter((item) => item.type !== 'icon')\n              .map((item, i) => (\n                <NavbarLinkItem key={i} item={item} />\n              ))}\n          </div>\n          {nav.children}\n          {links\n            .filter((item) => item.type === 'icon')\n            .map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({ size: 'icon-sm', color: 'ghost' }),\n                  'text-fd-muted-foreground max-lg:hidden',\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n\n          <div className=\"flex items-center md:hidden\">\n            {searchToggle.enabled !== false &&\n              (searchToggle.components?.sm ?? <SearchToggle hideIfDisabled className=\"p-2\" />)}\n            <SidebarTrigger\n              className={cn(\n                buttonVariants({\n                  color: 'ghost',\n                  size: 'icon-sm',\n                  className: 'p-2 -me-1.5',\n                }),\n              )}\n            >\n              <SidebarIcon />\n            </SidebarTrigger>\n          </div>\n\n          <div className=\"flex items-center gap-2 max-md:hidden\">\n            {i18n && (\n              <LanguageToggle>\n                <Languages className=\"size-4.5 text-fd-muted-foreground\" />\n              </LanguageToggle>\n            )}\n            {themeSwitch.enabled !== false &&\n              (themeSwitch.component ?? (\n                <ThemeToggle mode={themeSwitch.mode ?? 'light-dark-system'} />\n              ))}\n            {sidebarCollapsible && navMode === 'top' && (\n              <SidebarCollapseTrigger\n                className={cn(\n                  buttonVariants({\n                    color: 'secondary',\n                    size: 'icon-sm',\n                  }),\n                  'text-fd-muted-foreground rounded-full -me-1.5',\n                )}\n              >\n                <SidebarIcon />\n              </SidebarCollapseTrigger>\n            )}\n          </div>\n        </div>\n      </div>\n      {showLayoutTabs && (\n        <LayoutHeaderTabs\n          data-header-tabs=\"\"\n          className=\"overflow-x-auto border-b px-6 h-10 max-lg:hidden\"\n          options={tabs}\n        />\n      )}\n    </LayoutHeader>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","SidebarIcon","TreeContextProvider","Sidebar"],"sources":["../../../src/layouts/notebook/index.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { type BaseLayoutProps, renderTitleNav, resolveLinkItems } from '@/layouts/shared';\nimport {\n  Sidebar,\n  SidebarCollapseTrigger,\n  SidebarContent,\n  SidebarDrawer,\n  SidebarLinkItem,\n  SidebarPageTree,\n  SidebarTrigger,\n  SidebarViewport,\n} from './sidebar';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, Sidebar as SidebarIcon, X } from 'lucide-react';\nimport { LanguageToggle } from '@/layouts/shared/language-toggle';\nimport { ThemeToggle } from '@/layouts/shared/theme-toggle';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport {\n  LayoutBody,\n  LayoutContextProvider,\n  LayoutHeader,\n  LayoutHeaderTabs,\n  NavbarLinkItem,\n} from '@/layouts/notebook/client';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { LinkItem, type LinkItemType } from '@hanzo/docs-radix-ui/link-item';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n  tabMode?: 'sidebar' | 'navbar';\n\n  nav?: BaseLayoutProps['nav'] & {\n    mode?: 'top' | 'auto';\n  };\n\n  sidebar?: SidebarOptions;\n\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode | FC<ComponentProps<'div'>>;\n  footer?: ReactNode | FC<ComponentProps<'div'>>;\n\n  /**\n   * Support collapsing the sidebar on desktop mode\n   *\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n}\n\nexport function DocsLayout(props: DocsLayoutProps) {\n  const {\n    tabMode = 'sidebar',\n    nav = {},\n    sidebar: { tabs: tabOptions, defaultOpenLevel, prefetch, ...sidebarProps } = {},\n    i18n = false,\n    themeSwitch = {},\n    tree,\n  } = props;\n\n  const navMode = nav.mode ?? 'auto';\n  const links = resolveLinkItems(props);\n  const tabs = useMemo(() => {\n    if (Array.isArray(tabOptions)) {\n      return tabOptions;\n    }\n\n    if (typeof tabOptions === 'object') {\n      return getSidebarTabs(tree, tabOptions);\n    }\n\n    if (tabOptions !== false) {\n      return getSidebarTabs(tree);\n    }\n\n    return [];\n  }, [tabOptions, tree]);\n\n  function sidebar() {\n    const { banner, footer, components, collapsible = true, ...rest } = sidebarProps;\n\n    const iconLinks = links.filter((item) => item.type === 'icon');\n    const Header =\n      typeof banner === 'function'\n        ? banner\n        : ({ className, ...props }: ComponentProps<'div'>) => (\n            <div className={cn('flex flex-col gap-3 p-4 pb-2 empty:hidden', className)} {...props}>\n              {props.children}\n              {banner}\n            </div>\n          );\n    const Footer =\n      typeof footer === 'function'\n        ? footer\n        : ({ className, ...props }: ComponentProps<'div'>) => (\n            <div\n              className={cn(\n                'hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2',\n                iconLinks.length > 0 && 'max-lg:flex',\n                className,\n              )}\n              {...props}\n            >\n              {props.children}\n              {footer}\n            </div>\n          );\n    const viewport = (\n      <SidebarViewport>\n        {links\n          .filter((item) => item.type !== 'icon')\n          .map((item, i, arr) => (\n            <SidebarLinkItem\n              key={i}\n              item={item}\n              className={cn('lg:hidden', i === arr.length - 1 && 'mb-4')}\n            />\n          ))}\n\n        <SidebarPageTree {...components} />\n      </SidebarViewport>\n    );\n\n    return (\n      <>\n        <SidebarContent {...rest}>\n          <Header>\n            {navMode === 'auto' && (\n              <div className=\"flex justify-between\">\n                {renderTitleNav(nav, {\n                  className: 'inline-flex items-center gap-2.5 font-medium',\n                })}\n                {collapsible && (\n                  <SidebarCollapseTrigger\n                    className={cn(\n                      buttonVariants({\n                        color: 'ghost',\n                        size: 'icon-sm',\n                        className: 'mt-px mb-auto text-fd-muted-foreground',\n                      }),\n                    )}\n                  >\n                    <SidebarIcon />\n                  </SidebarCollapseTrigger>\n                )}\n              </div>\n            )}\n            {tabs.length > 0 && (\n              <SidebarTabsDropdown\n                options={tabs}\n                className={cn(tabMode === 'navbar' && 'lg:hidden')}\n              />\n            )}\n          </Header>\n          {viewport}\n          <Footer>\n            {iconLinks.map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({\n                    size: 'icon-sm',\n                    color: 'ghost',\n                    className: 'lg:hidden',\n                  }),\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n          </Footer>\n        </SidebarContent>\n        <SidebarDrawer {...rest}>\n          <Header>\n            <SidebarTrigger\n              className={cn(\n                buttonVariants({\n                  size: 'icon-sm',\n                  color: 'ghost',\n                  className: 'ms-auto text-fd-muted-foreground',\n                }),\n              )}\n            >\n              <X />\n            </SidebarTrigger>\n            {tabs.length > 0 && <SidebarTabsDropdown options={tabs} />}\n          </Header>\n          {viewport}\n          <Footer\n            className={cn(\n              'hidden flex-row items-center justify-end',\n              (i18n || themeSwitch.enabled !== false) && 'flex',\n              iconLinks.length > 0 && 'max-lg:flex',\n            )}\n          >\n            {iconLinks.map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({\n                    size: 'icon-sm',\n                    color: 'ghost',\n                  }),\n                  'text-fd-muted-foreground lg:hidden',\n                  i === iconLinks.length - 1 && 'me-auto',\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n            {i18n && (\n              <LanguageToggle>\n                <Languages className=\"size-4.5 text-fd-muted-foreground\" />\n              </LanguageToggle>\n            )}\n            {themeSwitch.enabled !== false &&\n              (themeSwitch.component ?? (\n                <ThemeToggle mode={themeSwitch.mode ?? 'light-dark-system'} />\n              ))}\n          </Footer>\n        </SidebarDrawer>\n      </>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <LayoutContextProvider\n        navMode={nav.mode ?? 'auto'}\n        tabMode={tabMode}\n        navTransparentMode={nav.transparentMode}\n      >\n        <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n          <LayoutBody {...props.containerProps}>\n            {sidebar()}\n            <DocsNavbar {...props} links={links} tabs={tabs} />\n            {props.children}\n          </LayoutBody>\n        </Sidebar>\n      </LayoutContextProvider>\n    </TreeContextProvider>\n  );\n}\n\nfunction DocsNavbar({\n  links,\n  tabs,\n  tabMode = 'sidebar',\n  sidebar: { collapsible: sidebarCollapsible = true } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  nav = {},\n  i18n,\n}: DocsLayoutProps & {\n  links: LinkItemType[];\n  tabs: SidebarTabWithProps[];\n}) {\n  const navMode = nav.mode ?? 'auto';\n  const showLayoutTabs = tabMode === 'navbar' && tabs.length > 0;\n\n  return (\n    <LayoutHeader\n      id=\"nd-subnav\"\n      className={cn(\n        '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)]',\n        showLayoutTabs && 'lg:layout:[--fd-header-height:--spacing(24)]',\n      )}\n    >\n      <div data-header-body=\"\" className=\"flex border-b px-4 gap-2 h-14 md:px-6\">\n        <div\n          className={cn(\n            'items-center',\n            navMode === 'top' && 'flex flex-1',\n            navMode === 'auto' && 'hidden has-data-[collapsed=true]:md:flex max-md:flex',\n          )}\n        >\n          {sidebarCollapsible && navMode === 'auto' && (\n            <SidebarCollapseTrigger\n              className={cn(\n                buttonVariants({\n                  color: 'ghost',\n                  size: 'icon-sm',\n                }),\n                'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden',\n              )}\n            >\n              <SidebarIcon />\n            </SidebarCollapseTrigger>\n          )}\n          {renderTitleNav(nav, {\n            className: cn(\n              'inline-flex items-center gap-2.5 font-semibold',\n              navMode === 'auto' && 'md:hidden',\n            ),\n          })}\n          {nav.children}\n        </div>\n        {searchToggle.enabled !== false &&\n          (searchToggle.components?.lg ? (\n            <div\n              className={cn(\n                'w-full my-auto max-md:hidden',\n                navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]',\n              )}\n            >\n              {searchToggle.components.lg}\n            </div>\n          ) : (\n            <LargeSearchToggle\n              hideIfDisabled\n              className={cn(\n                'w-full my-auto max-md:hidden',\n                navMode === 'top' ? 'rounded-xl max-w-sm ps-2.5' : 'max-w-[240px]',\n              )}\n            />\n          ))}\n        <div className=\"flex flex-1 items-center justify-end md:gap-2\">\n          <div className=\"flex items-center gap-6 empty:hidden max-lg:hidden\">\n            {links\n              .filter((item) => item.type !== 'icon')\n              .map((item, i) => (\n                <NavbarLinkItem key={i} item={item} />\n              ))}\n          </div>\n          {links\n            .filter((item) => item.type === 'icon')\n            .map((item, i) => (\n              <LinkItem\n                key={i}\n                item={item}\n                className={cn(\n                  buttonVariants({ size: 'icon-sm', color: 'ghost' }),\n                  'text-fd-muted-foreground max-lg:hidden',\n                )}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </LinkItem>\n            ))}\n\n          <div className=\"flex items-center md:hidden\">\n            {searchToggle.enabled !== false &&\n              (searchToggle.components?.sm ?? <SearchToggle hideIfDisabled className=\"p-2\" />)}\n            <SidebarTrigger\n              className={cn(\n                buttonVariants({\n                  color: 'ghost',\n                  size: 'icon-sm',\n                  className: 'p-2 -me-1.5',\n                }),\n              )}\n            >\n              <SidebarIcon />\n            </SidebarTrigger>\n          </div>\n\n          <div className=\"flex items-center gap-2 max-md:hidden\">\n            {i18n && (\n              <LanguageToggle>\n                <Languages className=\"size-4.5 text-fd-muted-foreground\" />\n              </LanguageToggle>\n            )}\n            {themeSwitch.enabled !== false &&\n              (themeSwitch.component ?? (\n                <ThemeToggle mode={themeSwitch.mode ?? 'light-dark-system'} />\n              ))}\n            {sidebarCollapsible && navMode === 'top' && (\n              <SidebarCollapseTrigger\n                className={cn(\n                  buttonVariants({\n                    color: 'secondary',\n                    size: 'icon-sm',\n                  }),\n                  'text-fd-muted-foreground rounded-full -me-1.5',\n                )}\n              >\n                <SidebarIcon />\n              </SidebarCollapseTrigger>\n            )}\n          </div>\n        </div>\n      </div>\n      {showLayoutTabs && (\n        <LayoutHeaderTabs\n          data-header-tabs=\"\"\n          className=\"overflow-x-auto border-b px-6 h-10 max-lg:hidden\"\n          options={tabs}\n        />\n      )}\n    </LayoutHeader>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime103 from "react/jsx-runtime";
+import * as react_jsx_runtime73 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 import { BreadcrumbOptions } from "@hanzo/docs-core/breadcrumb";
 import * as PageTree from "@hanzo/docs-core/page-tree";
@@ -8,18 +8,18 @@ declare function PageTOCPopover({
   className,
   children,
   ...rest
-}: ComponentProps<'div'>): react_jsx_runtime103.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime73.JSX.Element;
 declare function PageTOCPopoverTrigger({
   className,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime103.JSX.Element;
-declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime103.JSX.Element;
+}: ComponentProps<'button'>): react_jsx_runtime73.JSX.Element;
+declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime73.JSX.Element;
 declare function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
-}): react_jsx_runtime103.JSX.Element;
+}): react_jsx_runtime73.JSX.Element;
 type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
 interface FooterProps extends ComponentProps<'div'> {
   /**
@@ -32,15 +32,17 @@ interface FooterProps extends ComponentProps<'div'> {
 }
 declare function PageFooter({
   items,
+  children,
+  className,
   ...props
-}: FooterProps): react_jsx_runtime103.JSX.Element;
+}: FooterProps): react_jsx_runtime73.JSX.Element;
 type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
 declare function PageBreadcrumb({
   includeRoot,
   includeSeparator,
   includePage,
   ...props
-}: BreadcrumbProps): react_jsx_runtime103.JSX.Element | null;
+}: BreadcrumbProps): react_jsx_runtime73.JSX.Element | null;
 //#endregion
 export { BreadcrumbProps, FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":[],"mappings":";;;;;;iBAiCgB,cAAA;;;;GAAiD,wBAAqB,oBAAA,CAAA,GAAA,CAAA;iBAsDtE,qBAAA;;;GAA+C,2BAAwB,oBAAA,CAAA,GAAA,CAAA;iBA2GvE,qBAAA,QAA6B,wBAAqB,oBAAA,CAAA,GAAA,CAAA;AAjKlD,iBA6KA,cAAA,CA7Kc;EAAA,IAAA,EA8KtB,KA9KsB;EAAA,GAAA;CAAA,EAgL3B,IAhL2B,CAgLtB,cAhLsB,CAAA,GAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EAAG,IAAA,EAgLkB,IAhLlB;CAAW,CAAA,EAgLa,oBAAA,CAAA,GAAA,CAAA,OAhLb;KAgMvC,IAAA,GAAO,IAhMqD,CAgMhD,QAAA,CAAS,IAhMuC,EAAA,MAAA,GAAA,aAAA,GAAA,KAAA,CAAA;AAAqB,UAiMrE,WAAA,SAAoB,cAjMiD,CAAA,KAAA,CAAA,CAAA;EAAA;AAsDtF;;EAA+D,KAAA,CAAA,EAAA;IAAwB,QAAA,CAAA,EAgJxE,IAhJwE;IAAA,IAAA,CAAA,EAiJ5E,IAjJ4E;EA2GvE,CAAA;AAYhB;AACQ,iBA6BQ,UAAA,CA7BR;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EA6BwC,WA7BxC,CAAA,EA6BmD,oBAAA,CAAA,GAAA,CAAA,OA7BnD;AAEA,KAqFI,eAAA,GAAkB,iBArFtB,GAqF0C,cArF1C,CAAA,KAAA,CAAA;AAAL,iBAuFa,cAAA,CAvFb;EAAA,WAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EA4FA,eA5FA,CAAA,EA4Fe,oBAAA,CAAA,GAAA,CAAA,OAAA,GA5Ff,IAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":[],"mappings":";;;;;;iBAiCgB,cAAA;;;;GAAiD,wBAAqB,mBAAA,CAAA,GAAA,CAAA;iBAsDtE,qBAAA;;;GAA+C,2BAAwB,mBAAA,CAAA,GAAA,CAAA;iBA2GvE,qBAAA,QAA6B,wBAAqB,mBAAA,CAAA,GAAA,CAAA;AAjKlD,iBA6KA,cAAA,CA7Kc;EAAA,IAAA,EA8KtB,KA9KsB;EAAA,GAAA;CAAA,EAgL3B,IAhL2B,CAgLtB,cAhLsB,CAAA,GAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EAAG,IAAA,EAgLkB,IAhLlB;CAAW,CAAA,EAgLa,mBAAA,CAAA,GAAA,CAAA,OAhLb;KAgMvC,IAAA,GAAO,IAhMqD,CAgMhD,QAAA,CAAS,IAhMuC,EAAA,MAAA,GAAA,aAAA,GAAA,KAAA,CAAA;AAAqB,UAiMrE,WAAA,SAAoB,cAjMiD,CAAA,KAAA,CAAA,CAAA;EAAA;AAsDtF;;EAA+D,KAAA,CAAA,EAAA;IAAwB,QAAA,CAAA,EAgJxE,IAhJwE;IAAA,IAAA,CAAA,EAiJ5E,IAjJ4E;EA2GvE,CAAA;AAYhB;AACQ,iBA6BQ,UAAA,CA7BR;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6B6D,WA7B7D,CAAA,EA6BwE,mBAAA,CAAA,GAAA,CAAA,OA7BxE;AAEA,KAwFI,eAAA,GAAkB,iBAxFtB,GAwF0C,cAxF1C,CAAA,KAAA,CAAA;AAAL,iBA0Fa,cAAA,CA1Fb;EAAA,WAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EA+FA,eA/FA,CAAA,EA+Fe,mBAAA,CAAA,GAAA,CAAA,OAAA,GA/Ff,IAAA"}

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

@@ -8,13 +8,13 @@ import { LayoutContext } from "../client.js";
 import Link from "@hanzo/docs-core/link";
 import { usePathname } from "@hanzo/docs-core/framework";
 import { cn } from "@hanzo/docs-ui/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment as Fragment$1, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getBreadcrumbItemsFromPath } from "@hanzo/docs-core/breadcrumb";
-import { isActive } from "@hanzo/docs-ui/urls";
+import { isActive } from "@hanzo/docs-radix-ui/urls";
 import { useActiveAnchor } from "@hanzo/docs-core/toc";
-import { useFooterItems } from "@hanzo/docs-ui/hooks/use-footer-items";
+import { useFooterItems } from "@hanzo/docs-radix-ui/hooks/use-footer-items";
 
 //#region src/layouts/notebook/page/client.tsx
 const TocPopoverContext = createContext(null);
@@ -22,16 +22,16 @@ function PageTOCPopover({ className, children, ...rest }) {
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
 	const { isNavTransparent } = use(LayoutContext);
-	const onClick = useEffectEvent((e) => {
+	const onClick = useCallback((e) => {
 		if (!open) return;
 		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-	});
+	}, [open]);
 	useEffect(() => {
 		window.addEventListener("click", onClick);
 		return () => {
 			window.removeEventListener("click", onClick);
 		};
-	}, []);
+	}, [onClick]);
 	return /* @__PURE__ */ jsx(TocPopoverContext, {
 		value: useMemo(() => ({
 			open,
@@ -145,7 +145,7 @@ function PageLastUpdate({ date: value, ...props }) {
 		]
 	});
 }
-function PageFooter({ items, ...props }) {
+function PageFooter({ items, children, className, ...props }) {
 	const footerList = useFooterItems();
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
@@ -161,17 +161,17 @@ function PageFooter({ items, ...props }) {
 		items,
 		pathname
 	]);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
 		...props,
-		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", props.className),
-		children: [previous ? /* @__PURE__ */ jsx(FooterItem, {
+		children: [previous && /* @__PURE__ */ jsx(FooterItem, {
 			item: previous,
 			index: 0
-		}) : null, next ? /* @__PURE__ */ jsx(FooterItem, {
+		}), next && /* @__PURE__ */ jsx(FooterItem, {
 			item: next,
 			index: 1
-		}) : null]
-	});
+		})]
+	}), children] });
 }
 function FooterItem({ item, index }) {
 	const { text } = (0, i18n_exports.useI18n)();

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":["Fragment"],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from '@hanzo/docs-core/link';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from '@hanzo/docs-core/breadcrumb';\nimport { isActive } from '@hanzo/docs-ui/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from '@hanzo/docs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@hanzo/docs-ui/hooks/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        '@container grid gap-4',\n        previous && next ? 'grid-cols-2' : 'grid-cols-1',\n        props.className,\n      )}\n    >\n      {previous ? <FooterItem item={previous} index={0} /> : null}\n      {next ? <FooterItem item={next} index={1} /> : null}\n    </div>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAM,oBAAoB,cAGhB,KAAK;AAEf,SAAgB,eAAe,EAAE,WAAW,UAAU,GAAG,QAA+B;CACtF,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,qBAAqB,IAAI,cAAc;CAE/C,MAAM,UAAU,gBAAgB,MAAa;AAC3C,MAAI,CAAC,KAAM;AAEX,MAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,OAAsB,CAAE,SAAQ,MAAM;GACjF;AAEF,iBAAgB;AACd,SAAO,iBAAiB,SAAS,QAAQ;AAEzC,eAAa;AACX,UAAO,oBAAoB,SAAS,QAAQ;;IAE7C,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,OAAO,eACE;GACL;GACA;GACD,GACD,CAAC,SAAS,KAAK,CAChB;YAED,oBAAC;GACO;GACN,cAAc;GACd,oBAAiB;GACjB,WAAW,GACT,yJACA,UACD;GACD,GAAI;aAEJ,oBAAC;IACM;IACL,WAAW,GACT,gDACC,CAAC,oBAAoB,SAAS,uBAC/B,QAAQ,YACT;IAEA;KACM;IACG;GACI;;AAIxB,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAmC;CACvF,MAAM,EAAE,oCAAkB;CAC1B,MAAM,EAAE,SAAS,IAAI,kBAAkB;CACvC,MAAM,sCAAqB;CAC3B,MAAM,SAAS,iBAAiB;CAChC,MAAM,WAAW,cACT,MAAM,WAAW,SAAS,WAAW,KAAK,IAAI,MAAM,EAAE,CAAC,EAC7D,CAAC,OAAO,OAAO,CAChB;CACD,MAAM,sCAAoB,CAAC,GAAG,GAAG;CACjC,MAAM,WAAW,aAAa,MAAM,CAAC;AAErC,QACE,qBAAC;EACC,WAAW,GACT,mJACA,UACD;EACD,4BAAyB;EACzB,GAAI;;GAEJ,oBAAC;IACC,QAAQ,WAAW,KAAK,KAAK,IAAI,GAAG,MAAM,OAAO;IACjD,KAAK;IACL,WAAW,GAAG,YAAY,QAAQ,kBAAkB;KACpD;GACF,qBAAC;IAAK,WAAU;eACd,oBAAC;KACC,WAAW,GACT,2BACA,QAAQ,sBACR,YAAY,kDACb;eAEA,MAAM,QAAQ,KAAK;MACf,EACP,oBAAC;KACC,WAAW,GACT,2BACA,CAAC,YAAY,iDACd;eAEA,MAAM,WAAW;MACb;KACF;GACP,oBAAC,eAAY,WAAW,GAAG,wCAAwC,QAAQ,aAAa,GAAI;;GACzE;;AAYzB,SAAS,MAAM,OAAe,KAAa,KAAqB;AAC9D,KAAI,QAAQ,IAAK,QAAO;AACxB,KAAI,QAAQ,IAAK,QAAO;AACxB,QAAO;;AAGT,SAAS,eAAe,EACtB,OACA,cAAc,GACd,OAAO,IACP,MAAM,GACN,MAAM,KACN,GAAG,gBACmB;CACtB,MAAM,kBAAkB,MAAM,OAAO,KAAK,IAAI;CAC9C,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,WAAY,kBAAkB,MAAO;CAC3C,MAAM,cAAc;EAClB,IAAI,OAAO;EACX,IAAI,OAAO;EACX,GAAG;EACH,MAAM;EACN;EACD;AAED,QACE,qBAAC;EACC,MAAK;EACL,SAAS,OAAO,KAAK,GAAG;EACxB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,GAAI;aAEJ,oBAAC;GAAO,GAAI;GAAa,WAAU;IAAsB,EACzD,oBAAC;GACC,GAAI;GACJ,QAAO;GACP,iBAAiB;GACjB,kBAAkB,gBAAgB;GAClC,eAAc;GACd,WAAW,cAAc,OAAO,EAAE,GAAG,OAAO,EAAE;GAC9C,WAAU;IACV;GACE;;AAIV,SAAgB,sBAAsB,OAA8B;AAClE,QACE,oBAAC;EACC,4BAAyB;EACzB,GAAI;EACJ,WAAW,GAAG,2CAA2C,MAAM,UAAU;YAExE,MAAM;GACY;;AAIzB,SAAgB,eAAe,EAC7B,MAAM,OACN,GAAG,SACsD;CACzD,MAAM,EAAE,oCAAkB;CAC1B,MAAM,CAAC,MAAM,WAAW,SAAS,GAAG;AAEpC,iBAAgB;AAEd,UAAQ,MAAM,oBAAoB,CAAC;IAClC,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAE,GAAI;EAAO,WAAW,GAAG,oCAAoC,MAAM,UAAU;;GAC7E,KAAK;GAAW;GAAE;;GACjB;;AAeR,SAAgB,WAAW,EAAE,OAAO,GAAG,SAAsB;CAC3D,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,UAAU,SAAS,cAAc;AACvC,MAAI,MAAO,QAAO;EAElB,MAAM,MAAM,WAAW,WAAW,SAAS,SAAS,KAAK,KAAK,UAAU,MAAM,CAAC;AAE/E,MAAI,QAAQ,GAAI,QAAO,EAAE;AACzB,SAAO;GACL,UAAU,WAAW,MAAM;GAC3B,MAAM,WAAW,MAAM;GACxB;IACA;EAAC;EAAY;EAAO;EAAS,CAAC;AAEjC,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GACT,yBACA,YAAY,OAAO,gBAAgB,eACnC,MAAM,UACP;aAEA,WAAW,oBAAC;GAAW,MAAM;GAAU,OAAO;IAAK,GAAG,MACtD,OAAO,oBAAC;GAAW,MAAM;GAAM,OAAO;IAAK,GAAG;GAC3C;;AAIV,SAAS,WAAW,EAAE,MAAM,SAAuC;CACjE,MAAM,EAAE,oCAAkB;CAC1B,MAAM,OAAO,UAAU,IAAI,cAAc;AAEzC,QACE,qBAAC;EACC,MAAM,KAAK;EACX,WAAW,GACT,mJACA,UAAU,KAAK,WAChB;aAED,qBAAC;GACC,WAAW,GACT,gDACA,UAAU,KAAK,mBAChB;cAED,oBAAC,QAAK,WAAU,yCAAyC,EACzD,oBAAC,iBAAG,KAAK,OAAS;IACd,EACN,oBAAC;GAAE,WAAU;aACV,KAAK,gBAAgB,UAAU,IAAI,KAAK,eAAe,KAAK;IAC3D;GACC;;AAMX,SAAgB,eAAe,EAC7B,aACA,kBACA,aACA,GAAG,SACe;CAClB,MAAM,sCAAoB;CAC1B,MAAM,EAAE,2CAAyB;CACjC,MAAM,QAAQ,cAAc;AAC1B,SAAO,2BAA2B,MAAM,MAAM;GAC5C;GACA;GACA;GACD,CAAC;IACD;EAAC;EAAa;EAAa;EAAkB;EAAM;EAAK,CAAC;AAE5D,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GAAG,8DAA8D,MAAM,UAAU;YAE3F,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,YAAY,GAAG,YAAY,MAAM,MAAM,SAAS,KAAK,8BAA8B;AAEzF,UACE,qBAACA,yBACE,MAAM,KAAK,oBAAC,gBAAa,WAAU,sBAAsB,EACzD,KAAK,MACJ,oBAAC;IACC,MAAM,KAAK;IACX,WAAW,GAAG,WAAW,sCAAsC;cAE9D,KAAK;KACD,GAEP,oBAAC;IAAgB;cAAY,KAAK;KAAY,KAVnC,EAYJ;IAEb;GACE"}
+{"version":3,"file":"client.js","names":["Fragment"],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from '@hanzo/docs-core/link';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from '@hanzo/docs-core/breadcrumb';\nimport { isActive } from '@hanzo/docs-radix-ui/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from '@hanzo/docs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@hanzo/docs-radix-ui/hooks/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useCallback((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  }, [open]);\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, [onClick]);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}