@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/dist/components/sidebar/page-tree.js

@@ -1,58 +1,69 @@
-import { tree_exports } from "../../contexts/tree.js";
+import { useTreeContext, useTreePath } from "../../contexts/tree.js";
+import { isActive } from "../../utils/urls.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { usePathname } from "@hanzo/docs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useMemo } from "react";
-
 //#region src/components/sidebar/page-tree.tsx
+const RendererContext = createContext(null);
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
-	function PageTreeFolder({ item, children }) {
-		const path = (0, tree_exports.useTreePath)();
-		return /* @__PURE__ */ jsxs(SidebarFolder, {
-			collapsible: item.collapsible,
-			active: path.includes(item),
-			defaultOpen: item.defaultOpen,
-			children: [item.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-				href: item.index.url,
-				external: item.index.external,
-				children: [item.icon, item.name]
-			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children })]
+	function renderList(nodes) {
+		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
+	}
+	function PageTreeNode({ node }) {
+		const { Separator, Item, Folder, pathname } = use(RendererContext);
+		if (node.type === "separator") {
+			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
+			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
+		}
+		if (node.type === "folder") {
+			const path = useTreePath();
+			if (Folder) return /* @__PURE__ */ jsx(Folder, {
+				item: node,
+				children: renderList(node.children)
+			});
+			return /* @__PURE__ */ jsxs(SidebarFolder, {
+				collapsible: node.collapsible,
+				active: path.includes(node),
+				defaultOpen: node.defaultOpen,
+				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+					href: node.index.url,
+					active: isActive(node.index.url, pathname),
+					external: node.index.external,
+					children: [node.icon, node.name]
+				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
+			});
+		}
+		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: node.url,
+			external: node.external,
+			active: isActive(node.url, pathname),
+			icon: node.icon,
+			children: node.name
 		});
 	}
 	/**
 	* Render sidebar items from page tree
 	*/
 	return function SidebarPageTree(components) {
-		const { root } = (0, tree_exports.useTreeContext)();
-		const { Separator, Item, Folder = PageTreeFolder } = components;
-		return useMemo(() => {
-			function renderSidebarList(items) {
-				return items.map((item, i) => {
-					if (item.type === "separator") {
-						if (Separator) return /* @__PURE__ */ jsx(Separator, { item }, i);
-						return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i);
-					}
-					if (item.type === "folder") return /* @__PURE__ */ jsx(Folder, {
-						item,
-						children: renderSidebarList(item.children)
-					}, i);
-					if (Item) return /* @__PURE__ */ jsx(Item, { item }, item.url);
-					return /* @__PURE__ */ jsx(SidebarItem, {
-						href: item.url,
-						external: item.external,
-						icon: item.icon,
-						children: item.name
-					}, item.url);
-				});
-			}
-			return /* @__PURE__ */ jsx(Fragment$1, { children: renderSidebarList(root.children) }, root.$id);
-		}, [
-			Folder,
-			Item,
-			Separator,
-			root
-		]);
+		const { Folder, Item, Separator } = components;
+		const { root } = useTreeContext();
+		const pathname = usePathname();
+		return /* @__PURE__ */ jsx(RendererContext, {
+			value: useMemo(() => ({
+				Folder,
+				Item,
+				Separator,
+				pathname
+			}), [
+				Folder,
+				Item,
+				Separator,
+				pathname
+			]),
+			children: /* @__PURE__ */ jsx(Fragment, { children: renderList(root.children) }, root.$id)
+		});
 	};
 }
-
 //#endregion
 export { createPageTreeRenderer };
-//# sourceMappingURL=page-tree.js.map

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

@@ -1,11 +1,9 @@
-import { SidebarTab } from "./index.js";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
 import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/sidebar/tabs/dropdown.d.ts
-interface SidebarTabWithProps extends SidebarTab {
-  props?: ComponentProps<'a'>;
-}
+type SidebarTabWithProps = LayoutTab;
 declare function SidebarTabsDropdown({
   options,
   placeholder,
@@ -13,8 +11,7 @@ declare function SidebarTabsDropdown({
 }: {
   placeholder?: ReactNode;
   options: SidebarTabWithProps[];
-} & ComponentProps<'button'>): react_jsx_runtime17.JSX.Element;
-declare function isTabActive(tab: SidebarTab, pathname: string): boolean;
+} & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare const isTabActive: typeof isLayoutTabActive;
 //#endregion
-export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };
-//# sourceMappingURL=dropdown.d.ts.map
+export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/dropdown.js

