docstra 0.1.0 → 1.0.0

package/dist/client/index.mjs

@@ -0,0 +1,781 @@
+"use client";
+
+// src/context/docstra-context.tsx
+import { createContext, useContext, useState as useState2 } from "react";
+import { ToastContainer } from "react-toast-msg";
+
+// src/client/search-box.tsx
+import { SearchIcon } from "lucide-react";
+
+// src/utils/cn.ts
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/client/search-box.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DocstraSearchBox() {
+  const { openSearchBox, setOpenSearchBox } = useDocstra();
+  const [searchQuery, setSearchQuery] = useState("");
+  useEffect(() => {
+    console.log(`Search query: ${searchQuery}`);
+  }, [searchQuery]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.ctrlKey && event.key === "k") {
+        event.preventDefault();
+        setOpenSearchBox(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: () => {
+        setOpenSearchBox(false);
+        setSearchQuery("");
+      },
+      className: cn(
+        "fixed inset-0 z-25 flex items-start justify-center bg-white/40 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300",
+        openSearchBox && "opacity-100 pointer-events-auto"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          className: "flex flex-col items-center mt-30 max-w-lg w-full max-md:px-4",
+          children: /* @__PURE__ */ jsx(
+            "form",
+            {
+              className: cn(
+                "relative flex items-center justify-between w-full bg-white border border-slate-200 text-gray-400 h-15 p-0.5 rounded-md"
+                // searchQuery && "rounded-b-none border-b-0"
+              ),
+              children: openSearchBox && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "size-5.5 mx-3 shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",
+                    type: "text",
+                    placeholder: "Search components",
+                    spellCheck: "false",
+                    autoFocus: true,
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    name: "searchQuery",
+                    required: true
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "h-4.5 shrink-0 w-auto mr-3",
+                    width: "29",
+                    height: "18",
+                    viewBox: "0 0 29 18",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M13.5 2.25a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 1 0 2.25-2.25h-9a2.25 2.25 0 1 0 2.25 2.25v-9A2.25 2.25 0 1 0 4.5 6.75h9a2.25 2.25 0 0 0 0-4.5",
+                          stroke: "#99A1AF",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M25.986 14 21.45 8.89l4.438-4.69h2.058l-4.9 5.096v-.882L28.086 14zm-5.922 0V4.2h1.61V14z",
+                          fill: "#99A1AF"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/context/docstra-context.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DocstraContext = createContext(null);
+function DocstraProvider({
+  children,
+  docstraConfig
+}) {
+  const [openSidebar, setOpenSidebar] = useState2(false);
+  const [openSearchBox, setOpenSearchBox] = useState2(false);
+  return /* @__PURE__ */ jsxs2(
+    DocstraContext.Provider,
+    {
+      value: {
+        openSidebar,
+        setOpenSidebar,
+        docstraConfig,
+        openSearchBox,
+        setOpenSearchBox
+      },
+      children: [
+        /* @__PURE__ */ jsx2(ToastContainer, {}),
+        /* @__PURE__ */ jsx2(DocstraSearchBox, {}),
+        children
+      ]
+    }
+  );
+}
+function useDocstra() {
+  const ctx = useContext(DocstraContext);
+  if (!ctx) throw new Error("Please wrap your app with DocstraProvider");
+  return ctx;
+}
+
+// src/client/header.tsx
+import { TextAlignEnd, XIcon } from "lucide-react";
+import { useEffect as useEffect2 } from "react";
+
+// src/client/link.tsx
+import LinkComponent from "next/link";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Link({ href, children, className, onNavigate, ...props }) {
+  if (href.startsWith("http")) {
+    return /* @__PURE__ */ jsx3("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return /* @__PURE__ */ jsx3(LinkComponent, { href, className, onNavigate, ...props, "aria-label": "Ns", children });
+}
+
+// src/client/header.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DocstraHeader() {
+  const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
+  useEffect2(() => {
+    if (openSidebar) {
+      document.body.classList.add("max-md:overflow-hidden");
+    } else {
+      document.body.classList.remove("max-md:overflow-hidden");
+    }
+  }, [openSidebar]);
+  return /* @__PURE__ */ jsxs3("header", { className: "sticky top-0 z-10 text-sm flex items-center justify-between border-b border-gray-100 h-18 px-4 md:px-6 bg-white", children: [
+    /* @__PURE__ */ jsx4(Link, { href: docstraConfig.navbar?.logo?.link || "/", children: /* @__PURE__ */ jsx4(
+      "img",
+      {
+        src: docstraConfig.navbar?.logo?.src || "/logo.png",
+        alt: docstraConfig.navbar?.logo?.alt || "Logo",
+        className: cn("h-9.5 w-auto", docstraConfig.navbar?.logo?.className)
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "hidden divide-x divide-gray-200 md:flex items-center", children: [
+      docstraConfig.navbar?.links?.map((link) => /* @__PURE__ */ jsx4(Link, { href: link.href, className: "px-6 hover:text-gray-500", children: link.name }, link.name)),
+      /* @__PURE__ */ jsx4(Link, { href: docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra", children: /* @__PURE__ */ jsx4("svg", { className: "size-6 mx-6", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { d: "M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => setOpenSidebar(!openSidebar),
+        className: "md:hidden transition text-gray-600 active:ring-2 ring-gray-200 p-1.5 rounded-md",
+        children: openSidebar ? /* @__PURE__ */ jsx4(XIcon, { className: "size-6.5" }) : /* @__PURE__ */ jsx4(TextAlignEnd, { className: "size-6.5" })
+      }
+    )
+  ] });
+}
+
+// src/client/sidebar.tsx
+import { SearchIcon as SearchIcon2 } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+// src/utils/get-icon.ts
+import * as Icons from "lucide-react";
+function getIcon(name) {
+  if (!name) return void 0;
+  return Icons[name];
+}
+
+// src/client/sidebar.tsx
+import { toast } from "react-toast-msg";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DocstraSidebar() {
+  const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
+  const pathname = usePathname();
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-20 bg-black/50 opacity-0 pointer-events-none transition-all duration-300",
+          openSidebar && "opacity-100 pointer-events-auto"
+        ),
+        onClick: () => setOpenSidebar(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "aside",
+      {
+        className: cn(
+          "sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen z-21 md:w-72 pb-10 text-base md:text-sm shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",
+          openSidebar ? "top-32" : "top-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "flex items-center gap-2 cursor-pointer mt-6 mb-4 p-2.5 text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50",
+              onClick: () => toast.success("Docstra: Search is coming soon!"),
+              children: [
+                /* @__PURE__ */ jsx5(SearchIcon2, { className: "size-4.5" }),
+                /* @__PURE__ */ jsx5("p", { children: "Search" }),
+                /* @__PURE__ */ jsxs4("div", { className: "ms-auto font-mono inline-flex gap-0.5", children: [
+                  /* @__PURE__ */ jsx5("span", { className: "rounded-md border border-gray-200 px-1.5", children: "Ctrl" }),
+                  /* @__PURE__ */ jsx5("span", { className: "rounded-md border border-gray-200 px-1.5", children: "K" })
+                ] })
+              ]
+            }
+          ),
+          docstraConfig.sidebar?.links?.map((group) => /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx5("p", { className: "inline-flex items-center gap-2 mb-2 mt-2 px-2", children: group.section }),
+            /* @__PURE__ */ jsx5("ul", { className: "mb-4", children: group.items.map((link) => {
+              const Icon = getIcon(link.icon);
+              return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs4(
+                Link,
+                {
+                  href: link.href,
+                  onNavigate: () => openSidebar && setOpenSidebar(false),
+                  className: cn(
+                    "flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg text-sm",
+                    pathname === link.href && "bg-gray-100 text-gray-800"
+                  ),
+                  children: [
+                    Icon && /* @__PURE__ */ jsx5(Icon, { className: "size-4" }),
+                    /* @__PURE__ */ jsx5("span", { children: link.name })
+                  ]
+                }
+              ) }, link.href);
+            }) })
+          ] }, group.section))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/client/docs-page.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DocstraPage({ children }) {
+  return /* @__PURE__ */ jsx6("div", { className: "min-h-screen flex bg-white w-full", children });
+}
+
+// src/client/breadcrumbs.tsx
+import { usePathname as usePathname2 } from "next/navigation";
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function DocstraBreadcrumbs() {
+  const pathname = usePathname2();
+  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__ */ jsx7("nav", { "aria-label": "Breadcrumb", className: "flex text-sm items-center pb-4 text-gray-500", children: /* @__PURE__ */ jsxs5("ol", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(Link, { href: "/", className: "hover:text-gray-700 transition-colors font-medium", children: "Home" }) }),
+    breadcrumbs.map((crumb, index) => {
+      const isLast = index === breadcrumbs.length - 1;
+      return /* @__PURE__ */ jsxs5("li", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx7(ChevronRight, { className: "w-4 h-4 text-gray-400" }),
+        isLast ? /* @__PURE__ */ jsx7("span", { className: "text-gray-600 font-medium", children: crumb.title }) : /* @__PURE__ */ jsx7(Link, { href: crumb.href, className: "hover:text-gray-700 font-medium transition-colors", children: crumb.title })
+      ] }, crumb.href);
+    })
+  ] }) });
+}
+
+// src/client/page-buttons.tsx
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { usePathname as usePathname3 } from "next/navigation";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocstraPageButtons({ rawMdxContent }) {
+  const [isCopied, setIsCopied] = useState3(false);
+  const [href, setHref] = useState3(null);
+  const pathname = usePathname3();
+  useEffect3(() => {
+    setHref(window.location.href);
+  }, []);
+  const prompt = `Read from this URL: ${href + pathname} and explain it to me.`;
+  const handleCopy = () => {
+    navigator.clipboard.writeText(rawMdxContent);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 3e3);
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 mt-6", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        title: "Copy Markdown",
+        onClick: handleCopy,
+        className: "flex items-center gap-2 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-3 py-2 rounded-md text-xs",
+        children: [
+          isCopied ? /* @__PURE__ */ jsx8(CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx8(CopyIcon, { className: "size-3.5" }),
+          "Copy Markdown"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "a",
+      {
+        title: "Ask ChatGPT",
+        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`,
+        className: "flex items-center gap-2 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-3 py-2 rounded-md text-xs",
+        rel: "noreferrer noopener",
+        children: "Ask ChatGPT"
+      }
+    )
+  ] });
+}
+
+// src/client/docstra-page-head.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function DocstraPageHead({ metadata, mdxContent }) {
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx9("h1", { className: "text-3xl font-bold", children: metadata.title }),
+    /* @__PURE__ */ jsx9("p", { className: "my-4 text-gray-500", children: metadata.description }),
+    /* @__PURE__ */ jsx9(DocstraPageButtons, { rawMdxContent: mdxContent }),
+    /* @__PURE__ */ jsx9("hr", { className: "my-10 border-gray-200" })
+  ] });
+}
+
+// src/client/feedback.tsx
+import { useState as useState4 } from "react";
+import { ThumbsUp, ThumbsDown } from "lucide-react";
+
+// src/client/input.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Input({
+  label,
+  type,
+  placeholder = "",
+  id,
+  required = false,
+  onChange,
+  value,
+  readOnly = false,
+  className = "",
+  optional = false
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col mt-4 w-full", className), children: [
+    label && /* @__PURE__ */ jsxs8("label", { htmlFor: id, className: "font-medium w-max cursor-pointer", children: [
+      label,
+      optional && /* @__PURE__ */ jsx10("span", { className: "text-xs font-normal text-gray-400 ml-1 mt-1", children: "(Optional)" })
+    ] }),
+    type === "textarea" ? /* @__PURE__ */ jsx10(
+      "textarea",
+      {
+        id,
+        name: id,
+        className: cn(
+          "mt-2 w-full p-3 border border-gray-300 resize-none not-focus:hover:border-gray-500 read-only:text-gray-400/80 outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200 rounded-lg",
+          className
+        ),
+        placeholder,
+        required,
+        onChange,
+        rows: 4,
+        value,
+        readOnly
+      }
+    ) : /* @__PURE__ */ jsx10(
+      "input",
+      {
+        type,
+        id,
+        name: id,
+        className: "mt-2 w-full h-12 px-3 border border-gray-300 not-focus:hover:border-gray-500 read-only:text-gray-400/80 outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200 rounded-lg",
+        placeholder,
+        required,
+        onChange,
+        value,
+        readOnly
+      }
+    )
+  ] });
+}
+
+// src/client/button.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Button({ label, loading, type = "submit", className = "", disabled = false, onClick }) {
+  return /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type,
+      disabled,
+      className: cn(
+        "relative w-full mt-4 h-12 px-6 py-3 font-medium bg-gray-900 hover:opacity-85 text-white rounded-lg",
+        className
+      ),
+      "aria-label": label,
+      onClick,
+      children: loading ? /* @__PURE__ */ jsx11(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
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function DocstraFeedback() {
+  const [opinion, setOpinion] = useState4(null);
+  const { docstraConfig } = useDocstra();
+  const [message, setMessage] = useState4("");
+  const [submitted, setSubmitted] = useState4(false);
+  return /* @__PURE__ */ jsx12("div", { className: "border-y border-gray-200 mt-20 py-10 space-y-4", children: submitted ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("p", { className: "font-medium text-gray-900", children: "Thank you for your feedback!" }),
+    /* @__PURE__ */ jsx12(
+      Button,
+      {
+        onClick: () => {
+          setSubmitted(false);
+          setOpinion(null);
+          setMessage("");
+        },
+        label: "Submit Again",
+        className: "w-max text-sm"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("p", { className: "font-medium", children: "How is this guide?" }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          onClick: () => setOpinion("good"),
+          className: `flex items-center 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__ */ jsx12(ThumbsUp, { className: `size-4 ${opinion === "good" ? "fill-green-600" : "text-gray-500"}` }),
+            "Good"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          onClick: () => setOpinion("bad"),
+          className: `flex items-center 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__ */ jsx12(
+              ThumbsDown,
+              {
+                className: `size-4 pt-0.5 ${opinion === "bad" ? "fill-red-600" : "text-gray-500"}`
+              }
+            ),
+            "Bad"
+          ]
+        }
+      )
+    ] }),
+    opinion && /* @__PURE__ */ jsxs9(
+      "form",
+      {
+        className: "flex flex-col gap-2",
+        action: `https://formsync.app/v1/s/${docstraConfig?.formSyncFormID || "your-form-id"}`,
+        method: "POST",
+        children: [
+          /* @__PURE__ */ jsx12(
+            Input,
+            {
+              value: message,
+              id: "message",
+              onChange: (e) => setMessage(e.target.value),
+              placeholder: "Leave your feedback...",
+              required: true,
+              type: "textarea"
+            }
+          ),
+          /* @__PURE__ */ jsx12("input", { type: "hidden", name: "opinion", value: opinion }),
+          /* @__PURE__ */ jsx12("input", { type: "hidden", name: "page", value: window.location.href }),
+          /* @__PURE__ */ jsx12("input", { type: "hidden", name: "_redirect", value: window.location.href }),
+          /* @__PURE__ */ jsx12(Button, { label: "Submit", className: "w-max text-sm" }),
+          /* @__PURE__ */ jsxs9("p", { className: "text-left text-sm text-gray-500 mt-6", children: [
+            "Powered by",
+            " ",
+            /* @__PURE__ */ jsx12("a", { href: "https://www.formsync.app?utm_source=formsync-docs", className: "text-gray-800", children: "FormSync" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/client/pagination.tsx
+import { usePathname as usePathname4 } from "next/navigation";
+import Link2 from "next/link";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function DocstraPagination() {
+  const pathname = usePathname4();
+  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__ */ jsxs10("div", { className: "flex flex-col md:flex-row gap-2 justify-between py-10 mt-10", children: [
+    prev ? /* @__PURE__ */ jsxs10(
+      Link2,
+      {
+        href: prev.href,
+        className: "flex flex-col items-start gap-2 hover:bg-gray-100 py-3 md:min-w-52 pl-4 pr-10 rounded-lg text-sm",
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-gray-500", children: "Previous" }),
+          /* @__PURE__ */ jsxs10("p", { className: "flex items-center font-medium", children: [
+            /* @__PURE__ */ jsx13(ArrowLeftIcon, { className: "size-5 mr-2" }),
+            prev.name
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx13("div", {}),
+    next ? /* @__PURE__ */ jsxs10(
+      Link2,
+      {
+        href: next.href,
+        className: "flex flex-col items-end gap-2 hover:bg-gray-100 py-3 pr-4 md:min-w-52 pl-10 rounded-lg text-sm",
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-gray-500", children: "Next" }),
+          /* @__PURE__ */ jsxs10("p", { className: "flex items-center font-medium", children: [
+            next.name,
+            /* @__PURE__ */ jsx13(ArrowRightIcon, { className: "size-5 ml-2" })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx13("div", {})
+  ] });
+}
+
+// src/client/docs-body.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function DocstraBody({ children, metadata, mdxContent }) {
+  return /* @__PURE__ */ jsxs11("main", { className: "flex-1 px-4 md:px-8 py-10 max-w-full text-base/7", children: [
+    /* @__PURE__ */ jsx14(DocstraBreadcrumbs, {}),
+    /* @__PURE__ */ jsx14(DocstraPageHead, { metadata, mdxContent }),
+    children,
+    /* @__PURE__ */ jsx14(DocstraFeedback, {}),
+    /* @__PURE__ */ jsx14(DocstraPagination, {})
+  ] });
+}
+
+// src/client/docstra-toc.tsx
+import { ArrowUpCircleIcon, SquareArrowOutUpRightIcon, TextAlignStartIcon } from "lucide-react";
+import { usePathname as usePathname5 } from "next/navigation";
+import { useEffect as useEffect4, useRef, useState as useState5 } from "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
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function DocstraTOC({ mdxFilePath, rawMdxContent }) {
+  const [headings, setHeadings] = useState5([]);
+  const [activeId, setActiveId] = useState5(null);
+  const [scrollDir, setScrollDir] = useState5("down");
+  const [isScrolled, setIsScrolled] = useState5(false);
+  const [isManualClick, setIsManualClick] = useState5(false);
+  const { docstraConfig } = useDocstra();
+  const lastScrollY = useRef(0);
+  const observerRef = useRef(null);
+  const pathname = usePathname5();
+  const baseUrlOfGithub = docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra/edit/main";
+  const githubLink = baseUrlOfGithub + mdxFilePath.split("app")[1];
+  useEffect4(() => {
+    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);
+  }, []);
+  useEffect4(() => {
+    const structured = extractHeadingsFromMdx(rawMdxContent);
+    setHeadings(structured);
+  }, [rawMdxContent]);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    const scrolled = window.scrollY > 100;
+    !scrolled && setActiveId(headings[0]?.id);
+  }, [headings]);
+  useEffect4(() => {
+    if (!isManualClick) return;
+    const timer = setTimeout(() => setIsManualClick(false), 800);
+    return () => clearTimeout(timer);
+  }, [isManualClick]);
+  const handleClick = (id) => {
+    setActiveId(id);
+    setIsManualClick(true);
+  };
+  return /* @__PURE__ */ jsxs12("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__ */ jsxs12("p", { className: "flex items-center gap-2 mb-5", children: [
+      /* @__PURE__ */ jsx15(TextAlignStartIcon, { className: "size-4" }),
+      "On this page"
+    ] }),
+    /* @__PURE__ */ jsx15("ul", { children: headings.map((h2) => /* @__PURE__ */ jsxs12("li", { children: [
+      /* @__PURE__ */ jsx15(TableOfContentsLink, { heading: h2, activeId, handleClick }),
+      h2.children.map((h3) => /* @__PURE__ */ jsx15(
+        TableOfContentsLink,
+        {
+          heading: h3,
+          activeId,
+          handleClick,
+          className: "pl-8"
+        },
+        h3.id
+      ))
+    ] }, h2.id)) }),
+    /* @__PURE__ */ jsx15("hr", { className: "my-6 border-gray-200" }),
+    docstraConfig.editOnGithub && /* @__PURE__ */ jsxs12(
+      "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__ */ jsx15(SquareArrowOutUpRightIcon, { className: "size-4" })
+        ]
+      }
+    ),
+    isScrolled && /* @__PURE__ */ jsxs12(
+      "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__ */ jsx15(ArrowUpCircleIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+}
+function TableOfContentsLink({ heading, activeId, handleClick, className }) {
+  return /* @__PURE__ */ jsx15(
+    "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
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { CheckIcon as CheckIcon2, CopyIcon as CopyIcon2 } from "lucide-react";
+import { toast as toast2 } from "react-toast-msg";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function DocstraCodeBlock(props) {
+  const { className, children } = props.children?.props || props;
+  if (!className || !className.startsWith("language-")) {
+    return /* @__PURE__ */ jsx16("code", { className: "px-1 py-0.5 rounded border border-gray-200 text-gray-800 text-sm", children });
+  }
+  const language = className.replace("language-", "") || "text";
+  const code = typeof children === "string" ? children.trim() : Array.isArray(children) ? children.join("").trim() : "";
+  const [copied, setCopied] = useState6(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    toast2.success("Copied to clipboard!");
+    setCopied(true);
+  };
+  useEffect5(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopied(false), 2e3);
+      return () => clearTimeout(timeout);
+    }
+  }, [copied]);
+  return /* @__PURE__ */ jsxs13("div", { className: "max-w-2xl overflow-hidden rounded-lg text-sm text-gray-800 border border-gray-200/80 mt-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center bg-gray-50 justify-between border-b border-gray-200/80", children: [
+      /* @__PURE__ */ jsx16("div", { className: "text-xs text-gray-400 p-4", children: language }),
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "rounded aspect-square p-2 m-2 text-xs hover:bg-gray-200 transition",
+          children: copied ? /* @__PURE__ */ jsx16(CheckIcon2, { className: "size-4" }) : /* @__PURE__ */ jsx16(CopyIcon2, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16(Highlight, { code, language, theme: themes.nightOwlLight, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx16("pre", { className: "p-4 font-mono whitespace-pre scrollbar-x overflow-x-auto", style, children: tokens.map((line, i) => /* @__PURE__ */ jsx16("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx16("span", { ...getTokenProps({ token }) }, key)) }, i)) }) })
+  ] });
+}
+export {
+  DocstraBody,
+  DocstraCodeBlock,
+  DocstraHeader,
+  DocstraPage,
+  DocstraProvider,
+  DocstraSidebar,
+  DocstraTOC,
+  useDocstra
+};