boltdocs 1.7.0 → 1.8.0

package/dist/{chunk-MULKZFVN.mjs → chunk-SFVOGJ2W.mjs}

@@ -326,10 +326,11 @@ function GithubStars({ repo }) {
 }
 
 // src/client/theme/ui/Navbar/Tabs.tsx
+import { useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
 import { useLocation as useLocation10 } from "react-router-dom";
 
 // src/client/theme/ui/Link/Link.tsx
-import React8 from "react";
+import React10 from "react";
 import {
   Link as RouterLink,
   NavLink as RouterNavLink,
@@ -376,7 +377,7 @@ function PreloadProvider({
 }
 
 // src/client/app/index.tsx
-import React7, { useEffect as useEffect7, useState as useState9 } from "react";
+import React9, { useEffect as useEffect8, useState as useState10 } from "react";
 import ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
@@ -387,7 +388,7 @@ import {
 } from "react-router-dom";
 
 // src/client/theme/ui/Layout/Layout.tsx
-import React5 from "react";
+import React7 from "react";
 import { useLocation as useLocation7 } from "react-router-dom";
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
 
@@ -699,13 +700,7 @@ function OnThisPage({
       e.preventDefault();
       const el = document.getElementById(id);
       if (el) {
-        const offset = 80;
-        const bodyRect = document.body.getBoundingClientRect().top;
-        const elementRect = el.getBoundingClientRect().top;
-        const elementPosition = elementRect - bodyRect;
-        const offsetPosition = elementPosition - offset;
-        window.scrollTo({
-          top: offsetPosition,
+        el.scrollIntoView({
           behavior: "smooth"
         });
         setActiveId(id);
@@ -853,8 +848,85 @@ function BackgroundGradient() {
   ] });
 }
 
+// src/client/theme/ui/ProgressBar/ProgressBar.tsx
+import { useEffect as useEffect7, useState as useState7 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ProgressBar() {
+  const [progress, setProgress] = useState7(0);
+  useEffect7(() => {
+    let container = null;
+    let timer;
+    const handleScroll = () => {
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      if (scrollHeight <= clientHeight) {
+        setProgress(0);
+        return;
+      }
+      const scrollPercent = scrollTop / (scrollHeight - clientHeight) * 100;
+      setProgress(Math.min(100, Math.max(0, scrollPercent)));
+    };
+    const attachListener = () => {
+      container = document.querySelector(".boltdocs-content");
+      if (container) {
+        container.addEventListener("scroll", handleScroll);
+        handleScroll();
+        if (timer) clearInterval(timer);
+        return true;
+      }
+      return false;
+    };
+    if (!attachListener()) {
+      timer = setInterval(attachListener, 100);
+    }
+    return () => {
+      if (container) container.removeEventListener("scroll", handleScroll);
+      if (timer) clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx14("div", { className: "boltdocs-progress-container", children: /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: "boltdocs-progress-bar",
+      style: { width: `${progress}%` }
+    }
+  ) });
+}
+
+// src/client/theme/ui/ErrorBoundary/ErrorBoundary.tsx
+import { Component } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  state = {
+    hasError: false
+  };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Uncaught error in Boltdocs Layout:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || /* @__PURE__ */ jsxs9("div", { className: "boltdocs-error-boundary", children: [
+        /* @__PURE__ */ jsx15("div", { className: "boltdocs-error-title", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx15("p", { className: "boltdocs-error-message", children: this.state.error?.message || "An unexpected error occurred while rendering this page." }),
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            className: "boltdocs-error-retry",
+            onClick: () => this.setState({ hasError: false }),
+            children: "Try again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
 // src/client/theme/ui/Layout/Layout.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThemeLayout({
   config,
   routes,
@@ -886,13 +958,14 @@ function ThemeLayout({
   const prevPage = localIndex > 0 ? filteredRoutes[localIndex - 1] : null;
   const nextPage = localIndex >= 0 && localIndex < filteredRoutes.length - 1 ? filteredRoutes[localIndex + 1] : null;
   const { preload } = usePreload();
-  React5.useEffect(() => {
+  React7.useEffect(() => {
     if (prevPage?.path) preload(prevPage.path);
     if (nextPage?.path) preload(nextPage.path);
   }, [prevPage, nextPage, preload]);
-  return /* @__PURE__ */ jsxs9("div", { className: `boltdocs-layout ${className}`, style, children: [
-    background !== void 0 ? background : /* @__PURE__ */ jsx14(BackgroundGradient, {}),
-    head !== void 0 ? head : /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("div", { className: `boltdocs-layout ${className}`, style, children: [
+    /* @__PURE__ */ jsx16(ProgressBar, {}),
+    background !== void 0 ? background : /* @__PURE__ */ jsx16(BackgroundGradient, {}),
+    head !== void 0 ? head : /* @__PURE__ */ jsx16(
       Head,
       {
         siteTitle,
@@ -900,7 +973,7 @@ function ThemeLayout({
         routes
       }
     ),
-    navbar !== void 0 ? navbar : /* @__PURE__ */ jsx14(
+    navbar !== void 0 ? navbar : /* @__PURE__ */ jsx16(
       Navbar,
       {
         config,
@@ -910,43 +983,43 @@ function ThemeLayout({
         currentVersion
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "boltdocs-main-container", children: [
-      sidebar !== void 0 ? sidebar : /* @__PURE__ */ jsx14(Sidebar, { routes: filteredRoutes, config }),
-      /* @__PURE__ */ jsxs9("main", { className: "boltdocs-content", children: [
-        breadcrumbs !== void 0 ? breadcrumbs : /* @__PURE__ */ jsx14(Breadcrumbs, { routes: filteredRoutes, config }),
-        /* @__PURE__ */ jsx14("div", { className: "boltdocs-page", children }),
-        (prevPage || nextPage) && /* @__PURE__ */ jsxs9("nav", { className: "page-nav", "aria-label": "Pagination", children: [
-          prevPage ? /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10("div", { className: "boltdocs-main-container", children: [
+      sidebar !== void 0 ? sidebar : /* @__PURE__ */ jsx16(Sidebar, { routes: filteredRoutes, config }),
+      /* @__PURE__ */ jsxs10("main", { className: "boltdocs-content", children: [
+        breadcrumbs !== void 0 ? breadcrumbs : /* @__PURE__ */ jsx16(Breadcrumbs, { routes: filteredRoutes, config }),
+        /* @__PURE__ */ jsx16("div", { className: "boltdocs-page", children: /* @__PURE__ */ jsx16(ErrorBoundary, { children }) }),
+        (prevPage || nextPage) && /* @__PURE__ */ jsxs10("nav", { className: "page-nav", "aria-label": "Pagination", children: [
+          prevPage ? /* @__PURE__ */ jsxs10(
             Link,
             {
               to: prevPage.path || "/",
               className: "page-nav-link page-nav-link--prev",
               children: [
-                /* @__PURE__ */ jsxs9("div", { className: "page-nav-info", children: [
-                  /* @__PURE__ */ jsx14("span", { className: "page-nav-label", children: "Previous" }),
-                  /* @__PURE__ */ jsx14("span", { className: "page-nav-title", children: prevPage.title })
+                /* @__PURE__ */ jsxs10("div", { className: "page-nav-info", children: [
+                  /* @__PURE__ */ jsx16("span", { className: "page-nav-label", children: "Previous" }),
+                  /* @__PURE__ */ jsx16("span", { className: "page-nav-title", children: prevPage.title })
                 ] }),
-                /* @__PURE__ */ jsx14(ChevronLeft, { className: "page-nav-arrow", size: 16 })
+                /* @__PURE__ */ jsx16(ChevronLeft, { className: "page-nav-arrow", size: 16 })
               ]
             }
-          ) : /* @__PURE__ */ jsx14("span", {}),
-          nextPage ? /* @__PURE__ */ jsxs9(
+          ) : /* @__PURE__ */ jsx16("span", {}),
+          nextPage ? /* @__PURE__ */ jsxs10(
             Link,
             {
               to: nextPage.path || "/",
               className: "page-nav-link page-nav-link--next",
               children: [
-                /* @__PURE__ */ jsxs9("div", { className: "page-nav-info", children: [
-                  /* @__PURE__ */ jsx14("span", { className: "page-nav-label", children: "Next" }),
-                  /* @__PURE__ */ jsx14("span", { className: "page-nav-title", children: nextPage.title })
+                /* @__PURE__ */ jsxs10("div", { className: "page-nav-info", children: [
+                  /* @__PURE__ */ jsx16("span", { className: "page-nav-label", children: "Next" }),
+                  /* @__PURE__ */ jsx16("span", { className: "page-nav-title", children: nextPage.title })
                 ] }),
-                /* @__PURE__ */ jsx14(ChevronRight3, { className: "page-nav-arrow", size: 16 })
+                /* @__PURE__ */ jsx16(ChevronRight3, { className: "page-nav-arrow", size: 16 })
               ]
             }
-          ) : /* @__PURE__ */ jsx14("span", {})
+          ) : /* @__PURE__ */ jsx16("span", {})
         ] })
       ] }),
-      toc !== void 0 ? toc : /* @__PURE__ */ jsx14(
+      toc !== void 0 ? toc : /* @__PURE__ */ jsx16(
         OnThisPage,
         {
           headings: routes[currentIndex]?.headings,
@@ -961,25 +1034,25 @@ function ThemeLayout({
 
 // src/client/theme/ui/NotFound/NotFound.tsx
 import { ArrowLeft } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function NotFound() {
-  return /* @__PURE__ */ jsx15("div", { className: "boltdocs-not-found", children: /* @__PURE__ */ jsxs10("div", { className: "not-found-content", children: [
-    /* @__PURE__ */ jsx15("span", { className: "not-found-code", children: "404" }),
-    /* @__PURE__ */ jsx15("h1", { className: "not-found-title", children: "Page Not Found" }),
-    /* @__PURE__ */ jsx15("p", { className: "not-found-text", children: "The page you're looking for doesn't exist or has been moved." }),
-    /* @__PURE__ */ jsxs10(Link, { to: "/", className: "not-found-link", children: [
-      /* @__PURE__ */ jsx15(ArrowLeft, { size: 16 }),
+  return /* @__PURE__ */ jsx17("div", { className: "boltdocs-not-found", children: /* @__PURE__ */ jsxs11("div", { className: "not-found-content", children: [
+    /* @__PURE__ */ jsx17("span", { className: "not-found-code", children: "404" }),
+    /* @__PURE__ */ jsx17("h1", { className: "not-found-title", children: "Page Not Found" }),
+    /* @__PURE__ */ jsx17("p", { className: "not-found-text", children: "The page you're looking for doesn't exist or has been moved." }),
+    /* @__PURE__ */ jsxs11(Link, { to: "/", className: "not-found-link", children: [
+      /* @__PURE__ */ jsx17(ArrowLeft, { size: 16 }),
       " Go to Home"
     ] })
   ] }) });
 }
 
 // src/client/theme/ui/Loading/Loading.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Loading() {
-  return /* @__PURE__ */ jsxs11("div", { className: "boltdocs-loading", children: [
-    /* @__PURE__ */ jsx16("div", { className: "loading-spinner" }),
-    /* @__PURE__ */ jsx16("p", { className: "loading-text", children: "Loading..." })
+  return /* @__PURE__ */ jsxs12("div", { className: "boltdocs-loading", children: [
+    /* @__PURE__ */ jsx18("div", { className: "loading-spinner" }),
+    /* @__PURE__ */ jsx18("p", { className: "loading-text", children: "Loading..." })
   ] });
 }
 
@@ -995,11 +1068,11 @@ import {
 import { Link as LucideLink } from "lucide-react";
 
 // src/client/theme/components/CodeBlock/CodeBlock.tsx
-import { useState as useState8, useRef as useRef4, useCallback as useCallback3 } from "react";
+import { useState as useState9, useRef as useRef4, useCallback as useCallback3 } from "react";
 import { Copy, Check } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function CodeBlock({ children, ...props }) {
-  const [copied, setCopied] = useState8(false);
+  const [copied, setCopied] = useState9(false);
   const preRef = useRef4(null);
   const handleCopy = useCallback3(async () => {
     const code = preRef.current?.textContent || "";
@@ -1007,22 +1080,22 @@ function CodeBlock({ children, ...props }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, []);
-  return /* @__PURE__ */ jsxs12("div", { className: "code-block-wrapper", children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs13("div", { className: "code-block-wrapper", children: [
+    /* @__PURE__ */ jsx19(
       "button",
       {
         className: `code-block-copy ${copied ? "copied" : ""}`,
         onClick: handleCopy,
         "aria-label": "Copy code",
-        children: copied ? /* @__PURE__ */ jsx17(Check, { size: 16 }) : /* @__PURE__ */ jsx17(Copy, { size: 16 })
+        children: copied ? /* @__PURE__ */ jsx19(Check, { size: 16 }) : /* @__PURE__ */ jsx19(Copy, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx17("pre", { ref: preRef, ...props, children })
+    /* @__PURE__ */ jsx19("pre", { ref: preRef, ...props, children })
   ] });
 }
 
 // src/client/app/index.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var ConfigContext = createContext2(null);
 function useConfig() {
   return useContext2(ConfigContext);
@@ -1041,21 +1114,21 @@ var Heading = ({
   children
 }) => {
   const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxs13(Tag, { id, className: "boltdocs-heading", children: [
+  return /* @__PURE__ */ jsxs14(Tag, { id, className: "boltdocs-heading", children: [
     children,
-    id && /* @__PURE__ */ jsx18("a", { href: `#${id}`, className: "header-anchor", "aria-label": "Anchor", children: /* @__PURE__ */ jsx18(LucideLink, { size: 16 }) })
+    id && /* @__PURE__ */ jsx20("a", { href: `#${id}`, className: "header-anchor", "aria-label": "Anchor", children: /* @__PURE__ */ jsx20(LucideLink, { size: 16 }) })
   ] });
 };
 var mdxComponents = {
-  h1: (props) => /* @__PURE__ */ jsx18(Heading, { level: 1, ...props }),
-  h2: (props) => /* @__PURE__ */ jsx18(Heading, { level: 2, ...props }),
-  h3: (props) => /* @__PURE__ */ jsx18(Heading, { level: 3, ...props }),
-  h4: (props) => /* @__PURE__ */ jsx18(Heading, { level: 4, ...props }),
-  h5: (props) => /* @__PURE__ */ jsx18(Heading, { level: 5, ...props }),
-  h6: (props) => /* @__PURE__ */ jsx18(Heading, { level: 6, ...props }),
-  pre: (props) => /* @__PURE__ */ jsx18(CodeBlock, { ...props, children: props.children }),
-  video: (props) => /* @__PURE__ */ jsx18(Suspense, { fallback: /* @__PURE__ */ jsx18("div", { className: "video-skeleton" }), children: /* @__PURE__ */ jsx18(Video, { ...props }) }),
-  PackageManagerTabs: (props) => /* @__PURE__ */ jsx18(Suspense, { fallback: /* @__PURE__ */ jsx18("div", { className: "pkg-tabs-skeleton" }), children: /* @__PURE__ */ jsx18(PackageManagerTabs, { ...props }) })
+  h1: (props) => /* @__PURE__ */ jsx20(Heading, { level: 1, ...props }),
+  h2: (props) => /* @__PURE__ */ jsx20(Heading, { level: 2, ...props }),
+  h3: (props) => /* @__PURE__ */ jsx20(Heading, { level: 3, ...props }),
+  h4: (props) => /* @__PURE__ */ jsx20(Heading, { level: 4, ...props }),
+  h5: (props) => /* @__PURE__ */ jsx20(Heading, { level: 5, ...props }),
+  h6: (props) => /* @__PURE__ */ jsx20(Heading, { level: 6, ...props }),
+  pre: (props) => /* @__PURE__ */ jsx20(CodeBlock, { ...props, children: props.children }),
+  video: (props) => /* @__PURE__ */ jsx20(Suspense, { fallback: /* @__PURE__ */ jsx20("div", { className: "video-skeleton" }), children: /* @__PURE__ */ jsx20(Video, { ...props }) }),
+  PackageManagerTabs: (props) => /* @__PURE__ */ jsx20(Suspense, { fallback: /* @__PURE__ */ jsx20("div", { className: "pkg-tabs-skeleton" }), children: /* @__PURE__ */ jsx20(PackageManagerTabs, { ...props }) })
 };
 function AppShell({
   initialRoutes,
@@ -1066,8 +1139,8 @@ function AppShell({
   homePage: HomePage,
   components: customComponents = {}
 }) {
-  const [routesInfo, setRoutesInfo] = useState9(initialRoutes);
-  const [config] = useState9(initialConfig);
+  const [routesInfo, setRoutesInfo] = useState10(initialRoutes);
+  const [config] = useState10(initialConfig);
   const resolveRoutes = (infos) => {
     return infos.filter(
       (route) => !(HomePage && (route.path === "/" || route.path === ""))
@@ -1078,35 +1151,35 @@ function AppShell({
       const loader = loaderKey ? modules[loaderKey] : null;
       return {
         ...route,
-        Component: React7.lazy(() => {
+        Component: React9.lazy(() => {
           if (!loader)
-            return Promise.resolve({ default: () => /* @__PURE__ */ jsx18(NotFound, {}) });
+            return Promise.resolve({ default: () => /* @__PURE__ */ jsx20(NotFound, {}) });
           return loader();
         })
       };
     });
   };
-  const [resolvedRoutes, setResolvedRoutes] = useState9(
+  const [resolvedRoutes, setResolvedRoutes] = useState10(
     () => resolveRoutes(initialRoutes)
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (hot) {
       hot.on("boltdocs:routes-update", (newRoutes) => {
         setRoutesInfo(newRoutes);
       });
     }
   }, [hot]);
-  useEffect7(() => {
+  useEffect8(() => {
     setResolvedRoutes(resolveRoutes(routesInfo));
   }, [routesInfo, modules, docsDirName]);
-  return /* @__PURE__ */ jsx18(ConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxs13(PreloadProvider, { routes: routesInfo, modules, children: [
-    /* @__PURE__ */ jsx18(ScrollHandler, {}),
-    /* @__PURE__ */ jsxs13(Routes, { children: [
-      HomePage && /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(ConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxs14(PreloadProvider, { routes: routesInfo, modules, children: [
+    /* @__PURE__ */ jsx20(ScrollHandler, {}),
+    /* @__PURE__ */ jsxs14(Routes, { children: [
+      HomePage && /* @__PURE__ */ jsx20(
         Route,
         {
           path: "/",
-          element: /* @__PURE__ */ jsx18(
+          element: /* @__PURE__ */ jsx20(
             ThemeLayout,
             {
               config,
@@ -1115,20 +1188,20 @@ function AppShell({
               toc: null,
               breadcrumbs: null,
               ...config.themeConfig?.layoutProps,
-              children: /* @__PURE__ */ jsx18(HomePage, {})
+              children: /* @__PURE__ */ jsx20(HomePage, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         Route,
         {
-          element: /* @__PURE__ */ jsx18(DocsLayout, { config, routes: routesInfo }),
-          children: resolvedRoutes.map((route) => /* @__PURE__ */ jsx18(
+          element: /* @__PURE__ */ jsx20(DocsLayout, { config, routes: routesInfo }),
+          children: resolvedRoutes.map((route) => /* @__PURE__ */ jsx20(
             Route,
             {
               path: route.path === "" ? "/" : route.path,
-              element: /* @__PURE__ */ jsx18(React7.Suspense, { fallback: /* @__PURE__ */ jsx18(Loading, {}), children: /* @__PURE__ */ jsx18(
+              element: /* @__PURE__ */ jsx20(React9.Suspense, { fallback: /* @__PURE__ */ jsx20(Loading, {}), children: /* @__PURE__ */ jsx20(
                 MdxPage,
                 {
                   Component: route.Component,
@@ -1141,17 +1214,17 @@ function AppShell({
         },
         "docs-layout"
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         Route,
         {
           path: "*",
-          element: /* @__PURE__ */ jsx18(
+          element: /* @__PURE__ */ jsx20(
             ThemeLayout,
             {
               config,
               routes: routesInfo,
               ...config.themeConfig?.layoutProps,
-              children: /* @__PURE__ */ jsx18(NotFound, {})
+              children: /* @__PURE__ */ jsx20(NotFound, {})
             }
           )
         }
@@ -1162,23 +1235,25 @@ function AppShell({
 function ScrollHandler() {
   const { pathname, hash } = useLocation8();
   useLayoutEffect(() => {
+    const container = document.querySelector(".boltdocs-content");
+    if (!container) return;
     if (hash) {
       const id = hash.replace("#", "");
       const element = document.getElementById(id);
       if (element) {
         const offset = 80;
-        const bodyRect = document.body.getBoundingClientRect().top;
+        const containerRect = container.getBoundingClientRect().top;
         const elementRect = element.getBoundingClientRect().top;
-        const elementPosition = elementRect - bodyRect;
-        const offsetPosition = elementPosition - offset;
-        window.scrollTo({
+        const elementPosition = elementRect - containerRect;
+        const offsetPosition = elementPosition - offset + container.scrollTop;
+        container.scrollTo({
           top: offsetPosition,
           behavior: "smooth"
         });
         return;
       }
     }
-    window.scrollTo(0, 0);
+    container.scrollTo(0, 0);
   }, [pathname, hash]);
   return null;
 }
@@ -1186,22 +1261,22 @@ function DocsLayout({
   config,
   routes
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     ThemeLayout,
     {
       config,
       routes,
       ...config.themeConfig?.layoutProps,
-      children: /* @__PURE__ */ jsx18(Outlet, {})
+      children: /* @__PURE__ */ jsx20(Outlet, {})
     }
   );
 }
 function MdxPage({
-  Component,
+  Component: Component2,
   customComponents = {}
 }) {
   const allComponents = { ...mdxComponents, ...customComponents };
-  return /* @__PURE__ */ jsx18(MDXProvider, { components: allComponents, children: /* @__PURE__ */ jsx18(Component, {}) });
+  return /* @__PURE__ */ jsx20(MDXProvider, { components: allComponents, children: /* @__PURE__ */ jsx20(Component2, {}) });
 }
 function createBoltdocsApp(options) {
   const { target, routes, docsDirName, config, modules, hot, homePage } = options;
@@ -1211,7 +1286,7 @@ function createBoltdocsApp(options) {
       `[boltdocs] Mount target "${target}" not found in document.`
     );
   }
-  const app = /* @__PURE__ */ jsx18(React7.StrictMode, { children: /* @__PURE__ */ jsx18(BrowserRouter, { children: /* @__PURE__ */ jsx18(
+  const app = /* @__PURE__ */ jsx20(React9.StrictMode, { children: /* @__PURE__ */ jsx20(BrowserRouter, { children: /* @__PURE__ */ jsx20(
     AppShell,
     {
       initialRoutes: routes,
@@ -1228,9 +1303,9 @@ function createBoltdocsApp(options) {
 }
 
 // src/client/theme/ui/Link/LinkPreview.tsx
-import { useEffect as useEffect8, useState as useState10, useRef as useRef5 } from "react";
+import { useEffect as useEffect9, useState as useState11, useRef as useRef5 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function LinkPreview({
   isVisible,
   title,
@@ -1239,8 +1314,8 @@ function LinkPreview({
   y
 }) {
   const ref = useRef5(null);
-  const [position, setPosition] = useState10({ top: 0, left: 0 });
-  useEffect8(() => {
+  const [position, setPosition] = useState11({ top: 0, left: 0 });
+  useEffect9(() => {
     if (ref.current) {
       const rect = ref.current.getBoundingClientRect();
       const padding = 12;
@@ -1256,7 +1331,7 @@ function LinkPreview({
     }
   }, [x, y, isVisible]);
   return createPortal(
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         ref,
@@ -1265,9 +1340,9 @@ function LinkPreview({
           top: position.top,
           left: position.left
         },
-        children: /* @__PURE__ */ jsxs14("div", { className: "boltdocs-link-preview-content", children: [
-          /* @__PURE__ */ jsx19("span", { className: "boltdocs-link-preview-title", children: title }),
-          summary && /* @__PURE__ */ jsx19("p", { className: "boltdocs-link-preview-summary", children: summary })
+        children: /* @__PURE__ */ jsxs15("div", { className: "boltdocs-link-preview-content", children: [
+          /* @__PURE__ */ jsx21("span", { className: "boltdocs-link-preview-title", children: title }),
+          summary && /* @__PURE__ */ jsx21("p", { className: "boltdocs-link-preview-summary", children: summary })
         ] })
       }
     ),
@@ -1276,7 +1351,7 @@ function LinkPreview({
 }
 
 // src/client/theme/ui/Link/Link.tsx
-import { Fragment, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function useLocalizedTo(to) {
   const location = useLocation9();
   const config = useConfig();
@@ -1332,7 +1407,7 @@ function useLocalizedTo(to) {
   }
   return finalPath === basePath ? basePath : finalPath;
 }
-var Link = React8.forwardRef(
+var Link = React10.forwardRef(
   (props, ref) => {
     const {
       boltdocsPrefetch = "hover",
@@ -1350,7 +1425,7 @@ var Link = React8.forwardRef(
     const config = useConfig();
     const navigate = useNavigate3();
     const shouldShowPreview = boltdocsPreview && config?.themeConfig?.linkPreview !== false;
-    const [preview, setPreview] = React8.useState({ visible: false, x: 0, y: 0, title: "" });
+    const [preview, setPreview] = React10.useState({ visible: false, x: 0, y: 0, title: "" });
     const handleMouseEnter = (e) => {
       onMouseEnter?.(e);
       if (boltdocsPrefetch === "hover" && typeof localizedTo === "string" && localizedTo.startsWith("/")) {
@@ -1399,13 +1474,13 @@ var Link = React8.forwardRef(
       }
       if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
         e.preventDefault();
-        React8.startTransition(() => {
+        React10.startTransition(() => {
           navigate(localizedTo);
         });
       }
     };
-    return /* @__PURE__ */ jsxs15(Fragment, { children: [
-      /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs16(Fragment, { children: [
+      /* @__PURE__ */ jsx22(
         RouterLink,
         {
           ref,
@@ -1419,7 +1494,7 @@ var Link = React8.forwardRef(
           ...rest
         }
       ),
-      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx20(
+      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx22(
         LinkPreview,
         {
           isVisible: preview.visible,
@@ -1433,7 +1508,7 @@ var Link = React8.forwardRef(
   }
 );
 Link.displayName = "Link";
-var NavLink = React8.forwardRef(
+var NavLink = React10.forwardRef(
   (props, ref) => {
     const {
       boltdocsPrefetch = "hover",
@@ -1451,7 +1526,7 @@ var NavLink = React8.forwardRef(
     const config = useConfig();
     const navigate = useNavigate3();
     const shouldShowPreview = boltdocsPreview && config?.themeConfig?.linkPreview !== false;
-    const [preview, setPreview] = React8.useState({ visible: false, x: 0, y: 0, title: "" });
+    const [preview, setPreview] = React10.useState({ visible: false, x: 0, y: 0, title: "" });
     const handleMouseEnter = (e) => {
       onMouseEnter?.(e);
       if (boltdocsPrefetch === "hover" && typeof localizedTo === "string" && localizedTo.startsWith("/")) {
@@ -1500,13 +1575,13 @@ var NavLink = React8.forwardRef(
       }
       if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
         e.preventDefault();
-        React8.startTransition(() => {
+        React10.startTransition(() => {
           navigate(localizedTo);
         });
       }
     };
-    return /* @__PURE__ */ jsxs15(Fragment, { children: [
-      /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs16(Fragment, { children: [
+      /* @__PURE__ */ jsx22(
         RouterNavLink,
         {
           ref,
@@ -1520,7 +1595,7 @@ var NavLink = React8.forwardRef(
           ...rest
         }
       ),
-      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx20(
+      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx22(
         LinkPreview,
         {
           isVisible: preview.visible,
@@ -1537,16 +1612,37 @@ NavLink.displayName = "NavLink";
 
 // src/client/theme/ui/Navbar/Tabs.tsx
 import * as Icons from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function Tabs({ tabs, routes }) {
   const location = useLocation10();
+  const containerRef = useRef6(null);
+  const tabRefs = useRef6([]);
+  const [indicatorStyle, setIndicatorStyle] = useState12({
+    opacity: 0,
+    transform: "translateX(0) scaleX(0)",
+    width: 0
+  });
   const currentRoute = routes.find((r) => r.path === location.pathname);
   const currentTabId = currentRoute?.tab?.toLowerCase();
+  const activeIndex = tabs.findIndex(
+    (tab) => currentTabId ? currentTabId === tab.id.toLowerCase() : false
+  );
+  const finalActiveIndex = activeIndex === -1 ? 0 : activeIndex;
+  useEffect10(() => {
+    const activeTab = tabRefs.current[finalActiveIndex];
+    if (activeTab) {
+      setIndicatorStyle({
+        opacity: 1,
+        width: activeTab.offsetWidth,
+        transform: `translateX(${activeTab.offsetLeft}px)`
+      });
+    }
+  }, [finalActiveIndex, tabs, location.pathname]);
   if (!tabs || tabs.length === 0) return null;
   const renderTabIcon = (iconName) => {
     if (!iconName) return null;
     if (iconName.trim().startsWith("<svg")) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx23(
         "span",
         {
           className: "tab-icon svg-icon",
@@ -1556,33 +1652,41 @@ function Tabs({ tabs, routes }) {
     }
     const LucideIcon = Icons[iconName];
     if (LucideIcon) {
-      return /* @__PURE__ */ jsx21(LucideIcon, { size: 16, className: "tab-icon lucide-icon" });
+      return /* @__PURE__ */ jsx23(LucideIcon, { size: 16, className: "tab-icon lucide-icon" });
     }
-    return /* @__PURE__ */ jsx21("img", { src: iconName, alt: "", className: "tab-icon img-icon" });
+    return /* @__PURE__ */ jsx23("img", { src: iconName, alt: "", className: "tab-icon img-icon" });
   };
-  return /* @__PURE__ */ jsx21("div", { className: "boltdocs-tabs-container", children: /* @__PURE__ */ jsx21("div", { className: "boltdocs-tabs", children: tabs.map((tab, index) => {
-    const isActive = currentTabId ? currentTabId === tab.id.toLowerCase() : index === 0;
-    const firstRoute = routes.find((r) => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase());
-    const linkTo = firstRoute ? firstRoute.path : "#";
-    return /* @__PURE__ */ jsxs16(
-      Link,
-      {
-        to: linkTo,
-        className: `boltdocs-tab-item ${isActive ? "active" : ""}`,
-        children: [
-          renderTabIcon(tab.icon),
-          /* @__PURE__ */ jsx21("span", { children: tab.text })
-        ]
-      },
-      tab.id
-    );
-  }) }) });
+  return /* @__PURE__ */ jsx23("div", { className: "boltdocs-tabs-container", children: /* @__PURE__ */ jsxs17("div", { className: "boltdocs-tabs", ref: containerRef, children: [
+    tabs.map((tab, index) => {
+      const isActive = index === finalActiveIndex;
+      const firstRoute = routes.find(
+        (r) => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase()
+      );
+      const linkTo = firstRoute ? firstRoute.path : "#";
+      return /* @__PURE__ */ jsxs17(
+        Link,
+        {
+          to: linkTo,
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          },
+          className: `boltdocs-tab-item ${isActive ? "active" : ""}`,
+          children: [
+            renderTabIcon(tab.icon),
+            /* @__PURE__ */ jsx23("span", { children: tab.text })
+          ]
+        },
+        tab.id
+      );
+    }),
+    /* @__PURE__ */ jsx23("div", { className: "boltdocs-tab-indicator", style: indicatorStyle })
+  ] }) });
 }
 
 // src/client/theme/ui/Navbar/Navbar.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var SearchDialog = lazy2(
-  () => import("./SearchDialog-YOXMFGH6.mjs").then((m) => ({ default: m.SearchDialog }))
+  () => import("./SearchDialog-6Z7CUAYJ.mjs").then((m) => ({ default: m.SearchDialog }))
 );
 var ICON_MAP = {
   discord: Discord,
@@ -1607,9 +1711,9 @@ function Navbar({
     const text = item.label || item.text || "";
     const href = item.to || item.href || item.link || "";
     const isExternal = href.startsWith("http") || href.startsWith("//") || href.includes("://");
-    return /* @__PURE__ */ jsxs17(Link2, { to: href, target: isExternal ? "_blank" : void 0, children: [
+    return /* @__PURE__ */ jsxs18(Link2, { to: href, target: isExternal ? "_blank" : void 0, children: [
       text,
-      isExternal && /* @__PURE__ */ jsx22("span", { className: "navbar-external-icon", children: /* @__PURE__ */ jsxs17(
+      isExternal && /* @__PURE__ */ jsx24("span", { className: "navbar-external-icon", children: /* @__PURE__ */ jsxs18(
         "svg",
         {
           viewBox: "0 0 24 24",
@@ -1621,24 +1725,24 @@ function Navbar({
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx22("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
-            /* @__PURE__ */ jsx22("polyline", { points: "15 3 21 3 21 9" }),
-            /* @__PURE__ */ jsx22("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+            /* @__PURE__ */ jsx24("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+            /* @__PURE__ */ jsx24("polyline", { points: "15 3 21 3 21 9" }),
+            /* @__PURE__ */ jsx24("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
           ]
         }
       ) })
     ] }, i);
   };
-  return /* @__PURE__ */ jsxs17("header", { className: `boltdocs-navbar ${hasTabs ? "has-tabs" : ""}`, children: [
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("header", { className: `boltdocs-navbar ${hasTabs ? "has-tabs" : ""}`, children: [
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         className: "navbar-container",
         style: { height: "var(--ld-navbar-height)" },
         children: [
-          /* @__PURE__ */ jsxs17("div", { className: "navbar-left", children: [
-            /* @__PURE__ */ jsx22("div", { className: "navbar-logo", children: /* @__PURE__ */ jsxs17(Link2, { to: "/", children: [
-              config.themeConfig?.logo ? config.themeConfig.logo.trim().startsWith("<svg") ? /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsxs18("div", { className: "navbar-left", children: [
+            /* @__PURE__ */ jsx24("div", { className: "navbar-logo", children: /* @__PURE__ */ jsxs18(Link2, { to: "/", children: [
+              config.themeConfig?.logo ? config.themeConfig.logo.trim().startsWith("<svg") ? /* @__PURE__ */ jsx24(
                 "span",
                 {
                   className: "navbar-logo-svg",
@@ -1646,7 +1750,7 @@ function Navbar({
                     __html: config.themeConfig.logo
                   }
                 }
-              ) : /* @__PURE__ */ jsx22(
+              ) : /* @__PURE__ */ jsx24(
                 "img",
                 {
                   src: config.themeConfig.logo,
@@ -1656,7 +1760,7 @@ function Navbar({
               ) : null,
               title
             ] }) }),
-            config.versions && currentVersion && allRoutes ? /* @__PURE__ */ jsx22(
+            config.versions && currentVersion && allRoutes ? /* @__PURE__ */ jsx24(
               VersionSwitcher,
               {
                 versions: config.versions,
@@ -1664,17 +1768,17 @@ function Navbar({
                 currentLocale,
                 allRoutes
               }
-            ) : config.themeConfig?.version ? /* @__PURE__ */ jsxs17("div", { className: "navbar-version", children: [
+            ) : config.themeConfig?.version ? /* @__PURE__ */ jsxs18("div", { className: "navbar-version", children: [
               config.themeConfig.version,
               " ",
-              /* @__PURE__ */ jsx22(ChevronDown3, { size: 14 })
+              /* @__PURE__ */ jsx24(ChevronDown3, { size: 14 })
             ] }) : null,
-            /* @__PURE__ */ jsx22("nav", { className: "navbar-links", "aria-label": "Top Navigation Left", children: leftItems.map(renderNavItem) })
+            /* @__PURE__ */ jsx24("nav", { className: "navbar-links", "aria-label": "Top Navigation Left", children: leftItems.map(renderNavItem) })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "navbar-right", children: [
-            /* @__PURE__ */ jsx22("nav", { className: "navbar-links", "aria-label": "Top Navigation Right", children: rightItems.map(renderNavItem) }),
-            /* @__PURE__ */ jsx22(Suspense2, { fallback: /* @__PURE__ */ jsx22("div", { className: "navbar-search-placeholder" }), children: /* @__PURE__ */ jsx22(SearchDialog, { routes: routes || [] }) }),
-            config.i18n && currentLocale && allRoutes && /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsxs18("div", { className: "navbar-right", children: [
+            /* @__PURE__ */ jsx24("nav", { className: "navbar-links", "aria-label": "Top Navigation Right", children: rightItems.map(renderNavItem) }),
+            /* @__PURE__ */ jsx24(Suspense2, { fallback: /* @__PURE__ */ jsx24("div", { className: "navbar-search-placeholder" }), children: /* @__PURE__ */ jsx24(SearchDialog, { routes: routes || [] }) }),
+            config.i18n && currentLocale && allRoutes && /* @__PURE__ */ jsx24(
               LanguageSwitcher,
               {
                 i18n: config.i18n,
@@ -1682,12 +1786,12 @@ function Navbar({
                 allRoutes
               }
             ),
-            /* @__PURE__ */ jsx22(ThemeToggle, {}),
-            config.themeConfig?.githubRepo && /* @__PURE__ */ jsx22(GithubStars, { repo: config.themeConfig.githubRepo }),
-            socialLinks.length > 0 && /* @__PURE__ */ jsx22("div", { className: "navbar-divider" }),
-            /* @__PURE__ */ jsx22("div", { className: "navbar-icons", children: socialLinks.map((link, i) => {
+            /* @__PURE__ */ jsx24(ThemeToggle, {}),
+            config.themeConfig?.githubRepo && /* @__PURE__ */ jsx24(GithubStars, { repo: config.themeConfig.githubRepo }),
+            socialLinks.length > 0 && /* @__PURE__ */ jsx24("div", { className: "navbar-divider" }),
+            /* @__PURE__ */ jsx24("div", { className: "navbar-icons", children: socialLinks.map((link, i) => {
               const IconComp = ICON_MAP[link.icon.toLowerCase()];
-              return /* @__PURE__ */ jsx22(
+              return /* @__PURE__ */ jsx24(
                 "a",
                 {
                   href: link.link,
@@ -1695,7 +1799,7 @@ function Navbar({
                   rel: "noopener noreferrer",
                   className: "navbar-icon-btn",
                   "aria-label": link.icon,
-                  children: IconComp ? /* @__PURE__ */ jsx22(IconComp, {}) : /* @__PURE__ */ jsx22("span", { children: link.icon })
+                  children: IconComp ? /* @__PURE__ */ jsx24(IconComp, {}) : /* @__PURE__ */ jsx24("span", { children: link.icon })
                 },
                 i
               );
@@ -1704,7 +1808,7 @@ function Navbar({
         ]
       }
     ),
-    hasTabs && config.themeConfig?.tabs && /* @__PURE__ */ jsx22(
+    hasTabs && config.themeConfig?.tabs && /* @__PURE__ */ jsx24(
       Tabs,
       {
         tabs: config.themeConfig.tabs,