@@ -1,28 +1,26 @@
-'use client';
-
-import { useSidebar } from "../base.js";
+"use client";
+import { cn } from "../../../utils/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
-import Link from "@hanzo/docs-core/link";
+import { isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { useSidebar } from "../base.js";
+import { useMemo, useState } from "react";
 import { usePathname } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { useMemo, useState } from "react";
-import { isActive, normalize } from "@hanzo/docs-ui/urls";
-
 //#region src/components/sidebar/tabs/dropdown.tsx
 function SidebarTabsDropdown({ options, placeholder, ...props }) {
 	const [open, setOpen] = useState(false);
 	const { closeOnRedirect } = useSidebar();
 	const pathname = usePathname();
 	const selected = useMemo(() => {
-		return options.findLast((item$1) => isTabActive(item$1, pathname));
+		return options.findLast((item) => isTabActive(item, pathname));
 	}, [options, pathname]);
 	const onClick = () => {
 		closeOnRedirect.current = false;
 		setOpen(false);
 	};
-	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "size-9 shrink-0 empty:hidden md:size-5",
 		children: selected.icon
 	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
@@ -37,42 +35,37 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 		onOpenChange: setOpen,
 		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
 			...props,
-			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[open]:bg-fd-accent data-[open]:text-fd-accent-foreground", props.className),
+			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-open:bg-fd-accent data-open:text-fd-accent-foreground", props.className),
 			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "flex flex-col gap-1 w-(--anchor-width) p-1 fd-scroll-container",
-			children: options.map((item$1) => {
-				const isActive$1 = selected && item$1.url === selected.url;
-				if (!isActive$1 && item$1.unlisted) return;
+			children: options.map((item) => {
+				const isActive = selected && item.url === selected.url;
+				if (!isActive && item.unlisted) return;
 				return /* @__PURE__ */ jsxs(Link, {
-					href: item$1.url,
+					href: item.url,
 					onClick,
-					...item$1.props,
-					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item$1.props?.className),
+					...item.props,
+					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
-							children: item$1.icon
+							children: item.icon
 						}),
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium leading-none",
-							children: item$1.title
+							children: item.title
 						}), /* @__PURE__ */ jsx("p", {
 							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
-							children: item$1.description
+							children: item.description
 						})] }),
-						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive$1 && "invisible") })
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
 					]
-				}, item$1.url);
+				}, item.url);
 			})
 		})]
 	});
 }
-function isTabActive(tab, pathname) {
-	if (tab.urls) return tab.urls.has(normalize(pathname));
-	return isActive(tab.url, pathname, true);
-}
-
+const isTabActive = isLayoutTabActive;
 //#endregion
 export { SidebarTabsDropdown, isTabActive };
-//# sourceMappingURL=dropdown.js.map

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

@@ -1,21 +1,8 @@
-import { ReactNode } from "react";
+import { LayoutTab } from "../../../layouts/shared/index.js";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/components/sidebar/tabs/index.d.ts
-interface SidebarTab {
-  /**
-   * Redirect URL of the folder, usually the index page
-   */
-  url: string;
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  /**
-   * Detect from a list of urls
-   */
-  urls?: Set<string>;
-  unlisted?: boolean;
-}
+type SidebarTab = LayoutTab;
 interface GetSidebarTabsOptions {
   transform?: (option: SidebarTab, node: PageTree.Folder) => SidebarTab | null;
 }
@@ -23,5 +10,4 @@ declare function getSidebarTabs(tree: PageTree.Root, {
   transform
 }?: GetSidebarTabsOptions): SidebarTab[];
 //#endregion
-export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };
-//# sourceMappingURL=index.d.ts.map
+export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };

package/dist/components/sidebar/tabs/index.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/sidebar/tabs/index.tsx
 const defaultTransform = (option, node) => {
 	if (!node.icon) return option;
@@ -43,7 +42,5 @@ function getFolderUrls(folder, output = /* @__PURE__ */ new Set()) {
 	}
 	return output;
 }
-
 //#endregion
 export { getSidebarTabs };
-//# sourceMappingURL=index.js.map

package/dist/components/steps.d.ts

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

package/dist/components/steps.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/steps.tsx
 function Steps({ children }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -13,7 +12,5 @@ function Step({ children }) {
 		children
 	});
 }
-
 //#endregion
 export { Step, Steps };
-//# sourceMappingURL=steps.js.map

package/dist/components/tabs.d.ts

@@ -1,8 +1,7 @@
-import { Tabs as Tabs$1, TabsContent as TabsContent$1 } from "./ui/tabs.js";
-import * as react_jsx_runtime133 from "react/jsx-runtime";
-import * as React from "react";
+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 _base_ui_react16 from "@base-ui/react";
+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'> {
@@ -21,8 +20,14 @@ interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onVal
    */
   label?: ReactNode;
 }
-declare const TabsList: React.ForwardRefExoticComponent<Omit<_base_ui_react16.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<_base_ui_react16.TabsTabProps & React.RefAttributes<Element>, "ref"> & React.RefAttributes<Element>>;
+declare function TabsList({
+  className,
+  ...props
+}: 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;
 declare function Tabs({
   ref,
   className,
@@ -31,7 +36,7 @@ declare function Tabs({
   defaultIndex,
   defaultValue,
   ...props
-}: TabsProps): react_jsx_runtime133.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.
@@ -41,12 +46,11 @@ interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
 declare function Tab({
   value,
   ...props
-}: TabProps): react_jsx_runtime133.JSX.Element;
+}: TabProps): react_jsx_runtime0.JSX.Element;
 declare function TabsContent({
   value,
   className,
   ...props
-}: ComponentProps<typeof TabsContent$1>): react_jsx_runtime133.JSX.Element;
+}: ComponentProps<typeof TabsContent$1>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };
-//# sourceMappingURL=tabs.d.ts.map
+export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };

