docstra 1.6.3 → 1.7.1

package/dist/client/index.js

@@ -36,6 +36,7 @@ __export(client_exports, {
   DocstraHeader: () => DocstraHeader,
   DocstraPage: () => DocstraPage,
   DocstraProvider: () => DocstraProvider,
+  DocstraSearchBox: () => DocstraSearchBox,
   DocstraSidebar: () => DocstraSidebar,
   DocstraTOC: () => DocstraTOC,
   useDocstra: () => useDocstra
@@ -46,7 +47,7 @@ module.exports = __toCommonJS(client_exports);
 var import_react2 = require("react");
 var import_react_toast_msg = require("react-toast-msg");
 
-// src/client/search-box.tsx
+// src/client/components/search-box.tsx
 var import_lucide_react = require("lucide-react");
 
 // src/utils/cn.ts
@@ -56,7 +57,7 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.default)(inputs));
 }
 
-// src/client/search-box.tsx
+// src/client/components/search-box.tsx
 var import_react = require("react");
 var import_fuse = __toESM(require("fuse.js"));
 var import_link = __toESM(require("next/link"));
@@ -80,23 +81,26 @@ function DocstraSearchBox() {
     };
   }, []);
   const fuse = (0, import_react.useMemo)(() => {
+    if (!docs || docs.length === 0) return null;
     return new import_fuse.default(docs, {
-      keys: ["frontmatter.title", "frontmatter.description", "headings", "info.slug"],
+      keys: ["data.metadata.title", "data.metadata.description"],
       threshold: 0.3
     });
   }, [docs]);
   (0, import_react.useEffect)(() => {
-    if (searchQuery) {
+    if (searchQuery && fuse) {
       const results = fuse.search(searchQuery);
       setSearchResults(results.map((r) => r.item));
+    } else if (!searchQuery) {
+      setSearchResults([]);
     }
-  }, [searchQuery]);
+  }, [searchQuery, fuse]);
   const onSearchHandler = (e) => {
     e.preventDefault();
     if (searchQuery) {
       const component = searchResults[0];
       if (component) {
-        router.push(`/docs/${component.info.slug}`);
+        router.push(`/docs/${component.slug}`);
         setSearchQuery("");
         setOpenSearchBox(false);
       }
@@ -159,18 +163,18 @@ function DocstraSearchBox() {
                   searchResults.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                     import_link.default,
                     {
-                      href: `/docs/${item.info.slug.replace("index", "")}`,
-                      onNavigate: () => {
+                      href: `/docs/${item.slug === "index" ? "" : item.slug}`,
+                      onClick: () => {
                         setOpenSearchBox(false);
                         setSearchQuery("");
                       },
                       className: "w-full hover:bg-gray-100/70 border-b border-slate-200 transition-all py-4 px-4 last:mb-2",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "font-medium", children: item.frontmatter.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm mt-1 text-gray-500", children: item.frontmatter.description })
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "font-medium", children: item.data?.metadata?.title || item.slug }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm mt-1 text-gray-500", children: item.data?.metadata?.description })
                       ]
                     },
-                    item.info.slug
+                    item.slug
                   )),
                   searchQuery && searchResults.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-gray-500 text-center py-20", children: "No results found" })
                 ]
@@ -190,8 +194,15 @@ function DocstraProvider({
   children,
   docstraConfig,
   docs,
-  pageData
+  pageData: initialPageData,
+  slug
 }) {
+  const pageData = initialPageData || (() => {
+    const normalizedSlug = Array.isArray(slug) ? slug.length === 0 ? "index" : slug.join("/") : slug || "index";
+    return docs.find((d) => d.slug === normalizedSlug);
+  })();
+  if (!pageData) {
+  }
   const [openSidebar, setOpenSidebar] = (0, import_react2.useState)(false);
   const [openSearchBox, setOpenSearchBox] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -220,7 +231,7 @@ function useDocstra() {
   return ctx;
 }
 
-// src/client/header.tsx
+// src/client/components/header.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_react3 = require("react");
 var import_link2 = __toESM(require("next/link"));
@@ -258,7 +269,7 @@ function DocstraHeader() {
   ] });
 }
 
-// src/client/sidebar.tsx
+// src/client/components/sidebar.tsx
 var import_lucide_react3 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 
@@ -269,7 +280,7 @@ function getIcon(name) {
   return Icons[name];
 }
 
-// src/client/sidebar.tsx
+// src/client/components/sidebar.tsx
 var import_link3 = __toESM(require("next/link"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DocstraSidebar() {
@@ -339,68 +350,208 @@ function DocstraSidebar() {
   ] });
 }
 
-// src/client/docs-page.tsx
+// src/client/components/docstra-toc.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_navigation3 = require("next/navigation");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DocstraPage({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "min-h-screen flex bg-white w-full", children });
+function DocstraTOC() {
+  const [activeId, setActiveId] = (0, import_react4.useState)(null);
+  const [scrollDir, setScrollDir] = (0, import_react4.useState)("down");
+  const [isScrolled, setIsScrolled] = (0, import_react4.useState)(false);
+  const [isManualClick, setIsManualClick] = (0, import_react4.useState)(false);
+  const { docstraConfig, pageData } = useDocstra();
+  const mdxFilePath = pageData?.path;
+  const headings = pageData?.data?.tableOfContents || [];
+  const lastScrollY = (0, import_react4.useRef)(0);
+  const observerRef = (0, import_react4.useRef)(null);
+  const pathname = (0, import_navigation3.usePathname)();
+  const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
+  const githubLink = `${baseUrlOfGithub}/edit/main/${mdxFilePath}`;
+  (0, import_react4.useEffect)(() => {
+    const onScroll = () => {
+      const currentY = window.scrollY;
+      setScrollDir(currentY > lastScrollY.current ? "down" : "up");
+      setIsScrolled(currentY > 100);
+      lastScrollY.current = currentY;
+    };
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const allHeadings = document.querySelectorAll(`h2[id], h3[id]`);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (isManualClick) return;
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible.length > 0) {
+          const nextActive = scrollDir === "down" ? visible[0].target.id : visible[visible.length - 1].target.id;
+          setActiveId(nextActive);
+        }
+      },
+      {
+        rootMargin: "-40% 0px -50% 0px",
+        threshold: [0, 0.2, 0.6, 1]
+      }
+    );
+    allHeadings.forEach((heading) => observer.observe(heading));
+    observerRef.current = observer;
+    return () => observer.disconnect();
+  }, [pathname, scrollDir, isManualClick]);
+  (0, import_react4.useEffect)(() => {
+    const scrolled = window.scrollY > 100;
+    !scrolled && setActiveId(headings[0]?.id);
+  }, [headings]);
+  (0, import_react4.useEffect)(() => {
+    if (!activeId) return;
+    const container = document.querySelector(".toc-scroll-container");
+    if (!container) return;
+    const activeLink = container.querySelector(`a[href="#${activeId}"]`);
+    if (!activeLink) return;
+    const containerRect = container.getBoundingClientRect();
+    const linkRect = activeLink.getBoundingClientRect();
+    const isOutOfView = linkRect.top < containerRect.top || linkRect.bottom > containerRect.bottom;
+    if (isOutOfView) {
+      activeLink.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  }, [activeId]);
+  (0, import_react4.useEffect)(() => {
+    if (!isManualClick) return;
+    const timer = setTimeout(() => setIsManualClick(false), 800);
+    return () => clearTimeout(timer);
+  }, [isManualClick]);
+  const handleClick = (id) => {
+    setActiveId(id);
+    setIsManualClick(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { className: "sticky top-18 text-sm hidden xl:block text-gray-500 shrink-0 h-[calc(100svh-72px)] w-64 border-l border-gray-200 p-6 overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "flex items-center gap-2 mb-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.TextAlignStartIcon, { className: "size-4" }),
+      "On this page"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "toc-scroll-container max-h-3/4 overflow-y-auto scrollbar-none", children: headings.map((h2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableOfContentsLink, { heading: h2, activeId, handleClick }),
+      h2.children.map((h3) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        TableOfContentsLink,
+        {
+          heading: h3,
+          activeId,
+          handleClick,
+          className: "pl-8"
+        },
+        h3.id
+      ))
+    ] }, h2.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { className: "my-6 border-gray-200" }),
+    docstraConfig.editOnGithub && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "a",
+      {
+        href: githubLink,
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-2 text-gray-400 hover:text-gray-700 transition",
+        children: [
+          "Edit this page on GitHub",
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.SquareArrowOutUpRightIcon, { className: "size-4" })
+        ]
+      }
+    ),
+    isScrolled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        onClick: () => scrollTo({ top: 0, behavior: "smooth" }),
+        className: "flex items-center cursor-pointer gap-2 mt-3 text-gray-400 hover:text-gray-700 transition",
+        children: [
+          "Scroll to top",
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ArrowUpCircleIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+}
+function TableOfContentsLink({ heading, activeId, handleClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "a",
+    {
+      href: `#${heading.id}`,
+      className: cn("border-l border-gray-200 block py-1.5 pl-4 transition-colors", className, {
+        "border-gray-800 text-gray-900 font-medium": activeId === heading.id,
+        "hover:text-gray-800 hover:border-gray-400": activeId !== heading.id
+      }),
+      onClick: () => handleClick(heading.id),
+      children: heading.text
+    }
+  );
 }
 
