@fumadocs/base-ui 16.6.11 → 16.6.13

package/css/generated/docs.css

@@ -97,6 +97,7 @@
 @source inline("const");
 @source inline("container");
 @source inline("content");
+@source inline("context");
 @source inline("createContext");
 @source inline("createLinkItemRenderer");
 @source inline("createPageTreeRenderer");
@@ -269,6 +270,7 @@
 @source inline("nd-sidebar");
 @source inline("nd-subnav");
 @source inline("nd-toc");
+@source inline("new");
 @source inline("next");
 @source inline("no");
 @source inline("none");
@@ -391,6 +393,7 @@
 @source inline("text-start");
 @source inline("the");
 @source inline("themeSwitch");
+@source inline("throw");
 @source inline("timezone");
 @source inline("to");
 @source inline("toc");
@@ -425,6 +428,7 @@
 @source inline("url");
 @source inline("use");
 @source inline("useActiveAnchor");
+@source inline("useDocsLayout");
 @source inline("useFooterItems");
 @source inline("useI18n");
 @source inline("useIsScrollTop");

package/css/generated/notebook.css

@@ -102,6 +102,7 @@
 @source inline("components");
 @source inline("const");
 @source inline("content");
+@source inline("context");
 @source inline("createContext");
 @source inline("createLinkItemRenderer");
 @source inline("createPageTreeRenderer");
@@ -300,6 +301,7 @@
 @source inline("nd-sidebar");
 @source inline("nd-subnav");
 @source inline("nd-toc");
+@source inline("new");
 @source inline("next");
 @source inline("no");
 @source inline("none");
@@ -427,6 +429,7 @@
 @source inline("text-start");
 @source inline("the");
 @source inline("themeSwitch");
+@source inline("throw");
 @source inline("timeoutRef");
 @source inline("timezone");
 @source inline("to");
@@ -468,6 +471,7 @@
 @source inline("useIsScrollTop");
 @source inline("useLinkItems");
 @source inline("useMemo");
+@source inline("useNotebookLayout");
 @source inline("usePathname");
 @source inline("useRef");
 @source inline("useSidebar");

package/css/generated/shared.css

@@ -56,8 +56,10 @@
 @source inline("[&_svg]:size-4.5");
 @source inline("[&_svg]:size-5");
 @source inline("[&_svg]:size-full");
+@source inline("[&_svg]:text-fd-muted-foreground");
 @source inline("[scrollbar-width:none]");
 @source inline("a");
+@source inline("about");
 @source inline("absolute");
 @source inline("action");
 @source inline("active");
@@ -87,6 +89,7 @@
 @source inline("aria-selected");
 @source inline("as");
 @source inline("aside");
+@source inline("ask");
 @source inline("assume");
 @source inline("assumes");
 @source inline("async");
@@ -146,6 +149,7 @@
 @source inline("button");
 @source inline("buttonVariants");
 @source inline("by");
+@source inline("cache");
 @source inline("cached");
 @source inline("callbackRef");
 @source inline("can");
@@ -332,6 +336,7 @@
 @source inline("fill-(--callout-color)");
 @source inline("filter");
 @source inline("filters");
+@source inline("finally");
 @source inline("first:mt-0");
 @source inline("first:pt-0");
 @source inline("fixed");
@@ -426,6 +431,7 @@
 @source inline("here");
 @source inline("hidden");
 @source inline("highlight");
+@source inline("hints");
 @source inline("hooks");
 @source inline("horizontal");
 @source inline("hotKey");
@@ -523,6 +529,7 @@
 @source inline("listener");
 @source inline("listeners");
 @source inline("loaded");
+@source inline("loading");
 @source inline("locale");
 @source inline("locales");
 @source inline("lower");
@@ -536,6 +543,7 @@
 @source inline("margin");
 @source inline("marginBottom");
 @source inline("mark");
+@source inline("markdownUrl");
 @source inline("marked");
 @source inline("mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)]");
 @source inline("mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]");
@@ -694,6 +702,7 @@
 @source inline("padding");
 @source inline("paddingInlineStart");
 @source inline("page");
+@source inline("pageUrl");
 @source inline("parameters");
 @source inline("params");
 @source inline("parentId");
@@ -727,6 +736,7 @@
 @source inline("primary");
 @source inline("primaryColor");
 @source inline("primaryTextColor");
+@source inline("promise");
 @source inline("prop");
 @source inline("props");
 @source inline("prose");
@@ -757,10 +767,13 @@
 @source inline("py-2.5");
 @source inline("py-3");
 @source inline("py-3.5");
+@source inline("q");
 @source inline("query");
 @source inline("querySelector");
+@source inline("questions");
 @source inline("rainbow");
 @source inline("rainbowColors");
+@source inline("raw");
 @source inline("rawTree");
 @source inline("react");
 @source inline("react-dom");
@@ -803,6 +816,7 @@
 @source inline("role");
 @source inline("root");
 @source inline("rootRef");
+@source inline("round");
 @source inline("rounded-2xl");
 @source inline("rounded-[inherit]");
 @source inline("rounded-e-sm");
@@ -831,6 +845,7 @@
 @source inline("searchOptions");
 @source inline("searchPath");
 @source inline("secondary");
+@source inline("see");
 @source inline("segments");
 @source inline("select-none");
 @source inline("selected");
@@ -846,6 +861,7 @@
 @source inline("setIsOpen");
 @source inline("setIsTop");
 @source inline("setKey");
+@source inline("setLoading");
 @source inline("setMounted");
 @source inline("setOpen");
 @source inline("setOpenSearch");
@@ -897,6 +913,8 @@
 @source inline("stroke");
 @source inline("stroke-fd-foreground/10");
 @source inline("stroke-width");
+@source inline("strokeLinecap");
+@source inline("strokeLinejoin");
 @source inline("strokeWidth");
 @source inline("strong");
 @source inline("style");
@@ -943,6 +961,7 @@
 @source inline("text-sm");
 @source inline("text-start");
 @source inline("text-xs");
+@source inline("text/plain");
 @source inline("textContent");
 @source inline("that");
 @source inline("the");
@@ -985,6 +1004,7 @@
 @source inline("triggering");
 @source inline("true");
 @source inline("truncate");
+@source inline("try");
 @source inline("twMerge");
 @source inline("type");
 @source inline("typeof");
@@ -1055,6 +1075,7 @@
 @source inline("w-full");
 @source inline("w-max");
 @source inline("w-px");