package/dist/components/tabs.js

@@ -1,11 +1,8 @@
-'use client';
-
+"use client";
+import { cn } from "../utils/cn.js";
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
-import { cn } from "@hanzo/docs-ui/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
-
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
 const TabsContext = createContext(null);
 function useTabContext() {
@@ -13,18 +10,18 @@ function useTabContext() {
 	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
 	return ctx;
 }
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsList$1, {
-	ref,
-	...props,
-	className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
-}));
-TabsList.displayName = "TabsList";
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsTrigger$1, {
-	ref,
-	...props,
-	className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
-}));
-TabsTrigger.displayName = "TabsTrigger";
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsList$1, {
+		...props,
+		className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsTrigger$1, {
+		...props,
+		className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
+	});
+}
 function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : void 0, ...props }) {
 	const [value, setValue] = useState(defaultValue);
 	const collection = useMemo(() => [], []);
@@ -95,7 +92,5 @@ function useCollectionIndex() {
 function escapeValue(v) {
 	return v.toLowerCase().replace(/\s/, "-");
 }
-
 //#endregion
 export { Tab, Tabs, TabsContent, TabsList, TabsTrigger };
-//# sourceMappingURL=tabs.js.map

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

@@ -1 +1,19 @@
-export * from "@hanzo/docs-ui/components/toc/clerk";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
+
+//#region src/components/toc/clerk.d.ts
+declare function TOCItems({
+  ref,
+  className,
+  ...props
+}: 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;
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems };

package/dist/components/toc/clerk.js

@@ -1,12 +1,167 @@
-import { __reExport } from "../../_virtual/rolldown_runtime.js";
-
-export * from "@hanzo/docs-ui/components/toc/clerk"
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { useI18n } from "../../contexts/i18n.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { TocThumb, useTOCItems } from "./index.js";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 //#region src/components/toc/clerk.tsx
-var clerk_exports = {};
-import * as import__hanzo_docs_ui_components_toc_clerk from "@hanzo/docs-ui/components/toc/clerk";
-__reExport(clerk_exports, import__hanzo_docs_ui_components_toc_clerk);
-
+var clerk_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
+function TOCItems({ ref, className, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [svg, setSvg] = useState();
+	const onResize = useEffectEvent(() => {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return;
+		let w = 0;
+		let h = 0;
+		let b0 = 0;
+		let d = "";
+		for (let i = 0; i < items.length; i++) {
+			const element = container.querySelector(`a[href="#${items[i].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);
+			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;
+		}
+		setSvg({
+			d,
+			width: w + 1,
+			height: h
+		});
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const observer = new ResizeObserver(onResize);
+		onResize();
+		observer.observe(containerRef.current);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
+		containerRef,
+		className: "absolute top-0 inset-s-0",
+		style: {
+			width: svg.width,
+			height: svg.height
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${svg.width} ${svg.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: svg.width,
+				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"
+			})
+		}), /* @__PURE__ */ jsx(ThumbBox, {})]
+	}), /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(containerRef, ref),
+		className: cn("flex flex-col", className),
+		...props
+	})] });
+}
+function TOCEmpty() {
+	const { text } = useI18n();
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+}
+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;
+	}
+	if (startIdx === -1) return;
+	const isStart = endIdx < lastInactiveIdx;
+	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))"}` }
+	});
+}
+function getItemOffset(depth) {
+	if (depth <= 2) return 14;
+	if (depth === 3) return 26;
+	return 36;
+}
+function getLineOffset(depth) {
+	if (depth <= 2) return 2;
+	if (depth === 3) return 10;
+	return 20;
+}
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { lowerOffset, offset, upperOffset } = useMemo(() => {
+		const index = items.indexOf(item);
+		const offset = getLineOffset(item.depth);
+		return {
+			offset,
+			upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
+			lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
+		};
+	}, [items, item]);
+	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),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
+		children: [
+			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",
+				style: {
+					width: Math.abs(upperOffset - offset) + 1,
+					height: 12,
+					insetInlineStart: Math.min(offset, upperOffset)
+				},
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M ${upperOffset} 0 C ${upperOffset} 8 ${offset} 4 ${offset} 12`,
+					stroke: "black",
+					strokeWidth: "1",
+					fill: "none",
+					className: "stroke-fd-foreground/10"
+				})
+			}),
+			/* @__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"),
+				style: { insetInlineStart: offset }
+			}),
+			item.title
+		]
+	});
+}
 //#endregion
-export { clerk_exports };
-//# sourceMappingURL=clerk.js.map
+export { TOCEmpty, TOCItem, TOCItems, clerk_exports };

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

@@ -1 +1,19 @@
-export * from "@hanzo/docs-ui/components/toc/default";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
+
+//#region src/components/toc/default.d.ts
+declare function TOCItems({
+  ref,
+  className,
+  ...props
+}: 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;
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems };