boltdocs 1.6.0 → 1.7.1

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

@@ -4,77 +4,293 @@ import {
 } from "./chunk-FMTOYQLO.mjs";
 
 // src/client/theme/ui/Navbar/Navbar.tsx
-import React10 from "react";
+import { Suspense as Suspense2, lazy as lazy2 } from "react";
+import { Link as Link2, useLocation as useLocation11 } from "react-router-dom";
+import { ChevronDown as ChevronDown3 } from "lucide-react";
 
-// src/client/theme/ui/Link/Link.tsx
-import React7 from "react";
-import {
-  Link as RouterLink,
-  NavLink as RouterNavLink,
-  useLocation as useLocation7,
-  useNavigate
-} from "react-router-dom";
+// src/client/theme/ui/LanguageSwitcher/LanguageSwitcher.tsx
+import { useState, useRef, useEffect } from "react";
+import { Globe, ChevronDown } from "lucide-react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getBaseFilePath(filePath, version, locale) {
+  let path = filePath;
+  if (version && (path === version || path.startsWith(version + "/"))) {
+    path = path === version ? "index.md" : path.slice(version.length + 1);
+  }
+  if (locale && (path === locale || path.startsWith(locale + "/"))) {
+    path = path === locale ? "index.md" : path.slice(locale.length + 1);
+  }
+  return path;
+}
+function LanguageSwitcher({
+  i18n,
+  currentLocale,
+  allRoutes
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (locale) => {
+    setIsOpen(false);
+    if (locale === currentLocale) return;
+    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
+    let targetPath = "/";
+    if (currentRoute) {
+      const baseFile = getBaseFilePath(
+        currentRoute.filePath,
+        currentRoute.version,
+        currentRoute.locale
+      );
+      const targetRoute = allRoutes.find(
+        (r) => getBaseFilePath(r.filePath, r.version, r.locale) === baseFile && (r.locale || i18n.defaultLocale) === locale && r.version === currentRoute.version
+      );
+      if (targetRoute) {
+        targetPath = targetRoute.path;
+      } else {
+        const defaultIndexRoute = allRoutes.find(
+          (r) => getBaseFilePath(r.filePath, r.version, r.locale) === "index.md" && (r.locale || i18n.defaultLocale) === locale && r.version === currentRoute.version
+        );
+        targetPath = defaultIndexRoute ? defaultIndexRoute.path : locale === i18n.defaultLocale ? currentRoute.version ? `/${currentRoute.version}` : "/" : currentRoute.version ? `/${currentRoute.version}/${locale}` : `/${locale}`;
+      }
+    } else {
+      targetPath = locale === i18n.defaultLocale ? "/" : `/${locale}`;
+    }
+    navigate(targetPath);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "boltdocs-language-switcher", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "language-btn",
+        onClick: () => setIsOpen(!isOpen),
+        "aria-label": "Switch language",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: [
+          /* @__PURE__ */ jsx(Globe, { size: 18 }),
+          /* @__PURE__ */ jsx("span", { className: "language-label", children: i18n.locales[currentLocale] || currentLocale }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "language-dropdown", children: Object.entries(i18n.locales).map(([key, label]) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `language-option ${key === currentLocale ? "active" : ""}`,
+        onClick: () => handleSelect(key),
+        children: label
+      },
+      key
+    )) })
+  ] });
+}
 