+@source inline("want");
 @source inline("warn");
 @source inline("warning");
 @source inline("when");
@@ -1066,6 +1087,7 @@
 @source inline("whole");
 @source inline("width");
 @source inline("will");
+@source inline("window");
 @source inline("with");
 @source inline("work");
 @source inline("wrap");

package/dist/components/ui/button.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
   color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
+  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion

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

@@ -7,6 +7,9 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 declare const LayoutContext: react.Context<{
   isNavTransparent: boolean;
 } | null>;
+declare function useDocsLayout(): {
+  isNavTransparent: boolean;
+};
 declare function LayoutContextProvider({
   navTransparentMode,
   children
@@ -28,5 +31,5 @@ declare function LayoutTabs({
   options: SidebarTab[];
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs };
+export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs, useDocsLayout };
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/docs/client.tsx"],"mappings":";;;;;;cAWa,aAAA,EAEE,KAAA,CAFW,OAAA;EAAA,gBAAA;AAAA;AAAA,iBAIV,qBAAA,CAAA;EACd,kBAAA;EACA;AAAA;EAEA,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA8B1E,UAAA,CAAA;EACd,OAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,UAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/docs/client.tsx"],"mappings":";;;;;;cAWa,aAAA,EAEE,KAAA,CAFW,OAAA;EAAA,gBAAA;AAAA;AAAA,iBAIV,aAAA,CAAA;EAAa,gBAAA;AAAA;AAAA,iBASb,qBAAA,CAAA;EACd,kBAAA;EACA;AAAA;EAEA,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA8B1E,UAAA,CAAA;EACd,OAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,UAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/docs/client.js

@@ -9,6 +9,11 @@ import { jsx } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
 //#region src/layouts/docs/client.tsx
 const LayoutContext = createContext(null);
+function useDocsLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`fumadocs-ui/layouts/docs/page`) under <DocsLayout /> (`fumadocs-ui/layouts/docs`).");
+	return context;
+}
 function LayoutContextProvider({ navTransparentMode = "none", children }) {
 	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
 	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
@@ -18,7 +23,7 @@ function LayoutContextProvider({ navTransparentMode = "none", children }) {
 	});
 }
 function LayoutHeader(props) {
-	const { isNavTransparent } = use(LayoutContext);
+	const { isNavTransparent } = useDocsLayout();
 	return /* @__PURE__ */ jsx("header", {
 		"data-transparent": isNavTransparent,
 		...props,
@@ -61,6 +66,6 @@ function LayoutTabs({ options, ...props }) {
 	});
 }
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs };
+export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs, useDocsLayout };
 
 //# sourceMappingURL=client.js.map

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 '@/utils/cn';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isTabActive } from '@/components/sidebar/tabs/dropdown';\nimport Link from 'fumadocs-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) [--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 sidebar header toc toc\"\n        \"sidebar sidebar toc-popover toc toc\"\n        \"sidebar sidebar main toc toc\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-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,eAAD;EACE,OAAO,eACE,EACL,kBACD,GACD,CAAC,iBAAiB,CACnB;EAEA;EACa,CAAA;;AAIpB,SAAgB,aAAa,OAAiC;CAC5D,MAAM,EAAE,qBAAqB,IAAI,cAAc;AAE/C,QACE,oBAAC,UAAD;EAAQ,oBAAkB;EAAkB,GAAI;YAC7C,MAAM;EACA,CAAA;;AAIb,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,GAAG,SAAgC;CAC1F,MAAM,EAAE,cAAc,YAAY;AAElC,QACE,oBAAC,OAAD;EACE,IAAG;EACH,WAAW,GACT,mNACA,UACD;EACD,0BAAwB;EACxB,OACE;GACE,cAAc;;;GAGd,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB;GACnB,oBAAoB,YAAY,QAAQ;GACxC,GAAG;GACJ;EAEH,GAAI;EAEH;EACG,CAAA;;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,OAAD;EACE,GAAI;EACJ,WAAW,GACT,gEACA,MAAM,UACP;YAEA,QAAQ,KAAK,QAAQ,MACpB,oBAAC,MAAD;GAEE,MAAM,OAAO;GACb,WAAW,GACT,kLACA,OAAO,YAAY,aAAa,UAAU,UAC1C,aAAa,UAAU,oCACxB;aAEA,OAAO;GACH,EATA,EASA,CACP;EACE,CAAA"}
+{"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 'fumadocs-core/framework';\nimport { isTabActive } from '@/components/sidebar/tabs/dropdown';\nimport Link from 'fumadocs-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 useDocsLayout() {\n  const context = use(LayoutContext);\n  if (!context)\n    throw new Error(\n      'Please use <DocsPage /> (`fumadocs-ui/layouts/docs/page`) under <DocsLayout /> (`fumadocs-ui/layouts/docs`).',\n    );\n  return context;\n}\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 } = useDocsLayout();\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) [--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 sidebar header toc toc\"\n        \"sidebar sidebar toc-popover toc toc\"\n        \"sidebar sidebar main toc toc\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-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,gBAAgB;CAC9B,MAAM,UAAU,IAAI,cAAc;AAClC,KAAI,CAAC,QACH,OAAM,IAAI,MACR,+GACD;AACH,QAAO;;AAGT,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,eAAD;EACE,OAAO,eACE,EACL,kBACD,GACD,CAAC,iBAAiB,CACnB;EAEA;EACa,CAAA;;AAIpB,SAAgB,aAAa,OAAiC;CAC5D,MAAM,EAAE,qBAAqB,eAAe;AAE5C,QACE,oBAAC,UAAD;EAAQ,oBAAkB;EAAkB,GAAI;YAC7C,MAAM;EACA,CAAA;;AAIb,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,GAAG,SAAgC;CAC1F,MAAM,EAAE,cAAc,YAAY;AAElC,QACE,oBAAC,OAAD;EACE,IAAG;EACH,WAAW,GACT,mNACA,UACD;EACD,0BAAwB;EACxB,OACE;GACE,cAAc;;;GAGd,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB;GACnB,oBAAoB,YAAY,QAAQ;GACxC,GAAG;GACJ;EAEH,GAAI;EAEH;EACG,CAAA;;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,OAAD;EACE,GAAI;EACJ,WAAW,GACT,gEACA,MAAM,UACP;YAEA,QAAQ,KAAK,QAAQ,MACpB,oBAAC,MAAD;GAEE,MAAM,OAAO;GACb,WAAW,GACT,kLACA,OAAO,YAAY,aAAa,UAAU,UAC1C,aAAa,UAAU,oCACxB;aAEA,OAAO;GACH,EATA,EASA,CACP;EACE,CAAA"}

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