-// src/client/breadcrumbs.tsx
-var import_navigation3 = require("next/navigation");
-var import_lucide_react4 = require("lucide-react");
-var import_link4 = __toESM(require("next/link"));
+// src/client/components/docs-page.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function DocstraPage({ children, toc = true, sidebar = true }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-h-screen flex bg-white w-full", children: [
+    sidebar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DocstraSidebar, {}),
+    children,
+    toc && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DocstraTOC, {})
+  ] });
+}
+
+// src/client/components/breadcrumbs.tsx
+var import_navigation4 = require("next/navigation");
+var import_lucide_react5 = require("lucide-react");
+var import_link4 = __toESM(require("next/link"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DocstraBreadcrumbs() {
-  const pathname = (0, import_navigation3.usePathname)();
+  const pathname = (0, import_navigation4.usePathname)();
   const paths = pathname.split("/").filter(Boolean);
   const breadcrumbs = paths.map((segment, index) => {
     const href = "/" + paths.slice(0, index + 1).join("/");
     const title = segment.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
     return { href, title };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { "aria-label": "Breadcrumb", className: "flex text-sm items-center pb-4 text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ol", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_link4.default, { href: "/", className: "hover:text-gray-700 transition-colors font-medium", children: "Home" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { "aria-label": "Breadcrumb", className: "flex text-sm items-center pb-4 text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("ol", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link4.default, { href: "/", className: "hover:text-gray-700 transition-colors font-medium", children: "Home" }) }),
     breadcrumbs.map((crumb, index) => {
       const isLast = index === breadcrumbs.length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.ChevronRight, { className: "w-4 h-4 text-gray-400" }),
-        isLast ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-gray-600 font-medium", children: crumb.title }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_link4.default, { href: crumb.href, className: "hover:text-gray-700 font-medium transition-colors", children: crumb.title })
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.ChevronRight, { className: "w-4 h-4 text-gray-400" }),
+        isLast ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-gray-600 font-medium", children: crumb.title }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link4.default, { href: crumb.href, className: "hover:text-gray-700 font-medium transition-colors", children: crumb.title })
       ] }, crumb.href);
     })
   ] }) });
 }
 
-// src/client/page-buttons.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// src/client/components/page-buttons.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function DocstraPageButtons() {
   const { pageData } = useDocstra();
