docstra 0.1.0 → 1.0.1

package/dist/client/index.js

@@ -0,0 +1,824 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.ts
+var client_exports = {};
+__export(client_exports, {
+  DocstraBody: () => DocstraBody,
+  DocstraCodeBlock: () => DocstraCodeBlock,
+  DocstraHeader: () => DocstraHeader,
+  DocstraPage: () => DocstraPage,
+  DocstraProvider: () => DocstraProvider,
+  DocstraSidebar: () => DocstraSidebar,
+  DocstraTOC: () => DocstraTOC,
+  useDocstra: () => useDocstra
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/context/docstra-context.tsx
+var import_react2 = require("react");
+var import_react_toast_msg = require("react-toast-msg");
+
+// src/client/search-box.tsx
+var import_lucide_react = require("lucide-react");
+
+// src/utils/cn.ts
+var import_tailwind_merge = require("tailwind-merge");
+var import_clsx = __toESM(require("clsx"));
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.default)(inputs));
+}
+
+// src/client/search-box.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DocstraSearchBox() {
+  const { openSearchBox, setOpenSearchBox } = useDocstra();
+  const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    console.log(`Search query: ${searchQuery}`);
+  }, [searchQuery]);
+  (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SearchIcon, { className: "size-5.5 mx-3 shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DocstraContext = (0, import_react2.createContext)(null);
+function DocstraProvider({
+  children,
+  docstraConfig
+}) {
+  const [openSidebar, setOpenSidebar] = (0, import_react2.useState)(false);
+  const [openSearchBox, setOpenSearchBox] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    DocstraContext.Provider,
+    {
+      value: {
+        openSidebar,
+        setOpenSidebar,
+        docstraConfig,
+        openSearchBox,
+        setOpenSearchBox
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_toast_msg.ToastContainer, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DocstraSearchBox, {}),
+        children
+      ]
+    }
+  );
+}
+function useDocstra() {
+  const ctx = (0, import_react2.useContext)(DocstraContext);
+  if (!ctx) throw new Error("Please wrap your app with DocstraProvider");
+  return ctx;
+}
+
+// src/client/header.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_react3 = require("react");
+
+// src/client/link.tsx
+var import_link = __toESM(require("next/link"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Link({ href, children, className, onNavigate, ...props }) {
+  if (href.startsWith("http")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href, className, ...props, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link.default, { href, className, onNavigate, ...props, "aria-label": "Ns", children });
+}
+
+// src/client/header.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DocstraHeader() {
+  const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
+  (0, import_react3.useEffect)(() => {
+    if (openSidebar) {
+      document.body.classList.add("max-md:overflow-hidden");
+    } else {
+      document.body.classList.remove("max-md:overflow-hidden");
+    }
+  }, [openSidebar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)(Link, { href: docstraConfig.navbar?.logo?.link || "/", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hidden divide-x divide-gray-200 md:flex items-center", children: [
+      docstraConfig.navbar?.links?.map((link) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: link.href, className: "px-6 hover:text-gray-500", children: link.name }, link.name)),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: docstraConfig?.githubRepo || "https://github.com/sudhucodes/docstra", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "size-6 mx-6", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.XIcon, { className: "size-6.5" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.TextAlignEnd, { className: "size-6.5" })
+      }
+    )
+  ] });
+}
+
+// src/client/sidebar.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_navigation = require("next/navigation");
+
+// src/utils/get-icon.ts
+var Icons = __toESM(require("lucide-react"));
+function getIcon(name) {
+  if (!name) return void 0;
+  return Icons[name];
+}
+
+// src/client/sidebar.tsx
+var import_react_toast_msg2 = require("react-toast-msg");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DocstraSidebar() {
+  const { openSidebar, setOpenSidebar, docstraConfig } = useDocstra();
+  const pathname = (0, import_navigation.usePathname)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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__ */ (0, import_jsx_runtime5.jsxs)(
+      "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__ */ (0, import_jsx_runtime5.jsxs)(
+            "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: () => import_react_toast_msg2.toast.success("Docstra: Search is coming soon!"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.SearchIcon, { className: "size-4.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Search" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ms-auto font-mono inline-flex gap-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "rounded-md border border-gray-200 px-1.5", children: "Ctrl" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "rounded-md border border-gray-200 px-1.5", children: "K" })
+                ] })
+              ]
+            }
+          ),
+          docstraConfig.sidebar?.links?.map((group) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "inline-flex items-center gap-2 mb-2 mt-2 px-2", children: group.section }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mb-4", children: group.items.map((link) => {
+              const Icon = getIcon(link.icon);
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                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__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "size-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: link.name })
+                  ]
+                }
+              ) }, link.href);
+            }) })
+          ] }, group.section))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/client/docs-page.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DocstraPage({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-screen flex bg-white w-full", children });
+}
+
+// src/client/breadcrumbs.tsx
+var import_navigation2 = require("next/navigation");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DocstraBreadcrumbs() {
+  const pathname = (0, import_navigation2.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_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)(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__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.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)(Link, { 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_navigation3 = require("next/navigation");
+var import_react4 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DocstraPageButtons({ rawMdxContent }) {
+  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
+  const [href, setHref] = (0, import_react4.useState)(null);
+  const pathname = (0, import_navigation3.usePathname)();
+  (0, import_react4.useEffect)(() => {
+    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__ */ (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 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_runtime8.jsx)(import_lucide_react5.CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.CopyIcon, { className: "size-3.5" }),
+          "Copy Markdown"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DocstraPageHead({ metadata, mdxContent }) {
+  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: metadata.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "my-4 text-gray-500", children: metadata.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocstraPageButtons, { rawMdxContent: mdxContent }),
+    /* @__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/input.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Input({
+  label,
+  type,
+  placeholder = "",
+  id,
+  required = false,
+  onChange,
+  value,
+  readOnly = false,
+  className = "",
+  optional = false
+}) {
+  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_runtime10.jsx)("span", { className: "text-xs font-normal text-gray-400 ml-1 mt-1", children: "(Optional)" })
+    ] }),
+    type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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__ */ (0, import_jsx_runtime10.jsx)(
+      "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
+var import_lucide_react6 = 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_runtime11.jsx)(
+    "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__ */ (0, import_jsx_runtime11.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
+    }
+  );
+}
+
+// src/client/feedback.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function DocstraFeedback() {
+  const [opinion, setOpinion] = (0, import_react5.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_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: () => {
+          setSubmitted(false);
+          setOpinion(null);
+          setMessage("");
+        },
+        label: "Submit Again",
+        className: "w-max text-sm"
+      }
+    )
+  ] }) : /* @__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 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_runtime12.jsx)(import_lucide_react7.ThumbsUp, { className: `size-4 ${opinion === "good" ? "fill-green-600" : "text-gray-500"}` }),
+            "Good"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "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__ */ (0, import_jsx_runtime12.jsx)(
+              import_lucide_react7.ThumbsDown,
+              {
+                className: `size-4 pt-0.5 ${opinion === "bad" ? "fill-red-600" : "text-gray-500"}`
+              }
+            ),
+            "Bad"
+          ]
+        }
+      )
+    ] }),
+    opinion && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "form",
+      {
+        className: "flex flex-col gap-2",
+        action: `https://formsync.app/v1/s/${docstraConfig?.formSyncFormID || "your-form-id"}`,
+        method: "POST",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Input,
+            {
+              value: message,
+              id: "message",
+              onChange: (e) => setMessage(e.target.value),
+              placeholder: "Leave your feedback...",
+              required: true,
+              type: "textarea"
+            }
+          ),
+          /* @__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" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-left text-sm text-gray-500 mt-6", children: [
+            "Powered by",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: "https://www.formsync.app?utm_source=formsync-docs", className: "text-gray-800", children: "FormSync" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/client/pagination.tsx
+var import_navigation4 = require("next/navigation");
+var import_link5 = __toESM(require("next/link"));
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DocstraPagination() {
+  const pathname = (0, import_navigation4.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_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 hover:bg-gray-100 py-3 md:min-w-52 pl-4 pr-10 rounded-lg text-sm",
+        children: [
+          /* @__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_react8.ArrowLeftIcon, { className: "size-5 mr-2" }),
+            prev.name
+          ] })
+        ]
+      }
+    ) : /* @__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 hover:bg-gray-100 py-3 pr-4 md:min-w-52 pl-10 rounded-lg text-sm",
+        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_runtime13.jsx)(import_lucide_react8.ArrowRightIcon, { className: "size-5 ml-2" })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {})
+  ] });
+}
+
+// src/client/docs-body.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DocstraBody({ children, metadata, mdxContent }) {
+  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, { metadata, mdxContent }),
+    children,
+    /* @__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_runtime15 = require("react/jsx-runtime");
+function DocstraTOC({ mdxFilePath, rawMdxContent }) {
+  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 } = useDocstra();
+  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.split("app")[1];
+  (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 (!isManualClick) return;
+    const timer = setTimeout(() => setIsManualClick(false), 800);
+    return () => clearTimeout(timer);
+  }, [isManualClick]);
+  const handleClick = (id) => {
+    setActiveId(id);
+    setIsManualClick(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("p", { className: "flex items-center gap-2 mb-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.TextAlignStartIcon, { className: "size-4" }),
+      "On this page"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: headings.map((h2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableOfContentsLink, { heading: h2, activeId, handleClick }),
+      h2.children.map((h3) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        TableOfContentsLink,
+        {
+          heading: h3,
+          activeId,
+          handleClick,
+          className: "pl-8"
+        },
+        h3.id
+      ))
+    ] }, h2.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: "my-6 border-gray-200" }),
+    docstraConfig.editOnGithub && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(import_lucide_react9.SquareArrowOutUpRightIcon, { className: "size-4" })
+        ]
+      }
+    ),
+    isScrolled && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(import_lucide_react9.ArrowUpCircleIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+}
+function TableOfContentsLink({ heading, activeId, handleClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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
+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_msg3 = require("react-toast-msg");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function DocstraCodeBlock(props) {
+  const { className, children } = props.children?.props || props;
+  if (!className || !className.startsWith("language-")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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] = (0, import_react7.useState)(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    import_react_toast_msg3.toast.success("Copied to clipboard!");
+    setCopied(true);
+  };
+  (0, import_react7.useEffect)(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopied(false), 2e3);
+      return () => clearTimeout(timeout);
+    }
+  }, [copied]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "max-w-2xl overflow-hidden rounded-lg text-sm text-gray-800 border border-gray-200/80 mt-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center bg-gray-50 justify-between border-b border-gray-200/80", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs text-gray-400 p-4", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "rounded aspect-square p-2 m-2 text-xs hover:bg-gray-200 transition",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.CopyIcon, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_prism_react_renderer.Highlight, { code, language, theme: import_prism_react_renderer.themes.nightOwlLight, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", { className: "p-4 font-mono whitespace-pre scrollbar-x overflow-x-auto", style, children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...getTokenProps({ token }) }, key)) }, i)) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DocstraBody,
+  DocstraCodeBlock,
+  DocstraHeader,
+  DocstraPage,
+  DocstraProvider,
+  DocstraSidebar,
+  DocstraTOC,
+  useDocstra
+});