@@ -5,7 +5,7 @@ import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
 import { isActive } from "../../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
 import { useTOCItems } from "../../../components/toc/index.js";
-import { LayoutContext } from "../client.js";
+import { useDocsLayout } from "../client.js";
 import { useFooterItems } from "../../../utils/use-footer-items.js";
 import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
@@ -19,7 +19,7 @@ const TocPopoverContext = createContext(null);
 function PageTOCPopover({ className, children, ...rest }) {
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
-	const { isNavTransparent } = use(LayoutContext);
+	const { isNavTransparent } = useDocsLayout();
 	const onClick = useEffectEvent((e) => {
 		if (!open) return;
 		if (ref.current && !ref.current.contains(e.target)) setOpen(false);

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

@@ -1 +1 @@
-{"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 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-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));\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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"}
+{"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 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { useDocsLayout } 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 } = useDocsLayout();\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));\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,4 +1,5 @@
 import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { AnchorProviderProps, TOCItemType } from "fumadocs-core/toc";
@@ -101,5 +102,5 @@ declare function DocsTitle({
   ...props
 }: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate };
+export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageBreadcrumb, PageLastUpdate, ViewOptionsPopover };
 //# 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"],"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"}
+{"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;EAf8B;;;EAoB9B,UAAA,GAAa,OAAA,CAAQ,iBAAA;EAlBD;;AAGtB;;;EAsBE,MAAA,GAAS,OAAA,CAAQ,aAAA;EAEjB,QAAA,GAAW,SAAA;EAtBM;;;EA2BjB,SAAA;AAAA;AAAA,KAGG,qBAAA,GAAwB,IAAA,CAAK,mBAAA;EAVvB;;;EAcT,MAAA,GAAS,SAAA;EAnCT;;;EAwCA,MAAA,GAAS,SAAA;EAET,OAAA;EACA,SAAA,EAAW,SAAA;EAzCa;;;EA8CxB,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

@@ -6,6 +6,7 @@ import { TOCProvider, TOCScrollArea } from "../../../components/toc/index.js";
 import { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger } from "./client.js";
 import { TOCItems } from "../../../components/toc/default.js";
 import { TOCItems as TOCItems$1 } from "../../../components/toc/clerk.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Edit, Text } from "lucide-react";
 //#region src/layouts/docs/page/index.tsx
@@ -15,8 +16,10 @@ var page_exports = /* @__PURE__ */ __exportAll({
 	DocsPage: () => DocsPage,
 	DocsTitle: () => DocsTitle,
 	EditOnGitHub: () => EditOnGitHub,
+	MarkdownCopyButton: () => MarkdownCopyButton,
 	PageBreadcrumb: () => PageBreadcrumb,
-	PageLastUpdate: () => PageLastUpdate
+	PageLastUpdate: () => PageLastUpdate,
+	ViewOptionsPopover: () => ViewOptionsPopover
 });
 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);
@@ -98,6 +101,6 @@ function DocsTitle({ children, className, ...props }) {
 	});
 }
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate, page_exports };
+export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageBreadcrumb, PageLastUpdate, ViewOptionsPopover, page_exports };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TocClerk.TOCItems","TocDefault.TOCItems"],"sources":["../../../../src/layouts/docs/page/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Edit, Text } from 'lucide-react';\nimport { I18nLabel } from '@/contexts/i18n';\nimport {\n  type BreadcrumbProps,\n  type FooterProps,\n  PageBreadcrumb,\n  PageFooter,\n  PageTOCPopover,\n  PageTOCPopoverContent,\n  PageTOCPopoverTrigger,\n} from './client';\nimport type { AnchorProviderProps, TOCItemType } from 'fumadocs-core/toc';\nimport * as TocDefault from '@/components/toc/default';\nimport * as TocClerk from '@/components/toc/clerk';\nimport { TOCProvider, TOCScrollArea } from '@/components/toc';\n\ninterface BreadcrumbOptions extends BreadcrumbProps {\n  enabled: boolean;\n  component: ReactNode;\n}\n\ninterface FooterOptions extends FooterProps {\n  enabled: boolean;\n  component: ReactNode;\n}\n\nexport interface DocsPageProps {\n  toc?: TOCItemType[];\n  tableOfContent?: Partial<TableOfContentOptions>;\n  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;\n\n  /**\n   * Extend the page to fill all available space\n   *\n   * @defaultValue false\n   */\n  full?: boolean;\n\n  /**\n   * Replace or disable breadcrumb\n   */\n  breadcrumb?: Partial<BreadcrumbOptions>;\n\n  /**\n   * Footer navigation, located under the page body.\n   *\n   * You can specify `footer.children` to add extra components under the footer.\n   */\n  footer?: Partial<FooterOptions>;\n\n  children?: ReactNode;\n\n  /**\n   * Apply class names to the `#nd-page` container.\n   */\n  className?: string;\n}\n\ntype TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {\n  /**\n   * Custom content in TOC container, before the main TOC\n   */\n  header?: ReactNode;\n\n  /**\n   * Custom content in TOC container, after the main TOC\n   */\n  footer?: ReactNode;\n\n  enabled: boolean;\n  component: ReactNode;\n\n  /**\n   * @defaultValue 'normal'\n   */\n  style?: 'normal' | 'clerk';\n};\n\ntype TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;\n\nexport function DocsPage({\n  breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},\n  footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},\n  full = false,\n  tableOfContentPopover: {\n    enabled: tocPopoverEnabled,\n    component: tocPopover,\n    ...tocPopoverOptions\n  } = {},\n  tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {},\n  toc = [],\n  children,\n  className,\n}: DocsPageProps) {\n  // disable TOC on full mode, you can still enable it with `enabled` option.\n  tocEnabled ??=\n    !full && (toc.length > 0 || tocOptions.footer !== undefined || tocOptions.header !== undefined);\n\n  tocPopoverEnabled ??=\n    toc.length > 0 ||\n    tocPopoverOptions.header !== undefined ||\n    tocPopoverOptions.footer !== undefined;\n\n  let wrapper = (children: ReactNode) => children;\n\n  if (tocEnabled || tocPopoverEnabled) {\n    wrapper = (children) => (\n      <TOCProvider single={tocOptions.single} toc={toc}>\n        {children}\n      </TOCProvider>\n    );\n  }\n\n  return wrapper(\n    <>\n      {tocPopoverEnabled &&\n        (tocPopover ?? (\n          <PageTOCPopover>\n            <PageTOCPopoverTrigger />\n            <PageTOCPopoverContent>\n              {tocPopoverOptions.header}\n              <TOCScrollArea>\n                {tocPopoverOptions.style === 'clerk' ? (\n                  <TocClerk.TOCItems />\n                ) : (\n                  <TocDefault.TOCItems />\n                )}\n              </TOCScrollArea>\n              {tocPopoverOptions.footer}\n            </PageTOCPopoverContent>\n          </PageTOCPopover>\n        ))}\n      <article\n        id=\"nd-page\"\n        data-full={full}\n        className={cn(\n          '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',\n          full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',\n          className,\n        )}\n      >\n        {breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}\n        {children}\n        {footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}\n      </article>\n      {tocEnabled &&\n        (tocReplace ?? (\n          <div\n            id=\"nd-toc\"\n            className=\"sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden\"\n          >\n            {tocOptions.header}\n            <h3\n              id=\"toc-title\"\n              className=\"inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground\"\n            >\n              <Text className=\"size-4\" />\n              <I18nLabel label=\"toc\" />\n            </h3>\n            <TOCScrollArea>\n              {tocOptions.style === 'clerk' ? <TocClerk.TOCItems /> : <TocDefault.TOCItems />}\n            </TOCScrollArea>\n            {tocOptions.footer}\n          </div>\n        ))}\n    </>,\n  );\n}\n\nexport function EditOnGitHub(props: ComponentProps<'a'>) {\n  return (\n    <a\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      {...props}\n      className={cn(\n        buttonVariants({\n          color: 'secondary',\n          size: 'sm',\n          className: 'gap-1.5 not-prose',\n        }),\n        props.className,\n      )}\n    >\n      {props.children ?? (\n        <>\n          <Edit className=\"size-3.5\" />\n          <I18nLabel label=\"editOnGithub\" />\n        </>\n      )}\n    </a>\n  );\n}\n\n/**\n * Add typography styles\n */\nexport function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div {...props} className={cn('prose flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n\nexport function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {\n  // Don't render if no description provided\n  if (children === undefined) return null;\n\n  return (\n    <p {...props} className={cn('mb-8 text-lg text-fd-muted-foreground', className)}>\n      {children}\n    </p>\n  );\n}\n\nexport function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {\n  return (\n    <h1 {...props} className={cn('text-[1.75em] font-semibold', className)}>\n      {children}\n    </h1>\n  );\n}\n\nexport { PageLastUpdate, PageBreadcrumb } from './client';\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["TocClerk.TOCItems","TocDefault.TOCItems"],"sources":["../../../../src/layouts/docs/page/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Edit, Text } from 'lucide-react';\nimport { I18nLabel } from '@/contexts/i18n';\nimport {\n  type BreadcrumbProps,\n  type FooterProps,\n  PageBreadcrumb,\n  PageFooter,\n  PageTOCPopover,\n  PageTOCPopoverContent,\n  PageTOCPopoverTrigger,\n} from './client';\nimport type { AnchorProviderProps, TOCItemType } from 'fumadocs-core/toc';\nimport * as TocDefault from '@/components/toc/default';\nimport * as TocClerk from '@/components/toc/clerk';\nimport { TOCProvider, TOCScrollArea } from '@/components/toc';\n\ninterface BreadcrumbOptions extends BreadcrumbProps {\n  enabled: boolean;\n  component: ReactNode;\n}\n\ninterface FooterOptions extends FooterProps {\n  enabled: boolean;\n  component: ReactNode;\n}\n\nexport interface DocsPageProps {\n  toc?: TOCItemType[];\n  tableOfContent?: Partial<TableOfContentOptions>;\n  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;\n\n  /**\n   * Extend the page to fill all available space\n   *\n   * @defaultValue false\n   */\n  full?: boolean;\n\n  /**\n   * Replace or disable breadcrumb\n   */\n  breadcrumb?: Partial<BreadcrumbOptions>;\n\n  /**\n   * Footer navigation, located under the page body.\n   *\n   * You can specify `footer.children` to add extra components under the footer.\n   */\n  footer?: Partial<FooterOptions>;\n\n  children?: ReactNode;\n\n  /**\n   * Apply class names to the `#nd-page` container.\n   */\n  className?: string;\n}\n\ntype TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {\n  /**\n   * Custom content in TOC container, before the main TOC\n   */\n  header?: ReactNode;\n\n  /**\n   * Custom content in TOC container, after the main TOC\n   */\n  footer?: ReactNode;\n\n  enabled: boolean;\n  component: ReactNode;\n\n  /**\n   * @defaultValue 'normal'\n   */\n  style?: 'normal' | 'clerk';\n};\n\ntype TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;\n\nexport function DocsPage({\n  breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},\n  footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},\n  full = false,\n  tableOfContentPopover: {\n    enabled: tocPopoverEnabled,\n    component: tocPopover,\n    ...tocPopoverOptions\n  } = {},\n  tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {},\n  toc = [],\n  children,\n  className,\n}: DocsPageProps) {\n  // disable TOC on full mode, you can still enable it with `enabled` option.\n  tocEnabled ??=\n    !full && (toc.length > 0 || tocOptions.footer !== undefined || tocOptions.header !== undefined);\n\n  tocPopoverEnabled ??=\n    toc.length > 0 ||\n    tocPopoverOptions.header !== undefined ||\n    tocPopoverOptions.footer !== undefined;\n\n  let wrapper = (children: ReactNode) => children;\n\n  if (tocEnabled || tocPopoverEnabled) {\n    wrapper = (children) => (\n      <TOCProvider single={tocOptions.single} toc={toc}>\n        {children}\n      </TOCProvider>\n    );\n  }\n\n  return wrapper(\n    <>\n      {tocPopoverEnabled &&\n        (tocPopover ?? (\n          <PageTOCPopover>\n            <PageTOCPopoverTrigger />\n            <PageTOCPopoverContent>\n              {tocPopoverOptions.header}\n              <TOCScrollArea>\n                {tocPopoverOptions.style === 'clerk' ? (\n                  <TocClerk.TOCItems />\n                ) : (\n                  <TocDefault.TOCItems />\n                )}\n              </TOCScrollArea>\n              {tocPopoverOptions.footer}\n            </PageTOCPopoverContent>\n          </PageTOCPopover>\n        ))}\n      <article\n        id=\"nd-page\"\n        data-full={full}\n        className={cn(\n          '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',\n          full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',\n          className,\n        )}\n      >\n        {breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}\n        {children}\n        {footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}\n      </article>\n      {tocEnabled &&\n        (tocReplace ?? (\n          <div\n            id=\"nd-toc\"\n            className=\"sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden\"\n          >\n            {tocOptions.header}\n            <h3\n              id=\"toc-title\"\n              className=\"inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground\"\n            >\n              <Text className=\"size-4\" />\n              <I18nLabel label=\"toc\" />\n            </h3>\n            <TOCScrollArea>\n              {tocOptions.style === 'clerk' ? <TocClerk.TOCItems /> : <TocDefault.TOCItems />}\n            </TOCScrollArea>\n            {tocOptions.footer}\n          </div>\n        ))}\n    </>,\n  );\n}\n\nexport function EditOnGitHub(props: ComponentProps<'a'>) {\n  return (\n    <a\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      {...props}\n      className={cn(\n        buttonVariants({\n          color: 'secondary',\n          size: 'sm',\n          className: 'gap-1.5 not-prose',\n        }),\n        props.className,\n      )}\n    >\n      {props.children ?? (\n        <>\n          <Edit className=\"size-3.5\" />\n          <I18nLabel label=\"editOnGithub\" />\n        </>\n      )}\n    </a>\n  );\n}\n\n/**\n * Add typography styles\n */\nexport function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div {...props} className={cn('prose flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n\nexport function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {\n  // Don't render if no description provided\n  if (children === undefined) return null;\n\n  return (\n    <p {...props} className={cn('mb-8 text-lg text-fd-muted-foreground', className)}>\n      {children}\n    </p>\n  );\n}\n\nexport function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {\n  return (\n    <h1 {...props} className={cn('text-[1.75em] font-semibold', className)}>\n      {children}\n    </h1>\n  );\n}\n\nexport { PageLastUpdate, PageBreadcrumb } from './client';\nexport { MarkdownCopyButton, ViewOptionsPopover } from '@/layouts/shared/page-actions';\n"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/layouts/home/client.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "button" | "main" | "icon" | null | undefined;
+  variant?: "icon" | "button" | "main" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header({
   nav,

package/dist/layouts/home/client.js

@@ -4,11 +4,11 @@ import { buttonVariants } from "../../components/ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/ui/collapsible.js";
 import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
 import { LinkItem } from "../../utils/link-item.js";
+import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger } from "../../components/ui/navigation-menu.js";
 import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
 import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle, LanguageToggleText } from "../shared/language-toggle.js";
 import { ThemeToggle } from "../shared/theme-toggle.js";
-import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger } from "../../components/ui/navigation-menu.js";
 import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";

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