-  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
-  const [href, setHref] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
+  const [href, setHref] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     setHref(window.location.href);
   }, []);
   const prompt = `Read from this URL: ${href} and explain it to me.`;
   const handleCopy = () => {
-    navigator.clipboard.writeText(pageData?.rawContent);
+    navigator.clipboard.writeText(pageData?.data.raw || "");
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), 3e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3 mt-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 mt-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         title: "Copy Markdown",
         onClick: handleCopy,
         className: "flex items-center cursor-pointer gap-2 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-3 py-2 rounded-md text-xs",
         children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.CopyIcon, { className: "size-3.5" }),
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react6.CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react6.CopyIcon, { className: "size-3.5" }),
           "Copy Markdown"
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "a",
       {
         title: "Ask ChatGPT",
@@ -413,26 +564,26 @@ function DocstraPageButtons() {
   ] });
 }
 
-// src/client/docstra-page-head.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+// src/client/components/docstra-page-head.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function DocstraPageHead() {
   const { pageData } = useDocstra();
-  const title = pageData?.frontmatter?.title;
-  const description = pageData?.frontmatter?.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "text-3xl font-bold", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "my-4 text-gray-500", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocstraPageButtons, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "my-10 border-gray-200" })
+  const title = pageData?.data?.metadata?.title;
+  const description = pageData?.data?.metadata?.description;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-3xl font-bold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "my-4 text-gray-500", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocstraPageButtons, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: "my-10 border-gray-200" })
   ] });
 }
 
-// src/client/feedback.tsx
-var import_react5 = require("react");
-var import_lucide_react7 = require("lucide-react");
+// src/client/components/feedback.tsx
+var import_react6 = require("react");
+var import_lucide_react8 = require("lucide-react");
 
-// src/client/input.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+// src/client/components/input.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Input({
   label,
   type,
@@ -445,12 +596,12 @@ function Input({
   className = "",
   optional = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex flex-col mt-4 w-full", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, className: "font-medium w-max cursor-pointer", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col mt-4 w-full", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: id, className: "font-medium w-max cursor-pointer", children: [
       label,
-      optional && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-normal text-gray-400 ml-1 mt-1", children: "(Optional)" })
+      optional && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-normal text-gray-400 ml-1 mt-1", children: "(Optional)" })
     ] }),
-    type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "textarea",
       {
         id,
@@ -466,7 +617,7 @@ function Input({
         value,
         readOnly
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
         type,
@@ -483,11 +634,11 @@ function Input({
   ] });
 }
 
-// src/client/button.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+// src/client/components/button.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Button({ label, loading, type = "submit", className = "", disabled = false, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "button",
     {
       type,
@@ -498,21 +649,21 @@ function Button({ label, loading, type = "submit", className = "", disabled = fa
       ),
       "aria-label": label,
       onClick,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Loader2Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin mx-auto" }) : label
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Loader2Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin mx-auto" }) : label
     }
   );
 }
 
-// src/client/feedback.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// src/client/components/feedback.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DocstraFeedback() {
-  const [opinion, setOpinion] = (0, import_react5.useState)(null);
+  const [opinion, setOpinion] = (0, import_react6.useState)(null);
   const { docstraConfig } = useDocstra();
