@hanzo/docs-base-ui 16.5.0 → 16.5.3

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/docs/client.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, createContext, type ReactNode, use, useMemo } from 'react';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { isTabActive } from '@/components/sidebar/tabs/dropdown';\nimport Link from '@hanzo/docs-core/link';\nimport type { SidebarTab } from '@/components/sidebar/tabs';\nimport { useIsScrollTop } from '@hanzo/docs-ui/hooks/use-is-scroll-top';\n\nexport const LayoutContext = createContext<{\n  isNavTransparent: boolean;\n} | null>(null);\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  children,\n}: {\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        }),\n        [isNavTransparent],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { collapsed } = useSidebar();\n\n  return (\n    <div\n      id=\"nd-docs-layout\"\n      className={cn(\n        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) 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      data-sidebar-collapsed={collapsed}\n      style={\n        {\n          gridTemplate: `\"sidebar header toc\"\n        \"sidebar toc-popover toc\"\n        \"sidebar main toc\" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - 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 LayoutTabs({\n  options,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTab[];\n}) {\n  const pathname = usePathname();\n  const selected = useMemo(() => {\n    return options.findLast((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        'flex flex-row items-end gap-6 overflow-auto [grid-area:main]',\n        props.className,\n      )}\n    >\n      {options.map((option, i) => (\n        <Link\n          key={i}\n          href={option.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            option.unlisted && selected !== option && 'hidden',\n            selected === option && 'border-fd-primary text-fd-primary',\n          )}\n        >\n          {option.title}\n        </Link>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,gBAAgB,cAEnB,KAAK;AAEf,SAAgB,sBAAsB,EACpC,qBAAqB,QACrB,YAIC;CACD,MAAM,QAAQ,eAAe,EAAE,SAAS,uBAAuB,OAAO,CAAC,IAAI;CAC3E,MAAM,mBAAmB,uBAAuB,QAAQ,QAAQ,uBAAuB;AAEvF,QACE,oBAAC;EACC,OAAO,eACE,EACL,kBACD,GACD,CAAC,iBAAiB,CACnB;EAEA;GACa;;AAIpB,SAAgB,aAAa,OAAiC;CAC5D,MAAM,EAAE,qBAAqB,IAAI,cAAc;AAE/C,QACE,oBAAC;EAAO,oBAAkB;EAAkB,GAAI;YAC7C,MAAM;GACA;;AAIb,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,GAAG,SAAgC;CAC1F,MAAM,EAAE,cAAc,YAAY;AAElC,QACE,oBAAC;EACC,IAAG;EACH,WAAW,GACT,iPACA,UACD;EACD,0BAAwB;EACxB,OACE;GACE,cAAc;;;GAGd,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB;GACnB,oBAAoB,YAAY,QAAQ;GACxC,GAAG;GACJ;EAEH,GAAI;EAEH;GACG;;AAIV,SAAgB,WAAW,EACzB,SACA,GAAG,SAGF;CACD,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,cAAc;AAC7B,SAAO,QAAQ,UAAU,WAAW,YAAY,QAAQ,SAAS,CAAC;IACjE,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,gEACA,MAAM,UACP;YAEA,QAAQ,KAAK,QAAQ,MACpB,oBAAC;GAEC,MAAM,OAAO;GACb,WAAW,GACT,kLACA,OAAO,YAAY,aAAa,UAAU,UAC1C,aAAa,UAAU,oCACxB;aAEA,OAAO;KARH,EASA,CACP;GACE"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/docs/client.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, createContext, type ReactNode, use, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { isTabActive } from '@/components/sidebar/tabs/dropdown';\nimport Link from '@hanzo/docs-core/link';\nimport type { SidebarTab } from '@/components/sidebar/tabs';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\n\nexport const LayoutContext = createContext<{\n  isNavTransparent: boolean;\n} | null>(null);\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  children,\n}: {\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        }),\n        [isNavTransparent],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { collapsed } = useSidebar();\n\n  return (\n    <div\n      id=\"nd-docs-layout\"\n      className={cn(\n        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) 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      data-sidebar-collapsed={collapsed}\n      style={\n        {\n          gridTemplate: `\"sidebar header toc\"\n        \"sidebar toc-popover toc\"\n        \"sidebar main toc\" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - 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 LayoutTabs({\n  options,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTab[];\n}) {\n  const pathname = usePathname();\n  const selected = useMemo(() => {\n    return options.findLast((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        'flex flex-row items-end gap-6 overflow-auto [grid-area:main]',\n        props.className,\n      )}\n    >\n      {options.map((option, i) => (\n        <Link\n          key={i}\n          href={option.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            option.unlisted && selected !== option && 'hidden',\n            selected === option && 'border-fd-primary text-fd-primary',\n          )}\n        >\n          {option.title}\n        </Link>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,gBAAgB,cAEnB,KAAK;AAEf,SAAgB,sBAAsB,EACpC,qBAAqB,QACrB,YAIC;CACD,MAAM,QAAQ,eAAe,EAAE,SAAS,uBAAuB,OAAO,CAAC,IAAI;CAC3E,MAAM,mBAAmB,uBAAuB,QAAQ,QAAQ,uBAAuB;AAEvF,QACE,oBAAC;EACC,OAAO,eACE,EACL,kBACD,GACD,CAAC,iBAAiB,CACnB;EAEA;GACa;;AAIpB,SAAgB,aAAa,OAAiC;CAC5D,MAAM,EAAE,qBAAqB,IAAI,cAAc;AAE/C,QACE,oBAAC;EAAO,oBAAkB;EAAkB,GAAI;YAC7C,MAAM;GACA;;AAIb,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,GAAG,SAAgC;CAC1F,MAAM,EAAE,cAAc,YAAY;AAElC,QACE,oBAAC;EACC,IAAG;EACH,WAAW,GACT,iPACA,UACD;EACD,0BAAwB;EACxB,OACE;GACE,cAAc;;;GAGd,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB;GACnB,oBAAoB,YAAY,QAAQ;GACxC,GAAG;GACJ;EAEH,GAAI;EAEH;GACG;;AAIV,SAAgB,WAAW,EACzB,SACA,GAAG,SAGF;CACD,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,cAAc;AAC7B,SAAO,QAAQ,UAAU,WAAW,YAAY,QAAQ,SAAS,CAAC;IACjE,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,gEACA,MAAM,UACP;YAEA,QAAQ,KAAK,QAAQ,MACpB,oBAAC;GAEC,MAAM,OAAO;GACb,WAAW,GACT,kLACA,OAAO,YAAY,aAAa,UAAU,UAC1C,aAAa,UAAU,oCACxB;aAEA,OAAO;KARH,EASA,CACP;GACE"}

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