@@ -5,9 +5,9 @@ import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/client.d.ts
-declare const LayoutContext: react.Context<(LayoutInfo & {
+declare function useNotebookLayout(): LayoutInfo & {
   isNavTransparent: boolean;
-}) | null>;
+};
 interface LayoutInfo {
   tabMode: 'sidebar' | 'navbar';
   navMode: 'top' | 'auto';
@@ -41,7 +41,7 @@ declare function NavbarLinkItem({
   ...props
 }: {
   item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };
+export { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem, useNotebookLayout };
 //# 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"],"mappings":";;;;;;;cAuBa,aAAA,EAAa,KAAA,CAAA,OAAA,EAAA,UAAA;;;UAOT,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"mappings":";;;;;;;iBA8BgB,iBAAA,CAAA,GAAiB,UAAA;EAAA,gBAAA;AAAA;AAAA,UAShB,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA"}

package/dist/layouts/notebook/client.js

@@ -12,6 +12,11 @@ import Link from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 //#region src/layouts/notebook/client.tsx
 const LayoutContext = createContext(null);
+function useNotebookLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`fumadocs-ui/layouts/notebook/page`) under <DocsLayout /> (`fumadocs-ui/layouts/notebook`).");
+	return context;
+}
 function LayoutContextProvider({ navTransparentMode = "none", navMode, tabMode, children }) {
 	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
 	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
@@ -30,7 +35,7 @@ function LayoutContextProvider({ navTransparentMode = "none", navMode, tabMode,
 }
 function LayoutHeader(props) {
 	const { open } = useSidebar();
-	const { isNavTransparent } = use(LayoutContext);
+	const { isNavTransparent } = useNotebookLayout();
 	return /* @__PURE__ */ jsx("header", {
 		"data-transparent": isNavTransparent && !open,
 		...props,
@@ -38,7 +43,7 @@ function LayoutHeader(props) {
 	});
 }
 function LayoutBody({ className, style, children, ...props }) {
-	const { navMode } = use(LayoutContext);
+	const { navMode } = useNotebookLayout();
 	const { collapsed } = useSidebar();
 	const pageCol = "calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))";
 	return /* @__PURE__ */ jsx("div", {
@@ -152,6 +157,6 @@ function NavbarLinkItemMenu({ item, hoverDelay = 50, className, ...props }) {
 	});
 }
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem };
+export { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem, useNotebookLayout };
 
 //# sourceMappingURL=client.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@/utils/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 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@/utils/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 never}>{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":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@/utils/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 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@/utils/link-item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nconst LayoutContext = createContext<\n  | (LayoutInfo & {\n      isNavTransparent: boolean;\n    })\n  | null\n>(null);\n\nexport function useNotebookLayout() {\n  const context = use(LayoutContext);\n  if (!context)\n    throw new Error(\n      'Please use <DocsPage /> (`fumadocs-ui/layouts/notebook/page`) under <DocsLayout /> (`fumadocs-ui/layouts/notebook`).',\n    );\n  return context;\n}\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 } = useNotebookLayout();\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 } = useNotebookLayout();\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 never}>{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/page/client.js

@@ -6,7 +6,7 @@ import { isActive } from "../../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
 import { useTOCItems } from "../../../components/toc/index.js";
 import { useFooterItems } from "../../../utils/use-footer-items.js";
-import { LayoutContext } from "../client.js";
+import { useNotebookLayout } from "../client.js";
 import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ const TocPopoverContext = createContext(null);
 function PageTOCPopover({ className, children, ...rest }) {
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
-	const { isNavTransparent } = use(LayoutContext);
+	const { isNavTransparent } = useNotebookLayout();
 	const onClick = useEffectEvent((e) => {
 		if (!open) return;
 		if (ref.current && !ref.current.contains(e.target)) setOpen(false);

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

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"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 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-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      {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));\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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"}
+{"version":3,"file":"client.js","names":[],"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 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { useNotebookLayout } 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 } = useNotebookLayout();\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, 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));\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/notebook/sidebar.js

@@ -2,10 +2,10 @@
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarSeparator as SidebarSeparator$1, base_exports, useFolder, useFolderDepth } from "../../components/sidebar/base.js";
-import { LayoutContext } from "./client.js";
+import { useNotebookLayout } from "./client.js";
 import { createLinkItemRenderer } from "../../components/sidebar/link-item.js";
 import { createPageTreeRenderer } from "../../components/sidebar/page-tree.js";
-import { use, useRef } from "react";
+import { useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/layouts/notebook/sidebar.tsx
@@ -21,7 +21,7 @@ function getItemOffset(depth) {
 }
 const { SidebarProvider: Sidebar, SidebarFolder, SidebarCollapseTrigger, SidebarViewport, SidebarTrigger } = base_exports;
 function SidebarContent({ ref: refProp, className, children, ...props }) {
-	const { navMode } = use(LayoutContext);
+	const { navMode } = useNotebookLayout();
 	const ref = useRef(null);
 	return /* @__PURE__ */ jsx(SidebarContent$1, { children: ({ collapsed, hovered, ref: asideRef, ...rest }) => /* @__PURE__ */ jsxs("div", {
 		"data-sidebar-placeholder": "",

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["Base","Base.SidebarContent","Base.SidebarDrawerOverlay","Base.SidebarDrawerContent","Base.useFolderDepth","Base.SidebarSeparator","Base.SidebarItem","Base.useFolder","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent"],"sources":["../../../src/layouts/notebook/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, use, useRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { LayoutContext } from './client';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\n\nconst itemVariants = cva(\n  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        true: \"data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport const {\n  SidebarProvider: Sidebar,\n  SidebarFolder,\n  SidebarCollapseTrigger,\n  SidebarViewport,\n  SidebarTrigger,\n} = Base;\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const { navMode } = use(LayoutContext)!;\n  const ref = useRef<HTMLElement>(null);\n\n  return (\n    <Base.SidebarContent>\n      {({ collapsed, hovered, ref: asideRef, ...rest }) => (\n        <div\n          data-sidebar-placeholder=\"\"\n          className={cn(\n            'sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden',\n            navMode === 'auto'\n              ? 'top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))]'\n              : 'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]',\n          )}\n        >\n          {collapsed && <div className=\"absolute start-0 inset-y-0 w-4\" {...rest} />}\n          <aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp, asideRef)}\n            data-collapsed={collapsed}\n            data-hovered={collapsed && hovered}\n            className={cn(\n              'absolute flex flex-col w-full start-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)',\n              navMode === 'auto' && 'bg-fd-card border-e',\n              collapsed && [\n                'inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)',\n                hovered\n                  ? 'shadow-lg translate-x-2 rtl:-translate-x-2'\n                  : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',\n              ],\n              ref.current &&\n                (ref.current.getAttribute('data-collapsed') === 'true') !== collapsed &&\n                'transition-[width,inset-block,translate,background-color]',\n              className,\n            )}\n            {...props}\n            {...rest}\n          >\n            {children}\n          </aside>\n        </div>\n      )}\n    </Base.SidebarContent>\n  );\n}\n\nexport function SidebarDrawer({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Base.SidebarDrawerContent>) {\n  return (\n    <>\n      <Base.SidebarDrawerOverlay className=\"fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out\" />\n      <Base.SidebarDrawerContent\n        className={cn(\n          'fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Base.SidebarDrawerContent>\n    </>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <Base.SidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...props}\n    >\n      {props.children}\n    </Base.SidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...props}\n    >\n      {props.children}\n    </Base.SidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...props}\n    >\n      {children}\n    </Base.SidebarFolderContent>\n  );\n}\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n  SidebarSeparator,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":["Base","Base.SidebarContent","Base.SidebarDrawerOverlay","Base.SidebarDrawerContent","Base.useFolderDepth","Base.SidebarSeparator","Base.SidebarItem","Base.useFolder","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent"],"sources":["../../../src/layouts/notebook/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { useNotebookLayout } from './client';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\n\nconst itemVariants = cva(\n  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        true: \"data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport const {\n  SidebarProvider: Sidebar,\n  SidebarFolder,\n  SidebarCollapseTrigger,\n  SidebarViewport,\n  SidebarTrigger,\n} = Base;\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const { navMode } = useNotebookLayout();\n  const ref = useRef<HTMLElement>(null);\n\n  return (\n    <Base.SidebarContent>\n      {({ collapsed, hovered, ref: asideRef, ...rest }) => (\n        <div\n          data-sidebar-placeholder=\"\"\n          className={cn(\n            'sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden',\n            navMode === 'auto'\n              ? 'top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))]'\n              : 'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]',\n          )}\n        >\n          {collapsed && <div className=\"absolute start-0 inset-y-0 w-4\" {...rest} />}\n          <aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp, asideRef)}\n            data-collapsed={collapsed}\n            data-hovered={collapsed && hovered}\n            className={cn(\n              'absolute flex flex-col w-full start-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)',\n              navMode === 'auto' && 'bg-fd-card border-e',\n              collapsed && [\n                'inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)',\n                hovered\n                  ? 'shadow-lg translate-x-2 rtl:-translate-x-2'\n                  : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',\n              ],\n              ref.current &&\n                (ref.current.getAttribute('data-collapsed') === 'true') !== collapsed &&\n                'transition-[width,inset-block,translate,background-color]',\n              className,\n            )}\n            {...props}\n            {...rest}\n          >\n            {children}\n          </aside>\n        </div>\n      )}\n    </Base.SidebarContent>\n  );\n}\n\nexport function SidebarDrawer({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Base.SidebarDrawerContent>) {\n  return (\n    <>\n      <Base.SidebarDrawerOverlay className=\"fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out\" />\n      <Base.SidebarDrawerContent\n        className={cn(\n          'fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Base.SidebarDrawerContent>\n    </>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <Base.SidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...props}\n    >\n      {props.children}\n    </Base.SidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...props}\n    >\n      {props.children}\n    </Base.SidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...props}\n    >\n      {children}\n    </Base.SidebarFolderContent>\n  );\n}\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n  SidebarSeparator,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}

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

@@ -62,7 +62,7 @@ declare function resolveLinkItems({
 declare function renderTitleNav({
   title,
   url
-}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 declare function useLinkItems({
   githubUrl,
   links

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}

package/dist/layouts/shared/page-actions.d.ts

@@ -0,0 +1,37 @@
+import { PopoverTrigger } from "../../components/ui/popover.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/shared/page-actions.d.ts
+/**
+ * see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.
+ */
+declare function MarkdownCopyButton({
+  markdownUrl,
+  ...props
+}: ComponentProps<'button'> & {
+  /**
+   * A URL to fetch the raw Markdown/MDX content of page
+   */
+  markdownUrl: string;
+}): react_jsx_runtime0.JSX.Element;
+/**
+ * see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.
+ */
+declare function ViewOptionsPopover({
+  markdownUrl,
+  githubUrl,
+  ...props
+}: ComponentProps<typeof PopoverTrigger> & {
+  /**
+   * A URL to the raw Markdown/MDX content of page
+   */
+  markdownUrl: string;
+  /**
+   * Source file URL on GitHub
+   */
+  githubUrl: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MarkdownCopyButton, ViewOptionsPopover };
+//# sourceMappingURL=page-actions.d.ts.map

package/dist/layouts/shared/page-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-actions.d.ts","names":[],"sources":["../../../src/layouts/shared/page-actions.tsx"],"mappings":";;;;;;;;iBAagB,kBAAA,CAAA;EACd,WAAA;EAAA,GACG;AAAA,GACF,cAAA;EAH+B;;;EAOhC,WAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBA4Ce,kBAAA,CAAA;EACd,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,cAAA;EAtDpB;;;EA0DH,WAAA;EApDD;;;EAyDC,SAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/shared/page-actions.js

@@ -0,0 +1,186 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { useCopyButton } from "../../utils/use-copy-button.js";
+import { buttonVariants } from "../../components/ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, Copy, ExternalLinkIcon, TextIcon } from "lucide-react";
+//#region src/layouts/shared/page-actions.tsx
+const cache = /* @__PURE__ */ new Map();
+/**
+* see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.
+*/
+function MarkdownCopyButton({ markdownUrl, ...props }) {
+	const [isLoading, setLoading] = useState(false);
+	const [checked, onClick] = useCopyButton(async () => {
+		const cached = cache.get(markdownUrl);
+		if (cached) return navigator.clipboard.writeText(await cached);
+		setLoading(true);
+		try {
+			const promise = fetch(markdownUrl).then((res) => res.text());
+			cache.set(markdownUrl, promise);
+			await navigator.clipboard.write([new ClipboardItem({ "text/plain": promise })]);
+		} finally {
+			setLoading(false);
+		}
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		disabled: isLoading,
+		onClick,
+		...props,
+		className: cn(buttonVariants({
+			color: "secondary",
+			size: "sm",
+			className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground"
+		}), props.className),
+		children: [checked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "Copy Markdown"]
+	});
+}
+/**
+* see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.
+*/
+function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
+	const items = useMemo(() => {
+		const q = `Read ${typeof window !== "undefined" ? window.location.href : "loading"}, I want to ask questions about it.`;
+		return [
+			{
+				title: "Open in GitHub",
+				href: githubUrl,
+				icon: /* @__PURE__ */ jsxs("svg", {
+					fill: "currentColor",
+					role: "img",
+					viewBox: "0 0 24 24",
+					children: [/* @__PURE__ */ jsx("title", { children: "GitHub" }), /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" })]
+				})
+			},
+			{
+				title: "View as Markdown",
+				href: markdownUrl,
+				icon: /* @__PURE__ */ jsx(TextIcon, {})
+			},
+			{
+				title: "Open in Scira AI",
+				href: `https://scira.ai/?${new URLSearchParams({ q })}`,
+				icon: /* @__PURE__ */ jsxs("svg", {
+					width: "910",
+					height: "934",
+					viewBox: "0 0 910 934",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: [
+						/* @__PURE__ */ jsx("title", { children: "Scira AI" }),
+						/* @__PURE__ */ jsx("path", {
+							d: "M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z",
+							fill: "currentColor",
+							stroke: "currentColor",
+							strokeWidth: "8",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z",
+							fill: "currentColor",
+							stroke: "currentColor",
+							strokeWidth: "8",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z",
+							stroke: "currentColor",
+							strokeWidth: "20",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z",
+							stroke: "currentColor",
+							strokeWidth: "20",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z",
+							fill: "currentColor",
+							stroke: "currentColor",
+							strokeWidth: "8",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z",
+							fill: "currentColor",
+							stroke: "currentColor",
+							strokeWidth: "8",
+							strokeLinejoin: "round"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: "M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442",
+							stroke: "currentColor",
+							strokeWidth: "30",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					]
+				})
+			},
+			{
+				title: "Open in ChatGPT",
+				href: `https://chatgpt.com/?${new URLSearchParams({
+					hints: "search",
+					q
+				})}`,
+				icon: /* @__PURE__ */ jsxs("svg", {
+					role: "img",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: [/* @__PURE__ */ jsx("title", { children: "OpenAI" }), /* @__PURE__ */ jsx("path", { d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" })]
+				})
+			},
+			{
+				title: "Open in Claude",
+				href: `https://claude.ai/new?${new URLSearchParams({ q })}`,
+				icon: /* @__PURE__ */ jsxs("svg", {
+					fill: "currentColor",
+					role: "img",
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: [/* @__PURE__ */ jsx("title", { children: "Anthropic" }), /* @__PURE__ */ jsx("path", { d: "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" })]
+				})
+			},
+			{
+				title: "Open in Cursor",
+				icon: /* @__PURE__ */ jsxs("svg", {
+					fill: "currentColor",
+					role: "img",
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: [/* @__PURE__ */ jsx("title", { children: "Cursor" }), /* @__PURE__ */ jsx("path", { d: "M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" })]
+				}),
+				href: `https://cursor.com/link/prompt?${new URLSearchParams({ text: q })}`
+			}
+		];
+	}, [githubUrl, markdownUrl]);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+		...props,
+		className: (s) => cn(buttonVariants({
+			color: "secondary",
+			size: "sm"
+		}), "gap-2", s.open && "bg-fd-accent text-fd-accent-foreground", typeof props.className === "function" ? props.className(s) : props.className),
+		children: ["Open", /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-fd-muted-foreground" })]
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "flex flex-col",
+		children: items.map((item) => /* @__PURE__ */ jsxs("a", {
+			href: item.href,
+			rel: "noreferrer noopener",
+			target: "_blank",
+			className: "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4",
+			children: [
+				item.icon,
+				item.title,
+				/* @__PURE__ */ jsx(ExternalLinkIcon, { className: "text-fd-muted-foreground size-3.5 ms-auto" })
+			]
+		}, item.href))
+	})] });
+}
+//#endregion
+export { MarkdownCopyButton, ViewOptionsPopover };
+
+//# sourceMappingURL=page-actions.js.map

package/dist/layouts/shared/page-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-actions.js","names":[],"sources":["../../../src/layouts/shared/page-actions.tsx"],"sourcesContent":["'use client';\nimport { type ComponentProps, useMemo, useState } from 'react';\nimport { Check, ChevronDown, Copy, ExternalLinkIcon, TextIcon } from 'lucide-react';\nimport { cn } from '@/utils/cn';\nimport { useCopyButton } from '@/utils/use-copy-button';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';\nimport { buttonVariants } from '@/components/ui/button';\n\nconst cache = new Map<string, Promise<string>>();\n\n/**\n * see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.\n */\nexport function MarkdownCopyButton({\n  markdownUrl,\n  ...props\n}: ComponentProps<'button'> & {\n  /**\n   * A URL to fetch the raw Markdown/MDX content of page\n   */\n  markdownUrl: string;\n}) {\n  const [isLoading, setLoading] = useState(false);\n  const [checked, onClick] = useCopyButton(async () => {\n    const cached = cache.get(markdownUrl);\n    if (cached) return navigator.clipboard.writeText(await cached);\n\n    setLoading(true);\n\n    try {\n      const promise = fetch(markdownUrl).then((res) => res.text());\n      cache.set(markdownUrl, promise);\n      await navigator.clipboard.write([\n        new ClipboardItem({\n          'text/plain': promise,\n        }),\n      ]);\n    } finally {\n      setLoading(false);\n    }\n  });\n\n  return (\n    <button\n      disabled={isLoading}\n      onClick={onClick}\n      {...props}\n      className={cn(\n        buttonVariants({\n          color: 'secondary',\n          size: 'sm',\n          className: 'gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground',\n        }),\n        props.className,\n      )}\n    >\n      {checked ? <Check /> : <Copy />}\n      Copy Markdown\n    </button>\n  );\n}\n\n/**\n * see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.\n */\nexport function ViewOptionsPopover({\n  markdownUrl,\n  githubUrl,\n  ...props\n}: ComponentProps<typeof PopoverTrigger> & {\n  /**\n   * A URL to the raw Markdown/MDX content of page\n   */\n  markdownUrl: string;\n\n  /**\n   * Source file URL on GitHub\n   */\n  githubUrl: string;\n}) {\n  const items = useMemo(() => {\n    const pageUrl = typeof window !== 'undefined' ? window.location.href : 'loading';\n    const q = `Read ${pageUrl}, I want to ask questions about it.`;\n\n    return [\n      {\n        title: 'Open in GitHub',\n        href: githubUrl,\n        icon: (\n          <svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\">\n            <title>GitHub</title>\n            <path d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\" />\n          </svg>\n        ),\n      },\n      {\n        title: 'View as Markdown',\n        href: markdownUrl,\n        icon: <TextIcon />,\n      },\n      {\n        title: 'Open in Scira AI',\n        href: `https://scira.ai/?${new URLSearchParams({\n          q,\n        })}`,\n        icon: (\n          <svg\n            width=\"910\"\n            height=\"934\"\n            viewBox=\"0 0 910 934\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <title>Scira AI</title>\n            <path\n              d=\"M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n              strokeWidth=\"8\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n              strokeWidth=\"8\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z\"\n              stroke=\"currentColor\"\n              strokeWidth=\"20\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z\"\n              stroke=\"currentColor\"\n              strokeWidth=\"20\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n              strokeWidth=\"8\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n              strokeWidth=\"8\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442\"\n              stroke=\"currentColor\"\n              strokeWidth=\"30\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ),\n      },\n      {\n        title: 'Open in ChatGPT',\n        href: `https://chatgpt.com/?${new URLSearchParams({\n          hints: 'search',\n          q,\n        })}`,\n        icon: (\n          <svg\n            role=\"img\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <title>OpenAI</title>\n            <path d=\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\" />\n          </svg>\n        ),\n      },\n      {\n        title: 'Open in Claude',\n        href: `https://claude.ai/new?${new URLSearchParams({\n          q,\n        })}`,\n        icon: (\n          <svg\n            fill=\"currentColor\"\n            role=\"img\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <title>Anthropic</title>\n            <path d=\"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z\" />\n          </svg>\n        ),\n      },\n      {\n        title: 'Open in Cursor',\n        icon: (\n          <svg\n            fill=\"currentColor\"\n            role=\"img\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <title>Cursor</title>\n            <path d=\"M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23\" />\n          </svg>\n        ),\n        href: `https://cursor.com/link/prompt?${new URLSearchParams({\n          text: q,\n        })}`,\n      },\n    ];\n  }, [githubUrl, markdownUrl]);\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        {...props}\n        className={(s) =>\n          cn(\n            buttonVariants({\n              color: 'secondary',\n              size: 'sm',\n            }),\n            'gap-2',\n            s.open && 'bg-fd-accent text-fd-accent-foreground',\n            typeof props.className === 'function' ? props.className(s) : props.className,\n          )\n        }\n      >\n        Open\n        <ChevronDown className=\"size-3.5 text-fd-muted-foreground\" />\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col\">\n        {items.map((item) => (\n          <a\n            key={item.href}\n            href={item.href}\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            className=\"text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4\"\n          >\n            {item.icon}\n            {item.title}\n            <ExternalLinkIcon className=\"text-fd-muted-foreground size-3.5 ms-auto\" />\n          </a>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -2848,6 +2848,11 @@
       flex-shrink: 0;
     }
   }
+  .\[\&_svg\]\:text-fd-muted-foreground {
+    & svg {
+      color: var(--color-fd-muted-foreground);
+    }
+  }
   .\[\&\>figure\:only-child\]\:-m-4 {
     &>figure:only-child {
       margin: calc(var(--spacing) * -4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.6.11",
+  "version": "16.6.13",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -126,7 +126,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.5",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.11",
+    "fumadocs-core": "16.6.13",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -136,7 +136,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.0.0",
-    "fumadocs-core": "16.6.11"
+    "fumadocs-core": "16.6.13"
   },
   "peerDependenciesMeta": {
     "next": {