-  const [message, setMessage] = (0, import_react5.useState)("");
-  const [submitted, setSubmitted] = (0, import_react5.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "border-y border-gray-200 mt-20 py-10 space-y-4", children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium text-gray-900", children: "Thank you for your feedback!" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const [message, setMessage] = (0, import_react6.useState)("");
+  const [submitted, setSubmitted] = (0, import_react6.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "border-y border-gray-200 mt-20 py-10 space-y-4", children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium text-gray-900", children: "Thank you for your feedback!" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Button,
       {
         onClick: () => {
@@ -524,28 +675,28 @@ function DocstraFeedback() {
         className: "w-max text-sm"
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: "How is this guide?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium", children: "How is this guide?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "button",
         {
           onClick: () => setOpinion("good"),
           className: `flex items-center cursor-pointer gap-1 px-3 py-2 rounded-full border text-sm ${opinion === "good" ? "bg-green-100 text-green-600 border-green-300" : "border-gray-200 text-gray-600 hover:bg-gray-100"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.ThumbsUp, { className: `size-4 ${opinion === "good" ? "fill-green-600" : "text-gray-500"}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ThumbsUp, { className: `size-4 ${opinion === "good" ? "fill-green-600" : "text-gray-500"}` }),
             "Good"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "button",
         {
           onClick: () => setOpinion("bad"),
           className: `flex items-center cursor-pointer gap-1 px-3 py-2 rounded-full border text-sm ${opinion === "bad" ? "bg-red-100 text-red-600 border-red-300" : "border-gray-200 text-gray-600 hover:bg-gray-100"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_lucide_react7.ThumbsDown,
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_lucide_react8.ThumbsDown,
               {
                 className: `size-4 pt-0.5 ${opinion === "bad" ? "fill-red-600" : "text-gray-500"}`
               }
@@ -555,14 +706,14 @@ function DocstraFeedback() {
         }
       )
     ] }),
-    opinion && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    opinion && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "form",
       {
         className: "flex flex-col gap-2",
         action: `https://formsync.app/v1/s/${docstraConfig?.feedback?.formSyncFormID || ""}`,
         method: "POST",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Input,
             {
               value: message,
@@ -573,14 +724,14 @@ function DocstraFeedback() {
               type: "textarea"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "hidden", name: "opinion", value: opinion }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "hidden", name: "page", value: window.location.href }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "hidden", name: "_redirect", value: window.location.href }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { label: "Submit", className: "w-max text-sm" }),
-          docstraConfig?.feedback?.watermark !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-left text-sm text-gray-500 mt-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name: "opinion", value: opinion }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name: "page", value: window.location.href }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name: "_redirect", value: window.location.href }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { label: "Submit", className: "w-max text-sm" }),
+          docstraConfig?.feedback?.watermark !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-left text-sm text-gray-500 mt-6", children: [
             "Powered by",
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "a",
               {
                 href: `https://www.formsync.app?utm_source=${docstraConfig?.githubRepo}`,
@@ -595,243 +746,75 @@ function DocstraFeedback() {
   ] }) });
 }
 
-// src/client/pagination.tsx
-var import_navigation4 = require("next/navigation");
+// src/client/components/pagination.tsx
+var import_navigation5 = require("next/navigation");
 var import_link5 = __toESM(require("next/link"));
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DocstraPagination() {
-  const pathname = (0, import_navigation4.usePathname)();
+  const pathname = (0, import_navigation5.usePathname)();
   const { docstraConfig } = useDocstra();
   const flatLinks = docstraConfig?.sidebar?.links?.flatMap((section) => section.items);
   const currentIndex = flatLinks.findIndex((item) => item.href === pathname);
   const prev = currentIndex > 0 ? flatLinks[currentIndex - 1] : null;
   const next = currentIndex < flatLinks.length - 1 ? flatLinks[currentIndex + 1] : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col md:flex-row gap-2 justify-between py-10 mt-10", children: [
-    prev ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col md:flex-row gap-2 justify-between py-10 mt-10", children: [
+    prev ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_link5.default,
       {
         href: prev.href,
         className: "flex flex-col items-start gap-2 border border-gray-200 hover:bg-gray-50 py-3 md:min-w-62 pl-4 pr-10 rounded-lg text-sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-gray-500", children: "Previous" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "flex items-center font-medium", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowLeftIcon, { className: "size-5 mr-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-500", children: "Previous" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "flex items-center font-medium", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.ArrowLeftIcon, { className: "size-5 mr-2" }),
             prev.name
           ] })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {}),
-    next ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {}),
+    next ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_link5.default,
       {
         href: next.href,
         className: "flex flex-col items-end gap-2 border border-gray-200 hover:bg-gray-50 py-3 pr-4 md:min-w-62 pl-10 rounded-lg text-sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-gray-500", children: "Next" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "flex items-center font-medium", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-500", children: "Next" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "flex items-center font-medium", children: [
             next.name,
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowRightIcon, { className: "size-5 ml-2" })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.ArrowRightIcon, { className: "size-5 ml-2" })
           ] })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {})
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {})
   ] });
 }
 