@@ -1,10 +1,10 @@
 import { SidebarPageTreeComponents } from "../../components/sidebar/page-tree.js";
 import { GetSidebarTabsOptions } from "../../components/sidebar/tabs/index.js";
 import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
-import { Sidebar } from "./sidebar.js";
 import { BaseLayoutProps } from "../shared/index.js";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
+import { Sidebar } from "./sidebar.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/layouts/docs/index.d.ts
@@ -53,7 +53,7 @@ declare function DocsLayout({
   children,
   tree,
   ...props
-}: DocsLayoutProps): react_jsx_runtime141.JSX.Element;
+}: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsLayout, DocsLayoutProps };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/docs/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA0BiB,eAAA,SAAwB;QACjC,QAAA,CAAS;YAEL;EAHK,OAAA,CAAA,EAAA,KAAA,GAAgB,MAAA;EACzB;;;EASW,cAAA,CAAA,EAAA,cAAA,CAAe,cAAf,CAAA;;UAGT,cAAA,SAEN,cAfoD,CAAA,OAAA,CAAA,EAgBpD,IAhBoD,CAgB/C,cAhB+C,CAAA,OAgBzB,OAhByB,CAAA,EAAA,kBAAA,GAAA,UAAA,CAAA,CAAA;EAa9C,OAAA,CAAA,EAAA,OACR;EAE6B,SAAA,CAAA,EAEjB,SAFiB;EAAtB,UAAA,CAAA,EAGM,OAHN,CAGc,yBAHd,CAAA;EAEK;;;EAML,IAAA,CAAA,EAAA,mBAAA,EAAA,GAAwB,qBAAxB,GAAA,KAAA;EAAwB,MAAA,CAAA,EAEtB,SAFsB;EAEtB,MAAA,CAAA,EACA,SADA;EACA;;;;AAUX;EACS,WAAA,CAAA,EAAA,OAAA;;AAGI,iBAJG,UAAA,CAIH;EAAA,GAAA,EAAA;IAAA,eAAA;IAAA,GAAA;EAAA,CAAA;EAAA,OAAA,EAAA;IAAA,IAAA,EADH,WACG;IAAA,OAAA,EAAA,cAAA;IAAA,gBAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA;EAAA,YAAA;EAAA,WAAA;EAAA,OAAA;EAAA,IAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAYV,eAZU,CAAA,EAYK,oBAAA,CAAA,GAAA,CAAA,OAZL"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/docs/index.tsx"],"mappings":";;;;;;;;;;UA0BiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAEV,OAAA;EAL+B;;;EAU/B,cAAA,GAAiB,cAAA,CAAe,cAAA;AAAA;AAAA,UAGxB,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBkB;;;EAwBvC,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;EAtBT;;;;;EA6BA,WAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EACd,GAAA;IAAO,eAAA;IAAA,GAAoB;EAAA;EAC3B,OAAA;IACE,IAAA,EAAM,WAAA;IACN,OAAA,EAAS,cAAA;IACT,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,OAAA;EACA,IAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/docs/index.js

@@ -1,18 +1,18 @@
+import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../../components/ui/button.js";
-import { tree_exports } from "../../contexts/tree.js";
+import { TreeContextProvider } from "../../contexts/tree.js";
 import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
 import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs } from "./client.js";
-import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
+import { LinkItem } from "../../utils/link-item.js";
 import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
-import { ThemeToggle } from "../shared/theme-toggle.js";
+import { Sidebar as Sidebar$1, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport } from "./sidebar.js";
+import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle, LanguageToggleText } 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 } from "lucide-react";
 import { useMemo } from "react";