-// src/client/app/preload.tsx
-import { createContext, useContext, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var PreloadContext = createContext({
-  preload: () => {
-  },
-  routes: []
-});
-function usePreload() {
-  return useContext(PreloadContext);
+// src/client/theme/ui/VersionSwitcher/VersionSwitcher.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { useNavigate as useNavigate2, useLocation as useLocation2 } from "react-router-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getBaseFilePath2(filePath, version, locale) {
+  let path = filePath;
+  if (version && (path === version || path.startsWith(version + "/"))) {
+    path = path === version ? "index.md" : path.slice(version.length + 1);
+  }
+  if (locale && (path === locale || path.startsWith(locale + "/"))) {
+    path = path === locale ? "index.md" : path.slice(locale.length + 1);
+  }
+  return path;
 }
-function PreloadProvider({
-  routes,
-  modules,
-  children
+function VersionSwitcher({
+  versions,
+  currentVersion,
+  currentLocale,
+  allRoutes
 }) {
-  const preload = useCallback(
-    (path) => {
-      const cleanPath = path.split("#")[0].split("?")[0];
-      const route = routes.find(
-        (r) => r.path === cleanPath || cleanPath === "/" && r.path === ""
+  const [isOpen, setIsOpen] = useState2(false);
+  const dropdownRef = useRef2(null);
+  const navigate = useNavigate2();
+  const location = useLocation2();
+  useEffect2(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (version) => {
+    setIsOpen(false);
+    if (version === currentVersion) return;
+    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
+    let targetPath = `/docs/${version}`;
+    if (currentRoute) {
+      const baseFile = getBaseFilePath2(
+        currentRoute.filePath,
+        currentRoute.version,
+        currentRoute.locale
       );
-      if (route && route.filePath) {
-        const loaderKey = Object.keys(modules).find(
-          (k) => k.endsWith("/" + route.filePath)
+      const targetRoute = allRoutes.find(
+        (r) => getBaseFilePath2(r.filePath, r.version, r.locale) === baseFile && (r.version || versions.defaultVersion) === version && (currentLocale ? r.locale === currentLocale : !r.locale)
+      );
+      if (targetRoute) {
+        targetPath = targetRoute.path;
+      } else {
+        const versionIndexRoute = allRoutes.find(
+          (r) => getBaseFilePath2(r.filePath, r.version, r.locale) === "index.md" && (r.version || versions.defaultVersion) === version && (currentLocale ? r.locale === currentLocale : !r.locale)
         );
-        if (loaderKey) {
-          modules[loaderKey]().catch((err) => {
-            console.error(`[boltdocs] Failed to preload route ${path}:`, err);
-          });
-        }
+        targetPath = versionIndexRoute ? versionIndexRoute.path : `/docs/${version}${currentLocale ? `/${currentLocale}` : ""}`;
       }
-    },
-    [routes, modules]
+    }
+    navigate(targetPath);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "boltdocs-version-switcher",
+      ref: dropdownRef,
+      style: { position: "relative", display: "flex", alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            className: "navbar-version",
+            onClick: () => setIsOpen(!isOpen),
+            "aria-label": "Switch version",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            style: {
+              fontFamily: "inherit",
+              padding: "0.25rem 0.5rem",
+              marginLeft: "0.5rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { children: versions.versions[currentVersion] || currentVersion }),
+              /* @__PURE__ */ jsx2(ChevronDown2, { size: 14 })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "language-dropdown",
+            style: {
+              left: "0.5rem",
+              right: "auto",
+              minWidth: "150px",
+              top: "calc(100% + 8px)"
+            },
+            children: Object.entries(versions.versions).map(([key, label]) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: `language-option ${key === currentVersion ? "active" : ""}`,
+                onClick: () => handleSelect(key),
+                children: label
+              },
+              key
+            ))
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx(PreloadContext.Provider, { value: { preload, routes }, children });
 }
 
-// src/client/app/index.tsx
-import React6, { useEffect as useEffect4, useState as useState6 } from "react";
-import ReactDOM from "react-dom/client";
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Outlet,
-  useLocation as useLocation6
-} from "react-router-dom";
+// src/client/theme/ui/ThemeToggle/ThemeToggle.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { Sun, Moon } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ThemeToggle() {
+  const [theme, setTheme] = useState3("dark");
+  const [mounted, setMounted] = useState3(false);
+  useEffect3(() => {
+    setMounted(true);
+    const stored = localStorage.getItem("boltdocs-theme");
+    if (stored === "light" || stored === "dark") {
+      setTheme(stored);
+    } else {
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      setTheme(prefersDark ? "dark" : "light");
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      if (!localStorage.getItem("boltdocs-theme")) {
+        setTheme(e.matches ? "dark" : "light");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  useEffect3(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    if (theme === "light") {
+      root.classList.add("theme-light");
+      root.dataset.theme = "light";
+    } else {
+      root.classList.remove("theme-light");
+      root.dataset.theme = "dark";
+    }
+  }, [theme, mounted]);
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    localStorage.setItem("boltdocs-theme", newTheme);
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx3("button", { className: "navbar-icon-btn", "aria-label": "Toggle theme", disabled: true, children: /* @__PURE__ */ jsx3("span", { style: { width: 20, height: 20, display: "inline-block" } }) });
+  }
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      className: "navbar-icon-btn",
+      onClick: toggleTheme,
+      "aria-label": "Toggle theme",
+      title: `Switch to ${theme === "dark" ? "light" : "dark"} theme`,
+      children: theme === "dark" ? /* @__PURE__ */ jsx3(Sun, { size: 20 }) : /* @__PURE__ */ jsx3(Moon, { size: 20 })
+    }
+  );
+}
 
-// src/client/theme/ui/Layout/Layout.tsx
-import React4, { useState as useState4 } from "react";
-import { useLocation as useLocation5 } from "react-router-dom";
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
+// src/client/theme/icons/discord.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Discord = (props) => /* @__PURE__ */ jsx4("svg", { ...props, viewBox: "0 0 256 199", preserveAspectRatio: "xMidYMid", children: /* @__PURE__ */ jsx4(
+  "path",
+  {
+    d: "M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/client/theme/icons/twitter.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var XformerlyTwitter = (props) => /* @__PURE__ */ jsx5("svg", { ...props, fill: "none", viewBox: "0 0 1200 1227", children: /* @__PURE__ */ jsx5(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
+  }
+) });
 
 // src/client/theme/ui/Navbar/GithubStars.tsx
-import { useEffect, useState } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/client/theme/icons/github.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var GitHub = (props) => /* @__PURE__ */ jsx2("svg", { ...props, viewBox: "0 0 1024 1024", fill: "none", children: /* @__PURE__ */ jsx2(
+import { jsx as jsx6 } from "react/jsx-runtime";
+var GitHub = (props) => /* @__PURE__ */ jsx6("svg", { ...props, viewBox: "0 0 1024 1024", fill: "none", children: /* @__PURE__ */ jsx6(
   "path",
   {
     fillRule: "evenodd",
@@ -86,15 +302,15 @@ var GitHub = (props) => /* @__PURE__ */ jsx2("svg", { ...props, viewBox: "0 0 10
 ) });
 
 // src/client/theme/ui/Navbar/GithubStars.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function GithubStars({ repo }) {
-  const [stars, setStars] = useState(null);
-  useEffect(() => {
+  const [stars, setStars] = useState4(null);
+  useEffect4(() => {
     if (repo) {
       getStarsRepo(repo).then((stars2) => setStars(stars2)).catch(() => setStars("0"));
     }
   }, [repo]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "a",
     {
       href: `https://github.com/${repo}`,
@@ -102,22 +318,89 @@ function GithubStars({ repo }) {
       rel: "noopener noreferrer",
       className: "navbar-github-stars",
       children: [
-        /* @__PURE__ */ jsx3(GitHub, {}),
-        stars && /* @__PURE__ */ jsx3("span", { children: stars })
+        /* @__PURE__ */ jsx7(GitHub, {}),
+        stars && /* @__PURE__ */ jsx7("span", { children: stars })
       ]
     }
   );
 }
 
+// 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 React10 from "react";
+import {
+  Link as RouterLink,
+  NavLink as RouterNavLink,
+  useLocation as useLocation9,
+  useNavigate as useNavigate3
+} from "react-router-dom";
+
+// src/client/app/preload.tsx
+import { createContext, useContext, useCallback } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PreloadContext = createContext({
+  preload: () => {
+  },
+  routes: []
+});
+function usePreload() {
+  return useContext(PreloadContext);
+}
+function PreloadProvider({
+  routes,
+  modules,
+  children
+}) {
+  const preload = useCallback(
+    (path) => {
+      const cleanPath = path.split("#")[0].split("?")[0];
+      const route = routes.find(
+        (r) => r.path === cleanPath || cleanPath === "/" && r.path === ""
+      );
+      if (route && route.filePath) {
+        const loaderKey = Object.keys(modules).find(
+          (k) => k.endsWith("/" + route.filePath)
+        );
+        if (loaderKey) {
+          modules[loaderKey]().catch((err) => {
+            console.error(`[boltdocs] Failed to preload route ${path}:`, err);
+          });
+        }
+      }
+    },
+    [routes, modules]
+  );
+  return /* @__PURE__ */ jsx8(PreloadContext.Provider, { value: { preload, routes }, children });
+}
+
+// src/client/app/index.tsx
+import React9, { useEffect as useEffect8, useState as useState10 } from "react";
+import ReactDOM from "react-dom/client";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  Outlet,
+  useLocation as useLocation8
+} from "react-router-dom";
+
+// src/client/theme/ui/Layout/Layout.tsx
+import React7 from "react";
+import { useLocation as useLocation7 } from "react-router-dom";
+import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
+
 // src/client/theme/ui/Sidebar/Sidebar.tsx
-import { useState as useState2 } from "react";
-import { useLocation } from "react-router-dom";
+import { useState as useState5 } from "react";
+import { useLocation as useLocation3 } from "react-router-dom";
 
 // src/client/theme/ui/PoweredBy/PoweredBy.tsx
 import { Zap } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function PoweredBy() {
-  return /* @__PURE__ */ jsx4("div", { className: "powered-by-container", children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx9("div", { className: "powered-by-container", children: /* @__PURE__ */ jsxs4(
     "a",
     {
       href: "https://github.com/jesusalcaladev/boltdocs",
@@ -125,17 +408,18 @@ function PoweredBy() {
       rel: "noopener noreferrer",
       className: "powered-by-link",
       children: [
-        /* @__PURE__ */ jsx4(Zap, { className: "powered-by-icon", size: 12, fill: "currentColor" }),
-        /* @__PURE__ */ jsx4("span", { children: "Powered by" }),
-        /* @__PURE__ */ jsx4("span", { className: "powered-by-brand", children: "LiteDocs" })
+        /* @__PURE__ */ jsx9(Zap, { className: "powered-by-icon", size: 12, fill: "currentColor" }),
+        /* @__PURE__ */ jsx9("span", { children: "Powered by" }),
+        /* @__PURE__ */ jsx9("span", { className: "powered-by-brand", children: "LiteDocs" })
       ]
     }
   ) });
 }
 
 // src/client/theme/ui/Sidebar/Sidebar.tsx
-import { ChevronRight, PanelLeft } from "lucide-react";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function renderBadge(badgeRaw) {
   if (!badgeRaw) return null;
   let text = "";
@@ -156,7 +440,6 @@ function renderBadge(badgeRaw) {
     }
   }
   if (!text) return null;
-  if (!text) return null;
   let typeClass = "badge-default";
   const lowerText = text.toLowerCase();
   if (lowerText === "new") {
@@ -166,18 +449,51 @@ function renderBadge(badgeRaw) {
   } else if (lowerText === "updated") {
     typeClass = "badge-updated";
   }
-  return /* @__PURE__ */ jsx5("span", { className: `sidebar-badge ${typeClass}`, children: text });
+  return /* @__PURE__ */ jsx10("span", { className: `sidebar-badge ${typeClass}`, children: text });
+}
+function renderIcon(iconName, size = 16) {
+  if (!iconName) return null;
+  const trimmed = iconName.trim();
+  if (trimmed.startsWith("<svg") || trimmed.includes("http")) {
+    if (trimmed.startsWith("<svg")) {
+      return /* @__PURE__ */ jsx10(
+        "span",
+        {
+          className: "sidebar-icon svg-icon",
+          dangerouslySetInnerHTML: { __html: trimmed }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx10(
+      "img",
+      {
+        src: trimmed,
+        className: "sidebar-icon",
+        style: { width: size, height: size },
+        alt: ""
+      }
+    );
+  }
+  const IconComponent = LucideIcons[iconName];
+  if (IconComponent) {
+    return /* @__PURE__ */ jsx10(IconComponent, { size, className: "sidebar-icon lucide-icon" });
+  }
+  return null;
 }
 function Sidebar({
   routes,
-  config,
-  isCollapsed,
-  onToggle
+  config
 }) {
-  const location = useLocation();
+  const location = useLocation3();
+  const currentRoute = routes.find((r) => r.path === location.pathname);
+  const activeTabId = currentRoute?.tab?.toLowerCase();
+  const filteredRoutes = activeTabId ? routes.filter((r) => {
+    if (!r.tab) return true;
+    return r.tab.toLowerCase() === activeTabId;
+  }) : routes;
   const ungrouped = [];
   const groupMap = /* @__PURE__ */ new Map();
-  for (const route of routes) {
+  for (const route of filteredRoutes) {
     if (!route.group) {
       ungrouped.push(route);
     } else {
@@ -185,49 +501,41 @@ function Sidebar({
         groupMap.set(route.group, {
           slug: route.group,
           title: route.groupTitle || route.group,
-          routes: []
+          routes: [],
+          icon: route.groupIcon
         });
       }
       groupMap.get(route.group).routes.push(route);
     }
   }
   const groups = Array.from(groupMap.values());
-  return /* @__PURE__ */ jsxs3("aside", { className: "boltdocs-sidebar", children: [
-    onToggle && /* @__PURE__ */ jsx5("div", { className: "sidebar-collapse", children: /* @__PURE__ */ jsx5(
-      "button",
-      {
-        className: "sidebar-collapse-btn",
-        onClick: onToggle,
-        "aria-label": isCollapsed ? "Expand Sidebar" : "Collapse Sidebar",
-        title: isCollapsed ? "Expand Sidebar" : "Collapse Sidebar",
-        children: /* @__PURE__ */ jsx5(PanelLeft, { size: 18 })
-      }
-    ) }),
-    !isCollapsed && /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsxs3("nav", { "aria-label": "Main Navigation", children: [
-        /* @__PURE__ */ jsx5("ul", { className: "sidebar-list", children: ungrouped.map((route) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
-          Link,
-          {
-            to: route.path === "" ? "/" : route.path,
-            className: `sidebar-link ${location.pathname === route.path ? "active" : ""}`,
-            "aria-current": location.pathname === route.path ? "page" : void 0,
-            children: /* @__PURE__ */ jsxs3("div", { className: "sidebar-link-content", children: [
-              /* @__PURE__ */ jsx5("span", { children: route.title }),
-              renderBadge(route.badge)
-            ] })
-          }
-        ) }, route.path)) }),
-        groups.map((group) => /* @__PURE__ */ jsx5(
-          SidebarGroupSection,
-          {
-            group,
-            currentPath: location.pathname
-          },
-          group.slug
-        ))
-      ] }),
-      config.themeConfig?.poweredBy !== false && /* @__PURE__ */ jsx5(PoweredBy, {})
-    ] })
+  return /* @__PURE__ */ jsxs5("aside", { className: "boltdocs-sidebar", children: [
+    /* @__PURE__ */ jsxs5("nav", { "aria-label": "Main Navigation", children: [
+      /* @__PURE__ */ jsx10("ul", { className: "sidebar-list", children: ungrouped.map((route) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
+        Link,
+        {
+          to: route.path === "" ? "/" : route.path,
+          className: `sidebar-link ${location.pathname === route.path ? "active" : ""}`,
+          "aria-current": location.pathname === route.path ? "page" : void 0,
+          children: /* @__PURE__ */ jsxs5("div", { className: "sidebar-link-content", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "sidebar-link-title-container", children: [
+              renderIcon(route.icon),
+              /* @__PURE__ */ jsx10("span", { children: route.title })
+            ] }),
+            renderBadge(route.badge)
+          ] })
+        }
+      ) }, route.path)) }),
+      groups.map((group) => /* @__PURE__ */ jsx10(
+        SidebarGroupSection,
+        {
+          group,
+          currentPath: location.pathname
+        },
+        group.slug
+      ))
+    ] }),
+    config.themeConfig?.poweredBy !== false && /* @__PURE__ */ jsx10(PoweredBy, {})
   ] });
 }
 function SidebarGroupSection({
@@ -235,9 +543,9 @@ function SidebarGroupSection({
   currentPath
 }) {
   const isActive = group.routes.some((r) => currentPath === r.path);
-  const [open, setOpen] = useState2(true);
-  return /* @__PURE__ */ jsxs3("div", { className: "sidebar-group", children: [
-    /* @__PURE__ */ jsxs3(
+  const [open, setOpen] = useState5(true);
+  return /* @__PURE__ */ jsxs5("div", { className: "sidebar-group", children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         className: `sidebar-group-header ${isActive ? "active" : ""}`,
@@ -245,19 +553,22 @@ function SidebarGroupSection({
         "aria-expanded": open,
         "aria-controls": `sidebar-group-${group.slug}`,
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "sidebar-group-title", children: group.title }),
-          /* @__PURE__ */ jsx5("span", { className: `sidebar-group-chevron ${open ? "open" : ""}`, children: /* @__PURE__ */ jsx5(ChevronRight, { size: 16 }) })
+          /* @__PURE__ */ jsx10("div", { className: "sidebar-group-header-content", children: /* @__PURE__ */ jsx10("span", { className: "sidebar-group-title", children: group.title }) }),
+          /* @__PURE__ */ jsx10("span", { className: `sidebar-group-chevron ${open ? "open" : ""}`, children: /* @__PURE__ */ jsx10(ChevronRight, { size: 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx5("ul", { className: "sidebar-group-list", id: `sidebar-group-${group.slug}`, children: group.routes.map((route) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
+    open && /* @__PURE__ */ jsx10("ul", { className: "sidebar-group-list", id: `sidebar-group-${group.slug}`, children: group.routes.map((route) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
       Link,
       {
         to: route.path === "" ? "/" : route.path,
         className: `sidebar-link sidebar-link-nested ${currentPath === route.path ? "active" : ""}`,
         "aria-current": currentPath === route.path ? "page" : void 0,
-        children: /* @__PURE__ */ jsxs3("div", { className: "sidebar-link-content", children: [
-          /* @__PURE__ */ jsx5("span", { children: route.title }),
+        children: /* @__PURE__ */ jsxs5("div", { className: "sidebar-link-content", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "sidebar-link-title-container", children: [
+            renderIcon(route.icon),
+            /* @__PURE__ */ jsx10("span", { children: route.title })
+          ] }),
           renderBadge(route.badge)
         ] })
       }
@@ -266,22 +577,23 @@ function SidebarGroupSection({
 }
 
 // src/client/theme/ui/OnThisPage/OnThisPage.tsx
-import { useEffect as useEffect2, useState as useState3, useRef, useCallback as useCallback2 } from "react";
-import { useLocation as useLocation2 } from "react-router-dom";
+import { useEffect as useEffect5, useState as useState6, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { useLocation as useLocation4 } from "react-router-dom";
 import { Pencil, CircleHelp } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function OnThisPage({
   headings = [],
   editLink,
   communityHelp,
   filePath
 }) {
-  const [activeId, setActiveId] = useState3("");
-  const [indicatorStyle, setIndicatorStyle] = useState3({});
-  const observerRef = useRef(null);
-  const location = useLocation2();
-  const listRef = useRef(null);
-  useEffect2(() => {
+  const [activeId, setActiveId] = useState6(null);
+  const [indicatorStyle, setIndicatorStyle] = useState6({});
+  const observerRef = useRef3(null);
+  const location = useLocation4();
+  const listRef = useRef3(null);
+  const visibleIdsRef = useRef3(/* @__PURE__ */ new Set());
+  useEffect5(() => {
     if (headings.length > 0) {
       const hash = window.location.hash.substring(1);
       if (hash && headings.some((h) => h.id === hash)) {
@@ -291,38 +603,55 @@ function OnThisPage({
       }
     }
   }, [location.pathname, headings]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (!activeId || !listRef.current) return;
-    const activeElement = listRef.current.querySelector(
+    const activeLink = listRef.current.querySelector(
       `a[href="#${activeId}"]`
     );
-    if (activeElement) {
-      const { offsetTop, offsetHeight } = activeElement;
+    if (activeLink) {
+      const top = activeLink.offsetTop;
+      const height = activeLink.offsetHeight;
       setIndicatorStyle({
-        transform: `translateY(${offsetTop}px)`,
-        height: `${offsetHeight}px`,
+        transform: `translateY(${top}px)`,
+        height: `${height}px`,
         opacity: 1
       });
     }
   }, [activeId, headings]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (headings.length === 0) return;
+    visibleIdsRef.current.clear();
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
     const callback = (entries) => {
-      const visibleEntries = entries.filter((entry) => entry.isIntersecting);
-      if (visibleEntries.length > 0) {
-        const closest = visibleEntries.reduce((prev, curr) => {
-          return Math.abs(curr.boundingClientRect.top - 100) < Math.abs(prev.boundingClientRect.top - 100) ? curr : prev;
-        });
-        setActiveId(closest.target.id);
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          visibleIdsRef.current.add(entry.target.id);
+        } else {
+          visibleIdsRef.current.delete(entry.target.id);
+        }
+      });
+      const firstVisible = headings.find((h) => visibleIdsRef.current.has(h.id));
+      if (firstVisible) {
+        setActiveId(firstVisible.id);
+      } else {
+        const firstEl = document.getElementById(headings[0].id);
+        if (firstEl) {
+          const rect = firstEl.getBoundingClientRect();
+          if (rect.top > 200) {
+            setActiveId(headings[0].id);
+            return;
+          }
+        }
       }
     };
-    observerRef.current = new IntersectionObserver(callback, {
-      rootMargin: "-100px 0px -70% 0px",
+    const observerOptions = {
+      root: document.querySelector(".boltdocs-content"),
+      rootMargin: "-20% 0px -70% 0px",
       threshold: [0, 1]
-    });
+    };
+    observerRef.current = new IntersectionObserver(callback, observerOptions);
     const observeHeadings = () => {
       headings.forEach(({ id }) => {
         const el = document.getElementById(id);
@@ -347,22 +676,20 @@ function OnThisPage({
       window.removeEventListener("scroll", handleScroll);
     };
   }, [headings, location.pathname]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (!activeId || !listRef.current) return;
     const activeLink = listRef.current.querySelector(
       `a[href="#${activeId}"]`
     );
     if (activeLink) {
-      const container = listRef.current.closest(
-        ".boltdocs-on-this-page"
-      );
+      const container = listRef.current.parentElement;
       if (!container) return;
       const linkRect = activeLink.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
       const isVisible = linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom;
       if (!isVisible) {
         activeLink.scrollIntoView({
-          behavior: "smooth",
+          behavior: "auto",
           block: "nearest"
         });
       }
@@ -373,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);
@@ -389,11 +710,11 @@ function OnThisPage({
     []
   );
   if (headings.length === 0) return null;
-  return /* @__PURE__ */ jsxs4("nav", { className: "boltdocs-on-this-page", "aria-label": "Table of contents", children: [
-    /* @__PURE__ */ jsx6("p", { className: "on-this-page-title", children: "On this page" }),
-    /* @__PURE__ */ jsxs4("div", { className: "on-this-page-container", children: [
-      /* @__PURE__ */ jsx6("div", { className: "toc-indicator", style: indicatorStyle }),
-      /* @__PURE__ */ jsx6("ul", { className: "on-this-page-list", ref: listRef, children: headings.map((h) => /* @__PURE__ */ jsx6("li", { className: h.level === 3 ? "toc-indent" : "", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6("nav", { className: "boltdocs-on-this-page", "aria-label": "Table of contents", children: [
+    /* @__PURE__ */ jsx11("p", { className: "on-this-page-title", children: "On this page" }),
+    /* @__PURE__ */ jsx11("div", { className: "on-this-page-container", children: /* @__PURE__ */ jsxs6("div", { className: "on-this-page-list-container", children: [
+      /* @__PURE__ */ jsx11("div", { className: "toc-indicator", style: indicatorStyle }),
+      /* @__PURE__ */ jsx11("ul", { className: "on-this-page-list", ref: listRef, children: headings.map((h) => /* @__PURE__ */ jsx11("li", { className: h.level === 3 ? "toc-indent" : "", children: /* @__PURE__ */ jsx11(
         "a",
         {
           href: `#${h.id}`,
@@ -403,11 +724,11 @@ function OnThisPage({
           children: h.text
         }
       ) }, h.id)) })
-    ] }),
-    (editLink || communityHelp) && /* @__PURE__ */ jsxs4("div", { className: "toc-help", children: [
-      /* @__PURE__ */ jsx6("p", { className: "toc-help-title", children: "Need help?" }),
-      /* @__PURE__ */ jsxs4("ul", { className: "toc-help-links", children: [
-        editLink && filePath && /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs4(
+    ] }) }),
+    (editLink || communityHelp) && /* @__PURE__ */ jsxs6("div", { className: "toc-help", children: [
+      /* @__PURE__ */ jsx11("p", { className: "toc-help-title", children: "Need help?" }),
+      /* @__PURE__ */ jsxs6("ul", { className: "toc-help-links", children: [
+        editLink && filePath && /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsxs6(
           "a",
           {
             href: editLink.replace(":path", filePath),
@@ -415,12 +736,12 @@ function OnThisPage({
             rel: "noopener noreferrer",
             className: "toc-help-link",
             children: [
-              /* @__PURE__ */ jsx6(Pencil, { size: 16 }),
+              /* @__PURE__ */ jsx11(Pencil, { size: 16 }),
               "Edit this page"
             ]
           }
         ) }),
-        communityHelp && /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs4(
+        communityHelp && /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsxs6(
           "a",
           {
             href: communityHelp,
@@ -428,7 +749,7 @@ function OnThisPage({
             rel: "noopener noreferrer",
             className: "toc-help-link",
             children: [
-              /* @__PURE__ */ jsx6(CircleHelp, { size: 16 }),
+              /* @__PURE__ */ jsx11(CircleHelp, { size: 16 }),
               "Community help"
             ]
           }
@@ -439,11 +760,11 @@ function OnThisPage({
 }
 
 // src/client/theme/ui/Head/Head.tsx
-import { useEffect as useEffect3 } from "react";
-import { useLocation as useLocation3 } from "react-router-dom";
+import { useEffect as useEffect6 } from "react";
+import { useLocation as useLocation5 } from "react-router-dom";
 function Head({ siteTitle, siteDescription, routes }) {
-  const location = useLocation3();
-  useEffect3(() => {
+  const location = useLocation5();
+  useEffect6(() => {
     const currentRoute = routes.find((r) => r.path === location.pathname);
     const pageTitle = currentRoute?.title;
     const pageDescription = currentRoute?.description || siteDescription || "";
@@ -489,25 +810,25 @@ function setMetaTag(attr, key, content) {
 }
 
 // src/client/theme/ui/Breadcrumbs/Breadcrumbs.tsx
-import { useLocation as useLocation4 } from "react-router-dom";
+import { useLocation as useLocation6 } from "react-router-dom";
 import { Home, ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Breadcrumbs({ routes, config }) {
-  const location = useLocation4();
+  const location = useLocation6();
   if (config.themeConfig?.breadcrumbs === false) return null;
   if (location.pathname === "/") return null;
   const currentRoute = routes.find((r) => r.path === location.pathname);
   const groupRoute = currentRoute?.group ? routes.find((r) => r.group === currentRoute.group) : null;
-  return /* @__PURE__ */ jsx7("nav", { className: "boltdocs-breadcrumbs", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs5("ol", { className: "boltdocs-breadcrumbs-list", children: [
-    /* @__PURE__ */ jsxs5("li", { className: "boltdocs-breadcrumbs-item", children: [
-      /* @__PURE__ */ jsx7(Link, { to: "/", className: "boltdocs-breadcrumbs-link", children: /* @__PURE__ */ jsx7(Home, { size: 14 }) }),
-      /* @__PURE__ */ jsx7("span", { className: "boltdocs-breadcrumbs-separator", children: /* @__PURE__ */ jsx7(ChevronRight2, { size: 14 }) })
+  return /* @__PURE__ */ jsx12("nav", { className: "boltdocs-breadcrumbs", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs7("ol", { className: "boltdocs-breadcrumbs-list", children: [
+    /* @__PURE__ */ jsxs7("li", { className: "boltdocs-breadcrumbs-item", children: [
+      /* @__PURE__ */ jsx12(Link, { to: "/", className: "boltdocs-breadcrumbs-link", children: /* @__PURE__ */ jsx12(Home, { size: 14 }) }),
+      /* @__PURE__ */ jsx12("span", { className: "boltdocs-breadcrumbs-separator", children: /* @__PURE__ */ jsx12(ChevronRight2, { size: 14 }) })
     ] }),
-    currentRoute?.groupTitle && /* @__PURE__ */ jsxs5("li", { className: "boltdocs-breadcrumbs-item", children: [
-      groupRoute ? /* @__PURE__ */ jsx7(Link, { to: groupRoute.path, className: "boltdocs-breadcrumbs-link", children: currentRoute.groupTitle }) : /* @__PURE__ */ jsx7("span", { className: "boltdocs-breadcrumbs-text", children: currentRoute.groupTitle }),
-      /* @__PURE__ */ jsx7("span", { className: "boltdocs-breadcrumbs-separator", children: /* @__PURE__ */ jsx7(ChevronRight2, { size: 14 }) })
+    currentRoute?.groupTitle && /* @__PURE__ */ jsxs7("li", { className: "boltdocs-breadcrumbs-item", children: [
+      groupRoute ? /* @__PURE__ */ jsx12(Link, { to: groupRoute.path, className: "boltdocs-breadcrumbs-link", children: currentRoute.groupTitle }) : /* @__PURE__ */ jsx12("span", { className: "boltdocs-breadcrumbs-text", children: currentRoute.groupTitle }),
+      /* @__PURE__ */ jsx12("span", { className: "boltdocs-breadcrumbs-separator", children: /* @__PURE__ */ jsx12(ChevronRight2, { size: 14 }) })
     ] }),
-    currentRoute?.title && /* @__PURE__ */ jsx7("li", { className: "boltdocs-breadcrumbs-item", children: /* @__PURE__ */ jsx7(
+    currentRoute?.title && /* @__PURE__ */ jsx12("li", { className: "boltdocs-breadcrumbs-item", children: /* @__PURE__ */ jsx12(
       "span",
       {
         className: "boltdocs-breadcrumbs-text boltdocs-breadcrumbs-active",
@@ -519,16 +840,93 @@ function Breadcrumbs({ routes, config }) {
 }
 
 // src/client/theme/ui/BackgroundGradient/BackgroundGradient.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function BackgroundGradient() {
-  return /* @__PURE__ */ jsxs6("div", { className: "boltdocs-background-glow", children: [
-    /* @__PURE__ */ jsx8("div", { className: "glow-shape glow-1" }),
-    /* @__PURE__ */ jsx8("div", { className: "glow-shape glow-2" })
+  return /* @__PURE__ */ jsxs8("div", { className: "boltdocs-background-glow", children: [
+    /* @__PURE__ */ jsx13("div", { className: "glow-shape glow-1" }),
+    /* @__PURE__ */ jsx13("div", { className: "glow-shape glow-2" })
   ] });
 }
 
+// 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 jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThemeLayout({
   config,
   routes,
@@ -542,10 +940,9 @@ function ThemeLayout({
   className = "",
   style
 }) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState4(true);
   const siteTitle = config.themeConfig?.title || "Boltdocs";
   const siteDescription = config.themeConfig?.description || "";
-  const location = useLocation5();
+  const location = useLocation7();
   const currentIndex = routes.findIndex((r) => r.path === location.pathname);
   const currentRoute = routes[currentIndex];
   const currentLocale = config.i18n ? currentRoute?.locale || config.i18n.defaultLocale : void 0;
@@ -561,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();
-  React4.useEffect(() => {
+  React7.useEffect(() => {
     if (prevPage?.path) preload(prevPage.path);
     if (nextPage?.path) preload(nextPage.path);
   }, [prevPage, nextPage, preload]);
-  return /* @__PURE__ */ jsxs7("div", { className: `boltdocs-layout ${className}`, style, children: [
-    background !== void 0 ? background : /* @__PURE__ */ jsx9(BackgroundGradient, {}),
-    head !== void 0 ? head : /* @__PURE__ */ jsx9(
+  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,
@@ -575,7 +973,7 @@ function ThemeLayout({
         routes
       }
     ),
-    navbar !== void 0 ? navbar : /* @__PURE__ */ jsx9(
+    navbar !== void 0 ? navbar : /* @__PURE__ */ jsx16(
       Navbar,
       {
         config,
@@ -585,90 +983,76 @@ function ThemeLayout({
         currentVersion
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      "div",
-      {
-        className: `boltdocs-main-container ${!isSidebarOpen ? "sidebar-collapsed" : ""}`,
-        children: [
-          sidebar !== void 0 ? sidebar : /* @__PURE__ */ jsx9(
-            Sidebar,
+    /* @__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,
             {
-              routes: filteredRoutes,
-              config,
-              isCollapsed: !isSidebarOpen,
-              onToggle: () => setIsSidebarOpen(!isSidebarOpen)
+              to: prevPage.path || "/",
+              className: "page-nav-link page-nav-link--prev",
+              children: [
+                /* @__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__ */ jsx16(ChevronLeft, { className: "page-nav-arrow", size: 16 })
+              ]
             }
-          ),
-          /* @__PURE__ */ jsxs7("main", { className: "boltdocs-content", children: [
-            breadcrumbs !== void 0 ? breadcrumbs : /* @__PURE__ */ jsx9(Breadcrumbs, { routes: filteredRoutes, config }),
-            /* @__PURE__ */ jsx9("div", { className: "boltdocs-page", children }),
-            (prevPage || nextPage) && /* @__PURE__ */ jsxs7("nav", { className: "page-nav", "aria-label": "Pagination", children: [
-              prevPage ? /* @__PURE__ */ jsxs7(
-                Link,
-                {
-                  to: prevPage.path || "/",
-                  className: "page-nav-link page-nav-link--prev",
-                  children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "page-nav-info", children: [
-                      /* @__PURE__ */ jsx9("span", { className: "page-nav-label", children: "Previous" }),
-                      /* @__PURE__ */ jsx9("span", { className: "page-nav-title", children: prevPage.title })
-                    ] }),
-                    /* @__PURE__ */ jsx9(ChevronLeft2, { className: "page-nav-arrow", size: 16 })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsx9("span", {}),
-              nextPage ? /* @__PURE__ */ jsxs7(
-                Link,
-                {
-                  to: nextPage.path || "/",
-                  className: "page-nav-link page-nav-link--next",
-                  children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "page-nav-info", children: [
-                      /* @__PURE__ */ jsx9("span", { className: "page-nav-label", children: "Next" }),
-                      /* @__PURE__ */ jsx9("span", { className: "page-nav-title", children: nextPage.title })
-                    ] }),
-                    /* @__PURE__ */ jsx9(ChevronRight3, { className: "page-nav-arrow", size: 16 })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsx9("span", {})
-            ] })
-          ] }),
-          toc !== void 0 ? toc : /* @__PURE__ */ jsx9(
-            OnThisPage,
+          ) : /* @__PURE__ */ jsx16("span", {}),
+          nextPage ? /* @__PURE__ */ jsxs10(
+            Link,
             {
-              headings: routes[currentIndex]?.headings,
-              editLink: config.themeConfig?.editLink,
-              communityHelp: config.themeConfig?.communityHelp,
-              filePath: routes[currentIndex]?.filePath
+              to: nextPage.path || "/",
+              className: "page-nav-link page-nav-link--next",
+              children: [
+                /* @__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__ */ jsx16(ChevronRight3, { className: "page-nav-arrow", size: 16 })
+              ]
             }
-          )
-        ]
-      }
-    )
+          ) : /* @__PURE__ */ jsx16("span", {})
+        ] })
+      ] }),
+      toc !== void 0 ? toc : /* @__PURE__ */ jsx16(
+        OnThisPage,
+        {
+          headings: routes[currentIndex]?.headings,
+          editLink: config.themeConfig?.editLink,
+          communityHelp: config.themeConfig?.communityHelp,
+          filePath: routes[currentIndex]?.filePath
+        }
+      )
+    ] })
   ] });
 }
 
 // src/client/theme/ui/NotFound/NotFound.tsx
 import { ArrowLeft } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function NotFound() {
-  return /* @__PURE__ */ jsx10("div", { className: "boltdocs-not-found", children: /* @__PURE__ */ jsxs8("div", { className: "not-found-content", children: [
-    /* @__PURE__ */ jsx10("span", { className: "not-found-code", children: "404" }),
-    /* @__PURE__ */ jsx10("h1", { className: "not-found-title", children: "Page Not Found" }),
-    /* @__PURE__ */ jsx10("p", { className: "not-found-text", children: "The page you're looking for doesn't exist or has been moved." }),
-    /* @__PURE__ */ jsxs8(Link, { to: "/", className: "not-found-link", children: [
-      /* @__PURE__ */ jsx10(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 jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Loading() {
-  return /* @__PURE__ */ jsxs9("div", { className: "boltdocs-loading", children: [
-    /* @__PURE__ */ jsx11("div", { className: "loading-spinner" }),
-    /* @__PURE__ */ jsx11("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..." })
   ] });
 }
 
@@ -684,34 +1068,34 @@ import {
 import { Link as LucideLink } from "lucide-react";
 
 // src/client/theme/components/CodeBlock/CodeBlock.tsx
-import { useState as useState5, useRef as useRef2, 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 jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function CodeBlock({ children, ...props }) {
-  const [copied, setCopied] = useState5(false);
-  const preRef = useRef2(null);
+  const [copied, setCopied] = useState9(false);
+  const preRef = useRef4(null);
   const handleCopy = useCallback3(async () => {
     const code = preRef.current?.textContent || "";
     copyToClipboard(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, []);
-  return /* @__PURE__ */ jsxs10("div", { className: "code-block-wrapper", children: [
-    /* @__PURE__ */ jsx12(
+  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__ */ jsx12(Check, { size: 16 }) : /* @__PURE__ */ jsx12(Copy, { size: 16 })
+        children: copied ? /* @__PURE__ */ jsx19(Check, { size: 16 }) : /* @__PURE__ */ jsx19(Copy, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx12("pre", { ref: preRef, ...props, children })
+    /* @__PURE__ */ jsx19("pre", { ref: preRef, ...props, children })
   ] });
 }
 
 // src/client/app/index.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var ConfigContext = createContext2(null);
 function useConfig() {
   return useContext2(ConfigContext);
@@ -730,71 +1114,72 @@ var Heading = ({
   children
 }) => {
   const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxs11(Tag, { id, className: "boltdocs-heading", children: [
+  return /* @__PURE__ */ jsxs14(Tag, { id, className: "boltdocs-heading", children: [
     children,
-    id && /* @__PURE__ */ jsx13("a", { href: `#${id}`, className: "header-anchor", "aria-label": "Anchor", children: /* @__PURE__ */ jsx13(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__ */ jsx13(Heading, { level: 1, ...props }),
-  h2: (props) => /* @__PURE__ */ jsx13(Heading, { level: 2, ...props }),
-  h3: (props) => /* @__PURE__ */ jsx13(Heading, { level: 3, ...props }),
-  h4: (props) => /* @__PURE__ */ jsx13(Heading, { level: 4, ...props }),
-  h5: (props) => /* @__PURE__ */ jsx13(Heading, { level: 5, ...props }),
-  h6: (props) => /* @__PURE__ */ jsx13(Heading, { level: 6, ...props }),
-  pre: (props) => /* @__PURE__ */ jsx13(CodeBlock, { ...props, children: props.children }),
-  video: (props) => /* @__PURE__ */ jsx13(Suspense, { fallback: /* @__PURE__ */ jsx13("div", { className: "video-skeleton" }), children: /* @__PURE__ */ jsx13(Video, { ...props }) }),
-  PackageManagerTabs: (props) => /* @__PURE__ */ jsx13(Suspense, { fallback: /* @__PURE__ */ jsx13("div", { className: "pkg-tabs-skeleton" }), children: /* @__PURE__ */ jsx13(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,
   initialConfig,
+  docsDirName,
   modules,
   hot,
   homePage: HomePage,
   components: customComponents = {}
 }) {
-  const [routesInfo, setRoutesInfo] = useState6(initialRoutes);
-  const [config] = useState6(initialConfig);
+  const [routesInfo, setRoutesInfo] = useState10(initialRoutes);
+  const [config] = useState10(initialConfig);
   const resolveRoutes = (infos) => {
     return infos.filter(
       (route) => !(HomePage && (route.path === "/" || route.path === ""))
     ).map((route) => {
       const loaderKey = Object.keys(modules).find(
-        (k) => k.endsWith("/" + route.filePath)
+        (k) => k === `/${docsDirName}/${route.filePath}`
       );
       const loader = loaderKey ? modules[loaderKey] : null;
       return {
         ...route,
-        Component: React6.lazy(() => {
+        Component: React9.lazy(() => {
           if (!loader)
-            return Promise.resolve({ default: () => /* @__PURE__ */ jsx13(NotFound, {}) });
+            return Promise.resolve({ default: () => /* @__PURE__ */ jsx20(NotFound, {}) });
           return loader();
         })
       };
     });
   };
-  const [resolvedRoutes, setResolvedRoutes] = useState6(
+  const [resolvedRoutes, setResolvedRoutes] = useState10(
     () => resolveRoutes(initialRoutes)
   );
-  useEffect4(() => {
+  useEffect8(() => {
     if (hot) {
       hot.on("boltdocs:routes-update", (newRoutes) => {
         setRoutesInfo(newRoutes);
       });
     }
   }, [hot]);
-  useEffect4(() => {
+  useEffect8(() => {
     setResolvedRoutes(resolveRoutes(routesInfo));
-  }, [routesInfo, modules]);
-  return /* @__PURE__ */ jsx13(ConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxs11(PreloadProvider, { routes: routesInfo, modules, children: [
-    /* @__PURE__ */ jsx13(ScrollHandler, {}),
-    /* @__PURE__ */ jsxs11(Routes, { children: [
-      HomePage && /* @__PURE__ */ jsx13(
+  }, [routesInfo, modules, docsDirName]);
+  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__ */ jsx13(
+          element: /* @__PURE__ */ jsx20(
             ThemeLayout,
             {
               config,
@@ -803,20 +1188,20 @@ function AppShell({
               toc: null,
               breadcrumbs: null,
               ...config.themeConfig?.layoutProps,
-              children: /* @__PURE__ */ jsx13(HomePage, {})
+              children: /* @__PURE__ */ jsx20(HomePage, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx20(
         Route,
         {
-          element: /* @__PURE__ */ jsx13(DocsLayout, { config, routes: routesInfo }),
-          children: resolvedRoutes.map((route) => /* @__PURE__ */ jsx13(
+          element: /* @__PURE__ */ jsx20(DocsLayout, { config, routes: routesInfo }),
+          children: resolvedRoutes.map((route) => /* @__PURE__ */ jsx20(
             Route,
             {
               path: route.path === "" ? "/" : route.path,
-              element: /* @__PURE__ */ jsx13(React6.Suspense, { fallback: /* @__PURE__ */ jsx13(Loading, {}), children: /* @__PURE__ */ jsx13(
+              element: /* @__PURE__ */ jsx20(React9.Suspense, { fallback: /* @__PURE__ */ jsx20(Loading, {}), children: /* @__PURE__ */ jsx20(
                 MdxPage,
                 {
                   Component: route.Component,
@@ -829,17 +1214,17 @@ function AppShell({
         },
         "docs-layout"
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx20(
         Route,
         {
           path: "*",
-          element: /* @__PURE__ */ jsx13(
+          element: /* @__PURE__ */ jsx20(
             ThemeLayout,
             {
               config,
               routes: routesInfo,
               ...config.themeConfig?.layoutProps,
-              children: /* @__PURE__ */ jsx13(NotFound, {})
+              children: /* @__PURE__ */ jsx20(NotFound, {})
             }
           )
         }
@@ -848,25 +1233,27 @@ function AppShell({
   ] }) });
 }
 function ScrollHandler() {
-  const { pathname, hash } = useLocation6();
+  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;
 }
@@ -874,36 +1261,37 @@ function DocsLayout({
   config,
   routes
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx20(
     ThemeLayout,
     {
       config,
       routes,
       ...config.themeConfig?.layoutProps,
-      children: /* @__PURE__ */ jsx13(Outlet, {})
+      children: /* @__PURE__ */ jsx20(Outlet, {})
     }
   );
 }
 function MdxPage({
-  Component,
+  Component: Component2,
   customComponents = {}
 }) {
   const allComponents = { ...mdxComponents, ...customComponents };
-  return /* @__PURE__ */ jsx13(MDXProvider, { components: allComponents, children: /* @__PURE__ */ jsx13(Component, {}) });
+  return /* @__PURE__ */ jsx20(MDXProvider, { components: allComponents, children: /* @__PURE__ */ jsx20(Component2, {}) });
 }
 function createBoltdocsApp(options) {
-  const { target, routes, config, modules, hot, homePage } = options;
+  const { target, routes, docsDirName, config, modules, hot, homePage } = options;
   const container = document.querySelector(target);
   if (!container) {
     throw new Error(
       `[boltdocs] Mount target "${target}" not found in document.`
     );
   }
-  const app = /* @__PURE__ */ jsx13(React6.StrictMode, { children: /* @__PURE__ */ jsx13(BrowserRouter, { children: /* @__PURE__ */ jsx13(
+  const app = /* @__PURE__ */ jsx20(React9.StrictMode, { children: /* @__PURE__ */ jsx20(BrowserRouter, { children: /* @__PURE__ */ jsx20(
     AppShell,
     {
       initialRoutes: routes,
       initialConfig: config,
+      docsDirName,
       modules,
       hot,
       homePage,
@@ -915,9 +1303,9 @@ function createBoltdocsApp(options) {
 }
 
 // src/client/theme/ui/Link/LinkPreview.tsx
-import { useEffect as useEffect5, useState as useState7, useRef as useRef3 } from "react";
+import { useEffect as useEffect9, useState as useState11, useRef as useRef5 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function LinkPreview({
   isVisible,
   title,
@@ -925,30 +1313,25 @@ function LinkPreview({
   x,
   y
 }) {
-  const [mounted, setMounted] = useState7(false);
-  const ref = useRef3(null);
-  const [position, setPosition] = useState7({ top: 0, left: 0 });
-  useEffect5(() => {
-    setMounted(true);
-  }, []);
-  useEffect5(() => {
-    if (isVisible && ref.current) {
+  const ref = useRef5(null);
+  const [position, setPosition] = useState11({ top: 0, left: 0 });
+  useEffect9(() => {
+    if (ref.current) {
       const rect = ref.current.getBoundingClientRect();
-      const padding = 15;
+      const padding = 12;
       let top = y + padding;
       let left = x + padding;
-      if (left + rect.width > window.innerWidth) {
+      if (left + rect.width > window.innerWidth - 20) {
         left = x - rect.width - padding;
       }
-      if (top + rect.height > window.innerHeight) {
+      if (top + rect.height > window.innerHeight - 20) {
         top = y - rect.height - padding;
       }
       setPosition({ top, left });
     }
-  }, [isVisible, x, y]);
-  if (!mounted) return null;
+  }, [x, y, isVisible]);
   return createPortal(
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         ref,
@@ -957,10 +1340,10 @@ function LinkPreview({
           top: position.top,
           left: position.left
         },
-        children: [
-          /* @__PURE__ */ jsx14("span", { className: "boltdocs-link-preview-title", children: title }),
-          summary && /* @__PURE__ */ jsx14("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 })
+        ] })
       }
     ),
     document.body
@@ -968,9 +1351,9 @@ function LinkPreview({
 }
 
 // src/client/theme/ui/Link/Link.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function useLocalizedTo(to) {
-  const location = useLocation7();
+  const location = useLocation9();
   const config = useConfig();
   if (!config || typeof to !== "string") return to;
   if (!config.i18n && !config.versions) return to;
@@ -1024,7 +1407,7 @@ function useLocalizedTo(to) {
   }
   return finalPath === basePath ? basePath : finalPath;
 }
-var Link = React7.forwardRef(
+var Link = React10.forwardRef(
   (props, ref) => {
     const {
       boltdocsPrefetch = "hover",
@@ -1040,9 +1423,9 @@ var Link = React7.forwardRef(
     const localizedTo = useLocalizedTo(to);
     const { preload, routes } = usePreload();
     const config = useConfig();
-    const navigate = useNavigate();
+    const navigate = useNavigate3();
     const shouldShowPreview = boltdocsPreview && config?.themeConfig?.linkPreview !== false;
-    const [preview, setPreview] = React7.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("/")) {
@@ -1091,13 +1474,13 @@ var Link = React7.forwardRef(
       }
       if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
         e.preventDefault();
-        React7.startTransition(() => {
+        React10.startTransition(() => {
           navigate(localizedTo);
         });
       }
     };
-    return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-      /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs16(Fragment, { children: [
+      /* @__PURE__ */ jsx22(
         RouterLink,
         {
           ref,
@@ -1111,7 +1494,7 @@ var Link = React7.forwardRef(
           ...rest
         }
       ),
-      shouldShowPreview && /* @__PURE__ */ jsx15(
+      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx22(
         LinkPreview,
         {
           isVisible: preview.visible,
@@ -1125,7 +1508,7 @@ var Link = React7.forwardRef(
   }
 );
 Link.displayName = "Link";
-var NavLink = React7.forwardRef(
+var NavLink = React10.forwardRef(
   (props, ref) => {
     const {
       boltdocsPrefetch = "hover",
@@ -1141,9 +1524,9 @@ var NavLink = React7.forwardRef(
     const localizedTo = useLocalizedTo(to);
     const { preload, routes } = usePreload();
     const config = useConfig();
-    const navigate = useNavigate();
+    const navigate = useNavigate3();
     const shouldShowPreview = boltdocsPreview && config?.themeConfig?.linkPreview !== false;
-    const [preview, setPreview] = React7.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("/")) {
@@ -1187,330 +1570,123 @@ var NavLink = React7.forwardRef(
     const handleClick = (e) => {
       onClick?.(e);
       setPreview((prev) => ({ ...prev, visible: false }));
-      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        return;
-      }
-      if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
-        e.preventDefault();
-        React7.startTransition(() => {
-          navigate(localizedTo);
-        });
-      }
-    };
-    return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-      /* @__PURE__ */ jsx15(
-        RouterNavLink,
-        {
-          ref,
-          to: localizedTo,
-          onMouseEnter: handleMouseEnter,
-          onMouseMove: handleMouseMove,
-          onMouseLeave: handleMouseLeave,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onClick: handleClick,
-          ...rest
-        }
-      ),
-      shouldShowPreview && /* @__PURE__ */ jsx15(
-        LinkPreview,
-        {
-          isVisible: preview.visible,
-          title: preview.title,
-          summary: preview.summary,
-          x: preview.x,
-          y: preview.y
-        }
-      )
-    ] });
-  }
-);
-NavLink.displayName = "NavLink";
-
-// src/client/theme/ui/Navbar/Navbar.tsx
-import { ChevronDown as ChevronDown3 } from "lucide-react";
-
-// src/client/theme/ui/LanguageSwitcher/LanguageSwitcher.tsx
-import { useState as useState8, useRef as useRef4, useEffect as useEffect6 } from "react";
-import { Globe, ChevronDown } from "lucide-react";
-import { useNavigate as useNavigate2, useLocation as useLocation8 } from "react-router-dom";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function getBaseFilePath(filePath, version, locale) {
-  let path = filePath;
-  if (version && (path === version || path.startsWith(version + "/"))) {
-    path = path === version ? "index.md" : path.slice(version.length + 1);
-  }
-  if (locale && (path === locale || path.startsWith(locale + "/"))) {
-    path = path === locale ? "index.md" : path.slice(locale.length + 1);
-  }
-  return path;
-}
-function LanguageSwitcher({
-  i18n,
-  currentLocale,
-  allRoutes
-}) {
-  const [isOpen, setIsOpen] = useState8(false);
-  const dropdownRef = useRef4(null);
-  const navigate = useNavigate2();
-  const location = useLocation8();
-  useEffect6(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleSelect = (locale) => {
-    setIsOpen(false);
-    if (locale === currentLocale) return;
-    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
-    let targetPath = "/";
-    if (currentRoute) {
-      const baseFile = getBaseFilePath(
-        currentRoute.filePath,
-        currentRoute.version,
-        currentRoute.locale
-      );
-      const targetRoute = allRoutes.find(
-        (r) => getBaseFilePath(r.filePath, r.version, r.locale) === baseFile && (r.locale || i18n.defaultLocale) === locale && r.version === currentRoute.version
-      );
-      if (targetRoute) {
-        targetPath = targetRoute.path;
-      } else {
-        const defaultIndexRoute = allRoutes.find(
-          (r) => getBaseFilePath(r.filePath, r.version, r.locale) === "index.md" && (r.locale || i18n.defaultLocale) === locale && r.version === currentRoute.version
-        );
-        targetPath = defaultIndexRoute ? defaultIndexRoute.path : locale === i18n.defaultLocale ? currentRoute.version ? `/${currentRoute.version}` : "/" : currentRoute.version ? `/${currentRoute.version}/${locale}` : `/${locale}`;
-      }
-    } else {
-      targetPath = locale === i18n.defaultLocale ? "/" : `/${locale}`;
-    }
-    navigate(targetPath);
-  };
-  return /* @__PURE__ */ jsxs14("div", { className: "boltdocs-language-switcher", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs14(
-      "button",
-      {
-        className: "language-btn",
-        onClick: () => setIsOpen(!isOpen),
-        "aria-label": "Switch language",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        children: [
-          /* @__PURE__ */ jsx16(Globe, { size: 18 }),
-          /* @__PURE__ */ jsx16("span", { className: "language-label", children: i18n.locales[currentLocale] || currentLocale }),
-          /* @__PURE__ */ jsx16(ChevronDown, { size: 14 })
-        ]
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
       }
-    ),
-    isOpen && /* @__PURE__ */ jsx16("div", { className: "language-dropdown", children: Object.entries(i18n.locales).map(([key, label]) => /* @__PURE__ */ jsx16(
-      "button",
-      {
-        className: `language-option ${key === currentLocale ? "active" : ""}`,
-        onClick: () => handleSelect(key),
-        children: label
-      },
-      key
-    )) })
-  ] });
-}
-
-// src/client/theme/ui/VersionSwitcher/VersionSwitcher.tsx
-import { useState as useState9, useRef as useRef5, useEffect as useEffect7 } from "react";
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { useNavigate as useNavigate3, useLocation as useLocation9 } from "react-router-dom";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-function getBaseFilePath2(filePath, version, locale) {
-  let path = filePath;
-  if (version && (path === version || path.startsWith(version + "/"))) {
-    path = path === version ? "index.md" : path.slice(version.length + 1);
-  }
-  if (locale && (path === locale || path.startsWith(locale + "/"))) {
-    path = path === locale ? "index.md" : path.slice(locale.length + 1);
-  }
-  return path;
-}
-function VersionSwitcher({
-  versions,
-  currentVersion,
-  currentLocale,
-  allRoutes
-}) {
-  const [isOpen, setIsOpen] = useState9(false);
-  const dropdownRef = useRef5(null);
-  const navigate = useNavigate3();
-  const location = useLocation9();
-  useEffect7(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
+      if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
+        e.preventDefault();
+        React10.startTransition(() => {
+          navigate(localizedTo);
+        });
       }
+    };
+    return /* @__PURE__ */ jsxs16(Fragment, { children: [
+      /* @__PURE__ */ jsx22(
+        RouterNavLink,
+        {
+          ref,
+          to: localizedTo,
+          onMouseEnter: handleMouseEnter,
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onClick: handleClick,
+          ...rest
+        }
+      ),
+      preview.visible && shouldShowPreview && /* @__PURE__ */ jsx22(
+        LinkPreview,
+        {
+          isVisible: preview.visible,
+          title: preview.title,
+          summary: preview.summary,
+          x: preview.x,
+          y: preview.y
+        }
+      )
+    ] });
+  }
+);
+NavLink.displayName = "NavLink";
+
+// src/client/theme/ui/Navbar/Tabs.tsx
+import * as Icons from "lucide-react";
+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)`
+      });
     }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleSelect = (version) => {
-    setIsOpen(false);
-    if (version === currentVersion) return;
-    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
-    let targetPath = `/docs/${version}`;
-    if (currentRoute) {
-      const baseFile = getBaseFilePath2(
-        currentRoute.filePath,
-        currentRoute.version,
-        currentRoute.locale
-      );
-      const targetRoute = allRoutes.find(
-        (r) => getBaseFilePath2(r.filePath, r.version, r.locale) === baseFile && (r.version || versions.defaultVersion) === version && (currentLocale ? r.locale === currentLocale : !r.locale)
+  }, [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__ */ jsx23(
+        "span",
+        {
+          className: "tab-icon svg-icon",
+          dangerouslySetInnerHTML: { __html: iconName }
+        }
       );
-      if (targetRoute) {
-        targetPath = targetRoute.path;
-      } else {
-        const versionIndexRoute = allRoutes.find(
-          (r) => getBaseFilePath2(r.filePath, r.version, r.locale) === "index.md" && (r.version || versions.defaultVersion) === version && (currentLocale ? r.locale === currentLocale : !r.locale)
-        );
-        targetPath = versionIndexRoute ? versionIndexRoute.path : `/docs/${version}${currentLocale ? `/${currentLocale}` : ""}`;
-      }
-    }
-    navigate(targetPath);
-  };
-  return /* @__PURE__ */ jsxs15(
-    "div",
-    {
-      className: "boltdocs-version-switcher",
-      ref: dropdownRef,
-      style: { position: "relative", display: "flex", alignItems: "center" },
-      children: [
-        /* @__PURE__ */ jsxs15(
-          "button",
-          {
-            className: "navbar-version",
-            onClick: () => setIsOpen(!isOpen),
-            "aria-label": "Switch version",
-            "aria-expanded": isOpen,
-            "aria-haspopup": "listbox",
-            style: {
-              fontFamily: "inherit",
-              padding: "0.25rem 0.5rem",
-              marginLeft: "0.5rem"
-            },
-            children: [
-              /* @__PURE__ */ jsx17("span", { children: versions.versions[currentVersion] || currentVersion }),
-              /* @__PURE__ */ jsx17(ChevronDown2, { size: 14 })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx17(
-          "div",
-          {
-            className: "language-dropdown",
-            style: {
-              left: "0.5rem",
-              right: "auto",
-              minWidth: "150px",
-              top: "calc(100% + 8px)"
-            },
-            children: Object.entries(versions.versions).map(([key, label]) => /* @__PURE__ */ jsx17(
-              "button",
-              {
-                className: `language-option ${key === currentVersion ? "active" : ""}`,
-                onClick: () => handleSelect(key),
-                children: label
-              },
-              key
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/client/theme/ui/ThemeToggle/ThemeToggle.tsx
-import { useEffect as useEffect8, useState as useState10 } from "react";
-import { Sun, Moon } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-function ThemeToggle() {
-  const [theme, setTheme] = useState10("dark");
-  const [mounted, setMounted] = useState10(false);
-  useEffect8(() => {
-    setMounted(true);
-    const stored = localStorage.getItem("boltdocs-theme");
-    if (stored === "light" || stored === "dark") {
-      setTheme(stored);
-    } else {
-      const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      ).matches;
-      setTheme(prefersDark ? "dark" : "light");
     }
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      if (!localStorage.getItem("boltdocs-theme")) {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  useEffect8(() => {
-    if (!mounted) return;
-    const root = document.documentElement;
-    if (theme === "light") {
-      root.classList.add("theme-light");
-      root.dataset.theme = "light";
-    } else {
-      root.classList.remove("theme-light");
-      root.dataset.theme = "dark";
+    const LucideIcon = Icons[iconName];
+    if (LucideIcon) {
+      return /* @__PURE__ */ jsx23(LucideIcon, { size: 16, className: "tab-icon lucide-icon" });
     }
-  }, [theme, mounted]);
-  const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("boltdocs-theme", newTheme);
+    return /* @__PURE__ */ jsx23("img", { src: iconName, alt: "", className: "tab-icon img-icon" });
   };
-  if (!mounted) {
-    return /* @__PURE__ */ jsx18("button", { className: "navbar-icon-btn", "aria-label": "Toggle theme", disabled: true, children: /* @__PURE__ */ jsx18("span", { style: { width: 20, height: 20, display: "inline-block" } }) });
-  }
-  return /* @__PURE__ */ jsx18(
-    "button",
-    {
-      className: "navbar-icon-btn",
-      onClick: toggleTheme,
-      "aria-label": "Toggle theme",
-      title: `Switch to ${theme === "dark" ? "light" : "dark"} theme`,
-      children: theme === "dark" ? /* @__PURE__ */ jsx18(Sun, { size: 20 }) : /* @__PURE__ */ jsx18(Moon, { size: 20 })
-    }
-  );
+  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/icons/discord.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Discord = (props) => /* @__PURE__ */ jsx19("svg", { ...props, viewBox: "0 0 256 199", preserveAspectRatio: "xMidYMid", children: /* @__PURE__ */ jsx19(
-  "path",
-  {
-    d: "M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z",
-    fill: "currentColor"
-  }
-) });
-
-// src/client/theme/icons/twitter.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var XformerlyTwitter = (props) => /* @__PURE__ */ jsx20("svg", { ...props, fill: "none", viewBox: "0 0 1200 1227", children: /* @__PURE__ */ jsx20(
-  "path",
-  {
-    fill: "currentColor",
-    d: "M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
-  }
-) });
-
 // src/client/theme/ui/Navbar/Navbar.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
-var SearchDialog = React10.lazy(
-  () => import("./SearchDialog-J3KNRGNO.mjs").then((m) => ({ default: m.SearchDialog }))
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var SearchDialog = lazy2(
+  () => import("./SearchDialog-6Z7CUAYJ.mjs").then((m) => ({ default: m.SearchDialog }))
 );
 var ICON_MAP = {
   discord: Discord,
@@ -1523,81 +1699,123 @@ function Navbar({
   currentLocale,
   currentVersion
 }) {
+  const location = useLocation11();
+  const isHomePage = location.pathname === "/";
   const title = config.themeConfig?.title || "Boltdocs";
   const navItems = config.themeConfig?.navbar || [];
   const socialLinks = config.themeConfig?.socialLinks || [];
-  return /* @__PURE__ */ jsx21("header", { className: "boltdocs-navbar", children: /* @__PURE__ */ jsxs16("div", { className: "navbar-container", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "navbar-left", children: [
-      /* @__PURE__ */ jsx21("div", { className: "navbar-logo", children: /* @__PURE__ */ jsxs16(Link, { to: "/", children: [
-        config.themeConfig?.logo ? config.themeConfig.logo.trim().startsWith("<svg") ? /* @__PURE__ */ jsx21(
-          "span",
-          {
-            className: "navbar-logo-svg",
-            dangerouslySetInnerHTML: {
-              __html: config.themeConfig.logo
-            }
-          }
-        ) : /* @__PURE__ */ jsx21(
-          "img",
-          {
-            src: config.themeConfig.logo,
-            alt: title,
-            className: "navbar-logo-img"
-          }
-        ) : null,
-        title
-      ] }) }),
-      config.versions && currentVersion && allRoutes ? /* @__PURE__ */ jsx21(
-        VersionSwitcher,
-        {
-          versions: config.versions,
-          currentVersion,
-          currentLocale,
-          allRoutes
-        }
-      ) : config.themeConfig?.version ? /* @__PURE__ */ jsxs16("div", { className: "navbar-version", children: [
-        config.themeConfig.version,
-        " ",
-        /* @__PURE__ */ jsx21(ChevronDown3, { size: 14 })
-      ] }) : null,
-      /* @__PURE__ */ jsx21("nav", { className: "navbar-links", "aria-label": "Top Navigation", children: navItems.map((item, i) => /* @__PURE__ */ jsx21(Link, { to: item.link, children: item.text }, i)) })
-    ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "navbar-right", children: [
-      /* @__PURE__ */ jsx21(
-        React10.Suspense,
-        {
-          fallback: /* @__PURE__ */ jsx21("div", { className: "navbar-search-placeholder" }),
-          children: /* @__PURE__ */ jsx21(SearchDialog, { routes: routes || [] })
-        }
-      ),
-      config.i18n && currentLocale && allRoutes && /* @__PURE__ */ jsx21(
-        LanguageSwitcher,
+  const hasTabs = !isHomePage && config.themeConfig?.tabs && config.themeConfig.tabs.length > 0;
+  const leftItems = navItems.filter((item) => item.position !== "right");
+  const rightItems = navItems.filter((item) => item.position === "right");
+  const renderNavItem = (item, i) => {
+    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__ */ jsxs18(Link2, { to: href, target: isExternal ? "_blank" : void 0, children: [
+      text,
+      isExternal && /* @__PURE__ */ jsx24("span", { className: "navbar-external-icon", children: /* @__PURE__ */ jsxs18(
+        "svg",
         {
-          i18n: config.i18n,
-          currentLocale,
-          allRoutes
+          viewBox: "0 0 24 24",
+          width: "13",
+          height: "13",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__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" })
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx21(ThemeToggle, {}),
-      config.themeConfig?.githubRepo && /* @__PURE__ */ jsx21(GithubStars, { repo: config.themeConfig.githubRepo }),
-      socialLinks.length > 0 && /* @__PURE__ */ jsx21("div", { className: "navbar-divider" }),
-      /* @__PURE__ */ jsx21("div", { className: "navbar-icons", children: socialLinks.map((link, i) => {
-        const IconComp = ICON_MAP[link.icon.toLowerCase()];
-        return /* @__PURE__ */ jsx21(
-          "a",
-          {
-            href: link.link,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "navbar-icon-btn",
-            "aria-label": link.icon,
-            children: IconComp ? /* @__PURE__ */ jsx21(IconComp, {}) : /* @__PURE__ */ jsx21("span", { children: link.icon })
-          },
-          i
-        );
-      }) })
-    ] })
-  ] }) });
+      ) })
+    ] }, i);
+  };
+  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__ */ 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",
+                  dangerouslySetInnerHTML: {
+                    __html: config.themeConfig.logo
+                  }
+                }
+              ) : /* @__PURE__ */ jsx24(
+                "img",
+                {
+                  src: config.themeConfig.logo,
+                  alt: title,
+                  className: "navbar-logo-img"
+                }
+              ) : null,
+              title
+            ] }) }),
+            config.versions && currentVersion && allRoutes ? /* @__PURE__ */ jsx24(
+              VersionSwitcher,
+              {
+                versions: config.versions,
+                currentVersion,
+                currentLocale,
+                allRoutes
+              }
+            ) : config.themeConfig?.version ? /* @__PURE__ */ jsxs18("div", { className: "navbar-version", children: [
+              config.themeConfig.version,
+              " ",
+              /* @__PURE__ */ jsx24(ChevronDown3, { size: 14 })
+            ] }) : null,
+            /* @__PURE__ */ jsx24("nav", { className: "navbar-links", "aria-label": "Top Navigation Left", children: leftItems.map(renderNavItem) })
+          ] }),
+          /* @__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,
+                currentLocale,
+                allRoutes
+              }
+            ),
+            /* @__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__ */ jsx24(
+                "a",
+                {
+                  href: link.link,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "navbar-icon-btn",
+                  "aria-label": link.icon,
+                  children: IconComp ? /* @__PURE__ */ jsx24(IconComp, {}) : /* @__PURE__ */ jsx24("span", { children: link.icon })
+                },
+                i
+              );
+            }) })
+          ] })
+        ]
+      }
+    ),
+    hasTabs && config.themeConfig?.tabs && /* @__PURE__ */ jsx24(
+      Tabs,
+      {
+        tabs: config.themeConfig.tabs,
+        routes: allRoutes || routes || []
+      }
+    )
+  ] });
 }
 
 export {