-// src/client/docs-body.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// src/client/components/docs-body.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DocstraBody({ children }) {
   const { docstraConfig } = useDocstra();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("main", { className: "flex-1 px-4 md:px-8 py-10 max-w-full text-base/7", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocstraBreadcrumbs, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocstraPageHead, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("main", { className: "flex-1 px-4 md:px-8 py-10 max-w-full text-base/7", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocstraBreadcrumbs, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocstraPageHead, {}),
     children,
-    docstraConfig?.feedback?.enabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocstraFeedback, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocstraPagination, {})
+    docstraConfig?.feedback?.enabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocstraFeedback, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocstraPagination, {})
   ] });
 }
 
-// src/client/docstra-toc.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_navigation5 = require("next/navigation");
-var import_react6 = require("react");
-
-// src/utils/generate-id-from-text.ts
-function generateIdFromText(text) {
-  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-}
-
-// src/utils/extract-headings-from-mdx.ts
-function extractHeadingsFromMdx(raw) {
-  const lines = raw.split("\n");
-  const results = [];
-  let currentH2 = null;
-  for (let line of lines) {
-    line = line.trim();
-    const h2Match = line.match(/^##\s+(.*)/);
-    const h3Match = line.match(/^###\s+(.*)/);
-    if (h2Match) {
-      const text = h2Match[1].trim();
-      const id = generateIdFromText(text);
-      currentH2 = { id, text, children: [] };
-      results.push(currentH2);
-    }
-    if (h3Match && currentH2) {
-      const text = h3Match[1].trim();
-      const id = generateIdFromText(text);
-      currentH2.children.push({ id, text });
-    }
-  }
-  return results;
-}
-
-// src/client/docstra-toc.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function DocstraTOC() {
-  const [headings, setHeadings] = (0, import_react6.useState)([]);
-  const [activeId, setActiveId] = (0, import_react6.useState)(null);
-  const [scrollDir, setScrollDir] = (0, import_react6.useState)("down");
-  const [isScrolled, setIsScrolled] = (0, import_react6.useState)(false);
-  const [isManualClick, setIsManualClick] = (0, import_react6.useState)(false);
-  const { docstraConfig, pageData } = useDocstra();
-  const mdxFilePath = pageData?.info.fullPath;
-  const rawMdxContent = pageData?.content;
-  const lastScrollY = (0, import_react6.useRef)(0);
-  const observerRef = (0, import_react6.useRef)(null);
-  const pathname = (0, import_navigation5.usePathname)();
-  const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra";
-  const githubLink = `${baseUrlOfGithub}/edit/main/${mdxFilePath}`;
-  (0, import_react6.useEffect)(() => {
-    const onScroll = () => {
-      const currentY = window.scrollY;
-      setScrollDir(currentY > lastScrollY.current ? "down" : "up");
-      setIsScrolled(currentY > 100);
-      lastScrollY.current = currentY;
-    };
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    const structured = extractHeadingsFromMdx(rawMdxContent);
-    setHeadings(structured);
-  }, [rawMdxContent]);
-  (0, import_react6.useEffect)(() => {
-    const allHeadings = document.querySelectorAll(`h2[id], h3[id]`);
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (isManualClick) return;
-        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
-        if (visible.length > 0) {
-          const nextActive = scrollDir === "down" ? visible[0].target.id : visible[visible.length - 1].target.id;
-          setActiveId(nextActive);
-        }
-      },
-      {
-        rootMargin: "-40% 0px -50% 0px",
-        threshold: [0, 0.2, 0.6, 1]
-      }
-    );
-    allHeadings.forEach((heading) => observer.observe(heading));
-    observerRef.current = observer;
-    return () => observer.disconnect();
-  }, [pathname, scrollDir, isManualClick]);
-  (0, import_react6.useEffect)(() => {
-    const scrolled = window.scrollY > 100;
-    !scrolled && setActiveId(headings[0]?.id);
-  }, [headings]);
-  (0, import_react6.useEffect)(() => {
-    if (!activeId) return;
-    const container = document.querySelector(".toc-scroll-container");
-    if (!container) return;
-    const activeLink = container.querySelector(`a[href="#${activeId}"]`);
-    if (!activeLink) return;
-    const containerRect = container.getBoundingClientRect();
-    const linkRect = activeLink.getBoundingClientRect();
-    const isOutOfView = linkRect.top < containerRect.top || linkRect.bottom > containerRect.bottom;
-    if (isOutOfView) {
-      activeLink.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest"
-      });
-    }
-  }, [activeId]);
-  (0, import_react6.useEffect)(() => {
-    if (!isManualClick) return;
-    const timer = setTimeout(() => setIsManualClick(false), 800);
-    return () => clearTimeout(timer);
-  }, [isManualClick]);
-  const handleClick = (id) => {
-    setActiveId(id);
-    setIsManualClick(true);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("aside", { className: "sticky top-18 text-sm hidden xl:block text-gray-500 shrink-0 h-[calc(100svh-72px)] w-64 border-l border-gray-200 p-6 overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex items-center gap-2 mb-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.TextAlignStartIcon, { className: "size-4" }),
-      "On this page"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "toc-scroll-container max-h-3/4 overflow-y-auto scrollbar-none", children: headings.map((h2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableOfContentsLink, { heading: h2, activeId, handleClick }),
-      h2.children.map((h3) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        TableOfContentsLink,
-        {
-          heading: h3,
-          activeId,
-          handleClick,
-          className: "pl-8"
-        },
-        h3.id
-      ))
-    ] }, h2.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", { className: "my-6 border-gray-200" }),
-    docstraConfig.editOnGithub && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "a",
-      {
-        href: githubLink,
-        rel: "noopener noreferrer",
-        className: "flex items-center gap-2 text-gray-400 hover:text-gray-700 transition",
-        children: [
-          "Edit this page on GitHub",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.SquareArrowOutUpRightIcon, { className: "size-4" })
-        ]
-      }
-    ),
-    isScrolled && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "button",
-      {
-        onClick: () => scrollTo({ top: 0, behavior: "smooth" }),
-        className: "flex items-center gap-2 mt-3 text-gray-400 hover:text-gray-700 transition",
-        children: [
-          "Scroll to top",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.ArrowUpCircleIcon, { className: "size-4" })
-        ]
-      }
-    )
-  ] });
-}
-function TableOfContentsLink({ heading, activeId, handleClick, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "a",
-    {
-      href: `#${heading.id}`,
-      className: cn("border-l border-gray-200 block py-1.5 pl-4 transition-colors", className, {
-        "border-gray-800 text-gray-900 font-medium": activeId === heading.id,
-        "hover:text-gray-800 hover:border-gray-400": activeId !== heading.id
-      }),
-      onClick: () => handleClick(heading.id),
-      children: heading.text
-    }
-  );
-}
-
-// src/client/code-block.tsx
+// src/client/components/code-block.tsx
 var import_react7 = require("react");
 var import_prism_react_renderer = require("prism-react-renderer");
 var import_lucide_react10 = require("lucide-react");
 var import_react_toast_msg2 = require("react-toast-msg");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function DocstraCodeBlock(props) {
-  const { language, title, children } = props;
+  const { title, children } = props;
+  const childProps = children?.props || {};
+  const className = childProps.className || "";
+  const matches = className.match(/language-(?<lang>.*)/);
+  const language = props.language || matches && matches.groups && matches.groups.lang || "text";
   const code = typeof children === "string" ? children.trim() : children?.props?.children?.toString()?.trim() || "";
   const [copied, setCopied] = (0, import_react7.useState)(false);
   const handleCopy = () => {
@@ -867,6 +850,7 @@ function DocstraCodeBlock(props) {
   DocstraHeader,
   DocstraPage,
   DocstraProvider,
+  DocstraSearchBox,
   DocstraSidebar,
   DocstraTOC,
   useDocstra