@fumadocs/base-ui 16.7.6 → 16.7.8

package/dist/components/dialog/search.d.ts

@@ -1,6 +1,6 @@
 import { SharedProps } from "../../contexts/search.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 import { HighlightedText, ReactSortedResult } from "fumadocs-core/search";
 
@@ -28,24 +28,24 @@ declare function SearchDialog({
   isLoading,
   onSelect: onSelectProp,
   children
-}: SearchDialogProps): react_jsx_runtime0.JSX.Element;
-declare function SearchDialogHeader(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-declare function SearchDialogInput(props: ComponentProps<'input'>): react_jsx_runtime0.JSX.Element;
+}: SearchDialogProps): _$react_jsx_runtime0.JSX.Element;
+declare function SearchDialogHeader(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function SearchDialogInput(props: ComponentProps<'input'>): _$react_jsx_runtime0.JSX.Element;
 declare function SearchDialogClose({
   children,
   className,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
-declare function SearchDialogFooter(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
+declare function SearchDialogFooter(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare function SearchDialogOverlay({
   className,
   ...props
-}: ComponentProps<typeof Dialog.Backdrop>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<typeof Dialog.Backdrop>): _$react_jsx_runtime0.JSX.Element;
 declare function SearchDialogContent({
   children,
   className,
   ...props
-}: ComponentProps<typeof Dialog.Popup>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<typeof Dialog.Popup>): _$react_jsx_runtime0.JSX.Element;
 declare function SearchDialogList({
   items,
   Empty,
@@ -64,7 +64,7 @@ declare function SearchDialogList({
     item: SearchItemType;
     onClick: () => void;
   }) => ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function SearchDialogListItem({
   item,
   className,
@@ -76,8 +76,8 @@ declare function SearchDialogListItem({
   renderMarkdown?: (v: string) => ReactNode; /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
   renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
   item: SearchItemType;
-}): react_jsx_runtime0.JSX.Element;
-declare function SearchDialogIcon(props: ComponentProps<'svg'>): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SearchDialogIcon(props: ComponentProps<'svg'>): _$react_jsx_runtime0.JSX.Element;
 interface TagsListProps extends ComponentProps<'div'> {
   tag?: string;
   onTagChange: (tag: string | undefined) => void;
@@ -88,14 +88,14 @@ declare function TagsList({
   onTagChange,
   allowClear,
   ...props
-}: TagsListProps): react_jsx_runtime0.JSX.Element;
+}: TagsListProps): _$react_jsx_runtime0.JSX.Element;
 declare function TagsListItem({
   value,
   className,
   ...props
 }: ComponentProps<'button'> & {
   value: string;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function useSearch(): {
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/dist/components/dynamic-codeblock.core.d.ts

@@ -1,5 +1,5 @@
 import { CodeBlockProps } from "./codeblock.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { UseShikiOptions } from "fumadocs-core/highlight/shiki/react";
 import { HighlighterCore } from "shiki";
 
@@ -30,6 +30,6 @@ declare function DynamicCodeBlock({
   options,
   wrapInSuspense,
   highlighter
-}: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
+}: DynamicCodeblockProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/dynamic-codeblock.d.ts

@@ -1,10 +1,10 @@
 import { DynamicCodeblockProps as DynamicCodeblockProps$1 } from "./dynamic-codeblock.core.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/dynamic-codeblock.d.ts
 type DynamicCodeblockProps = Omit<DynamicCodeblockProps$1, 'highlighter' | 'options'> & {
   options?: DynamicCodeblockProps$1['options'];
 };
-declare function DynamicCodeBlock(props: DynamicCodeblockProps): react_jsx_runtime0.JSX.Element;
+declare function DynamicCodeBlock(props: DynamicCodeblockProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DynamicCodeBlock, DynamicCodeblockProps };

package/dist/components/github-info.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/github-info.d.ts
 interface FetchRepositoryInfoOptions {
@@ -27,6 +27,6 @@ declare function GithubInfo({
   baseUrl,
   fetchOptions,
   ...props
-}: ComponentProps<'a'> & FetchRepositoryInfoOptions): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'a'> & FetchRepositoryInfoOptions): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FetchRepositoryInfoOptions, GithubInfo, RepositoryInfo, fetchRepositoryInfo };

package/dist/components/image-zoom.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 import { ImageProps } from "fumadocs-core/framework";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { UncontrolledProps } from "react-medium-image-zoom";
 
 //#region src/components/image-zoom.d.ts
@@ -19,6 +19,6 @@ declare function ImageZoom({
   children,
   rmiz,
   ...props
-}: ImageZoomProps): react_jsx_runtime0.JSX.Element;
+}: ImageZoomProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ImageZoom, ImageZoomProps };

package/dist/components/image-zoom.js

@@ -1,6 +1,5 @@
 "use client";
-import "./image-zoom.css";
-/* empty css            */
+import "./image-zoom2.css";
 import { Image } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
 import Zoom from "react-medium-image-zoom";

package/dist/components/{image-zoom.css → image-zoom2.css}

@@ -8,24 +8,19 @@
   position: absolute;
 }
 
-[data-rmiz-btn-zoom],
-[data-rmiz-btn-unzoom] {
+[data-rmiz-btn-zoom], [data-rmiz-btn-unzoom] {
   display: none;
 }
 
-[data-rmiz-content='found'] img {
+[data-rmiz-content="found"] img {
   cursor: zoom-in;
 }
 
 [data-rmiz-modal][open] {
-  width: 100vw /* fallback */;
+  background-color: #0000;
   width: 100dvw;
-
-  height: 100vh /* fallback */;
-  height: 100dvh;
-
-  background-color: transparent;
   max-width: none;
+  height: 100dvh;
   max-height: none;
   margin: 0;
   padding: 0;
@@ -38,17 +33,17 @@
 }
 
 [data-rmiz-modal-overlay] {
-  transition: background-color 0.3s;
+  transition: background-color .3s;
   position: absolute;
   inset: 0;
 }
 
-[data-rmiz-modal-overlay='visible'] {
+[data-rmiz-modal-overlay="visible"] {
   background-color: var(--color-fd-background);
 }
 
-[data-rmiz-modal-overlay='hidden'] {
-  background-color: transparent;
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: #0000;
 }
 
 [data-rmiz-modal-content] {
@@ -65,13 +60,12 @@
   cursor: zoom-out;
   image-rendering: high-quality;
   transform-origin: 0 0;
-  transition: transform 0.3s;
+  transition: transform .3s;
   position: absolute;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-rmiz-modal-overlay],
-  [data-rmiz-modal-img] {
-    transition-duration: 0.01ms !important;
+  [data-rmiz-modal-overlay], [data-rmiz-modal-img] {
+    transition-duration: .01ms !important;
   }
 }

package/dist/components/inline-toc.d.ts

@@ -1,6 +1,6 @@
 import { Collapsible } from "./ui/collapsible.js";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/components/inline-toc.d.ts
@@ -11,6 +11,6 @@ declare function InlineTOC({
   items,
   className,
   ...props
-}: InlineTocProps): react_jsx_runtime0.JSX.Element;
+}: InlineTocProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { InlineTOC, InlineTocProps };

package/dist/components/sidebar/base.d.ts

@@ -1,8 +1,8 @@
 import { CollapsibleContentProps, CollapsibleTriggerProps } from "../ui/collapsible.js";
 import { ScrollAreaProps } from "../ui/scroll-area.js";
-import * as react from "react";
+import * as _$react from "react";
 import { ComponentProps, PointerEvent, ReactNode, RefObject } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps } from "fumadocs-core/link";
 
 //#region src/components/sidebar/base.d.ts
@@ -37,12 +37,12 @@ interface SidebarProviderProps {
   children?: ReactNode;
 }
 type Mode = 'drawer' | 'full';
-declare const SidebarContext: react.Context<SidebarContext | null>;
+declare const SidebarContext: _$react.Context<SidebarContext | null>;
 declare function SidebarProvider({
   defaultOpenLevel,
   prefetch,
   children
-}: SidebarProviderProps): react_jsx_runtime0.JSX.Element;
+}: SidebarProviderProps): _$react_jsx_runtime0.JSX.Element;
 declare function useSidebar(): SidebarContext;
 declare function useFolder(): {
   open: boolean;
@@ -62,17 +62,17 @@ declare function SidebarContent({
     onPointerLeave: (event: PointerEvent) => void;
   }) => ReactNode;
 }): ReactNode;
-declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element | undefined;
+declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element | undefined;
 declare function SidebarDrawerContent({
   className,
   children,
   ...props
-}: ComponentProps<'aside'>): react_jsx_runtime0.JSX.Element | undefined;
+}: ComponentProps<'aside'>): _$react_jsx_runtime0.JSX.Element | undefined;
 declare function SidebarViewport({
   className,
   ...props
-}: ScrollAreaProps): react_jsx_runtime0.JSX.Element;
-declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
+}: ScrollAreaProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarSeparator(props: ComponentProps<'p'>): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarItem({
   icon,
   active,
@@ -81,7 +81,7 @@ declare function SidebarItem({
 }: LinkProps & {
   active?: boolean;
   icon?: ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarFolder({
   defaultOpen: defaultOpenProp,
   collapsible,
@@ -92,24 +92,24 @@ declare function SidebarFolder({
   active?: boolean;
   defaultOpen?: boolean;
   collapsible?: boolean;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderTrigger({
   children,
   ...props
-}: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
+}: CollapsibleTriggerProps): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
   active,
   ...props
 }: LinkProps & {
   active?: boolean;
-}): react_jsx_runtime0.JSX.Element;
-declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarFolderContent(props: CollapsibleContentProps): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
-declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
 /**
  * scroll to the element if `active` is true
  */

package/dist/components/sidebar/link-item.d.ts

@@ -1,7 +1,7 @@
 import { base_d_exports } from "./base.js";
 import { LinkItemType } from "../../layouts/shared/index.js";
 import { HTMLAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/sidebar/link-item.d.ts
 type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
@@ -18,6 +18,6 @@ declare function createLinkItemRenderer({
   item: Exclude<LinkItemType, {
     type: "icon";
   }>;
-}) => react_jsx_runtime0.JSX.Element;
+}) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { createLinkItemRenderer };

package/dist/components/sidebar/page-tree.d.ts

@@ -1,6 +1,6 @@
 import { base_d_exports } from "./base.js";
 import { FC, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/components/sidebar/page-tree.d.ts
@@ -24,6 +24,6 @@ declare function createPageTreeRenderer({
   SidebarFolderTrigger,
   SidebarSeparator,
   SidebarItem
-}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime0.JSX.Element;
+}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SidebarPageTreeComponents, createPageTreeRenderer };

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -1,6 +1,6 @@
 import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/sidebar/tabs/dropdown.d.ts
 type SidebarTabWithProps = LayoutTab;
@@ -11,7 +11,7 @@ declare function SidebarTabsDropdown({
 }: {
   placeholder?: ReactNode;
   options: SidebarTabWithProps[];
-} & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+} & ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
 declare const isTabActive: typeof isLayoutTabActive;
 //#endregion
 export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };

package/dist/components/steps.d.ts

@@ -1,16 +1,16 @@
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/steps.d.ts
 declare function Steps({
   children
 }: {
   children: ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function Step({
   children
 }: {
   children: ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Step, Steps };

package/dist/components/tabs.d.ts

@@ -1,7 +1,7 @@
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/tabs.d.ts
 interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {
@@ -23,11 +23,11 @@ interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onVal
 declare function TabsList({
   className,
   ...props
-}: React$1.ComponentPropsWithRef<typeof TabsList$1>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentPropsWithRef<typeof TabsList$1>): _$react_jsx_runtime0.JSX.Element;
 declare function TabsTrigger({
   className,
   ...props
-}: React$1.ComponentPropsWithRef<typeof TabsTrigger$1>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentPropsWithRef<typeof TabsTrigger$1>): _$react_jsx_runtime0.JSX.Element;
 declare function Tabs({
   ref,
   className,
@@ -36,7 +36,7 @@ declare function Tabs({
   defaultIndex,
   defaultValue,
   ...props
-}: TabsProps): react_jsx_runtime0.JSX.Element;
+}: TabsProps): _$react_jsx_runtime0.JSX.Element;
 interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
   /**
    * Value of tab, detect from index if unspecified.
@@ -46,11 +46,11 @@ interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
 declare function Tab({
   value,
   ...props
-}: TabProps): react_jsx_runtime0.JSX.Element;
+}: TabProps): _$react_jsx_runtime0.JSX.Element;
 declare function TabsContent({
   value,
   className,
   ...props
-}: ComponentProps<typeof TabsContent$1>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<typeof TabsContent$1>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };

package/dist/components/toc/clerk.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/clerk.d.ts
@@ -7,13 +7,13 @@ declare function TOCItems({
   ref,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
   ...props
 }: Primitive.TOCItemProps & {
   item: Primitive.TOCItemType;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOCEmpty, TOCItem, TOCItems };

package/dist/components/toc/clerk.js

@@ -22,25 +22,46 @@ function TOCItems({ ref, className, ...props }) {
 		if (!container || container.clientHeight === 0) return;
 		let w = 0;
 		let h = 0;
-		let b0 = 0;
+		let upperBottom = 0;
+		let upperX = 0;
 		let d = "";
+		const output = [];
 		for (let i = 0; i < items.length; i++) {
-			const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
+			const item = items[i];
+			const element = container.querySelector(`a[href="#${item.url.slice(1)}"]`);
 			if (!element) continue;
 			const styles = getComputedStyle(element);
-			const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
-			w = Math.max(offset, w);
+			const x = getLineOffset(item.depth) + .5, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(x + 8, w);
 			h = Math.max(h, bottom);
-			if (i === 0) d += ` M${offset} ${top} L${offset} ${bottom}`;
-			else {
-				const pOffset = getLineOffset(items[i - 1].depth) + 1;
-				d += ` C ${pOffset} ${top - 4} ${offset} ${b0 + 4} ${offset} ${top} L${offset} ${bottom}`;
-			}
-			b0 = bottom;
+			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+			else d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			if (item._step !== void 0) output.push(/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: (top + bottom) / 2,
+				r: "8",
+				className: "fill-fd-primary"
+			}, `${i}-circle`), /* @__PURE__ */ jsx("text", {
+				x,
+				y: (top + bottom) / 2,
+				textAnchor: "middle",
+				alignmentBaseline: "central",
+				dominantBaseline: "middle",
+				className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono",
+				children: item._step
+			}, `${i}-text`));
+			upperX = x;
+			upperBottom = bottom;
 		}
-		setSvg({
+		output.unshift(/* @__PURE__ */ jsx("path", {
 			d,
-			width: w + 1,
+			className: "stroke-fd-primary",
+			strokeWidth: "1",
+			fill: "none"
+		}, "path"));
+		setSvg({
+			content: output,
+			width: w,
 			height: h
 		});
 	});
@@ -69,12 +90,7 @@ function TOCItems({ ref, className, ...props }) {
 				height: svg.height,
 				clipPath: `polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))`
 			},
-			children: /* @__PURE__ */ jsx("path", {
-				d: svg.d,
-				className: "stroke-fd-primary",
-				strokeWidth: "1",
-				fill: "none"
-			})
+			children: svg.content
 		}), /* @__PURE__ */ jsx(ThumbBox, {})]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
@@ -91,32 +107,39 @@ function TOCEmpty() {
 }
 function ThumbBox() {
 	const items = Primitive.useItems();
-	let startIdx = -1;
-	let endIdx = -1;
-	let lastInactiveIdx = -1;
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i];
-		if (item.active) {
-			if (startIdx === -1) startIdx = i;
-			endIdx = i;
-		} else if (lastInactiveIdx === -1 || items[lastInactiveIdx].t < item.t) lastInactiveIdx = i;
-	}
+	const previousRef = useRef(null);
+	const startIdx = items.findIndex((item) => item.active);
+	const endIdx = items.findLastIndex((item) => item.active);
 	if (startIdx === -1) return;
-	const isStart = endIdx < lastInactiveIdx;
+	let isUp = false;
+	if (previousRef.current) {
+		const prev = previousRef.current;
+		isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+	}
+	previousRef.current = {
+		startIdx,
+		endIdx,
+		isUp
+	};
+	const original = items[isUp ? startIdx : endIdx].original;
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
-		style: { translate: `calc(${getLineOffset(items[isStart ? startIdx : endIdx].original.depth)}px - 1.25px) ${isStart ? "var(--fd-top)" : "calc(var(--fd-top) + var(--fd-height))"}` }
+		style: {
+			translate: `${getLineOffset(original.depth) - 1.5}px calc(${isUp ? "var(--fd-top)" : "var(--fd-top) + var(--fd-height)"} - 1.5px)`,
+			scale: original._step !== void 0 ? "0" : "1"
+		}
 	});
 }