-import { LinkItem } from "@hanzo/docs-ui/link-item";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Languages, Sidebar } from "lucide-react";
 
 //#region src/layouts/docs/index.tsx
 function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = "auto", i18n = false, children, tree, ...props }) {
@@ -22,16 +22,16 @@ function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: si
 		if (sidebarTabs !== false) return getSidebarTabs(tree);
 		return [];
 	}, [tree, sidebarTabs]);
-	const links = resolveLinkItems(props);
+	const { menuItems } = useLinkItems(props);
 	function sidebar() {
 		const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;
 		if (component) return component;
-		const iconLinks = links.filter((item) => item.type === "icon");
-		const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [links.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+		const iconLinks = menuItems.filter((item) => item.type === "icon");
+		const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
 			item,
 			className: cn(i === list.length - 1 && "mb-4")
 		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
 			...rest,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -127,7 +127,7 @@ function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: si
 			})
 		] })] });
 	}
-	return /* @__PURE__ */ jsx(tree_exports.TreeContextProvider, {
+	return /* @__PURE__ */ jsx(TreeContextProvider, {
 		tree,
 		children: /* @__PURE__ */ jsx(LayoutContextProvider, {
 			navTransparentMode: transparentMode,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SidebarIcon","TreeContextProvider","Sidebar"],"sources":["../../../src/layouts/docs/index.tsx"],"sourcesContent":["import type * as PageTree from '@hanzo/docs-core/page-tree';\nimport { type ComponentProps, type HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { Languages, Sidebar as SidebarIcon } from 'lucide-react';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport {\n  Sidebar,\n  SidebarCollapseTrigger,\n  SidebarContent,\n  SidebarDrawer,\n  SidebarLinkItem,\n  SidebarPageTree,\n  SidebarTrigger,\n  SidebarViewport,\n} from './sidebar';\nimport { type BaseLayoutProps, renderTitleNav, resolveLinkItems } from '@/layouts/shared';\nimport { LinkItem } from '@hanzo/docs-ui/link-item';\nimport { LanguageToggle, LanguageToggleText } from '@/layouts/shared/language-toggle';\nimport { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs } from './client';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  tabMode?: 'top' | 'auto';\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n\n  /**\n   * Support collapsing the sidebar on desktop mode\n   *\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n}\n\nexport function DocsLayout({\n  nav: { transparentMode, ...nav } = {},\n  sidebar: {\n    tabs: sidebarTabs,\n    enabled: sidebarEnabled = true,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  tabMode = 'auto',\n  i18n = false,\n  children,\n  tree,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const links = resolveLinkItems(props);\n\n  function sidebar() {\n    const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    const iconLinks = links.filter((item) => item.type === 'icon');\n    const viewport = (\n      <SidebarViewport>\n        {links\n          .filter((v) => v.type !== 'icon')\n          .map((item, i, list) => (\n            <SidebarLinkItem key={i} item={item} className={cn(i === list.length - 1 && 'mb-4')} />\n          ))}\n        <SidebarPageTree {...components} />\n      </SidebarViewport>\n    );\n\n    return (\n      <>\n        <SidebarContent {...rest}>\n          <div className=\"flex flex-col gap-3 p-4 pb-2\">\n            <div className=\"flex\">\n              {renderTitleNav(nav, {\n                className: 'inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto',\n              })}\n              {nav.children}\n              {collapsible && (\n                <SidebarCollapseTrigger\n                  className={cn(\n                    buttonVariants({\n                      color: 'ghost',\n                      size: 'icon-sm',\n                      className: 'mb-auto text-fd-muted-foreground',\n                    }),\n                  )}\n                >\n                  <SidebarIcon />\n                </SidebarCollapseTrigger>\n              )}\n            </div>\n            {searchToggle.enabled !== false &&\n              (searchToggle.components?.lg ?? <LargeSearchToggle hideIfDisabled />)}\n            {tabs.length > 0 && tabMode === 'auto' && <SidebarTabsDropdown options={tabs} />}\n            {banner}\n          </div>\n          {viewport}\n          {(i18n || iconLinks.length > 0 || themeSwitch?.enabled !== false || footer) && (\n            <div className=\"flex flex-col border-t p-4 pt-2 empty:hidden\">\n              <div className=\"flex text-fd-muted-foreground items-center empty:hidden\">\n                {i18n && (\n                  <LanguageToggle>\n                    <Languages className=\"size-4.5\" />\n                  </LanguageToggle>\n                )}\n                {iconLinks.map((item, i) => (\n                  <LinkItem\n                    key={i}\n                    item={item}\n                    className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n                    aria-label={item.label}\n                  >\n                    {item.icon}\n                  </LinkItem>\n                ))}\n                {themeSwitch.enabled !== false &&\n                  (themeSwitch.component ?? (\n                    <ThemeToggle className=\"ms-auto p-0\" mode={themeSwitch.mode} />\n                  ))}\n              </div>\n              {footer}\n            </div>\n          )}\n        </SidebarContent>\n        <SidebarDrawer>\n          <div className=\"flex flex-col gap-3 p-4 pb-2\">\n            <div className=\"flex text-fd-muted-foreground items-center gap-1.5\">\n              <div className=\"flex flex-1\">\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: 'p-2',\n                      }),\n                    )}\n                    aria-label={item.label}\n                  >\n                    {item.icon}\n                  </LinkItem>\n                ))}\n              </div>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                  <LanguageToggleText />\n                </LanguageToggle>\n              )}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle className=\"p-0\" mode={themeSwitch.mode} />)}\n              <SidebarTrigger\n                className={cn(\n                  buttonVariants({\n                    color: 'ghost',\n                    size: 'icon-sm',\n                    className: 'p-2',\n                  }),\n                )}\n              >\n                <SidebarIcon />\n              </SidebarTrigger>\n            </div>\n            {tabs.length > 0 && <SidebarTabsDropdown options={tabs} />}\n            {banner}\n          </div>\n          {viewport}\n          <div className=\"flex flex-col border-t p-4 pt-2 empty:hidden\">{footer}</div>\n        </SidebarDrawer>\n      </>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <LayoutContextProvider navTransparentMode={transparentMode}>\n        <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n          <LayoutBody {...props.containerProps}>\n            {nav.enabled !== false &&\n              (nav.component ?? (\n                <LayoutHeader\n                  id=\"nd-subnav\"\n                  className=\"[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80\"\n                >\n                  {renderTitleNav(nav, {\n                    className: 'inline-flex items-center gap-2.5 font-semibold',\n                  })}\n                  <div className=\"flex-1\">{nav.children}</div>\n                  {searchToggle.enabled !== false &&\n                    (searchToggle.components?.sm ?? (\n                      <SearchToggle className=\"p-2\" hideIfDisabled />\n                    ))}\n                  {sidebarEnabled && (\n                    <SidebarTrigger\n                      className={cn(\n                        buttonVariants({\n                          color: 'ghost',\n                          size: 'icon-sm',\n                          className: 'p-2',\n                        }),\n                      )}\n                    >\n                      <SidebarIcon />\n                    </SidebarTrigger>\n                  )}\n                </LayoutHeader>\n              ))}\n            {sidebarEnabled && sidebar()}\n            {tabMode === 'top' && tabs.length > 0 && (\n              <LayoutTabs\n                options={tabs}\n                className=\"z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden\"\n              />\n            )}\n            {children}\n          </LayoutBody>\n        </Sidebar>\n      </LayoutContextProvider>\n    </TreeContextProvider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SidebarIcon","Sidebar"],"sources":["../../../src/layouts/docs/index.tsx"],"sourcesContent":["import type * as PageTree from '@hanzo/docs-core/page-tree';\nimport { type ComponentProps, type HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { Languages, Sidebar as SidebarIcon } from 'lucide-react';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport {\n  Sidebar,\n  SidebarCollapseTrigger,\n  SidebarContent,\n  SidebarDrawer,\n  SidebarLinkItem,\n  SidebarPageTree,\n  SidebarTrigger,\n  SidebarViewport,\n} from './sidebar';\nimport { type BaseLayoutProps, renderTitleNav, useLinkItems } from '@/layouts/shared';\nimport { LinkItem } from '@/utils/link-item';\nimport { LanguageToggle, LanguageToggleText } from '@/layouts/shared/language-toggle';\nimport { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs } from './client';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  tabMode?: 'top' | 'auto';\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n\n  /**\n   * Support collapsing the sidebar on desktop mode\n   *\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n}\n\nexport function DocsLayout({\n  nav: { transparentMode, ...nav } = {},\n  sidebar: {\n    tabs: sidebarTabs,\n    enabled: sidebarEnabled = true,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  tabMode = 'auto',\n  i18n = false,\n  children,\n  tree,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n\n  function sidebar() {\n    const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    const iconLinks = menuItems.filter((item) => item.type === 'icon');\n    const viewport = (\n      <SidebarViewport>\n        {menuItems\n          .filter((v) => v.type !== 'icon')\n          .map((item, i, list) => (\n            <SidebarLinkItem key={i} item={item} className={cn(i === list.length - 1 && 'mb-4')} />\n          ))}\n        <SidebarPageTree {...components} />\n      </SidebarViewport>\n    );\n\n    return (\n      <>\n        <SidebarContent {...rest}>\n          <div className=\"flex flex-col gap-3 p-4 pb-2\">\n            <div className=\"flex\">\n              {renderTitleNav(nav, {\n                className: 'inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto',\n              })}\n              {nav.children}\n              {collapsible && (\n                <SidebarCollapseTrigger\n                  className={cn(\n                    buttonVariants({\n                      color: 'ghost',\n                      size: 'icon-sm',\n                      className: 'mb-auto text-fd-muted-foreground',\n                    }),\n                  )}\n                >\n                  <SidebarIcon />\n                </SidebarCollapseTrigger>\n              )}\n            </div>\n            {searchToggle.enabled !== false &&\n              (searchToggle.components?.lg ?? <LargeSearchToggle hideIfDisabled />)}\n            {tabs.length > 0 && tabMode === 'auto' && <SidebarTabsDropdown options={tabs} />}\n            {banner}\n          </div>\n          {viewport}\n          {(i18n || iconLinks.length > 0 || themeSwitch?.enabled !== false || footer) && (\n            <div className=\"flex flex-col border-t p-4 pt-2 empty:hidden\">\n              <div className=\"flex text-fd-muted-foreground items-center empty:hidden\">\n                {i18n && (\n                  <LanguageToggle>\n                    <Languages className=\"size-4.5\" />\n                  </LanguageToggle>\n                )}\n                {iconLinks.map((item, i) => (\n                  <LinkItem\n                    key={i}\n                    item={item}\n                    className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n                    aria-label={item.label}\n                  >\n                    {item.icon}\n                  </LinkItem>\n                ))}\n                {themeSwitch.enabled !== false &&\n                  (themeSwitch.component ?? (\n                    <ThemeToggle className=\"ms-auto p-0\" mode={themeSwitch.mode} />\n                  ))}\n              </div>\n              {footer}\n            </div>\n          )}\n        </SidebarContent>\n        <SidebarDrawer>\n          <div className=\"flex flex-col gap-3 p-4 pb-2\">\n            <div className=\"flex text-fd-muted-foreground items-center gap-1.5\">\n              <div className=\"flex flex-1\">\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: 'p-2',\n                      }),\n                    )}\n                    aria-label={item.label}\n                  >\n                    {item.icon}\n                  </LinkItem>\n                ))}\n              </div>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                  <LanguageToggleText />\n                </LanguageToggle>\n              )}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle className=\"p-0\" mode={themeSwitch.mode} />)}\n              <SidebarTrigger\n                className={cn(\n                  buttonVariants({\n                    color: 'ghost',\n                    size: 'icon-sm',\n                    className: 'p-2',\n                  }),\n                )}\n              >\n                <SidebarIcon />\n              </SidebarTrigger>\n            </div>\n            {tabs.length > 0 && <SidebarTabsDropdown options={tabs} />}\n            {banner}\n          </div>\n          {viewport}\n          <div className=\"flex flex-col border-t p-4 pt-2 empty:hidden\">{footer}</div>\n        </SidebarDrawer>\n      </>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <LayoutContextProvider navTransparentMode={transparentMode}>\n        <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n          <LayoutBody {...props.containerProps}>\n            {nav.enabled !== false &&\n              (nav.component ?? (\n                <LayoutHeader\n                  id=\"nd-subnav\"\n                  className=\"[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80\"\n                >\n                  {renderTitleNav(nav, {\n                    className: 'inline-flex items-center gap-2.5 font-semibold',\n                  })}\n                  <div className=\"flex-1\">{nav.children}</div>\n                  {searchToggle.enabled !== false &&\n                    (searchToggle.components?.sm ?? (\n                      <SearchToggle className=\"p-2\" hideIfDisabled />\n                    ))}\n                  {sidebarEnabled && (\n                    <SidebarTrigger\n                      className={cn(\n                        buttonVariants({\n                          color: 'ghost',\n                          size: 'icon-sm',\n                          className: 'p-2',\n                        }),\n                      )}\n                    >\n                      <SidebarIcon />\n                    </SidebarTrigger>\n                  )}\n                </LayoutHeader>\n              ))}\n            {sidebarEnabled && sidebar()}\n            {tabMode === 'top' && tabs.length > 0 && (\n              <LayoutTabs\n                options={tabs}\n                className=\"z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden\"\n              />\n            )}\n            {children}\n          </LayoutBody>\n        </Sidebar>\n      </LayoutContextProvider>\n    </TreeContextProvider>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime32 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 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_runtime32.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function PageTOCPopoverTrigger({
   className,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime32.JSX.Element;
-declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime32.JSX.Element;
+}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
-}): react_jsx_runtime32.JSX.Element;
+}): react_jsx_runtime0.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_runtime32.JSX.Element;
+}: FooterProps): react_jsx_runtime0.JSX.Element;
 type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
 declare function PageBreadcrumb({
   includeRoot,
   includeSeparator,
   includePage,
   ...props
-}: BreadcrumbProps): react_jsx_runtime32.JSX.Element | null;
+}: BreadcrumbProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { BreadcrumbProps, FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../../src/layouts/docs/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,GAAA;AAAA,CAAA,EA6BwC,WA7BxC,CAAA,EA6BmD,mBAAA,CAAA,GAAA,CAAA,OA7BnD;AAEA,KAsFI,eAAA,GAAkB,iBAtFtB,GAsF0C,cAtF1C,CAAA,KAAA,CAAA;AAAL,iBAwFa,cAAA,CAxFb;EAAA,WAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EA6FA,eA7FA,CAAA,EA6Fe,mBAAA,CAAA,GAAA,CAAA,OAAA,GA7Ff,IAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../../src/layouts/docs/page/client.tsx"],"mappings":";;;;;;iBAiCgB,cAAA,CAAA;EAAiB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAQ,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsDtE,qBAAA,CAAA;EAAwB,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2GvE,qBAAA,CAAsB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAYlD,cAAA,CAAA;EACd,IAAA,EAAM,KAAA;EAAA,GACH;AAAA,GACF,IAAA,CAAK,cAAA;EAAqC,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAgBpD,IAAA,GAAO,IAAA,CAAK,QAAA,CAAS,IAAA;AAAA,UACT,WAAA,SAAoB,cAAA;EAjM4B;;;EAqM/D,KAAA;IACE,QAAA,GAAW,IAAA;IACX,IAAA,GAAO,IAAA;EAAA;AAAA;AAAA,iBAIK,UAAA,CAAA;EAAa,KAAA;EAAO,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA8DpE,eAAA,GAAkB,iBAAA,GAAoB,cAAA;AAAA,iBAElC,cAAA,CAAA;EACd,WAAA;EACA,gBAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,20 +1,20 @@
 'use client';
 
-import { i18n_exports } from "../../../contexts/i18n.js";
-import { tree_exports } from "../../../contexts/tree.js";
+import { useI18n } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
+import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
+import { isActive } from "../../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
-import { toc_exports } from "../../../components/toc/index.js";
+import { useTOCItems } from "../../../components/toc/index.js";
 import { LayoutContext } from "../client.js";
-import Link from "@hanzo/docs-core/link";
+import { useFooterItems } from "../../../utils/use-footer-items.js";
+import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { usePathname } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment as Fragment$1, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { getBreadcrumbItemsFromPath } from "@hanzo/docs-core/breadcrumb";
-import { isActive } from "@hanzo/docs-ui/urls";
 import { useActiveAnchor } from "@hanzo/docs-core/toc";
-import { useFooterItems } from "@hanzo/docs-ui/hooks/use-footer-items";
 
 //#region src/layouts/docs/page/client.tsx
 const TocPopoverContext = createContext(null);
@@ -52,12 +52,12 @@ function PageTOCPopover({ className, children, ...rest }) {
 	});
 }
 function PageTOCPopoverTrigger({ className, ...props }) {
-	const { text } = (0, i18n_exports.useI18n)();
+	const { text } = useI18n();
 	const { open } = use(TocPopoverContext);
-	const items = (0, toc_exports.useTOCItems)();
+	const items = useTOCItems();
 	const active = useActiveAnchor();
 	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
-	const path = (0, tree_exports.useTreePath)().at(-1);
+	const path = useTreePath().at(-1);
 	const showItem = selected !== -1 && !open;
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
@@ -130,7 +130,7 @@ function PageTOCPopoverContent(props) {
 	});
 }
 function PageLastUpdate({ date: value, ...props }) {
-	const { text } = (0, i18n_exports.useI18n)();
+	const { text } = useI18n();
 	const [date, setDate] = useState("");
 	useEffect(() => {
 		setDate(value.toLocaleDateString());
@@ -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,20 +161,20 @@ function PageFooter({ items, ...props }) {
 		items,
 		pathname
 	]);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
 		...props,
-		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)();
+	const { text } = useI18n();
 	const Icon = index === 0 ? ChevronLeft : ChevronRight;
 	return /* @__PURE__ */ jsxs(Link, {
 		href: item.url,
@@ -189,8 +189,8 @@ function FooterItem({ item, index }) {
 	});
 }
 function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
-	const path = (0, tree_exports.useTreePath)();
-	const { root } = (0, tree_exports.useTreeContext)();
+	const path = useTreePath();
+	const { root } = useTreeContext();
 	const items = useMemo(() => {
 		return getBreadcrumbItemsFromPath(root, path, {
 			includePage,
@@ -210,7 +210,7 @@ function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }
 		className: cn("flex items-center gap-1.5 text-sm text-fd-muted-foreground", props.className),
 		children: items.map((item, i) => {
 			const className = cn("truncate", i === items.length - 1 && "text-fd-primary font-medium");
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
+			return /* @__PURE__ */ jsxs(Fragment, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
 				href: item.url,
 				className: cn(className, "transition-opacity hover:opacity-80"),
 				children: item.name

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":["Fragment"],"sources":["../../../../src/layouts/docs/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      <div>{props.children}</div>\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\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":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/docs/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 '@/utils/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 '@/utils/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 '@/utils/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      <div>{props.children}</div>\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\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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"}

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

@@ -1,6 +1,6 @@
 import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.js";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { AnchorProviderProps, TOCItemType } from "@hanzo/docs-core/toc";
 
 //#region src/layouts/docs/page/index.d.ts
@@ -27,10 +27,16 @@ interface DocsPageProps {
    */
   breadcrumb?: Partial<BreadcrumbOptions>;
   /**
-   * Footer navigation, you can disable it by passing `false`
+   * Footer navigation, located under the page body.
+   *
+   * You can specify `footer.children` to add extra components under the footer.
    */
   footer?: Partial<FooterOptions>;
   children?: ReactNode;
+  /**
+   * Apply class names to the `#nd-page` container.
+   */
+  className?: string;
 }
 type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
   /**
@@ -55,7 +61,11 @@ declare function DocsPage({
     component: breadcrumb,
     ...breadcrumbProps
   },
-  footer,
+  footer: {
+    enabled: footerEnabled,
+    component: footerReplace,
+    ...footerProps
+  },
   full,
   tableOfContentPopover: {
     enabled: tocPopoverEnabled,
@@ -68,9 +78,10 @@ declare function DocsPage({
     ...tocOptions
   },
   toc,
-  children
+  children,
+  className
 }: DocsPageProps): ReactNode;
-declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime44.JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
  */
@@ -78,17 +89,17 @@ declare function DocsBody({
   children,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime44.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function DocsDescription({
   children,
   className,
   ...props
-}: ComponentProps<'p'>): react_jsx_runtime44.JSX.Element | null;
+}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element | null;
 declare function DocsTitle({
   children,
   className,
   ...props
-}: ComponentProps<'h1'>): react_jsx_runtime44.JSX.Element;
+}: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/layouts/docs/page/index.tsx"],"sourcesContent":[],"mappings":";;;;;;UAmBU,iBAAA,SAA0B;;aAEvB;AAPgE;AAK1B,UAKzC,aAAA,SAAsB,WAAA,CAAA;EAKf,OAAA,EAAA,OAAa;EACtB,SAAA,EAJK,SAIL;;AACW,UAFF,aAAA,CAEE;EACe,GAAA,CAAA,EAF1B,WAE0B,EAAA;EAAR,cAAA,CAAA,EADP,OACO,CADC,qBACD,CAAA;EAYH,qBAAA,CAAA,EAZG,OAYH,CAZW,4BAYX,CAAA;EAAR;;;;;EAUV,IAAA,CAAA,EAAA,OAAA;EAA6B;;;EASvB,UAAA,CAAA,EAnBI,OAmBJ,CAnBY,iBAmBZ,CAAA;EAGE;;AAAS;EAUN,MAAA,CAAA,EA3BL,OA2Ba,CA3BL,aA2BK,CAAA;EACC,QAAA,CAAA,EA1BZ,SA0BY;;KAvBpB,qBAAA,GAAwB,IAwB3B,CAxBgC,mBAwBhC,EAAA,QAAA,CAAA,GAAA;EACA;;;EAM2B,MAAA,CAAA,EA3BlB,SA2BkB;EAAuB;;;EAGjD,MAAA,CAAA,EAzBQ,SAyBR;EAAa,OAAA,EAAA,OAAA;EAAA,SAAA,EAtBH,SAsBG;EA2EA;AA4BhB;;EAAqC,KAAA,CAAA,EAAA,QAAA,GAAA,OAAA;CAAuB;KArHvD,4BAAA,GAA+B,IAqH6C,CArHxC,qBAqHwC,EAAA,QAAA,CAAA;AAAA,iBAnHjE,QAAA,CAmHiE;EAAA,UAAA,EAAA;IAAA,OAAA,EAlHxD,iBAkHwD;IAAA,SAAA,EAlHnB,UAkHmB;IAAA,GAAA;EAAA,CAAA;EAAA,MAAA;EAAA,IAAA;EAAA,qBAAA,EAAA;IAAA,OAAA,EA9GpE,iBA8GoE;IAAA,SAAA,EA7GlE,UA6GkE;IAAA,GAAA;EAAA,CAAA;EAAA,cAAA,EAAA;IAAA,OAAA,EA1GpD,UA0GoD;IAAA,SAAA,EA1G7B,UA0G6B;IAAA,GAAA;EAAA,CAAA;EAAA,GAAA;EAAA;AAAA,CAAA,EAvG9E,aAuG8E,CAAA,EAvGjE,SAuGiE;AAQjE,iBApCA,YAAA,CAoCe,KAAA,EApCK,cAoCL,CAAA,GAAA,CAAA,CAAA,EApCwB,mBAAA,CAAA,GAAA,CAAA,OAoCxB;;;;AAAuD,iBARtE,QAAA,CAQsE;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAR1B,cAQ0B,CAAA,KAAA,CAAA,CAAA,EARL,mBAAA,CAAA,GAAA,CAAA,OAQK;AAAA,iBAAtE,eAAA,CAAsE;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAAnB,cAAmB,CAAA,GAAA,CAAA,CAAA,EAAA,mBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,IAAA;AAWtE,iBAAA,SAAA,CAAS;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAAoC,cAApC,CAAA,IAAA,CAAA,CAAA,EAAwD,mBAAA,CAAA,GAAA,CAAA,OAAxD"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/layouts/docs/page/index.tsx"],"mappings":";;;;;;UAmBU,iBAAA,SAA0B,eAAA;EAClC,OAAA;EACA,SAAA,EAAW,SAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,WAAA;EAC9B,OAAA;EACA,SAAA,EAAW,SAAA;AAAA;AAAA,UAGI,aAAA;EACf,GAAA,GAAM,WAAA;EACN,cAAA,GAAiB,OAAA,CAAQ,qBAAA;EACzB,qBAAA,GAAwB,OAAA,CAAQ,4BAAA;EAXZ;AAAA;;;;EAkBpB,IAAA;EAdA;;;EAmBA,UAAA,GAAa,OAAA,CAAQ,iBAAA;EAlBD;AAGtB;;;;EAsBE,MAAA,GAAS,OAAA,CAAQ,aAAA;EAEjB,QAAA,GAAW,SAAA;EArBqB;;;EA0BhC,SAAA;AAAA;AAAA,KAGG,qBAAA,GAAwB,IAAA,CAAK,mBAAA;EARrB;;;EAYX,MAAA,GAAS,SAAA;EAnCH;;;EAwCN,MAAA,GAAS,SAAA;EAET,OAAA;EACA,SAAA,EAAW,SAAA;EAzCqB;;;EA8ChC,KAAA;AAAA;AAAA,KAGG,4BAAA,GAA+B,IAAA,CAAK,qBAAA;AAAA,iBAEzB,QAAA,CAAA;EACd,UAAA;IAAc,OAAA,EAAS,iBAAA;IAA0B,SAAA,EAAW,UAAA;IAAA,GAAe;EAAA;EAC3E,MAAA;IAAU,OAAA,EAAS,aAAA;IAAe,SAAA,EAAW,aAAA;IAAA,GAAkB;EAAA;EAC/D,IAAA;EACA,qBAAA;IACE,OAAA,EAAS,iBAAA;IACT,SAAA,EAAW,UAAA;IAAA,GACR;EAAA;EAEL,cAAA;IAAkB,OAAA,EAAS,UAAA;IAAY,SAAA,EAAW,UAAA;IAAA,GAAe;EAAA;EACjE,GAAA;EACA,QAAA;EACA;AAAA,GACC,aAAA,GAAa,SAAA;AAAA,iBA4EA,YAAA,CAAa,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBA4BvC,QAAA,CAAA;EAAW,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQjE,eAAA,CAAA;EAAkB,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWtE,SAAA,CAAA;EAAY,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,11 +1,11 @@
-import { __exportAll } from "../../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { I18nLabel } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
-import { i18n_exports } from "../../../contexts/i18n.js";
-import { toc_exports } from "../../../components/toc/index.js";
+import { TOCProvider, TOCScrollArea } from "../../../components/toc/index.js";
 import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from "./client.js";
-import { default_exports } from "../../../components/toc/default.js";
-import { clerk_exports } from "../../../components/toc/clerk.js";
-import { cn } from "@hanzo/docs-ui/cn";
+import { TOCItems } from "../../../components/toc/default.js";
+import { TOCItems as TOCItems$1 } from "../../../components/toc/clerk.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Edit, Text } from "lucide-react";
 
@@ -19,29 +19,29 @@ var page_exports = /* @__PURE__ */ __exportAll({
 	PageBreadcrumb: () => PageBreadcrumb,
 	PageLastUpdate: () => PageLastUpdate
 });
-function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children }) {
+function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children, className }) {
 	tocEnabled ??= !full && (toc.length > 0 || tocOptions.footer !== void 0 || tocOptions.header !== void 0);
 	tocPopoverEnabled ??= toc.length > 0 || tocPopoverOptions.header !== void 0 || tocPopoverOptions.footer !== void 0;
-	let wrapper = (children$1) => children$1;
-	if (tocEnabled || tocPopoverEnabled) wrapper = (children$1) => /* @__PURE__ */ jsx(toc_exports.TOCProvider, {
+	let wrapper = (children) => children;
+	if (tocEnabled || tocPopoverEnabled) wrapper = (children) => /* @__PURE__ */ jsx(TOCProvider, {
 		single: tocOptions.single,
 		toc,
-		children: children$1
+		children
 	});
 	return wrapper(/* @__PURE__ */ jsxs(Fragment, { children: [
 		tocPopoverEnabled && (tocPopover ?? /* @__PURE__ */ jsxs(PageTOCPopover, { children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, {}), /* @__PURE__ */ jsxs(PageTOCPopoverContent, { children: [
 			tocPopoverOptions.header,
-			/* @__PURE__ */ jsx(toc_exports.TOCScrollArea, { children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(clerk_exports.TOCItems, {}) : /* @__PURE__ */ jsx(default_exports.TOCItems, {}) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
 			tocPopoverOptions.footer
 		] })] })),
 		/* @__PURE__ */ jsxs("article", {
 			id: "nd-page",
 			"data-full": full,
-			className: cn("flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14", full ? "max-w-[1200px]" : "xl:layout:[--fd-toc-width:268px]"),
+			className: cn("flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14", full ? "max-w-[1200px]" : "xl:layout:[--fd-toc-width:268px]", className),
 			children: [
 				breadcrumbEnabled && (breadcrumb ?? /* @__PURE__ */ jsx(PageBreadcrumb, { ...breadcrumbProps })),
 				children,
-				footer.enabled !== false && (footer.component ?? /* @__PURE__ */ jsx(PageFooter, { items: footer.items }))
+				footerEnabled !== false && (footerReplace ?? /* @__PURE__ */ jsx(PageFooter, { ...footerProps }))
 			]
 		}),
 		tocEnabled && (tocReplace ?? /* @__PURE__ */ jsxs("div", {
@@ -52,9 +52,9 @@ function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component:
 				/* @__PURE__ */ jsxs("h3", {
 					id: "toc-title",
 					className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
-					children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(i18n_exports.I18nLabel, { label: "toc" })]
+					children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
 				}),
-				/* @__PURE__ */ jsx(toc_exports.TOCScrollArea, { children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(clerk_exports.TOCItems, {}) : /* @__PURE__ */ jsx(default_exports.TOCItems, {}) }),
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
 				tocOptions.footer
 			]
 		}))
@@ -70,7 +70,7 @@ function EditOnGitHub(props) {
 			size: "sm",
 			className: "gap-1.5 not-prose"
 		}), props.className),
-		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(i18n_exports.I18nLabel, { label: "editOnGithub" })] })
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), /* @__PURE__ */ jsx(I18nLabel, { label: "editOnGithub" })] })
 	});
 }
 /**