@fumadocs/base-ui 16.7.0 → 16.7.1

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

@@ -1,9 +1,7 @@
 "use client";
 import { useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
-import { TOCProvider } from "../../../components/toc/index.js";
-import { TOC } from "./slots/toc.js";
-import { TOCPopover } from "./slots/toc-popover.js";
+import { TOC, TOCPopover, TOCProvider } from "./slots/toc.js";
 import { Footer } from "./slots/footer.js";
 import { Breadcrumb } from "./slots/breadcrumb.js";
 import { Container } from "./slots/container.js";
@@ -16,19 +14,21 @@ function useDocsPage() {
 	if (!context) throw new Error("Please use page components under <DocsPage /> (`fumadocs-ui/layouts/notebook/page`).");
 	return context;
 }
-function DocsPage({ tableOfContent: { enabled: tocEnabled, single = false, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, footer = {}, breadcrumb = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+function DocsPage({ tableOfContent: { enabled: tocEnabled, single, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, footer = {}, breadcrumb = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
 	tocEnabled ??= Boolean(!full && (toc.length > 0 || tocProps.footer || tocProps.header));
 	tocPopoverEnabled ??= Boolean(toc.length > 0 || tocPopoverProps.header || tocPopoverProps.footer);
 	const slots = {
 		breadcrumb: breadcrumb.enabled !== false ? defaultSlots.breadcrumb ?? InlineBreadcrumb : void 0,
 		footer: footer.enabled !== false ? defaultSlots.footer ?? InlineFooter : void 0,
-		toc: tocEnabled ? defaultSlots.toc ?? InlineTOC : void 0,
-		tocPopover: tocPopoverEnabled ? defaultSlots.tocPopover ?? InlineTOCPopover : void 0,
-		tocProvider: defaultSlots.tocProvider ?? TOCProvider,
+		toc: defaultSlots.toc ?? {
+			provider: TOCProvider,
+			main: tocEnabled ? InlineTOC : void 0,
+			popover: tocPopoverEnabled ? InlineTOCPopover : void 0
+		},
 		container: defaultSlots.container ?? Container
 	};
 	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		slots.tocPopover && /* @__PURE__ */ jsx(slots.tocPopover, {}),
+		slots.toc?.popover && /* @__PURE__ */ jsx(slots.toc.popover, {}),
 		slots.container && /* @__PURE__ */ jsxs(slots.container, {
 			...containerProps,
 			children: [
@@ -37,9 +37,9 @@ function DocsPage({ tableOfContent: { enabled: tocEnabled, single = false, ...to
 				slots.footer && /* @__PURE__ */ jsx(slots.footer, {})
 			]
 		}),
-		slots.toc && /* @__PURE__ */ jsx(slots.toc, {})
+		slots.toc?.main && /* @__PURE__ */ jsx(slots.toc.main, {})
 	] });
-	if (slots.tocProvider) content = /* @__PURE__ */ jsx(slots.tocProvider, {
+	if (slots.toc) content = /* @__PURE__ */ jsx(slots.toc.provider, {
 		single,
 		toc: tocEnabled || tocPopoverEnabled ? toc : [],
 		children: content

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -1,7 +1,10 @@
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): react_jsx_runtime0.JSX.Element;
 interface TOCProps {
   container?: ComponentProps<'div'>;
   /**
@@ -23,5 +26,30 @@ declare function TOC({
   footer,
   style
 }: TOCProps): react_jsx_runtime0.JSX.Element;
+interface TOCPopoverProps {
+  container?: ComponentProps<'div'>;
+  trigger?: ComponentProps<'button'>;
+  content?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+  /**
+   * @defaultValue 'normal'
+   */
+  style?: 'normal' | 'clerk';
+}
+declare function TOCPopover({
+  container,
+  trigger,
+  content,
+  header,
+  footer,
+  style
+}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOC, TOCProps };
+export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/notebook/page/slots/toc.js

@@ -1,12 +1,19 @@
 "use client";
-import { I18nLabel } from "../../../../contexts/i18n.js";
+import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea } from "../../../../components/toc/index.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
 import { TOCItems } from "../../../../components/toc/default.js";
 import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { useTreePath } from "../../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
+import { useNotebookLayout } from "../../client.js";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "lucide-react";
+import { ChevronDown, Text } from "lucide-react";
 //#region src/layouts/notebook/page/slots/toc.tsx
+function TOCProvider(props) {
+	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
+}
 function TOC({ container, header, footer, style }) {
 	return /* @__PURE__ */ jsxs("div", {
 		id: "nd-toc",
@@ -24,5 +31,130 @@ function TOC({ container, header, footer, style }) {
 		]
 	});
 }
+const TocPopoverContext = createContext(null);
+function TOCPopover({ container, trigger, content, header, footer, style }) {
+	return /* @__PURE__ */ jsxs(PageTOCPopover, {
+		...container,
+		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+			...content,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+				footer
+			]
+		})]
+	});
+}
+function PageTOCPopover({ className, children, ...rest }) {
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const { isNavTransparent } = useNotebookLayout();
+	const onClick = useEffectEvent((e) => {
+		if (!open) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
+			...rest,
+			children: /* @__PURE__ */ jsx("header", {
+				ref,
+				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
+				children
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const { text } = useI18n();
+	const { open } = use(TocPopoverContext);
+	const items = useTOCItems();
+	const active = useActiveAnchor();
+	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const path = useTreePath().at(-1);
+	const showItem = selected !== -1 && !open;
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
+		"data-toc-popover-trigger": "",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ProgressCircle, {
+				value: (selected + 1) / Math.max(1, items.length),
+				max: 1,
+				className: cn("shrink-0", open && "text-fd-primary")
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
+					children: path?.name ?? text.toc
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
+					children: items[selected]?.title
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
+		]
+	});
+}
+function clamp(input, min, max) {
+	if (input < min) return min;
+	if (input > max) return max;
+	return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+	const normalizedValue = clamp(value, min, max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progress = normalizedValue / max * circumference;
+	const circleProps = {
+		cx: size / 2,
+		cy: size / 2,
+		r: radius,
+		fill: "none",
+		strokeWidth
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "progressbar",
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-valuenow": normalizedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		...restSvgProps,
+		children: [/* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			className: "stroke-current/25"
+		}), /* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			stroke: "currentColor",
+			strokeDasharray: circumference,
+			strokeDashoffset: circumference - progress,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`,
+			className: "transition-all"
+		})]
+	});
+}
+function PageTOCPopoverContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-toc-popover-content": "",
+		...props,
+		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
+		children: props.children
+	});
+}
 //#endregion
-export { TOC };
+export { TOC, TOCPopover, TOCProvider };

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

@@ -2,19 +2,19 @@
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
-import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
-import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
-import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
+import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
+import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
+import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
 import { useNotebookLayout } from "../client.js";
 import { createElement, useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
-import { Check, ChevronsUpDown, Languages, Sidebar as Sidebar$1, X } from "lucide-react";
+import { Check, ChevronsUpDown, Languages, SidebarIcon, X } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/layouts/notebook/slots/sidebar.tsx
 const itemVariants = cva("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", { variants: {
@@ -196,7 +196,7 @@ function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
 							size: "icon-sm",
 							className: "mt-px mb-auto text-fd-muted-foreground"
 						})),
-						children: /* @__PURE__ */ jsx(Sidebar$1, {})
+						children: /* @__PURE__ */ jsx(SidebarIcon, {})
 					})
 				]
 			}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {

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

@@ -1,5 +1,5 @@
 import { LanguageSelectProps, LanguageSelectTextProps } from "./slots/language-select.js";
-import { FullSearchTriggeProps, SearchTriggerProps } from "./slots/search-trigger.js";
+import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigger.js";
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseLayoutProps, LinkItemType } from "./index.js";
 import { ComponentProps, FC } from "react";
@@ -19,7 +19,7 @@ interface BaseSlots {
   navTitle?: FC<ComponentProps<'a'>>;
   searchTrigger?: {
     sm: FC<SearchTriggerProps>;
-    full: FC<FullSearchTriggeProps>;
+    full: FC<FullSearchTriggerProps>;
   };
   languageSelect?: {
     root: FC<LanguageSelectProps>;

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

@@ -1,4 +1,4 @@
-import { FullSearchTriggeProps, SearchTriggerProps } from "./slots/search-trigger.js";
+import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigger.js";
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseSlots, BaseSlotsProps, LinkItem, baseSlots } from "./client.js";
 import { ComponentProps, ReactNode } from "react";
@@ -48,7 +48,7 @@ interface BaseLayoutProps {
 interface SearchToggleOptions {
   enabled?: boolean;
   sm?: SearchTriggerProps;
-  full?: FullSearchTriggeProps;
+  full?: FullSearchTriggerProps;
   /** @deprecated use `slots.searchTrigger` instead */
   components?: {
     sm?: ReactNode;
@@ -75,7 +75,7 @@ interface LayoutTab {
    */
   $folder?: PageTree.Folder;
   /**
-   * Detect from a list of urls (when not binded to page tree).
+   * Detect from a list of urls (when not bound to page tree).
    */
   urls?: Set<string>;
 }

package/dist/layouts/shared/slots/search-trigger.d.ts

@@ -12,12 +12,12 @@ declare function SearchTrigger({
   color,
   ...props
 }: SearchTriggerProps): react_jsx_runtime0.JSX.Element | null;
-interface FullSearchTriggeProps extends ComponentProps<'button'> {
+interface FullSearchTriggerProps extends ComponentProps<'button'> {
   hideIfDisabled?: boolean;
 }
 declare function FullSearchTrigger({
   hideIfDisabled,
   ...props
-}: FullSearchTriggeProps): react_jsx_runtime0.JSX.Element | null;
+}: FullSearchTriggerProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { FullSearchTriggeProps, FullSearchTrigger, SearchTrigger, SearchTriggerProps };
+export { FullSearchTrigger, FullSearchTriggerProps, SearchTrigger, SearchTriggerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.7.0",
+  "version": "16.7.1",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -61,7 +61,6 @@
     "./layouts/docs/page/slots/container": "./dist/layouts/docs/page/slots/container.js",
     "./layouts/docs/page/slots/footer": "./dist/layouts/docs/page/slots/footer.js",
     "./layouts/docs/page/slots/toc": "./dist/layouts/docs/page/slots/toc.js",
-    "./layouts/docs/page/slots/toc-popover": "./dist/layouts/docs/page/slots/toc-popover.js",
     "./layouts/docs/slots/container": "./dist/layouts/docs/slots/container.js",
     "./layouts/docs/slots/header": "./dist/layouts/docs/slots/header.js",
     "./layouts/docs/slots/sidebar": "./dist/layouts/docs/slots/sidebar.js",
@@ -85,7 +84,6 @@
     "./layouts/notebook/page/slots/container": "./dist/layouts/notebook/page/slots/container.js",
     "./layouts/notebook/page/slots/footer": "./dist/layouts/notebook/page/slots/footer.js",
     "./layouts/notebook/page/slots/toc": "./dist/layouts/notebook/page/slots/toc.js",
-    "./layouts/notebook/page/slots/toc-popover": "./dist/layouts/notebook/page/slots/toc-popover.js",
     "./layouts/notebook/slots/container": "./dist/layouts/notebook/slots/container.js",
     "./layouts/notebook/slots/header": "./dist/layouts/notebook/slots/header.js",
     "./layouts/notebook/slots/sidebar": "./dist/layouts/notebook/slots/sidebar.js",
@@ -142,9 +140,9 @@
     "tailwindcss": "^4.2.2",
     "tsdown": "0.21.4",
     "unified": "^11.0.5",
-    "@fumadocs/cli": "1.3.0",
+    "@fumadocs/cli": "1.3.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.7.0",
+    "fumadocs-core": "16.7.1",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -155,7 +153,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shiki": "*",
-    "fumadocs-core": "16.7.0"
+    "fumadocs-core": "16.7.1"
   },
   "peerDependenciesMeta": {
     "shiki": {

package/dist/layouts/docs/page/slots/toc-popover.d.ts

@@ -1,31 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/layouts/docs/page/slots/toc-popover.d.ts
-interface TOCPopoverProps {
-  container?: ComponentProps<'div'>;
-  trigger?: ComponentProps<'button'>;
-  content?: ComponentProps<'div'>;
-  /**
-   * Custom content in TOC container, before the main TOC
-   */
-  header?: ReactNode;
-  /**
-   * Custom content in TOC container, after the main TOC
-   */
-  footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
-declare function TOCPopover({
-  container,
-  trigger,
-  content,
-  header,
-  footer,
-  style
-}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { TOCPopover, TOCPopoverProps };

package/dist/layouts/docs/page/slots/toc-popover.js

@@ -1,141 +0,0 @@
-"use client";
-import { useI18n } from "../../../../contexts/i18n.js";
-import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea, useTOCItems } from "../../../../components/toc/index.js";
-import { TOCItems } from "../../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
-import { useTreePath } from "../../../../contexts/tree.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
-import { useDocsLayout } from "../../client.js";
-import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import { useActiveAnchor } from "fumadocs-core/toc";
-//#region src/layouts/docs/page/slots/toc-popover.tsx
-const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style }) {
-	return /* @__PURE__ */ jsxs(PageTOCPopover, {
-		...container,
-		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
-			...content,
-			children: [
-				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				footer
-			]
-		})]
-	});
-}
-function PageTOCPopover({ className, children, ...rest }) {
-	const ref = useRef(null);
-	const [open, setOpen] = useState(false);
-	const { isNavTransparent } = useDocsLayout();
-	const onClick = useEffectEvent((e) => {
-		if (!open) return;
-		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-	});
-	useEffect(() => {
-		window.addEventListener("click", onClick);
-		return () => {
-			window.removeEventListener("click", onClick);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(TocPopoverContext, {
-		value: useMemo(() => ({
-			open,
-			setOpen
-		}), [setOpen, open]),
-		children: /* @__PURE__ */ jsx(Collapsible, {
-			open,
-			onOpenChange: setOpen,
-			"data-toc-popover": "",
-			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
-			...rest,
-			children: /* @__PURE__ */ jsx("header", {
-				ref,
-				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
-				children
-			})
-		})
-	});
-}
-function PageTOCPopoverTrigger({ className, ...props }) {
-	const { text } = useI18n();
-	const { open } = use(TocPopoverContext);
-	const items = useTOCItems();
-	const active = useActiveAnchor();
-	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
-	const path = useTreePath().at(-1);
-	const showItem = selected !== -1 && !open;
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
-		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
-		"data-toc-popover-trigger": "",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ProgressCircle, {
-				value: (selected + 1) / Math.max(1, items.length),
-				max: 1,
-				className: cn("shrink-0", open && "text-fd-primary")
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
-					children: path?.name ?? text.toc
-				}), /* @__PURE__ */ jsx("span", {
-					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
-					children: items[selected]?.title
-				})]
-			}),
-			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
-		]
-	});
-}
-function clamp(input, min, max) {
-	if (input < min) return min;
-	if (input > max) return max;
-	return input;
-}
-function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
-	const normalizedValue = clamp(value, min, max);
-	const radius = (size - strokeWidth) / 2;
-	const circumference = 2 * Math.PI * radius;
-	const progress = normalizedValue / max * circumference;
-	const circleProps = {
-		cx: size / 2,
-		cy: size / 2,
-		r: radius,
-		fill: "none",
-		strokeWidth
-	};
-	return /* @__PURE__ */ jsxs("svg", {
-		role: "progressbar",
-		viewBox: `0 0 ${size} ${size}`,
-		"aria-valuenow": normalizedValue,
-		"aria-valuemin": min,
-		"aria-valuemax": max,
-		...restSvgProps,
-		children: [/* @__PURE__ */ jsx("circle", {
-			...circleProps,
-			className: "stroke-current/25"
-		}), /* @__PURE__ */ jsx("circle", {
-			...circleProps,
-			stroke: "currentColor",
-			strokeDasharray: circumference,
-			strokeDashoffset: circumference - progress,
-			strokeLinecap: "round",
-			transform: `rotate(-90 ${size / 2} ${size / 2})`,
-			className: "transition-all"
-		})]
-	});
-}
-function PageTOCPopoverContent(props) {
-	return /* @__PURE__ */ jsx(CollapsibleContent, {
-		"data-toc-popover-content": "",
-		...props,
-		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
-		children: props.children
-	});
-}
-//#endregion
-export { TOCPopover };

package/dist/layouts/notebook/page/slots/toc-popover.d.ts

@@ -1,31 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/layouts/notebook/page/slots/toc-popover.d.ts
-interface TOCPopoverProps {
-  container?: ComponentProps<'div'>;
-  trigger?: ComponentProps<'button'>;
-  content?: ComponentProps<'div'>;
-  /**
-   * Custom content in TOC container, before the main TOC
-   */
-  header?: ReactNode;
-  /**
-   * Custom content in TOC container, after the main TOC
-   */
-  footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
-declare function TOCPopover({
-  container,
-  trigger,
-  content,
-  header,
-  footer,
-  style
-}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { TOCPopover, TOCPopoverProps };