+const a = 8;
 function getItemOffset(depth) {
-	if (depth <= 2) return 14;
-	if (depth === 3) return 26;
-	return 36;
+	if (depth <= 2) return 12 + a;
+	if (depth === 3) return 24 + a;
+	return 36 + a;
 }
 function getLineOffset(depth) {
-	if (depth <= 2) return 2;
-	if (depth === 3) return 10;
-	return 20;
+	if (depth <= 2) return a;
+	if (depth === 3) return 8 + a;
+	return 16 + a;
 }
 function TOCItem({ item, ...props }) {
 	const items = useTOCItems();
@@ -132,7 +155,7 @@ function TOCItem({ item, ...props }) {
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
 		...props,
-		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", props.className),
+		className: cn("group prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", props.className),
 		style: {
 			paddingInlineStart: getItemOffset(item.depth),
 			...props.style
@@ -141,7 +164,7 @@ function TOCItem({ item, ...props }) {
 			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				viewBox: `${Math.min(offset, upperOffset)} 0 ${Math.abs(upperOffset - offset)} 12`,
-				className: "absolute -top-1.5",
+				className: "absolute -top-1.5 -z-1",
 				style: {
 					width: Math.abs(upperOffset - offset) + 1,
 					height: 12,
@@ -156,9 +179,14 @@ function TOCItem({ item, ...props }) {
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("absolute inset-y-0 w-px bg-fd-foreground/10", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
+				className: cn("absolute inset-y-0 w-px bg-fd-foreground/10 -z-1", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
 				style: { insetInlineStart: offset }
 			}),
+			item._step !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "absolute flex items-center justify-center -translate-1/2 -z-1 top-[calc(50%-var(--t,0px)+var(--b,0px))] size-4 font-mono font-medium text-xs bg-fd-muted text-fd-muted-foreground rounded-full leading-none group-first:[--t:--spacing(0.75)] group-last:[--b:--spacing(0.75)]",
+				style: { insetInlineStart: offset },
+				children: item._step
+			}),
 			item.title
 		]
 	});

package/dist/components/toc/default.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/default.d.ts
@@ -7,13 +7,13 @@ declare function TOCItems({
   ref,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
   ...props
 }: Primitive.TOCItemProps & {
   item: Primitive.TOCItemType;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOCEmpty, TOCItem, TOCItems };